chrome-devtools-frontend 1.0.1697595 → 1.0.1698733

package/front_end/models/comment_manager/CommentManager.ts

@@ -4,75 +4,30 @@
 
 import * as Common from '../../core/common/common.js';
 
-export interface EditorAnchorSignature {
-  /** 1-based line number for CodeMirror text editor anchors */
-  lineNumber: number;
-  /** File path associated with the editor */
-  filePath?: string;
-}
-
-export interface DOMNodeAnchorSignature {
-  /** Backend NodeId for DOM nodes (`data-backend-node-id`) */
-  backendNodeId: number;
-  /** Target ID associated with the DOM node (`data-target-id`) */
-  targetId: string;
-}
-
-export interface TimelineAnchorSignature {
-  /** Identifier of the trace to scope comments to a specific recording */
-  traceId: string;
-  /** Serializable key from Trace.EventsSerializer (e.g. 'r-123', 'p-1-2-3-4', 's-5') */
-  traceEventKey: string;
-  /** Primary event title or category name */
-  entryName: string;
-  /** Event start timestamp in microseconds */
-  startTimeMicro: number;
-  /** Chart location */
-  chartLocation: 'main'|'network';
-  /** Event duration in microseconds (omitted for instant markers) */
-  durationMicro?: number;
-}
-
-export interface CommentAnchorSignature {
-  /** Visual logging tree path, e.g. "Panel: elements > Pane: styles > TreeOutline > TreeItem: color" */
-  vePath: string;
-  /** Normalized text content of the target node */
-  textSignature: string;
-  /** Text content of the parent container VE node for sibling disambiguation */
-  parentTextSignature?: string;
-  /** 0-indexed position among siblings sharing the same visual logging path */
-  siblingIndex?: number;
-  /** Optional backend RequestId for Network panel elements (`data-network-request-id`) */
-  networkRequestId?: string;
-  /** Optional DOM node identifiers (`data-backend-node-id`, `data-target-id`) */
-  node?: DOMNodeAnchorSignature;
-  /** Optional editor anchor coordinates for CodeMirror text editors */
-  editor?: EditorAnchorSignature;
-  /** Optional timeline flamechart anchor coordinates for Performance panel trace entries */
-  timeline?: TimelineAnchorSignature;
-}
-
-export interface Comment {
-  author: 'DEVELOPER'|'AGENT';
-  text: string;
-  timestamp: number;
-}
-
-export interface ChangeRecord {
-  id: string;
-  description: string;
-  timestamp: number;
-}
-
-export interface CommentThread {
-  id: string;
-  anchor: CommentAnchorSignature;
-  comments: Comment[];
-  status: 'ACTIVE'|'RESOLVED';
-  transmitted?: boolean;
-  changes?: ChangeRecord[];
-  index: number;
-}
+import {
+  type ChangeRecord,
+  type Comment,
+  type CommentAnchorSignature,
+  CommentThread,
+  type CommentThreadOptions,
+  type CommentThreadStatus,
+  type DOMNodeAnchorSignature,
+  type EditorAnchorSignature,
+  Events as CommentThreadEvents,
+  type TimelineAnchorSignature,
+} from './CommentThread.js';
+
+export {
+  type ChangeRecord,
+  type Comment,
+  type CommentAnchorSignature,
+  CommentThread,
+  type CommentThreadOptions,
+  type CommentThreadStatus,
+  type DOMNodeAnchorSignature,
+  type EditorAnchorSignature,
+  type TimelineAnchorSignature,
+};
 
 export const enum Events {
   COMMENT_THREADS_CHANGED = 'CommentThreadsChanged',
@@ -90,7 +45,15 @@ export interface EventTypes {
 export class CommentManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   readonly #commentThreads = new Map<string, CommentThread>();
   #commentMode = false;
-  #nextId = 1;
+
+  constructor() {
+    super();
+    CommentThread.resetIndex();
+  }
+
+  #onThreadChanged(): void {
+    this.dispatchEventToListeners(Events.COMMENT_THREADS_CHANGED, this.getCommentThreads());
+  }
 
   setCommentMode(active: boolean): void {
     if (this.#commentMode === active) {
@@ -110,25 +73,20 @@ export class CommentManager extends Common.ObjectWrapper.ObjectWrapper<EventType
       author: 'DEVELOPER'|'AGENT' = 'DEVELOPER',
       changes?: ChangeRecord[],
       ): CommentThread {
-    const index = this.#nextId++;
-    const id = `comment-${index}`;
     const comments: Comment[] = text ? [{
       author,
       text,
       timestamp: Date.now(),
     }] :
                                        [];
-    const thread: CommentThread = {
-      id,
+    const thread = new CommentThread({
       anchor,
       comments,
-      status: 'ACTIVE',
-      transmitted: false,
       changes,
-      index,
-    };
+    });
+    thread.addEventListener(CommentThreadEvents.CHANGED, this.#onThreadChanged, this);
 
-    this.#commentThreads.set(id, thread);
+    this.#commentThreads.set(thread.id, thread);
     this.dispatchEventToListeners(Events.COMMENT_THREADS_CHANGED, this.getCommentThreads());
     return thread;
   }
@@ -144,7 +102,7 @@ export class CommentManager extends Common.ObjectWrapper.ObjectWrapper<EventType
   takeComments(): CommentThread[] {
     const threads: CommentThread[] = [];
     for (const thread of this.#commentThreads.values()) {
-      if (!thread.transmitted) {
+      if (thread.status === 'ACTIVE' && !thread.transmitted) {
         thread.transmitted = true;
         threads.push(thread);
       }
@@ -157,30 +115,27 @@ export class CommentManager extends Common.ObjectWrapper.ObjectWrapper<EventType
     if (!thread) {
       return false;
     }
-    if (replyText && replyText.trim().length > 0) {
-      const comment: Comment = {
-        author: 'AGENT',
-        text: replyText.trim(),
-        timestamp: Date.now(),
-      };
-      thread.comments.push(comment);
-    }
-    thread.status = 'RESOLVED';
-    this.dispatchEventToListeners(Events.COMMENT_THREADS_CHANGED, this.getCommentThreads());
+    thread.resolve(replyText);
     return true;
   }
 
   removeCommentThread(id: string): void {
-    if (!this.#commentThreads.has(id)) {
+    const thread = this.#commentThreads.get(id);
+    if (!thread) {
       return;
     }
+    thread.removeEventListener(CommentThreadEvents.CHANGED, this.#onThreadChanged, this);
     this.#commentThreads.delete(id);
     this.dispatchEventToListeners(Events.COMMENT_THREADS_CHANGED, this.getCommentThreads());
   }
 
   clear(): void {
     this.setCommentMode(false);
+    for (const thread of this.#commentThreads.values()) {
+      thread.removeEventListener(CommentThreadEvents.CHANGED, this.#onThreadChanged, this);
+    }
     this.#commentThreads.clear();
+    CommentThread.resetIndex();
     this.dispatchEventToListeners(Events.COMMENT_THREADS_CHANGED, []);
   }
 }

package/front_end/models/comment_manager/CommentThread.ts

@@ -0,0 +1,145 @@
+// 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';
+
+export interface EditorAnchorSignature {
+  /** 1-based line number for CodeMirror text editor anchors */
+  lineNumber: number;
+  /** File path associated with the editor */
+  filePath?: string;
+}
+
+export interface DOMNodeAnchorSignature {
+  /** Backend NodeId for DOM nodes (`data-backend-node-id`) */
+  backendNodeId: number;
+  /** Target ID associated with the DOM node (`data-target-id`) */
+  targetId: string;
+}
+
+export interface TimelineAnchorSignature {
+  /** Identifier of the trace to scope comments to a specific recording */
+  traceId: string;
+  /** Serializable key from Trace.EventsSerializer (e.g. 'r-123', 'p-1-2-3-4', 's-5') */
+  traceEventKey: string;
+  /** Primary event title or category name */
+  entryName: string;
+  /** Event start timestamp in microseconds */
+  startTimeMicro: number;
+  /** Chart location */
+  chartLocation: 'main'|'network';
+  /** Event duration in microseconds (omitted for instant markers) */
+  durationMicro?: number;
+}
+
+export interface CommentAnchorSignature {
+  /** Visual logging tree path, e.g. "Panel: elements > Pane: styles > TreeOutline > TreeItem: color" */
+  vePath: string;
+  /** Normalized text content of the target node */
+  textSignature: string;
+  /** Text content of the parent container VE node for sibling disambiguation */
+  parentTextSignature?: string;
+  /** 0-indexed position among siblings sharing the same visual logging path */
+  siblingIndex?: number;
+  /** Optional backend RequestId for Network panel elements (`data-network-request-id`) */
+  networkRequestId?: string;
+  /** Optional DOM node identifiers (`data-backend-node-id`, `data-target-id`) */
+  node?: DOMNodeAnchorSignature;
+  /** Optional editor anchor coordinates for CodeMirror text editors */
+  editor?: EditorAnchorSignature;
+  /** Optional timeline flamechart anchor coordinates for Performance panel trace entries */
+  timeline?: TimelineAnchorSignature;
+}
+
+export interface Comment {
+  author: 'DEVELOPER'|'AGENT';
+  text: string;
+  timestamp: number;
+}
+
+export interface ChangeRecord {
+  id: string;
+  description: string;
+  timestamp: number;
+}
+
+export type CommentThreadStatus = 'DRAFT'|'ACTIVE'|'RESOLVED';
+
+export const enum Events {
+  CHANGED = 'Changed',
+}
+
+export interface EventTypes {
+  [Events.CHANGED]: void;
+}
+
+export interface CommentThreadOptions {
+  anchor: CommentAnchorSignature;
+  comments?: Comment[];
+  changes?: ChangeRecord[];
+}
+
+export class CommentThread extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
+  static #nextIndex = 1;
+
+  static resetIndex(): void {
+    CommentThread.#nextIndex = 1;
+  }
+
+  readonly id: string = crypto.randomUUID();
+  readonly anchor: CommentAnchorSignature;
+  #savedIndex?: number;
+  comments: Comment[];
+  status: CommentThreadStatus = 'DRAFT';
+  transmitted: boolean = false;
+  changes?: ChangeRecord[];
+
+  constructor(options: CommentThreadOptions) {
+    super();
+    this.anchor = options.anchor;
+    this.comments = options.comments ?? [];
+    this.changes = options.changes;
+  }
+
+  get index(): number {
+    return this.#savedIndex ?? CommentThread.#nextIndex;
+  }
+
+  save(text?: string, author: 'DEVELOPER'|'AGENT' = 'DEVELOPER'): void {
+    let changed = false;
+    if (text && text.trim().length > 0) {
+      this.comments.push({
+        author,
+        text: text.trim(),
+        timestamp: Date.now(),
+      });
+      changed = true;
+    }
+    if (this.status === 'DRAFT') {
+      if (this.#savedIndex === undefined) {
+        this.#savedIndex = CommentThread.#nextIndex++;
+      }
+      this.status = 'ACTIVE';
+      changed = true;
+    }
+    if (changed) {
+      this.dispatchEventToListeners(Events.CHANGED);
+    }
+  }
+
+  resolve(replyText?: string): void {
+    if (replyText && replyText.trim().length > 0) {
+      this.comments.push({
+        author: 'AGENT',
+        text: replyText.trim(),
+        timestamp: Date.now(),
+      });
+    }
+    if (this.#savedIndex === undefined) {
+      this.#savedIndex = CommentThread.#nextIndex++;
+    }
+    this.status = 'RESOLVED';
+    this.dispatchEventToListeners(Events.CHANGED);
+  }
+}

package/front_end/models/comment_manager/comment_manager.ts

@@ -4,8 +4,10 @@
 
 import * as CD4ABridge from './CD4ABridge.js';
 import * as CommentManager from './CommentManager.js';
+import * as CommentThread from './CommentThread.js';
 
 export {
   CD4ABridge,
   CommentManager,
+  CommentThread,
 };

package/front_end/models/elements/DOMChanges.ts

@@ -0,0 +1,238 @@
+// 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 Platform from '../../core/platform/platform.js';
+import type * as SDK from '../../core/sdk/sdk.js';
+import type * as ChangeTracker from '../change_tracker/change_tracker.js';
+import type * as CommentManager from '../comment_manager/comment_manager.js';
+
+type Tracker = ChangeTracker.ChangeTracker.ChangeTracker|undefined;
+
+/**
+ * Maximum number of characters of page controlled data (tag names, attribute names and values,
+ * text node values and HTML) that a change description embeds. The inspected page fully controls
+ * these strings and `Changed HTML from ... to ...` in particular can otherwise hold on to the
+ * entire subtree of an element.
+ */
+export const MAX_VALUE_LENGTH = 100;
+
+/** Shortens page controlled data so that both its start and its end stay recognizable. */
+function trimValue(value: string): string {
+  return Platform.StringUtilities.trimMiddle(value, MAX_VALUE_LENGTH);
+}
+
+function buildAnchor(node: SDK.DOMModel.DOMNode,
+                     selector = 'element'): CommentManager.CommentManager.CommentAnchorSignature {
+  return {
+    vePath: 'Panel: elements > Tree: elements > TreeItem',
+    textSignature: selector,
+    node: {
+      backendNodeId: node.backendNodeId(),
+      targetId: node.domModel().target().id(),
+    },
+  };
+}
+
+/**
+ * Parses a raw attribute string (e.g. 'class="btn"', 'data-id=123', or 'disabled')
+ * into its attribute name and unquoted value for single-attribute inline edits.
+ */
+function parseAttributeText(text: string): {name: string, value: string} {
+  const trimmed = text.trim();
+  const eqIdx = trimmed.indexOf('=');
+  if (eqIdx === -1) {
+    return {name: trimmed, value: ''};
+  }
+  const name = trimmed.slice(0, eqIdx).trim();
+  let value = trimmed.slice(eqIdx + 1).trim();
+  if (value.length >= 2 &&
+      ((value.startsWith('"') && value.endsWith('"')) || (value.startsWith('\'') && value.endsWith('\'')))) {
+    value = value.slice(1, -1);
+  }
+  return {name, value};
+}
+
+function describeAddAttribute(attributeName: string, value?: string): string {
+  if (value !== undefined && value !== '') {
+    return `Added attribute ${trimValue(attributeName)}="${trimValue(value)}"`;
+  }
+  return `Added attribute "${trimValue(attributeName)}"`;
+}
+
+function describeRemoveAttribute(attributeName: string): string {
+  return `Removed attribute "${trimValue(attributeName)}"`;
+}
+
+/**
+ * Describes a modification of an existing attribute, which covers renaming the attribute, changing
+ * its value, or both at once. `oldValue` is `undefined` if the previous value is unknown.
+ */
+function describeAttributeChange(
+    oldAttributeName: string,
+    oldValue: string|undefined,
+    newAttributeName: string,
+    newValue: string,
+    ): string {
+  if (oldAttributeName !== newAttributeName) {
+    if (oldValue !== undefined && oldValue !== newValue) {
+      return `Renamed attribute "${trimValue(oldAttributeName)}"="${trimValue(oldValue)}" to "${
+          trimValue(newAttributeName)}"="${trimValue(newValue)}"`;
+    }
+    return `Renamed attribute "${trimValue(oldAttributeName)}" to "${trimValue(newAttributeName)}"`;
+  }
+  if (oldValue !== undefined) {
+    return `Changed attribute "${trimValue(newAttributeName)}" from "${trimValue(oldValue)}" to "${
+        trimValue(newValue)}"`;
+  }
+  return `Changed attribute "${trimValue(newAttributeName)}" to "${trimValue(newValue)}"`;
+}
+
+export interface AttributeEdit {
+  /** Name of the edited attribute, or an empty string when a new attribute is added. */
+  attributeName: string;
+  /** Raw attribute text before the edit, if there was any. */
+  oldText: string|null;
+  /** Raw attribute text the user committed. Empty when the attribute is removed. */
+  newText: string;
+}
+
+function describeAttributeEdit({attributeName, oldText, newText}: AttributeEdit): string {
+  const parsedNew = parseAttributeText(newText);
+  const parsedOld = oldText !== null ? parseAttributeText(oldText) : undefined;
+
+  if (!newText.trim()) {
+    return describeRemoveAttribute(attributeName.trim());
+  }
+  if (!attributeName.trim()) {
+    return describeAddAttribute(parsedNew.name, parsedNew.value);
+  }
+  return describeAttributeChange(
+      attributeName.trim(),
+      parsedOld?.value,
+      parsedNew.name || attributeName.trim(),
+      parsedNew.value,
+  );
+}
+
+/**
+ * These strings are for the consumption by AI agents, they don't need to be translated.
+ */
+function describeTagNameEdit(oldTagName: string, newTagName: string): string {
+  return `Renamed tag from <${trimValue(oldTagName)}> to <${trimValue(newTagName)}>`;
+}
+
+function describeTextNodeEdit(oldText: string, newText: string): string {
+  return `Changed text from "${trimValue(oldText)}" to "${trimValue(newText)}"`;
+}
+
+function describeNodeRemoval(tagName: string): string {
+  return `Removed node <${trimValue(tagName)}>`;
+}
+
+function describeHTMLEdit(oldValue?: string, newValue?: string): string {
+  if (oldValue !== undefined && newValue !== undefined) {
+    return `Changed HTML from "${trimValue(oldValue)}" to "${trimValue(newValue)}"`;
+  }
+  if (newValue !== undefined) {
+    return `Changed HTML to "${trimValue(newValue)}"`;
+  }
+  return 'Edited HTML';
+}
+
+function describeVisibilityToggle(tagName: string, hidden: boolean): string {
+  return hidden ? `Hid element <${trimValue(tagName)}>` : `Unhid element <${trimValue(tagName)}>`;
+}
+
+function describeNodeDuplication(tagName: string): string {
+  return `Duplicated node <${trimValue(tagName)}>`;
+}
+
+function describeNodeMove(tagName: string, directionUp: boolean): string {
+  return `Moved node <${trimValue(tagName)}> ${directionUp ? 'up' : 'down'}`;
+}
+
+function describeNodeDrop(tagName: string): string {
+  return `Moved node <${trimValue(tagName)}> via drag and drop`;
+}
+
+function describeNodePaste(tagName: string, isCut: boolean): string {
+  return isCut ? `Pasted (moved) node <${trimValue(tagName)}>` : `Pasted node <${trimValue(tagName)}>`;
+}
+
+export function trackAttributeEdit(tracker: Tracker, node: SDK.DOMModel.DOMNode, selector: string|undefined,
+                                   edit: AttributeEdit): void {
+  if (!tracker?.isTracking) {
+    return;
+  }
+  tracker.trackChange(describeAttributeEdit(edit), buildAnchor(node, selector));
+}
+
+export function trackTagNameEdit(tracker: Tracker, node: SDK.DOMModel.DOMNode, selector: string|undefined,
+                                 oldTagName: string, newTagName: string): void {
+  if (!tracker?.isTracking) {
+    return;
+  }
+  tracker.trackChange(describeTagNameEdit(oldTagName, newTagName), buildAnchor(node, selector));
+}
+
+export function trackTextNodeEdit(tracker: Tracker, node: SDK.DOMModel.DOMNode, selector: string|undefined,
+                                  oldText: string, newText: string): void {
+  if (!tracker?.isTracking) {
+    return;
+  }
+  tracker.trackChange(describeTextNodeEdit(oldText, newText), buildAnchor(node, selector));
+}
+
+export function trackNodeRemoval(tracker: Tracker, node: SDK.DOMModel.DOMNode, selector: string|undefined): void {
+  if (!tracker?.isTracking) {
+    return;
+  }
+  tracker.trackChange(describeNodeRemoval(node.nodeName().toLowerCase()), buildAnchor(node, selector));
+}
+
+export function trackHTMLEdit(tracker: Tracker, node: SDK.DOMModel.DOMNode, selector: string|undefined,
+                              oldValue: string, newValue: string): void {
+  if (!tracker?.isTracking) {
+    return;
+  }
+  tracker.trackChange(describeHTMLEdit(oldValue, newValue), buildAnchor(node, selector));
+}
+
+export function trackVisibilityToggle(tracker: Tracker, node: SDK.DOMModel.DOMNode, selector: string|undefined,
+                                      hidden: boolean): void {
+  if (!tracker?.isTracking) {
+    return;
+  }
+  tracker.trackChange(describeVisibilityToggle(node.nodeName().toLowerCase(), hidden), buildAnchor(node, selector));
+}
+
+export function trackNodeDuplication(tracker: Tracker, node: SDK.DOMModel.DOMNode, selector: string|undefined): void {
+  if (!tracker?.isTracking) {
+    return;
+  }
+  tracker.trackChange(describeNodeDuplication(node.nodeName().toLowerCase()), buildAnchor(node, selector));
+}
+
+export function trackNodeMove(tracker: Tracker, node: SDK.DOMModel.DOMNode, selector: string|undefined,
+                              directionUp: boolean): void {
+  if (!tracker?.isTracking) {
+    return;
+  }
+  tracker.trackChange(describeNodeMove(node.nodeName().toLowerCase(), directionUp), buildAnchor(node, selector));
+}
+
+export function trackNodeDrop(tracker: Tracker, node: SDK.DOMModel.DOMNode, selector: string|undefined): void {
+  if (!tracker?.isTracking) {
+    return;
+  }
+  tracker.trackChange(describeNodeDrop(node.nodeName().toLowerCase()), buildAnchor(node, selector));
+}
+
+export function trackNodePaste(tracker: Tracker, node: SDK.DOMModel.DOMNode, selector: string|undefined,
+                               isCut: boolean): void {
+  if (!tracker?.isTracking) {
+    return;
+  }
+  tracker.trackChange(describeNodePaste(node.nodeName().toLowerCase(), isCut), buildAnchor(node, selector));
+}

package/front_end/models/elements/elements.ts

@@ -2,8 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as DOMChanges from './DOMChanges.js';
 import * as ElementUpdateRecord from './ElementUpdateRecord.js';
 
 export {
+  DOMChanges,
   ElementUpdateRecord,
 };

package/front_end/models/emulation/DeviceModeModel.ts

@@ -107,6 +107,8 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   #appliedUserAgentType: UA;
   readonly #scaleSetting: Common.Settings.Setting<number>;
   #scale: number;
+  readonly #autoAdjustScaleSetting: Common.Settings.Setting<boolean>;
+  readonly #deviceScaleMapSetting: Common.Settings.Setting<Record<string, {scale: number, autoAdjust: boolean}>>;
   #widthSetting: Common.Settings.Setting<number>;
   #heightSetting: Common.Settings.Setting<number>;
   #uaSetting: Common.Settings.Setting<UA>;
@@ -153,6 +155,9 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.#scaleSetting.addChangeListener(this.scaleSettingChanged, this);
     this.#scale = 1;
 
+    this.#autoAdjustScaleSetting = this.#settings.createSetting('emulation.auto-adjust-scale', true);
+    this.#deviceScaleMapSetting = this.#settings.createSetting('emulation.device-scale-map', {});
+
     this.#widthSetting = this.#settings.createSetting('emulation.device-width', 400);
     if (this.#widthSetting.get() < MinDeviceSize) {
       this.#widthSetting.set(MinDeviceSize);
@@ -327,12 +332,44 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
 
   emulate(type: Type, device: EmulatedDevice|null, mode: Mode|null, scale?: number): void {
     const resetPageScaleFactor = this.#type !== type || this.#device !== device || this.#mode !== mode;
+    const deviceChanged = this.#type !== type || this.#device !== device;
+
+    if (deviceChanged) {
+      if (this.#type === Type.Device && this.#device) {
+        const map = this.#deviceScaleMapSetting.get();
+        map[this.#device.title] = {
+          scale: this.#scaleSetting.get(),
+          autoAdjust: this.#autoAdjustScaleSetting.get(),
+        };
+        this.#deviceScaleMapSetting.set(map);
+      } else if (this.#type === Type.Responsive) {
+        const map = this.#deviceScaleMapSetting.get();
+        map['Responsive'] = {
+          scale: this.#scaleSetting.get(),
+          autoAdjust: this.#autoAdjustScaleSetting.get(),
+        };
+        this.#deviceScaleMapSetting.set(map);
+      }
+    }
+
     this.#type = type;
 
     if (type === Type.Device && device && mode) {
       console.assert(Boolean(device) && Boolean(mode), 'Must pass device and mode for device emulation');
       this.#mode = mode;
       this.#device = device;
+
+      if (deviceChanged) {
+        const map = this.#deviceScaleMapSetting.get();
+        const savedDevice = map[device.title];
+        if (savedDevice) {
+          this.#autoAdjustScaleSetting.set(savedDevice.autoAdjust);
+          scale = savedDevice.autoAdjust ? undefined : savedDevice.scale;
+        } else {
+          this.#autoAdjustScaleSetting.set(scale === undefined);
+        }
+      }
+
       if (scale !== undefined) {
         this.#autoFitScaleOnInitialize = false;
         this.#scaleSetting.set(scale);
@@ -346,6 +383,22 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       this.#device = null;
       this.#mode = null;
       this.#autoFitScaleOnInitialize = false;
+
+      if (deviceChanged && type === Type.Responsive) {
+        const map = this.#deviceScaleMapSetting.get();
+        const savedDevice = map['Responsive'];
+        if (savedDevice) {
+          this.#autoAdjustScaleSetting.set(savedDevice.autoAdjust);
+          if (!savedDevice.autoAdjust) {
+            this.#scaleSetting.set(savedDevice.scale);
+          } else {
+            this.#scaleSetting.set(this.calculateFitScale(this.#widthSetting.get(), this.#heightSetting.get()));
+          }
+        } else {
+          this.#autoAdjustScaleSetting.set(true);
+          this.#scaleSetting.set(1);
+        }
+      }
     }
 
     if (type !== Type.None) {