chrome-devtools-frontend 1.0.1675430 → 1.0.1678416

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -260,9 +260,6 @@ export class DebuggerPlugin extends Plugin {
 
     this.ignoreListInfobar = null;
     this.showIgnoreListInfobarIfNeeded();
-    for (const scriptFile of this.scriptFileForDebuggerModel.values()) {
-      scriptFile.checkMapping();
-    }
   }
 
   override editorExtension(): CodeMirror.Extension {
@@ -586,26 +583,12 @@ export class DebuggerPlugin extends Plugin {
   }
 
   private workingCopyChanged(): void {
-    if (!this.scriptFileForDebuggerModel.size) {
-      this.setMuted(this.uiSourceCode.isDirty());
-    }
+    this.setMuted(this.uiSourceCode.isDirty());
   }
 
   private workingCopyCommitted(): void {
     this.scriptsPanel.updateLastModificationTime();
-    if (!this.scriptFileForDebuggerModel.size) {
-      this.setMuted(false);
-    }
-  }
-
-  private didMergeToVM(): void {
-    if (this.consistentScripts()) {
-      this.setMuted(false);
-    }
-  }
-
-  private didDivergeFromVM(): void {
-    this.setMuted(true);
+    this.setMuted(false);
   }
 
   private setMuted(value: boolean): void {
@@ -622,15 +605,6 @@ export class DebuggerPlugin extends Plugin {
     }
   }
 
-  private consistentScripts(): boolean {
-    for (const scriptFile of this.scriptFileForDebuggerModel.values()) {
-      if (scriptFile.hasDivergedFromVM() || scriptFile.isMergingToVM()) {
-        return false;
-      }
-    }
-    return true;
-  }
-
   private isIdentifier(tokenType: string): boolean {
     return tokenType === 'VariableName' || tokenType === 'VariableDefinition' || tokenType === 'PropertyName' ||
         tokenType === 'PropertyDefinition';
@@ -1333,11 +1307,6 @@ export class DebuggerPlugin extends Plugin {
     if (uiLocation.uiSourceCode !== this.uiSourceCode || this.muted) {
       return;
     }
-    for (const scriptFile of this.scriptFileForDebuggerModel.values()) {
-      if (scriptFile.isDivergingFromVM() || scriptFile.isMergingToVM()) {
-        return;
-      }
-    }
     // These tend to arrive in bursts, so debounce them
     window.clearTimeout(this.refreshBreakpointsTimeout);
     this.refreshBreakpointsTimeout = window.setTimeout(() => this.refreshBreakpoints(), 50);
@@ -1411,28 +1380,13 @@ export class DebuggerPlugin extends Plugin {
   }
 
   private updateScriptFile(debuggerModel: SDK.DebuggerModel.DebuggerModel): void {
-    const oldScriptFile = this.scriptFileForDebuggerModel.get(debuggerModel);
+    this.scriptFileForDebuggerModel.delete(debuggerModel);
     const newScriptFile = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().scriptFile(
         this.uiSourceCode, debuggerModel);
-    this.scriptFileForDebuggerModel.delete(debuggerModel);
-    if (oldScriptFile) {
-      oldScriptFile.removeEventListener(
-          Bindings.ResourceScriptMapping.ResourceScriptFile.Events.DID_MERGE_TO_VM, this.didMergeToVM, this);
-      oldScriptFile.removeEventListener(
-          Bindings.ResourceScriptMapping.ResourceScriptFile.Events.DID_DIVERGE_FROM_VM, this.didDivergeFromVM, this);
-      if (this.muted && !this.uiSourceCode.isDirty() && this.consistentScripts()) {
-        this.setMuted(false);
-      }
-    }
     if (!newScriptFile) {
       return;
     }
     this.scriptFileForDebuggerModel.set(debuggerModel, newScriptFile);
-    newScriptFile.addEventListener(
-        Bindings.ResourceScriptMapping.ResourceScriptFile.Events.DID_MERGE_TO_VM, this.didMergeToVM, this);
-    newScriptFile.addEventListener(
-        Bindings.ResourceScriptMapping.ResourceScriptFile.Events.DID_DIVERGE_FROM_VM, this.didDivergeFromVM, this);
-    newScriptFile.checkMapping();
 
     void newScriptFile.missingSymbolFiles().then(resources => {
       if (resources) {
@@ -1644,7 +1598,7 @@ export class DebuggerPlugin extends Plugin {
   private async setBreakpoint(
       lineNumber: number, columnNumber: number|undefined, condition: Breakpoints.BreakpointManager.UserCondition,
       enabled: boolean, isLogpoint: boolean): Promise<Breakpoints.BreakpointManager.Breakpoint|undefined> {
-    Common.Settings.Settings.instance().moduleSetting('breakpoints-active').set(true);
+    Common.Settings.Settings.instance().resolve(SDK.SDKSettings.breakpointsActiveSettingDescriptor).set(true);
     const bp = await this.breakpointManager.setBreakpoint(
         this.uiSourceCode, lineNumber, columnNumber, condition, enabled, isLogpoint,
         Breakpoints.BreakpointManager.BreakpointOrigin.USER_ACTION);
@@ -1714,12 +1668,6 @@ export class DebuggerPlugin extends Plugin {
     if (this.sourceMapInfobar) {
       this.sourceMapInfobar.dispose();
     }
-    for (const script of this.scriptFileForDebuggerModel.values()) {
-      script.removeEventListener(
-          Bindings.ResourceScriptMapping.ResourceScriptFile.Events.DID_MERGE_TO_VM, this.didMergeToVM, this);
-      script.removeEventListener(
-          Bindings.ResourceScriptMapping.ResourceScriptFile.Events.DID_DIVERGE_FROM_VM, this.didDivergeFromVM, this);
-    }
     this.scriptFileForDebuggerModel.clear();
 
     this.popoverHelper?.hidePopover();
@@ -2024,9 +1972,12 @@ class ValueDecoration extends CodeMirror.WidgetType {
         /* eslint-disable-next-line  @devtools/no-lit-render-outside-of-view */
         render(formatter.renderObjectPreview(value.preview), nameValuePair.createChild('span'));
       } else {
-        const propertyValue = ObjectUI.ObjectPropertiesSection.ObjectPropertiesSection.createPropertyValue(
-            value, /* wasThrown */ false, /* showPreview */ false);
-        nameValuePair.appendChild(propertyValue);
+        const propertyValue =
+            ObjectUI.ObjectPropertiesSection.renderPropertyValue(value, /* wasThrown */ false, /* showPreview */ false);
+        const fragment = document.createDocumentFragment();
+        /* eslint-disable-next-line  @devtools/no-lit-render-outside-of-view */
+        render(propertyValue, fragment);
+        nameValuePair.appendChild(fragment);
       }
     }
     return widget;

package/front_end/panels/sources/NavigatorView.ts

@@ -1405,7 +1405,8 @@ export class NavigatorSourceTreeElement extends UI.TreeOutline.TreeElement {
         'navigator-' + uiSourceCode.contentType().name() + '-tree-item', 'navigator-file-tree-item');
     this.tooltip = uiSourceCode.url();
     UI.ARIAUtils.setLabel(this.listItemElement, `${uiSourceCode.name()}, ${this.nodeType}`);
-    Common.EventTarget.fireEvent('source-tree-file-added', uiSourceCode.fullDisplayName());
+    window.dispatchEvent(new CustomEvent('source-tree-file-added',
+                                         {bubbles: true, cancelable: true, detail: uiSourceCode.fullDisplayName()}));
     this.navigatorView = navigatorView;
     this.#uiSourceCode = uiSourceCode;
     this.updateIcon();

package/front_end/panels/sources/ScopeChainSidebarPane.ts

@@ -89,7 +89,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
     scope: SDK.DebuggerModel.ScopeChainEntry,
     objectTree: ObjectUI.ObjectPropertiesSection.ObjectTree,
   }): TemplateResult => {
-    let emptyPlaceholder: Common.UIString.LocalizedString|null = null;
+    let emptyPlaceholder: Common.UIString.LocalizedString|undefined;
     if (scope.type() === Protocol.Debugger.ScopeType.Local || scope.type() === Protocol.Debugger.ScopeType.Closure) {
       emptyPlaceholder = i18nString(UIStrings.noVariables);
     }

package/front_end/panels/sources/SourcesPanel.ts

@@ -68,42 +68,6 @@ const UIStrings = {
    * @description Text to show more options.
    */
   moreOptions: 'More options',
-  /**
-   * @description Tooltip for the navigator toggle in the Sources panel. Command to open or show the
-   * sidebar containing the navigator tool.
-   */
-  showNavigator: 'Show navigator',
-  /**
-   * @description Tooltip for the navigator toggle in the Sources panel. Command to close or hide
-   * the sidebar containing the navigator tool.
-   */
-  hideNavigator: 'Hide navigator',
-  /**
-   * @description Screen reader announcement when the navigator sidebar is shown in the Sources panel.
-   */
-  navigatorShown: 'Navigator sidebar shown',
-  /**
-   * @description Screen reader announcement when the navigator sidebar is hidden in the Sources panel.
-   */
-  navigatorHidden: 'Navigator sidebar hidden',
-  /**
-   * @description Screen reader announcement when the debugger sidebar is shown in the Sources panel.
-   */
-  debuggerShown: 'Debugger sidebar shown',
-  /**
-   * @description Screen reader announcement when the debugger sidebar is hidden in the Sources panel.
-   */
-  debuggerHidden: 'Debugger sidebar hidden',
-  /**
-   * @description Tooltip for the debugger toggle in the Sources panel. Command to open or show the
-   * sidebar containing the debugger tool.
-   */
-  showDebugger: 'Show debugger',
-  /**
-   * @description Tooltip for the debugger toggle in the Sources panel. Command to close or hide the
-   * sidebar containing the debugger tool.
-   */
-  hideDebugger: 'Hide debugger',
   /**
    * @description Text in Sources panel.
    */
@@ -212,8 +176,6 @@ export class SourcesPanel extends UI.Panel.Panel implements
   editorView: UI.SplitWidget.SplitWidget;
   private navigatorTabbedLocation: UI.View.TabbedViewLocation;
   #sourcesView: SourcesView;
-  private readonly toggleNavigatorSidebarButton: UI.Toolbar.ToolbarButton;
-  private readonly toggleDebuggerSidebarButton: UI.Toolbar.ToolbarButton;
   private threadsSidebarPane: UI.View.View|null;
   private readonly watchSidebarPane: UI.View.View;
   private readonly callstackPane: CallStackSidebarPane;
@@ -300,12 +262,18 @@ export class SourcesPanel extends UI.Panel.Panel implements
     this.#sourcesView = new SourcesView();
     this.#sourcesView.addEventListener(Events.EDITOR_SELECTED, this.editorSelected.bind(this));
 
-    this.toggleNavigatorSidebarButton = this.editorView.createShowHideSidebarButton(
-        i18nString(UIStrings.showNavigator), i18nString(UIStrings.hideNavigator), i18nString(UIStrings.navigatorShown),
-        i18nString(UIStrings.navigatorHidden), 'navigator');
-    this.toggleDebuggerSidebarButton = this.splitWidget.createShowHideSidebarButton(
-        i18nString(UIStrings.showDebugger), i18nString(UIStrings.hideDebugger), i18nString(UIStrings.debuggerShown),
-        i18nString(UIStrings.debuggerHidden), 'debugger');
+    this.#sourcesView.onToggleNavigatorSidebar = this.toggleNavigatorSidebar.bind(this);
+    this.#sourcesView.onToggleDebuggerSidebar = this.toggleDebuggerSidebar.bind(this);
+    this.#sourcesView.isNavigatorSidebarOpen = this.editorView.sidebarIsShowing();
+    this.#sourcesView.isDebuggerSidebarOpen = this.splitWidget.sidebarIsShowing();
+
+    this.editorView.addEventListener(UI.SplitWidget.Events.SHOW_MODE_CHANGED, () => {
+      this.#sourcesView.isNavigatorSidebarOpen = this.editorView.sidebarIsShowing();
+    });
+
+    this.splitWidget.addEventListener(UI.SplitWidget.Events.SHOW_MODE_CHANGED, () => {
+      this.#sourcesView.isDebuggerSidebarOpen = this.splitWidget.sidebarIsShowing();
+    });
     this.editorView.setMainWidget(this.#sourcesView);
 
     this.threadsSidebarPane = null;
@@ -321,7 +289,7 @@ export class SourcesPanel extends UI.Panel.Panel implements
 
     this.setTarget(UI.Context.Context.instance().flavor(SDK.Target.Target));
     Common.Settings.Settings.instance()
-        .moduleSetting('breakpoints-active')
+        .resolve(SDK.SDKSettings.breakpointsActiveSettingDescriptor)
         .addChangeListener(this.breakpointsActiveStateChanged, this);
     UI.Context.Context.instance().addFlavorChangeListener(SDK.Target.Target, this.onCurrentTargetChanged, this);
     UI.Context.Context.instance().addFlavorChangeListener(
@@ -356,28 +324,9 @@ export class SourcesPanel extends UI.Panel.Panel implements
   }
 
   static updateResizerAndSidebarButtons(panel: SourcesPanel): void {
-    const leftItems: UI.Toolbar.ToolbarItem[] = [];
-    const rightItems: UI.Toolbar.ToolbarItem[] = [];
-    panel.#sourcesView.bottomToolbar().removeToolbarItems();
-    const isInWrapper = UI.Context.Context.instance().flavor(QuickSourceView) &&
+    const isInWrapper = Boolean(UI.Context.Context.instance().flavor(QuickSourceView)) &&
         !UI.InspectorView.InspectorView.instance().isDrawerMinimized();
-    if (panel.splitWidget.isVertical() || isInWrapper) {
-      panel.splitWidget.uninstallResizer(panel.#sourcesView.scriptViewToolbar());
-    } else {
-      panel.splitWidget.installResizer(panel.#sourcesView.scriptViewToolbar());
-    }
-    if (!isInWrapper) {
-      leftItems.push(panel.toggleNavigatorSidebarButton);
-      if (!Root.Runtime.Runtime.isTraceApp()) {
-        if (panel.splitWidget.isVertical()) {
-          rightItems.push(panel.toggleDebuggerSidebarButton);
-        } else {
-          panel.#sourcesView.bottomToolbar().appendToolbarItem(panel.toggleDebuggerSidebarButton);
-        }
-      }
-    }
-    panel.#sourcesView.leftToolbarItems = leftItems;
-    panel.#sourcesView.rightToolbarItems = rightItems;
+    panel.#sourcesView.setLayoutMode(panel.splitWidget, panel.splitWidget.isVertical(), isInWrapper);
   }
 
   targetAdded(_target: SDK.Target.Target): void {
@@ -412,7 +361,7 @@ export class SourcesPanel extends UI.Panel.Panel implements
     } else {
       this.#paused = false;
       this.clearInterface();
-      this.toggleDebuggerSidebarButton.setEnabled(true);
+      this.#sourcesView.toggleDebuggerSidebarButtonEnabled(true);
     }
   }
 
@@ -498,6 +447,7 @@ export class SourcesPanel extends UI.Panel.Panel implements
     }
 
     Badges.UserBadges.instance().recordAction(Badges.BadgeAction.DEBUGGER_PAUSED);
+    window.dispatchEvent(new CustomEvent('DevTools.DebuggerPaused', {bubbles: true, cancelable: true}));
   }
 
   private debugInfoAttached(event: Common.EventTarget.EventTargetEvent<SDK.Script.Script>): void {
@@ -516,7 +466,7 @@ export class SourcesPanel extends UI.Panel.Panel implements
     this.#paused = true;
     void this.updateDebuggerButtonsAndStatus();
     UI.Context.Context.instance().setFlavor(SDK.DebuggerModel.DebuggerPausedDetails, details);
-    this.toggleDebuggerSidebarButton.setEnabled(false);
+    this.#sourcesView.toggleDebuggerSidebarButtonEnabled(false);
     this.revealDebuggerSidebar();
     const pausedTarget = details.debuggerModel.target();
     if (this.threadsSidebarPane && this.#lastPausedTarget?.deref() !== pausedTarget &&
@@ -583,7 +533,7 @@ export class SourcesPanel extends UI.Panel.Panel implements
     }
     this.#paused = false;
     this.clearInterface();
-    this.toggleDebuggerSidebarButton.setEnabled(true);
+    this.#sourcesView.toggleDebuggerSidebarButtonEnabled(true);
     this.switchToPausedTargetTimeout = window.setTimeout(this.switchToPausedTarget.bind(this, debuggerModel), 500);
   }
 
@@ -852,13 +802,13 @@ export class SourcesPanel extends UI.Panel.Panel implements
   }
 
   toggleBreakpointsActive(): void {
-    Common.Settings.Settings.instance()
-        .moduleSetting('breakpoints-active')
-        .set(!Common.Settings.Settings.instance().moduleSetting('breakpoints-active').get());
+    const setting = Common.Settings.Settings.instance().resolve(SDK.SDKSettings.breakpointsActiveSettingDescriptor);
+    setting.set(!setting.get());
   }
 
   private breakpointsActiveStateChanged(): void {
-    const active = Common.Settings.Settings.instance().moduleSetting('breakpoints-active').get();
+    const active =
+        Common.Settings.Settings.instance().resolve(SDK.SDKSettings.breakpointsActiveSettingDescriptor).get();
     this.toggleBreakpointsActiveAction.setToggled(!active);
     this.#sourcesView.toggleBreakpointsActiveState(active);
   }