chrome-devtools-frontend 1.0.1020771 → 1.0.1021097

package/docs/triage_guidelines.md

@@ -50,16 +50,18 @@ Issues in the untriaged queue should receive a meaningful response within a busi
 - Put proper `Platform>DevTools>XXX` component(s) on the issue and do an initial check-in regarding the priority.
 - Put one of the following labels on it and set the status to `Available`:
   - `Hotlist-DevTools-ProductReview` if it's controversial or clear that consensus needs to be built first.
-  - `Hotlist-DevTools-BrowserAutomation-Backlog` if it's an issue related to ChromeDriver or puppeteer.
-  - `Hotlist-DevTools-Debugging-Backlog` if it's a debugging issue.
-  - `Hotlist-DevTools-DesignAccessibility-Backlog` if it's a design or accessibility issue.
-  - `Hotlist-DevTools-Performance-Backlog` if the issue is related to our performance tooling (i.e. Performance panel, Lighthouse).
-  - `Hotlist-DevTools-Backlog` if it's a general DevTools issue that is not specific to one of the core areas.
+  - `Team-DevTools-BrowserAutomation` if it's an issue related to ChromeDriver or puppeteer.
+  - `Team-DevTools-RuntimeDebugging` if it's a JavaScript or WebAssembly debugging issue.
+  - `Team-DevTools-WebDebugging` if it's a Web specific debugging issue (i.e. Network or Application panel).
+  - `Team-DevTools-DesignAccessibility` if it's a design or accessibility issue.
+  - `Team-DevTools-Performance` if the issue is related to our performance tooling (i.e. Performance panel, Lighthouse).
+  - `Team-DevTools-RecordReplay` if it's an issue with the recorder or puppeteer.
+  - No specific `Team` or `Hotlist` if it doesn't fit any specific team otherwise. Make sure to have the `Platform>DevTools` component (or a subcomponent) on it though.
 - Also remember to put the `Needs-UX` label on it, if help from a designer is likely to be required.
 
 ### Setting Assigned or Available
 
-Set issues to Available if they don’t need immediate action and nobody right now and in the short-term future (an iteration) needs to work on it.
+Set issues to `Available` if they don’t need immediate action and nobody right now and in the short-term future (an iteration) needs to work on it.
 
 Issues that are handled by Microsoft have the label “Hotlist-DevTools-MS-Backlog” and “Hotlist-DevTools-MS-CurrentSprint” respectively and can be considered triaged.
 
@@ -107,7 +109,7 @@ The combination of the label “M-<milestone>” and “Release-Block-<channel>
 
 ### Managing the backlog
 
