chrome-devtools-frontend 1.0.1545096 → 1.0.1547571

package/front_end/panels/network/RequestConditionsDrawer.ts

@@ -14,6 +14,7 @@ import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Logs from '../../models/logs/logs.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
+import * as uiI18n from '../../ui/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {Directives, html, type LitTemplate, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -38,6 +39,10 @@ const UIStrings = {
    * @description Tooltip text that appears when hovering over the plus button in the Blocked URLs Pane of the Network panel
    */
   addPattern: 'Add pattern',
+  /**
+   * @description Tooltip text that appears when hovering over the plus button in the Blocked URLs Pane of the Network panel
+   */
+  addRule: 'Add rule',
   /**
    * @description Accessible label for the button to add request blocking patterns in the network request blocking tool
    */
@@ -53,7 +58,13 @@ const UIStrings = {
   /**
    * @description Text that shows in the network request blocking panel if no pattern has yet been added.
    */
-  noPattern: 'No request throttling or blocking patterns',
+  noPattern: 'Nothing throttled or blocked',
+  /**
+   * @description Text that shows in the network request blocking panel if no pattern has yet been added.
+   * @example {Learn more} PH1
+   */
+  noThrottlingOrBlockingPattern:
+      `To throttle or block a network request, add a rule here manually or via the network panel's context menu. {PH1}`,
   /**
    * @description Text that shows  in the network request blocking panel if no pattern has yet been added.
    * @example {Add pattern} PH1
@@ -75,8 +86,9 @@ const UIStrings = {
   textPatternToBlockMatching: 'Text pattern to block matching requests; use * for wildcard',
   /**
    * @description Text in Blocked URLs Pane of the Network panel
+   * @example {Learn more} PH1
    */
-  textEditPattern: 'Text pattern to block or throttle matching requests; use URLPattern syntax.',
+  textEditPattern: 'Text pattern to block or throttle matching requests; use URL Pattern syntax. {PH1}',
   /**
    * @description Error text for empty list widget input in Request Blocking tool
    */
@@ -107,13 +119,46 @@ const UIStrings = {
    */
   learnMore: 'Learn more',
   /**
-   * @description Aria label on a button moving an entry up
+   * @description Accessibility label on a `Learn more` link
+   */
+  learnMoreLabel: 'Learn more about URL pattern syntax',
+  /**
+   * @description Tooltip on a button moving an entry up
+   * @example {*://example.com} PH1
+   */
+  increasePriority: 'Move up {PH1}',
+  /**
+   * @description Tooltip on a button moving an entry down
+   * @example {*://example.com} PH1
+   */
+  decreasePriority: 'Move down {PH1}',
+  /**
+   * @description Tooltip on a checkbox togging the effects for a pattern
+   * @example {*://example.com} PH1
+   */
+  enableThrottlingToggleLabel: 'Throttle or block {PH1}',
+  /**
+   * @description Tooltip on a combobox selecting the request conditions
    */
-  increasePriority: 'Move up (higher patterns are checked first)',
+  requestConditionsLabel: 'Request conditions',
   /**
-   * @description Aria label on a button moving an entry down
+   * @description Aria announcement when a pattern was moved up
    */
-  decreasePriority: 'Move down (higher patterns are checked first)',
+  patternMovedUp: 'URL pattern was moved up',
+  /**
+   * @description Aria announcemenet when a pattern was moved down
+   */
+  patternMovedDown: 'URL pattern was moved down',
+  /**
+   * @description Text on a button to start editing text
+   * @example {*://example.com} PH1
+   */
+  editPattern: 'Edit {PH1}',
+  /**
+   * @description Label for an item to remove something
+   * @example {*://example.com} PH1
+   */
+  removePattern: 'Remove {PH1}',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/network/RequestConditionsDrawer.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -155,26 +200,24 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                                        ? i18nString(UIStrings.noPattern)
                                        : i18nString(UIStrings.noNetworkRequestsBlocked)}</span>
       <div class=empty-state-description>
-        <span>${i18nString(UIStrings.addPatternToBlock, {PH1: i18nString(UIStrings.addPattern)})}</span>
-        <x-link
-          href=${NETWORK_REQUEST_BLOCKING_EXPLANATION_URL}
-          tabindex=0
-          class=devtools-link
-          jslog=${VisualLogging.link().track({click: true, keydown:'Enter|Space'}).context('learn-more')}>
-            ${i18nString(UIStrings.learnMore)}
-        </x-link>
+        ${individualThrottlingEnabled
+        ? uiI18n.getFormatLocalizedStringTemplate(str_, UIStrings.noThrottlingOrBlockingPattern, {PH1: learnMore()})
+        : html`<span>${i18nString(UIStrings.addPatternToBlock,
+                                  {PH1: i18nString(UIStrings.addPattern)})}</span>${learnMore()}`}
       </div>
       <devtools-button
         @click=${input.addPattern}
         class=add-button
         .jslogContext=${'network.add-network-request-blocking-pattern'}
-        aria-label=${individualThrottlingEnabled ? i18nString(UIStrings.addPatternLabel)
+        title=${individualThrottlingEnabled ? i18nString(UIStrings.addPatternLabel)
                                                  : i18nString(UIStrings.addNetworkRequestBlockingPattern)}
         .variant=${Buttons.Button.Variant.TONAL}>
-          ${i18nString(UIStrings.addPattern)}
+          ${individualThrottlingEnabled ? i18nString(UIStrings.addRule) : i18nString(UIStrings.addPattern)}
       </devtools-button>
     </div>
-    <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(UI.Widget.VBox)}>${input.list.element}</devtools-widget>
+    <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(UI.Widget.VBox)}>
+      ${input.list.element}
+    </devtools-widget>
     `,
       // clang-format on
       target);
@@ -358,6 +401,12 @@ export class RequestConditionsDrawer extends UI.Widget.VBox implements
     const element = document.createElement('div');
     this.#listElements.set(condition, element);
     element.classList.add('blocked-url');
+    this.updateItem(element, condition, editable, index);
+    return element;
+  }
+
+  updateItem(element: HTMLElement, condition: SDK.NetworkManager.RequestCondition, editable: boolean, index: number):
+      void {
     const toggle = (e: Event): void => {
       if (editable) {
         e.consume(true);
@@ -375,12 +424,14 @@ export class RequestConditionsDrawer extends UI.Widget.VBox implements
     if (Root.Runtime.hostConfig.devToolsIndividualRequestThrottling?.enabled) {
       const moveUp = (e: Event): void => {
         if (this.manager.requestConditions.conditionsEnabled) {
+          UI.ARIAUtils.LiveAnnouncer.status(i18nString(UIStrings.patternMovedUp));
           e.consume(true);
           this.manager.requestConditions.increasePriority(condition);
         }
       };
       const moveDown = (e: Event): void => {
         if (this.manager.requestConditions.conditionsEnabled) {
+          UI.ARIAUtils.LiveAnnouncer.status(i18nString(UIStrings.patternMovedDown));
           e.consume(true);
           this.manager.requestConditions.decreasePriority(condition);
         }
@@ -391,22 +442,25 @@ export class RequestConditionsDrawer extends UI.Widget.VBox implements
     <input class=blocked-url-checkbox
       @click=${toggle}
       type=checkbox
-      ?checked=${enabled}
-      ?disabled=${!editable || !originalOrUpgradedURLPattern}
-      .jslog=${VisualLogging.toggle().track({ change: true })}>
-    <devtools-button
-      .iconName=${'arrow-down'}
-      .variant=${Buttons.Button.Variant.ICON}
-      .title=${i18nString(UIStrings.increasePriority)}
-      .jslogContext=${'increase-priority'}
-      @click=${moveDown}></devtools-button>
+      title=${i18nString(UIStrings.enableThrottlingToggleLabel, {PH1: constructorStringOrWildcardURL})}
+      .checked=${enabled}
+      .disabled=${!editable || !originalOrUpgradedURLPattern}
+      jslog=${VisualLogging.toggle().track({ change: true })}>
     <devtools-button
       .iconName=${'arrow-up'}
       .variant=${Buttons.Button.Variant.ICON}
-      .title=${i18nString(UIStrings.decreasePriority)}
+      .title=${i18nString(UIStrings.decreasePriority, {PH1: constructorStringOrWildcardURL})}
       .jslogContext=${'decrease-priority'}
+      ?disabled=${!editable || !originalOrUpgradedURLPattern}
       @click=${moveUp}>
     </devtools-button>
+    <devtools-button
+      .iconName=${'arrow-down'}
+      .variant=${Buttons.Button.Variant.ICON}
+      .title=${i18nString(UIStrings.increasePriority, {PH1: constructorStringOrWildcardURL})}
+      .jslogContext=${'increase-priority'}
+      ?disabled=${!editable || !originalOrUpgradedURLPattern}
+      @click=${moveDown}></devtools-button>
     ${originalOrUpgradedURLPattern ? html`
       <devtools-tooltip variant=rich jslogcontext=url-pattern id=url-pattern-${index}>
         <div>hash: ${originalOrUpgradedURLPattern.hash}</div>
