chrome-devtools-frontend 1.0.1008646 → 1.0.1009515

package/.vscode/devtools-workspace-launch.json

@@ -8,7 +8,7 @@
       "preLaunchTask": "1-build_Debug",
       "runtimeExecutable": "/usr/bin/npm",
       "runtimeArgs": ["run", "unittest"],
-      "port": 9222,
+      "port": 7722,
       "timeout": 30000,
       "browserLaunchLocation": "workspace",
       "outputCapture": "std",

package/config/gni/devtools_grd_files.gni

@@ -984,7 +984,6 @@ grd_files_debug_sources = [
   "front_end/panels/elements/components/queryContainer.css.js",
   "front_end/panels/elements/components/stylePropertyEditor.css.js",
   "front_end/panels/elements/computedStyleSidebarPane.css.js",
-  "front_end/panels/elements/computedStyleWidgetTree.css.js",
   "front_end/panels/elements/domLinkifier.css.js",
   "front_end/panels/elements/elementStatePaneWidget.css.js",
   "front_end/panels/elements/elementsPanel.css.js",

package/extension-api/ExtensionAPI.d.ts

@@ -172,7 +172,8 @@ export namespace Chrome {
     }
 
     export interface RecorderExtensionPlugin {
-      stringify(obj: Record<string, any>): Promise<string>;
+      stringify(recording: Record<string, any>): Promise<string>;
+      stringifyStep(step: Record<string, any>): Promise<string>;
     }
 
     export interface LanguageExtensionPlugin {
@@ -278,7 +279,8 @@ export namespace Chrome {
     }
 
     export interface RecorderExtensions {
-      registerRecorderExtensionPlugin(plugin: RecorderExtensionPlugin, pluginName: string): Promise<void>;
+      registerRecorderExtensionPlugin(plugin: RecorderExtensionPlugin, pluginName: string, mimeType: string):
+          Promise<void>;
       unregisterRecorderExtensionPlugin(plugin: RecorderExtensionPlugin): Promise<void>;
     }
 

package/front_end/core/sdk/Target.ts

@@ -61,8 +61,8 @@ export class Target extends ProtocolClient.InspectorBackend.TargetBase {
             Capability.IO | Capability.Media | Capability.Inspector;
         break;
       case Type.Worker:
-        this.#capabilitiesMask =
-            Capability.JS | Capability.Log | Capability.Network | Capability.Target | Capability.IO | Capability.Media;
+        this.#capabilitiesMask = Capability.JS | Capability.Log | Capability.Network | Capability.Target |
+            Capability.IO | Capability.Media | Capability.Emulation;
         break;
       case Type.Node:
         this.#capabilitiesMask = Capability.JS;

package/front_end/legacy_test_runner/elements_test_runner/ElementsTestRunner.js

@@ -183,20 +183,20 @@ ElementsTestRunner.computedStyleWidget = function() {
 
 ElementsTestRunner.dumpComputedStyle = async function(doNotAutoExpand, printInnerText) {
   const computed = ElementsTestRunner.computedStyleWidget();
-  const treeOutline = computed.propertiesOutline;
-  const children = treeOutline.rootElement().children();
+  const treeOutline = computed.propertiesOutline.querySelector('devtools-tree-outline');
+  const children = treeOutline.shadowRoot.querySelector('[role="treeitem"]');
 
   for (const treeElement of children) {
-    const property = computed.propertyByTreeElement.get(treeElement);
-    if (!property || property.name === 'width' || property.name === 'height') {
+    const property = treeElement.querySelector('devtools-computed-style-property')?.shadowRoot;
+    const propertyName = text(property?.querySelector('.webkit-css-property'));
+    const propertyValue = text(property?.querySelector('.value'));
+    if (!property || propertyName === 'width' || propertyName === 'height') {
       continue;
     }
 
-    const propertyName = text(treeElement.title.querySelector('.webkit-css-property'));
-    const propertyValue = text(treeElement.title.querySelector('.value'));
     TestRunner.addResult(`${propertyName}: ${propertyValue};`);
 
-    if (doNotAutoExpand && !treeElement.expanded) {
+    if (doNotAutoExpand && !treeElement.ariaExpanded) {
       continue;
     }
 
@@ -211,7 +211,7 @@ ElementsTestRunner.dumpComputedStyle = async function(doNotAutoExpand, printInne
       dumpText += text(trace.querySelector('.value'));
       dumpText += ' - ';
       dumpText += text(trace.shadowRoot.querySelector('.trace-selector'));
-      const link = trace.querySelector('[slot="trace-link"]');
+      const link = trace.shadowRoot.querySelector('.trace-link');
 
       if (link) {
         dumpText += ' ' + await extractLinkText(link);

package/front_end/models/bindings/ResourceMapping.ts

@@ -14,7 +14,7 @@ import {DebuggerWorkspaceBinding} from './DebuggerWorkspaceBinding.js';
 import {NetworkProject} from './NetworkProject.js';
 import {resourceMetadata} from './ResourceUtils.js';
 
-let resourceMappingInstance: ResourceMapping;
+let resourceMappingInstance: ResourceMapping|undefined;
 
 const styleSheetOffsetMap = new WeakMap<SDK.CSSStyleSheetHeader.CSSStyleSheetHeader, TextUtils.TextRange.TextRange>();
 const scriptOffsetMap = new WeakMap<SDK.Script.Script, TextUtils.TextRange.TextRange>();
@@ -47,6 +47,10 @@ export class ResourceMapping implements SDK.TargetManager.SDKModelObserver<SDK.R
     return resourceMappingInstance;
   }
 
+  static removeInstance(): void {
+    resourceMappingInstance = undefined;
+  }
+
   modelAdded(resourceTreeModel: SDK.ResourceTreeModel.ResourceTreeModel): void {
     const info = new ModelInfo(this.#workspace, resourceTreeModel);
     this.#modelToInfo.set(resourceTreeModel, info);
@@ -97,17 +101,27 @@ export class ResourceMapping implements SDK.TargetManager.SDKModelObserver<SDK.R
     if (!info) {
       return null;
     }
-    const uiSourceCode = info.getProject().uiSourceCodeForURL(script.sourceURL);
+    const embedderName = script.embedderName();
+    if (!embedderName) {
+      return null;
+    }
+    const uiSourceCode = info.getProject().uiSourceCodeForURL(embedderName);
     if (!uiSourceCode) {
       return null;
     }
     const offset = scriptOffsetMap.get(script) ||
         TextUtils.TextRange.TextRange.createFromLocation(script.lineOffset, script.columnOffset);
-    const lineNumber = jsLocation.lineNumber + offset.startLine - script.lineOffset;
+    let lineNumber = jsLocation.lineNumber + offset.startLine - script.lineOffset;
     let columnNumber = jsLocation.columnNumber;
     if (jsLocation.lineNumber === script.lineOffset) {
       columnNumber += offset.startColumn - script.columnOffset;
     }
+    if (script.hasSourceURL) {
+      if (lineNumber === 0) {
+        columnNumber += script.columnOffset;
+      }
+      lineNumber += script.lineOffset;
+    }
     return uiSourceCode.uiLocation(lineNumber, columnNumber);
   }
 
@@ -124,14 +138,33 @@ export class ResourceMapping implements SDK.TargetManager.SDKModelObserver<SDK.R
     if (!debuggerModel) {
       return [];
     }
-    const location = debuggerModel.createRawLocationByURL(uiSourceCode.url(), lineNumber, columnNumber);
-    if (location) {
-      const script = location.script();
-      if (script && script.containsLocation(lineNumber, columnNumber)) {
-        return [location];
+    const locations = [];
+    for (const script of debuggerModel.scripts()) {
+      if (script.embedderName() !== uiSourceCode.url()) {
+        continue;
+      }
+      const {startLine, startColumn} = scriptOffsetMap.get(script) ||
+          TextUtils.TextRange.TextRange.createFromLocation(script.lineOffset, script.columnOffset);
+      if (lineNumber < startLine || (lineNumber === startLine && columnNumber < startColumn)) {
+        continue;
+      }
+      const endLine = startLine + (script.endLine - script.lineOffset);
+      const endColumn =
+          startLine === endLine ? startColumn + (script.endColumn - script.columnOffset) : script.endColumn;
+      if (lineNumber > endLine || (lineNumber === endLine && columnNumber > endColumn)) {
+        continue;
+      }
+      let scriptLineNumber = lineNumber;
+      let scriptColumnNumber = columnNumber;
+      if (script.hasSourceURL) {
+        scriptLineNumber -= startLine;
+        if (scriptLineNumber === 0) {
+          scriptColumnNumber -= startColumn;
+        }
       }
+      locations.push(debuggerModel.createRawLocation(script, scriptLineNumber, scriptColumnNumber));
     }
-    return [];
+    return locations;
   }
 
   uiLocationToCSSLocations(uiLocation: Workspace.UISourceCode.UILocation): SDK.CSSModel.CSSLocation[] {
@@ -341,7 +374,7 @@ class Binding implements TextUtils.ContentProvider.ContentProvider {
     if (!debuggerModel) {
       return [];
     }
-    return debuggerModel.scriptsForSourceURL(this.#uiSourceCode.url());
+    return debuggerModel.scripts().filter(script => script.embedderName() === this.#uiSourceCode.url());
   }
 
   async styleSheetChanged(stylesheet: SDK.CSSStyleSheetHeader.CSSStyleSheetHeader, edit: SDK.CSSModel.Edit|null):

package/front_end/models/extensions/ExtensionAPI.ts

@@ -132,6 +132,7 @@ export namespace PrivateAPI {
   type RegisterRecorderExtensionPluginRequest = {
     command: Commands.RegisterRecorderExtensionPlugin,
     pluginName: string,
+    mimeType: string,
     port: MessagePort,
   };
   type SubscribeRequest = {command: Commands.Subscribe, type: string};
@@ -705,8 +706,8 @@ self.injectedExtensionAPI = function(
   (RecorderServicesAPIImpl.prototype as
    Pick<APIImpl.RecorderExtensions, 'registerRecorderExtensionPlugin'|'unregisterRecorderExtensionPlugin'>) = {
     registerRecorderExtensionPlugin: async function(
-        this: APIImpl.RecorderExtensions, plugin: PublicAPI.Chrome.DevTools.RecorderExtensionPlugin,
-        pluginName: string): Promise<void> {
+        this: APIImpl.RecorderExtensions, plugin: PublicAPI.Chrome.DevTools.RecorderExtensionPlugin, pluginName: string,
+        mimeType: string): Promise<void> {
       if (this._plugins.has(plugin)) {
         throw new Error(`Tried to register plugin '${pluginName}' twice`);
       }
@@ -734,6 +735,7 @@ self.injectedExtensionAPI = function(
             {
               command: PrivateAPI.Commands.RegisterRecorderExtensionPlugin,
               pluginName,
+              mimeType,
               port: channel.port2,
             },
             () => resolve(), [channel.port2]);

package/front_end/models/extensions/ExtensionServer.ts

@@ -222,10 +222,10 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   private registerRecorderExtensionEndpoint(
       message: PrivateAPI.ExtensionServerRequestMessage, _shared_port: MessagePort): Record {
     if (message.command !== PrivateAPI.Commands.RegisterRecorderExtensionPlugin) {
-      return this.status.E_BADARG('command', `expected ${PrivateAPI.Commands.Subscribe}`);
+      return this.status.E_BADARG('command', `expected ${PrivateAPI.Commands.RegisterRecorderExtensionPlugin}`);
     }
-    const {pluginName, port} = message;
-    RecorderPluginManager.instance().addPlugin(new RecorderExtensionEndpoint(pluginName, port));
+    const {pluginName, mimeType, port} = message;
+    RecorderPluginManager.instance().addPlugin(new RecorderExtensionEndpoint(pluginName, mimeType, port));
     return this.status.OK();
   }
 

package/front_end/models/extensions/RecorderExtensionEndpoint.ts

@@ -8,16 +8,22 @@ import {RecorderPluginManager} from './RecorderPluginManager.js';
 
 export class RecorderExtensionEndpoint extends ExtensionEndpoint {
   private readonly name: string;
+  private readonly mimeType: string;
 
-  constructor(name: string, port: MessagePort) {
+  constructor(name: string, mimeType: string, port: MessagePort) {
     super(port);
     this.name = name;
+    this.mimeType = mimeType;
   }
 
   getName(): string {
     return this.name;
   }
 
+  getMimeType(): string {
+    return this.mimeType;
+  }
+
   protected handleEvent({event}: {event: string}): void {
     switch (event) {
       case PrivateAPI.RecorderExtensionPluginEvents.UnregisteredRecorderExtensionPlugin: {

package/front_end/models/logs/NetworkLog.ts

@@ -196,11 +196,13 @@ export class NetworkLog extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
     return initiatorInfo;
   }
 
-  initiatorInfoForRequest(request: SDK.NetworkRequest.NetworkRequest): InitiatorInfo {
-    const initiatorInfo = this.initializeInitiatorSymbolIfNeeded(request);
-    if (initiatorInfo.info) {
-      return initiatorInfo.info;
-    }
+  static initiatorInfoForRequest(request: SDK.NetworkRequest.NetworkRequest, existingInitiatorData?: InitiatorData):
+      InitiatorInfo {
+    const initiatorInfo: InitiatorData = existingInitiatorData || {
+      info: null,
+      chain: null,
+      request: undefined,
+    };
 
     let type = SDK.NetworkRequest.InitiatorType.Other;
     let url = Platform.DevToolsPath.EmptyUrlString;
@@ -253,11 +255,19 @@ export class NetworkLog extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
         url = initiator.url as Platform.DevToolsPath.UrlString || Platform.DevToolsPath.EmptyUrlString;
       }
     }
-
     initiatorInfo.info = {type, url, lineNumber, columnNumber, scriptId, stack: initiatorStack, initiatorRequest};
     return initiatorInfo.info;
   }
 
+  initiatorInfoForRequest(request: SDK.NetworkRequest.NetworkRequest): InitiatorInfo {
+    const initiatorInfo = this.initializeInitiatorSymbolIfNeeded(request);
+    if (initiatorInfo.info) {
+      return initiatorInfo.info;
+    }
+
+    return NetworkLog.initiatorInfoForRequest(request, initiatorInfo);
+  }
+
   initiatorGraphForRequest(request: SDK.NetworkRequest.NetworkRequest): InitiatorGraph {
     const initiated = new Map<SDK.NetworkRequest.NetworkRequest, SDK.NetworkRequest.NetworkRequest>();
     const networkManager = SDK.NetworkManager.NetworkManager.forRequest(request);
@@ -584,7 +594,7 @@ export type EventTypes = {
   [Events.RequestUpdated]: SDK.NetworkRequest.NetworkRequest,
 };
 
-interface InitiatorData {
+export interface InitiatorData {
   info: InitiatorInfo|null;
   chain: Set<SDK.NetworkRequest.NetworkRequest>|null;
   request?: SDK.NetworkRequest.NetworkRequest|null;
@@ -595,7 +605,7 @@ export interface InitiatorGraph {
   initiated: Map<SDK.NetworkRequest.NetworkRequest, SDK.NetworkRequest.NetworkRequest>;
 }
 
-interface InitiatorInfo {
+export interface InitiatorInfo {
   type: SDK.NetworkRequest.InitiatorType;
   // generally this is a url but can also contain "<anonymous>"
   url: Platform.DevToolsPath.UrlString;

package/front_end/models/source_map_scopes/NamesResolver.ts

@@ -51,8 +51,13 @@ const computeScopeTree = async function(functionScope: SDK.DebuggerModel.ScopeCh
       functionEndLocation.columnNumber);
   const scopeText = text.extract(scopeRange);
   const scopeStart = text.toSourceRange(scopeRange).offset;
-  const prefix = 'function fui';
-  const scopeTree = await Formatter.FormatterWorkerPool.formatterWorkerPool().javaScriptScopeTree(prefix + scopeText);
+  let prefix = 'function fui';
+  let scopeTree = await Formatter.FormatterWorkerPool.formatterWorkerPool().javaScriptScopeTree(prefix + scopeText);
+  if (!scopeTree) {
+    // Try to parse the function as an arrow function.
+    prefix = 'let fui = ';
+    scopeTree = await Formatter.FormatterWorkerPool.formatterWorkerPool().javaScriptScopeTree(prefix + scopeText);
+  }
   if (!scopeTree) {
     return null;
   }