-[[Query]](https://bugs.chromium.org/p/chromium/issues/list?q=Hotlist%3DDevTools-Backlog)
+[[Query]](https://bugs.chromium.org/p/chromium/issues/list?q=component%3APlatform%3EDevTools%20status%3AAvailable)
 
 Managing the backlog is out of scope for the triage rotation. The backlog will be groomed continuously by hablich@ for now. The SLA is that there should be a maximum of 50 issues in there.
 

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

@@ -12278,9 +12278,6 @@
   "ui/legacy/components/object_ui/ObjectPropertiesSection.ts | noProperties": {
     "message": "No properties"
   },
-  "ui/legacy/components/object_ui/ObjectPropertiesSection.ts | noPropertyGetter": {
-    "message": "No property getter"
-  },
   "ui/legacy/components/object_ui/ObjectPropertiesSection.ts | showAllD": {
     "message": "Show all {PH1}"
   },
@@ -12293,8 +12290,11 @@
   "ui/legacy/components/object_ui/ObjectPropertiesSection.ts | unknown": {
     "message": "unknown"
   },
-  "ui/legacy/components/object_ui/ObjectPropertiesSection.ts | unreadable": {
-    "message": "<unreadable>"
+  "ui/legacy/components/object_ui/ObjectPropertiesSection.ts | valueNotAccessibleToTheDebugger": {
+    "message": "Value is not accessible to the debugger"
+  },
+  "ui/legacy/components/object_ui/ObjectPropertiesSection.ts | valueUnavailable": {
+    "message": "<value unavailable>"
   },
   "ui/legacy/components/object_ui/RemoteObjectPreviewFormatter.ts | empty": {
     "message": "empty"

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

@@ -12278,9 +12278,6 @@
   "ui/legacy/components/object_ui/ObjectPropertiesSection.ts | noProperties": {
     "message": "N̂ó p̂ŕôṕêŕt̂íêś"
   },
-  "ui/legacy/components/object_ui/ObjectPropertiesSection.ts | noPropertyGetter": {
-    "message": "N̂ó p̂ŕôṕêŕt̂ý ĝét̂t́êŕ"
-  },
   "ui/legacy/components/object_ui/ObjectPropertiesSection.ts | showAllD": {
     "message": "Ŝh́ôẃ âĺl̂ {PH1}"
   },
@@ -12293,8 +12290,11 @@
   "ui/legacy/components/object_ui/ObjectPropertiesSection.ts | unknown": {
     "message": "ûńk̂ńôẃn̂"
   },
-  "ui/legacy/components/object_ui/ObjectPropertiesSection.ts | unreadable": {
-    "message": "<ûńr̂éâd́âb́l̂é>"
+  "ui/legacy/components/object_ui/ObjectPropertiesSection.ts | valueNotAccessibleToTheDebugger": {
+    "message": "V̂ál̂úê íŝ ńôt́ âćĉéŝśîb́l̂é t̂ó t̂h́ê d́êb́ûǵĝér̂"
+  },
+  "ui/legacy/components/object_ui/ObjectPropertiesSection.ts | valueUnavailable": {
+    "message": "<v̂ál̂úê ún̂áv̂áîĺâb́l̂é>"
   },
   "ui/legacy/components/object_ui/RemoteObjectPreviewFormatter.ts | empty": {
     "message": "êḿp̂t́ŷ"

package/front_end/core/sdk/CSSModel.ts

@@ -313,7 +313,10 @@ export class CSSModel extends SDKModel<EventTypes> {
     return classNames || [];
   }
 
-  getComputedStyle(nodeId: Protocol.DOM.NodeId): Promise<Map<string, string>|null> {
+  async getComputedStyle(nodeId: Protocol.DOM.NodeId): Promise<Map<string, string>|null> {
+    if (!this.isEnabled()) {
+      await this.enable();
+    }
     return this.#styleLoader.computedStylePromise(nodeId);
   }
 
@@ -683,7 +686,7 @@ export class CSSModel extends SDKModel<EventTypes> {
     // is different from the regular navigations. In this case, events about CSS
     // stylesheet has already been received and they are mixed with the previous page
     // stylesheets. Therefore, we re-enable the CSS agent to get fresh events.
-    // For the regular navigatons, we can just clear the local data because events about
+    // For the regular navigations, we can just clear the local data because events about
     // stylesheets will arrive later.
     if (event.data.backForwardCacheDetails.restoredFromCache) {
       await this.suspendModel();

package/front_end/models/bindings/BreakpointManager.ts

@@ -40,6 +40,7 @@ import {DebuggerWorkspaceBinding} from './DebuggerWorkspaceBinding.js';
 import type {LiveLocation} from './LiveLocation.js';
 import {LiveLocationPool} from './LiveLocation.js';
 import {DefaultScriptMapping} from './DefaultScriptMapping.js';
+import {ResourceScriptMapping} from './ResourceScriptMapping.js';
 
 let breakpointManagerInstance: BreakpointManager;
 
@@ -170,12 +171,22 @@ export class BreakpointManager extends Common.ObjectWrapper.ObjectWrapper<EventT
     const isSnippet = script.sourceURL.startsWith('snippet://');
     const projectType = isSnippet ? Workspace.Workspace.projectTypes.Network : undefined;
 
-    // Handle inline scripts without sourceURL comment separately:
+    // Some temporary workarounds that will probably be replaced by live locations.
+    // 1. Handle inline scripts without sourceURL comment separately:
     // The UISourceCode of inline scripts without sourceURLs will not be availabe
     // until a later point. Use the v8 script for setting the breakpoint.
+    // 2. Handle resources that have scripts differently: nowadays they don't use the
+    // sourceURL directly anymore, but are resolved relatively to the parents document's
+    // base URL; so resolve it before awaiting its uiSourceCode.
     const isInlineScriptWithoutSourceURL = script.isInlineScript() && !script.hasSourceURL;
-    const sourceURL =
-        isInlineScriptWithoutSourceURL ? DefaultScriptMapping.createV8ScriptURL(script) : script.sourceURL;
+    const hasResourceScriptMapping = !script.isLiveEdit() && script.sourceURL && script.hasSourceURL;
+    let sourceURL = script.sourceURL;
+    if (isInlineScriptWithoutSourceURL) {
+      sourceURL = DefaultScriptMapping.createV8ScriptURL(script);
+    } else if (hasResourceScriptMapping) {
+      sourceURL = ResourceScriptMapping.resolveRelativeSourceURL(script, script.sourceURL);
+    }
+
     const uiSourceCode =
         await Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodeForURLPromise(sourceURL, projectType);
 

package/front_end/models/bindings/ResourceScriptMapping.ts

@@ -30,10 +30,10 @@
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
-import type * as Platform from '../../core/platform/platform.js';
+import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import * as Workspace from '../workspace/workspace.js';
 import * as Protocol from '../../generated/protocol.js';
+import * as Workspace from '../workspace/workspace.js';
 
 import type {Breakpoint} from './BreakpointManager.js';
 import {BreakpointManager} from './BreakpointManager.js';
@@ -65,7 +65,7 @@ export class ResourceScriptMapping implements DebuggerSourceMapping {
   readonly debuggerWorkspaceBinding: DebuggerWorkspaceBinding;
   readonly #uiSourceCodeToScriptFile: Map<Workspace.UISourceCode.UISourceCode, ResourceScriptFile>;
   readonly #projects: Map<string, ContentProviderBasedProject>;
-  #acceptedScripts: Set<SDK.Script.Script>;
+  readonly #scriptToUISourceCode: Map<SDK.Script.Script, Workspace.UISourceCode.UISourceCode>;
   readonly #eventListeners: Common.EventTarget.EventDescriptor[];
 
   constructor(
@@ -78,21 +78,30 @@ export class ResourceScriptMapping implements DebuggerSourceMapping {
 
     this.#projects = new Map();
 
-    this.#acceptedScripts = new Set();
+    this.#scriptToUISourceCode = new Map();
     const runtimeModel = debuggerModel.runtimeModel();
     this.#eventListeners = [
       this.debuggerModel.addEventListener(
-          SDK.DebuggerModel.Events.ParsedScriptSource,
-          event => {
-            void this.parsedScriptSource(event);
-          },
-          this),
+          SDK.DebuggerModel.Events.ParsedScriptSource, event => this.addScript(event.data), this),
       this.debuggerModel.addEventListener(SDK.DebuggerModel.Events.GlobalObjectCleared, this.globalObjectCleared, this),
       runtimeModel.addEventListener(
           SDK.RuntimeModel.Events.ExecutionContextDestroyed, this.executionContextDestroyed, this),
+      runtimeModel.target().targetManager().addEventListener(
+          SDK.TargetManager.Events.InspectedURLChanged, this.inspectedURLChanged, this),
     ];
   }
 
+  static resolveRelativeSourceURL(script: SDK.Script.Script, url: Platform.DevToolsPath.UrlString):
+      Platform.DevToolsPath.UrlString {
+    let target: SDK.Target.Target|null = script.debuggerModel.target();
+    while (target && target.type() !== SDK.Target.Type.Frame) {
+      target = target.parentTarget();
+    }
+    const baseURL = target?.inspectedURL() ?? Platform.DevToolsPath.EmptyUrlString;
+    url = Common.ParsedURL.ParsedURL.completeURL(baseURL, url) ?? url;
+    return url;
+  }
+
   private project(script: SDK.Script.Script): ContentProviderBasedProject {
     const prefix = script.isContentScript() ? 'js:extensions:' : 'js::';
     const projectId = prefix + this.debuggerModel.target().id() + ':' + script.frameId;
@@ -113,8 +122,7 @@ export class ResourceScriptMapping implements DebuggerSourceMapping {
     if (!script) {
       return null;
     }
-    const project = this.project(script);
-    const uiSourceCode = project.uiSourceCodeForURL(script.sourceURL);
+    const uiSourceCode = this.#scriptToUISourceCode.get(script);
     if (!uiSourceCode) {
       return null;
     }
@@ -147,41 +155,63 @@ export class ResourceScriptMapping implements DebuggerSourceMapping {
     return [this.debuggerModel.createRawLocation(script, lineNumber, columnNumber)];
   }
 
-  private acceptsScript(script: SDK.Script.Script): boolean {
-    if (!script.sourceURL || script.isLiveEdit() || (script.isInlineScript() && !script.hasSourceURL)) {
-      return false;
-    }
-    // Filter out embedder injected content scripts.
-    if (script.isContentScript() && !script.hasSourceURL) {
-      const parsedURL = new Common.ParsedURL.ParsedURL(script.sourceURL);
-      if (!parsedURL.isValid) {
-        return false;
+  private inspectedURLChanged(event: Common.EventTarget.EventTargetEvent<SDK.Target.Target>): void {
+    for (let target: SDK.Target.Target|null = this.debuggerModel.target(); target !== event.data;
+         target = target.parentTarget()) {
+      if (target === null) {
+        return;
       }
     }
-    return true;
+
+    // Just remove and readd all scripts to ensure their URLs are reflected correctly.
+    for (const script of Array.from(this.#scriptToUISourceCode.keys())) {
+      this.removeScript(script);
+      this.addScript(script);
+    }
   }
 
-  private async parsedScriptSource(event: Common.EventTarget.EventTargetEvent<SDK.Script.Script>): Promise<void> {
-    const script = event.data;
-    if (!this.acceptsScript(script)) {
+  private addScript(script: SDK.Script.Script): void {
+    // Ignore live edit scripts here.
+    if (script.isLiveEdit()) {
       return;
     }
-    this.#acceptedScripts.add(script);
-    const originalContentProvider = script.originalContentProvider();
 
-    const url = script.sourceURL;
-    const project = this.project(script);
+    let url = script.sourceURL;
+    if (!url) {
+      return;
+    }
+
+    if (script.hasSourceURL) {
+      // Try to resolve `//# sourceURL=` annotations relative to
+      // the base URL, according to the sourcemap specification.
+      url = ResourceScriptMapping.resolveRelativeSourceURL(script, url);
+    } else {
+      // Ignore inline <script>s without `//# sourceURL` annotation here.
+      if (script.isInlineScript()) {
+        return;
+      }
+
+      // Filter out embedder injected content scripts.
+      if (script.isContentScript()) {
+        const parsedURL = new Common.ParsedURL.ParsedURL(url);
+        if (!parsedURL.isValid) {
+          return;
+        }
+      }
+    }
 
     // Remove previous UISourceCode, if any
+    const project = this.project(script);
     const oldUISourceCode = project.uiSourceCodeForURL(url);
     if (oldUISourceCode) {
-      const scriptFile = this.#uiSourceCodeToScriptFile.get(oldUISourceCode);
-      if (scriptFile && scriptFile.script) {
-        await this.removeScript(scriptFile.script);
+      const oldScriptFile = this.#uiSourceCodeToScriptFile.get(oldUISourceCode);
+      if (oldScriptFile && oldScriptFile.script) {
+        this.removeScript(oldScriptFile.script);
       }
     }
 
     // Create UISourceCode.
+    const originalContentProvider = script.originalContentProvider();
     const uiSourceCode = project.createUISourceCode(url, originalContentProvider.contentType());
     NetworkProject.setInitialFrameAttribution(uiSourceCode, script.frameId);
     const metadata = metadataForURL(this.debuggerModel.target(), script.frameId, url);
@@ -189,61 +219,54 @@ export class ResourceScriptMapping implements DebuggerSourceMapping {
     // Bind UISourceCode to scripts.
     const scriptFile = new ResourceScriptFile(this, uiSourceCode, [script]);
     this.#uiSourceCodeToScriptFile.set(uiSourceCode, scriptFile);
+    this.#scriptToUISourceCode.set(script, uiSourceCode);
 
     const mimeType = script.isWasm() ? 'application/wasm' : 'text/javascript';
     project.addUISourceCodeWithProvider(uiSourceCode, originalContentProvider, metadata, mimeType);
-    await this.debuggerWorkspaceBinding.updateLocations(script);
+    void this.debuggerWorkspaceBinding.updateLocations(script);
   }
 
   scriptFile(uiSourceCode: Workspace.UISourceCode.UISourceCode): ResourceScriptFile|null {
     return this.#uiSourceCodeToScriptFile.get(uiSourceCode) || null;
   }
 
-  private async removeScript(script: SDK.Script.Script): Promise<void> {
-    if (!this.#acceptedScripts.has(script)) {
+  private removeScript(script: SDK.Script.Script): void {
+    const uiSourceCode = this.#scriptToUISourceCode.get(script);
+    if (!uiSourceCode) {
       return;
     }
-    this.#acceptedScripts.delete(script);
-    const project = this.project(script);
-    const uiSourceCode = (project.uiSourceCodeForURL(script.sourceURL) as Workspace.UISourceCode.UISourceCode);
     const scriptFile = this.#uiSourceCodeToScriptFile.get(uiSourceCode);
     if (scriptFile) {
       scriptFile.dispose();
     }
     this.#uiSourceCodeToScriptFile.delete(uiSourceCode);
-    project.removeFile(script.sourceURL);
-    await this.debuggerWorkspaceBinding.updateLocations(script);
+    this.#scriptToUISourceCode.delete(script);
+    const project = uiSourceCode.project() as ContentProviderBasedProject;
+    project.removeFile(uiSourceCode.url());
+    void this.debuggerWorkspaceBinding.updateLocations(script);
   }
 
   private executionContextDestroyed(event: Common.EventTarget.EventTargetEvent<SDK.RuntimeModel.ExecutionContext>):
       void {
     const executionContext = event.data;
-    const scripts = this.debuggerModel.scriptsForExecutionContext(executionContext);
-    for (const script of scripts) {
-      void this.removeScript(script);
+    for (const script of this.debuggerModel.scriptsForExecutionContext(executionContext)) {
+      this.removeScript(script);
     }
   }
 
   private globalObjectCleared(): void {
-    const scripts = Array.from(this.#acceptedScripts);
-    for (const script of scripts) {
-      void this.removeScript(script);
+    for (const script of this.#scriptToUISourceCode.keys()) {
+      this.removeScript(script);
     }
   }
 
   resetForTest(): void {
-    const scripts = Array.from(this.#acceptedScripts);
-    for (const script of scripts) {
-      void this.removeScript(script);
-    }
+    this.globalObjectCleared();
   }
 
   dispose(): void {
     Common.EventTarget.removeEventListeners(this.#eventListeners);
-    const scripts = Array.from(this.#acceptedScripts);
-    for (const script of scripts) {
-      void this.removeScript(script);
-    }
+    this.globalObjectCleared();
     for (const project of this.#projects.values()) {
       project.removeProject();
     }

package/front_end/panels/application/components/protocolHandlersView.css

@@ -11,6 +11,10 @@
   padding: 2px 0; /* adjust focus ring size */
 }
 
+.devtools-link:focus-visible {
+  outline-width: unset;
+}
+
 input.devtools-text-input[type="text"] {
   padding: 3px 6px;
   margin-left: 4px;

package/front_end/panels/elements/ElementsPanel.ts

@@ -56,6 +56,7 @@ import {ElementsTreeElementHighlighter} from './ElementsTreeElementHighlighter.j
 import {ElementsTreeOutline} from './ElementsTreeOutline.js';
 import type {MarkerDecorator} from './MarkerDecorator.js';
 import {MetricsSidebarPane} from './MetricsSidebarPane.js';
+import {LayoutSidebarPane} from './LayoutSidebarPane.js';
 import {Events as StylesSidebarPaneEvents, StylesSidebarPane} from './StylesSidebarPane.js';
 import type {StylesUpdateCompletedEvent} from './StylesSidebarPane.js';
 
@@ -1143,6 +1144,8 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
       if (treeElement) {
         void treeElement.updateStyleAdorners();
       }
+
+      LayoutSidebarPane.instance().update();
     }
   }
 

package/front_end/panels/elements/LayoutSidebarPane.ts

@@ -61,8 +61,6 @@ const gridNodesToElements = (nodes: SDK.DOMModel.DOMNode[]): ElementsComponents.
   });
 };
 
-let layoutSidebarPaneInstance: LayoutSidebarPane;
-
 const flexContainerNodesToElements = (nodes: SDK.DOMModel.DOMNode[]): ElementsComponents.LayoutPane.LayoutElement[] => {
   return nodes.map(node => {
     const layoutElement = nodeToLayoutElement(node);
@@ -86,6 +84,7 @@ const flexContainerNodesToElements = (nodes: SDK.DOMModel.DOMNode[]): ElementsCo
   });
 };
 
+let layoutSidebarPaneInstance: LayoutSidebarPane;
 export class LayoutSidebarPane extends UI.ThrottledWidget.ThrottledWidget {
   private layoutPane: ElementsComponents.LayoutPane.LayoutPane;
   private readonly settings: string[];

package/front_end/ui/legacy/components/object_ui/ObjectPropertiesSection.ts

@@ -83,15 +83,18 @@ const UIStrings = {
   */
   showAllD: 'Show all {PH1}',
   /**
-  *@description Value element text content in Object Properties Section. Shown when the developer is
-  *viewing a JavaScript object, but one of the properties is not readable and therefore can't be
-  *displayed. This string should be translated.
+  * @description Value element text content in Object Properties Section. Shown when the developer is
+  * viewing a variable in the Scope view, whose value is not available (i.e. because it was optimized
+  * out) by the JavaScript engine, or inspecting a JavaScript object accessor property, which has no
+  * getter. This string should be translated.
   */
-  unreadable: '<unreadable>',
+  valueUnavailable: '<value unavailable>',
   /**
-  *@description Value element title in Object Properties Section
-  */
-  noPropertyGetter: 'No property getter',
+   * @description Tooltip for value elements in the Scope view that refer to variables whose values
+   * aren't accessible to the debugger (potentially due to being optimized out by the JavaScript
+   * engine), or for JavaScript object accessor properties which have no getter.
+   */
+  valueNotAccessibleToTheDebugger: 'Value is not accessible to the debugger',
   /**
   *@description A context menu item in the Watch Expressions Sidebar Pane of the Sources panel and Network pane request.
   */
@@ -1105,9 +1108,9 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
       }, false);
     } else {
       this.valueElement = document.createElement('span');
-      this.valueElement.classList.add('object-value-undefined');
-      this.valueElement.textContent = i18nString(UIStrings.unreadable);
-      UI.Tooltip.Tooltip.install(this.valueElement, i18nString(UIStrings.noPropertyGetter));
+      this.valueElement.classList.add('object-value-unavailable');
+      this.valueElement.textContent = i18nString(UIStrings.valueUnavailable);
+      UI.Tooltip.Tooltip.install(this.valueElement, i18nString(UIStrings.valueNotAccessibleToTheDebugger));
     }
 
     const valueText = this.valueElement.textContent;

package/front_end/ui/legacy/components/object_ui/objectValue.css

@@ -65,6 +65,10 @@
   color: var(--color-text-disabled);
 }
 
+.object-value-unavailable {
+  color: var(--color-syntax-2);
+}
+
 .object-value-calculate-value-button:hover {
   text-decoration: underline;
 }

package/package.json

@@ -55,5 +55,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "vpython third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.1020771"
+  "version": "1.0.1021097"
 }