chrome-devtools-frontend 1.0.1380117 → 1.0.1402249

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

@@ -8,7 +8,7 @@ import '../../../ui/components/node_text/node_text.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as SDK from '../../../core/sdk/sdk.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
-import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
+import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
@@ -50,7 +50,6 @@ export interface ElementsBreadcrumbsData {
   selectedNode: DOMNode|null;
   crumbs: DOMNode[];
 }
-const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 
 export class ElementsBreadcrumbs extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
@@ -102,11 +101,11 @@ export class ElementsBreadcrumbs extends HTMLElement {
       return;
     }
 
-    const crumbWindowWidth = await coordinator.read<number>(() => {
+    const crumbWindowWidth = await RenderCoordinator.read<number>(() => {
       return crumbWindow.clientWidth;
     });
 
-    const scrollContainerWidth = await coordinator.read<number>(() => {
+    const scrollContainerWidth = await RenderCoordinator.read<number>(() => {
       return crumbScrollContainer.clientWidth;
     });
 
@@ -175,11 +174,11 @@ export class ElementsBreadcrumbs extends HTMLElement {
       return;
     }
 
-    const crumbWindowWidth = await coordinator.read<number>(() => {
+    const crumbWindowWidth = await RenderCoordinator.read<number>(() => {
       return crumbWindow.clientWidth;
     });
 
-    const scrollContainerWidth = await coordinator.read<number>(() => {
+    const scrollContainerWidth = await RenderCoordinator.read<number>(() => {
       return crumbScrollContainer.clientWidth;
     });
 
@@ -309,7 +308,7 @@ export class ElementsBreadcrumbs extends HTMLElement {
                 crumb: true,
                 selected: crumb.selected,
               };
-              // eslint-disable-next-line rulesdir/ban_a_tags_in_lit_html
+              // eslint-disable-next-line rulesdir/no-a-tags-in-lit-html
               return html`
                 <li class=${LitHtml.Directives.classMap(crumbClasses)}
                   data-node-id=${crumb.node.id}
@@ -361,7 +360,7 @@ export class ElementsBreadcrumbs extends HTMLElement {
     const activeCrumb = this.#shadow.querySelector(`.crumb[data-node-id="${activeCrumbId}"]`);
 
     if (activeCrumb) {
-      await coordinator.scroll(() => {
+      await RenderCoordinator.scroll(() => {
         activeCrumb.scrollIntoView({
           // We only want to scroll smoothly when the user is clicking the
           // buttons manually. If we are automatically scrolling, we could be

package/front_end/panels/elements/components/ElementsTreeExpandButton.test.ts

@@ -7,12 +7,10 @@ import {
   renderElementIntoDOM,
 } from '../../../testing/DOMHelpers.js';
 import {describeWithLocale} from '../../../testing/EnvironmentHelpers.js';
-import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
+import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 
 import * as ElementsComponents from './components.js';
 
-const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
-
 describeWithLocale('Elements tree expand button', () => {
   it('render and click handler trigger correctly', async () => {
     const component = new ElementsComponents.ElementsTreeExpandButton.ElementsTreeExpandButton();
@@ -24,7 +22,7 @@ describeWithLocale('Elements tree expand button', () => {
     };
 
     renderElementIntoDOM(component);
-    await coordinator.done();
+    await RenderCoordinator.done();
 
     const button = component.shadowRoot!.querySelector('.expand-button');
     assert.instanceOf(button, HTMLElement);
@@ -42,7 +40,7 @@ describeWithLocale('Elements tree expand button', () => {
     };
 
     renderElementIntoDOM(component);
-    await coordinator.done();
+    await RenderCoordinator.done();
 
     const button = component.shadowRoot!.querySelector('.expand-button');
     assert.instanceOf(button, HTMLElement);

package/front_end/panels/elements/components/LayoutPane.test.ts

@@ -11,12 +11,10 @@ import {
 } from '../../../testing/DOMHelpers.js';
 import {createTarget} from '../../../testing/EnvironmentHelpers.js';
 import {describeWithMockConnection} from '../../../testing/MockConnection.js';
-import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
+import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 
 import * as ElementsComponents from './components.js';
 
-const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
-
 describeWithMockConnection('LayoutPane', () => {
   let target: SDK.Target.Target;
   let domModel: SDK.DOMModel.DOMModel;
@@ -35,7 +33,7 @@ describeWithMockConnection('LayoutPane', () => {
     const component = new ElementsComponents.LayoutPane.LayoutPane();
     renderElementIntoDOM(component);
     component.wasShown();
-    await coordinator.done({waitForWork: true});
+    await RenderCoordinator.done({waitForWork: true});
     return component;
   }
 
@@ -53,8 +51,12 @@ describeWithMockConnection('LayoutPane', () => {
   }
 
   it('renders settings', async () => {
-    Common.Settings.Settings.instance().moduleSetting('show-grid-line-labels').setTitle('Enum setting title');
-    Common.Settings.Settings.instance().moduleSetting('show-grid-track-sizes').setTitle('Boolean setting title');
+    Common.Settings.Settings.instance()
+        .moduleSetting('show-grid-line-labels')
+        .setTitle('Enum setting title' as Platform.UIString.LocalizedString);
+    Common.Settings.Settings.instance()
+        .moduleSetting('show-grid-track-sizes')
+        .setTitle('Boolean setting title' as Platform.UIString.LocalizedString);
 
     const component = await renderComponent();
     assert.deepEqual(queryLabels(component, '[data-enum-setting]'), [{label: 'Enum setting title', input: 'SELECT'}]);
@@ -110,7 +112,7 @@ describeWithMockConnection('LayoutPane', () => {
     const component = await renderComponent();
     assert.isNotNull(component.shadowRoot);
 
-    assert.strictEqual(queryLabels(component, '[data-element]').length, 3);
+    assert.lengthOf(queryLabels(component, '[data-element]'), 3);
   });
 
   it('renders flex elements', async () => {
@@ -130,7 +132,7 @@ describeWithMockConnection('LayoutPane', () => {
     const component = await renderComponent();
     assert.isNotNull(component.shadowRoot);
 
-    assert.strictEqual(queryLabels(component, '[data-element]').length, 3);
+    assert.lengthOf(queryLabels(component, '[data-element]'), 3);
   });
 
   it('send an event when an element overlay is toggled', async () => {
@@ -183,13 +185,15 @@ describeWithMockConnection('LayoutPane', () => {
   const updatesUiOnEvent = <T extends keyof SDK.OverlayModel.EventTypes>(
       event: Platform.TypeScriptUtilities.NoUnion<T>, inScope: boolean) => async () => {
     SDK.TargetManager.TargetManager.instance().setScopeTarget(inScope ? target : null);
+    const render = sinon.spy(ElementsComponents.LayoutPane.LayoutPane.prototype, 'render');
     await renderComponent();
-    const render = sinon.spy(coordinator, 'write');
+    await RenderCoordinator.done();
+    render.resetHistory();
     overlayModel.dispatchEventToListeners(
         event,
         ...[{nodeId: 42, enabled: true}] as unknown as
             Common.EventTarget.EventPayloadToRestParameters<SDK.OverlayModel.EventTypes, T>);
-    await new Promise<void>(resolve => setTimeout(resolve, 0));
+    await RenderCoordinator.done();
     assert.strictEqual(render.called, inScope);
   };
 

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

@@ -11,8 +11,8 @@ import * as SDK from '../../../core/sdk/sdk.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as Input from '../../../ui/components/input/input.js';
 import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wrapper.js';
-import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
-// eslint-disable-next-line rulesdir/es_modules_import
+import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
+// eslint-disable-next-line rulesdir/es-modules-import
 import inspectorCommonStyles from '../../../ui/legacy/inspectorCommon.css.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
@@ -164,7 +164,6 @@ export interface LayoutPaneData {
   flexContainerElements?: LayoutElement[];
 }
 
-const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 let layoutPaneWrapperInstance: LegacyWrapper.LegacyWrapper.LegacyWrapper<UI.Widget.Widget, LayoutPane>;
 
 export class LayoutPane extends LegacyWrapper.LegacyWrapper.WrappableComponent {
@@ -335,7 +334,7 @@ export class LayoutPane extends LegacyWrapper.LegacyWrapper.WrappableComponent {
   override async render(): Promise<void> {
     const gridElements = gridNodesToElements(await this.#fetchGridNodes());
     const flexContainerElements = flexContainerNodesToElements(await this.#fetchFlexContainerNodes());
-    await coordinator.write('LayoutPane render', () => {
+    await RenderCoordinator.write('LayoutPane render', () => {
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
       render(html`

package/front_end/panels/elements/components/QueryContainer.test.ts

@@ -122,7 +122,7 @@ describe('QueryContainer', () => {
       height: '300px',
     });
     const nonExistentDetailsElement = component.shadowRoot!.querySelector<HTMLElement>('.queried-size-details');
-    assert.strictEqual(nonExistentDetailsElement, null, 'query details without any axis should not be rendered');
+    assert.isNull(nonExistentDetailsElement, 'query details without any axis should not be rendered');
 
     component.updateContainerQueriedSizeDetails({
       physicalAxis: SDK.CSSContainerQuery.PhysicalAxis.HORIZONTAL,

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

@@ -79,7 +79,7 @@ export class QueryContainer extends HTMLElement {
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    // eslint-disable-next-line rulesdir/ban_a_tags_in_lit_html
+    // eslint-disable-next-line rulesdir/no-a-tags-in-lit-html
     render(html`
       →
       <a href="#"

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

@@ -4,7 +4,6 @@
 
 import * as AccessibilityTreeNode from './AccessibilityTreeNode.js';
 import * as AdornerManager from './AdornerManager.js';
-import * as AdornerSettingsPane from './AdornerSettingsPane.js';
 import * as AnchorFunctionLinkSwatch from './AnchorFunctionLinkSwatch.js';
 import * as ComputedStyleProperty from './ComputedStyleProperty.js';
 import * as ComputedStyleTrace from './ComputedStyleTrace.js';
@@ -25,7 +24,6 @@ import * as StylePropertyEditor from './StylePropertyEditor.js';
 export {
   AccessibilityTreeNode,
   AdornerManager,
-  AdornerSettingsPane,
   AnchorFunctionLinkSwatch,
   ComputedStyleProperty,
   ComputedStyleTrace,

package/front_end/panels/elements/elementsPanel.css

@@ -71,13 +71,13 @@ devtools-tree-outline {
 
 .axtree-button {
   position: absolute;
-  top: 16px;
-  right: 20px;
+  top: var(--sys-size-8);
+  right: var(--sys-size-9);
   background-color: var(--sys-color-cdt-base-container);
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 1;
-  border: 1px solid var(--sys-color-neutral-outline);
-  border-radius: 3px;
+  border-radius: var(--sys-shape-corner-full);
+  box-shadow: var(--sys-elevation-level1);
 }

package/front_end/panels/elements/elementsTreeOutline.css

@@ -248,7 +248,7 @@ select {
 }
 /* DOM update highlight */
 @keyframes dom-update-highlight-animation {
-  from {
+  0% {
     background-color: var(--sys-color-token-tag);
     color: var(--sys-color-cdt-base-container);
   }
@@ -257,13 +257,13 @@ select {
     background-color: var(--sys-color-token-meta);
   }
 
-  to {
+  100% {
     background-color: inherit;
   }
 }
 
 @keyframes dom-update-highlight-animation-dark {
-  from {
+  0% {
     background-color: var(--sys-color-token-tag);
     color: var(--sys-color-cdt-base-container);
   }
@@ -273,7 +273,7 @@ select {
     color: inherit;
   }
 
-  to {
+  100% {
     background-color: inherit;
   }
 }
@@ -335,7 +335,7 @@ li.selected:not(.always-parent) + ol.children {
 }
 
 li.hovered:not(.always-parent) + ol.children:not(.shadow-root) {
-  --override-indentation-level-border-color: color-mix(in sRGB, var(--ref-palette-neutral0) 10%, transparent);
+  --override-indentation-level-border-color: color-mix(in srgb, var(--ref-palette-neutral0) 10%, transparent);
 }
 
 .elements-tree-outline ol.shadow-root {
@@ -366,6 +366,7 @@ li.hovered:not(.always-parent) + ol.children:not(.shadow-root) {
 }
 
 .violating-element {
+  /* stylelint-disable-next-line custom-property-pattern */
   background-image: var(--image-file-errorWave);
   background-repeat: repeat-x;
   background-position: bottom;

package/front_end/panels/elements/metricsSidebarPane.css

@@ -152,6 +152,6 @@ that region separators remain visible against the dark panel background. */
 /* With the exception of the position labels, labels are displayed on top of
 the box-model region colors, so need to use the following color to remain
 visible. */
-.metrics .highlighted:not(.position) > *:not(.border):not(.padding):not(.content) {
+.metrics .highlighted:not(.position) > *:not(.border, .padding, .content) {
   color: var(--override-box-model-text-color);
 }

package/front_end/panels/elements/stylePropertiesTreeOutline.css

@@ -276,6 +276,10 @@ devtools-css-length {
   display: inline-block;
 }
 
+devtools-css-length {
+  margin-left: 1px;
+}
+
 devtools-icon.open-in-animations-panel {
   position: relative;
   transform: scale(0.7);

package/front_end/panels/emulation/DeviceModeToolbar.ts

@@ -555,8 +555,7 @@ export class DeviceModeToolbar {
 
   private wrapToolbarItem(element: Element): UI.Toolbar.ToolbarItem {
     const container = document.createElement('div');
-    const shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(
-        container, {cssFile: deviceModeToolbarStyles, delegatesFocus: undefined});
+    const shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(container, {cssFile: deviceModeToolbarStyles});
     shadowRoot.appendChild(element);
     return new UI.Toolbar.ToolbarItem(container);
   }

package/front_end/panels/emulation/DeviceModeView.ts

@@ -123,43 +123,39 @@ export class DeviceModeView extends UI.Widget.VBox {
   private createUI(): void {
     this.toolbar = new DeviceModeToolbar(this.model, this.showMediaInspectorSetting, this.showRulersSetting);
     this.contentElement.appendChild(this.toolbar.element());
-    this.contentClip = (this.contentElement.createChild('div', 'device-mode-content-clip vbox') as HTMLElement);
-    this.responsivePresetsContainer =
-        (this.contentClip.createChild('div', 'device-mode-presets-container') as HTMLElement);
+    this.contentClip = this.contentElement.createChild('div', 'device-mode-content-clip vbox');
+    this.responsivePresetsContainer = this.contentClip.createChild('div', 'device-mode-presets-container');
     this.responsivePresetsContainer.setAttribute('jslog', `${VisualLogging.responsivePresets()}`);
     this.populatePresetsContainer();
-    this.mediaInspectorContainer = (this.contentClip.createChild('div', 'device-mode-media-container') as HTMLElement);
-    this.contentArea = (this.contentClip.createChild('div', 'device-mode-content-area') as HTMLElement);
-    this.outlineImage = (this.contentArea.createChild('img', 'device-mode-outline-image hidden fill') as HTMLElement);
+    this.mediaInspectorContainer = this.contentClip.createChild('div', 'device-mode-media-container');
+    this.contentArea = this.contentClip.createChild('div', 'device-mode-content-area');
+    this.outlineImage = this.contentArea.createChild('img', 'device-mode-outline-image hidden fill');
     this.outlineImage.addEventListener('load', this.onImageLoaded.bind(this, this.outlineImage, true), false);
     this.outlineImage.addEventListener('error', this.onImageLoaded.bind(this, this.outlineImage, false), false);
-    this.screenArea = (this.contentArea.createChild('div', 'device-mode-screen-area') as HTMLElement);
-    this.screenImage = (this.screenArea.createChild('img', 'device-mode-screen-image hidden') as HTMLElement);
+    this.screenArea = this.contentArea.createChild('div', 'device-mode-screen-area');
+    this.screenImage = this.screenArea.createChild('img', 'device-mode-screen-image hidden');
     this.screenImage.addEventListener('load', this.onImageLoaded.bind(this, this.screenImage, true), false);
     this.screenImage.addEventListener('error', this.onImageLoaded.bind(this, this.screenImage, false), false);
     this.bottomRightResizerElement =
-        (this.screenArea.createChild('div', 'device-mode-resizer device-mode-bottom-right-resizer') as HTMLElement);
+        this.screenArea.createChild('div', 'device-mode-resizer device-mode-bottom-right-resizer');
     this.bottomRightResizerElement.createChild('div', '');
     this.createResizer(this.bottomRightResizerElement, 2, 1);
     this.bottomLeftResizerElement =
-        (this.screenArea.createChild('div', 'device-mode-resizer device-mode-bottom-left-resizer') as HTMLElement);
+        this.screenArea.createChild('div', 'device-mode-resizer device-mode-bottom-left-resizer');
     this.bottomLeftResizerElement.createChild('div', '');
     this.createResizer(this.bottomLeftResizerElement, -2, 1);
-    this.rightResizerElement =
-        (this.screenArea.createChild('div', 'device-mode-resizer device-mode-right-resizer') as HTMLElement);
+    this.rightResizerElement = this.screenArea.createChild('div', 'device-mode-resizer device-mode-right-resizer');
     this.rightResizerElement.createChild('div', '');
     this.createResizer(this.rightResizerElement, 2, 0);
-    this.leftResizerElement =
-        (this.screenArea.createChild('div', 'device-mode-resizer device-mode-left-resizer') as HTMLElement);
+    this.leftResizerElement = this.screenArea.createChild('div', 'device-mode-resizer device-mode-left-resizer');
     this.leftResizerElement.createChild('div', '');
     this.createResizer(this.leftResizerElement, -2, 0);
-    this.bottomResizerElement =
-        (this.screenArea.createChild('div', 'device-mode-resizer device-mode-bottom-resizer') as HTMLElement);
+    this.bottomResizerElement = this.screenArea.createChild('div', 'device-mode-resizer device-mode-bottom-resizer');
     this.bottomResizerElement.createChild('div', '');
     this.createResizer(this.bottomResizerElement, 0, 1);
     this.bottomResizerElement.addEventListener('dblclick', this.model.setHeight.bind(this.model, 0), false);
     UI.Tooltip.Tooltip.install(this.bottomResizerElement, i18nString(UIStrings.doubleclickForFullHeight));
-    this.pageArea = (this.screenArea.createChild('div', 'device-mode-page-area') as HTMLElement);
+    this.pageArea = this.screenArea.createChild('div', 'device-mode-page-area');
     this.pageArea.createChild('slot');
   }
 
@@ -178,7 +174,7 @@ export class DeviceModeView extends UI.Widget.VBox {
     const inner = this.responsivePresetsContainer.createChild('div', 'device-mode-presets-container-inner');
     for (let i = sizes.length - 1; i >= 0; --i) {
       const outer = inner.createChild('div', 'fill device-mode-preset-bar-outer');
-      const block = (outer.createChild('div', 'device-mode-preset-bar') as HTMLElement);
+      const block = outer.createChild('div', 'device-mode-preset-bar');
       block.createChild('span').textContent = titles[i] + ' \u2013 ' + sizes[i] + 'px';
       block.setAttribute(
           'jslog', `${VisualLogging.action().track({click: true}).context(`device-mode-preset-${sizes[i]}px`)}`);
@@ -194,10 +190,11 @@ export class DeviceModeView extends UI.Widget.VBox {
     }
   }
 
-  private createResizer(element: Element, widthFactor: number, heightFactor: number): UI.ResizerWidget.ResizerWidget {
+  private createResizer(element: HTMLElement, widthFactor: number, heightFactor: number):
+      UI.ResizerWidget.ResizerWidget {
     const resizer = new UI.ResizerWidget.ResizerWidget();
     element.setAttribute('jslog', `${VisualLogging.slider('device-mode-resizer').track({drag: true})}`);
-    resizer.addElement((element as HTMLElement));
+    resizer.addElement(element);
     let cursor: 'nwse-resize'|'nesw-resize'|('ew-resize' | 'ns-resize') = widthFactor ? 'ew-resize' : 'ns-resize';
     if (widthFactor * heightFactor > 0) {
       cursor = 'nwse-resize';
@@ -598,7 +595,7 @@ export class Ruler extends UI.Widget.VBox {
     void this.throttler.schedule(this.update.bind(this));
   }
 
-  private update(): Promise<void> {
+  override update(): Promise<void> {
     const zoomFactor = UI.ZoomManager.ZoomManager.instance().zoomFactor();
     const size = this.horizontal ? this.contentElementInternal.offsetWidth : this.contentElementInternal.offsetHeight;
 

package/front_end/panels/emulation/DeviceModeWrapper.ts

@@ -2,7 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import type * as Common from '../../core/common/common.js';
+import * as Common from '../../core/common/common.js';
+import type * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
@@ -19,11 +20,13 @@ export class DeviceModeWrapper extends UI.Widget.VBox {
   private deviceModeView: DeviceModeView|null;
   private readonly toggleDeviceModeAction: UI.ActionRegistration.Action;
   private showDeviceModeSetting: Common.Settings.Setting<boolean>;
+  private enableOncePossible: boolean;
 
   private constructor(inspectedPagePlaceholder: InspectedPagePlaceholder) {
     super();
     this.inspectedPagePlaceholder = inspectedPagePlaceholder;
     this.deviceModeView = null;
+    this.enableOncePossible = false;
     this.toggleDeviceModeAction = UI.ActionRegistry.ActionRegistry.instance().getAction('emulation.toggle-device-mode');
     const model = EmulationModel.DeviceModeModel.DeviceModeModel.instance();
     this.showDeviceModeSetting = model.enabledSetting();
@@ -32,6 +35,8 @@ export class DeviceModeWrapper extends UI.Widget.VBox {
     SDK.TargetManager.TargetManager.instance().addModelListener(
         SDK.OverlayModel.OverlayModel, SDK.OverlayModel.Events.SCREENSHOT_REQUESTED,
         this.screenshotRequestedFromOverlay, this);
+    SDK.TargetManager.TargetManager.instance().addEventListener(
+        SDK.TargetManager.Events.INSPECTED_URL_CHANGED, this.inspectedUrlChanged, this);
     this.update(true);
   }
 
@@ -52,6 +57,26 @@ export class DeviceModeWrapper extends UI.Widget.VBox {
     return deviceModeWrapperInstance;
   }
 
+  inspectedUrlChanged(event: {data: SDK.Target.Target}): void {
+    const url = event.data.inspectedURL();
+    // Only allow device mode for non chrome:// pages.
+    const canEnable = url !== null && !Common.ParsedURL.schemeIs(url as Platform.DevToolsPath.UrlString, 'chrome:');
+    this.toggleDeviceModeAction.setEnabled(canEnable);
+    if (!canEnable && this.isDeviceModeOn()) {
+      // Device mode is enabled, but we navigated to a chrome:// page.
+      // Remember to enable device mode again when next possible.
+      this.toggleDeviceMode();
+      this.enableOncePossible = true;
+    }
+    if (canEnable && !this.isDeviceModeOn() && this.enableOncePossible) {
+      // Device mode is not enabled, could be enabled, and we have a reminder to enable.
+      this.toggleDeviceMode();
+      this.enableOncePossible = false;
+    }
+
+    this.update();
+  }
+
   toggleDeviceMode(): void {
     this.showDeviceModeSetting.set(!this.showDeviceModeSetting.get());
   }
@@ -80,7 +105,7 @@ export class DeviceModeWrapper extends UI.Widget.VBox {
     this.captureScreenshot(false, clip);
   }
 
-  private update(force: boolean): void {
+  override update(force?: boolean): void {
     this.toggleDeviceModeAction.setToggled(this.showDeviceModeSetting.get());
     if (!force) {
       const showing = this.deviceModeView && this.deviceModeView.isShowing();

package/front_end/panels/emulation/InspectedPagePlaceholder.ts

@@ -63,7 +63,7 @@ export class InspectedPagePlaceholder extends Common.ObjectWrapper.eventMixin<Ev
     return {x: left, y: top, width: right - left, height: bottom - top};
   }
 
-  update(force?: boolean): void {
+  override update(force?: boolean): void {
     delete this.updateId;
     const rect = this.dipPageRect();
     const bounds = {

package/front_end/panels/emulation/MediaQueryInspector.test.ts

@@ -35,7 +35,7 @@ describeWithMockConnection('MediaQueryInspector', () => {
     );
     inspector.markAsRoot();
     inspector.show(document.body);
-    assert.strictEqual(inspector.contentElement.querySelectorAll('.media-inspector-marker').length, 0);
+    assert.lengthOf(inspector.contentElement.querySelectorAll('.media-inspector-marker'), 0);
 
     const cssModel = target.model(SDK.CSSModel.CSSModel);
     assert.exists(cssModel);
@@ -50,6 +50,6 @@ describeWithMockConnection('MediaQueryInspector', () => {
         SDK.CSSModel.Events.StyleSheetAdded, {} as SDK.CSSStyleSheetHeader.CSSStyleSheetHeader);
     const [work] = await workScheduled;
     await work();
-    assert.strictEqual(inspector.contentElement.querySelectorAll('.media-inspector-marker').length, 1);
+    assert.lengthOf(inspector.contentElement.querySelectorAll('.media-inspector-marker'), 1);
   });
 });

package/front_end/panels/emulation/components/DeviceSizeInputElement.ts

@@ -61,7 +61,7 @@ export class SizeInputElement extends HTMLElement {
         // For now, use an inline style tag and later we can refactor this
         // to use proper constructed stylesheets, when the code runs
         // in the correct frame context.
-        // eslint-disable-next-line rulesdir/ban_style_tags_in_lit_html
+        // eslint-disable-next-line rulesdir/no-style-tags-in-lit-html
         html`
       <style>
         input {

package/front_end/panels/emulation/deviceModeView.css

@@ -188,34 +188,31 @@
 }
 
 .device-mode-bottom-right-resizer {
-  left: 0;
-  top: 0;
-  right: -20px;
-  bottom: -20px;
+  inset: 0 -20px -20px 0;
   background-color: var(--sys-color-surface1);
 }
 
 .device-mode-bottom-left-resizer {
-  left: -20px;
-  top: 0;
-  right: 0;
-  bottom: -20px;
+  inset: 0 0 -20px -20px;
   opacity: 0%;
 }
 
 .device-mode-right-resizer > div {
+  /* stylelint-disable-next-line custom-property-pattern */
   content: var(--image-file-resizeHorizontal);
   width: 6px;
   height: 26px;
 }
 
 .device-mode-left-resizer > div {
+  /* stylelint-disable-next-line custom-property-pattern */
   content: var(--image-file-resizeHorizontal);
   width: 6px;
   height: 26px;
 }
 
 .device-mode-bottom-resizer > div {
+  /* stylelint-disable-next-line custom-property-pattern */
   content: var(--image-file-resizeVertical);
   margin-bottom: -2px;
   width: 26px;
@@ -228,6 +225,7 @@
   right: 3px;
   width: 13px;
   height: 13px;
+  /* stylelint-disable-next-line custom-property-pattern */
   content: var(--image-file-resizeDiagonal);
 }
 
@@ -237,6 +235,7 @@
   left: 3px;
   width: 13px;
   height: 13px;
+  /* stylelint-disable-next-line custom-property-pattern */
   content: var(--image-file-resizeDiagonal);
   transform: rotate(90deg);
 }
@@ -301,18 +300,12 @@
 }
 
 .device-mode-ruler-top .device-mode-ruler-inner {
-  top: 0;
-  bottom: 0;
-  left: 20px;
-  right: 0;
+  inset: 0 0 0 20px;
   border-bottom: 1px solid var(--sys-color-token-subtle);
 }
 
 .device-mode-ruler-left .device-mode-ruler-inner {
-  left: 0;
-  right: 0;
-  top: 19px;
-  bottom: 0;
+  inset: 19px 0 0;
   border-right: 1px solid var(--sys-color-token-subtle);
   background-color: var(--sys-color-cdt-base-container);
 }

package/front_end/panels/emulation/mediaQueryInspector.css

@@ -21,10 +21,7 @@
   align-items: stretch;
   pointer-events: none;
   position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
+  inset: 0;
 }
 
 .media-inspector-marker {
@@ -52,7 +49,7 @@
   border-left: 2px solid var(--sys-color-yellow-bright);
 
   &:hover {
-    background-color: color-mix(in sRGB, var(--sys-color-yellow-container), var(--sys-color-yellow-bright) 30%);
+    background-color: color-mix(in srgb, var(--sys-color-yellow-container), var(--sys-color-yellow-bright) 30%);
   }
 }
 
@@ -87,7 +84,7 @@
 }
 
 .media-inspector-marker-inactive .media-inspector-marker-min-max-width:not(:hover) {
-  background-color: color-mix(in sRGB, var(--sys-color-tertiary-container), var(--sys-color-cdt-base-container) 30%);
+  background-color: color-mix(in srgb, var(--sys-color-tertiary-container), var(--sys-color-cdt-base-container) 30%);
 }
 
 .media-inspector-marker-inactive .media-inspector-marker-max-width:not(:hover) {

package/front_end/panels/event_listeners/EventListenersView.ts

@@ -8,7 +8,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
-/* eslint-disable rulesdir/es_modules_import */
+/* eslint-disable rulesdir/es-modules-import */
 import objectValueStyles from '../../ui/legacy/components/object_ui/objectValue.css.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';