chrome-devtools-frontend 1.0.996595 → 1.0.997048

package/front_end/core/i18n/locales/en-US.json

@@ -10004,6 +10004,12 @@
   "panels/sources/sources-meta.ts | toggleBreakpointInputWindow": {
     "message": "Toggle breakpoint input window"
   },
+  "panels/sources/sources-meta.ts | toggleDebuggerSidebar": {
+    "message": "Toggle debugger sidebar"
+  },
+  "panels/sources/sources-meta.ts | toggleNavigatorSidebar": {
+    "message": "Toggle navigator sidebar"
+  },
   "panels/sources/sources-meta.ts | trailing": {
     "message": "Trailing"
   },

package/front_end/core/i18n/locales/en-XL.json

@@ -10004,6 +10004,12 @@
   "panels/sources/sources-meta.ts | toggleBreakpointInputWindow": {
     "message": "T̂óĝǵl̂é b̂ŕêák̂ṕôín̂t́ îńp̂út̂ ẃîńd̂óŵ"
   },
+  "panels/sources/sources-meta.ts | toggleDebuggerSidebar": {
+    "message": "T̂óĝǵl̂é d̂éb̂úĝǵêŕ ŝíd̂éb̂ár̂"
+  },
+  "panels/sources/sources-meta.ts | toggleNavigatorSidebar": {
+    "message": "T̂óĝǵl̂é n̂áv̂íĝát̂ór̂ śîd́êb́âŕ"
+  },
   "panels/sources/sources-meta.ts | trailing": {
     "message": "T̂ŕâíl̂ín̂ǵ"
   },

package/front_end/core/root/Runtime.ts

@@ -206,6 +206,11 @@ export class ExperimentsSupport {
     this.#enabledTransiently.add(experimentName);
   }
 
