chrome-devtools-frontend 1.0.1669021 → 1.0.1672388

package/front_end/panels/settings/SettingsScreen.ts

@@ -384,7 +384,7 @@ export class GenericSettingsTab extends UI.Widget.VBox implements SettingsTab {
 
 export class ExperimentsSettingsTab extends UI.Widget.VBox implements SettingsTab {
   #experimentsSection: Card|undefined;
-  private readonly experimentToControl = new Map<Root.Runtime.Experiment|Root.Runtime.HostExperiment, HTMLElement>();
+  private readonly experimentToControl = new Map<Root.Runtime.Experiment, HTMLElement>();
   private readonly containerElement: HTMLElement;
 
   constructor() {
@@ -452,19 +452,16 @@ export class ExperimentsSettingsTab extends UI.Widget.VBox implements SettingsTa
     return subsection;
   }
 
-  private createExperimentCheckbox(experiment: Root.Runtime.Experiment|
-                                   Root.Runtime.HostExperiment): HTMLParagraphElement {
+  private createExperimentCheckbox(experiment: Root.Runtime.Experiment): HTMLParagraphElement {
     const checkbox =
         UI.UIUtils.CheckboxLabel.createWithStringLiteral(experiment.title, experiment.isEnabled(), experiment.name);
     checkbox.classList.add('experiment-label');
     checkbox.name = experiment.name;
     function listener(): void {
-      if (experiment instanceof Root.Runtime.HostExperiment) {
-        Host.InspectorFrontendHost.InspectorFrontendHostInstance.setChromeFlag(experiment.aboutFlag, checkbox.checked);
-      }
+      Host.InspectorFrontendHost.InspectorFrontendHostInstance.setChromeFlag(experiment.aboutFlag, checkbox.checked);
       experiment.setEnabled(checkbox.checked);
       Host.userMetrics.experimentChanged(experiment.name, experiment.isEnabled());
-      if (experiment instanceof Root.Runtime.HostExperiment && experiment.requiresChromeRestart) {
+      if (experiment.requiresChromeRestart) {
         UI.InspectorView.InspectorView.instance().displayChromeRestartRequiredWarning(
             i18nString(UIStrings.settingsChangedRestartChrome));
       } else {
@@ -507,7 +504,7 @@ export class ExperimentsSettingsTab extends UI.Widget.VBox implements SettingsTa
   }
 
   highlightObject(experiment: Object): void {
-    if (experiment instanceof Root.Runtime.Experiment || experiment instanceof Root.Runtime.HostExperiment) {
+    if (experiment instanceof Root.Runtime.Experiment) {
       const element = this.experimentToControl.get(experiment);
       if (element) {
         PanelUtils.highlightElement(element);
@@ -542,12 +539,10 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
     return false;
   }
 }
-export class Revealer implements
-    Common.Revealer.Revealer<Root.Runtime.Experiment|Root.Runtime.HostExperiment|Common.Settings.Setting<unknown>> {
-  async reveal(object: Root.Runtime.Experiment|Root.Runtime.HostExperiment|
-               Common.Settings.Setting<unknown>): Promise<void> {
+export class Revealer implements Common.Revealer.Revealer<Root.Runtime.Experiment|Common.Settings.Setting<unknown>> {
+  async reveal(object: Root.Runtime.Experiment|Common.Settings.Setting<unknown>): Promise<void> {
     const context = UI.Context.Context.instance();
-    if (object instanceof Root.Runtime.Experiment || object instanceof Root.Runtime.HostExperiment) {
+    if (object instanceof Root.Runtime.Experiment) {
       Host.InspectorFrontendHost.InspectorFrontendHostInstance.bringToFront();
       await SettingsScreen.showSettingsScreen({name: 'experiments'});
       const experimentsSettingsTab = context.flavor(ExperimentsSettingsTab);

package/front_end/panels/settings/components/SyncSection.ts

@@ -121,7 +121,7 @@ const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLElement)
     return html`
       <div class="setting-checkbox-container">
         <setting-checkbox class="setting-checkbox"
-          .data=${{ setting: input.syncSetting } as SettingsComponents.SettingCheckbox.SettingCheckboxData}>
+          .data=${{ setting: input.syncSetting, disabled: input.checkboxDisabled } as SettingsComponents.SettingCheckbox.SettingCheckboxData}>
         </setting-checkbox>
         ${input.warningType ? html`
           <devtools-button
@@ -251,6 +251,7 @@ export interface SyncSectionData {
 export interface ViewInput {
   syncInfo: Host.InspectorFrontendHostAPI.SyncInformation;
   syncSetting: Common.Settings.Setting<boolean>;
+  checkboxDisabled: boolean;
   receiveBadgesSetting?: Common.Settings.Setting<boolean>;
   isEligibleToCreateGdpProfile: boolean;
   gdpProfile?: Host.GdpClient.Profile;
@@ -302,10 +303,7 @@ export class SyncSection extends UI.Widget.Widget {
   }
 
   override performUpdate(): void {
-    // TODO: this should not probably happen in render, instead, the setting
-    // should be disabled.
     const checkboxDisabled = !this.#syncInfo.isSyncActive || !this.#syncInfo.arePreferencesSynced;
-    this.#syncSetting?.setDisabled(checkboxDisabled);
 
     let warningType: WarningType|undefined;
     if (!this.#syncInfo.isSyncActive) {
@@ -317,6 +315,7 @@ export class SyncSection extends UI.Widget.Widget {
     const viewInput: ViewInput = {
       syncInfo: this.#syncInfo,
       syncSetting: this.#syncSetting,
+      checkboxDisabled,
       receiveBadgesSetting: this.#receiveBadgesSetting,
       gdpProfile: this.#gdpProfile,
       isEligibleToCreateGdpProfile: Host.GdpClient.isGdpProfilesAvailable() && this.#isEligibleToCreateGdpProfile,

package/front_end/panels/settings/emulation/DevicesSettingsTab.ts

@@ -74,17 +74,67 @@ const UIStrings = {
    * @description Error message in the Devices settings tab shown when the user agent string is empty.
    */
   userAgentStringCannotBeEmpty: 'User agent string can’t be empty.',
+  /**
+   * @description Label for portrait safe-area values on a custom device.
+   */
+  portraitSafeArea: 'Portrait safe area',
+  /**
+   * @description Label for landscape safe-area values on a custom device.
+   */
+  landscapeSafeArea: 'Landscape safe area',
+  /**
+   * @description Placeholder text for a custom device safe-area left inset field.
+   */
+  safeAreaLeft: 'Left inset',
+  /**
+   * @description Placeholder text for a custom device safe-area top inset field.
+   */
+  safeAreaTop: 'Top inset',
+  /**
+   * @description Placeholder text for a custom device safe-area right inset field.
+   */
+  safeAreaRight: 'Right inset',
+  /**
+   * @description Placeholder text for a custom device safe-area bottom inset field.
+   */
+  safeAreaBottom: 'Bottom inset',
+  /**
+   * @description Error message shown when a custom device safe-area value is invalid.
+   * @example {Portrait safe area} PH1
+   * @example {Top inset} PH2
+   * @example {9999} PH3
+   */
+  safeAreaValueMustBeInRange: '{PH1}: {PH2} must be an integer from 0 to {PH3}.',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/settings/emulation/DevicesSettingsTab.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
+function parseOptionalNonNegativeInteger(value: string): number|null {
+  const trimmedValue = value.trim();
+  if (!trimmedValue) {
+    return 0;
+  }
+  if (!/^\d+$/.test(trimmedValue)) {
+    return null;
+  }
+  const parsedValue = Number(trimmedValue);
+  if (!Number.isSafeInteger(parsedValue) || parsedValue < 0 ||
+      parsedValue > EmulationModel.DeviceModeModel.MaxDeviceSize) {
+    return null;
+  }
+  return parsedValue;
+}
+
 export class DevicesSettingsTab extends UI.Widget.VBox implements
     UI.ListWidget.Delegate<EmulationModel.EmulatedDevices.EmulatedDevice> {
   containerElement: HTMLElement;
   private readonly addCustomButton: Buttons.Button.Button;
   private readonly ariaSuccessMessageElement: HTMLElement;
   readonly #customDeviceList: UI.ListWidget.ListWidget<EmulationModel.EmulatedDevices.EmulatedDevice>;
-  readonly #defaultDeviceList: UI.ListWidget.ListWidget<EmulationModel.EmulatedDevices.EmulatedDevice>;
+  readonly #defaultDeviceLists = new Map<EmulationModel.EmulatedDevices.Category, {
+    container: HTMLElement,
+    list: UI.ListWidget.ListWidget<EmulationModel.EmulatedDevices.EmulatedDevice>,
+  }>();
   private muteUpdate: boolean;
   private emulatedDevicesList: EmulationModel.EmulatedDevices.EmulatedDevicesList;
   private editor?: UI.ListWidget.Editor<EmulationModel.EmulatedDevices.EmulatedDevice>;
@@ -97,10 +147,6 @@ export class DevicesSettingsTab extends UI.Widget.VBox implements
         this.contentElement.createChild('div', 'settings-card-container-wrapper').createChild('div');
     this.containerElement.classList.add('settings-card-container', 'ignore-list-settings');
 
-    this.#defaultDeviceList = new UI.ListWidget.ListWidget(this, false /* delegatesFocus */);
-    this.#defaultDeviceList.registerRequiredCSS(devicesSettingsTabStyles);
-    this.#defaultDeviceList.element.classList.add('devices-list', 'device-card-content');
-
     this.muteUpdate = false;
     this.emulatedDevicesList = EmulationModel.EmulatedDevices.EmulatedDevicesList.instance();
     this.emulatedDevicesList.addEventListener(
@@ -132,7 +178,23 @@ export class DevicesSettingsTab extends UI.Widget.VBox implements
 
     const defaultDevicesCard = this.containerElement.createChild('devtools-card');
     defaultDevicesCard.heading = i18nString(UIStrings.defaultDevices);
-    defaultDevicesCard.append(this.#defaultDeviceList.element);
+
+    for (const category of EmulationModel.EmulatedDevices.CATEGORY_ORDER) {
+      const groupContainer = document.createElement('div');
+      groupContainer.classList.add('device-group-container');
+
+      const groupTitle = groupContainer.createChild('div', 'device-group-title');
+      groupTitle.textContent = EmulationModel.EmulatedDevices.getCategoryTitle(category);
+
+      defaultDevicesCard.append(groupContainer);
+
+      const listWidget = new UI.ListWidget.ListWidget(this, false /* delegatesFocus */);
+      listWidget.registerRequiredCSS(devicesSettingsTabStyles);
+      listWidget.element.classList.add('devices-list', 'device-card-content');
+      listWidget.show(groupContainer);
+
+      this.#defaultDeviceLists.set(category, {container: groupContainer, list: listWidget});
+    }
   }
 
   override wasShown(): void {
@@ -145,18 +207,32 @@ export class DevicesSettingsTab extends UI.Widget.VBox implements
       return;
     }
 
-    this.#defaultDeviceList.clear();
+    for (const {list} of this.#defaultDeviceLists.values()) {
+      list.clear();
+    }
     this.#customDeviceList.clear();
 
-    let devices = this.emulatedDevicesList.custom().slice();
-    for (let i = 0; i < devices.length; ++i) {
-      this.#customDeviceList.appendItem(devices[i], true);
+    const customDevices = this.emulatedDevicesList.custom().slice();
+    for (let i = 0; i < customDevices.length; ++i) {
+      this.#customDeviceList.appendItem(customDevices[i], true);
     }
 
-    devices = this.emulatedDevicesList.standard().slice();
-    devices.sort(EmulationModel.EmulatedDevices.EmulatedDevice.deviceComparator);
-    for (let i = 0; i < devices.length; ++i) {
-      this.#defaultDeviceList.appendItem(devices[i], false);
+    const standardDevices = this.emulatedDevicesList.standard().slice();
+    standardDevices.sort(EmulationModel.EmulatedDevices.EmulatedDevice.deviceComparator);
+
+    const categoryItemCounts = new Map<EmulationModel.EmulatedDevices.Category, number>();
+    for (const device of standardDevices) {
+      const cat = EmulationModel.EmulatedDevices.deviceCategory(device);
+      const group = this.#defaultDeviceLists.get(cat);
+      if (group) {
+        group.list.appendItem(device, false);
+        categoryItemCounts.set(cat, (categoryItemCounts.get(cat) || 0) + 1);
+      }
+    }
+
+    for (const [cat, group] of this.#defaultDeviceLists.entries()) {
+      const count = categoryItemCounts.get(cat) || 0;
+      group.container.style.display = count > 0 ? '' : 'none';
     }
   }
 
@@ -185,6 +261,21 @@ export class DevicesSettingsTab extends UI.Widget.VBox implements
     return value ? String(value) : '';
   }
 
+  private verticalMode(device: EmulationModel.EmulatedDevices.EmulatedDevice): EmulationModel.EmulatedDevices.Mode
+      |null {
+    return device.modes.find(mode => mode.orientation === EmulationModel.EmulatedDevices.Vertical) || null;
+  }
+
+  private horizontalMode(device: EmulationModel.EmulatedDevices.EmulatedDevice): EmulationModel.EmulatedDevices.Mode
+      |null {
+    return device.modes.find(mode => mode.orientation === EmulationModel.EmulatedDevices.Horizontal) || null;
+  }
+
+  private editorIntegerValue(editor: UI.ListWidget.Editor<EmulationModel.EmulatedDevices.EmulatedDevice>,
+                             controlName: string): number {
+    return parseOptionalNonNegativeInteger(editor.control(controlName).value) ?? 0;
+  }
+
   renderItem(device: EmulationModel.EmulatedDevices.EmulatedDevice, editable: boolean): Element {
     const label = document.createElement('label');
     label.classList.add('devices-list-item');
@@ -222,18 +313,28 @@ export class DevicesSettingsTab extends UI.Widget.VBox implements
     device.deviceScaleFactor = editor.control('scale').value ? parseFloat(editor.control('scale').value) : 0;
     device.userAgent = editor.control('user-agent').value;
     device.modes = [];
-    device.modes.push({
+    const verticalMode: EmulationModel.EmulatedDevices.Mode = {
       title: '',
       orientation: EmulationModel.EmulatedDevices.Vertical,
       insets: new EmulationModel.DeviceModeModel.Insets(0, 0, 0, 0),
       image: null,
-    });
-    device.modes.push({
+    };
+    const safeAreaInsets = this.safeAreaInsetsFromEditor(editor);
+    if (safeAreaInsets) {
+      verticalMode.safeAreaInsets = safeAreaInsets;
+    }
+    device.modes.push(verticalMode);
+    const horizontalMode: EmulationModel.EmulatedDevices.Mode = {
       title: '',
       orientation: EmulationModel.EmulatedDevices.Horizontal,
       insets: new EmulationModel.DeviceModeModel.Insets(0, 0, 0, 0),
       image: null,
-    });
+    };
+    const landscapeSafeAreaInsets = this.safeAreaInsetsFromEditor(editor, 'landscape-');
+    if (landscapeSafeAreaInsets) {
+      horizontalMode.safeAreaInsets = landscapeSafeAreaInsets;
+    }
+    device.modes.push(horizontalMode);
     device.capabilities = [];
     const uaType = editor.control('ua-type').value;
     if (uaType === EmulationModel.DeviceModeModel.UA.MOBILE ||
@@ -277,6 +378,7 @@ export class DevicesSettingsTab extends UI.Widget.VBox implements
     editor.control('height').value = this.toNumericInputValue(device.vertical.height);
     editor.control('scale').value = this.toNumericInputValue(device.deviceScaleFactor);
     editor.control('user-agent').value = device.userAgent;
+    this.populateSafeAreaEditor(editor, device);
     let uaType;
     if (device.mobile()) {
       uaType =
@@ -292,6 +394,33 @@ export class DevicesSettingsTab extends UI.Widget.VBox implements
     return editor;
   }
 
+  private safeAreaInsetsFromEditor(editor: UI.ListWidget.Editor<EmulationModel.EmulatedDevices.EmulatedDevice>,
+                                   controlPrefix = ''): EmulationModel.DeviceModeModel.Insets|null {
+    const left = this.editorIntegerValue(editor, `${controlPrefix}safe-area-left`);
+    const top = this.editorIntegerValue(editor, `${controlPrefix}safe-area-top`);
+    const right = this.editorIntegerValue(editor, `${controlPrefix}safe-area-right`);
+    const bottom = this.editorIntegerValue(editor, `${controlPrefix}safe-area-bottom`);
+    if (!left && !top && !right && !bottom) {
+      return null;
+    }
+    return new EmulationModel.DeviceModeModel.Insets(left, top, right, bottom);
+  }
+
+  private populateSafeAreaEditor(editor: UI.ListWidget.Editor<EmulationModel.EmulatedDevices.EmulatedDevice>,
+                                 device: EmulationModel.EmulatedDevices.EmulatedDevice): void {
+    const safeAreaInsets = this.verticalMode(device)?.safeAreaInsets;
+    editor.control('safe-area-left').value = this.toNumericInputValue(safeAreaInsets?.left || 0);
+    editor.control('safe-area-top').value = this.toNumericInputValue(safeAreaInsets?.top || 0);
+    editor.control('safe-area-right').value = this.toNumericInputValue(safeAreaInsets?.right || 0);
+    editor.control('safe-area-bottom').value = this.toNumericInputValue(safeAreaInsets?.bottom || 0);
+
+    const landscapeSafeAreaInsets = this.horizontalMode(device)?.safeAreaInsets;
+    editor.control('landscape-safe-area-left').value = this.toNumericInputValue(landscapeSafeAreaInsets?.left || 0);
+    editor.control('landscape-safe-area-top').value = this.toNumericInputValue(landscapeSafeAreaInsets?.top || 0);
+    editor.control('landscape-safe-area-right').value = this.toNumericInputValue(landscapeSafeAreaInsets?.right || 0);
+    editor.control('landscape-safe-area-bottom').value = this.toNumericInputValue(landscapeSafeAreaInsets?.bottom || 0);
+  }
+
   private createEditor(): UI.ListWidget.Editor<EmulationModel.EmulatedDevices.EmulatedDevice> {
     if (this.editor) {
       return this.editor;
@@ -313,6 +442,11 @@ export class DevicesSettingsTab extends UI.Widget.VBox implements
     dpr.classList.add('device-edit-fixed');
     screen.appendChild(dpr);
 
+    this.appendSafeAreaFields(editor, deviceFields, i18nString(UIStrings.portraitSafeArea), '',
+                              portraitSafeAreaValidator);
+    this.appendSafeAreaFields(editor, deviceFields, i18nString(UIStrings.landscapeSafeArea), 'landscape-',
+                              landscapeSafeAreaValidator);
+
     const uaStringFields = content.createChild('div', 'devices-edit-fields');
     UI.UIUtils.createTextChild(uaStringFields.createChild('b'), i18nString(UIStrings.userAgentString));
 
@@ -389,5 +523,53 @@ export class DevicesSettingsTab extends UI.Widget.VBox implements
         input: UI.ListWidget.EditorControl): UI.ListWidget.ValidatorResult {
       return EmulationModel.DeviceModeModel.DeviceModeModel.scaleValidator(input.value);
     }
+
+    function safeAreaValidator(orientationLabel: string,
+                               input: UI.ListWidget.EditorControl): UI.ListWidget.ValidatorResult {
+      if (parseOptionalNonNegativeInteger(input.value) !== null) {
+        return {valid: true};
+      }
+
+      return {
+        valid: false,
+        errorMessage: i18nString(UIStrings.safeAreaValueMustBeInRange, {
+          PH1: orientationLabel,
+          PH2: input.getAttribute('aria-label') || input.getAttribute('placeholder') || '',
+          PH3: EmulationModel.DeviceModeModel.MaxDeviceSize,
+        }),
+      };
+    }
+
+    function portraitSafeAreaValidator(_item: EmulationModel.EmulatedDevices.EmulatedDevice, _index: number,
+                                       input: UI.ListWidget.EditorControl): UI.ListWidget.ValidatorResult {
+      return safeAreaValidator(i18nString(UIStrings.portraitSafeArea), input);
+    }
+
+    function landscapeSafeAreaValidator(_item: EmulationModel.EmulatedDevices.EmulatedDevice, _index: number,
+                                        input: UI.ListWidget.EditorControl): UI.ListWidget.ValidatorResult {
+      return safeAreaValidator(i18nString(UIStrings.landscapeSafeArea), input);
+    }
+  }
+
+  private appendSafeAreaFields(editor: UI.ListWidget.Editor<EmulationModel.EmulatedDevices.EmulatedDevice>,
+                               deviceFields: HTMLElement, title: string, controlPrefix: string,
+                               safeAreaValidator:
+                                   (item: EmulationModel.EmulatedDevices.EmulatedDevice, index: number,
+                                    input: UI.ListWidget.EditorControl) => UI.ListWidget.ValidatorResult): void {
+    const safeAreaGroup = deviceFields.createChild('div', 'devices-edit-safe-area-group');
+    UI.ARIAUtils.markAsGroup(safeAreaGroup);
+    const heading = safeAreaGroup.createChild('b');
+    heading.id = UI.ARIAUtils.nextId('safe-area-heading-');
+    UI.UIUtils.createTextChild(heading, title);
+    safeAreaGroup.setAttribute('aria-labelledby', heading.id);
+    const safeAreaRow = safeAreaGroup.createChild('div', 'hbox');
+    safeAreaRow.appendChild(editor.createInput(`${controlPrefix}safe-area-left`, 'text',
+                                               i18nString(UIStrings.safeAreaLeft), safeAreaValidator));
+    safeAreaRow.appendChild(editor.createInput(`${controlPrefix}safe-area-top`, 'text',
+                                               i18nString(UIStrings.safeAreaTop), safeAreaValidator));
+    safeAreaRow.appendChild(editor.createInput(`${controlPrefix}safe-area-right`, 'text',
+                                               i18nString(UIStrings.safeAreaRight), safeAreaValidator));
+    safeAreaRow.appendChild(editor.createInput(`${controlPrefix}safe-area-bottom`, 'text',
+                                               i18nString(UIStrings.safeAreaBottom), safeAreaValidator));
   }
 }

package/front_end/panels/settings/emulation/devicesSettingsTab.css

@@ -9,6 +9,19 @@
   padding-right: 0;
 }
 
+.device-group-container {
+  margin-bottom: 8px;
+}
+
+.device-group-title {
+  font-weight: 600;
+  color: var(--sys-color-on-surface-subtle);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin: 12px 0 4px;
+}
+
 .list {
   &:has(div) {
     border: none;
@@ -69,6 +82,11 @@
   margin-bottom: 5px;
 }
 
+.devices-edit-safe-area-group {
+  display: flex;
+  flex-direction: column;
+}
+
 .devices-edit-fields b {
   margin-top: 8px;
   margin-bottom: 0;

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

@@ -253,7 +253,6 @@ Common.Revealer.registerRevealer({
     return [
       Common.Settings.Setting,
       Root.Runtime.Experiment,
-      Root.Runtime.HostExperiment,
     ];
   },
   async loadRevealer() {

package/front_end/panels/sources/CategorizedBreakpointL10n.ts

@@ -137,8 +137,6 @@ const LOCALIZED_INSTRUMENTATION_NAMES:
           i18nLazyString(UIStrings.scriptFirstStatement),
       [SDK.EventBreakpointsModel.InstrumentationNames.SCRIPT_BLOCKED_BY_CSP]:
           i18nLazyString(UIStrings.scriptBlockedByContentSecurity),
-      [SDK.EventBreakpointsModel.InstrumentationNames.SHARED_STORAGE_WORKLET_SCRIPT_FIRST_STATEMENT]:
-          i18nLazyString(UIStrings.scriptFirstStatement),
       [SDK.EventBreakpointsModel.InstrumentationNames.REQUEST_ANIMATION_FRAME]:
           i18nLazyString(UIStrings.requestAnimationFrame),
       [SDK.EventBreakpointsModel.InstrumentationNames.CANCEL_ANIMATION_FRAME]:

package/front_end/panels/sources/DebuggerPausedMessage.ts

@@ -182,11 +182,17 @@ const DEFAULT_VIEW = (input: ViewInput|null, _output: undefined, target: Documen
 type View = typeof DEFAULT_VIEW;
 
 export class DebuggerPausedMessage extends UI.Widget.Widget<ShadowRoot> {
+  static override readonly INJECT = [SDK.EventBreakpointsModel.EventBreakpointsManager] as const;
+
   #viewInput: ViewInput|null = null;
-  constructor(element?: HTMLElement, private readonly view: View = DEFAULT_VIEW) {
+  readonly #eventBreakpointsManager: SDK.EventBreakpointsModel.EventBreakpointsManager;
+  constructor(element: HTMLElement|undefined,
+              [eventBreakpointsManager]: UI.Widget.WidgetDependencies<typeof DebuggerPausedMessage>,
+              private readonly view: View = DEFAULT_VIEW) {
     super(element, {
       useShadowDom: 'pure',
     });
+    this.#eventBreakpointsManager = eventBreakpointsManager;
   }
 
   private static descriptionWithoutStack(description: string): string {
@@ -221,7 +227,7 @@ export class DebuggerPausedMessage extends UI.Widget.Widget<ShadowRoot> {
     };
   }
 
-  static #findEventNameForUi(detailsAuxData?: SDK.DebuggerModel.EventListenerPausedDetailsAuxData): string {
+  #findEventNameForUi(detailsAuxData?: SDK.DebuggerModel.EventListenerPausedDetailsAuxData): string {
     if (!detailsAuxData) {
       return '';
     }
@@ -237,7 +243,7 @@ export class DebuggerPausedMessage extends UI.Widget.Widget<ShadowRoot> {
     }
 
     let breakpoint: SDK.CategorizedBreakpoint.CategorizedBreakpoint|null =
-        SDK.EventBreakpointsModel.EventBreakpointsManager.instance().resolveEventListenerBreakpoint(detailsAuxData);
+        this.#eventBreakpointsManager.resolveEventListenerBreakpoint(detailsAuxData);
     if (breakpoint) {
       // EventBreakpointsManager breakpoints are the only ones with localized names.
       return getLocalizedBreakpointName(breakpoint.name);
@@ -269,8 +275,8 @@ export class DebuggerPausedMessage extends UI.Widget.Widget<ShadowRoot> {
     if (details.reason === Protocol.Debugger.PausedEventReason.DOM) {
       this.#viewInput = await DebuggerPausedMessage.createDOMBreakpointHitMessageDetails(details);
     } else if (details.reason === Protocol.Debugger.PausedEventReason.EventListener) {
-      const eventNameForUI = DebuggerPausedMessage.#findEventNameForUi(
-          details.auxData as SDK.DebuggerModel.EventListenerPausedDetailsAuxData);
+      const eventNameForUI =
+          this.#findEventNameForUi(details.auxData as SDK.DebuggerModel.EventListenerPausedDetailsAuxData);
       this.#viewInput = {mainText: i18nString(UIStrings.pausedOnEventListener), subText: eventNameForUI, errorLike};
     } else if (details.reason === Protocol.Debugger.PausedEventReason.XHR) {
       const auxData = (details.auxData as PausedDetailsAuxData);

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -1773,7 +1773,7 @@ export class BreakpointLocationRevealer implements
   async reveal(breakpointLocation: Breakpoints.BreakpointManager.BreakpointLocation, omitFocus?: boolean|undefined):
       Promise<void> {
     const {uiLocation} = breakpointLocation;
-    SourcesPanel.instance().showUILocation(uiLocation, omitFocus);
+    await SourcesPanel.instance().showUILocation(uiLocation, omitFocus);
     const debuggerPlugin = debuggerPluginForUISourceCode.get(uiLocation.uiSourceCode);
     if (debuggerPlugin) {
       debuggerPlugin.editBreakpointLocation(breakpointLocation);

package/front_end/panels/sources/EditingLocationHistoryManager.ts

@@ -15,7 +15,7 @@ export const HistoryDepth = 20;
 export class EditingLocationHistoryManager {
   private readonly entries: EditingLocationHistoryEntry[] = [];
   private current = -1;
-  private revealing = false;
+  private revealingCount = 0;
 
   constructor(private readonly sourcesView: SourcesView) {
   }
@@ -31,7 +31,7 @@ export class EditingLocationHistoryManager {
     }
     const prevPos = update.startState.selection.main;
     const newPos = update.state.selection.main;
-    const isJump = !this.revealing && prevPos.anchor !== newPos.anchor && update.transactions.some(tr => {
+    const isJump = this.revealingCount === 0 && prevPos.anchor !== newPos.anchor && update.transactions.some(tr => {
       return Boolean(
           tr.isUserEvent('select.pointer') || tr.isUserEvent('select.reveal') || tr.isUserEvent('select.search'));
     });
@@ -50,7 +50,7 @@ export class EditingLocationHistoryManager {
   }
 
   updateCurrentState(uiSourceCode: Workspace.UISourceCode.UISourceCode, position: number): void {
-    if (!this.revealing) {
+    if (this.revealingCount === 0) {
       const top = this.current >= 0 ? this.entries[this.current] : null;
       if (top?.matches(uiSourceCode)) {
         top.position = position;
@@ -66,26 +66,29 @@ export class EditingLocationHistoryManager {
     }
   }
 
-  private reveal(entry: EditingLocationHistoryEntry): void {
+  private async reveal(entry: EditingLocationHistoryEntry): Promise<void> {
     const uiSourceCode = Workspace.Workspace.WorkspaceImpl.instance().uiSourceCode(entry.projectId, entry.url);
     if (uiSourceCode) {
-      this.revealing = true;
-      this.sourcesView.showSourceLocation(uiSourceCode, entry.position, false, true);
-      this.revealing = false;
+      this.revealingCount++;
+      try {
+        await this.sourcesView.showSourceLocation(uiSourceCode, entry.position, false, true);
+      } finally {
+        this.revealingCount--;
+      }
     }
   }
 
   rollback(): void {
     if (this.current > 0) {
       this.current--;
-      this.reveal(this.entries[this.current]);
+      void this.reveal(this.entries[this.current]);
     }
   }
 
   rollover(): void {
     if (this.current < this.entries.length - 1) {
       this.current++;
-      this.reveal(this.entries[this.current]);
+      void this.reveal(this.entries[this.current]);
     }
   }