@@ -439,22 +493,26 @@ export class RequestConditionsDrawer extends UI.Widget.VBox implements
       </devtools-tooltip>`: nothing}
     <div
       @click=${toggle}
+      ?disabled=${!editable || !originalOrUpgradedURLPattern}
       class=blocked-url-label
       aria-details=url-pattern-${index}>
         ${constructorStringOrWildcardURL}
     </div>
     <devtools-widget
        class=conditions-selector
-       ?disabled=${!editable}
+       title=${i18nString(UIStrings.requestConditionsLabel)}
        .widgetConfig=${UI.Widget.widgetConfig(
          MobileThrottling.NetworkThrottlingSelector.NetworkThrottlingSelectorWidget, {
            variant:
              MobileThrottling.NetworkThrottlingSelector.NetworkThrottlingSelect.Variant.INDIVIDUAL_REQUEST_CONDITIONS,
            jslogContext: 'request-conditions',
+           disabled: !editable,
            onConditionsChanged,
            currentConditions: condition.conditions,
          })}></devtools-widget>
-    <devtools-widget .widgetConfig=${widgetConfig(AffectedCountWidget, {condition, drawer: this})}></devtools-widget>`,
+    <devtools-widget
+      ?disabled=${!editable || !originalOrUpgradedURLPattern}
+      .widgetConfig=${widgetConfig(AffectedCountWidget, {condition, drawer: this})}></devtools-widget>`,
           // clang-format on
           element);
     } else {
@@ -464,15 +522,14 @@ export class RequestConditionsDrawer extends UI.Widget.VBox implements
     <input class=blocked-url-checkbox
       @click=${toggle}
       type=checkbox
-      ?checked=${condition.enabled}
-      ?disabled=${!editable}
-      .jslog=${VisualLogging.toggle().track({ change: true })}>
+      .checked=${condition.enabled}
+      .disabled=${!editable}
+      jslog=${VisualLogging.toggle().track({ change: true })}>
     <div @click=${toggle} class=blocked-url-label>${wildcardURL}</div>
     <devtools-widget .widgetConfig=${widgetConfig(AffectedCountWidget, {condition, drawer: this})}></devtools-widget>`,
           // clang-format on
           element);
     }
