chrome-devtools-frontend 1.0.1682249 → 1.0.1684555

package/front_end/panels/timeline/components/NetworkRequestTooltip.ts

@@ -23,39 +23,39 @@ const MAX_URL_LENGTH = 60;
 
 const UIStrings = {
   /**
-   * @description Text that refers to the priority of network request
+   * @description Label for network request priority in the network request tooltip of the Performance panel.
    */
   priority: 'Priority',
   /**
-   * @description Text for the duration of a network request
+   * @description Label for total duration in the network request tooltip of the Performance panel.
    */
   duration: 'Duration',
   /**
-   * @description Text that refers to the queueing and connecting time of a network request
+   * @description Label for the queuing and connecting phase duration in the network request tooltip of the Performance panel.
    */
   queuingAndConnecting: 'Queuing and connecting',
   /**
-   * @description Text that refers to the request sent and waiting time of a network request
+   * @description Label for the request sent and waiting phase duration in the network request tooltip of the Performance panel.
    */
   requestSentAndWaiting: 'Request sent and waiting',
   /**
-   * @description Text that refers to the content downloading time of a network request
+   * @description Label for the content downloading phase duration in the network request tooltip of the Performance panel.
    */
   contentDownloading: 'Content downloading',
   /**
-   * @description Text that refers to the waiting on main thread time of a network request
+   * @description Label for the main thread waiting phase duration in the network request tooltip of the Performance panel.
    */
   waitingOnMainThread: 'Waiting on main thread',
   /**
-   * @description Text that refers to a network request is render-blocking
+   * @description Label indicating that the network request is render-blocking in the network request tooltip of the Performance panel.
    */
   renderBlocking: 'Render-blocking',
   /**
-   * @description Text to refer to the list of redirects.
+   * @description Header label for redirect details in the network request tooltip of the Performance panel.
    */
   redirects: 'Redirects',
   /**
-   * @description Cell title in Network Data Grid Node of the Network panel
+   * @description Tooltip text indicating that the network request was throttled in the Performance panel.
    * @example {Fast 4G} PH1
    */
   wasThrottled: 'Request was throttled ({PH1})',

package/front_end/panels/timeline/components/OriginMap.ts

@@ -17,27 +17,27 @@ const {html} = Lit;
 
 const UIStrings = {
   /**
-   * @description Title for a column in a data table representing a site origin used for development
+   * @description Column header for development origin in the origin mapping table of the Performance panel.
    */
   developmentOrigin: 'Development origin',
   /**
-   * @description Title for a column in a data table representing a site origin used by real users in a production environment
+   * @description Column header for production origin in the origin mapping table of the Performance panel.
    */
   productionOrigin: 'Production origin',
   /**
-   * @description Warning message explaining that an input origin is not a valid origin or URL.
+   * @description Warning message explaining that an entered origin is not a valid origin or URL in the Performance panel.
    * @example {http//malformed.com} PH1
    */
-  invalidOrigin: '"{PH1}" is not a valid origin or URL.',
+  invalidOrigin: '"{PH1}" isn’t a valid origin or URL.',
   /**
-   * @description Warning message explaining that an development origin is already mapped to a productionOrigin.
+   * @description Warning message explaining that a development origin is already mapped to a production origin in the Performance panel.
    * @example {https://example.com} PH1
    */
   alreadyMapped: '"{PH1}" is already mapped to a production origin.',
   /**
-   * @description Warning message explaining that a page doesn't have enough real user data to show any information for. "Chrome UX Report" is a product name and should not be translated.
+   * @description Warning message explaining that a page does not have enough real user data in the Performance panel.
    */
-  pageHasNoData: 'The Chrome UX Report does not have sufficient real user data for this page.',
+  pageHasNoData: 'The Chrome UX Report doesn’t have enough real user data for this page.',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/OriginMap.ts', UIStrings);

package/front_end/panels/timeline/components/RelatedInsightChips.ts

@@ -13,11 +13,11 @@ const {html, render} = Lit;
 
 const UIStrings = {
   /**
-   * @description prefix shown next to related insight chips
+   * @description Prefix shown next to related insight chips in the Performance panel.
    */
   insightKeyword: 'Insight',
   /**
-   * @description Prefix shown next to related insight chips and containing the insight name.
+   * @description Prefix shown next to related insight chips containing the insight name in the Performance panel.
    * @example {Improve image delivery} PH1
    */
   insightWithName: 'Insight: {PH1}',

package/front_end/panels/timeline/components/SidebarAnnotationsTab.ts

@@ -27,62 +27,61 @@ const deleteAnnotationImageUrl =
 
 const UIStrings = {
   /**
-   * @description Title for entry label.
+   * @description Title for the annotations onboarding section in the Performance panel sidebar.
    */
   annotationGetStarted: 'Annotate a trace for yourself and others',
   /**
-   * @description Title for entry label.
+   * @description Header title for the item label tutorial in the Performance panel sidebar.
    */
   entryLabelTutorialTitle: 'Label an item',
   /**
-   * @description Text for how to create an entry label.
+   * @description Instructions for how to add an item label in the Performance panel.
    */
-  entryLabelTutorialDescription: 'Double-click or press Enter on an item and type to create an item label.',
+  entryLabelTutorialDescription: 'Double-click or press Enter on an item and type to add an item label.',
   /**
-   * @description  Title for diagram.
+   * @description Header title for the item connection tutorial in the Performance panel sidebar.
    */
   entryLinkTutorialTitle: 'Connect two items',
   /**
-   * @description Text for how to create a diagram between entries.
+   * @description Instructions for how to connect two items in the flame chart of the Performance panel.
    */
   entryLinkTutorialDescription:
       'Double-click on an item, click on the adjacent rightward arrow, then select the destination item.',
   /**
-   * @description  Title for time range.
+   * @description Header title for the time range tutorial in the Performance panel sidebar.
    */
   timeRangeTutorialTitle: 'Define a time range',
   /**
-   * @description Text for how to create a time range selection and add note.
+   * @description Instructions for how to add a time range annotation in the flame chart of the Performance panel.
    */
-  timeRangeTutorialDescription: 'Shift-drag in the flamechart then type to create a time range annotation.',
+  timeRangeTutorialDescription: 'Shift-drag in the flame chart, then type to add a time range annotation.',
   /**
-   * @description  Title for deleting annotations.
+   * @description Header title for the annotation deletion tutorial in the Performance panel sidebar.
    */
   deleteAnnotationTutorialTitle: 'Delete an annotation',
   /**
-   * @description Text for how to access an annotation delete function.
+   * @description Instructions for how to delete an annotation in the Performance panel sidebar.
    */
-  deleteAnnotationTutorialDescription:
-      'Hover over the list in the sidebar with Annotations tab selected to access the delete function.',
+  deleteAnnotationTutorialDescription: 'Hover over the list in the sidebar Annotations tab to delete an annotation.',
   /**
-   * @description Text used to describe the delete button to screen readers.
-   * @example {"A paint event annotated with the text hello world"} PH1
-   **/
+   * @description Accessible label for the delete annotation button in the Performance panel sidebar.
+   * @example {A paint event annotated with the text hello world} PH1
+   */
   deleteButton: 'Delete annotation: {PH1}',
   /**
-   * @description label used to describe an annotation on an entry
+   * @description Accessible label describing an item annotation in the Performance panel sidebar.
    * @example {Paint} PH1
-   * @example {"Hello world"} PH2
+   * @example {Hello world} PH2
    */
   entryLabelDescriptionLabel: 'A "{PH1}" event annotated with the text "{PH2}"',
   /**
-   * @description label used to describe a time range annotation
+   * @description Accessible label describing a time range annotation in the Performance panel sidebar.
    * @example {2.5 milliseconds} PH1
    * @example {13.5 milliseconds} PH2
    */
   timeRangeDescriptionLabel: 'A time range starting at {PH1} and ending at {PH2}',
   /**
-   * @description label used to describe a link from one entry to another.
+   * @description Accessible label describing a link between two events in the Performance panel sidebar.
    * @example {Paint} PH1
    * @example {Recalculate styles} PH2
    */

package/front_end/panels/timeline/components/SidebarSingleInsightSet.ts

@@ -44,7 +44,7 @@ const INSIGHT_NAME_TO_COMPONENT = {
 
 const UIStrings = {
   /**
-   * @description Summary text for an expandable dropdown that contains all insights in a passing state.
+   * @description Summary text for an expandable dropdown that contains all insights in a passing state in the Performance panel sidebar.
    * @example {4} PH1
    */
   passedInsights: 'Passed insights ({PH1})',

package/front_end/panels/timeline/components/TimelineSummary.ts

@@ -15,11 +15,11 @@ const {render, html} = Lit;
 
 const UIStrings = {
   /**
-   * @description Text for total
+   * @description Label for total duration in the summary view of the Performance panel.
    */
   total: 'Total',
   /**
-   * @description Range in Timeline Details View's Summary
+   * @description Time range in the summary view of the Performance panel.
    * @example {1ms} PH1
    * @example {10ms} PH2
    */

package/front_end/panels/timeline/components/Utils.ts

@@ -14,16 +14,12 @@ import type {CompareRating} from './MetricCompareStrings.js';
 
 const UIStrings = {
   /**
-   * @description ms is the short form of milli-seconds and the placeholder is a decimal number.
-   * The shortest form or abbreviation of milliseconds should be used, as there is
-   * limited room in this UI.
+   * @description Short formatted milliseconds string in the Performance panel.
    * @example {2.14} PH1
    */
   fms: '{PH1}[ms]()',
   /**
-   * @description s is short for seconds and the placeholder is a decimal number
-   * The shortest form or abbreviation of seconds should be used, as there is
-   * limited room in this UI.
+   * @description Short formatted seconds string in the Performance panel.
    * @example {2.14} PH1
    */
   fs: '{PH1}[s]()',

package/front_end/panels/timeline/components/insights/BaseInsightComponent.ts

@@ -27,37 +27,34 @@ const {html} = Lit;
 
 const UIStrings = {
   /**
-   * @description Text to tell the user the estimated time or size savings for this insight. "&" means "and" - space is limited to prefer abbreviated terms if possible. Text will still fit if not short, it just won't look very good, so using no abbreviations is fine if necessary.
+   * @description Estimated time or size savings for an insight in the Performance panel sidebar.
    * @example {401 ms} PH1
-   * @example {112 kB} PH1
    */
   estimatedSavings: 'Est savings: {PH1}',
   /**
-   * @description Text to tell the user the estimated time and size savings for this insight. "&" means "and", "Est" means "Estimated" - space is limited to prefer abbreviated terms if possible. Text will still fit if not short, it just won't look very good, so using no abbreviations is fine if necessary.
+   * @description Estimated time and size savings for an insight in the Performance panel sidebar.
    * @example {401 ms} PH1
    * @example {112 kB} PH2
    */
   estimatedSavingsTimingAndBytes: 'Est savings: {PH1} & {PH2}',
   /**
-   * @description Text to tell the user the estimated time savings for this insight that is used for screen readers.
+   * @description Accessible label for the estimated time savings of an insight in the Performance panel sidebar.
    * @example {401 ms} PH1
-   * @example {112 kB} PH1
    */
   estimatedSavingsAriaTiming: 'Estimated savings for this insight: {PH1}',
   /**
-   * @description Text to tell the user the estimated size savings for this insight that is used for screen readers. Value is in terms of "transfer size", aka encoded/compressed data length.
-   * @example {401 ms} PH1
+   * @description Accessible label for the estimated size savings of an insight in the Performance panel sidebar.
    * @example {112 kB} PH1
    */
   estimatedSavingsAriaBytes: 'Estimated savings for this insight: {PH1} transfer size',
   /**
-   * @description Text to tell the user the estimated time and size savings for this insight that is used for screen readers.
+   * @description Accessible label for both estimated time and size savings of an insight in the Performance panel sidebar.
    * @example {401 ms} PH1
    * @example {112 kB} PH2
    */
   estimatedSavingsTimingAndBytesAria: 'Estimated savings for this insight: {PH1} and {PH2} transfer size',
   /**
-   * @description Used for screen-readers as a label on the button to expand an insight to view details
+   * @description Accessible label for the button to expand an insight to view details in the Performance panel sidebar.
    * @example {LCP breakdown} PH1
    */
   viewDetails: 'View details for {PH1} insight.',

package/front_end/panels/timeline/components/insights/Checklist.ts

@@ -19,12 +19,12 @@ const {html} = Lit;
 
 const UIStrings = {
   /**
-   * @description Text for a screen-reader label to tell the user that the icon represents a successful insight check
+   * @description Accessible label indicating that an insight checklist check passed in the Performance panel sidebar.
    * @example {Server response time} PH1
    */
   successAriaLabel: 'Insight check passed: {PH1}',
   /**
-   * @description Text for a screen-reader label to tell the user that the icon represents an unsuccessful insight check
+   * @description Accessible label indicating that an insight checklist check failed in the Performance panel sidebar.
    * @example {Server response time} PH1
    */
   failedAriaLabel: 'Insight check failed: {PH1}',

package/front_end/panels/timeline/components/insights/Table.ts

@@ -13,7 +13,7 @@ import tableStyles from './table.css.js';
 
 const UIStrings = {
   /**
-   * @description Table row value representing the remaining items not shown in the table due to size constraints. This row will always represent at least 2 items.
+   * @description Table row label representing the remaining items not shown in the table in the Performance panel sidebar.
    * @example {5} PH1
    */
   others: '{PH1} others',

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: Internal
 Version: N/A
-Revision: e35c9c6a769bb2bfc92bbbd8270b7ef6b330b939
+Revision: 069db94880beecb3702000d1763083e769fb6b03
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/front_end/ui/comments/CommentAnchorResolver.ts

@@ -507,6 +507,100 @@ export function rematchCommentAnchor(comment: CommentThread, root: Document|Elem
   return candidateList[0] || null;
 }
 
+export interface VisibleRect {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+  width: number;
+  height: number;
+}
+
+function isClippingOverflow(overflow: string): boolean {
+  return overflow === 'hidden' || overflow === 'auto' || overflow === 'scroll' || overflow === 'clip';
+}
+
+/**
+ * Computes the visible viewport-relative bounding box of an element after clipping against
+ * all ancestor scroll/overflow containers and viewport boundaries across shadow DOM roots.
+ *
+ * @param element The source DOM element.
+ * @param targetRect Optional explicit bounding box (e.g. for sub-lines or custom targets).
+ * @returns The clipped viewport-relative rectangle or null if the element is completely clipped out of view or invisible.
+ */
+export function computeVisibleRect(element: Element, targetRect?: DOMRect): VisibleRect|null {
+  if (!element.isConnected) {
+    return null;
+  }
+  if (!element.checkVisibility({checkOpacity: true, checkVisibilityCSS: true, contentVisibilityAuto: true})) {
+    return null;
+  }
+
+  const rect = targetRect ?? element.getBoundingClientRect();
+  if (rect.width <= 0 || rect.height <= 0) {
+    return null;
+  }
+
+  let visibleLeft = rect.left;
+  let visibleRight = rect.right;
+  let visibleTop = rect.top;
+  let visibleBottom = rect.bottom;
+
+  const doc = element.ownerDocument || document;
+  const win = doc.defaultView || window;
+  const viewportWidth = win.innerWidth || doc.documentElement.clientWidth;
+  const viewportHeight = win.innerHeight || doc.documentElement.clientHeight;
+
+  visibleLeft = Math.max(visibleLeft, 0);
+  visibleTop = Math.max(visibleTop, 0);
+  visibleRight = Math.min(visibleRight, viewportWidth);
+  visibleBottom = Math.min(visibleBottom, viewportHeight);
+
+  if (visibleLeft >= visibleRight || visibleTop >= visibleBottom) {
+    return null;
+  }
+
+  let current = element.parentElementOrShadowHost();
+  while (current && current !== doc.documentElement && current !== doc.body) {
+    const style = win.getComputedStyle(current);
+    const clipsX = isClippingOverflow(style.overflowX);
+    const clipsY = isClippingOverflow(style.overflowY);
+
+    if (clipsX || clipsY) {
+      const parentRect = current.getBoundingClientRect();
+      if (clipsX) {
+        visibleLeft = Math.max(visibleLeft, parentRect.left);
+        visibleRight = Math.min(visibleRight, parentRect.right);
+      }
+      if (clipsY) {
+        visibleTop = Math.max(visibleTop, parentRect.top);
+        visibleBottom = Math.min(visibleBottom, parentRect.bottom);
+      }
+
+      if (visibleLeft >= visibleRight || visibleTop >= visibleBottom) {
+        return null;
+      }
+    }
+
+    current = current.parentElementOrShadowHost();
+  }
+
+  const width = visibleRight - visibleLeft;
+  const height = visibleBottom - visibleTop;
+  if (width <= 0 || height <= 0) {
+    return null;
+  }
+
+  return {
+    left: visibleLeft,
+    top: visibleTop,
+    right: visibleRight,
+    bottom: visibleBottom,
+    width,
+    height,
+  };
+}
+
 /**
  * Checks whether an element is connected to the DOM, visible according to `checkVisibility()`,
  * and has non-zero bounding box dimensions.

package/front_end/ui/comments/CommentOverlayManager.ts

@@ -7,8 +7,8 @@ import * as CommentManager from '../../models/comment_manager/comment_manager.js
 
 import {
   type CommentThread,
+  computeVisibleRect,
   deepQuerySelectorAll,
-  isElementVisible,
   rematchCommentAnchor,
   resolveCommentAnchor,
   resolveCommentAnchorElement,
@@ -304,30 +304,30 @@ export class CommentOverlayManager extends Common.ObjectWrapper.ObjectWrapper<Ev
         this.#observedThreads.add(el);
       }
 
-      if (!isElementVisible(el)) {
+      const visibleRect = computeVisibleRect(el);
+      if (!visibleRect) {
         continue;
       }
 
-      const rect = el.getBoundingClientRect();
       const offsetIndex = elementPinCounts.get(el) || 0;
       elementPinCounts.set(el, offsetIndex + 1);
       // Offset by 26px vertically (24px pin icon height + 2px spacing) so multiple comment pins on the same element stack vertically without overlapping.
       const offsetY = offsetIndex * 26;
 
-      // Offset by -12px (half of the 24px pin diameter) so the pin icon is centered on the top-right corner of the target element.
+      // Offset by -12px (half of the 24px pin diameter) so the pin icon is centered on the top-right corner of the visible clipped area.
       newPins.push({
         id: thread.id,
-        top: scrollY + rect.top - 12 + offsetY,
-        left: scrollX + rect.right - 12,
+        top: scrollY + visibleRect.top - 12 + offsetY,
+        left: scrollX + visibleRect.right - 12,
         visible: true,
       });
 
       newHighlights.push({
         id: thread.id,
-        top: scrollY + rect.top,
-        left: scrollX + rect.left,
-        width: rect.width,
-        height: rect.height,
+        top: scrollY + visibleRect.top,
+        left: scrollX + visibleRect.left,
+        width: visibleRect.width,
+        height: visibleRect.height,
         visible: true,
       });
     }
@@ -457,32 +457,16 @@ export class CommentOverlayManager extends Common.ObjectWrapper.ObjectWrapper<Ev
       if (anchorEl) {
         const cmLine = target.closest('.cm-line');
         const highlightTarget = (cmLine && anchorEl.classList.contains('cm-editor')) ? cmLine : anchorEl;
-        const rect = highlightTarget.getBoundingClientRect();
-        let visibleLeft = rect.left;
-        let visibleRight = rect.right;
-        let visibleTop = rect.top;
-        let visibleBottom = rect.bottom;
-
-        if (anchorEl.classList.contains('cm-editor')) {
-          const scroller = anchorEl.querySelector('.cm-scroller') || anchorEl;
-          const scrollerRect = scroller.getBoundingClientRect();
-          visibleLeft = Math.max(visibleLeft, scrollerRect.left);
-          visibleRight = Math.min(visibleRight, scrollerRect.right);
-          visibleTop = Math.max(visibleTop, scrollerRect.top);
-          visibleBottom = Math.min(visibleBottom, scrollerRect.bottom);
-        }
-
-        const visibleWidth = Math.max(0, visibleRight - visibleLeft);
-        const visibleHeight = Math.max(0, visibleBottom - visibleTop);
+        const visibleRect = computeVisibleRect(highlightTarget);
 
-        if (visibleWidth > 0 && visibleHeight > 0) {
+        if (visibleRect) {
           const scrollX = window.scrollX;
           const scrollY = window.scrollY;
           this.#setHoverHighlight({
-            top: scrollY + visibleTop,
-            left: scrollX + visibleLeft,
-            width: visibleWidth,
-            height: visibleHeight,
+            top: scrollY + visibleRect.top,
+            left: scrollX + visibleRect.left,
+            width: visibleRect.width,
+            height: visibleRect.height,
             visible: true,
           });
         } else {

package/front_end/ui/components/text_editor/config.ts

@@ -10,6 +10,7 @@ import * as TextUtils from '../../../core/text_utils/text_utils.js';
 import * as CM from '../../../third_party/codemirror.next/codemirror.next.js';
 import {Icon} from '../../kit/kit.js';
 import * as UI from '../../legacy/legacy.js';
+import * as SettingsUI from '../../settings/settings.js';
 import * as VisualLogging from '../../visual_logging/visual_logging.js';
 import * as CodeHighlighter from '../code_highlighter/code_highlighter.js';
 
@@ -327,7 +328,7 @@ const baseKeymap = CM.keymap.of([
 ]);
 
 function themeIsDark(): boolean {
-  const setting = Common.Settings.Settings.instance().moduleSetting('ui-theme').get();
+  const setting = Common.Settings.Settings.instance().resolve(SettingsUI.MainSettings.uiThemeSettingDescriptor).get();
   return setting === 'systemPreferred' ? window.matchMedia('(prefers-color-scheme: dark)').matches : setting === 'dark';
 }
 

package/front_end/ui/legacy/DockController.ts

@@ -6,6 +6,7 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
+import * as SettingsUI from '../settings/settings.js';
 
 import type {ActionDelegate} from './ActionRegistration.js';
 import {LiveAnnouncer} from './ARIAUtils.js';
@@ -50,7 +51,9 @@ export class DockController extends Common.ObjectWrapper.ObjectWrapper<EventType
         Host.InspectorFrontendHost.InspectorFrontendHostInstance.closeWindow.bind(
             Host.InspectorFrontendHost.InspectorFrontendHostInstance));
 
-    this.currentDockStateSetting = Common.Settings.Settings.instance().moduleSetting('currentDockState');
+    this.currentDockStateSetting =
+        Common.Settings.Settings.instance().resolve(SettingsUI.MainSettings.currentDockStateSettingDescriptor) as
+        Common.Settings.Setting<DockState>;
     this.lastDockStateSetting = Common.Settings.Settings.instance().createSetting('last-dock-state', DockState.BOTTOM);
 
     if (!canDock) {

package/front_end/ui/legacy/InspectorView.ts

@@ -10,6 +10,7 @@ import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import {createIcon, type Icon} from '../kit/kit.js';
+import * as SettingsUI from '../settings/settings.js';
 import * as VisualLogging from '../visual_logging/visual_logging.js';
 
 import type {ActionDelegate as ActionDelegateInterface} from './ActionRegistration.js';
@@ -680,7 +681,8 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     }
 
     // Ctrl/Cmd + 1-9 should show corresponding panel.
-    const panelShortcutEnabled = Common.Settings.Settings.instance().moduleSetting('shortcut-panel-switch').get();
+    const panelShortcutEnabled =
+        Common.Settings.Settings.instance().resolve(SettingsUI.MainSettings.shortcutPanelSwitchSettingDescriptor).get();
     if (panelShortcutEnabled) {
       let panelIndex = -1;
       if (event.keyCode > 0x30 && event.keyCode < 0x3A) {

package/front_end/ui/legacy/KeyboardShortcut.ts

@@ -32,6 +32,7 @@
  */
 
 import * as Host from '../../core/host/host.js';
+import type * as Settings from '../settings/settings.js';
 
 import {DefaultShortcutSetting} from './ShortcutRegistry.js';
 
@@ -77,17 +78,13 @@ export class KeyboardShortcut {
     return !this.keybindSets || this.keybindSets.has(keybindSet);
   }
 
-  equals(shortcut: KeyboardShortcut): boolean {
+  equals(shortcut: KeyboardShortcut|Settings.MainSettings.UserShortcut): boolean {
     return this.descriptorsMatch(shortcut.descriptors) && this.type === shortcut.type &&
         this.action === shortcut.action;
   }
 
-  static createShortcutFromSettingObject(settingObject: {
-    action: string,
-    descriptors: Descriptor[],
-    type: Type,
-  }): KeyboardShortcut {
-    return new KeyboardShortcut(settingObject.descriptors, settingObject.action, settingObject.type);
+  static createShortcutFromSettingObject(settingObject: Settings.MainSettings.UserShortcut): KeyboardShortcut {
+    return new KeyboardShortcut(settingObject.descriptors, settingObject.action, settingObject.type as Type);
   }
 
   /**

package/front_end/ui/legacy/SearchableView.ts

@@ -42,6 +42,7 @@ import * as Platform from '../../core/platform/platform.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as Buttons from '../components/buttons/buttons.js';
 import {createIcon} from '../kit/kit.js';
+import * as Settings from '../settings/settings.js';
 
 import * as ARIAUtils from './ARIAUtils.js';
 import {InspectorView} from './InspectorView.js';
@@ -662,7 +663,7 @@ export class SearchableView extends VBox {
   }
 
   private onInput(): void {
-    if (!Common.Settings.Settings.instance().moduleSetting('search-as-you-type').get()) {
+    if (!Common.Settings.Settings.instance().resolve(Settings.MainSettings.searchAsYouTypeSettingDescriptor).get()) {
       this.clearSearch();
       return;
     }

package/front_end/ui/legacy/ShortcutRegistry.ts

@@ -6,6 +6,7 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
+import * as Settings from '../settings/settings.js';
 
 import {type Action, getRegisteredActionExtensions, KeybindSet} from './ActionRegistration.js';
 import type {ActionRegistry} from './ActionRegistry.js';
@@ -26,7 +27,7 @@ export class ShortcutRegistry {
   private readonly devToolsDefaultShortcutActions: Set<string>;
   private readonly disabledDefaultShortcutsForAction: Platform.MapUtilities.Multimap<string, KeyboardShortcut>;
   private readonly keybindSetSetting: Common.Settings.Setting<string>;
-  private readonly userShortcutsSetting: Common.Settings.Setting<KeyboardShortcut[]>;
+  private readonly userShortcutsSetting: Common.Settings.Setting<Settings.MainSettings.UserShortcut[]>;
 
   constructor(actionRegistry: ActionRegistry) {
     this.actionRegistry = actionRegistry;
@@ -37,12 +38,14 @@ export class ShortcutRegistry {
     this.consumePrefix = null;
     this.devToolsDefaultShortcutActions = new Set();
     this.disabledDefaultShortcutsForAction = new Platform.MapUtilities.Multimap();
-    this.keybindSetSetting = Common.Settings.Settings.instance().moduleSetting('active-keybind-set');
+    this.keybindSetSetting =
+        Common.Settings.Settings.instance().resolve(Settings.MainSettings.activeKeybindSetSettingDescriptor);
     this.keybindSetSetting.addChangeListener(event => {
       Host.userMetrics.keybindSetSettingChanged(event.data);
       this.registerBindings();
     });
-    this.userShortcutsSetting = Common.Settings.Settings.instance().moduleSetting('user-shortcuts');
+    this.userShortcutsSetting =
+        Common.Settings.Settings.instance().resolve(Settings.MainSettings.userShortcutsSettingDescriptor);
     this.userShortcutsSetting.addChangeListener(this.registerBindings, this);
 
     this.registerBindings();