chrome-devtools-frontend 1.0.1652307 → 1.0.1656291

package/front_end/panels/common/ThrottlingUtils.ts

@@ -5,8 +5,14 @@
 import * as SDK from '../../core/sdk/sdk.js';
 import * as CrUXManager from '../../models/crux-manager/crux-manager.js';
 
+import {
+  CalibratedMidTierMobileThrottlingOption,
+  type CPUThrottlingOption,
+  MidTierThrottlingOption,
+} from './CPUThrottlingOption.js';
+
 export interface ThrottlingRecommendations {
-  cpuOption: SDK.CPUThrottlingManager.CPUThrottlingOption|null;
+  cpuOption: CPUThrottlingOption|null;
   networkConditions: SDK.NetworkManager.Conditions|null;
 }
 
@@ -18,10 +24,9 @@ export function getThrottlingRecommendations(): ThrottlingRecommendations {
   const cruxManager = CrUXManager.CrUXManager.instance();
   const roundTripTimeMetricData = cruxManager.getSelectedFieldMetricData('round_trip_time');
 
-  let cpuOption: SDK.CPUThrottlingManager.CPUThrottlingOption =
-      SDK.CPUThrottlingManager.CalibratedMidTierMobileThrottlingOption;
+  let cpuOption: CPUThrottlingOption = CalibratedMidTierMobileThrottlingOption;
   if (cpuOption.rate() === 0) {
-    cpuOption = SDK.CPUThrottlingManager.MidTierThrottlingOption;
+    cpuOption = MidTierThrottlingOption;
   }
 
   const networkConditions = getRecommendedNetworkConditions(roundTripTimeMetricData);

package/front_end/panels/common/common.ts

@@ -97,13 +97,13 @@ export class TypeToAllowDialog {
 export {AiCodeCompletionTeaser} from './AiCodeCompletionTeaser.js';
 export * as AiCodeGenerationTeaser from './AiCodeGenerationTeaser.js';
 export {AiCodeGenerationUpgradeDialog} from './AiCodeGenerationUpgradeDialog.js';
-export {AnnotationManager} from './AnnotationManager.js';
 export {FreDialog} from './FreDialog.js';
 export {GdpSignUpDialog} from './GdpSignUpDialog.js';
 export {GeminiRebrandPromoDialog} from './GeminiRebrandPromoDialog.js';
 export {AiCodeCompletionDisclaimer} from './AiCodeCompletionDisclaimer.js';
 export * as AiCodeCompletionSummaryToolbar from './AiCodeCompletionSummaryToolbar.js';
 export * from './BadgeNotification.js';
+export * as CPUThrottlingOption from './CPUThrottlingOption.js';
 export * as ExtensionPanel from './ExtensionPanel.js';
 export * as ExtensionServer from './ExtensionServer.js';
 export * as ExtensionView from './ExtensionView.js';

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -225,6 +225,18 @@ const UIStrings = {
    * @description Element title in Object Properties Section
    */
   invokePropertyGetter: 'Invoke property getter',
+  /**
+   * @description Context menu item to copy table data
+   */
+  copyTableAs: 'Copy table as',
+  /**
+   * @description Submenu item to copy table as Markdown
+   */
+  copyAsMarkdown: 'Copy as Markdown',
+  /**
+   * @description Submenu item to copy table as CSV
+   */
+  copyAsCsv: 'Copy as CSV',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/console/ConsoleViewMessage.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -2180,6 +2192,7 @@ export class ConsoleTableMessageView extends ConsoleViewMessage {
       if (this.dataGrid) {
         this.dataGrid.setStriped(true);
         this.dataGrid.setFocusable(false);
+        this.dataGrid.setTableContextMenuCallback(this.populateTableContextMenu.bind(this));
 
         const formattedResult = document.createElement('span');
         formattedResult.classList.add('console-message-text');
@@ -2205,6 +2218,38 @@ export class ConsoleTableMessageView extends ConsoleViewMessage {
     }
     return defaultConsoleRowHeight;
   }
+
+  private populateTableContextMenu(contextMenu: UI.ContextMenu.ContextMenu): void {
+    const copySubMenu = contextMenu.clipboardSection().appendSubMenuItem(i18nString(UIStrings.copyTableAs));
+    copySubMenu.defaultSection().appendItem(i18nString(UIStrings.copyAsMarkdown), this.copyTableAsMarkdown.bind(this),
+                                            {jslogContext: 'copy-as-markdown'});
+    copySubMenu.defaultSection().appendItem(i18nString(UIStrings.copyAsCsv), this.copyTableAsCSV.bind(this),
+                                            {jslogContext: 'copy-as-csv'});
+  }
+
+  private copyTableAsMarkdown(): void {
+    if (!this.dataGrid) {
+      return;
+    }
+    const markdown = DataGrid.DataGridExporter.exportToMarkdown(this.dataGrid);
+    UI.UIUtils.copyTextToClipboard(markdown);
+  }
+
+  private copyTableAsCSV(): void {
+    if (!this.dataGrid) {
+      return;
+    }
+    const csv = DataGrid.DataGridExporter.exportToCSV(this.dataGrid);
+    UI.UIUtils.copyTextToClipboard(csv);
+  }
+
+  getDataGridForTest(): DataGrid.SortableDataGrid.SortableDataGrid<unknown>|null {
+    return this.dataGrid;
+  }
+
+  populateTableContextMenuForTest(contextMenu: UI.ContextMenu.ContextMenu): void {
+    this.populateTableContextMenu(contextMenu);
+  }
 }
 
 /**

package/front_end/panels/elements/AccessibilityTreeUtils.ts

@@ -18,8 +18,10 @@ function isLeafNode(node: SDK.AccessibilityModel.AccessibilityNode): boolean {
   return node.numChildren() === 0 && node.role()?.value !== 'Iframe';
 }
 
-function getModel(frameId: Protocol.Page.FrameId): SDK.AccessibilityModel.AccessibilityModel {
-  const frame = SDK.FrameManager.FrameManager.instance().getFrame(frameId);
+function getModel(frameId: Protocol.Page.FrameId,
+                  frameManager: SDK.FrameManager.FrameManager =
+                      SDK.FrameManager.FrameManager.instance()): SDK.AccessibilityModel.AccessibilityModel {
+  const frame = frameManager.getFrame(frameId);
   const model = frame?.resourceTreeModel().target().model(SDK.AccessibilityModel.AccessibilityModel);
   if (!model) {
     throw new Error('Could not instantiate model for frameId');
@@ -27,8 +29,11 @@ function getModel(frameId: Protocol.Page.FrameId): SDK.AccessibilityModel.Access
   return model;
 }
 
-export async function getRootNode(frameId: Protocol.Page.FrameId): Promise<SDK.AccessibilityModel.AccessibilityNode> {
-  const model = getModel(frameId);
+export async function getRootNode(
+    frameId: Protocol.Page.FrameId,
+    frameManager: SDK.FrameManager.FrameManager =
+        SDK.FrameManager.FrameManager.instance()): Promise<SDK.AccessibilityModel.AccessibilityNode> {
+  const model = getModel(frameId, frameManager);
   const root = await model.requestRootNode(frameId);
   if (!root) {
     throw new Error('No accessibility root for frame');
@@ -49,33 +54,36 @@ function getFrameIdForNodeOrDocument(node: SDK.DOMModel.DOMNode): Protocol.Page.
   return frameId;
 }
 
-export async function getNodeAndAncestorsFromDOMNode(domNode: SDK.DOMModel.DOMNode):
-    Promise<SDK.AccessibilityModel.AccessibilityNode[]> {
+export async function getNodeAndAncestorsFromDOMNode(
+    domNode: SDK.DOMModel.DOMNode,
+    frameManager: SDK.FrameManager.FrameManager =
+        SDK.FrameManager.FrameManager.instance()): Promise<SDK.AccessibilityModel.AccessibilityNode[]> {
   let frameId = getFrameIdForNodeOrDocument(domNode);
-  const model = getModel(frameId);
+  const model = getModel(frameId, frameManager);
   const result = await model.requestAndLoadSubTreeToNode(domNode);
   if (!result) {
     throw new Error('Could not retrieve accessibility node for inspected DOM node');
   }
 
-  const outermostFrameId = SDK.FrameManager.FrameManager.instance().getOutermostFrame()?.id;
+  const outermostFrameId = frameManager.getOutermostFrame()?.id;
   if (!outermostFrameId) {
     return result;
   }
   while (frameId !== outermostFrameId) {
-    const node = await SDK.FrameManager.FrameManager.instance().getFrame(frameId)?.getOwnerDOMNodeOrDocument();
+    const node = await frameManager.getFrame(frameId)?.getOwnerDOMNodeOrDocument();
     if (!node) {
       break;
     }
     frameId = getFrameIdForNodeOrDocument(node);
-    const model = getModel(frameId);
+    const model = getModel(frameId, frameManager);
     const ancestors = await model.requestAndLoadSubTreeToNode(node);
     result.push(...ancestors || []);
   }
   return result;
 }
 
-async function getChildren(node: SDK.AccessibilityModel.AccessibilityNode):
+async function getChildren(node: SDK.AccessibilityModel.AccessibilityNode,
+                           frameManager: SDK.FrameManager.FrameManager = SDK.FrameManager.FrameManager.instance()):
     Promise<SDK.AccessibilityModel.AccessibilityNode[]> {
   if (node.role()?.value === 'Iframe') {
     const domNode = await node.deferredDOMNode()?.resolvePromise();
@@ -86,13 +94,15 @@ async function getChildren(node: SDK.AccessibilityModel.AccessibilityNode):
     if (!frameId) {
       throw new Error('No owner frameId on iframe node');
     }
-    const localRoot = await getRootNode(frameId);
+    const localRoot = await getRootNode(frameId, frameManager);
     return [localRoot];
   }
   return await node.accessibilityModel().requestAXChildren(node.id(), node.getFrameId() || undefined);
 }
 
-export async function sdkNodeToAXTreeNodes(sdkNode: SDK.AccessibilityModel.AccessibilityNode): Promise<AXTreeNode[]> {
+export async function sdkNodeToAXTreeNodes(
+    sdkNode: SDK.AccessibilityModel.AccessibilityNode,
+    frameManager: SDK.FrameManager.FrameManager = SDK.FrameManager.FrameManager.instance()): Promise<AXTreeNode[]> {
   const treeNodeData = sdkNode;
   if (isLeafNode(sdkNode)) {
     return [{
@@ -104,8 +114,9 @@ export async function sdkNodeToAXTreeNodes(sdkNode: SDK.AccessibilityModel.Acces
   return [{
     treeNodeData,
     children: async () => {
-      const childNodes = await getChildren(sdkNode);
-      const childTreeNodes = await Promise.all(childNodes.map(childNode => sdkNodeToAXTreeNodes(childNode)));
+      const childNodes = await getChildren(sdkNode, frameManager);
+      const childTreeNodes =
+          await Promise.all(childNodes.map(childNode => sdkNodeToAXTreeNodes(childNode, frameManager)));
       return childTreeNodes.flat(1);
     },
     id: getNodeId(sdkNode),

package/front_end/panels/elements/AccessibilityTreeView.ts

@@ -19,11 +19,14 @@ export class AccessibilityTreeView extends UI.Widget.VBox implements
   private inspectedDOMNode: SDK.DOMModel.DOMNode|null = null;
   private root: SDK.AccessibilityModel.AccessibilityNode|null = null;
 
-  constructor(
-      accessibilityTreeComponent: TreeOutline.TreeOutline.TreeOutline<AccessibilityTreeUtils.AXTreeNodeData>) {
+  readonly #frameManager: SDK.FrameManager.FrameManager;
+
+  constructor(accessibilityTreeComponent: TreeOutline.TreeOutline.TreeOutline<AccessibilityTreeUtils.AXTreeNodeData>,
+              frameManager: SDK.FrameManager.FrameManager = SDK.FrameManager.FrameManager.instance()) {
     super();
     this.registerRequiredCSS(accessibilityTreeViewStyles);
     this.accessibilityTreeComponent = accessibilityTreeComponent;
+    this.#frameManager = frameManager;
 
     const container = this.contentElement.createChild('div');
 
@@ -75,11 +78,11 @@ export class AccessibilityTreeView extends UI.Widget.VBox implements
 
   async refreshAccessibilityTree(): Promise<void> {
     if (!this.root) {
-      const frameId = SDK.FrameManager.FrameManager.instance().getOutermostFrame()?.id;
+      const frameId = this.#frameManager.getOutermostFrame()?.id;
       if (!frameId) {
         throw new Error('No top frame');
       }
-      this.root = await AccessibilityTreeUtils.getRootNode(frameId);
+      this.root = await AccessibilityTreeUtils.getRootNode(frameId, this.#frameManager);
       if (!this.root) {
         throw new Error('No root');
       }
@@ -90,15 +93,15 @@ export class AccessibilityTreeView extends UI.Widget.VBox implements
 
   async renderTree(): Promise<void> {
     if (!this.root) {
-      const frameId = SDK.FrameManager.FrameManager.instance().getOutermostFrame()?.id;
+      const frameId = this.#frameManager.getOutermostFrame()?.id;
       if (frameId) {
-        this.root = await AccessibilityTreeUtils.getRootNode(frameId);
+        this.root = await AccessibilityTreeUtils.getRootNode(frameId, this.#frameManager);
       }
     }
     if (!this.root) {
       return;
     }
-    const treeData = await AccessibilityTreeUtils.sdkNodeToAXTreeNodes(this.root);
+    const treeData = await AccessibilityTreeUtils.sdkNodeToAXTreeNodes(this.root, this.#frameManager);
     this.accessibilityTreeComponent.data = {
       defaultRenderer: AccessibilityTreeUtils.accessibilityNodeRenderer,
       tree: treeData,
@@ -113,7 +116,7 @@ export class AccessibilityTreeView extends UI.Widget.VBox implements
   // Given a selected DOM node, asks the model to load the missing subtree from the root to the
   // selected node and then re-renders the tree.
   async loadSubTreeIntoAccessibilityModel(selectedNode: SDK.DOMModel.DOMNode): Promise<void> {
-    const ancestors = await AccessibilityTreeUtils.getNodeAndAncestorsFromDOMNode(selectedNode);
+    const ancestors = await AccessibilityTreeUtils.getNodeAndAncestorsFromDOMNode(selectedNode, this.#frameManager);
     const inspectedAXNode = ancestors.find(node => node.backendDOMNodeId() === selectedNode.backendNodeId());
     if (!inspectedAXNode) {
       return;
@@ -160,7 +163,7 @@ export class AccessibilityTreeView extends UI.Widget.VBox implements
       void this.renderTree();
       return;
     }
-    const outermostFrameId = SDK.FrameManager.FrameManager.instance().getOutermostFrame()?.id;
+    const outermostFrameId = this.#frameManager.getOutermostFrame()?.id;
     if (data.root?.getFrameId() !== outermostFrameId) {
       void this.renderTree();
       return;

package/front_end/panels/elements/ElementsPanel.ts

@@ -40,7 +40,6 @@ import * 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';
-import * as Annotations from '../../models/annotations/annotations.js';
 import * as ComputedStyle from '../../models/computed_style/computed_style.js';
 import * as PanelCommon from '../../panels/common/common.js';
 import type * as Adorners from '../../ui/components/adorners/adorners.js';
@@ -307,8 +306,6 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     this.#domTreeWidget.onSelectedNodeChanged = this.selectedNodeChanged.bind(this);
     this.#domTreeWidget.onElementsTreeUpdated = this.updateBreadcrumbIfNeeded.bind(this);
     this.#domTreeWidget.onDocumentUpdated = this.documentUpdated.bind(this);
-    this.#domTreeWidget.onElementExpanded = this.handleElementExpanded.bind(this);
-    this.#domTreeWidget.onElementCollapsed = this.handleElementCollapsed.bind(this);
     this.#domTreeWidget.setWordWrap(Common.Settings.Settings.instance().moduleSetting('dom-word-wrap').get());
 
     SDK.TargetManager.TargetManager.instance().observeModels(SDK.DOMModel.DOMModel, this, {scoped: true});
@@ -319,11 +316,6 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
         .addChangeListener(this.showUAShadowDOMChanged.bind(this));
     PanelCommon.ExtensionServer.ExtensionServer.instance().addEventListener(
         PanelCommon.ExtensionServer.Events.SidebarPaneAdded, this.extensionSidebarPaneAdded, this);
-
-    if (Annotations.AnnotationRepository.annotationsEnabled()) {
-      PanelCommon.AnnotationManager.instance().initializePlacementForAnnotationType(
-          Annotations.AnnotationType.ELEMENT_NODE, this.resolveInitialState.bind(this), this.#domTreeWidget.element);
-    }
   }
 
   // This is a debounced method because the user might be navigated from Styles tab to Computed Style tab and vice versa.
@@ -353,18 +345,6 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     }
   }
 
-  private handleElementExpanded(): void {
-    if (Annotations.AnnotationRepository.annotationsEnabled()) {
-      void PanelCommon.AnnotationManager.instance().resolveAnnotationsOfType(Annotations.AnnotationType.ELEMENT_NODE);
-    }
-  }
-
-  private handleElementCollapsed(): void {
-    if (Annotations.AnnotationRepository.annotationsEnabled()) {
-      void PanelCommon.AnnotationManager.instance().resolveAnnotationsOfType(Annotations.AnnotationType.ELEMENT_NODE);
-    }
-  }
-
   private showAccessibilityTree(): void {
     if (this.accessibilityTreeView) {
       this.splitWidget.setMainWidget(this.accessibilityTreeView);
@@ -511,10 +491,6 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     UI.Context.Context.instance().setFlavor(ElementsPanel, this);
     this.#domTreeWidget.show(this.domTreeContainer);
     this.evaluateTrackingComputedStyleUpdatesForNode();
-
-    if (Annotations.AnnotationRepository.annotationsEnabled()) {
-      void PanelCommon.AnnotationManager.instance().resolveAnnotationsOfType(Annotations.AnnotationType.ELEMENT_NODE);
-    }
   }
 
   override willHide(): void {
@@ -1321,56 +1297,6 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     this.#domTreeWidget.copyStyles(node);
   }
 
-  async resolveInitialState(
-      parentElement: Element, reveal: boolean, lookupId: string,
-      anchor?: SDK.DOMModel.DOMNode|SDK.NetworkRequest.NetworkRequest): Promise<{x: number, y: number}|null> {
-    if (!this.isShowing()) {
-      return null;
-    }
-
-    if (!anchor) {
-      const backendNodeId = Number(lookupId) as Protocol.DOM.BackendNodeId;
-      if (isNaN(backendNodeId)) {
-        return null;
-      }
-      const rootDOMNode = this.#domTreeWidget.rootDOMNode;
-      if (!rootDOMNode) {
-        return null;
-      }
-      const domModel = rootDOMNode.domModel();
-      const nodes = await domModel.pushNodesByBackendIdsToFrontend(new Set([backendNodeId]));
-      if (!nodes) {
-        return null;
-      }
-      const foundNode = nodes.get(backendNodeId);
-      if (!foundNode) {
-        return null;
-      }
-      anchor = foundNode;
-    }
-
-    const element = this.#domTreeWidget.treeElementForNode(anchor as SDK.DOMModel.DOMNode);
-    if (!element) {
-      return null;
-    }
-
-    if (reveal) {
-      // The node must have been revealed in order to calculate its position.
-      await Common.Revealer.reveal(anchor);
-    }
-
-    // The tree element element starts at the top-left of the expand/collapse arrow). We
-    // want to aim for the tagname instead.
-    const offsetToTagName = 22;
-    const yPadding = 5;
-
-    const targetRect = element.listItemElement.getBoundingClientRect();
-    const parentRect = parentElement.getBoundingClientRect();
-    const relativeX = targetRect.x - parentRect.x + offsetToTagName;
-    const relativeY = targetRect.y - parentRect.y + yPadding;
-    return {x: relativeX, y: relativeY};
-  }
-
   protected static firstInspectElementCompletedForTest = function(): void {};
   protected static firstInspectElementNodeNameForTest = '';
 }

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -235,8 +235,6 @@ export class DOMTreeWidget extends UI.Widget.Widget {
            Common.EventTarget.EventTargetEvent<{node: SDK.DOMModel.DOMNode | null, focus: boolean}>) => void = () => {};
   onElementsTreeUpdated: (event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode[]>) => void = () => {};
   onDocumentUpdated: (domModel: SDK.DOMModel.DOMModel) => void = () => {};
-  onElementExpanded: () => void = () => {};
-  onElementCollapsed: () => void = () => {};
 
   #maxTreeDepth?: number;
   #enableContextMenu = true;
@@ -455,11 +453,9 @@ export class DOMTreeWidget extends UI.Widget.Widget {
           },
           onElementCollapsed: () => {
             this.#clearHighlightedNode();
-            this.onElementCollapsed();
           },
           onElementExpanded: () => {
             this.#clearHighlightedNode();
-            this.onElementExpanded();
           },
         },
         this.#viewOutput, this.contentElement);
@@ -2136,6 +2132,11 @@ export class ElementsTreeOutline extends
       visibleChildren.push(pickerIconPseudoElement);
     }
 
+    const interestButtonPseudoElement = node.interestButtonPseudoElement();
+    if (interestButtonPseudoElement) {
+      visibleChildren.push(interestButtonPseudoElement);
+    }
+
     const backdropPseudoElement = node.backdropPseudoElement();
     if (backdropPseudoElement) {
       visibleChildren.push(backdropPseudoElement);

package/front_end/panels/emulation/DeviceModeToolbar.ts

@@ -108,16 +108,9 @@ const UIStrings = {
   moreOptions: 'More options',
   /**
    * @description A menu item in the drop-down box that allows the user to select the zoom level.
-   * Labels the value which corresponds to the 'fit to window' zoom level, represented by the
-   * placeholder, which is a number. In the Device Mode Toolbar.
-   * @example {30.0} PH1
-   */
-  fitToWindowPercentage: '{PH1}% (fit to window)',
-  /**
-   * @description A checkbox setting that appears in the context menu for the zoom level, in the
-   * Device Mode Toolbar.
+   * Labels the option to automatically fit the preview to the available window space. In the Device Mode Toolbar.
    */
-  autoadjustZoom: 'Auto-adjust zoom',
+  fitToWindow: 'Fit to window',
   /**
    * @description A menu item in the drop-down box that allows the user to select the device pixel
    * ratio. Labels the default value which varies between device types, represented by the
@@ -236,7 +229,6 @@ const str_ = i18n.i18n.registerUIStrings('panels/emulation/DeviceModeToolbar.ts'
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const {ifDefined, live} = Directives;
 const {widget} = UI.Widget;
-const {bindToSetting} = UI.UIUtils;
 
 export interface DeviceModeOption {
   device: EmulationModel.EmulatedDevices.EmulatedDevice;
@@ -359,17 +351,11 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
               title=${i18nString(UIStrings.zoom)}
               aria-label=${i18nString(UIStrings.zoom)}
               @change=${input.onScaleChange}
-              .value=${String(input.scaleOptions.find(o => o.selected)?.value || '')}
+              .value=${String(input.scaleOptions.find(o => o.selected)?.value ?? '')}
               jslog=${VisualLogging.dropDown().track({change: true}).context('scale')}>
         ${input.scaleOptions.map(o => html`<option value=${o.value} ?selected=${o.selected} jslog=${VisualLogging.item(o.jslogContext).track({click: true})}>${o.title}</option>`)}
       </select>
 
-      <devtools-button .data=${{variant: Buttons.Button.Variant.TOOLBAR, iconName: 'center-focus-weak',
-                                toggledIconName: 'center-focus-weak', toggleType: Buttons.Button.ToggleType.PRIMARY} as Buttons.Button.ButtonData}
-                       class="toolbar-button" title=${i18nString(UIStrings.autoadjustZoom)}
-                       ${bindToSetting(input.autoAdjustScaleSetting)}>
-      </devtools-button>
-
       <div class="device-mode-empty-toolbar-element"></div>
 
       ${input.showDeviceScaleFactorSetting.get() ? html`
@@ -381,7 +367,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
                     title=${i18nString(UIStrings.devicePixelRatio)}
                     aria-label=${i18nString(UIStrings.devicePixelRatio)}
                     @change=${input.onDeviceScaleChange}
-                    .value=${String(input.dprOptions.find(o => o.selected)?.value || '')}
+                    .value=${String(input.dprOptions.find(o => o.selected)?.value ?? '')}
                     jslog=${VisualLogging.dropDown().track({change: true}).context('device-pixel-ratio')}
                     ?disabled=${!input.isResponsive}>
                 ${input.dprOptions.map(o => html`<option value=${o.value} ?selected=${o.selected} jslog=${VisualLogging.item(o.jslogContext).track({click: true})}>${o.title}</option>`)}
@@ -488,6 +474,7 @@ export class DeviceModeToolbar extends UI.Widget.Widget {
 
     this.autoAdjustScaleSetting =
         Common.Settings.Settings.instance().createSetting('emulation.auto-adjust-scale', true);
+    this.autoAdjustScaleSetting.addChangeListener(this.requestUpdate, this);
 
     this.lastMode = new Map();
 
@@ -665,39 +652,53 @@ export class DeviceModeToolbar extends UI.Widget.Widget {
 
   private getScaleOptions(): Array<{title: string, value: number, selected: boolean, jslogContext: string}> {
     const values = [0.5, 0.75, 1, 1.25, 1.5, 2];
-    let fitValue: number|null = null;
-    if (this.model.type() === EmulationModel.DeviceModeModel.Type.Device) {
-      fitValue = this.model.fitScale();
-      const fitValuePct = (fitValue * 100).toFixed(0);
-      let found = false;
-      for (let i = 0; i < values.length; ++i) {
-        if ((values[i] * 100).toFixed(0) === fitValuePct) {
-          found = true;
-          values[i] = fitValue;
-          break;
-        }
-      }
-      if (!found) {
-        values.push(fitValue);
-        values.sort((a, b) => a - b);
-      }
+    const isAutoAdjusting = this.autoAdjustScaleSetting.get();
+    const currentScale = this.model.scaleSetting().get();
+
+    if (!isAutoAdjusting && !values.includes(currentScale)) {
+      values.push(currentScale);
+      values.sort((a, b) => a - b);
     }
 
-    const currentScale = this.model.scaleSetting().get();
-    return values.map(value => {
-      let title = (value * 100).toFixed(0) + '%';
-      let jslogContext = title;
-      if (value === fitValue) {
-        title = i18nString(UIStrings.fitToWindowPercentage, {PH1: (value * 100).toFixed(0)});
-        jslogContext = 'fit-to-window';
-      }
-      return {title, value, selected: currentScale === value, jslogContext};
-    });
+    const options: Array<{title: string, value: number, selected: boolean, jslogContext: string}> = [
+      {
+        title: i18nString(UIStrings.fitToWindow),
+        value: 0,
+        selected: isAutoAdjusting,
+        jslogContext: 'fit-to-window',
+      },
+    ];
+
+    for (const value of values) {
+      const title = (value * 100).toFixed(0) + '%';
+      options.push({
+        title,
+        value,
+        selected: !isAutoAdjusting && currentScale === value,
+        jslogContext: title,
+      });
+    }
+    return options;
   }
 
   private onScaleChange(event: Event): void {
     const value = Number((event.target as HTMLSelectElement).value);
-    this.model.scaleSetting().set(value);
+    if (value === 0) {
+      this.autoAdjustScaleSetting.set(true);
+      if (this.model.type() === EmulationModel.DeviceModeModel.Type.Responsive) {
+        const appliedSize = this.model.appliedDeviceSize();
+        this.model.setSizeAndScaleToFit(appliedSize.width, appliedSize.height);
+      } else {
+        const device = this.model.device();
+        const mode = this.model.mode();
+        if (device && mode) {
+          this.model.emulate(EmulationModel.DeviceModeModel.Type.Device, device, mode, undefined);
+        }
+      }
+    } else {
+      this.autoAdjustScaleSetting.set(false);
+      this.model.scaleSetting().set(value);
+    }
   }
 
   private getDeviceScaleFactorOptions():