chrome-devtools-frontend 1.0.1656897 → 1.0.1657110

package/front_end/panels/console/ConsoleInsightTeaser.ts

@@ -437,7 +437,8 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
 
   #getConsoleInsightsEnabledSetting(): Common.Settings.Setting<boolean>|undefined {
     try {
-      return Common.Settings.moduleSetting('console-insights-enabled') as Common.Settings.Setting<boolean>;
+      return Common.Settings.Settings.instance().moduleSetting('console-insights-enabled') as
+          Common.Settings.Setting<boolean>;
     } catch {
       return;
     }

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -45,6 +45,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as AIAssistance from '../../models/ai_assistance/ai_assistance.js';
 import * as Badges from '../../models/badges/badges.js';
+import * as Bindings from '../../models/bindings/bindings.js';
 import type * as Elements from '../../models/elements/elements.js';
 import type * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
@@ -302,6 +303,11 @@ const UIStrings = {
    * @description Label of an adorner next to the html node in the Elements panel.
    */
   viewSourceCode: 'View source code',
+  /**
+   * @description Label of an adorner in the Elements panel. When clicked, it reveals
+   * the definition of the custom element in the Sources panel.
+   */
+  showCustomElementDefinition: 'Show custom element definition',
   /**
    * @description Context menu item in Elements panel to assess visibility of an element via AI.
    */
@@ -444,6 +450,8 @@ export interface ViewInput {
   onViewSourceAdornerClick: () => void;
   onSlotAdornerClick: (e: Event) => void;
   showSlotAdorner: boolean;
+  showCustomElementAdorner: boolean;
+  onCustomElementAdornerClick: (e: Event) => void;
   slotName?: string;
   showStartingStyleAdorner: boolean;
   startingStyleAdornerActive: boolean;
@@ -961,7 +969,8 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
   const hasAdorners = !!input.adProvenance || input.showContainerAdorner || input.showFlexAdorner ||
       input.showGridAdorner || input.showGridLanesAdorner || input.showMediaAdorner || input.showPopoverAdorner ||
       input.showTopLayerAdorner || input.showViewSourceAdorner || input.showScrollAdorner ||
-      input.showScrollSnapAdorner || input.showSlotAdorner || input.showStartingStyleAdorner;
+      input.showScrollSnapAdorner || input.showSlotAdorner || input.showStartingStyleAdorner ||
+      input.showCustomElementAdorner;
   const gutterContainerClasses = {
     'has-decorations': input.decorations.length || input.descendantDecorations.length,
     'gutter-container': true,
@@ -1004,6 +1013,18 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
           ${adornerRef()}>
           <span>${ElementsComponents.AdornerManager.RegisteredAdorners.VIEW_SOURCE}</span>
         </devtools-adorner>` : nothing}
+        ${input.showCustomElementAdorner ? html`<devtools-adorner
+          class="custom-element clickable"
+          role=button
+          tabindex=0
+          .name=${ElementsComponents.AdornerManager.RegisteredAdorners.CUSTOM_ELEMENT}
+          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.CUSTOM_ELEMENT).track({ click: true })}
+          aria-label=${i18nString(UIStrings.showCustomElementDefinition)}
+          @click=${input.onCustomElementAdornerClick}
+          @keydown=${handleAdornerKeydown(input.onCustomElementAdornerClick)}
+          ${adornerRef()}>
+          <span>${ElementsComponents.AdornerManager.RegisteredAdorners.CUSTOM_ELEMENT}</span>
+        </devtools-adorner>` : nothing}
         ${input.showContainerAdorner ? html`<devtools-adorner
           class=clickable
           role=button
@@ -1333,50 +1354,53 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       return;
     }
     const output: ViewOutput = {};