-    return element;
   }
 
   private toggleEnabled(): void {
@@ -517,11 +574,12 @@ export class RequestConditionsDrawer extends UI.Widget.VBox implements
     const editor = new UI.ListWidget.Editor<SDK.NetworkManager.RequestCondition>();
     const content = editor.contentElement();
     const titles = content.createChild('div', 'blocked-url-edit-row');
-    const label = titles.createChild('div');
+    const label = titles.createChild('label');
     if (Root.Runtime.hostConfig.devToolsIndividualRequestThrottling?.enabled) {
-      label.textContent = i18nString(UIStrings.textEditPattern);
-      label.append(UI.XLink.XLink.create(
-          PATTERN_API_DOCS_URL, i18nString(UIStrings.learnMore), undefined, undefined, 'learn-more'));
+      const learnMore = UI.XLink.XLink.create(
+          PATTERN_API_DOCS_URL, i18nString(UIStrings.learnMore), undefined, undefined, 'learn-more');
+      learnMore.title = i18nString(UIStrings.learnMoreLabel);
+      label.append(uiI18n.getFormatLocalizedString(str_, UIStrings.textEditPattern, {PH1: learnMore}));
     } else {
       label.textContent = i18nString(UIStrings.textPatternToBlockMatching);
     }
@@ -549,17 +607,33 @@ export class RequestConditionsDrawer extends UI.Widget.VBox implements
           return {valid: true, errorMessage: undefined};
         };
     const urlInput = editor.createInput('url', 'text', '', validator);
