chrome-devtools-frontend 1.0.1011333 → 1.0.1012587

package/codereview.settings

@@ -0,0 +1,4 @@
+# This file is used by git-cl to get repository specific information.
+GERRIT_HOST: True
+CODE_REVIEW_SERVER: codereview.chromium.org
+PROJECT: devtools-frontend

package/config/gni/devtools_grd_files.gni

@@ -544,6 +544,7 @@ grd_files_debug_sources = [
   "front_end/core/common/JavaScriptMetaData.js",
   "front_end/core/common/Lazy.js",
   "front_end/core/common/Linkifier.js",
+  "front_end/core/common/Mutex.js",
   "front_end/core/common/Object.js",
   "front_end/core/common/ParsedURL.js",
   "front_end/core/common/Progress.js",
@@ -1251,6 +1252,7 @@ grd_files_debug_sources = [
   "front_end/panels/sources/navigatorTree.css.js",
   "front_end/panels/sources/navigatorView.css.js",
   "front_end/panels/sources/scopeChainSidebarPane.css.js",
+  "front_end/panels/sources/sourcesNavigator.css.js",
   "front_end/panels/sources/sourcesPanel.css.js",
   "front_end/panels/sources/sourcesView.css.js",
   "front_end/panels/sources/threadsSidebarPane.css.js",

package/docs/workflows.md

@@ -59,7 +59,7 @@ This works with Chromium 79 or later.
 **(Requires `brew install coreutils` on Mac.)**
 
 ```bash
-<path-to-chrome>/chrome --custom-devtools-frontend=file://$(realpath out/Default/gen/front_end)
+<path-to-devtools-frontend>/third_party/chrome/chrome-<platform>/chrome --custom-devtools-frontend=file://$(realpath out/Default/gen/front_end)
 ```
 
 Note that `$(realpath out/Default/gen/front_end)` expands to the absolute path to build artifacts for DevTools frontend.
@@ -79,7 +79,7 @@ Serve the content of `out/Default/gen/front_end` on a web server, e.g. via `pyth
 Then point to that web server when starting Chromium, for example:
 
 ```bash
-<path-to-chrome>/chrome --custom-devtools-frontend=http://localhost:8000/
+<path-to-devtools-frontend>/third_party/chrome/chrome-<platform>/chrome --custom-devtools-frontend=http://localhost:8000/
 ```
 
 Open DevTools via F12 on Windows/Linux or Cmd+Option+I on Mac.
@@ -91,7 +91,7 @@ Serve the content of `out/Default/gen/front_end` on a web server, e.g. via `pyth
 Then point to that web server when starting Chromium, for example:
 
 ```bash
-<path-to-chrome>/chrome --custom-devtools-frontend=http://localhost:8000/ --remote-debugging-port=9222
+<path-to-devtools-frontend>/third_party/chrome/chrome-<platform>/chrome --custom-devtools-frontend=http://localhost:8000/ --remote-debugging-port=9222
 ```
 
 In a regular Chrome tab, go to the URL `http://localhost:9222#custom=true`. It lists URLs that can be copied to new Chrome tabs to inspect individual debug targets.

package/front_end/core/common/Mutex.ts

@@ -0,0 +1,42 @@
+// Copyright 2022 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+type ReleaseFn = () => void;
+
+/**
+ * Use Mutex class to coordinate local concurrent operations.
+ * Once `acquire` promise resolves, you hold the lock and must
+ * call `release` function returned by `acquire` to release the
+ * lock. Failing to `release` the lock may lead to deadlocks.
+ */
+export class Mutex {
+  #locked = false;
+  #acquiringQueue: Array<(release: ReleaseFn) => void> = [];
+
+  acquire(): Promise<ReleaseFn> {
+    let resolver = (_release: ReleaseFn): void => {};
+    const promise = new Promise<ReleaseFn>((resolve): void => {
+      resolver = resolve;
+    });
+    this.#acquiringQueue.push(resolver);
+    this.#processAcquiringQueue();
+    return promise;
+  }
+
+  #processAcquiringQueue(): void {
+    if (this.#locked) {
+      return;
+    }
+    const nextAquirePromise = this.#acquiringQueue.shift();
+    if (nextAquirePromise) {
+      this.#locked = true;
+      nextAquirePromise(this.#release.bind(this));
+    }
+  }
+
+  #release(): void {
+    this.#locked = false;
+    this.#processAcquiringQueue();
+  }
+}

package/front_end/core/common/common.ts

@@ -14,6 +14,7 @@ import * as EventTarget from './EventTarget.js';
 import * as JavaScriptMetaData from './JavaScriptMetaData.js';
 import * as Lazy from './Lazy.js';
 import * as Linkifier from './Linkifier.js';
+import * as Mutex from './Mutex.js';
 import * as ObjectWrapper from './Object.js';
 import * as ParsedURL from './ParsedURL.js';
 import * as Progress from './Progress.js';
@@ -58,6 +59,7 @@ export {
   JavaScriptMetaData,
   Lazy,
   Linkifier,
+  Mutex,
   ObjectWrapper,
   ParsedURL,
   Progress,

package/front_end/core/host/UserMetrics.ts

@@ -626,8 +626,10 @@ export enum DevtoolsExperiments {
   'cssLayers' = 59,
   'eyedropperColorPicker' = 60,
   'instrumentationBreakpoints' = 61,
+  'cssAuthoringHints' = 62,
+  'authoredDeployedGrouping' = 63,
   // Increment this when new experiments are added.
-  'MaxValue' = 62,
+  'MaxValue' = 64,
 }
 /* eslint-enable @typescript-eslint/naming-convention */
 

package/front_end/core/i18n/locales/en-US.json

@@ -3291,7 +3291,7 @@
     "message": "DOM Storage Items"
   },
   "panels/application/DOMStorageItemsView.ts | domStorageItemsCleared": {
-    "message": "{PH1} cleared"
+    "message": "DOM Storage Items cleared"
   },
   "panels/application/DOMStorageItemsView.ts | domStorageNumberEntries": {
     "message": "Number of entries shown in table: {PH1}"
@@ -9794,6 +9794,9 @@
   "panels/sources/NavigatorView.ts | authored": {
     "message": "Authored"
   },
+  "panels/sources/NavigatorView.ts | authoredTooltip": {
+    "message": "Contains original sources"
+  },
   "panels/sources/NavigatorView.ts | delete": {
     "message": "Delete"
   },
@@ -9803,6 +9806,9 @@
   "panels/sources/NavigatorView.ts | deployed": {
     "message": "Deployed"
   },
+  "panels/sources/NavigatorView.ts | deployedTooltip": {
+    "message": "Contains final sources the browser sees"
+  },
   "panels/sources/NavigatorView.ts | excludeFolder": {
     "message": "Exclude folder"
   },
@@ -10163,6 +10169,9 @@
   "panels/sources/sources-meta.ts | watch": {
     "message": "Watch"
   },
+  "panels/sources/SourcesNavigator.ts | authoredDescription": {
+    "message": "Group files by Authored/Deployed"
+  },
   "panels/sources/SourcesNavigator.ts | clearConfiguration": {
     "message": "Clear configuration"
   },
@@ -10233,7 +10242,7 @@
     "message": "Drop workspace folder here"
   },
   "panels/sources/SourcesPanel.ts | groupByAuthored": {
-    "message": "Group by Authored/Deployed (experimental)"
+    "message": "Group by Authored/Deployed"
   },
   "panels/sources/SourcesPanel.ts | groupByFolder": {
     "message": "Group by folder"
@@ -11906,9 +11915,15 @@
   "ui/components/panel_feedback/PanelFeedback.ts | videoAndDocumentation": {
     "message": "Video and documentation"
   },
+  "ui/components/panel_feedback/PreviewToggle.ts | learnMoreLink": {
+    "message": "Learn More"
+  },
   "ui/components/panel_feedback/PreviewToggle.ts | previewTextFeedbackLink": {
     "message": "Send us your feedback."
   },
+  "ui/components/panel_feedback/PreviewToggle.ts | shortFeedbackLink": {
+    "message": "Send feedback"
+  },
   "ui/components/request_link_icon/RequestLinkIcon.ts | clickToShowRequestInTheNetwork": {
     "message": "Click to open the network panel and show request for URL: {url}"
   },

package/front_end/core/i18n/locales/en-XL.json

@@ -3291,7 +3291,7 @@
     "message": "D̂ÓM̂ Śt̂ór̂áĝé Ît́êḿŝ"
   },
   "panels/application/DOMStorageItemsView.ts | domStorageItemsCleared": {
-    "message": "{PH1} ĉĺêár̂éd̂"
+    "message": "D̂ÓM̂ Śt̂ór̂áĝé Ît́êḿŝ ćl̂éâŕêd́"
   },
   "panels/application/DOMStorageItemsView.ts | domStorageNumberEntries": {
     "message": "N̂úm̂b́êŕ ôf́ êńt̂ŕîéŝ śĥóŵń îń t̂áb̂ĺê: {PH1}"
@@ -9794,6 +9794,9 @@
   "panels/sources/NavigatorView.ts | authored": {
     "message": "Âút̂h́ôŕêd́"
   },
+  "panels/sources/NavigatorView.ts | authoredTooltip": {
+    "message": "Ĉón̂t́âín̂ś ôŕîǵîńâĺ ŝóûŕĉéŝ"
+  },
   "panels/sources/NavigatorView.ts | delete": {
     "message": "D̂él̂ét̂é"
   },
@@ -9803,6 +9806,9 @@
   "panels/sources/NavigatorView.ts | deployed": {
     "message": "D̂ép̂ĺôýêd́"
   },
+  "panels/sources/NavigatorView.ts | deployedTooltip": {
+    "message": "Ĉón̂t́âín̂ś f̂ín̂ál̂ śôúr̂ćêś t̂h́ê b́r̂óŵśêŕ ŝéêś"
+  },
   "panels/sources/NavigatorView.ts | excludeFolder": {
     "message": "Êx́ĉĺûd́ê f́ôĺd̂ér̂"
   },
@@ -10163,6 +10169,9 @@
   "panels/sources/sources-meta.ts | watch": {
     "message": "Ŵát̂ćĥ"
   },
+  "panels/sources/SourcesNavigator.ts | authoredDescription": {
+    "message": "Ĝŕôúp̂ f́îĺêś b̂ý Âút̂h́ôŕêd́/D̂ép̂ĺôýêd́"
+  },
   "panels/sources/SourcesNavigator.ts | clearConfiguration": {
     "message": "Ĉĺêár̂ ćôńf̂íĝúr̂át̂íôń"
   },
@@ -10233,7 +10242,7 @@
     "message": "D̂ŕôṕ ŵór̂ḱŝṕâćê f́ôĺd̂ér̂ h́êŕê"
   },
   "panels/sources/SourcesPanel.ts | groupByAuthored": {
-    "message": "Ĝŕôúp̂ b́ŷ Áût́ĥór̂éd̂/D́êṕl̂óŷéd̂ (éx̂ṕêŕîḿêńt̂ál̂)"
+    "message": "Ĝŕôúp̂ b́ŷ Áût́ĥór̂éd̂/D́êṕl̂óŷéd̂"
   },
   "panels/sources/SourcesPanel.ts | groupByFolder": {
     "message": "Ĝŕôúp̂ b́ŷ f́ôĺd̂ér̂"
@@ -11906,9 +11915,15 @@
   "ui/components/panel_feedback/PanelFeedback.ts | videoAndDocumentation": {
     "message": "V̂íd̂éô án̂d́ d̂óĉúm̂én̂t́ât́îón̂"
   },
+  "ui/components/panel_feedback/PreviewToggle.ts | learnMoreLink": {
+    "message": "L̂éâŕn̂ Ḿôŕê"
+  },
   "ui/components/panel_feedback/PreviewToggle.ts | previewTextFeedbackLink": {
     "message": "Ŝén̂d́ ûś ŷóûŕ f̂éêd́b̂áĉḱ."
   },
+  "ui/components/panel_feedback/PreviewToggle.ts | shortFeedbackLink": {
+    "message": "Ŝén̂d́ f̂éêd́b̂áĉḱ"
+  },
   "ui/components/request_link_icon/RequestLinkIcon.ts | clickToShowRequestInTheNetwork": {
     "message": "Ĉĺîćk̂ t́ô óp̂én̂ t́ĥé n̂ét̂ẃôŕk̂ ṕâńêĺ âńd̂ śĥóŵ ŕêq́ûéŝt́ f̂ór̂ ÚR̂Ĺ: {url}"
   },

package/front_end/core/root/Runtime.ts

@@ -291,6 +291,8 @@ export enum ExperimentName {
   CSS_LAYERS = 'cssLayers',
   EYEDROPPER_COLOR_PICKER = 'eyedropperColorPicker',
   INSTRUMENTATION_BREAKPOINTS = 'instrumentationBreakpoints',
+  CSS_AUTHORING_HINTS = 'cssAuthoringHints',
+  AUTHORED_DEPLOYED_GROUPING = 'authoredDeployedGrouping',
 }
 
 // TODO(crbug.com/1167717): Make this a const enum again

package/front_end/core/sdk/CSSMatchedStyles.ts

@@ -315,7 +315,7 @@ export class CSSMatchedStyles {
     for (let i = 0; i < pseudoPayload.length; ++i) {
       const entryPayload = pseudoPayload[i];
       // PseudoElement nodes are not created unless "content" css property is set.
-      const pseudoElement = this.#nodeInternal.pseudoElements().get(entryPayload.pseudoType) || null;
+      const pseudoElement = this.#nodeInternal.pseudoElements().get(entryPayload.pseudoType)?.at(-1) || null;
       const pseudoStyles = [];
       const rules = entryPayload.matches || [];
 

package/front_end/core/sdk/CSSModel.ts

@@ -517,6 +517,10 @@ export class CSSModel extends SDKModel<EventTypes> {
     return [...this.#fontFaces.values()];
   }
 
+  fontFaceForSource(src: string): CSSFontFace|undefined {
+    return this.#fontFaces.get(src);
+  }
+
   styleSheetHeaderForId(id: Protocol.CSS.StyleSheetId): CSSStyleSheetHeader|null {
     return this.#styleSheetIdToHeader.get(id) || null;
   }

package/front_end/core/sdk/DOMModel.ts

@@ -69,7 +69,7 @@ export class DOMNode {
   #xmlVersion!: string|undefined;
   #isSVGNodeInternal!: boolean;
   #creationStackTraceInternal: Promise<Protocol.Runtime.StackTrace|null>|null;
-  pseudoElementsInternal: Map<string, DOMNode>;
+  #pseudoElements: Map<string, DOMNode[]>;
   #distributedNodesInternal: DOMNodeShortcut[];
   assignedSlot: DOMNodeShortcut|null;
   readonly shadowRootsInternal: DOMNode[];
@@ -100,7 +100,7 @@ export class DOMNode {
     this.#agent = this.#domModelInternal.getAgent();
     this.index = undefined;
     this.#creationStackTraceInternal = null;
-    this.pseudoElementsInternal = new Map();
+    this.#pseudoElements = new Map();
     this.#distributedNodesInternal = [];
     this.assignedSlot = null;
     this.shadowRootsInternal = [];
@@ -319,32 +319,33 @@ export class DOMNode {
   }
 
   hasPseudoElements(): boolean {
-    return this.pseudoElementsInternal.size > 0;
+    return this.#pseudoElements.size > 0;
   }
 
-  pseudoElements(): Map<string, DOMNode> {
-    return this.pseudoElementsInternal;
+  pseudoElements(): Map<string, DOMNode[]> {
+    return this.#pseudoElements;
   }
 
-  beforePseudoElement(): DOMNode|null {
-    if (!this.pseudoElementsInternal) {
-      return null;
-    }
-    return this.pseudoElementsInternal.get(DOMNode.PseudoElementNames.Before) || null;
+  beforePseudoElement(): DOMNode|undefined {
+    return this.#pseudoElements.get(DOMNode.PseudoElementNames.Before)?.at(-1);
   }
 
-  afterPseudoElement(): DOMNode|null {
-    if (!this.pseudoElementsInternal) {
-      return null;
-    }
-    return this.pseudoElementsInternal.get(DOMNode.PseudoElementNames.After) || null;
+  afterPseudoElement(): DOMNode|undefined {
+    return this.#pseudoElements.get(DOMNode.PseudoElementNames.After)?.at(-1);
   }
 
-  markerPseudoElement(): DOMNode|null {
-    if (!this.pseudoElementsInternal) {
-      return null;
-    }
-    return this.pseudoElementsInternal.get(DOMNode.PseudoElementNames.Marker) || null;
+  markerPseudoElement(): DOMNode|undefined {
+    return this.#pseudoElements.get(DOMNode.PseudoElementNames.Marker)?.at(-1);
+  }
+
+  pageTransitionPseudoElements(): DOMNode[] {
+    return [
+      ...this.#pseudoElements.get(DOMNode.PseudoElementNames.PageTransition) || [],
+      ...this.#pseudoElements.get(DOMNode.PseudoElementNames.PageTransitionContainer) || [],
+      ...this.#pseudoElements.get(DOMNode.PseudoElementNames.PageTransitionImageWrapper) || [],
+      ...this.#pseudoElements.get(DOMNode.PseudoElementNames.PageTransitionOutgoingImage) || [],
+      ...this.#pseudoElements.get(DOMNode.PseudoElementNames.PageTransitionIncomingImage) || [],
+    ];
   }
 
   hasAssignedSlot(): boolean {
@@ -632,7 +633,12 @@ export class DOMNode {
   removeChild(node: DOMNode): void {
     const pseudoType = node.pseudoType();
     if (pseudoType) {
-      this.pseudoElementsInternal.delete(pseudoType);
+      const updatedPseudoElements = this.#pseudoElements.get(pseudoType)?.filter(element => element !== node);
+      if (updatedPseudoElements && updatedPseudoElements.length > 0) {
+        this.#pseudoElements.set(pseudoType, updatedPseudoElements);
+      } else {
+        this.#pseudoElements.delete(pseudoType);
+      }
     } else {
       const shadowRootIndex = this.shadowRootsInternal.indexOf(node);
       if (shadowRootIndex !== -1) {
@@ -678,7 +684,12 @@ export class DOMNode {
       if (!pseudoType) {
         throw new Error('DOMNode.pseudoType() is expected to be defined.');
       }
-      this.pseudoElementsInternal.set(pseudoType, node);
+      const currentPseudoElements = this.#pseudoElements.get(pseudoType);
+      if (currentPseudoElements) {
+        currentPseudoElements.push(node);
+      } else {
+        this.#pseudoElements.set(pseudoType, [node]);
+      }
     }
   }
 
@@ -960,6 +971,11 @@ export namespace DOMNode {
     Before = 'before',
     After = 'after',
     Marker = 'marker',
+    PageTransition = 'page-transition',
+    PageTransitionContainer = 'page-transition-container',
+    PageTransitionImageWrapper = 'page-transition-image-wrapper',
+    PageTransitionOutgoingImage = 'page-transition-outgoing-image',
+    PageTransitionIncomingImage = 'page-transition-incoming-image',
   }
 
   // TODO(crbug.com/1167717): Make this a const enum again
@@ -1375,11 +1391,15 @@ export class DOMModel extends SDKModel<EventTypes> {
     if (!pseudoType) {
       throw new Error('DOMModel._pseudoElementAdded expects pseudoType to be defined.');
     }
-    const previousPseudoType = parent.pseudoElements().get(pseudoType);
-    if (previousPseudoType) {
-      throw new Error('DOMModel._pseudoElementAdded expects parent to not already have this pseudo type added.');
+    const currentPseudoElements = parent.pseudoElements().get(pseudoType);
+    if (currentPseudoElements) {
+      Platform.DCHECK(
+          () => pseudoType.startsWith('page-transition'),
+          'DOMModel.pseudoElementAdded expects parent to not already have this pseudo type added; only page-transition* pseudo elements can coexist under the same parent.');
+      currentPseudoElements.push(node);
+    } else {
+      parent.pseudoElements().set(pseudoType, [node]);
     }
-    parent.pseudoElements().set(pseudoType, node);
     this.dispatchEventToListeners(Events.NodeInserted, node);
     this.scheduleMutationEvent(node);
   }
@@ -1420,7 +1440,9 @@ export class DOMModel extends SDKModel<EventTypes> {
     }
     const pseudoElements = node.pseudoElements();
     for (const value of pseudoElements.values()) {
-      this.unbind(value);
+      for (const pseudoElement of value) {
+        this.unbind(pseudoElement);
+      }
     }
     const templateContent = node.templateContent();
     if (templateContent) {

package/front_end/entrypoints/main/MainImpl.ts

@@ -386,6 +386,11 @@ export class MainImpl {
     Root.Runtime.experiments.register(
         Root.Runtime.ExperimentName.HEADER_OVERRIDES, 'Local overrides for response headers');
 
+    // Enable CSS Authoring hints for inactive rules, deprecated properties, etc.
+    Root.Runtime.experiments.register(
+        Root.Runtime.ExperimentName.CSS_AUTHORING_HINTS,
+        'Enable CSS Authoring hints for inactive rules, deprecated properties, etc.');
+
     // New Lighthouse panel with timespan and snapshot mode
     Root.Runtime.experiments.register('lighthousePanelFR', 'Use Lighthouse panel with timespan and snapshot modes');
 
@@ -397,6 +402,10 @@ export class MainImpl {
     Root.Runtime.experiments.register(
         Root.Runtime.ExperimentName.EYEDROPPER_COLOR_PICKER, 'Enable color picking outside the browser window');
 
+    // Change grouping of sources panel to use Authored/Deployed trees
+    Root.Runtime.experiments.register(
+        Root.Runtime.ExperimentName.AUTHORED_DEPLOYED_GROUPING, 'Group sources into Authored and Deployed trees');
+
     Root.Runtime.experiments.enableExperimentsByDefault([
       'sourceOrderViewer',
       'hideIssuesFeature',

package/front_end/entrypoints/wasmparser_worker/WasmParserWorker.ts

@@ -55,7 +55,6 @@ export function dissambleWASM(
     const lines = [];
     const offsets = [];
     const functionBodyOffsets = [];
-    const MAX_LINES = 1000 * 1000;
     let chunkSize: number = 128 * 1024;
     let buffer: Uint8Array = new Uint8Array(chunkSize);
     let pendingSize = 0;
@@ -86,6 +85,7 @@ export function dissambleWASM(
           end: number,
         }>,
       });
+
       for (const line of result.lines) {
         lines.push(line);
       }
@@ -96,14 +96,6 @@ export function dissambleWASM(
         functionBodyOffsets.push(functionBodyOffset);
       }
 
-      if (lines.length > MAX_LINES) {
-        lines[MAX_LINES] = ';; .... text is truncated due to size';
-        lines.splice(MAX_LINES + 1);
-        if (offsets) {
-          offsets.splice(MAX_LINES + 1);
-        }
-        break;
-      }
       if (finished) {
         break;
       }
@@ -124,13 +116,9 @@ export function dissambleWASM(
       postMessage({event: 'progress', params: {percentage}});
     }
 
-    postMessage({event: 'progress', params: {percentage: 99}});
-
-    const source = lines.join('\n');
-
     postMessage({event: 'progress', params: {percentage: 100}});
 
-    postMessage({method: 'disassemble', result: {source, offsets, functionBodyOffsets}});
+    postMessage({method: 'disassemble', result: {lines, offsets, functionBodyOffsets}});
   } catch (error) {
     postMessage({method: 'disassemble', error});
   }

package/front_end/generated/protocol.ts

@@ -2351,6 +2351,10 @@ export namespace CSS {
      * The font-stretch.
      */
     fontStretch: string;
+    /**
+     * The font-display.
+     */
+    fontDisplay: string;
     /**
      * The unicode-range.
      */

package/front_end/legacy_test_runner/elements_test_runner/ElementsTestRunner.js

@@ -64,7 +64,7 @@ ElementsTestRunner.findNode = async function(matchFunction, callback) {
       }
 
       const pseudoElementsMap = node.pseudoElements();
-      const pseudoElements = pseudoElementsMap ? [...pseudoElementsMap.values()] : [];
+      const pseudoElements = pseudoElementsMap ? [...pseudoElementsMap.values()].flat() : [];
       const children = (node.children() || []).concat(node.shadowRoots()).concat(pseudoElements);
       if (node.templateContent()) {
         children.push(node.templateContent());

package/front_end/models/bindings/BreakpointManager.ts

@@ -133,7 +133,7 @@ export class BreakpointManager extends Common.ObjectWrapper.ObjectWrapper<EventT
     }
 
     const debuggerModel = script.debuggerModel;
-    const uiSourceCode = await this.getUpdatedUISourceCode(script);
+    const uiSourceCode = await this.getUISourceCodeWithUpdatedBreakpointInfo(script);
     if (this.#hasBreakpointsForUrl(script.sourceURL)) {
       await this.#restoreBreakpointsForUrl(uiSourceCode);
     }
@@ -165,7 +165,8 @@ export class BreakpointManager extends Common.ObjectWrapper.ObjectWrapper<EventT
     }
   }
 
-  async getUpdatedUISourceCode(script: SDK.Script.Script): Promise<Workspace.UISourceCode.UISourceCode> {
+  async getUISourceCodeWithUpdatedBreakpointInfo(script: SDK.Script.Script):
+      Promise<Workspace.UISourceCode.UISourceCode> {
     const isSnippet = script.sourceURL.startsWith('snippet://');
     const projectType = isSnippet ? Workspace.Workspace.projectTypes.Network : undefined;
 

package/front_end/models/emulation/EmulatedDevices.ts

@@ -725,6 +725,8 @@ const emulatedDevices = [
     'capabilities': ['touch', 'mobile'],
     'user-agent':
         'Mozilla/5.0 (Linux; Android 11; Pixel 3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.181 Mobile Safari/537.36',
+    'user-agent-metadata':
+        {'platform': 'Android', 'platformVersion': '11', 'architecture': '', 'model': 'Pixel 3', 'mobile': true},
     'type': 'phone',
   },
   {
@@ -745,6 +747,8 @@ const emulatedDevices = [
     'capabilities': ['touch', 'mobile'],
     'user-agent':
         'Mozilla/5.0 (Linux; Android 11; Pixel 5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.91 Mobile Safari/537.36',
+    'user-agent-metadata':
+        {'platform': 'Android', 'platformVersion': '11', 'architecture': '', 'model': 'Pixel 5', 'mobile': true},
     'type': 'phone',
   },
   {
@@ -765,6 +769,8 @@ const emulatedDevices = [
     'capabilities': ['touch', 'mobile'],
     'user-agent':
         'Mozilla/5.0 (Linux; Android 8.0.0; SM-G955U Build/R16NW) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Mobile Safari/537.36',
+    'user-agent-metadata':
+        {'platform': 'Android', 'platformVersion': '8.0.0', 'architecture': '', 'model': 'SM-G955U', 'mobile': true},
     'type': 'phone',
   },
   {
@@ -785,6 +791,8 @@ const emulatedDevices = [
     'capabilities': ['touch', 'mobile'],
     'user-agent':
         'Mozilla/5.0 (Linux; Android 10; SM-G981B) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.162 Mobile Safari/537.36',
+    'user-agent-metadata':
+        {'platform': 'Android', 'platformVersion': '10', 'architecture': '', 'model': 'SM-G981B', 'mobile': true},
     'type': 'phone',
   },
   {
@@ -869,7 +877,9 @@ const emulatedDevices = [
     },
     'capabilities': ['touch', 'mobile'],
     'user-agent':
-        'Mozilla/5.0 (Linux; Android 8.0; Pixel 2 Build/OPD3.170816.012) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/%s Mobile Safari/537.36',
+        'Mozilla/5.0 (Linux; Android 11.0; Surface Duo) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/%s Mobile Safari/537.36',
+    'user-agent-metadata':
+        {'platform': 'Android', 'platformVersion': '11.0', 'architecture': '', 'model': 'Surface Duo', 'mobile': true},
     'type': 'phone',
     'modes': [
       {'title': 'default', 'orientation': 'vertical', 'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0}},
@@ -896,7 +906,9 @@ const emulatedDevices = [
     },
     'capabilities': ['touch', 'mobile'],
     'user-agent':
-        'Mozilla/5.0 (Linux; Android 8.0; Pixel 2 Build/OPD3.170816.012) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/%s Mobile Safari/537.36',
+        'Mozilla/5.0 (Linux; Android 9.0; SAMSUNG SM-F900U Build/PPR1.180610.011) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/%s Mobile Safari/537.36',
+    'user-agent-metadata':
+        {'platform': 'Android', 'platformVersion': '9.0', 'architecture': '', 'model': 'SM-F900U', 'mobile': true},
     'type': 'phone',
     'modes': [
       {'title': 'default', 'orientation': 'vertical', 'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0}},
@@ -927,6 +939,8 @@ const emulatedDevices = [
     'capabilities': ['touch', 'mobile'],
     'user-agent':
         'Mozilla/5.0 (Linux; Android 8.0.0; SM-G955U Build/R16NW) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Mobile Safari/537.36',
+    'user-agent-metadata':
+        {'platform': 'Android', 'platformVersion': '8.0.0', 'architecture': '', 'model': 'SM-G955U', 'mobile': true},
     'type': 'phone',
   },
   {
@@ -976,6 +990,8 @@ const emulatedDevices = [
     'capabilities': ['touch', 'mobile'],
     'user-agent':
         'Mozilla/5.0 (Linux; Android) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.109 Safari/537.36 CrKey/1.54.248666',
+    'user-agent-metadata':
+        {'platform': 'Android', 'platformVersion': '', 'architecture': '', 'model': '', 'mobile': true},
     'type': 'tablet',
     'modes': [{'title': 'default', 'orientation': 'horizontal'}],
   },
@@ -1409,6 +1425,8 @@ const emulatedDevices = [
     'capabilities': ['touch', 'mobile'],
     'user-agent':
         'Mozilla/5.0 (Windows Phone 10.0; Android 4.2.1; Microsoft; Lumia 550) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Mobile Safari/537.36 Edge/14.14263',
+    'user-agent-metadata':
+        {'platform': 'Android', 'platformVersion': '4.2.1', 'architecture': '', 'model': 'Lumia 550', 'mobile': true},
     'type': 'phone',
   },
   {
@@ -1422,6 +1440,8 @@ const emulatedDevices = [
     'capabilities': ['touch', 'mobile'],
     'user-agent':
         'Mozilla/5.0 (Windows Phone 10.0; Android 4.2.1; Microsoft; Lumia 950) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Mobile Safari/537.36 Edge/14.14263',
+    'user-agent-metadata':
+        {'platform': 'Android', 'platformVersion': '4.2.1', 'architecture': '', 'model': 'Lumia 950', 'mobile': true},
     'type': 'phone',
   },
   {
@@ -1512,6 +1532,13 @@ const emulatedDevices = [
     'capabilities': ['touch', 'mobile'],
     'user-agent':
         'Mozilla/5.0 (Mobile; LYF/F300B/LYF-F300B-001-01-15-130718-i;Android; rv:48.0) Gecko/48.0 Firefox/48.0 KAIOS/2.5',
+    'user-agent-metadata': {
+      'platform': 'Android',
+      'platformVersion': '',
+      'architecture': '',
+      'model': 'LYF/F300B/LYF-F300B-001-01-15-130718-i',
+      'mobile': true,
+    },
     'type': 'phone',
   },
   {