chrome-devtools-frontend 1.0.970539 → 1.0.972865

package/front_end/panels/lighthouse/LighthouseProtocolService.ts

@@ -10,6 +10,12 @@ import type * as ReportRenderer from './LighthouseReporterTypes.js';
 
 let lastId = 1;
 
+export interface LighthouseRun {
+  inspectedURL: string;
+  categoryIDs: string[];
+  flags: Record<string, Object|undefined>;
+}
+
 export class ProtocolService {
   private targetInfo?: {
     mainSessionId: string,
@@ -58,14 +64,36 @@ export class ProtocolService {
     return [i18n.DevToolsLocale.DevToolsLocale.instance().locale];
   }
 
-  async startLighthouse(auditURL: string, categoryIDs: string[], flags: Record<string, Object|undefined>):
-      Promise<ReportRenderer.RunnerResult> {
+  async startTimespan(currentLighthouseRun: LighthouseRun): Promise<void> {
+    const {inspectedURL, categoryIDs, flags} = currentLighthouseRun;
+
     if (!this.targetInfo) {
       throw new Error('Unable to get target info required for Lighthouse');
     }
-    const mode = flags.legacyNavigation ? 'start' : 'navigate';
+
+    await this.sendWithResponse('startTimespan', {
+      url: inspectedURL,
+      categoryIDs,
+      flags,
+      locales: this.getLocales(),
+      target: this.targetInfo,
+    });
+  }
+
+  async collectLighthouseResults(currentLighthouseRun: LighthouseRun): Promise<ReportRenderer.RunnerResult> {
+    const {inspectedURL, categoryIDs, flags} = currentLighthouseRun;
+
+    if (!this.targetInfo) {
+      throw new Error('Unable to get target info required for Lighthouse');
+    }
+
+    let mode = flags.mode as string;
+    if (mode === 'timespan') {
+      mode = 'endTimespan';
+    }
+
     return this.sendWithResponse(mode, {
-      url: auditURL,
+      url: inspectedURL,
       categoryIDs,
       flags,
       locales: this.getLocales(),

package/front_end/panels/lighthouse/LighthouseReportRenderer.ts

@@ -127,11 +127,6 @@ export class LighthouseReportRenderer extends LighthouseReport.ReportRenderer {
         showColumnNumber: false,
         inlineFrameIndex: 0,
         maxLength: MaxLengthForLinks,
-        bypassURLTrimming: undefined,
-        className: undefined,
-        preventClick: undefined,
-        tabStop: undefined,
-        text: undefined,
       });
       UI.Tooltip.Tooltip.install(origHTMLElement, '');
       origHTMLElement.textContent = '';

package/front_end/panels/lighthouse/LighthouseStartView.ts

@@ -41,9 +41,9 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/lighthouse/LighthouseStartView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class StartView extends UI.Widget.Widget {
-  private controller: LighthouseController;
+  protected controller: LighthouseController;
   private readonly settingsToolbarInternal: UI.Toolbar.Toolbar;
-  private startButton!: HTMLButtonElement;
+  protected startButton!: HTMLButtonElement;
   private helpText?: Element;
   private warningText?: Element;
   private shouldConfirm?: boolean;
@@ -60,7 +60,7 @@ export class StartView extends UI.Widget.Widget {
     return this.settingsToolbarInternal;
   }
 
-  private populateRuntimeSettingAsRadio(settingName: string, label: string, parentElement: Element): void {
+  protected populateRuntimeSettingAsRadio(settingName: string, label: string, parentElement: Element): void {
     const runtimeSetting = RuntimeSettings.find(item => item.setting.name === settingName);
     if (!runtimeSetting || !runtimeSetting.options) {
       throw new Error(`${settingName} is not a setting with options`);
@@ -112,7 +112,7 @@ export class StartView extends UI.Widget.Widget {
     UI.ARIAUtils.setAccessibleName(pluginFormElements, i18nString(UIStrings.communityPluginsBeta));
   }
 
-  private render(): void {
+  protected render(): void {
     this.populateRuntimeSettingAsToolbarCheckbox('lighthouse.legacy_navigation', this.settingsToolbarInternal);
     this.populateRuntimeSettingAsToolbarCheckbox('lighthouse.clear_storage', this.settingsToolbarInternal);
     this.populateRuntimeSettingAsToolbarCheckbox('lighthouse.throttling', this.settingsToolbarInternal);
@@ -173,6 +173,10 @@ export class StartView extends UI.Widget.Widget {
     this.contentElement.style.overflow = 'auto';
   }
 
+  updateStartButton(): void {
+    // Do nothing in default case.
+  }
+
   onResize(): void {
     const useNarrowLayout = this.contentElement.offsetWidth < 560;
     const startViewEl = this.contentElement.querySelector('.lighthouse-start-view');

package/front_end/panels/lighthouse/LighthouseStartViewFR.ts

@@ -0,0 +1,100 @@
+// Copyright 2022 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as i18n from '../../core/i18n/i18n.js';
+import * as UI from '../../ui/legacy/legacy.js';
+import type * as Platform from '../../core/platform/platform.js';
+
+import {StartView} from './LighthouseStartView.js';
+import {Events} from './LighthouseController.js';
+
+const UIStrings = {
+  /**
+   * @description Text that refers to the Lighthouse mode
+   */
+  mode: 'Mode',
+  /**
+   * @description Label for a button to start analyzing a page navigation with Lighthouse
+   */
+  analyzeNavigation: 'Analyze navigation',
+  /**
+   * @description Label for a button to start analyzing the current page state with Lighthouse
+   */
+  analyzeSnapshot: 'Analyze snapshot',
+  /**
+   * @description Label for a button that ends a Lighthouse timespan
+   */
+  startTimespan: 'Start timespan',
+};
+
+const str_ = i18n.i18n.registerUIStrings('panels/lighthouse/LighthouseStartViewFR.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export class StartViewFR extends StartView {
+  protected render(): void {
+    super.render();
+    const fragment = UI.Fragment.Fragment.build`
+  <div class="lighthouse-form-section">
+  <div class="lighthouse-form-section-label">
+  ${i18nString(UIStrings.mode)}
+  </div>
+  <div class="lighthouse-form-elements" $="mode-form-elements"></div>
+  </div>
+    `;
+
+    // Populate the Lighthouse mode
+    const modeFormElements = fragment.$('mode-form-elements');
+    this.populateRuntimeSettingAsRadio('lighthouse.mode', i18nString(UIStrings.mode), modeFormElements);
+
+    const form = this.contentElement.querySelector('form');
+    form?.appendChild(fragment.element());
+    this.updateStartButton();
+  }
+
+  updateStartButton(): void {
+    const {mode} = this.controller.getFlags();
+
+    let label: Platform.UIString.LocalizedString;
+    let callback: () => void;
+
+    if (mode === 'timespan') {
+      label = i18nString(UIStrings.startTimespan);
+      callback = (): void => {
+        this.controller.dispatchEventToListeners(
+            Events.RequestLighthouseTimespanStart,
+            /* keyboardInitiated */ this.startButton.matches(':focus-visible'),
+        );
+      };
+    } else if (mode === 'snapshot') {
+      label = i18nString(UIStrings.analyzeSnapshot);
+      callback = (): void => {
+        this.controller.dispatchEventToListeners(
+            Events.RequestLighthouseStart,
+            /* keyboardInitiated */ this.startButton.matches(':focus-visible'),
+        );
+      };
+    } else {
+      label = i18nString(UIStrings.analyzeNavigation);
+      callback = (): void => {
+        this.controller.dispatchEventToListeners(
+            Events.RequestLighthouseStart,
+            /* keyboardInitiated */ this.startButton.matches(':focus-visible'),
+        );
+      };
+    }
+
+    this.startButton = UI.UIUtils.createTextButton(
+        label,
+        callback,
+        /* className */ '',
+        /* primary */ true,
+    );
+
+    const startButtonContainer = this.contentElement.querySelector('.lighthouse-start-button-container');
+    if (startButtonContainer) {
+      startButtonContainer.textContent = '';
+      startButtonContainer.appendChild(this.startButton);
+    }
+  }
+}

package/front_end/panels/lighthouse/LighthouseTimespanView.ts

@@ -0,0 +1,99 @@
+// Copyright 2022 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as i18n from '../../core/i18n/i18n.js';
+import * as UI from '../../ui/legacy/legacy.js';
+
+import type {LighthouseController} from './LighthouseController.js';
+import {Events} from './LighthouseController.js';
+import lighthouseDialogStyles from './lighthouseDialog.css.js';
+
+const UIStrings = {
+  /**
+   * @description Header indicating that a Lighthouse timespan is starting.
+   */
+  timespanStarting: 'Timespan starting…',
+  /**
+   * @description Header indicating that a Lighthouse timespan has started.
+   */
+  timespanStarted: 'Timespan started, interact with the page',
+  /**
+   * @description Label for a button that ends a Lighthouse timespan.
+   */
+  endTimespan: 'End timespan',
+  /**
+   * @description Label for a button that cancels a Lighthouse timespan.
+   */
+  cancel: 'Cancel',
+};
+
+const str_ = i18n.i18n.registerUIStrings('panels/lighthouse/LighthouseTimespanView.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export class TimespanView extends UI.Dialog.Dialog {
+  private controller: LighthouseController;
+  private statusHeader: Element|null;
+  private endButton: HTMLButtonElement|null;
+
+  constructor(controller: LighthouseController) {
+    super();
+    this.controller = controller;
+    this.statusHeader = null;
+    this.endButton = null;
+    this.setDimmed(true);
+    this.setCloseOnEscape(false);
+    this.setOutsideClickCallback(event => event.consume(true));
+    this.render();
+  }
+
+  show(dialogRenderElement: Element): void {
+    this.reset();
+    super.show(dialogRenderElement);
+  }
+
+  reset(): void {
+    if (this.statusHeader && this.endButton) {
+      this.statusHeader.textContent = i18nString(UIStrings.timespanStarting);
+      this.endButton.disabled = true;
+    }
+  }
+
+  ready(): void {
+    if (this.statusHeader && this.endButton) {
+      this.statusHeader.textContent = i18nString(UIStrings.timespanStarted);
+      this.endButton.disabled = false;
+      this.endButton.focus();
+    }
+  }
+
+  render(): void {
+    const dialogRoot = UI.Utils.createShadowRootWithCoreStyles(
+        this.contentElement, {cssFile: [lighthouseDialogStyles], delegatesFocus: undefined});
+
+    this.endButton = UI.UIUtils.createTextButton(i18nString(UIStrings.endTimespan), this.endTimespan.bind(this));
+    const cancelButton = UI.UIUtils.createTextButton(i18nString(UIStrings.cancel), this.cancel.bind(this));
+    const fragment = UI.Fragment.Fragment.build`
+  <div class="lighthouse-view vbox">
+  <h2 $="status-header"></h2>
+  ${this.endButton}
+  ${cancelButton}
+  </div>
+  `;
+
+    this.statusHeader = fragment.$('status-header');
+    dialogRoot.appendChild(fragment.element());
+
+    this.setSizeBehavior(UI.GlassPane.SizeBehavior.SetExactWidthMaxHeight);
+    this.setMaxContentSize(new UI.Geometry.Size(500, 400));
+    this.reset();
+  }
+
+  private endTimespan(): void {
+    this.controller.dispatchEventToListeners(Events.RequestLighthouseTimespanEnd, false);
+  }
+
+  private cancel(): void {
+    this.controller.dispatchEventToListeners(Events.RequestLighthouseCancel);
+  }
+}

package/front_end/panels/network/NetworkDataGridNode.ts

@@ -1216,7 +1216,7 @@ export class NetworkRequestNode extends NetworkNode {
         } else {
           this.linkifiedInitiatorAnchor = linkifier.linkifyScriptLocation(
               networkManager.target(), initiator.scriptId, initiator.url, initiator.lineNumber,
-              {columnNumber: initiator.columnNumber, inlineFrameIndex: 0, className: undefined, tabStop: undefined});
+              {columnNumber: initiator.columnNumber, inlineFrameIndex: 0});
         }
         UI.Tooltip.Tooltip.install((this.linkifiedInitiatorAnchor), '');
         cell.appendChild(this.linkifiedInitiatorAnchor);

package/front_end/panels/profiler/CPUProfileView.ts

@@ -310,7 +310,7 @@ export class NodeFormatter implements Formatter {
   linkifyNode(node: ProfileDataGridNode): Element|null {
     const cpuProfilerModel = this.profileView.profileHeader.cpuProfilerModel;
     const target = cpuProfilerModel ? cpuProfilerModel.target() : null;
-    const options = {className: 'profile-node-file', columnNumber: undefined, inlineFrameIndex: 0, tabStop: undefined};
+    const options = {className: 'profile-node-file', inlineFrameIndex: 0};
     return this.profileView.linkifier().maybeLinkifyConsoleCallFrame(target, node.profileNode.callFrame, options);
   }
 }

package/front_end/panels/profiler/HeapProfileView.ts

@@ -620,9 +620,7 @@ export class NodeFormatter implements Formatter {
     const target = heapProfilerModel ? heapProfilerModel.target() : null;
     const options = {
       className: 'profile-node-file',
-      columnNumber: undefined,
       inlineFrameIndex: 0,
-      tabStop: undefined,
     };
     return this.profileView.linkifier().maybeLinkifyConsoleCallFrame(target, node.profileNode.callFrame, options);
   }

package/front_end/panels/profiler/HeapSnapshotGridNodes.ts

@@ -1301,7 +1301,6 @@ export class AllocationGridNode extends HeapSnapshotGridNode {
             columnNumber: allocationNode.column - 1,
             inlineFrameIndex: 0,
             className: 'profile-node-file',
-            tabStop: undefined,
           });
       urlElement.style.maxWidth = '75%';
       cell.insertBefore(urlElement, cell.firstChild);

package/front_end/panels/profiler/HeapSnapshotView.ts

@@ -1887,10 +1887,9 @@ export class HeapAllocationStackView extends UI.Widget.Widget {
         continue;
       }
       const target = this.heapProfilerModel ? this.heapProfilerModel.target() : null;
-      const options = {columnNumber: frame.column - 1};
+      const options = {columnNumber: frame.column - 1, inlineFrameIndex: 0};
       const urlElement = this.linkifier.linkifyScriptLocation(
-          target, String(frame.scriptId) as Protocol.Runtime.ScriptId, frame.scriptName, frame.line - 1,
-          (options as Components.Linkifier.LinkifyOptions));
+          target, String(frame.scriptId) as Protocol.Runtime.ScriptId, frame.scriptName, frame.line - 1, options);
       frameDiv.appendChild(urlElement);
       stackFrameToURLElement.set(frameDiv, urlElement);
       frameDiv.addEventListener('contextmenu', this.onContextMenu.bind(this, urlElement));

package/front_end/panels/sensors/sensors.css

@@ -107,7 +107,6 @@
 .orientation-stage.disabled {
   filter: grayscale();
   opacity: 50%;
-  cursor: default !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .orientation-element,

package/front_end/panels/snippets/ScriptSnippetFileSystem.ts

@@ -126,7 +126,7 @@ export class SnippetFileSystem extends Persistence.PlatformFileSystem.PlatformFi
     return Common.ResourceType.resourceTypes.Script;
   }
 
-  tooltipForURL(url: string): string {
+  tooltipForURL(url: Platform.DevToolsPath.UrlString): string {
     return i18nString(UIStrings.linkedTo, {PH1: unescapeSnippetName(url.substring(this.path().length))});
   }
 

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -36,6 +36,7 @@ import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as Bindings from '../../models/bindings/bindings.js';
+import * as SourceMapScopes from '../../models/source_map_scopes/source_map_scopes.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
@@ -48,7 +49,6 @@ import {AddSourceMapURLDialog} from './AddSourceMapURLDialog.js';
 import {BreakpointEditDialog, LogpointPrefix} from './BreakpointEditDialog.js';
 import {Plugin} from './Plugin.js';
 import {ScriptFormatterEditorAction} from './ScriptFormatterEditorAction.js';
-import {resolveExpression, resolveScopeInObject} from './SourceMapNamesResolver.js';
 import {SourcesPanel} from './SourcesPanel.js';
 import {getRegisteredEditorActions} from './SourcesView.js';
 
@@ -476,7 +476,7 @@ export class DebuggerPlugin extends Plugin {
       if (!url) {
         return;
       }
-      scriptFile.addSourceMapURL(url);
+      scriptFile.addSourceMapURL(url as Platform.DevToolsPath.UrlString);
     }
 
     if (this.uiSourceCode.project().type() === Workspace.Workspace.projectTypes.Network &&
@@ -650,7 +650,7 @@ export class DebuggerPlugin extends Plugin {
     }|{
       error: string,
     }|null> {
-      const resolvedText = await resolveExpression(
+      const resolvedText = await SourceMapScopes.NamesResolver.resolveExpression(
           selectedCallFrame, evaluationText, uiSourceCode, highlightLine.number - 1,
           highlightRange.from - highlightLine.from, highlightRange.to - highlightLine.from);
       return await selectedCallFrame.evaluate({
@@ -887,7 +887,8 @@ export class DebuggerPlugin extends Plugin {
       return null;
     }
 
-    const {properties} = await resolveScopeInObject(localScope).getAllProperties(false, false);
+    const {properties} =
+        await SourceMapScopes.NamesResolver.resolveScopeInObject(localScope).getAllProperties(false, false);
     if (!properties || !properties.length || properties.length > 500) {
       return null;
     }

package/front_end/panels/sources/NavigatorView.ts

@@ -400,7 +400,9 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
 
     const removedFrame = (event.data.frame as SDK.ResourceTreeModel.ResourceTreeFrame | null);
     const node = Array.from(this.uiSourceCodeNodes.get(uiSourceCode)).find(node => node.frame() === removedFrame);
-    this.removeUISourceCodeNode((node as NavigatorUISourceCodeTreeNode));
+    if (node) {
+      this.removeUISourceCodeNode(node);
+    }
   }
 
   private acceptsUISourceCode(uiSourceCode: Workspace.UISourceCode.UISourceCode): boolean {
@@ -428,9 +430,12 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
     const isFromSourceMap = uiSourceCode.contentType().isFromSourceMap();
     let path;
     if (uiSourceCode.project().type() === Workspace.Workspace.projectTypes.FileSystem) {
-      path = Persistence.FileSystemWorkspaceBinding.FileSystemWorkspaceBinding.relativePath(uiSourceCode).slice(0, -1);
+      path =
+          Persistence.FileSystemWorkspaceBinding.FileSystemWorkspaceBinding.relativePath(uiSourceCode).slice(0, -1) as
+          Platform.DevToolsPath.EncodedPathString[];
     } else {
-      path = Common.ParsedURL.ParsedURL.extractPath(uiSourceCode.url()).split('/').slice(1, -1);
+      path = Common.ParsedURL.ParsedURL.extractPath(uiSourceCode.url()).split('/').slice(1, -1) as
+          Platform.DevToolsPath.EncodedPathString[];
     }
 
     const project = uiSourceCode.project();
@@ -503,7 +508,8 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
       const commonPrefix = reversedIndex.longestPrefix(reversedPath, false /* fullWordOnly */);
       reversedIndex.add(reversedPath);
       const prefixPath = reversedPath.substring(0, commonPrefix.length + 1);
-      const path = encoder.decode(Platform.StringUtilities.reverse(prefixPath));
+      const path = Common.ParsedURL.ParsedURL.encodedPathToRawPathString(
+          encoder.decode(Platform.StringUtilities.reverse(prefixPath)) as Platform.DevToolsPath.EncodedPathString);
 
       const fileSystemNode = this.rootNode.child(project.id());
       if (fileSystemNode) {
@@ -539,7 +545,7 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
   private folderNode(
       uiSourceCode: Workspace.UISourceCode.UISourceCode, project: Workspace.Workspace.Project,
       target: SDK.Target.Target|null, frame: SDK.ResourceTreeModel.ResourceTreeFrame|null, projectOrigin: string,
-      path: string[], fromSourceMap: boolean): NavigatorTreeNode {
+      path: Platform.DevToolsPath.EncodedPathString[], fromSourceMap: boolean): NavigatorTreeNode {
     if (Snippets.ScriptSnippetFileSystem.isSnippetsUISourceCode(uiSourceCode)) {
       return this.rootNode;
     }
@@ -568,7 +574,7 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
     if (project.type() === Workspace.Workspace.projectTypes.FileSystem) {
       type = Types.FileSystemFolder;
     }
-    const name = path[path.length - 1];
+    const name = Common.ParsedURL.ParsedURL.encodedPathToRawPathString(path[path.length - 1]);
 
     folderNode = new NavigatorFolderTreeNode(this, project, folderId, type, folderPath, name);
     this.subfolderNodes.set(folderId, folderNode);
@@ -848,10 +854,8 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
     }
 
     if (project.type() === Workspace.Workspace.projectTypes.FileSystem) {
-      // TODO(crbug.com/1253323): Cast to RawPathString will be removed when migration to branded types is complete.
       const folderPath = Common.ParsedURL.ParsedURL.urlToRawPathString(
-          Persistence.FileSystemWorkspaceBinding.FileSystemWorkspaceBinding.completeURL(project, path) as
-              Platform.DevToolsPath.UrlString,
+          Persistence.FileSystemWorkspaceBinding.FileSystemWorkspaceBinding.completeURL(project, path),
           Host.Platform.isWin());
       contextMenu.revealSection().appendItem(
           i18nString(UIStrings.openFolder),
@@ -1360,7 +1364,7 @@ export class NavigatorUISourceCodeTreeNode extends NavigatorTreeNode {
     this.treeElement.title = titleText;
     this.treeElement.updateIcon();
 
-    let tooltip = this.uiSourceCodeInternal.url();
+    let tooltip: string = this.uiSourceCodeInternal.url();
     if (this.uiSourceCodeInternal.contentType().isFromSourceMap()) {
       tooltip = i18nString(UIStrings.sFromSourceMap, {PH1: this.uiSourceCodeInternal.displayName()});
     }

package/front_end/panels/sources/ScopeChainSidebarPane.ts

@@ -34,13 +34,13 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as Bindings from '../../models/bindings/bindings.js';
+import * as SourceMapScopes from '../../models/source_map_scopes/source_map_scopes.js';
 import * as LinearMemoryInspector from '../../ui/components/linear_memory_inspector/linear_memory_inspector.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import scopeChainSidebarPaneStyles from './scopeChainSidebarPane.css.js';
-import {resolveScopeChain, resolveScopeInObject, resolveThisObject} from './SourceMapNamesResolver.js';
 
 const UIStrings = {
   /**
@@ -168,7 +168,10 @@ export class ScopeChainSidebarPane extends UI.Widget.VBox implements UI.ContextF
 
     const callFrame = UI.Context.Context.instance().flavor(SDK.DebuggerModel.CallFrame);
     this.setScopeSourceMapSubscription(callFrame);
-    const [thisObject, scopeChain] = await Promise.all([resolveThisObject(callFrame), resolveScopeChain(callFrame)]);
+    const [thisObject, scopeChain] = await Promise.all([
+      SourceMapScopes.NamesResolver.resolveThisObject(callFrame),
+      SourceMapScopes.NamesResolver.resolveScopeChain(callFrame),
+    ]);
     // By now the developer might have moved on, and we don't want to show stale
     // scope information, so check again that we're still on the same CallFrame.
     if (callFrame === UI.Context.Context.instance().flavor(SDK.DebuggerModel.CallFrame)) {
@@ -243,7 +246,7 @@ export class ScopeChainSidebarPane extends UI.Widget.VBox implements UI.ContextF
     titleElement.createChild('div', 'scope-chain-sidebar-pane-section-title').textContent = title;
 
     const section = new ObjectUI.ObjectPropertiesSection.RootElement(
-        resolveScopeInObject(scope), this.linkifier, emptyPlaceholder,
+        SourceMapScopes.NamesResolver.resolveScopeInObject(scope), this.linkifier, emptyPlaceholder,
         ObjectUI.ObjectPropertiesSection.ObjectPropertiesMode.All, extraProperties);
     section.title = titleElement;
     section.listItemElement.classList.add('scope-chain-sidebar-pane-section');

package/front_end/panels/sources/SourcesNavigator.ts

@@ -33,6 +33,7 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Persistence from '../../models/persistence/persistence.js';
+import type * as Platform from '../../core/platform/platform.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Snippets from '../snippets/snippets.js';
@@ -378,9 +379,14 @@ export class SnippetsNavigatorView extends NavigatorView {
   private async handleSaveAs(uiSourceCode: Workspace.UISourceCode.UISourceCode): Promise<void> {
     uiSourceCode.commitWorkingCopy();
     const {content} = await uiSourceCode.requestContent();
-    void Workspace.FileManager.FileManager.instance().save(uiSourceCode.url(), content || '', true);
+    void Workspace.FileManager.FileManager.instance().save(
+        this.addJSExtension(uiSourceCode.url()), content || '', true);
     Workspace.FileManager.FileManager.instance().close(uiSourceCode.url());
   }
+
+  private addJSExtension(url: Platform.DevToolsPath.UrlString): Platform.DevToolsPath.UrlString {
+    return Common.ParsedURL.ParsedURL.concatenate(url, '.js');
+  }
 }
 
 let actionDelegateInstance: ActionDelegate;

package/front_end/panels/sources/sources-legacy.ts

@@ -4,6 +4,8 @@
 
 // @ts-nocheck
 
+import * as SourceMapScopesModule from '../../models/source_map_scopes/source_map_scopes.js';
+
 import * as SourcesModule from './sources.js';
 
 self.Sources = self.Sources || {};
@@ -139,26 +141,13 @@ Sources.SnippetsPlugin = SourcesModule.SnippetsPlugin.SnippetsPlugin;
 
 Sources.SourceMapNamesResolver = {};
 
-Sources.SourceMapNamesResolver.setScopeResolvedForTest = SourcesModule.SourceMapNamesResolver.setScopeResolvedForTest;
-
 // Tests can override this global symbol and therefore can't be exported
 Object.defineProperty(Sources.SourceMapNamesResolver, '_scopeResolvedForTest', {
-  get: SourcesModule.SourceMapNamesResolver.getScopeResolvedForTest,
-  set: SourcesModule.SourceMapNamesResolver.setScopeResolvedForTest,
+  get: SourceMapScopesModule.NamesResolver.getScopeResolvedForTest,
+  set: SourceMapScopesModule.NamesResolver.setScopeResolvedForTest,
 });
 
-Sources.SourceMapNamesResolver._scopeIdentifiers = SourcesModule.SourceMapNamesResolver.scopeIdentifiers;
-Sources.SourceMapNamesResolver._resolveScope = SourcesModule.SourceMapNamesResolver.resolveScope;
-Sources.SourceMapNamesResolver._allVariablesInCallFrame = SourcesModule.SourceMapNamesResolver.allVariablesInCallFrame;
-Sources.SourceMapNamesResolver.resolveExpression = SourcesModule.SourceMapNamesResolver.resolveExpression;
-Sources.SourceMapNamesResolver.resolveThisObject = SourcesModule.SourceMapNamesResolver.resolveThisObject;
-Sources.SourceMapNamesResolver.resolveScopeInObject = SourcesModule.SourceMapNamesResolver.resolveScopeInObject;
-
-/** @constructor */
-Sources.SourceMapNamesResolver.Identifier = SourcesModule.SourceMapNamesResolver.Identifier;
-
-/** @constructor */
-Sources.SourceMapNamesResolver.RemoteObject = SourcesModule.SourceMapNamesResolver.RemoteObject;
+Sources.SourceMapNamesResolver.resolveExpression = SourceMapScopesModule.NamesResolver.resolveExpression;
 
 /** @constructor */
 Sources.NetworkNavigatorView = SourcesModule.SourcesNavigator.NetworkNavigatorView;

package/front_end/panels/sources/sources.ts

@@ -24,7 +24,6 @@ import * as ScriptFormatterEditorAction from './ScriptFormatterEditorAction.js';
 import * as ScriptOriginPlugin from './ScriptOriginPlugin.js';
 import * as SearchSourcesView from './SearchSourcesView.js';
 import * as SnippetsPlugin from './SnippetsPlugin.js';
-import * as SourceMapNamesResolver from './SourceMapNamesResolver.js';
 import * as SourcesNavigator from './SourcesNavigator.js';
 import * as SourcesPanel from './SourcesPanel.js';
 import * as SourcesSearchScope from './SourcesSearchScope.js';
@@ -57,7 +56,6 @@ export {
   ScriptOriginPlugin,
   SearchSourcesView,
   SnippetsPlugin,
-  SourceMapNamesResolver,
   SourcesNavigator,
   SourcesPanel,
   SourcesSearchScope,

package/front_end/panels/sources/sourcesView.css

@@ -45,10 +45,6 @@
   z-index: 0;
 }
 
-.sources-toolbar .toolbar {
-  cursor: default;
-}
-
 .source-frame-debugger-script {
   --override-debugger-background-tint: rgb(255 255 194 / 50%);