+    label.htmlFor = urlInput.id = 'editor-url-input';
     fields.createChild('div', 'blocked-url-edit-value').appendChild(urlInput);
     return editor;
   }
 
   update(): void {
     const enabled = this.manager.requestConditions.conditionsEnabled;
-    this.list.clear();
-    for (const pattern of this.manager.requestConditions.conditions) {
-      if (Root.Runtime.hostConfig.devToolsIndividualRequestThrottling?.enabled || pattern.wildcardURL) {
-        this.list.appendItem(pattern, enabled);
-      }
+    const newItems = Array.from(this.manager.requestConditions.conditions.filter(
+        pattern => Root.Runtime.hostConfig.devToolsIndividualRequestThrottling?.enabled || pattern.wildcardURL));
+
+    let oldIndex = 0;
+    for (; oldIndex < newItems.length; ++oldIndex) {
+      const pattern = newItems[oldIndex];
+      this.list.updateItem(
+          oldIndex,
+          pattern,
+          enabled,
+          /* focusable=*/ false,
+          {
+            edit: i18nString(UIStrings.editPattern, {PH1: pattern.constructorStringOrWildcardURL}),
+            delete: i18nString(UIStrings.removePattern, {PH1: pattern.constructorStringOrWildcardURL})
+          },
+      );
+    }
+
+    while (oldIndex < this.list.items.length) {
+      this.list.removeItem(oldIndex);
     }
     this.requestUpdate();
   }

package/front_end/panels/network/networkLogView.css

@@ -175,6 +175,13 @@
   color: var(--sys-color-on-tonal-container);
 }
 
+.network-log-grid.data-grid tr.selected.network-throttled-row,
+.network-log-grid.data-grid tr.selected.network-throttled-row .devtools-link,
+.network-log-grid.data-grid tr.selected.network-throttled-row .network-cell-subtitle,
+.network-log-grid.data-grid tr.selected.network-throttled-row .network-dim-cell {
+  color: var(--sys-color-yellow);
+}
+
 .network-header-subtitle {
   color: var(--sys-color-token-subtle);
 }
@@ -250,6 +257,10 @@
   }
 }
 
+td.time-column {
+  vertical-align: middle;
+}
+
 .data-grid-data-grid-node devtools-icon[name="arrow-up-down-circle"],
 .network-log-grid.data-grid.small .icon {
   width: 16px;

package/front_end/panels/network/networkTimingTable.css

@@ -191,14 +191,16 @@ tr:has([aria-checked].network-fetch-timing-bar-clickable) ~ .network-fetch-timin
   background-color: var(--network-overview-waiting); /* stylelint-disable-line plugin/use_theme_colors */
 }
 
-.throttled devtools-icon {
-  vertical-align: middle;
-  margin-right: var(--sys-size-3);
-  color: var(--sys-color-yellow);
-}
-
 td.throttled {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--sys-size-3);
   color: var(--sys-color-yellow);
+
+  devtools-icon {
+    color: var(--sys-color-yellow);
+  }
 }
 
 .network-timing-bar.receiving,

package/front_end/panels/network/requestConditionsDrawer.css

@@ -32,6 +32,10 @@
   flex-direction: row;
   align-items: center;
   flex: auto;
+
+  devtools-button {
+    flex: none;
+  }
 }
 
 .blocked-url-count {
@@ -76,6 +80,11 @@
 }
 
 .conditions-selector {
-  max-width: 120px;
+  width: max-content;
+  flex: none;
   margin: var(--sys-size-3);
 }
+
+[disabled] {
+  opacity: 50%;
+}

package/front_end/panels/profiler/HeapSnapshotGridNodes.ts

@@ -434,7 +434,7 @@ export class HeapSnapshotGridNode extends
             }
 
             // Merge with the next range.