+  disableForTest(experimentName: string): void {
+    this.checkExperiment(experimentName);
+    this.#enabledTransiently.delete(experimentName);
+  }
+
   clearForTest(): void {
     this.#experiments = [];
     this.#experimentNames.clear();

package/front_end/core/sdk/DebuggerModel.ts

@@ -652,7 +652,7 @@ export class DebuggerModel extends SDKModel<EventTypes> {
     this.evaluateOnCallFrameCallback = callback;
   }
 
-  setSynchronizeBreakpointsCallback(callback: (script: Script) => Promise<void>): void {
+  setSynchronizeBreakpointsCallback(callback: ((script: Script) => Promise<void>)|null): void {
     this.#synchronizeBreakpointsCallback = callback;
   }
 

package/front_end/models/bindings/BreakpointManager.ts

@@ -100,11 +100,12 @@ export class BreakpointManager extends Common.ObjectWrapper.ObjectWrapper<EventT
 
   modelAdded(debuggerModel: SDK.DebuggerModel.DebuggerModel): void {
     if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.INSTRUMENTATION_BREAKPOINTS)) {
-      debuggerModel.setSynchronizeBreakpointsCallback(this.#restoreBreakpointsForScript.bind(this));
+      debuggerModel.setSynchronizeBreakpointsCallback(this.restoreBreakpointsForScript.bind(this));
     }
   }
 
-  modelRemoved(): void {
+  modelRemoved(debuggerModel: SDK.DebuggerModel.DebuggerModel): void {
+    debuggerModel.setSynchronizeBreakpointsCallback(null);
   }
 
   async copyBreakpoints(fromURL: Platform.DevToolsPath.UrlString, toSourceCode: Workspace.UISourceCode.UISourceCode):
@@ -117,7 +118,7 @@ export class BreakpointManager extends Common.ObjectWrapper.ObjectWrapper<EventT
 
   // This method explicitly awaits the source map (if necessary) and the uiSourceCodes
   // required to set all breakpoints that are related to this script.
-  async #restoreBreakpointsForScript(script: SDK.Script.Script): Promise<void> {
+  async restoreBreakpointsForScript(script: SDK.Script.Script): Promise<void> {
     if (!Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.INSTRUMENTATION_BREAKPOINTS)) {
       return;
     }
@@ -416,6 +417,10 @@ export class Breakpoint implements SDK.TargetManager.SDKModelObserver<SDK.Debugg
     modelBreakpoint.removeEventListeners();
   }
 
+  modelBreakpoint(debuggerModel: SDK.DebuggerModel.DebuggerModel): ModelBreakpoint|undefined {
+    return this.#modelBreakpoints.get(debuggerModel);
+  }
+
   addUISourceCode(uiSourceCode: Workspace.UISourceCode.UISourceCode): void {
     if (!this.uiSourceCodes.has(uiSourceCode)) {
       this.uiSourceCodes.add(uiSourceCode);
@@ -626,6 +631,10 @@ export class ModelBreakpoint {
     }
   }
 
+  get currentState(): Breakpoint.State|null {
+    return this.#currentState;
+  }
+
   resetLocations(): void {
     for (const uiLocation of this.#uiLocations.values()) {
       this.#breakpoint.uiLocationRemoved(uiLocation);

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -871,22 +871,32 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       };
     });
 
-    let pseudoTypes: Protocol.DOM.PseudoType[] = [];
-    const keys = matchedStyles.pseudoTypes();
-    if (keys.delete(Protocol.DOM.PseudoType.Before)) {
-      pseudoTypes.push(Protocol.DOM.PseudoType.Before);
-    }
-    pseudoTypes = pseudoTypes.concat([...keys].sort());
-
     const otherPseudoRulesets: {
       highlightName: string|null,
       pseudoType: Protocol.DOM.PseudoType,
       pseudoStyles: SDK.CSSStyleDeclaration.CSSStyleDeclaration[],
-    }[] = pseudoTypes.map(pseudoType => {
+    }[] = [...matchedStyles.pseudoTypes()].map(pseudoType => {
       return {'highlightName': null, 'pseudoType': pseudoType, 'pseudoStyles': matchedStyles.pseudoStyles(pseudoType)};
     });
 
-    const pseudoRulesets = customHighlightPseudoRulesets.concat(otherPseudoRulesets);
+    const pseudoRulesets = customHighlightPseudoRulesets.concat(otherPseudoRulesets).sort((a, b) => {
+      // We want to show the ::before pseudos first, followed by the remaining pseudos
+      // in alphabetical order.
+      if (a.pseudoType === Protocol.DOM.PseudoType.Before && b.pseudoType !== Protocol.DOM.PseudoType.Before) {
+        return -1;
+      }
+      if (a.pseudoType !== Protocol.DOM.PseudoType.Before && b.pseudoType === Protocol.DOM.PseudoType.Before) {
+        return 1;
+      }
+      if (a.pseudoType < b.pseudoType) {
+        return -1;
+      }
+      if (a.pseudoType > b.pseudoType) {
+        return 1;
+      }
+      return 0;
+    });
+
     for (const pseudo of pseudoRulesets) {
       lastParentNode = null;
       for (let i = 0; i < pseudo.pseudoStyles.length; ++i) {

package/front_end/panels/elements/components/adornerSettingsPane.css

@@ -57,6 +57,11 @@
   border-radius: 2px;
 }
 
+.close:hover,
+.close:focus {
+  background-color: var(--color-background-elevation-2);
+}
+
 .close::before {
   transform: rotate(45deg);
 }

package/front_end/panels/elements/stylesSectionTree.css

@@ -126,6 +126,10 @@ ol.expanded {
   opacity: 50%;
 }
 
+.changed {
+  background-color: var(--color-accent-green-background);
+}
+
 .changed::after {
   content: "";
   position: absolute;
@@ -140,10 +144,6 @@ ol.expanded {
   display: none;
 }
 
-.changed:hover {
-  background-color: var(--color-accent-green-background);
-}
-
 .changed:hover .copy {
   position: absolute;
   right: -4px;

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -536,6 +536,10 @@ export class DebuggerPlugin extends Plugin {
     return true;
   }
 
+  private isVariableIdentifier(tokenType: string): boolean {
+    return tokenType === 'VariableName' || tokenType === 'VariableDefinition';
+  }
+
   private isIdentifier(tokenType: string): boolean {
     return tokenType === 'VariableName' || tokenType === 'VariableDefinition' || tokenType === 'PropertyName' ||
         tokenType === 'PropertyDefinition';
@@ -962,8 +966,8 @@ export class DebuggerPlugin extends Plugin {
     tree.iterate({
       from: fromPos,
       to: toPos,
-      enter(node): void {
-        const varName = node.name === 'VariableName' && editorState.sliceDoc(node.from, node.to);
+      enter: node => {
+        const varName = this.isVariableIdentifier(node.name) && editorState.sliceDoc(node.from, node.to);
         if (varName && variableMap.has(varName)) {
           if (node.from > curLine.to) {
             curLine = editorState.doc.lineAt(node.from);

package/front_end/panels/sources/SourcesPanel.ts

@@ -439,6 +439,14 @@ export class SourcesPanel extends UI.Panel.Panel implements UI.ContextMenu.Provi
     return this.sourcesViewInternal.searchableView();
   }
 
+  toggleNavigatorSidebar(): void {
+    this.editorView.toggleSidebar();
+  }
+
+  toggleDebuggerSidebar(): void {
+    this.splitWidget.toggleSidebar();
+  }
+
   private debuggerPaused(event: Common.EventTarget.EventTargetEvent<SDK.DebuggerModel.DebuggerModel>): void {
     const debuggerModel = event.data;
     const details = debuggerModel.debuggerPausedDetails();
@@ -1285,18 +1293,18 @@ export class RevealingActionDelegate implements UI.ActionRegistration.ActionDele
   }
 }
 
-let debuggingActionDelegateInstance: DebuggingActionDelegate;
+let actionDelegateInstance: ActionDelegate;
 
-export class DebuggingActionDelegate implements UI.ActionRegistration.ActionDelegate {
+export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
   static instance(opts: {
     forceNew: boolean|null,
-  } = {forceNew: null}): DebuggingActionDelegate {
+  } = {forceNew: null}): ActionDelegate {
     const {forceNew} = opts;
-    if (!debuggingActionDelegateInstance || forceNew) {
-      debuggingActionDelegateInstance = new DebuggingActionDelegate();
+    if (!actionDelegateInstance || forceNew) {
+      actionDelegateInstance = new ActionDelegate();
     }
 
-    return debuggingActionDelegateInstance;
+    return actionDelegateInstance;
   }
   handleAction(context: UI.Context.Context, actionId: string): boolean {
     const panel = SourcesPanel.instance();
@@ -1340,6 +1348,14 @@ export class DebuggingActionDelegate implements UI.ActionRegistration.ActionDele
         }
         return true;
       }
+      case 'sources.toggle-navigator-sidebar': {
+        panel.toggleNavigatorSidebar();
+        return true;
+      }
+      case 'sources.toggle-debugger-sidebar': {
+        panel.toggleDebuggerSidebar();
+        return true;
+      }
     }
     return false;
   }

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

@@ -189,7 +189,7 @@ Sources.SourcesPanel.DebuggerPausedDetailsRevealer = SourcesModule.SourcesPanel.
 Sources.SourcesPanel.RevealingActionDelegate = SourcesModule.SourcesPanel.RevealingActionDelegate;
 
 /** @constructor */
-Sources.SourcesPanel.DebuggingActionDelegate = SourcesModule.SourcesPanel.DebuggingActionDelegate;
+Sources.SourcesPanel.ActionDelegate = SourcesModule.SourcesPanel.ActionDelegate;
 
 /** @constructor */
 Sources.SourcesPanel.WrapperView = SourcesModule.SourcesPanel.WrapperView;

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

@@ -378,6 +378,14 @@ const UIStrings = {
   * comes to a halt.
   */
   enableAutoFocusOnDebuggerPaused: 'Focus Sources panel when triggering a breakpoint',
+  /**
+  * @description Text for command of toggling navigator sidebar in Sources panel
+  */
+  toggleNavigatorSidebar: 'Toggle navigator sidebar',
+  /**
+  * @description Text for command of toggling debugger sidebar in Sources panel
+  */
+  toggleDebuggerSidebar: 'Toggle debugger sidebar',
 
 };
 const str_ = i18n.i18n.registerUIStrings('panels/sources/sources-meta.ts', UIStrings);
@@ -567,7 +575,7 @@ UI.ActionRegistration.registerActionExtension({
   actionId: 'debugger.step-over',
   async loadActionDelegate() {
     const Sources = await loadSourcesModule();
-    return Sources.SourcesPanel.DebuggingActionDelegate.instance();
+    return Sources.SourcesPanel.ActionDelegate.instance();
   },
 
   title: i18nLazyString(UIStrings.stepOverNextFunctionCall),
@@ -599,7 +607,7 @@ UI.ActionRegistration.registerActionExtension({
   actionId: 'debugger.step-into',
   async loadActionDelegate() {
     const Sources = await loadSourcesModule();
-    return Sources.SourcesPanel.DebuggingActionDelegate.instance();
+    return Sources.SourcesPanel.ActionDelegate.instance();
   },
   title: i18nLazyString(UIStrings.stepIntoNextFunctionCall),
   iconClass: UI.ActionRegistration.IconClass.LARGE_ICON_STEP_INTO,
@@ -630,7 +638,7 @@ UI.ActionRegistration.registerActionExtension({
   actionId: 'debugger.step',
   async loadActionDelegate() {
     const Sources = await loadSourcesModule();
-    return Sources.SourcesPanel.DebuggingActionDelegate.instance();
+    return Sources.SourcesPanel.ActionDelegate.instance();
   },
   title: i18nLazyString(UIStrings.step),
   iconClass: UI.ActionRegistration.IconClass.LARGE_ICON_STEP,
@@ -652,7 +660,7 @@ UI.ActionRegistration.registerActionExtension({
   actionId: 'debugger.step-out',
   async loadActionDelegate() {
     const Sources = await loadSourcesModule();
-    return Sources.SourcesPanel.DebuggingActionDelegate.instance();
+    return Sources.SourcesPanel.ActionDelegate.instance();
   },
   title: i18nLazyString(UIStrings.stepOutOfCurrentFunction),
   iconClass: UI.ActionRegistration.IconClass.LARGE_ICON_STEP_OUT,
@@ -683,7 +691,7 @@ UI.ActionRegistration.registerActionExtension({
   category: UI.ActionRegistration.ActionCategory.DEBUGGER,
   async loadActionDelegate() {
     const Sources = await loadSourcesModule();
-    return Sources.SourcesPanel.DebuggingActionDelegate.instance();
+    return Sources.SourcesPanel.ActionDelegate.instance();
   },
   title: i18nLazyString(UIStrings.runSnippet),
   iconClass: UI.ActionRegistration.IconClass.LARGEICON_PLAY,
@@ -709,7 +717,7 @@ UI.ActionRegistration.registerActionExtension({
   toggleable: true,
   async loadActionDelegate() {
     const Sources = await loadSourcesModule();
-    return Sources.SourcesPanel.DebuggingActionDelegate.instance();
+    return Sources.SourcesPanel.ActionDelegate.instance();
   },
   contextTypes() {
     return maybeRetrieveContextTypes(Sources => [Sources.SourcesView.SourcesView]);
@@ -764,7 +772,7 @@ UI.ActionRegistration.registerActionExtension({
   category: UI.ActionRegistration.ActionCategory.DEBUGGER,
   async loadActionDelegate() {
     const Sources = await loadSourcesModule();
-    return Sources.SourcesPanel.DebuggingActionDelegate.instance();
+    return Sources.SourcesPanel.ActionDelegate.instance();
   },
   title: i18nLazyString(UIStrings.evaluateSelectedTextInConsole),
   contextTypes() {
@@ -1240,6 +1248,52 @@ UI.ActionRegistration.registerActionExtension({
   ],
 });
 
+UI.ActionRegistration.registerActionExtension({
+  actionId: 'sources.toggle-navigator-sidebar',
+  category: UI.ActionRegistration.ActionCategory.SOURCES,
+  title: i18nLazyString(UIStrings.toggleNavigatorSidebar),
+  async loadActionDelegate() {
+    const Sources = await loadSourcesModule();
+    return Sources.SourcesPanel.ActionDelegate.instance();
+  },
+  contextTypes() {
+    return maybeRetrieveContextTypes(Sources => [Sources.SourcesView.SourcesView]);
+  },
+  bindings: [
+    {
+      platform: UI.ActionRegistration.Platforms.WindowsLinux,
+      shortcut: 'Ctrl+Shift+y',
+    },
+    {
+      platform: UI.ActionRegistration.Platforms.Mac,
+      shortcut: 'Meta+Shift+y',
+    },
+  ],
+});
+
+UI.ActionRegistration.registerActionExtension({
+  actionId: 'sources.toggle-debugger-sidebar',
+  category: UI.ActionRegistration.ActionCategory.SOURCES,
+  title: i18nLazyString(UIStrings.toggleDebuggerSidebar),
+  async loadActionDelegate() {
+    const Sources = await loadSourcesModule();
+    return Sources.SourcesPanel.ActionDelegate.instance();
+  },
+  contextTypes() {
+    return maybeRetrieveContextTypes(Sources => [Sources.SourcesView.SourcesView]);
+  },
+  bindings: [
+    {
+      platform: UI.ActionRegistration.Platforms.WindowsLinux,
+      shortcut: 'Ctrl+Shift+h',
+    },
+    {
+      platform: UI.ActionRegistration.Platforms.Mac,
+      shortcut: 'Meta+Shift+h',
+    },
+  ],
+});
+
 Common.Settings.registerSettingExtension({
   settingName: 'navigatorGroupByFolder',
   settingType: Common.Settings.SettingType.BOOLEAN,

package/front_end/ui/legacy/SplitWidget.ts

@@ -61,6 +61,8 @@ export class SplitWidget extends Common.ObjectWrapper.eventMixin<EventTypes, typ
   private animationCallback: (() => void)|null;
   private showSidebarButtonTitle: Common.UIString.LocalizedString;
   private hideSidebarButtonTitle: Common.UIString.LocalizedString;
+  private shownSidebarString: Common.UIString.LocalizedString;
+  private hiddenSidebarString: Common.UIString.LocalizedString;
   private showHideSidebarButton: ToolbarButton|null;
   private isVerticalInternal: boolean;
   private sidebarMinimized: boolean;
@@ -111,6 +113,8 @@ export class SplitWidget extends Common.ObjectWrapper.eventMixin<EventTypes, typ
     this.animationCallback = null;
     this.showSidebarButtonTitle = Common.UIString.LocalizedEmptyString;
     this.hideSidebarButtonTitle = Common.UIString.LocalizedEmptyString;
+    this.shownSidebarString = Common.UIString.LocalizedEmptyString;
+    this.hiddenSidebarString = Common.UIString.LocalizedEmptyString;
     this.showHideSidebarButton = null;
     this.isVerticalInternal = false;
     this.sidebarMinimized = false;
@@ -821,23 +825,29 @@ export class SplitWidget extends Common.ObjectWrapper.eventMixin<EventTypes, typ
       shownString: Common.UIString.LocalizedString, hiddenString: Common.UIString.LocalizedString): ToolbarButton {
     this.showSidebarButtonTitle = showTitle;
     this.hideSidebarButtonTitle = hideTitle;
+    this.shownSidebarString = shownString;
+    this.hiddenSidebarString = hiddenString;
     this.showHideSidebarButton = new ToolbarButton('', '');
     this.showHideSidebarButton.addEventListener(ToolbarButton.Events.Click, buttonClicked, this);
     this.updateShowHideSidebarButton();
 
     function buttonClicked(this: SplitWidget): void {
-      if (this.showModeInternal !== ShowMode.Both) {
-        this.showBoth(true);
-        ARIAUtils.alert(shownString);
-      } else {
-        this.hideSidebar(true);
-        ARIAUtils.alert(hiddenString);
-      }
+      this.toggleSidebar();
     }
 
     return this.showHideSidebarButton;
   }
 
+  toggleSidebar(): void {
+    if (this.showModeInternal !== ShowMode.Both) {
+      this.showBoth(true);
+      ARIAUtils.alert(this.shownSidebarString);
+    } else {
+      this.hideSidebar(true);
+      ARIAUtils.alert(this.hiddenSidebarString);
+    }
+  }
+
   private updateShowHideSidebarButton(): void {
     if (!this.showHideSidebarButton) {
       return;

package/package.json

@@ -55,5 +55,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "vpython third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.996595"
+  "version": "1.0.997048"
 }