chrome-devtools-frontend 1.0.1020771 → 1.0.1022059

package/front_end/models/extensions/ExtensionAPI.ts

@@ -86,6 +86,10 @@ export namespace PrivateAPI {
     Unsubscribe = 'unsubscribe',
     UpdateButton = 'updateButton',
     RegisterLanguageExtensionPlugin = 'registerLanguageExtensionPlugin',
+    GetWasmLinearMemory = 'getWasmLinearMemory',
+    GetWasmLocal = 'getWasmLocal',
+    GetWasmGlobal = 'getWasmGlobal',
+    GetWasmOp = 'getWasmOp',
     RegisterRecorderExtensionPlugin = 'registerRecorderExtensionPlugin',
   }
 
@@ -103,6 +107,9 @@ export namespace PrivateAPI {
     GetInlinedFunctionRanges = 'getInlinedFunctionRanges',
     GetInlinedCalleesRanges = 'getInlinedCalleesRanges',
     GetMappedLines = 'getMappedLines',
+    FormatValue = 'formatValue',
+    GetProperties = 'getProperties',
+    ReleaseObject = 'releaseObject',
   }
 
   export const enum LanguageExtensionPluginEvents {
@@ -197,6 +204,23 @@ export namespace PrivateAPI {
   };
   type GetHARRequest = {command: Commands.GetHAR};
   type GetPageResourcesRequest = {command: Commands.GetPageResources};
+  type GetWasmLinearMemoryRequest = {
+    command: Commands.GetWasmLinearMemory,
+    offset: number,
+    length: number,
+    stopId: unknown,
+  };
+  type GetWasmLocalRequest = {
+    command: Commands.GetWasmLocal,
+    local: number,
+    stopId: unknown,
+  };
+  type GetWasmGlobalRequest = {
+    command: Commands.GetWasmGlobal,
+    global: number,
+    stopId: unknown,
+  };
+  type GetWasmOpRequest = {command: Commands.GetWasmOp, op: number, stopId: unknown};
 
   export type ServerRequests = RegisterRecorderExtensionPluginRequest|RegisterLanguageExtensionPluginRequest|
       SubscribeRequest|UnsubscribeRequest|AddRequestHeadersRequest|ApplyStyleSheetRequest|CreatePanelRequest|
@@ -204,7 +228,8 @@ export namespace PrivateAPI {
       CreateSidebarPaneRequest|SetSidebarHeightRequest|SetSidebarContentRequest|SetSidebarPageRequest|
       OpenResourceRequest|SetOpenResourceHandlerRequest|SetThemeChangeHandlerRequest|ReloadRequest|
       EvaluateOnInspectedPageRequest|GetRequestContentRequest|GetResourceContentRequest|SetResourceContentRequest|
-      AddTraceProviderRequest|ForwardKeyboardEventRequest|GetHARRequest|GetPageResourcesRequest;
+      AddTraceProviderRequest|ForwardKeyboardEventRequest|GetHARRequest|GetPageResourcesRequest|
+      GetWasmLinearMemoryRequest|GetWasmLocalRequest|GetWasmGlobalRequest|GetWasmOpRequest;
   export type ExtensionServerRequestMessage = PrivateAPI.ServerRequests&{requestId?: number};
 
   type AddRawModuleRequest = {
@@ -267,11 +292,24 @@ export namespace PrivateAPI {
     method: LanguageExtensionPluginCommands.GetMappedLines,
     parameters: {rawModuleId: string, sourceFileURL: string},
   };
+  type FormatValueRequest = {
+    method: LanguageExtensionPluginCommands.FormatValue,
+    parameters: {expression: string, context: PublicAPI.Chrome.DevTools.RawLocation, stopId: number},
+  };
+  type GetPropertiesRequest = {
+    method: LanguageExtensionPluginCommands.GetProperties,
+    parameters: {objectId: PublicAPI.Chrome.DevTools.RemoteObjectId},
+  };
+  type ReleaseObjectRequest = {
+    method: LanguageExtensionPluginCommands.ReleaseObject,
+    parameters: {objectId: PublicAPI.Chrome.DevTools.RemoteObjectId},
+  };
 
-  export type LanguageExtensionRequests = AddRawModuleRequest|SourceLocationToRawLocationRequest|
-      RawLocationToSourceLocationRequest|GetScopeInfoRequest|ListVariablesInScopeRequest|RemoveRawModuleRequest|
-      GetTypeInfoRequest|GetFormatterRequest|GetInspectableAddressRequest|GetFunctionInfoRequest|
-      GetInlinedFunctionRangesRequest|GetInlinedCalleesRangesRequest|GetMappedLinesRequest;
+  export type LanguageExtensionRequests =
+      AddRawModuleRequest|SourceLocationToRawLocationRequest|RawLocationToSourceLocationRequest|GetScopeInfoRequest|
+      ListVariablesInScopeRequest|RemoveRawModuleRequest|GetTypeInfoRequest|GetFormatterRequest|
+      GetInspectableAddressRequest|GetFunctionInfoRequest|GetInlinedFunctionRangesRequest|
+      GetInlinedCalleesRangesRequest|GetMappedLinesRequest|FormatValueRequest|GetPropertiesRequest|ReleaseObjectRequest;
 
   type StringifyRequest = {
     method: RecorderExtensionPluginCommands.Stringify,
@@ -331,8 +369,8 @@ namespace APIImpl {
     registerHandler(command: string, handler: (request: {arguments: unknown[]}) => unknown): void;
     unregisterHandler(command: string): void;
     hasHandler(command: string): boolean;
-    sendRequest(request: PrivateAPI.ServerRequests, callback?: ((response: unknown) => unknown), transfers?: unknown[]):
-        void;
+    sendRequest<ResponseT>(
+        request: PrivateAPI.ServerRequests, callback?: ((response: ResponseT) => unknown), transfers?: unknown[]): void;
     nextObjectId(): string;
   }
 
@@ -767,8 +805,7 @@ self.injectedExtensionAPI = function(
     this._plugins = new Map();
   }
 
-  (LanguageServicesAPIImpl.prototype as
-   Pick<APIImpl.LanguageExtensions, 'registerLanguageExtensionPlugin'|'unregisterLanguageExtensionPlugin'>) = {
+  (LanguageServicesAPIImpl.prototype as PublicAPI.Chrome.DevTools.LanguageExtensions) = {
     registerLanguageExtensionPlugin: async function(
         this: APIImpl.LanguageExtensions, plugin: PublicAPI.Chrome.DevTools.LanguageExtensionPlugin, pluginName: string,
         supportedScriptTypes: PublicAPI.Chrome.DevTools.SupportedScriptTypes): Promise<void> {
@@ -822,8 +859,31 @@ self.injectedExtensionAPI = function(
               return plugin.getMappedLines(request.parameters.rawModuleId, request.parameters.sourceFileURL);
             }
             return Promise.resolve(undefined);
+          case PrivateAPI.LanguageExtensionPluginCommands.FormatValue:
+            if ('evaluate' in plugin && plugin.evaluate) {
+              return plugin.evaluate(
+                  request.parameters.expression, request.parameters.context, request.parameters.stopId);
+            }
+            return Promise.resolve(undefined);
+          case PrivateAPI.LanguageExtensionPluginCommands.GetProperties:
+            if ('getProperties' in plugin && plugin.getProperties) {
+              return plugin.getProperties(request.parameters.objectId);
+            }
+            if (!('evaluate' in plugin &&
+                  plugin.evaluate)) {  // If evalute is defined but the remote objects methods aren't, that's a bug
+              return Promise.resolve(undefined);
+            }
+            break;
+          case PrivateAPI.LanguageExtensionPluginCommands.ReleaseObject:
+            if ('releaseObject' in plugin && plugin.releaseObject) {
+              return plugin.releaseObject(request.parameters.objectId);
+            }
+            if (!('evaluate' in plugin) &&
+                plugin.evaluate) {  // If evalute is defined but the remote objects methods aren't, that's a bug
+              return Promise.resolve(undefined);
+            }
+            break;
         }
-        // @ts-expect-error
         throw new Error(`Unknown language plugin method ${request.method}`);
       }
 
@@ -849,6 +909,33 @@ self.injectedExtensionAPI = function(
       port.postMessage({event: PrivateAPI.LanguageExtensionPluginEvents.UnregisteredLanguageExtensionPlugin});
       port.close();
     },
+
+    getWasmLinearMemory: async function(
+        this: APIImpl.LanguageExtensions, offset: number, length: number, stopId: number): Promise<ArrayBuffer> {
+      const result = await new Promise(
+          resolve => extensionServer.sendRequest(
+              {command: PrivateAPI.Commands.GetWasmLinearMemory, offset, length, stopId}, resolve));
+      if (Array.isArray(result)) {
+        return new Uint8Array(result).buffer;
+      }
+      return new ArrayBuffer(0);
+    },
+    getWasmLocal: async function(
+        this: APIImpl.LanguageExtensions, local: number, stopId: number): Promise<PublicAPI.Chrome.DevTools.WasmValue> {
+      return new Promise(
+          resolve => extensionServer.sendRequest({command: PrivateAPI.Commands.GetWasmLocal, local, stopId}, resolve));
+    },
+    getWasmGlobal: async function(this: APIImpl.LanguageExtensions, global: number, stopId: number):
+        Promise<PublicAPI.Chrome.DevTools.WasmValue> {
+          return new Promise(
+              resolve =>
+                  extensionServer.sendRequest({command: PrivateAPI.Commands.GetWasmGlobal, global, stopId}, resolve));
+        },
+    getWasmOp: async function(this: APIImpl.LanguageExtensions, op: number, stopId: number):
+        Promise<PublicAPI.Chrome.DevTools.WasmValue> {
+          return new Promise(
+              resolve => extensionServer.sendRequest({command: PrivateAPI.Commands.GetWasmOp, op, stopId}, resolve));
+        },
   };
 
   function declareInterfaceClass<ImplT extends APIImpl.Callable>(implConstructor: ImplT): (
@@ -1241,11 +1328,12 @@ self.injectedExtensionAPI = function(
        APIImpl.ExtensionServerClient,
        'sendRequest'|'hasHandler'|'registerHandler'|'unregisterHandler'|'nextObjectId'|'_registerCallback'|
        '_onCallback'|'_onMessage'>) = {
-    sendRequest: function(
+    sendRequest: function<ResponseT>(
         this: APIImpl.ExtensionServerClient, message: PrivateAPI.ServerRequests,
-        callback?: (response: unknown) => unknown, transfers?: Transferable[]): void {
+        callback?: (response: ResponseT) => unknown, transfers?: Transferable[]): void {
       if (typeof callback === 'function') {
-        (message as PrivateAPI.ExtensionServerRequestMessage).requestId = this._registerCallback(callback);
+        (message as PrivateAPI.ExtensionServerRequestMessage).requestId =
+            this._registerCallback(callback as (response: unknown) => unknown);
       }
       // @ts-expect-error
       this._port.postMessage(message, transfers);

package/front_end/models/extensions/ExtensionServer.ts

@@ -55,6 +55,7 @@ import {LanguageExtensionEndpoint} from './LanguageExtensionEndpoint.js';
 import {RecorderExtensionEndpoint} from './RecorderExtensionEndpoint.js';
 import {PrivateAPI} from './ExtensionAPI.js';
 import {RecorderPluginManager} from './RecorderPluginManager.js';
+import type {Chrome} from '../../../extension-api/ExtensionAPI.js'; // eslint-disable-line rulesdir/es_modules_import
 
 const extensionOrigins: WeakMap<MessagePort, Platform.DevToolsPath.UrlString> = new WeakMap();
 
@@ -140,6 +141,10 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.registerHandler(PrivateAPI.Commands.UpdateButton, this.onUpdateButton.bind(this));
     this.registerHandler(
         PrivateAPI.Commands.RegisterLanguageExtensionPlugin, this.registerLanguageExtensionEndpoint.bind(this));
+    this.registerHandler(PrivateAPI.Commands.GetWasmLinearMemory, this.onGetWasmLinearMemory.bind(this));
+    this.registerHandler(PrivateAPI.Commands.GetWasmGlobal, this.onGetWasmGlobal.bind(this));
+    this.registerHandler(PrivateAPI.Commands.GetWasmLocal, this.onGetWasmLocal.bind(this));
+    this.registerHandler(PrivateAPI.Commands.GetWasmOp, this.onGetWasmOp.bind(this));
     this.registerHandler(
         PrivateAPI.Commands.RegisterRecorderExtensionPlugin, this.registerRecorderExtensionEndpoint.bind(this));
     window.addEventListener('message', this.onWindowMessage.bind(this), false);  // Only for main window.
@@ -204,7 +209,7 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   private registerLanguageExtensionEndpoint(
       message: PrivateAPI.ExtensionServerRequestMessage, _shared_port: MessagePort): Record {
     if (message.command !== PrivateAPI.Commands.RegisterLanguageExtensionPlugin) {
-      return this.status.E_BADARG('command', `expected ${PrivateAPI.Commands.Subscribe}`);
+      return this.status.E_BADARG('command', `expected ${PrivateAPI.Commands.RegisterLanguageExtensionPlugin}`);
     }
     const {pluginManager} = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance();
     if (!pluginManager) {
@@ -219,6 +224,63 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     return this.status.OK();
   }
 
+  private async loadWasmValue<T>(expression: string, stopId: unknown): Promise<Record|T> {
+    const {pluginManager} = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance();
+    if (!pluginManager) {
+      return this.status.E_FAILED('WebAssembly DWARF support needs to be enabled to use this extension');
+    }
+
+    const callFrame = pluginManager.callFrameForStopId(stopId as Bindings.DebuggerLanguagePlugins.StopId);
+    if (!callFrame) {
+      return this.status.E_BADARG('stopId', 'Unknown stop id');
+    }
+    const result = await callFrame.debuggerModel.agent.invoke_evaluateOnCallFrame({
+      callFrameId: callFrame.id,
+      expression,
+      silent: true,
+      returnByValue: true,
+      throwOnSideEffect: true,
+    });
+
+    if (!result.exceptionDetails && !result.getError()) {
+      return result.result.value;
+    }
+
+    return this.status.E_FAILED('Failed');
+  }
+
+  private async onGetWasmLinearMemory(message: PrivateAPI.ExtensionServerRequestMessage): Promise<Record|number[]> {
+    if (message.command !== PrivateAPI.Commands.GetWasmLinearMemory) {
+      return this.status.E_BADARG('command', `expected ${PrivateAPI.Commands.GetWasmLinearMemory}`);
+    }
+    return await this.loadWasmValue<number[]>(
+        `[].slice.call(new Uint8Array(memories[0].buffer, ${Number(message.offset)}, ${Number(message.length)}))`,
+        message.stopId);
+  }
+
+  private async onGetWasmGlobal(message: PrivateAPI.ExtensionServerRequestMessage):
+      Promise<Record|Chrome.DevTools.WasmValue> {
+    if (message.command !== PrivateAPI.Commands.GetWasmGlobal) {
+      return this.status.E_BADARG('command', `expected ${PrivateAPI.Commands.GetWasmGlobal}`);
+    }
+    return this.loadWasmValue(`globals[${Number(message.global)}]`, message.stopId);
+  }
+
+  private async onGetWasmLocal(message: PrivateAPI.ExtensionServerRequestMessage):
+      Promise<Record|Chrome.DevTools.WasmValue> {
+    if (message.command !== PrivateAPI.Commands.GetWasmLocal) {
+      return this.status.E_BADARG('command', `expected ${PrivateAPI.Commands.GetWasmLocal}`);
+    }
+    return this.loadWasmValue(`locals[${Number(message.local)}]`, message.stopId);
+  }
+  private async onGetWasmOp(message: PrivateAPI.ExtensionServerRequestMessage):
+      Promise<Record|Chrome.DevTools.WasmValue> {
+    if (message.command !== PrivateAPI.Commands.GetWasmOp) {
+      return this.status.E_BADARG('command', `expected ${PrivateAPI.Commands.GetWasmOp}`);
+    }
+    return this.loadWasmValue(`stack[${Number(message.op)}]`, message.stopId);
+  }
+
   private registerRecorderExtensionEndpoint(
       message: PrivateAPI.ExtensionServerRequestMessage, _shared_port: MessagePort): Record {
     if (message.command !== PrivateAPI.Commands.RegisterRecorderExtensionPlugin) {

package/front_end/models/extensions/LanguageExtensionEndpoint.ts

@@ -29,7 +29,7 @@ class LanguageExtensionEndpointImpl extends ExtensionEndpoint {
   }
 }
 
-export class LanguageExtensionEndpoint extends Bindings.DebuggerLanguagePlugins.DebuggerLanguagePlugin {
+export class LanguageExtensionEndpoint implements Bindings.DebuggerLanguagePlugins.DebuggerLanguagePlugin {
   private readonly supportedScriptTypes: {
     language: string,
     // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
@@ -37,6 +37,8 @@ export class LanguageExtensionEndpoint extends Bindings.DebuggerLanguagePlugins.
     symbol_types: Array<string>,
   };
   private endpoint: LanguageExtensionEndpointImpl;
+  name: string;
+
   constructor(
       name: string, supportedScriptTypes: {
         language: string,
@@ -45,7 +47,7 @@ export class LanguageExtensionEndpoint extends Bindings.DebuggerLanguagePlugins.
         symbol_types: Array<string>,
       },
       port: MessagePort) {
-    super(name);
+    this.name = name;
     this.supportedScriptTypes = supportedScriptTypes;
     this.endpoint = new LanguageExtensionEndpointImpl(this, port);
   }
@@ -172,6 +174,17 @@ export class LanguageExtensionEndpoint extends Bindings.DebuggerLanguagePlugins.
         PrivateAPI.LanguageExtensionPluginCommands.GetMappedLines, {rawModuleId, sourceFileURL});
   }
 
-  dispose(): void {
+  evaluate(expression: string, context: Chrome.DevTools.RawLocation, stopId: number):
+      Promise<Chrome.DevTools.RemoteObject> {
+    return this.endpoint.sendRequest(
+        PrivateAPI.LanguageExtensionPluginCommands.FormatValue, {expression, context, stopId});
+  }
+
+  getProperties(objectId: Chrome.DevTools.RemoteObjectId): Promise<Chrome.DevTools.PropertyDescriptor[]> {
+    return this.endpoint.sendRequest(PrivateAPI.LanguageExtensionPluginCommands.GetProperties, {objectId});
+  }
+
+  releaseObject(objectId: Chrome.DevTools.RemoteObjectId): Promise<void> {
+    return this.endpoint.sendRequest(PrivateAPI.LanguageExtensionPluginCommands.ReleaseObject, {objectId});
   }
 }

package/front_end/models/timeline_model/TimelineModel.ts

@@ -61,6 +61,39 @@ const UIStrings = {
   *@example {https://google.com} PH2
   */
   workerSS: '`Worker`: {PH1} — {PH2}',
+
+  /**
+   *@description Title of a bidder auction worklet with known URL in the timeline flame chart of the Performance panel
+   *@example {https://google.com} PH1
+   */
+  bidderWorkletS: 'Bidder Worklet — {PH1}',
+
+  /**
+   *@description Title of a seller auction worklet with known URL in the timeline flame chart of the Performance panel
+   *@example {https://google.com} PH1
+   */
+  sellerWorkletS: 'Seller Worklet — {PH1}',
+
+  /**
+   *@description Title of an auction worklet with known URL in the timeline flame chart of the Performance panel
+   *@example {https://google.com} PH1
+   */
+  unknownWorkletS: 'Auction Worklet — {PH1}',
+
+  /**
+   *@description Title of a bidder auction worklet in the timeline flame chart of the Performance panel
+   */
+  bidderWorklet: 'Bidder Worklet',
+
+  /**
+   *@description Title of a seller auction worklet in the timeline flame chart of the Performance panel
+   */
+  sellerWorklet: 'Seller Worklet',
+
+  /**
+   *@description Title of an auction worklet in the timeline flame chart of the Performance panel
+   */
+  unknownWorklet: 'Auction Worklet',
 };
 const str_ = i18n.i18n.registerUIStrings('models/timeline_model/TimelineModel.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -73,6 +106,7 @@ export class TimelineModelImpl {
   private sessionId!: string|null;
   private mainFrameNodeId!: number|null;
   private pageFrames!: Map<Protocol.Page.FrameId, PageFrame>;
+  private auctionWorklets!: Map<string, AuctionWorklet>;
   private cpuProfilesInternal!: SDK.CPUProfileDataModel.CPUProfileDataModel[];
   private workerIdByThread!: WeakMap<SDK.TracingModel.Thread, string>;
   private requestsFromBrowser!: Map<string, SDK.TracingModel.Event>;
@@ -327,7 +361,8 @@ export class TimelineModelImpl {
     for (const process of tracingModel.sortedProcesses()) {
       for (const thread of process.sortedThreads()) {
         this.processThreadEvents(
-            tracingModel, [{from: 0, to: Infinity}], thread, thread === browserMainThread, false, true, null);
+            tracingModel, [{from: 0, to: Infinity}], thread, thread === browserMainThread, false, true,
+            WorkletType.NotWorklet, null);
       }
     }
   }
@@ -368,7 +403,7 @@ export class TimelineModelImpl {
         }
         this.processThreadEvents(
             tracingModel, [{from: startTime, to: endTime}], thread, thread === metaEvent.thread, Boolean(workerUrl),
-            true, workerUrl);
+            true, WorkletType.NotWorklet, workerUrl);
       }
       startTime = endTime;
     }
@@ -379,6 +414,7 @@ export class TimelineModelImpl {
       from: number,
       to: number,
       main: boolean,
+      workletType: WorkletType,
       url: Platform.DevToolsPath.UrlString,
     }[]>();
     for (const frame of this.pageFrames.values()) {
@@ -390,9 +426,32 @@ export class TimelineModelImpl {
           processData.set(pid, data);
         }
         const to = i === frame.processes.length - 1 ? (frame.deletedTime || Infinity) : frame.processes[i + 1].time;
-        data.push({from: frame.processes[i].time, to: to, main: !frame.parent, url: frame.processes[i].url});
+        data.push({
+          from: frame.processes[i].time,
+          to: to,
+          main: !frame.parent,
+          url: frame.processes[i].url,
+          workletType: WorkletType.NotWorklet,
+        });
       }
     }
+    for (const auctionWorklet of this.auctionWorklets.values()) {
+      const pid = auctionWorklet.processId;
+      let data = processData.get(pid);
+      if (!data) {
+        data = [];
+        processData.set(pid, data);
+      }
+      data.push({
+        from: auctionWorklet.startTime,
+        to: auctionWorklet.endTime,
+        main: false,
+        workletType: auctionWorklet.workletType,
+        url:
+            (auctionWorklet.host ? 'https://' + auctionWorklet.host as Platform.DevToolsPath.UrlString :
+                                   Platform.DevToolsPath.EmptyUrlString),
+      });
+    }
     const allMetadataEvents = tracingModel.devToolsMetadataEvents();
     for (const process of tracingModel.sortedProcesses()) {
       const data = processData.get(process.id());
@@ -404,6 +463,12 @@ export class TimelineModelImpl {
       let lastUrl: Platform.DevToolsPath.UrlString|null = null;
       let lastMainUrl: Platform.DevToolsPath.UrlString|null = null;
       let hasMain = false;
+      let allWorklet = true;
+
+      // false: not set, true: inconsistent.
+      let workletUrl: Platform.DevToolsPath.UrlString|boolean = false;
+      // NotWorklet used for not set.
+      let workletType: WorkletType = WorkletType.NotWorklet;
       for (const item of data) {
         const last = ranges[ranges.length - 1];
         if (!last || item.from > last.to) {
@@ -414,6 +479,23 @@ export class TimelineModelImpl {
         if (item.main) {
           hasMain = true;
         }
+        if (item.workletType === WorkletType.NotWorklet) {
+          allWorklet = false;
+        } else {
+          // Update combined workletUrl, checking for inconsistencies.
+          if (workletUrl === false) {
+            workletUrl = item.url;
+          } else if (workletUrl !== item.url) {
+            workletUrl = true;  // Process used for different things.
+          }
+
+          if (workletType === WorkletType.NotWorklet) {
+            workletType = item.workletType;
+          } else if (workletType !== item.workletType) {
+            workletType = WorkletType.UnknownWorklet;
+          }
+        }
+
         if (item.url) {
           if (item.main) {
             lastMainUrl = item.url;
@@ -426,7 +508,7 @@ export class TimelineModelImpl {
         if (thread.name() === TimelineModelImpl.RendererMainThreadName) {
           this.processThreadEvents(
               tracingModel, ranges, thread, true /* isMainThread */, false /* isWorker */, hasMain,
-              hasMain ? lastMainUrl : lastUrl);
+              WorkletType.NotWorklet, hasMain ? lastMainUrl : lastUrl);
         } else if (
             thread.name() === TimelineModelImpl.WorkerThreadName ||
             thread.name() === TimelineModelImpl.WorkerThreadNameLegacy) {
@@ -449,11 +531,24 @@ export class TimelineModelImpl {
           this.workerIdByThread.set(thread, workerMetaEvent.args['data']['workerId'] || '');
           this.processThreadEvents(
               tracingModel, ranges, thread, false /* isMainThread */, true /* isWorker */, false /* forMainFrame */,
-              workerMetaEvent.args['data']['url'] || Platform.DevToolsPath.EmptyUrlString);
+              WorkletType.NotWorklet, workerMetaEvent.args['data']['url'] || Platform.DevToolsPath.EmptyUrlString);
         } else {
+          let urlForOther: Platform.DevToolsPath.UrlString|null = null;
+          let workletTypeForOther: WorkletType = WorkletType.NotWorklet;
+          if (thread.name() === TimelineModelImpl.AuctionWorkletThreadName) {
+            if (typeof workletUrl !== 'boolean') {
+              urlForOther = workletUrl;
+            }
+            workletTypeForOther = workletType;
+          } else {
+            // For processes that only do auction worklet things, skip other threads.
+            if (allWorklet) {
+              continue;
+            }
+          }
           this.processThreadEvents(
               tracingModel, ranges, thread, false /* isMainThread */, false /* isWorker */, false /* forMainFrame */,
-              null);
+              workletTypeForOther, urlForOther);
         }
       }
     }
@@ -690,13 +785,26 @@ export class TimelineModelImpl {
     return events;
   }
 
+  private static nameAuctionWorklet(workletType: WorkletType, url: Platform.DevToolsPath.UrlString|null): string {
+    switch (workletType) {
+      case WorkletType.BidderWorklet:
+        return url ? i18nString(UIStrings.bidderWorkletS, {PH1: url}) : i18nString(UIStrings.bidderWorklet);
+
+      case WorkletType.SellerWorklet:
+        return url ? i18nString(UIStrings.sellerWorkletS, {PH1: url}) : i18nString(UIStrings.sellerWorklet);
+
+      default:
+        return url ? i18nString(UIStrings.unknownWorkletS, {PH1: url}) : i18nString(UIStrings.unknownWorklet);
+    }
+  }
+
   private processThreadEvents(
       tracingModel: SDK.TracingModel.TracingModel, ranges: {
         from: number,
         to: number,
       }[],
       thread: SDK.TracingModel.Thread, isMainThread: boolean, isWorker: boolean, forMainFrame: boolean,
-      url: Platform.DevToolsPath.UrlString|null): void {
+      workletType: WorkletType, url: Platform.DevToolsPath.UrlString|null): void {
     const track = new Track();
     track.name = thread.name() || i18nString(UIStrings.threadS, {PH1: thread.id()});
     track.type = TrackType.Other;
@@ -711,6 +819,9 @@ export class TimelineModelImpl {
       track.name = track.url ? i18nString(UIStrings.workerS, {PH1: track.url}) : i18nString(UIStrings.dedicatedWorker);
     } else if (thread.name().startsWith('CompositorTileWorker')) {
       track.type = TrackType.Raster;
+    } else if (thread.name() === TimelineModelImpl.AuctionWorkletThreadName) {
+      track.url = url || Platform.DevToolsPath.EmptyUrlString;
+      track.name = TimelineModelImpl.nameAuctionWorklet(workletType, url);
     }
     this.tracksInternal.push(track);
 
@@ -1239,6 +1350,18 @@ export class TimelineModelImpl {
         }
         return;
       }
+      if (event.name === TimelineModelImpl.DevToolsMetadataEvent.AuctionWorkletRunningInProcess &&
+          this.browserFrameTracking) {
+        const worklet = new AuctionWorklet(event, data);
+        this.auctionWorklets.set(data['target'], worklet);
+      }
+      if (event.name === TimelineModelImpl.DevToolsMetadataEvent.AuctionWorkletDoneWithProcess &&
+          this.browserFrameTracking) {
+        const worklet = this.auctionWorklets.get(data['target']);
+        if (worklet) {
+          worklet.endTime = event.startTime;
+        }
+      }
     }
   }
 
@@ -1290,6 +1413,7 @@ export class TimelineModelImpl {
     this.cpuProfilesInternal = [];
     this.workerIdByThread = new WeakMap();
     this.pageFrames = new Map();
+    this.auctionWorklets = new Map();
     this.requestsFromBrowser = new Map();
 
     this.minimumRecordTimeInternal = 0;
@@ -1576,6 +1700,7 @@ export namespace TimelineModelImpl {
   export const WorkerThreadNameLegacy = 'DedicatedWorker Thread';
   export const RendererMainThreadName = 'CrRendererMain';
   export const BrowserMainThreadName = 'CrBrowserMain';
+  export const AuctionWorkletThreadName = 'AuctionV8HelperThread';
 
   export const DevToolsMetadataEvent = {
     TracingStartedInBrowser: 'TracingStartedInBrowser',
@@ -1584,6 +1709,8 @@ export namespace TimelineModelImpl {
     FrameCommittedInBrowser: 'FrameCommittedInBrowser',
     ProcessReadyInBrowser: 'ProcessReadyInBrowser',
     FrameDeletedInBrowser: 'FrameDeletedInBrowser',
+    AuctionWorkletRunningInProcess: 'AuctionWorkletRunningInProcess',
+    AuctionWorkletDoneWithProcess: 'AuctionWorkletDoneWithProcess',
   };
 
   export const Thresholds = {
@@ -1680,6 +1807,13 @@ export enum TrackType {
   Other = 'Other',
 }
 
+const enum WorkletType {
+  NotWorklet = 0,
+  BidderWorklet = 1,
+  SellerWorklet = 2,
+  UnknownWorklet = 3,  // new type, or thread used for multiple ones.
+}
+
 export class PageFrame {
   frameId: any;
   url: any;
@@ -1734,6 +1868,29 @@ export class PageFrame {
   }
 }
 
+export class AuctionWorklet {
+  targetId: string;
+  processId: number;
+  host?: string;
+  startTime: number;
+  endTime: number;
+  workletType: WorkletType;
+  constructor(event: SDK.TracingModel.Event, data: any) {
+    this.targetId = (typeof data['target'] === 'string') ? data['target'] : '';
+    this.processId = (typeof data['pid'] === 'number') ? data['pid'] : 0;
+    this.host = (typeof data['host'] === 'string') ? data['host'] : undefined;
+    this.startTime = event.startTime;
+    this.endTime = Infinity;
+    if (data['type'] === 'bidder') {
+      this.workletType = WorkletType.BidderWorklet;
+    } else if (data['type'] === 'seller') {
+      this.workletType = WorkletType.SellerWorklet;
+    } else {
+      this.workletType = WorkletType.UnknownWorklet;
+    }
+  }
+}
+
 export class NetworkRequest {
   startTime: number;
   endTime: number;

package/front_end/panels/application/AppManifestView.ts

@@ -408,6 +408,7 @@ export class AppManifestView extends UI.Widget.VBox implements SDK.TargetManager
   private readonly identitySection: UI.ReportView.Section;
   private readonly presentationSection: UI.ReportView.Section;
   private readonly iconsSection: UI.ReportView.Section;
+  private readonly protocolHandlersSection: UI.ReportView.Section;
   private readonly shortcutSections: UI.ReportView.Section[];
   private readonly screenshotsSections: UI.ReportView.Section[];
   private nameField: HTMLElement;
@@ -455,9 +456,9 @@ export class AppManifestView extends UI.Widget.VBox implements SDK.TargetManager
     this.installabilitySection = this.reportView.appendSection(i18nString(UIStrings.installability));
     this.identitySection = this.reportView.appendSection(i18nString(UIStrings.identity));
     this.presentationSection = this.reportView.appendSection(i18nString(UIStrings.presentation));
-    const protocolHandlersSection = this.reportView.appendSection(i18nString(UIStrings.protocolHandlers));
+    this.protocolHandlersSection = this.reportView.appendSection(i18nString(UIStrings.protocolHandlers));
     this.protocolHandlersView = new ApplicationComponents.ProtocolHandlersView.ProtocolHandlersView();
-    protocolHandlersSection.contentElement.append(this.protocolHandlersView);
+    this.protocolHandlersSection.contentElement.append(this.protocolHandlersView);
     this.iconsSection = this.reportView.appendSection(i18nString(UIStrings.icons), 'report-section-icons');
     this.shortcutSections = [];
     this.screenshotsSections = [];
@@ -494,6 +495,14 @@ export class AppManifestView extends UI.Widget.VBox implements SDK.TargetManager
     this.registeredListeners = [];
   }
 
+  getStaticSections(): UI.ReportView.Section[] {
+    return [this.identitySection, this.presentationSection, this.protocolHandlersSection, this.iconsSection];
+  }
+
+  getManifestElement(): Element {
+    return this.reportView.getHeaderElement();
+  }
+
   targetAdded(target: SDK.Target.Target): void {
     if (this.target) {
       return;
@@ -559,10 +568,12 @@ export class AppManifestView extends UI.Widget.VBox implements SDK.TargetManager
     if (!data && !errors.length) {
       this.emptyView.showWidget();
       this.reportView.hideWidget();
+      this.contentElement.dispatchEvent(new CustomEvent('manifestDetection', {detail: false}));
       return;
     }
     this.emptyView.hideWidget();
     this.reportView.showWidget();
+    this.contentElement.dispatchEvent(new CustomEvent('manifestDetection', {detail: true}));
 
     const link = Components.Linkifier.Linkifier.linkifyURL(url);
     link.tabIndex = 0;