-    DEFAULT_VIEW(
-        {
-          node: !clearNode ? this.nodeInternal : null,
-          isClosingTag: this.isClosingTag(),
-          expanded: this.expanded,
-          isExpandable: this.isExpandable(),
-          isXMLMimeType: Boolean(this.treeOutline?.isXMLMimeType),
-          updateRecord: this.#updateRecord,
-          onHighlightSearchResults: () => this.#highlightSearchResults(),
-          onExpand: () => this.expand(),
-
-          containerAdornerActive: this.#containerAdornerActive,
-          adProvenance: this.nodeInternal.adProvenance(),
-          adTooltipId: this.#adTooltipId,
-          target: this.nodeInternal.domModel().target(),
-          showContainerAdorner: Boolean(this.#layout?.containerType) && !this.isClosingTag(),
-          containerType: this.#layout?.containerType,
-          showFlexAdorner: Boolean(this.#layout?.isFlex) && !this.isClosingTag(),
-          flexAdornerActive: this.#flexAdornerActive,
-          showGridAdorner: Boolean(this.#layout?.isGrid) && !this.isClosingTag(),
-          showGridLanesAdorner: Boolean(this.#layout?.isGridLanes) && !this.isClosingTag(),
-          showMediaAdorner: this.node().isMediaNode() && !this.isClosingTag(),
-          showPopoverAdorner: Boolean(Root.Runtime.hostConfig.devToolsAllowPopoverForcing?.enabled) &&
-              Boolean(this.node().attributes().find(attr => attr.name === 'popover')) && !this.isClosingTag(),
-          showTopLayerAdorner: this.node().topLayerIndex() !== -1 && !this.isClosingTag(),
-          gridAdornerActive: this.#gridAdornerActive,
-          popoverAdornerActive: this.#popoverAdornerActive,
-          isSubgrid: Boolean(this.#layout?.isSubgrid),
-          showViewSourceAdorner: this.nodeInternal.isRootNode() && isOpeningTag(this.tagTypeContext),
-          showScrollAdorner: ((this.node().nodeName() === 'HTML' && this.node().ownerDocument?.isScrollable()) ||
-                              (this.node().nodeName() !== '#document' && this.node().isScrollable())) &&
-              !this.isClosingTag(),
-          decorations: this.#decorations,
-          descendantDecorations: this.expanded ? [] : this.#descendantDecorations,
-          decorationsTooltip: this.#decorationsTooltip,
-          indent: this.computeLeftIndent(),
-          showScrollSnapAdorner: Boolean(this.#layout?.hasScroll) && !this.isClosingTag(),
-          scrollSnapAdornerActive: this.#scrollSnapAdornerActive,
-          showSlotAdorner: Boolean(this.nodeInternal.assignedSlot) && !this.isClosingTag(),
-          showStartingStyleAdorner: this.nodeInternal.affectedByStartingStyles() && !this.isClosingTag(),
-          startingStyleAdornerActive: this.#startingStyleAdornerActive,
-          onStartingStyleAdornerClick:
-              this.treeOutline?.disableEdits ? () => {} : (event: Event) => this.#onStartingStyleAdornerClick(event),
-          onSlotAdornerClick: () => {
+    DEFAULT_VIEW({
+      node: !clearNode ? this.nodeInternal : null,
+      isClosingTag: this.isClosingTag(),
+      expanded: this.expanded,
+      isExpandable: this.isExpandable(),
+      isXMLMimeType: Boolean(this.treeOutline?.isXMLMimeType),
+      updateRecord: this.#updateRecord,
+      onHighlightSearchResults: () => this.#highlightSearchResults(),
+      onExpand: () => this.expand(),
+
+      containerAdornerActive: this.#containerAdornerActive,
+      adProvenance: this.nodeInternal.adProvenance(),
+      adTooltipId: this.#adTooltipId,
+      target: this.nodeInternal.domModel().target(),
+      showContainerAdorner: Boolean(this.#layout?.containerType) && !this.isClosingTag(),
+      containerType: this.#layout?.containerType,
+      showFlexAdorner: Boolean(this.#layout?.isFlex) && !this.isClosingTag(),
+      flexAdornerActive: this.#flexAdornerActive,
+      showGridAdorner: Boolean(this.#layout?.isGrid) && !this.isClosingTag(),
+      showGridLanesAdorner: Boolean(this.#layout?.isGridLanes) && !this.isClosingTag(),
+      showMediaAdorner: this.node().isMediaNode() && !this.isClosingTag(),
+      showPopoverAdorner: Boolean(Root.Runtime.hostConfig.devToolsAllowPopoverForcing?.enabled) &&
+          Boolean(this.node().attributes().find(attr => attr.name === 'popover')) && !this.isClosingTag(),
+      showTopLayerAdorner: this.node().topLayerIndex() !== -1 && !this.isClosingTag(),
+      gridAdornerActive: this.#gridAdornerActive,
+      popoverAdornerActive: this.#popoverAdornerActive,
+      isSubgrid: Boolean(this.#layout?.isSubgrid),
+      showViewSourceAdorner: this.nodeInternal.isRootNode() && isOpeningTag(this.tagTypeContext),
+      showScrollAdorner: ((this.node().nodeName() === 'HTML' && this.node().ownerDocument?.isScrollable()) ||
+                          (this.node().nodeName() !== '#document' && this.node().isScrollable())) &&
+          !this.isClosingTag(),
+      decorations: this.#decorations,
+      descendantDecorations: this.expanded ? [] : this.#descendantDecorations,
+      decorationsTooltip: this.#decorationsTooltip,
+      indent: this.computeLeftIndent(),
+      showScrollSnapAdorner: Boolean(this.#layout?.hasScroll) && !this.isClosingTag(),
+      scrollSnapAdornerActive: this.#scrollSnapAdornerActive,
+      showSlotAdorner: Boolean(this.nodeInternal.assignedSlot) && !this.isClosingTag(),
+      showCustomElementAdorner: this.node().isCustomElement() && !this.isClosingTag(),
+      onCustomElementAdornerClick:
+          this.treeOutline?.disableEdits ? () => {} : (event: Event) => void this.#onCustomElementAdornerClick(event),
+      showStartingStyleAdorner: this.nodeInternal.affectedByStartingStyles() && !this.isClosingTag(),
+      startingStyleAdornerActive: this.#startingStyleAdornerActive,
+      onStartingStyleAdornerClick:
+          this.treeOutline?.disableEdits ? () => {} : (event: Event) => this.#onStartingStyleAdornerClick(event),
+      onSlotAdornerClick:
+          () => {
             if (this.nodeInternal.assignedSlot) {
               const deferredNode = this.nodeInternal.assignedSlot.deferredNode;
               deferredNode.resolve(node => {
@@ -1384,47 +1408,45 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
               });
             }
           },
-          topLayerIndex: this.node().topLayerIndex(),
-          onViewSourceAdornerClick: this.treeOutline?.disableEdits ? () => {} : this.revealHTMLInSources.bind(this),
-          onGutterClick: this.showContextMenu.bind(this),
-          onContainerAdornerClick:
-              this.treeOutline?.disableEdits ? () => {} : (event: Event) => this.#onContainerAdornerClick(event),
-          onFlexAdornerClick: this.treeOutline?.disableEdits ? () => {} :
-                                                               (event: Event) => this.#onFlexAdornerClick(event),
-          onGridAdornerClick: this.treeOutline?.disableEdits ? () => {} :
-                                                               (event: Event) => this.#onGridAdornerClick(event),
-          onMediaAdornerClick: this.treeOutline?.disableEdits ? () => {} :
-                                                                (event: Event) => this.#onMediaAdornerClick(event),
-          onPopoverAdornerClick: this.treeOutline?.disableEdits ? () => {} :
-                                                                  (event: Event) => this.#onPopoverAdornerClick(event),
-          onScrollSnapAdornerClick:
-              this.treeOutline?.disableEdits ? () => {} : (event: Event) => this.#onScrollSnapAdornerClick(event),
-          onTopLayerAdornerClick: this.treeOutline?.disableEdits ? () => {} :
-                                                                   () => {
-                                                                     if (!this.treeOutline) {
-                                                                       return;
-                                                                     }
-                                                                     this.treeOutline.revealInTopLayer(this.node());
-                                                                   },
-          isHovered: this.#hovered,
-          isSelected: this.selected,
-          showAiButton: Boolean(this.#hovered || this.selected) && this.node().nodeType() === Node.ELEMENT_NODE &&
-              this.isAiButtonEnabled() && (this.treeOutline as ElementsTreeOutline)?.showAIButton,
-          aiButtonTitle: this.isAiButtonEnabled() ?
-              UI.ActionRegistry.ActionRegistry.instance().getAction('freestyler.elements-floating-button').title() :
-              undefined,
-          onAiButtonClick: (ev: Event) => {
-            ev.stopPropagation();
-            this.select(true, false);
-            const action = UI.ActionRegistry.ActionRegistry.instance().getAction('freestyler.elements-floating-button');
-            if (action) {
-              void action.execute();
-            }
-          },
-          editorState: this.#editorState,
-          editorWidth: this.#editorWidth,
-        },
-        output, this.listItemElement);
+      topLayerIndex: this.node().topLayerIndex(),
+      onViewSourceAdornerClick: this.treeOutline?.disableEdits ? () => {} : this.revealHTMLInSources.bind(this),
+      onGutterClick: this.showContextMenu.bind(this),
+      onContainerAdornerClick: this.treeOutline?.disableEdits ? () => {} :
+                                                                (event: Event) => this.#onContainerAdornerClick(event),
+      onFlexAdornerClick: this.treeOutline?.disableEdits ? () => {} : (event: Event) => this.#onFlexAdornerClick(event),
+      onGridAdornerClick: this.treeOutline?.disableEdits ? () => {} : (event: Event) => this.#onGridAdornerClick(event),
+      onMediaAdornerClick: this.treeOutline?.disableEdits ? () => {} :
+                                                            (event: Event) => this.#onMediaAdornerClick(event),
+      onPopoverAdornerClick: this.treeOutline?.disableEdits ? () => {} :
+                                                              (event: Event) => this.#onPopoverAdornerClick(event),
+      onScrollSnapAdornerClick:
+          this.treeOutline?.disableEdits ? () => {} : (event: Event) => this.#onScrollSnapAdornerClick(event),
+      onTopLayerAdornerClick: this.treeOutline?.disableEdits ? () => {} :
+                                                               () => {
+                                                                 if (!this.treeOutline) {
+                                                                   return;
+                                                                 }
+                                                                 this.treeOutline.revealInTopLayer(this.node());
+                                                               },
+      isHovered: this.#hovered,
+      isSelected: this.selected,
+      showAiButton: Boolean(this.#hovered || this.selected) && this.node().nodeType() === Node.ELEMENT_NODE &&
+          this.isAiButtonEnabled() && (this.treeOutline as ElementsTreeOutline)?.showAIButton,
+      aiButtonTitle: this.isAiButtonEnabled() ?
+          UI.ActionRegistry.ActionRegistry.instance().getAction('freestyler.elements-floating-button').title() :
+          undefined,
+      onAiButtonClick: (ev: Event) => {
+        ev.stopPropagation();
+        this.select(true, false);
+        const action = UI.ActionRegistry.ActionRegistry.instance().getAction('freestyler.elements-floating-button');
+        if (action) {
+          void action.execute();
+        }
+      },
+      editorState: this.#editorState,
+      editorWidth: this.#editorWidth,
+    },
+                 output, this.listItemElement);
 
     this.#contentElement = output.contentElement;
     this.#editorRef = output.editorRef;
@@ -1527,6 +1549,10 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     return !isOpeningTag(this.tagTypeContext);
   }
 
+  isDisplayContents(): boolean {
+    return Boolean(this.#layout?.isContents);
+  }
+
   node(): SDK.DOMModel.DOMNode {
     return this.nodeInternal;
   }
@@ -1732,63 +1758,64 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     // ElementsPanel.
     // We do not change the ElementsTreeElement state in case the
     // element is bound again.
-    DEFAULT_VIEW(
-        {
-          node: null,
-          isClosingTag: false,
-          expanded: false,
-          isExpandable: false,
-          isXMLMimeType: false,
-          updateRecord: null,
-          onHighlightSearchResults: () => {},
-          onExpand: () => {},
-          containerAdornerActive: false,
-          adProvenance: undefined,
-          target: undefined,
-          adTooltipId: '',
-          showContainerAdorner: false,
-          containerType: this.#layout?.containerType,
-          showFlexAdorner: false,
-          flexAdornerActive: false,
-          showGridAdorner: false,
-          showGridLanesAdorner: false,
-          showMediaAdorner: false,
-          showPopoverAdorner: false,
-          showTopLayerAdorner: false,
-          gridAdornerActive: false,
-          popoverAdornerActive: false,
-          isSubgrid: false,
-          showViewSourceAdorner: false,
-          showScrollAdorner: false,
-          showScrollSnapAdorner: false,
-          scrollSnapAdornerActive: false,
-          showSlotAdorner: false,
-          showStartingStyleAdorner: false,
-          startingStyleAdornerActive: false,
-          onStartingStyleAdornerClick: () => {},
-          onSlotAdornerClick: () => {},
-          topLayerIndex: -1,
-          onViewSourceAdornerClick: () => {},
-          onGutterClick: () => {},
-          onContainerAdornerClick: () => {},
-          onFlexAdornerClick: () => {},
-          onGridAdornerClick: () => {},
-          onMediaAdornerClick: () => {},
-          onPopoverAdornerClick: () => {},
-          onScrollSnapAdornerClick: () => {},
-          onTopLayerAdornerClick: () => {},
-          isHovered: false,
-          isSelected: false,
-          showAiButton: false,
-          onAiButtonClick: () => {},
-          decorations: [],
-          descendantDecorations: [],
-          decorationsTooltip: '',
-          indent: 0,
-          editorState: null,
-          editorWidth: null,
-        },
-        {}, this.listItemElement);
+    DEFAULT_VIEW({
+      node: null,
+      isClosingTag: false,
+      expanded: false,
+      isExpandable: false,
+      isXMLMimeType: false,
+      updateRecord: null,
+      onHighlightSearchResults: () => {},
+      onExpand: () => {},
+      containerAdornerActive: false,
+      adProvenance: undefined,
+      target: undefined,
+      adTooltipId: '',
+      showContainerAdorner: false,
+      containerType: this.#layout?.containerType,
+      showFlexAdorner: false,
+      flexAdornerActive: false,
+      showGridAdorner: false,
+      showGridLanesAdorner: false,
+      showMediaAdorner: false,
+      showPopoverAdorner: false,
+      showTopLayerAdorner: false,
+      gridAdornerActive: false,
+      popoverAdornerActive: false,
+      isSubgrid: false,
+      showViewSourceAdorner: false,
+      showScrollAdorner: false,
+      showScrollSnapAdorner: false,
+      scrollSnapAdornerActive: false,
+      showSlotAdorner: false,
+      showCustomElementAdorner: false,
+      showStartingStyleAdorner: false,
+      startingStyleAdornerActive: false,
+      onStartingStyleAdornerClick: () => {},
+      onSlotAdornerClick: () => {},
+      onCustomElementAdornerClick: () => {},
+      topLayerIndex: -1,
+      onViewSourceAdornerClick: () => {},
+      onGutterClick: () => {},
+      onContainerAdornerClick: () => {},
+      onFlexAdornerClick: () => {},
+      onGridAdornerClick: () => {},
+      onMediaAdornerClick: () => {},
+      onPopoverAdornerClick: () => {},
+      onScrollSnapAdornerClick: () => {},
+      onTopLayerAdornerClick: () => {},
+      isHovered: false,
+      isSelected: false,
+      showAiButton: false,
+      onAiButtonClick: () => {},
+      decorations: [],
+      descendantDecorations: [],
+      decorationsTooltip: '',
+      indent: 0,
+      editorState: null,
+      editorWidth: null,
+    },
+                 {}, this.listItemElement);
   }
 
   override onunbind(): void {
@@ -3211,6 +3238,44 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     this.#startingStyleAdornerActive = !this.#startingStyleAdornerActive;
     this.performUpdate();
   }
+
+  async #onCustomElementAdornerClick(event: Event): Promise<void> {
+    event.stopPropagation();
+    const node = this.node();
+    const object = await node.resolveToObject('');
+    if (!object) {
+      return;
+    }
+    let constructorObject: SDK.RemoteObject.RemoteObject|null = null;
+    try {
+      const result = await object.callFunction(function(this: Element): unknown {
+        const selector = this.getAttribute('is') || this.tagName.toLowerCase();
+        return (typeof customElements !== 'undefined' && customElements.get(selector)) || this.constructor;
+      });
+      constructorObject = result.object;
+    } finally {
+      object.release();
+    }
+    if (!constructorObject) {
+      return;
+    }
+    try {
+      if (constructorObject.type === 'function') {
+        const functionDetails =
+            await SDK.RemoteObject.RemoteFunction.objectAsFunction(constructorObject).targetFunctionDetails();
+        if (functionDetails?.location) {
+          const uiLocation =
+              await Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().rawLocationToUILocation(
+                  functionDetails.location);
+          if (uiLocation) {
+            void Common.Revealer.reveal(uiLocation);
+          }
+        }
+      }
+    } finally {
+      constructorObject.release();
+    }
+  }
 }
 
 export const InitialChildrenLimit = 500;

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -1387,8 +1387,9 @@ export class ElementsTreeOutline extends
 
   private highlightTreeElement(element: UI.TreeOutline.TreeElement, showInfo: boolean): void {
     if (element instanceof ElementsTreeElement) {
-      element.node().domModel().overlayModel().highlightInOverlay(
-          {node: element.node(), selectorList: undefined}, 'all', showInfo);
+      const selectorList = element.isDisplayContents() ? '*' : undefined;
+      element.node().domModel().overlayModel().highlightInOverlay({node: element.node(), selectorList}, 'all',
+                                                                  showInfo);
       return;
     }
 

package/front_end/panels/elements/components/AdornerManager.ts

@@ -12,6 +12,7 @@ type AdornerSettingsMap = Map<string, boolean>;
 export enum RegisteredAdorners {
   AD = 'ad',
   CONTAINER = 'container',
+  CUSTOM_ELEMENT = 'custom-element',
   FLEX = 'flex',
   GRID = 'grid',
   GRID_LANES = 'grid-lanes',

package/front_end/panels/emulation/DeviceModeToolbar.ts

@@ -506,22 +506,24 @@ export class DeviceModeToolbar extends UI.Widget.Widget {
 
     const device = this.model.device();
 
-    if (this.model.type() === EmulationModel.DeviceModeModel.Type.Device && device) {
-      this.lastMode.set(device, (this.model.mode() as EmulationModel.EmulatedDevices.Mode));
-    }
+    if (this.model.type() !== EmulationModel.DeviceModeModel.Type.None) {
+      if (this.model.type() === EmulationModel.DeviceModeModel.Type.Device && device) {
+        this.lastMode.set(device, (this.model.mode() as EmulationModel.EmulatedDevices.Mode));
+      }
 
-    const value = this.persistenceSetting.get();
-    const currentMode = this.model.mode();
-    if (device) {
-      value.device = device.title;
-      value.orientation = currentMode ? currentMode.orientation : '';
-      value.mode = currentMode ? currentMode.title : '';
-    } else {
-      value.device = '';
-      value.orientation = '';
-      value.mode = '';
+      const value = this.persistenceSetting.get();
+      const currentMode = this.model.mode();
+      if (device) {
+        value.device = device.title;
+        value.orientation = currentMode ? currentMode.orientation : '';
+        value.mode = currentMode ? currentMode.title : '';
+      } else {
+        value.device = '';
+        value.orientation = '';
+        value.mode = '';
+      }
+      this.persistenceSetting.set(value);
     }
-    this.persistenceSetting.set(value);
 
     let modeButtonTitle = i18nString(UIStrings.rotate);
     let modeButtonDisabled = false;
@@ -760,10 +762,8 @@ export class DeviceModeToolbar extends UI.Widget.Widget {
 
   private appendOptionsMenuItems(contextMenu: UI.ContextMenu.ContextMenu): void {
     const model = this.model;
-    appendToggleItem(
-        contextMenu.headerSection(), this.deviceOutlineSetting, i18nString(UIStrings.hideDeviceFrame),
-        i18nString(UIStrings.showDeviceFrame), model.type() !== EmulationModel.DeviceModeModel.Type.Device,
-        'device-frame');
+    appendToggleItem(contextMenu.headerSection(), this.deviceOutlineSetting, i18nString(UIStrings.hideDeviceFrame),
+                     i18nString(UIStrings.showDeviceFrame), !model.canShowDeviceFrame(), 'device-frame');
     appendToggleItem(
         contextMenu.headerSection(), this.showMediaInspectorSetting, i18nString(UIStrings.hideMediaQueries),
         i18nString(UIStrings.showMediaQueries), undefined, 'media-queries');
@@ -792,7 +792,7 @@ export class DeviceModeToolbar extends UI.Widget.Widget {
         disabled = model.type() === EmulationModel.DeviceModeModel.Type.None;
       }
 
-      const isEnabled = setting.get();
+      const isEnabled = Boolean(setting.get() && !disabled);
       const jslogContext = `${context}-${isEnabled ? 'disable' : 'enable'}`;
       section.appendItem(
           isEnabled ? title1 : title2, setting.set.bind(setting, !setting.get()), {disabled, jslogContext});

package/front_end/panels/explain/components/ConsoleInsight.ts

@@ -861,7 +861,8 @@ export class ConsoleInsight extends UI.Widget.Widget {
   // on -> entrypoints are shown, and console insights can be generated
   #getConsoleInsightsEnabledSetting(): Common.Settings.Setting<boolean>|undefined {
     try {
-      return Common.Settings.moduleSetting('console-insights-enabled') as Common.Settings.Setting<boolean>;
+      return Common.Settings.Settings.instance().moduleSetting('console-insights-enabled') as
+          Common.Settings.Setting<boolean>;
     } catch {
       return;
     }

package/front_end/panels/mobile_throttling/NetworkThrottlingSelector.ts

@@ -167,6 +167,7 @@ export interface EventTypes {
 
 export class NetworkThrottlingSelect extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.Widget>(
     UI.Widget.Widget) {
+  readonly #settings: Common.Settings.Settings;
   #recommendedConditions: SDK.NetworkManager.Conditions|null = null;
   #jslogContext?: string;
   #currentConditions: SDK.NetworkManager.ThrottlingConditions|undefined;
@@ -185,16 +186,16 @@ export class NetworkThrottlingSelect extends Common.ObjectWrapper.eventMixin<Eve
     return select;
   }
 
-  constructor(
-      element?: HTMLElement, options: {
-        title?: string,
-        jslogContext?: string,
-        currentConditions?: SDK.NetworkManager.Conditions,
-        includeBlocking?: true,
-      } = {},
-      view = DEFAULT_VIEW) {
+  constructor(element?: HTMLElement, options: {
+    title?: string,
+    jslogContext?: string,
+    currentConditions?: SDK.NetworkManager.Conditions,
+    includeBlocking?: true,
+  } = {},
+              settings = Common.Settings.Settings.instance(), view = DEFAULT_VIEW) {
     super(element);
-    SDK.NetworkManager.customUserNetworkConditionsSetting().addChangeListener(this.requestUpdate, this);
+    this.#settings = settings;
+    SDK.NetworkManager.customUserNetworkConditionsSetting(settings).addChangeListener(this.requestUpdate, this);
     this.#jslogContext = options.jslogContext;
     this.#currentConditions = options.currentConditions;
     this.#title = options.title;
@@ -258,7 +259,7 @@ export class NetworkThrottlingSelect extends Common.ObjectWrapper.eventMixin<Eve
     const multitargetNetworkManager = SDK.NetworkManager.MultitargetNetworkManager.instance();
 
     if (bind) {
-      this.#jslogContext = SDK.NetworkManager.activeNetworkThrottlingKeySetting().name;
+      this.#jslogContext = SDK.NetworkManager.activeNetworkThrottlingKeySetting(this.#settings).name;
       ThrottlingManager.instance();  // Instantiate the throttling manager to connect network manager with the setting
       this.#currentConditions = multitargetNetworkManager.networkConditions();
 
@@ -298,10 +299,10 @@ export class NetworkThrottlingSelect extends Common.ObjectWrapper.eventMixin<Eve
   }
 
   override performUpdate(): void {
-    const customNetworkConditionsSetting = SDK.NetworkManager.customUserNetworkConditionsSetting();
+    const customNetworkConditionsSetting = SDK.NetworkManager.customUserNetworkConditionsSetting(this.#settings);
     const customNetworkConditions = customNetworkConditionsSetting.get();
     const onAddCustomConditions = (): void => {
-      void Common.Revealer.reveal(SDK.NetworkManager.customUserNetworkConditionsSetting());
+      void Common.Revealer.reveal(customNetworkConditionsSetting);
     };
 
     const onSelect = (conditions: SDK.NetworkManager.ThrottlingConditions): void => {

package/front_end/panels/mobile_throttling/ThrottlingManager.ts

@@ -126,7 +126,7 @@ export class ThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<Thrott
     return this.#hardwareConcurrencyOverrideEnabled;
   }
 
-  private constructor() {
+  private constructor(settings: Common.Settings.Settings) {
     super();
     this.cpuThrottlingManager = SDK.CPUThrottlingManager.CPUThrottlingManager.instance();
     this.cpuThrottlingManager.addEventListener(
@@ -134,12 +134,12 @@ export class ThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<Thrott
         (event: Common.EventTarget.EventTargetEvent<number>) => this.onCPUThrottlingRateChangedOnSDK(event.data));
     this.cpuThrottlingControls = new Set();
     this.cpuThrottlingOptions = ThrottlingPresets.cpuThrottlingPresets;
-    this.customNetworkConditionsSetting = SDK.NetworkManager.customUserNetworkConditionsSetting();
+    this.customNetworkConditionsSetting = SDK.NetworkManager.customUserNetworkConditionsSetting(settings);
 
-    this.currentNetworkThrottlingConditionKeySetting = SDK.NetworkManager.activeNetworkThrottlingKeySetting();
+    this.currentNetworkThrottlingConditionKeySetting = SDK.NetworkManager.activeNetworkThrottlingKeySetting(settings);
 
     this.calibratedCpuThrottlingSetting =
-        Common.Settings.Settings.instance().createSetting<PanelsCommon.CPUThrottlingOption.CalibratedCPUThrottling>(
+        settings.createSetting<PanelsCommon.CPUThrottlingOption.CalibratedCPUThrottling>(
             'calibrated-cpu-throttling', {}, Common.Settings.SettingStorageType.GLOBAL);
     this.calibratedCpuThrottlingSetting.addChangeListener(this.onCalibratedSettingChanged, this);
 
@@ -168,10 +168,11 @@ export class ThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<Thrott
     return custom ?? SDK.NetworkManager.NoThrottlingConditions;
   }
 
-  static instance(opts: {forceNew: boolean|null} = {forceNew: null}): ThrottlingManager {
-    const {forceNew} = opts;
+  static instance(opts: {forceNew: boolean|null, settings?: Common.Settings.Settings} = {forceNew: null}):
+      ThrottlingManager {
+    const {forceNew, settings} = opts;
     if (!throttlingManagerInstance || forceNew) {
-      throttlingManagerInstance = new ThrottlingManager();
+      throttlingManagerInstance = new ThrottlingManager(settings ?? Common.Settings.Settings.instance());
     }
 
     return throttlingManagerInstance;