-            if (nextRange && newEndOfRange === nextRange.from) {
+            if (newEndOfRange === nextRange?.from) {
               range.to = nextRange.to;
               // Remove "show next" button if there is one.
               this.removeChildByIndex(insertionIndex);

package/front_end/panels/profiler/HeapSnapshotProxy.ts

@@ -4,6 +4,8 @@
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import type * as PlatformApi from '../../core/platform/api/api.js';
+import * as Platform from '../../core/platform/platform.js';
 import type * as HeapSnapshotModel from '../../models/heap_snapshot_model/heap_snapshot_model.js';
 
 import type {ChildrenProvider} from './ChildrenProvider.js';
@@ -27,7 +29,7 @@ export class HeapSnapshotWorkerProxy extends Common.ObjectWrapper.ObjectWrapper<
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   callbacks: Map<number, (arg0: any) => void>;
   readonly previousCallbacks: Set<number>;
-  readonly worker: Common.Worker.WorkerWrapper;
+  readonly worker: PlatformApi.HostRuntime.Worker;
   interval?: number;
   // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -38,8 +40,9 @@ export class HeapSnapshotWorkerProxy extends Common.ObjectWrapper.ObjectWrapper<
     this.nextCallId = 1;
     this.callbacks = new Map();
     this.previousCallbacks = new Set();
-    this.worker = Common.Worker.WorkerWrapper.fromURL(
-        new URL('../../entrypoints/heap_snapshot_worker/heap_snapshot_worker-entrypoint.js', import.meta.url));
+    this.worker = Platform.HostRuntime.HOST_RUNTIME.createWorker(
+        new URL('../../entrypoints/heap_snapshot_worker/heap_snapshot_worker-entrypoint.js', import.meta.url)
+            .toString());
     this.worker.onmessage = this.messageReceived.bind(this);
   }
 
@@ -74,13 +77,15 @@ export class HeapSnapshotWorkerProxy extends Common.ObjectWrapper.ObjectWrapper<
 
   callFactoryMethod<T extends Object>(
       callback: null, objectId: string, methodName: string, proxyConstructor: new(...arg1: any[]) => T,
-      transfer: Transferable[], ...methodArguments: any[]): T;
+      transfer: PlatformApi.HostRuntime.WorkerTransferable[], ...methodArguments: any[]): T;
   callFactoryMethod<T extends Object>(
       callback: ((...arg0: any[]) => void), objectId: string, methodName: string,
-      proxyConstructor: new(...arg1: any[]) => T, transfer: Transferable[], ...methodArguments: any[]): null;
+      proxyConstructor: new(...arg1: any[]) => T, transfer: PlatformApi.HostRuntime.WorkerTransferable[],
+      ...methodArguments: any[]): null;
   callFactoryMethod<T extends Object>(
       callback: ((...arg0: any[]) => void)|null, objectId: string, methodName: string,
-      proxyConstructor: new(...arg1: any[]) => T, transfer: Transferable[], ...methodArguments: any[]): T|null {
+      proxyConstructor: new(...arg1: any[]) => T, transfer: PlatformApi.HostRuntime.WorkerTransferable[],
+      ...methodArguments: any[]): T|null {
     const callId = this.nextCallId++;
     const newObjectId = this.nextObjectId++;
 
@@ -164,9 +169,7 @@ export class HeapSnapshotWorkerProxy extends Common.ObjectWrapper.ObjectWrapper<
     return done;
   }
 
