chrome-devtools-frontend 1.0.1654411 → 1.0.1656291

package/front_end/panels/application/ServiceWorkersView.ts

@@ -220,6 +220,15 @@ export class ServiceWorkersView extends UI.Widget.VBox implements
 
     this.sectionToRegistration = new WeakMap();
 
+    this.createOthersOriginView();
+    this.setupToolbar();
+
+    this.eventListeners = new Map();
+    SDK.TargetManager.TargetManager.instance().observeModels(SDK.ServiceWorkerManager.ServiceWorkerManager, this);
+    this.updateListVisibility();
+  }
+
+  private createOthersOriginView(): void {
     const othersDiv = this.contentElement.createChild('div', 'service-workers-other-origin');
     othersDiv.setAttribute('jslog', `${VisualLogging.section('other-origin')}`);
     // TODO(crbug.com/1156978): Replace UI.ReportView.ReportView with ReportView.ts web component.
@@ -231,7 +240,9 @@ export class ServiceWorkersView extends UI.Widget.VBox implements
     const seeOthers = Link.create('chrome://serviceworker-internals', i18nString(UIStrings.seeAllRegistrations),
                                   undefined, 'view-all', 0, /* allowPrivileged=*/ true);
     othersSectionRow.appendChild(seeOthers);
+  }
 
