chrome-devtools-frontend 1.0.1672388 → 1.0.1674545

package/front_end/panels/application/BackgroundServiceView.ts

@@ -156,7 +156,8 @@ export class BackgroundServiceView extends UI.Widget.VBox {
   private readonly splitWidget: UI.SplitWidget.SplitWidget;
   private readonly dataGrid: DataGrid.DataGrid.DataGridImpl<EventData>;
   private readonly previewPanel: UI.Widget.VBox;
-  private selectedEventNode: EventDataNode|null;
+  #isRecording = false;
+  #selectedEventNode: EventDataNode|null = null;
   private preview: UI.Widget.Widget|null;
 
   static getUIString(serviceName: string): string {
@@ -214,7 +215,7 @@ export class BackgroundServiceView extends UI.Widget.VBox {
 
     this.toolbar = this.contentElement.createChild('devtools-toolbar', 'background-service-toolbar');
     this.toolbar.setAttribute('jslog', `${VisualLogging.toolbar()}`);
-    void this.setupToolbar();
+    this.setupToolbar();
 
     /**
      * This will contain the DataGrid for displaying events, and a panel at the bottom for showing
@@ -228,15 +229,13 @@ export class BackgroundServiceView extends UI.Widget.VBox {
     this.previewPanel = new UI.Widget.VBox();
     this.previewPanel.element.setAttribute('jslog', `${VisualLogging.pane('preview').track({resize: true})}`);
 
-    this.selectedEventNode = null;
-
     this.preview = null;
 
     this.splitWidget.setMainWidget(this.dataGrid.asWidget());
     this.splitWidget.setSidebarWidget(this.previewPanel);
     this.splitWidget.hideMain();
 
-    this.showPreview(null);
+    this.performUpdate();
   }
 
   getDataGrid(): DataGrid.DataGrid.DataGridImpl<EventData> {
@@ -246,7 +245,7 @@ export class BackgroundServiceView extends UI.Widget.VBox {
   /**
    * Creates the toolbar UI element.
    */
-  private async setupToolbar(): Promise<void> {
+  private setupToolbar(): void {
     this.toolbar.wrappable = true;
     this.recordButton = (UI.Toolbar.Toolbar.createActionButton(this.recordAction) as UI.Toolbar.ToolbarToggle);
     this.recordButton.toggleOnClick(false);
@@ -264,7 +263,6 @@ export class BackgroundServiceView extends UI.Widget.VBox {
     this.saveButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, _event => {
       void this.saveToFile();
     });
-    this.saveButton.setEnabled(false);
     this.toolbar.appendToolbarItem(this.saveButton);
 
     this.toolbar.appendSeparator();
@@ -295,18 +293,17 @@ export class BackgroundServiceView extends UI.Widget.VBox {
    * Clears the grid and panel.
    */
   private clearView(): void {
-    this.selectedEventNode = null;
+    this.#selectedEventNode = null;
     this.dataGrid.rootNode().removeChildren();
     this.splitWidget.hideMain();
-    this.saveButton.setEnabled(false);
-    this.showPreview(null);
+    this.performUpdate();
   }
 
   /**
    * Called when the `Toggle Record` button is clicked.
    */
   toggleRecording(): void {
-    const isRecording = !this.recordButton.isToggled();
+    const isRecording = !this.#isRecording;
     this.model.setRecording(isRecording, this.serviceName);
     const featureName = BackgroundServiceView.getUIString(this.serviceName).toLowerCase();
 
@@ -331,19 +328,12 @@ export class BackgroundServiceView extends UI.Widget.VBox {
       return;
     }
 
-    if (state.isRecording === this.recordButton.isToggled()) {
+    if (state.isRecording === this.#isRecording) {
       return;
     }
 
-    this.recordButton.setToggled(state.isRecording);
-    this.updateRecordButtonTooltip();
-    this.showPreview(this.selectedEventNode);
-  }
-
-  private updateRecordButtonTooltip(): void {
-    const buttonTooltip = this.recordButton.isToggled() ? i18nString(UIStrings.stopRecordingEvents) :
-                                                          i18nString(UIStrings.startRecordingEvents);
-    this.recordButton.setTitle(buttonTooltip, 'background-service.toggle-recording');
+    this.#isRecording = state.isRecording;
+    this.performUpdate();
   }
 
   private onEventReceived({
@@ -380,8 +370,7 @@ export class BackgroundServiceView extends UI.Widget.VBox {
     }
 
     if (this.dataGrid.rootNode().children.length === 1) {
-      this.saveButton.setEnabled(true);
-      this.showPreview(this.selectedEventNode);
+      this.performUpdate();
     }
   }
 
@@ -401,12 +390,31 @@ export class BackgroundServiceView extends UI.Widget.VBox {
     });
     dataGrid.setStriped(true);
 
-    dataGrid.addEventListener(
-        DataGrid.DataGrid.Events.SELECTED_NODE, event => this.showPreview((event.data as EventDataNode)));
+    dataGrid.addEventListener(DataGrid.DataGrid.Events.SELECTED_NODE, event => {
+      this.#selectedEventNode = event.data as EventDataNode;
+      this.performUpdate();
+    });
 
     return dataGrid;
   }
 
+  override performUpdate(): void {
+    this.#updateToolbar();
+    this.#updatePreview();
+  }
+
+  #updateToolbar(): void {
+    if (this.recordButton) {
+      this.recordButton.setToggled(this.#isRecording);
+      const buttonTooltip =
+          this.#isRecording ? i18nString(UIStrings.stopRecordingEvents) : i18nString(UIStrings.startRecordingEvents);
+      this.recordButton.setTitle(buttonTooltip, 'background-service.toggle-recording');
+    }
+    if (this.saveButton) {
+      this.saveButton.setEnabled(this.dataGrid.rootNode().children.length > 0);
+    }
+  }
+
   /**
    * Creates the data object to pass to the DataGrid Node.
    */
@@ -475,19 +483,13 @@ export class BackgroundServiceView extends UI.Widget.VBox {
     return url as Platform.DevToolsPath.UrlString;
   }
 
-  private showPreview(dataNode: EventDataNode|null): void {
-    if (this.selectedEventNode && this.selectedEventNode === dataNode) {
-      return;
-    }
-
-    this.selectedEventNode = dataNode;
-
+  #updatePreview(): void {
     if (this.preview) {
       this.preview.detach();
     }
 
-    if (this.selectedEventNode) {
-      this.preview = this.selectedEventNode.createPreview();
+    if (this.#selectedEventNode) {
+      this.preview = this.#selectedEventNode.createPreview();
       this.preview.show(this.previewPanel.contentElement);
       return;
     }
@@ -496,7 +498,7 @@ export class BackgroundServiceView extends UI.Widget.VBox {
     if (this.dataGrid.rootNode().children.length) {
       emptyWidget = new UI.EmptyWidget.EmptyWidget(
           i18nString(UIStrings.noEventSelected), i18nString(UIStrings.selectAnEventToViewMetadata));
-    } else if (this.recordButton.isToggled()) {
+    } else if (this.#isRecording) {
       // Inform users that we are recording/waiting for events.
       const featureName = BackgroundServiceView.getUIString(this.serviceName).toLowerCase();
       emptyWidget = new UI.EmptyWidget.EmptyWidget(
@@ -505,11 +507,11 @@ export class BackgroundServiceView extends UI.Widget.VBox {
     } else {
       const recordShortcuts =
           UI.ShortcutRegistry.ShortcutRegistry.instance().shortcutsForAction('background-service.toggle-recording')[0];
-      emptyWidget = new UI.EmptyWidget.EmptyWidget(
-          i18nString(UIStrings.noRecording), i18nString(UIStrings.startRecordingToDebug, {
-            PH1: i18nString(UIStrings.startRecordingEvents),
-            PH2: recordShortcuts.title(),
-          }));
+      emptyWidget = new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.noRecording),
+                                                   i18nString(UIStrings.startRecordingToDebug, {
+                                                     PH1: i18nString(UIStrings.startRecordingEvents),
+                                                     PH2: recordShortcuts ? recordShortcuts.title() : '',
+                                                   }));
       emptyWidget.link = this.createLearnMoreLink();
 
       const button = UI.UIUtils.createTextButton(

package/front_end/panels/application/KeyValueStorageItemsView.ts

@@ -280,6 +280,7 @@ export abstract class KeyValueStorageItemsView extends UI.Widget.VBox {
       },
     };
     this.#view(viewInput, viewOutput, this.contentElement);
+    this.doResize();
   }
 
   protected isAiButtonEnabled(): boolean {

package/front_end/panels/common/ExtensionServer.ts

@@ -951,7 +951,7 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   /**
    * Slightly more permissive as {@link extensionAllowedOnURL}: This method also permits
    * UISourceCodes that originate from a {@link SDK.Script.Script} with a sourceURL magic comment as
-   * long as the corresponding target is permitted.
+   * long as the corresponding target and the embedder name (if it is a URL) are permitted.
    */
   private extensionAllowedOnContentProvider(
       contentProvider: TextUtils.ContentProvider.ContentProvider, port: MessagePort): boolean {
@@ -968,6 +968,12 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
         }
         return scripts.every(script => {
           if (script.hasSourceURL) {
+            // TODO(542925220): embedderName is a terrible proxy, but currently V8 stores the original URL only in there.
+            // We'll add a proper field in the future and will replace it then.
+            const embedderName = script.embedderName();
+            if (embedderName && URL.canParse(embedderName) && !this.extensionAllowedOnURL(embedderName, port)) {
+              return false;
+            }
             return this.extensionAllowedOnTarget(script.target(), port);
           }
           return this.extensionAllowedOnURL(script.contentURL(), port) &&

package/front_end/panels/common/common.ts

@@ -109,5 +109,4 @@ export * as ExtensionServer from './ExtensionServer.js';
 export * as ExtensionView from './ExtensionView.js';
 export * as PersistenceUtils from './PersistenceUtils.js';
 export * as DOMLinkifier from './DOMLinkifier.js';
-export * as ThrottlingUtils from './ThrottlingUtils.js';
 export * as ExtensionIframe from './ExtensionView.js';

package/front_end/panels/console/ConsoleInsightTeaser.ts

@@ -437,10 +437,12 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
     this.requestUpdate();
   }
 
-  #getConsoleInsightsEnabledSetting(): Common.Settings.Setting<boolean>|undefined {
-    const result = Common.Settings.Settings.instance().maybeResolve(
-        AiAssistanceModel.AiUtils.consoleInsightsEnabledSettingDescriptor);
-    return 'setting' in result ? (result.setting as Common.Settings.Setting<boolean>) : undefined;
+  #getConsoleInsightsEnabledSetting(): AiAssistanceModel.AiSetting.AiSetting<boolean> {
+    return new AiAssistanceModel.AiSetting.AiSetting(
+        AiAssistanceModel.AiUtils.consoleInsightsEnabledSettingDescriptor,
+        Host.AidaClient.HostConfigTracker.instance(),
+        Common.Settings.Settings.instance(),
+    );
   }
 
   #getOnboardingCompletedSetting(): Common.Settings.Setting<boolean> {
@@ -466,8 +468,7 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
 
   #onTellMeMoreClick(event: Event): void {
     event.stopPropagation();
-    if (this.#getConsoleInsightsEnabledSetting()?.getIfNotDisabled() &&
-        this.#getOnboardingCompletedSetting()?.getIfNotDisabled()) {
+    if (this.#getConsoleInsightsEnabledSetting()?.getIfNotDisabled() && this.#getOnboardingCompletedSetting()?.get()) {
       this.#executeConsoleInsightAction();
       return;
     }

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -1539,7 +1539,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     if (!this.shouldShowInsights()) {
       return false;
     }
-    if (!Common.Settings.Settings.instance().moduleSetting('console-insight-teasers-enabled').getIfNotDisabled() ||
+    if (!Common.Settings.Settings.instance().moduleSetting('console-insight-teasers-enabled').get() ||
         !AiAssistanceModel.BuiltInAi.BuiltInAi.instance().isEventuallyAvailable()) {
       return false;
     }

package/front_end/panels/elements/ClassesPaneWidget.ts

@@ -342,8 +342,8 @@ export class ClassNamePrompt extends UI.TextPrompt.TextPrompt {
     return [...completions];
   }
 
-  private async buildClassNameCompletions(expression: string, prefix: string, force?: boolean):
-      Promise<UI.SuggestBox.Suggestions> {
+  private async buildClassNameCompletions(expression: string, prefix: string,
+                                          force?: boolean): Promise<UI.SuggestBox.Suggestions> {
     if (!prefix || force) {
       this.classNamesPromise = null;
     }

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -245,6 +245,14 @@ const UIStrings = {
    * @description ARIA label for an elements tree adorner
    */
   stopForceOpenPopover: 'Stop keeping this popover open',
+  /**
+   * @description ARIA label for an elements tree adorner
+   */
+  forceShowInterest: 'Trigger interest on this element',
+  /**
+   * @description ARIA label for an elements tree adorner
+   */
+  stopForceShowInterest: 'Cancel interest on this element',
   /**
    * @description Label of the adorner for flex elements in the Elements panel
    */
@@ -427,6 +435,7 @@ export interface ViewInput {
   flexAdornerActive: boolean;
   gridAdornerActive: boolean;
   popoverAdornerActive: boolean;
+  interestAdornerActive: boolean;
 
   adProvenance?: Protocol.Network.AdProvenance;
   target?: SDK.Target.Target;
@@ -439,6 +448,7 @@ export interface ViewInput {
   showGridLanesAdorner: boolean;
   showMediaAdorner: boolean;
   showPopoverAdorner: boolean;
+  showInterestAdorner: boolean;
   showTopLayerAdorner: boolean;
   isSubgrid: boolean;
 
@@ -454,6 +464,7 @@ export interface ViewInput {
   onGridAdornerClick: (e: Event) => void;
   onMediaAdornerClick: (e: Event) => void;
   onPopoverAdornerClick: (e: Event) => void;
+  onInterestAdornerClick: (e: Event) => void;
   onScrollSnapAdornerClick: (e: Event) => void;
   onTopLayerAdornerClick: (e: Event) => void;
   onViewSourceAdornerClick: () => void;
@@ -978,9 +989,9 @@ function maybeRenderAdAdorner(input: ViewInput): Lit.TemplateResult|typeof nothi
 export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLElement): void => {
   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.showCustomElementAdorner;
+      input.showInterestAdorner || input.showTopLayerAdorner || input.showViewSourceAdorner ||
+      input.showScrollAdorner || input.showScrollSnapAdorner || input.showSlotAdorner ||
+      input.showStartingStyleAdorner || input.showCustomElementAdorner;
   const gutterContainerClasses = {
     'has-decorations': input.decorations.length || input.descendantDecorations.length,
     'gutter-container': true,
@@ -1122,6 +1133,20 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
           ${adornerRef()}>
           <span>${ElementsComponents.AdornerManager.RegisteredAdorners.POPOVER}</span>
         </devtools-adorner>`: nothing}
+        ${input.showInterestAdorner ? html`<devtools-adorner
+          class=clickable
+          role=button
+          toggleable=true
+          tabindex=0
+          .name=${ElementsComponents.AdornerManager.RegisteredAdorners.INTEREST}
+          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.INTEREST).track({ click: true })}
+          active=${input.interestAdornerActive}
+          aria-label=${input.interestAdornerActive ? i18nString(UIStrings.stopForceShowInterest) : i18nString(UIStrings.forceShowInterest)}
+          @click=${input.onInterestAdornerClick}
+          @keydown=${handleAdornerKeydown(input.onInterestAdornerClick)}
+          ${adornerRef()}>
+          <span>${ElementsComponents.AdornerManager.RegisteredAdorners.INTEREST}</span>
+        </devtools-adorner>`: nothing}
         ${input.showTopLayerAdorner ? html`<devtools-adorner
           class=clickable
           role=button
@@ -1239,6 +1264,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   #flexAdornerActive = false;
   #gridAdornerActive = false;
   #popoverAdornerActive = false;
+  #interestAdornerActive = false;
 
   #scrollSnapAdornerActive = false;
   #startingStyleAdornerActive = false;
@@ -1388,11 +1414,16 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       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) &&
+      showPopoverAdorner:
           Boolean(this.node().attributes().find(attr => attr.name === 'popover')) && !this.isClosingTag(),
+      showInterestAdorner: Boolean(Root.Runtime.hostConfig.devToolsAllowInterestForcing?.enabled) &&
+          Boolean(this.node().attributes().find(attr =>
+                                                    attr.name === 'interesttarget' || attr.name === 'interestfor')) &&
+          !this.isClosingTag(),
       showTopLayerAdorner: this.node().topLayerIndex() !== -1 && !this.isClosingTag(),
       gridAdornerActive: this.#gridAdornerActive,
       popoverAdornerActive: this.#popoverAdornerActive,
+      interestAdornerActive: this.#interestAdornerActive,
       isSubgrid: Boolean(this.#layout?.isSubgrid),
       showViewSourceAdorner: this.nodeInternal.isRootNode() && isOpeningTag(this.tagTypeContext),
       showScrollAdorner: ((this.node().nodeName() === 'HTML' && this.node().ownerDocument?.isScrollable()) ||
@@ -1432,6 +1463,8 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
                                                             (event: Event) => this.#onMediaAdornerClick(event),
       onPopoverAdornerClick: this.treeOutline?.disableEdits ? () => {} :
                                                               (event: Event) => this.#onPopoverAdornerClick(event),
+      onInterestAdornerClick: this.treeOutline?.disableEdits ? () => {} :
+                                                               (event: Event) => this.#onInterestAdornerClick(event),
       onScrollSnapAdornerClick:
           this.treeOutline?.disableEdits ? () => {} : (event: Event) => this.#onScrollSnapAdornerClick(event),
       onTopLayerAdornerClick: this.treeOutline?.disableEdits ? () => {} :
@@ -1793,9 +1826,11 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       showGridLanesAdorner: false,
       showMediaAdorner: false,
       showPopoverAdorner: false,
+      showInterestAdorner: false,
       showTopLayerAdorner: false,
       gridAdornerActive: false,
       popoverAdornerActive: false,
+      interestAdornerActive: false,
       isSubgrid: false,
       showViewSourceAdorner: false,
       showScrollAdorner: false,
@@ -1816,6 +1851,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       onGridAdornerClick: () => {},
       onMediaAdornerClick: () => {},
       onPopoverAdornerClick: () => {},
+      onInterestAdornerClick: () => {},
       onScrollSnapAdornerClick: () => {},
       onTopLayerAdornerClick: () => {},
       isHovered: false,
@@ -2370,7 +2406,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     contextMenu.viewSection().appendItem(i18nString(UIStrings.switchToAccessibilityTree),
                                          () => ElementsPanel.instance().toggleAccessibilityTree(),
                                          {jslogContext: 'switch-to-accessibility-tree'});
-    const deviceModeWrapperAction = new Emulation.DeviceModeWrapper.ActionDelegate();
+    const deviceModeWrapperAction = new Emulation.DeviceModeView.ActionDelegate();
     contextMenu.viewSection().appendItem(
         i18nString(UIStrings.captureNodeScreenshot),
         deviceModeWrapperAction.handleAction.bind(
@@ -3276,6 +3312,21 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     this.performUpdate();
   }
 
+  async #onInterestAdornerClick(event: Event): Promise<void> {
+    event.stopPropagation();
+    const node = this.node();
+    const nodeId = node.id;
+    if (!nodeId) {
+      return;
+    }
+    await node.domModel().agent.invoke_forceShowInterest({nodeId, enable: !this.#interestAdornerActive});
+    this.#interestAdornerActive = !this.#interestAdornerActive;
+    if (this.#interestAdornerActive) {
+      Badges.UserBadges.instance().recordAction(Badges.BadgeAction.MODERN_DOM_BADGE_CLICKED);
+    }
+    this.performUpdate();
+  }
+
   #onStartingStyleAdornerClick(event: Event): void {
     event.stopPropagation();
     const node = this.node();

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -1668,7 +1668,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       this.#elementsForSyncViewportCheck = [];
       return;
     }
-    const scrollContainer = this.contentElement.parentElement;
+    const scrollContainer = this.element.parentElement;
     if (!scrollContainer) {
       this.#elementsForSyncViewportCheck = [];
       return;

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

@@ -16,6 +16,7 @@ export enum RegisteredAdorners {
   FLEX = 'flex',
   GRID = 'grid',
   GRID_LANES = 'grid-lanes',
+  INTEREST = 'interest',
   MEDIA = 'media',
   POPOVER = 'popover',
   REVEAL = 'reveal',

package/front_end/panels/emulation/AdvancedApp.ts

@@ -9,14 +9,14 @@ import type * as Foundation from '../../foundation/foundation.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 
-import {DeviceModeWrapper} from './DeviceModeWrapper.js';
+import {DeviceModeView} from './DeviceModeView.js';
 import {type Bounds, Events, InspectedPagePlaceholder} from './InspectedPagePlaceholder.js';
 
 let appInstance: AdvancedApp|null = null;
 
 export class AdvancedApp implements UI.App.App {
   private rootSplitWidget!: UI.SplitWidget.SplitWidget;
-  private deviceModeView!: DeviceModeWrapper;
+  private deviceModeView!: DeviceModeView;
   private inspectedPagePlaceholder!: InspectedPagePlaceholder;
   private toolboxWindow?: Window|null;
   private toolboxRootView?: UI.RootView.RootView;
@@ -58,7 +58,7 @@ export class AdvancedApp implements UI.App.App {
 
     this.inspectedPagePlaceholder = InspectedPagePlaceholder.instance();
     this.inspectedPagePlaceholder.addEventListener(Events.UPDATE, this.onSetInspectedPageBounds.bind(this), this);
-    this.deviceModeView = new DeviceModeWrapper();
+    this.deviceModeView = new DeviceModeView();
 
     UI.DockController.DockController.instance().addEventListener(
         UI.DockController.Events.BEFORE_DOCK_SIDE_CHANGED, this.onBeforeDockSideChange, this);

package/front_end/panels/emulation/DeviceModeToolbar.ts

@@ -117,14 +117,7 @@ const UIStrings = {
    * @example {4.3} PH1
    */
   defaultF: '{PH1} (default)',
-  /**
-   * @description Command to hide the frame around the mobile device screen.
-   */
-  hideDeviceFrame: 'Hide device frame',
-  /**
-   * @description Command to show the frame around the mobile device screen.
-   */
-  showDeviceFrame: 'Show device frame',
+
   /**
    * @description Command to hide a display in the device mode toolbar that shows the different media
    * queries for the device, above the device screen.
@@ -801,8 +794,7 @@ export class DeviceModeToolbar extends UI.Widget.Widget {
       return;
     }
     const model = this.model;
-    appendToggleItem(contextMenu.headerSection(), model.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');
@@ -839,7 +831,6 @@ export class DeviceModeToolbar extends UI.Widget.Widget {
   }
 
   private reset(): void {
-    this.model?.deviceOutlineSetting().set(false);
     this.showDeviceScaleFactorSetting.set(false);
     this.showUserAgentTypeSetting.set(false);
     this.showMediaInspectorSetting.set(false);