chrome-devtools-frontend 1.0.1672557 → 1.0.1675430

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

@@ -51,14 +51,6 @@ const UIStrings = {
    * @description Command that hides measuring rulers next to the emulated device.
    */
   hideRulers: 'Hide rulers in the device mode toolbar',
-  /**
-   * @description Command that shows a frame around the emulated device.
-   */
-  showDeviceFrame: 'Show device frame',
-  /**
-   * @description Command that hides a frame around the emulated device.
-   */
-  hideDeviceFrame: 'Hide device frame',
 
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/emulation/emulation-meta.ts', UIStrings);
@@ -79,7 +71,7 @@ UI.ActionRegistration.registerActionExtension({
   toggleable: true,
   async loadActionDelegate() {
     const Emulation = await loadEmulationModule();
-    return new Emulation.DeviceModeWrapper.ActionDelegate();
+    return new Emulation.DeviceModeView.ActionDelegate();
   },
   condition: Root.Runtime.conditions.canDock,
   title: i18nLazyString(UIStrings.toggleDeviceToolbar),
@@ -101,7 +93,7 @@ UI.ActionRegistration.registerActionExtension({
   category: UI.ActionRegistration.ActionCategory.SCREENSHOT,
   async loadActionDelegate() {
     const Emulation = await loadEmulationModule();
-    return new Emulation.DeviceModeWrapper.ActionDelegate();
+    return new Emulation.DeviceModeView.ActionDelegate();
   },
   condition: Root.Runtime.conditions.canDock,
   title: i18nLazyString(UIStrings.captureScreenshot),
@@ -112,7 +104,7 @@ UI.ActionRegistration.registerActionExtension({
   category: UI.ActionRegistration.ActionCategory.SCREENSHOT,
   async loadActionDelegate() {
     const Emulation = await loadEmulationModule();
-    return new Emulation.DeviceModeWrapper.ActionDelegate();
+    return new Emulation.DeviceModeView.ActionDelegate();
   },
   condition: Root.Runtime.conditions.canDock,
   title: i18nLazyString(UIStrings.captureFullSizeScreenshot),
@@ -123,7 +115,7 @@ UI.ActionRegistration.registerActionExtension({
   category: UI.ActionRegistration.ActionCategory.SCREENSHOT,
   async loadActionDelegate() {
     const Emulation = await loadEmulationModule();
-    return new Emulation.DeviceModeWrapper.ActionDelegate();
+    return new Emulation.DeviceModeView.ActionDelegate();
   },
   condition: Root.Runtime.conditions.canDock,
   title: i18nLazyString(UIStrings.captureNodeScreenshot),
@@ -165,24 +157,6 @@ Common.Settings.registerSettingExtension({
   tags: [i18nLazyString(UIStrings.device)],
 });
 
-Common.Settings.registerSettingExtension({
-  category: Common.Settings.SettingCategory.MOBILE,
-  settingName: 'emulation.show-device-outline',
-  settingType: Common.Settings.SettingType.BOOLEAN,
-  defaultValue: false,
-  options: [
-    {
-      value: true,
-      title: i18nLazyString(UIStrings.showDeviceFrame),
-    },
-    {
-      value: false,
-      title: i18nLazyString(UIStrings.hideDeviceFrame),
-    },
-  ],
-  tags: [i18nLazyString(UIStrings.device)],
-});
-
 UI.Toolbar.registerToolbarItem({
   actionId: 'emulation.toggle-device-mode',
   condition: Root.Runtime.conditions.canDock,

package/front_end/panels/emulation/emulation.ts

@@ -7,12 +7,10 @@ import './InspectedPagePlaceholder.js';
 import './MediaQueryInspector.js';
 import './DeviceModeToolbar.js';
 import './DeviceModeView.js';
-import './DeviceModeWrapper.js';
 
 import * as AdvancedApp from './AdvancedApp.js';
 import * as DeviceModeToolbar from './DeviceModeToolbar.js';
 import * as DeviceModeView from './DeviceModeView.js';
-import * as DeviceModeWrapper from './DeviceModeWrapper.js';
 import * as InspectedPagePlaceholder from './InspectedPagePlaceholder.js';
 import * as MediaQueryInspector from './MediaQueryInspector.js';
 
@@ -20,7 +18,6 @@ export {
   AdvancedApp,
   DeviceModeToolbar,
   DeviceModeView,
-  DeviceModeWrapper,
   InspectedPagePlaceholder,
   MediaQueryInspector,
 };

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

@@ -780,7 +780,7 @@ export class ConsoleInsight extends UI.Widget.Widget {
   // Rating sub-form state.
   #selectedRating?: boolean;
 
-  #consoleInsightsEnabledSetting: Common.Settings.Setting<boolean>|undefined;
+  #consoleInsightsEnabledSetting: AiAssistanceModel.AiSetting.AiSetting<boolean>;
   #aidaPreconditions: Host.AidaClient.AidaAccessPreconditions;
   #boundOnAidaAvailabilityChange:
       (ev: Common.EventTarget.EventTargetEvent<Host.AidaClient.AidaAccessPreconditions>) => void;
@@ -861,10 +861,12 @@ export class ConsoleInsight extends UI.Widget.Widget {
 
   // off -> entrypoints are shown, and point to the AI setting panel where the setting can be turned on
   // on -> entrypoints are shown, and console insights can be generated
-  #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(),
+    );
   }
 
   // off -> consent reminder is shown, unless the 'console-insights-enabled'-setting has been enabled in the current DevTools session
@@ -876,7 +878,8 @@ export class ConsoleInsight extends UI.Widget.Widget {
   override wasShown(): void {
     super.wasShown();
     this.focus();
-    this.#consoleInsightsEnabledSetting?.addChangeListener(this.#onConsoleInsightsSettingChanged, this);
+    this.#consoleInsightsEnabledSetting.addEventListener(AiAssistanceModel.AiSetting.Events.CHANGED,
+                                                         this.#onConsoleInsightsSettingChanged, this);
     const blockedByAge = Root.Runtime.hostConfig.aidaAvailability?.blockedByAge === true;
     if (this.#state.type === State.LOADING && this.#consoleInsightsEnabledSetting?.getIfNotDisabled() === true &&
         !blockedByAge && this.#state.consentOnboardingCompleted) {
@@ -899,7 +902,8 @@ export class ConsoleInsight extends UI.Widget.Widget {
 
   override willHide(): void {
     super.willHide();
-    this.#consoleInsightsEnabledSetting?.removeChangeListener(this.#onConsoleInsightsSettingChanged, this);
+    this.#consoleInsightsEnabledSetting.removeEventListener(AiAssistanceModel.AiSetting.Events.CHANGED,
+                                                            this.#onConsoleInsightsSettingChanged, this);
     Host.AidaClient.HostConfigTracker.instance().removeEventListener(
         Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#boundOnAidaAvailabilityChange);
   }

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

@@ -9,35 +9,35 @@ import type * as Timeline from '../timeline/timeline.js';
 
 const UIStrings = {
   /**
-   * @description Text for the performance of something
+   * @description Title of the Performance panel.
    */
   performance: 'Performance',
   /**
-   * @description Command for showing the 'Performance' tool
+   * @description Command for showing the Performance panel.
    */
   showPerformance: 'Show Performance',
   /**
-   * @description Title of an action in the timeline tool to show history
+   * @description Title of an action in the Performance panel to show history.
    */
   showRecentTimelineSessions: 'Show recent timeline sessions',
   /**
-   * @description Text to record a series of actions for analysis
+   * @description Text to record a series of actions for analysis.
    */
   record: 'Record',
   /**
-   * @description Text of an item that stops the running task
+   * @description Text of an item that stops the running task.
    */
   stop: 'Stop',
   /**
-   * @description Title of an action in the timeline tool to record a reload of the current page
+   * @description Title of an action in the Performance panel to record a reload of the current page.
    */
   recordAndReload: 'Record and reload',
   /**
-   * @description Title of a setting under the Performance category in Settings
+   * @description Title of a setting under the Performance category in Settings.
    */
   timelineShowAllEvents: 'Show all events',
   /**
-   * @description Title of a setting under the Performance category in Settings
+   * @description Title of a setting under the Performance category in Settings.
    */
   timelineDebugMode: 'Timeline debug mode (trace event details, etc.)',
 } as const;

package/front_end/panels/layer_viewer/LayerDetailsView.ts

@@ -24,15 +24,15 @@ const {widget} = UI.Widget;
 
 const UIStrings = {
   /**
-   * @description Text in Layer Details View of the Layers panel
+   * @description Text in layer details view of the Layers panel.
    */
   selectALayerToSeeItsDetails: 'Select a layer to see its details',
   /**
-   * @description Text in Layer Details View of the Layers panel if no layer is selected for viewing its content
+   * @description Text in layer details view of the Layers panel if no layer is selected for viewing its content.
    */
   noLayerSelected: 'No layer selected',
   /**
-   * @description Element text content in Layer Details View of the Layers panel
+   * @description Element text content in layer details view of the Layers panel.
    * @example {Touch event handler} PH1
    * @example {10} PH2
    * @example {10} PH3
@@ -41,46 +41,46 @@ const UIStrings = {
    */
   scrollRectangleDimensions: '{PH1} {PH2} × {PH3} (at {PH4}, {PH5})',
   /**
-   * @description Text in Layer Details View of the Layers panel. Used to indicate that a particular
+   * @description Text in layer details view of the Layers panel. Used to indicate that a particular
    * layer of the website is unnamed (was not given a name/doesn't have one).
    */
   unnamed: '<unnamed>',
   /**
-   * @description Text in Layer Details View of the Layers panel
-   * @example {Nearest Layer Shifting Sticky Box} PH1
+   * @description Text in layer details view of the Layers panel.
+   * @example {Nearest layer shifting sticky box} PH1
    * @example {&lt;unnamed&gt;} PH2
    * @example {5} PH3
    */
   stickyAncestorLayersS: '{PH1}: {PH2} ({PH3})',
   /**
-   * @description Sticky box rect element text content in Layer Details View of the Layers panel
+   * @description Sticky box rect element text content in layer details view of the Layers panel.
    * @example {10} PH1
    * @example {10} PH2
    * @example {10} PH3
    * @example {10} PH4
    */
-  stickyBoxRectangleDimensions: 'Sticky Box {PH1} × {PH2} (at {PH3}, {PH4})',
+  stickyBoxRectangleDimensions: 'Sticky box {PH1} × {PH2} (at {PH3}, {PH4})',
   /**
-   * @description Containing block rect element text content in Layer Details View of the Layers panel.
-   * The placeholder are width, height, x position, and y position respectively.
+   * @description Containing block rect element text content in layer details view of the Layers panel.
+   * The placeholders are width, height, x position, and y position respectively.
    * @example {10} PH1
    * @example {10} PH2
    * @example {10} PH3
    * @example {10} PH4
    */
-  containingBlocRectangleDimensions: 'Containing Block {PH1} × {PH2} (at {PH3}, {PH4})',
+  containingBlocRectangleDimensions: 'Containing block {PH1} × {PH2} (at {PH3}, {PH4})',
   /**
-   * @description Text in Layer Details View of the Layers panel. This also means "The nearest sticky
+   * @description Text in layer details view of the Layers panel. This also means "The nearest sticky
    * box that causes a layer shift".
    */
-  nearestLayerShiftingStickyBox: 'Nearest Layer Shifting Sticky Box',
+  nearestLayerShiftingStickyBox: 'Nearest layer shifting sticky box',
   /**
-   * @description Text in Layer Details View of the Layers panel. This also means "The nearest block
+   * @description Text in layer details view of the Layers panel. This also means "The nearest block
    * that causes a layer shift".
    */
-  nearestLayerShiftingContaining: 'Nearest Layer Shifting Containing Block',
+  nearestLayerShiftingContaining: 'Nearest layer shifting containing block',
   /**
-   * @description Size cell text content in Layer Details View of the Layers panel
+   * @description Size cell text content in layer details view of the Layers panel.
    * @example {10} PH1
    * @example {10} PH2
    * @example {10} PH3
@@ -88,53 +88,53 @@ const UIStrings = {
    */
   updateRectangleDimensions: '{PH1} × {PH2} (at {PH3}, {PH4})',
   /**
-   * @description Text for the size of something
+   * @description Text for the size of something.
    */
   size: 'Size',
   /**
-   * @description Text in Layer Details View of the Layers panel
+   * @description Text in layer details view of the Layers panel.
    */
-  compositingReasons: 'Compositing Reasons',
+  compositingReasons: 'Compositing reasons',
   /**
-   * @description Text in Layer Details View of the Layers panel
+   * @description Text in layer details view of the Layers panel.
    */
   memoryEstimate: 'Memory estimate',
   /**
-   * @description Text in Layer Details View of the Layers panel
+   * @description Text in layer details view of the Layers panel.
    */
   paintCount: 'Paint count',
   /**
-   * @description Text in Layer Details View of the Layers panel
+   * @description Text in layer details view of the Layers panel.
    */
   slowScrollRegions: 'Slow scroll regions',
   /**
-   * @description Text in Layer Details View of the Layers panel
+   * @description Text in layer details view of the Layers panel.
    */
   stickyPositionConstraint: 'Sticky position constraint',
   /**
-   * @description Title of the paint profiler, old name of the performance pane
+   * @description Label for button to open the paint profiler in the layer details view of the Layers panel.
    */
-  paintProfiler: 'Paint Profiler',
+  paintProfiler: 'Paint profiler',
   /**
-   * @description Text in Layer Details View of the Layers panel
+   * @description Text in layer details view of the Layers panel.
    */
   nonFastScrollable: 'Non fast scrollable',
   /**
-   * @description Text in Layer Details View of the Layers panel
+   * @description Text in layer details view of the Layers panel.
    */
   touchEventHandler: 'Touch event handler',
   /**
-   * @description Text in Layer Details View of the Layers panel
+   * @description Text in layer details view of the Layers panel.
    */
   wheelEventHandler: 'Wheel event handler',
   /**
-   * @description Text in Layer Details View of the Layers panel. Means that this rectangle needs to
+   * @description Text in layer details view of the Layers panel. Means that this rectangle needs to
    * be repainted when the webpage is scrolled. 'repaints' means that the browser engine needs to
    * draw the pixels for this rectangle to the user's monitor again.
    */
   repaintsOnScroll: 'Repaints on scroll',
   /**
-   * @description Text in Layer Details View of the Layers panel
+   * @description Text in layer details view of the Layers panel.
    */
   mainThreadScrollingReason: 'Main thread scrolling reason',
 } as const;

package/front_end/panels/layer_viewer/LayerTreeOutline.ts

@@ -20,20 +20,20 @@ import {
 
 const UIStrings = {
   /**
-   * @description A count of the number of rendering layers in Layer Tree Outline of the Layers panel
+   * @description A count of the number of rendering layers in layer tree outline of the Layers panel.
    * @example {10} PH1
    */
   layerCount: '{PH1} layers',
   /**
-   * @description Label for layers sidepanel tree
+   * @description Label for layers sidebar tree.
    */
-  layersTreePane: 'Layers Tree Pane',
+  layersTreePane: 'Layers tree',
   /**
-   * @description A context menu item in the DView of the Layers panel
+   * @description Context menu item in the 3D view of the Layers panel.
    */
-  showPaintProfiler: 'Show Paint Profiler',
+  showPaintProfiler: 'Show paint profiler',
   /**
-   * @description Details text content in Layer Tree Outline of the Layers panel
+   * @description Details text content in layer tree outline of the Layers panel.
    * @example {10} PH1
    * @example {10} PH2
    */

package/front_end/panels/layer_viewer/LayerViewHost.ts

@@ -9,7 +9,7 @@ import type * as UI from '../../ui/legacy/legacy.js';
 
 const UIStrings = {
   /**
-   * @description Text in Layer View Host of the Layers panel
+   * @description Text in layer view host of the Layers panel.
    */
   showInternalLayers: 'Show internal layers',
 } as const;

package/front_end/panels/layer_viewer/Layers3DView.ts

@@ -31,38 +31,38 @@ const {widget} = UI.Widget;
 
 const UIStrings = {
   /**
-   * @description Text of a DOM element in DView of the Layers panel
+   * @description Text of a DOM element in 3D view of the Layers panel.
    */
   noLayerInformation: 'No layers detected yet',
   /**
-   * @description Text of a DOM element in DView of the Layers panel that explains the panel
+   * @description Text of a DOM element in 3D view of the Layers panel that explains the panel.
    */
   layerExplanation: 'On this page you will be able to view and inspect document layers.',
   /**
-   * @description Accessibility label for canvas view in Layers tool
+   * @description Accessibility label for canvas view in Layers panel.
    */
-  dLayersView: '3D Layers View',
+  dLayersView: '3D layers view',
   /**
-   * @description Text in DView of the Layers panel
+   * @description Text in 3D view of the Layers panel.
    */
   cantDisplayLayers: 'Can’t display layers',
   /**
-   * @description Text in DView of the Layers panel
+   * @description Text in 3D view of the Layers panel.
    */
   webglSupportIsDisabledInYour: 'WebGL support is disabled in your browser.',
   /**
-   * @description Text in DView of the Layers panel
+   * @description Text in 3D view of the Layers panel.
    * @example {about:gpu} PH1
    */
   checkSForPossibleReasons: 'Check {PH1} for possible reasons.',
   /**
-   * @description A context menu item in the DView of the Layers panel
+   * @description Context menu item in the 3D view of the Layers panel.
    */
-  resetView: 'Reset View',
+  resetView: 'Reset view',
   /**
-   * @description A context menu item in the DView of the Layers panel
+   * @description Context menu item in the 3D view of the Layers panel.
    */
-  showPaintProfiler: 'Show Paint Profiler',
+  showPaintProfiler: 'Show paint profiler',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/layer_viewer/Layers3DView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);

package/front_end/panels/layer_viewer/PaintProfilerView.ts

@@ -18,33 +18,33 @@ const {ref} = Lit.Directives;
 
 const UIStrings = {
   /**
-   * @description Text to indicate the progress of a profile
+   * @description Text to indicate the progress of a profile.
    */
   profiling: 'Profiling…',
   /**
-   * @description Text in Paint Profiler View of the Layers panel
+   * @description Text in paint profiler view of the Layers panel.
    */
   shapes: 'Shapes',
   /**
-   * @description Text in Paint Profiler View of the Layers panel
+   * @description Text in paint profiler view of the Layers panel.
    */
   bitmap: 'Bitmap',
   /**
-   * @description Generic label for any text
+   * @description Generic label for any text.
    */
   text: 'Text',
   /**
-   * @description Text in Paint Profiler View of the Layers panel
+   * @description Text in paint profiler view of the Layers panel.
    */
   misc: 'Misc',
   /**
-   * @description ARIA label for a pie chart that shows the results of the paint profiler
+   * @description ARIA label for a pie chart that shows the results of the paint profiler.
    */
   profilingResults: 'Profiling results',
   /**
-   * @description Label for command log tree in the Profiler tab
+   * @description Label for command log tree in the paint profiler.
    */
-  commandLog: 'Command Log',
+  commandLog: 'Command log',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/layer_viewer/PaintProfilerView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);

package/front_end/panels/layer_viewer/TransformController.ts

@@ -13,15 +13,15 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 const UIStrings = {
   /**
-   * @description Tooltip text that appears when hovering over largeicon pan button in Transform Controller of the Layers panel
+   * @description Tooltip text that appears when hovering over largeicon pan button in transform controller of the Layers panel.
    */
   panModeX: 'Pan mode (X)',
   /**
-   * @description Tooltip text that appears when hovering over largeicon rotate button in Transform Controller of the Layers panel
+   * @description Tooltip text that appears when hovering over largeicon rotate button in transform controller of the Layers panel.
    */
   rotateModeV: 'Rotate mode (V)',
   /**
-   * @description Tooltip text that appears when hovering over the largeicon center button in the Transform Controller of the Layers panel
+   * @description Tooltip text that appears when hovering over the largeicon center button in the transform controller of the Layers panel.
    */
   resetTransform: 'Reset transform (0)',
 } as const;

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

@@ -8,47 +8,47 @@ import * as UI from '../../ui/legacy/legacy.js';
 
 const UIStrings = {
   /**
-   * @description Title of a setting in Layer Viewer.
+   * @description Title of a setting in layer viewer.
    */
   paints: 'Paints',
   /**
-   * @description Title of a setting in Layer Viewer.
+   * @description Title of a setting in layer viewer.
    */
   slowScrollRects: 'Slow scroll rects',
   /**
-   * @description Text in the Shortcuts page to explain a keyboard shortcut (reset view in Layers Panel)
+   * @description Text in the Shortcuts page to explain a keyboard shortcut (reset view in Layers panel).
    */
   resetView: 'Reset view',
   /**
-   * @description Text in the Shortcuts page to explain a keyboard shortcut (switch to pan in Layers Panel)
+   * @description Text in the Shortcuts page to explain a keyboard shortcut (switch to pan in Layers panel).
    */
   switchToPanMode: 'Switch to pan mode',
   /**
-   * @description Text in the Shortcuts page to explain a keyboard shortcut (switch to rotate mode in Layers Panel)
+   * @description Text in the Shortcuts page to explain a keyboard shortcut (switch to rotate mode in Layers panel).
    */
   switchToRotateMode: 'Switch to rotate mode',
   /**
-   * @description Text in the Shortcuts page to explain a keyboard shortcut (zoom in)
+   * @description Text in the Shortcuts page to explain a keyboard shortcut (zoom in).
    */
   zoomIn: 'Zoom in',
   /**
-   * @description Text in the Shortcuts page to explain a keyboard shortcut (zoom out)
+   * @description Text in the Shortcuts page to explain a keyboard shortcut (zoom out).
    */
   zoomOut: 'Zoom out',
   /**
-   * @description Description of a shortcut that pans or rotates the layer viewer up
+   * @description Description of a shortcut that pans or rotates the layer viewer up.
    */
   panOrRotateUp: 'Pan or rotate up',
   /**
-   * @description Description of a shortcut that pans or rotates the layer viewer down
+   * @description Description of a shortcut that pans or rotates the layer viewer down.
    */
   panOrRotateDown: 'Pan or rotate down',
   /**
-   * @description Description of a shortcut that pans or rotates the layer viewer left
+   * @description Description of a shortcut that pans or rotates the layer viewer left.
    */
   panOrRotateLeft: 'Pan or rotate left',
   /**
-   * @description Description of a shortcut that pans or rotates the layer viewer right
+   * @description Description of a shortcut that pans or rotates the layer viewer right.
    */
   panOrRotateRight: 'Pan or rotate right',
 } as const;

package/front_end/panels/layers/LayersPanel.ts

@@ -14,11 +14,11 @@ import {Events, LayerTreeModel} from './LayerTreeModel.js';
 
 const UIStrings = {
   /**
-   * @description Text for the details of something
+   * @description Title of the details tab in the Layers panel.
    */
   details: 'Details',
   /**
-   * @description Title of the Profiler tool
+   * @description Title of the profiler tab in the Layers panel.
    */
   profiler: 'Profiler',
 } as const;

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

@@ -9,11 +9,11 @@ import type * as Layers from './layers.js';
 
 const UIStrings = {
   /**
-   * @description Title of the Layers tool
+   * @description Title of the Layers panel.
    */
   layers: 'Layers',
   /**
-   * @description Command for showing the Layers tool
+   * @description Command for showing the Layers panel.
    */
   showLayers: 'Show Layers',
 } as const;

package/front_end/panels/lighthouse/LighthouseController.ts

@@ -201,7 +201,7 @@ class LighthouseRun {
     emulation: {
       type: EmulationModel.DeviceModeModel.Type,
       enabled: boolean,
-      outlineEnabled: boolean,
+
       toolbarControlsEnabled: boolean,
       scale: number,
       device: EmulationModel.EmulatedDevices.EmulatedDevice|null,
@@ -274,7 +274,6 @@ class LighthouseRun {
   /**
    * We set the device emulation on the DevTools-side for two reasons:
    * 1. To workaround some odd device metrics emulation bugs like occuluding viewports
-   * 2. To get the attractive device outline
    */
   private async setupEmulationAndProtocolConnection(): Promise<void> {
     const emulationModel = EmulationModel.DeviceModeModel.DeviceModeModel.instance();
@@ -282,7 +281,6 @@ class LighthouseRun {
       emulation: {
         type: emulationModel.type(),
         enabled: emulationModel.enabledSetting().get(),
-        outlineEnabled: emulationModel.deviceOutlineSetting().get(),
         toolbarControlsEnabled: emulationModel.toolbarControlsEnabledSetting().get(),
         scale: emulationModel.scaleSetting().get(),
         device: emulationModel.device(),
@@ -297,7 +295,6 @@ class LighthouseRun {
       emulationModel.emulate(EmulationModel.DeviceModeModel.Type.None, null, null);
     } else if (this.flags.formFactor === 'mobile') {
       emulationModel.enabledSetting().set(true);
-      emulationModel.deviceOutlineSetting().set(true);
 
       // The emulation model is currently coupled to the UI.
       // We must wait for the device mode view to render so that it can
@@ -325,10 +322,9 @@ class LighthouseRun {
       // https://bugs.chromium.org/p/chromium/issues/detail?id=1337089
       emulationModel.emulate(EmulationModel.DeviceModeModel.Type.None, null, null);
 
-      const {type, enabled, outlineEnabled, toolbarControlsEnabled, scale, device, mode} =
-          this.emulationStateBefore.emulation;
+      const {type, enabled, toolbarControlsEnabled, scale, device, mode} = this.emulationStateBefore.emulation;
       emulationModel.enabledSetting().set(enabled);
-      emulationModel.deviceOutlineSetting().set(outlineEnabled);
+
       emulationModel.toolbarControlsEnabledSetting().set(toolbarControlsEnabled);
 
       // `emulate` will ignore the `scale` parameter for responsive emulation.