+  private setupToolbar(): void {
     this.toolbar.appendToolbarItem(
         MobileThrottling.ThrottlingManager.throttlingManager().createOfflineToolbarCheckbox());
     const updateOnReloadSetting =
@@ -246,10 +257,6 @@ export class ServiceWorkersView extends UI.Widget.VBox implements
     const fallbackToNetwork = new UI.Toolbar.ToolbarSettingCheckbox(
         bypassServiceWorkerSetting, i18nString(UIStrings.bypassTheServiceWorkerAndLoad));
     this.toolbar.appendToolbarItem(fallbackToNetwork);
-
-    this.eventListeners = new Map();
-    SDK.TargetManager.TargetManager.instance().observeModels(SDK.ServiceWorkerManager.ServiceWorkerManager, this);
-    this.updateListVisibility();
   }
 
   modelAdded(serviceWorkerManager: SDK.ServiceWorkerManager.ServiceWorkerManager): void {
@@ -453,13 +460,13 @@ export class Section {
   private readonly networkRequests: Buttons.Button.Button;
   private readonly updateButton: Buttons.Button.Button;
   private readonly deleteButton: Buttons.Button.Button;
-  private sourceField: Element;
-  private readonly statusField: Element;
-  private readonly clientsField: Element;
+  private sourceField: HTMLElement;
+  private readonly statusField: HTMLElement;
+  private readonly clientsField: HTMLElement;
   private readonly clientInfoCache: Map<string, Protocol.Target.TargetInfo>;
   private readonly throttler: Common.Throttler.Throttler;
-  private updateCycleField?: Element;
-  private routerField?: Element;
+  private updateCycleField?: HTMLElement;
+  private routerField?: HTMLElement;
 
   constructor(
       manager: SDK.ServiceWorkerManager.ServiceWorkerManager, section: UI.ReportView.Section,
@@ -542,10 +549,10 @@ export class Section {
 
   scheduleUpdate(): void {
     if (throttleDisabledForDebugging) {
-      void this.update();
+      void this.performUpdate();
       return;
     }
-    void this.throttler.schedule(this.update.bind(this));
+    void this.throttler.schedule(this.performUpdate.bind(this));
   }
 
   private addVersion(versionsStack: Element, icon: string, label: string): Element {
@@ -561,7 +568,7 @@ export class Section {
     this.clientsField.removeChildren();
     this.section.setFieldVisible(i18nString(UIStrings.clients), Boolean(version.controlledClients.length));
     for (const client of version.controlledClients) {
-      const clientLabelText = this.clientsField.createChild('div', 'service-worker-client');
+      const clientLabelText = this.clientsField.createChild('div', 'service-worker-client') as HTMLElement;
       const info = this.clientInfoCache.get(client);
       if (info) {
         this.updateClientInfo(clientLabelText, info);
@@ -601,7 +608,7 @@ export class Section {
     }
   }
 
-  private update(): Promise<void> {
+  private performUpdate(): Promise<void> {
     const fingerprint = this.registration.fingerprint();
     if (fingerprint === this.fingerprint) {
       return Promise.resolve();
@@ -740,7 +747,7 @@ export class Section {
     void this.manager.dispatchPeriodicSyncEvent(this.registration.id, tag);
   }
 
-  private onClientInfo(element: Element, targetInfoResponse: Protocol.Target.GetTargetInfoResponse): void {
+  private onClientInfo(element: HTMLElement, targetInfoResponse: Protocol.Target.GetTargetInfoResponse): void {
     const targetInfo = targetInfoResponse.targetInfo;
     if (!targetInfo) {
       return;
@@ -749,7 +756,7 @@ export class Section {
     this.updateClientInfo(element, targetInfo);
   }
 
-  private updateClientInfo(element: Element, targetInfo: Protocol.Target.TargetInfo): void {
+  private updateClientInfo(element: HTMLElement, targetInfo: Protocol.Target.TargetInfo): void {
     if (targetInfo.type !== 'page' && targetInfo.type === 'iframe') {
       const clientString = element.createChild('span', 'service-worker-client-string');
       UI.UIUtils.createTextChild(clientString, i18nString(UIStrings.workerS, {PH1: targetInfo.url}));
@@ -788,7 +795,7 @@ export class Section {
     void this.manager.stopWorker(versionId);
   }
 
-  private wrapWidget(container: Element): Element {
+  private wrapWidget(container: Element): HTMLElement {
     const shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(container, {
       cssFile: [
         serviceWorkersViewStyles,

package/front_end/panels/common/CPUThrottlingOption.ts

@@ -0,0 +1,142 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Common from '../../core/common/common.js';
+import * as i18n from '../../core/i18n/i18n.js';
+
+const UIStrings = {
+  /**
+   * @description Text label for a menu item indicating that no throttling is applied.
+   */
+  noThrottling: 'No throttling',
+  /**
+   * @description Text label for a menu item indicating that a specific slowdown multiplier is applied.
+   * @example {2} PH1
+   */
+  dSlowdown: '{PH1}× slowdown',
+  /**
+   * @description Text label for a menu item indicating an average mobile device.
+   */
+  calibratedMidTierMobile: 'Mid-tier mobile',
+  /**
+   * @description Text label for a menu item indicating a below-average mobile device.
+   */
+  calibratedLowTierMobile: 'Low-tier mobile',
+  /**
+   * @description Text label indicating why an option is not available, because the user's device is not fast enough to emulate a device.
+   */
+  calibrationErrorDeviceTooWeak: 'Device is not powerful enough',
+} as const;
+const str_ = i18n.i18n.registerUIStrings('panels/common/CPUThrottlingOption.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
+
+export enum CPUThrottlingRates {
+  NO_THROTTLING = 1,
+  MID_TIER_MOBILE = 4,
+  LOW_TIER_MOBILE = 6,
+  EXTRA_SLOW = 20,
+
+  // eslint-disable-next-line @typescript-eslint/naming-convention -- Used by web_tests.
+  MidTierMobile = MID_TIER_MOBILE,
+  // eslint-disable-next-line @typescript-eslint/naming-convention -- Used by web_tests.
+  LowEndMobile = LOW_TIER_MOBILE,
+}
+
+export type CalibratedDeviceType = 'low-tier-mobile'|'mid-tier-mobile';
+
+export interface CPUThrottlingOption {
+  title: () => string;
+  rate: () => number;
+  calibratedDeviceType?: CalibratedDeviceType;
+  jslogContext: string;
+}
+
+function makeFixedPresetThrottlingOption(rate: CPUThrottlingRates): CPUThrottlingOption {
+  return {
+    title: rate === 1 ? i18nLazyString(UIStrings.noThrottling) : i18nLazyString(UIStrings.dSlowdown, {PH1: rate}),
+    rate: () => rate,
+    jslogContext: rate === 1 ? 'cpu-no-throttling' : `cpu-throttled-${rate}`,
+  };
+}
+
+export const NoThrottlingOption = makeFixedPresetThrottlingOption(CPUThrottlingRates.NO_THROTTLING);
+export const MidTierThrottlingOption = makeFixedPresetThrottlingOption(CPUThrottlingRates.MID_TIER_MOBILE);
+export const LowTierThrottlingOption = makeFixedPresetThrottlingOption(CPUThrottlingRates.LOW_TIER_MOBILE);
+export const ExtraSlowThrottlingOption = makeFixedPresetThrottlingOption(CPUThrottlingRates.EXTRA_SLOW);
+
+function makeCalibratedThrottlingOption(calibratedDeviceType: CalibratedDeviceType): CPUThrottlingOption {
+  const getSettingValue = (): number|CalibrationError|null => {
+    const setting = Common.Settings.Settings.instance().createSetting<CalibratedCPUThrottling>(
+        'calibrated-cpu-throttling', {}, Common.Settings.SettingStorageType.GLOBAL);
+    const value = setting.get();
+    if (calibratedDeviceType === 'low-tier-mobile') {
+      return value.low ?? null;
+    }
+    if (calibratedDeviceType === 'mid-tier-mobile') {
+      return value.mid ?? null;
+    }
+    return null;
+  };
+
+  return {
+    title(): string {
+      const typeString = calibratedDeviceType === 'low-tier-mobile' ? i18nString(UIStrings.calibratedLowTierMobile) :
+                                                                      i18nString(UIStrings.calibratedMidTierMobile);
+
+      const value = getSettingValue();
+      if (typeof value === 'number') {
+        return `${typeString} – ${value.toFixed(1)}×`;
+      }
+
+      return typeString;
+    },
+    rate(): number {
+      const value = getSettingValue();
+      if (typeof value === 'number') {
+        return value;
+      }
+      return 0;
+    },
+    calibratedDeviceType,
+    jslogContext: `cpu-throttled-calibrated-${calibratedDeviceType}`,
+  };
+}
+
+export const CalibratedLowTierMobileThrottlingOption = makeCalibratedThrottlingOption('low-tier-mobile');
+export const CalibratedMidTierMobileThrottlingOption = makeCalibratedThrottlingOption('mid-tier-mobile');
+
+export interface CalibratedCPUThrottling {
+  /** Either the CPU multiplier, or an error code for why it could not be determined. */
+  low?: number|CalibrationError;
+  mid?: number|CalibrationError;
+}
+
+export enum CalibrationError {
+  DEVICE_TOO_WEAK = 'DEVICE_TOO_WEAK',
+}
+
+export function calibrationErrorToString(error: CalibrationError): string {
+  if (error === CalibrationError.DEVICE_TOO_WEAK) {
+    return i18nString(UIStrings.calibrationErrorDeviceTooWeak);
+  }
+
+  return error;
+}
+
+export const cpuThrottlingPresets: CPUThrottlingOption[] = [
+  NoThrottlingOption,
+  MidTierThrottlingOption,
+  LowTierThrottlingOption,
+  ExtraSlowThrottlingOption,
+  CalibratedLowTierMobileThrottlingOption,
+  CalibratedMidTierMobileThrottlingOption,
+];
+
+export function determineOptionFromRate(rate: number, currentOption?: CPUThrottlingOption): CPUThrottlingOption {
+  if (currentOption && currentOption.rate() === rate) {
+    return currentOption;
+  }
+  return cpuThrottlingPresets.find(o => o.rate() === rate) || NoThrottlingOption;
+}

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/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);

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():