-  // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  messageReceived(event: MessageEvent<any>): void {
+  messageReceived(event: PlatformApi.HostRuntime.WorkerMessageEvent): void {
     const data = event.data;
     if (data.eventName) {
       if (this.eventHandler) {
@@ -191,9 +194,7 @@ export class HeapSnapshotWorkerProxy extends Common.ObjectWrapper.ObjectWrapper<
     callback(data.result);
   }
 
-  // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  postMessage(message: any, transfer?: Transferable[]): void {
+  postMessage(message: unknown, transfer?: PlatformApi.HostRuntime.WorkerTransferable[]): void {
     this.worker.postMessage(message, transfer);
   }
 }
@@ -226,8 +227,8 @@ export class HeapSnapshotProxyObject {
   }
 
   callFactoryMethodPromise<T extends Object>(
-      methodName: string, proxyConstructor: new(...arg1: any[]) => T, transfer: Transferable[],
-      ...args: any[]): Promise<T> {
+      methodName: string, proxyConstructor: new(...arg1: any[]) => T,
+      transfer: PlatformApi.HostRuntime.WorkerTransferable[], ...args: any[]): Promise<T> {
     return new Promise(
         resolve => this.worker.callFactoryMethod(
             resolve, String(this.objectId), methodName, proxyConstructor, transfer, ...args));

package/front_end/panels/profiler/ProfilesPanel.ts

@@ -32,7 +32,6 @@ import '../../ui/legacy/legacy.js';
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
-import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 // eslint-disable-next-line @devtools/es-modules-import
@@ -241,7 +240,7 @@ export class ProfilesPanel extends UI.Panel.PanelWithSidebar implements DataDisp
     if (!this.toggleRecordAction.enabled()) {
       return true;
     }
-    const toggleButton = Platform.DOMUtilities.deepActiveElement(this.element.ownerDocument);
+    const toggleButton = UI.DOMUtilities.deepActiveElement(this.element.ownerDocument);
     const type = this.selectedProfileType;
     if (!type) {
       return true;

package/front_end/panels/recorder/components/StepEditor.ts

@@ -451,7 +451,7 @@ export class EditorState {
         delete step.selectors;
       }
     }
-    if (state.frame && state.frame.length === 0 && 'frame' in step) {
+    if (state.frame?.length === 0 && 'frame' in step) {
       delete step.frame;
     }
     return cleanUndefineds(Models.SchemaUtils.parseStep(step));

package/front_end/panels/security/SecurityPanelSidebar.ts

@@ -176,9 +176,7 @@ export class SecurityPanelSidebar extends UI.Widget.VBox {
         this.#securitySidebarLastItemSetting.get() === this.#cookieControlsTreeElement.elemId) {
       this.#cookieControlsTreeElement.select();
       this.#cookieControlsTreeElement.showElement();
-    } else if (
-        this.cookieReportTreeElement &&
-        this.#securitySidebarLastItemSetting.get() === this.cookieReportTreeElement.elemId) {
+    } else if (this.#securitySidebarLastItemSetting.get() === this.cookieReportTreeElement?.elemId) {
       this.cookieReportTreeElement.select();
       this.cookieReportTreeElement.showElement();
     } else {

package/front_end/panels/settings/KeybindsSettingsTab.ts

@@ -271,30 +271,29 @@ export class KeybindsSettingsTab extends UI.Widget.VBox implements UI.ListContro
   }
 
   private createListItems(): KeybindsItem[] {
-    const actions = UI.ActionRegistry.ActionRegistry.instance().actions().sort((actionA, actionB) => {
-      if (actionA.category() < actionB.category()) {
-        return -1;
-      }
-      if (actionA.category() > actionB.category()) {
-        return 1;
-      }
-      if (actionA.id() < actionB.id()) {
-        return -1;
-      }
-      if (actionA.id() > actionB.id()) {
-        return 1;
-      }
-      return 0;
-    });
+    const actions = UI.ActionRegistry.ActionRegistry.instance()
+                        .actions()
+                        .filter(action => action.configurableBindings())
+                        .sort((actionA, actionB) => {
+                          if (actionA.category() < actionB.category()) {
+                            return -1;
+                          }
+                          if (actionA.category() > actionB.category()) {
+                            return 1;
+                          }
+                          if (actionA.id() < actionB.id()) {
+                            return -1;
+                          }
+                          if (actionA.id() > actionB.id()) {
+                            return 1;
+                          }
+                          return 0;
+                        });
 
     const items: KeybindsItem[] = [];
 
     let currentCategory: UI.ActionRegistration.ActionCategory;
     actions.forEach(action => {
-      if (action.id() === 'elements.toggle-element-search') {
-        return;
-      }
-
       if (currentCategory !== action.category()) {
         items.push(action.category());
       }
@@ -305,8 +304,8 @@ export class KeybindsSettingsTab extends UI.Widget.VBox implements UI.ListContro
   }
 
   onEscapeKeyPressed(event: Event): void {
-    const deepActiveElement = Platform.DOMUtilities.deepActiveElement(document);
-    if (this.editingRow && deepActiveElement && deepActiveElement.nodeName === 'INPUT') {
+    const deepActiveElement = UI.DOMUtilities.deepActiveElement(document);
+    if (this.editingRow && deepActiveElement?.nodeName === 'INPUT') {
       this.editingRow.onEscapeKeyPressed(event);
     }
   }
@@ -595,7 +594,7 @@ export class ShortcutListItem {
   }
 
   onEscapeKeyPressed(event: Event): void {
-    const activeElement = Platform.DOMUtilities.deepActiveElement(document);
+    const activeElement = UI.DOMUtilities.deepActiveElement(document);
     for (const [shortcut, shortcutInput] of this.shortcutInputs.entries()) {
       if (activeElement === shortcutInput) {
         this.onShortcutInputKeyDown(shortcut, shortcutInput as HTMLInputElement, event);

package/front_end/panels/sources/CSSPlugin.ts

@@ -385,7 +385,7 @@ function getNumberAt(node: CodeMirror.SyntaxNode): {from: number, to: number}|nu
   }
   if (node.name === 'NumberLiteral') {
     const lastChild = node.lastChild;
-    return {from: node.from, to: lastChild && lastChild.name === 'Unit' ? lastChild.from : node.to};
+    return {from: node.from, to: lastChild?.name === 'Unit' ? lastChild.from : node.to};
   }
   return null;
 }

package/front_end/panels/sources/CoveragePlugin.ts

@@ -7,10 +7,10 @@ import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
-import type * as Workspace from '../../models/workspace/workspace.js';
+import * as Workspace from '../../models/workspace/workspace.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import type * as TextEditor from '../../ui/components/text_editor/text_editor.js';
-import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
+import type * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Coverage from '../coverage/coverage.js';
 
@@ -123,7 +123,7 @@ export class CoveragePlugin extends Plugin {
   }
 
   private getCoverageManager(): Coverage.CoverageDecorationManager.CoverageDecorationManager|undefined {
-    return this.uiSourceCode.getDecorationData(SourceFrame.SourceFrame.DecoratorType.COVERAGE);
+    return this.uiSourceCode.getDecorationData(Workspace.UISourceCode.DecoratorType.COVERAGE);
   }
 
   override editorInitialized(editor: TextEditor.TextEditor.TextEditor): void {
@@ -132,9 +132,9 @@ export class CoveragePlugin extends Plugin {
     }
   }
 
-  override decorationChanged(type: SourceFrame.SourceFrame.DecoratorType, editor: TextEditor.TextEditor.TextEditor):
+  override decorationChanged(type: Workspace.UISourceCode.DecoratorType, editor: TextEditor.TextEditor.TextEditor):
       void {
-    if (type === SourceFrame.SourceFrame.DecoratorType.COVERAGE) {
+    if (type === Workspace.UISourceCode.DecoratorType.COVERAGE) {
       this.startDecoUpdate(editor);
     }
   }

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -1108,7 +1108,7 @@ export class DebuggerPlugin extends Plugin {
       }
       if (syntaxType === 'new') {
         const callee = syntaxNode.parent?.getChild('Expression');
-        if (callee && callee.name === 'VariableName' && state.sliceDoc(callee.from, callee.to) === 'Worker') {
+        if (callee?.name === 'VariableName' && state.sliceDoc(callee.from, callee.to) === 'Worker') {
           asyncCall = syntaxNode.parent;
         }
       }
@@ -1509,7 +1509,7 @@ export class DebuggerPlugin extends Plugin {
     }
 
     const resource = this.getSourceMapResource();
-    if (resource && resource.success === null) {
+    if (resource?.success === null) {
       // Don't create the infobar until we know whether loading succeeded or failed.
       return;
     }

package/front_end/panels/sources/NavigatorView.ts

@@ -1912,7 +1912,7 @@ export class NavigatorFolderTreeNode extends NavigatorTreeNode {
   }
 
   override wasPopulated(): void {
-    if (!this.treeElement || this.treeElement.node !== this) {
+    if (this.treeElement?.node !== this) {
       return;
     }
     this.addChildrenRecursive();

package/front_end/panels/sources/Plugin.ts

@@ -41,7 +41,7 @@ export class Plugin {
       void {
   }
 
-  decorationChanged(_type: SourceFrame.SourceFrame.DecoratorType, _editor: TextEditor.TextEditor.TextEditor): void {
+  decorationChanged(_type: Workspace.UISourceCode.DecoratorType, _editor: TextEditor.TextEditor.TextEditor): void {
   }
 
   editorExtension(): CodeMirror.Extension {