chrome-devtools-frontend 1.0.1021582 → 1.0.1022475

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/issues_manager/RelatedIssue.ts

@@ -7,7 +7,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import type {Issue, IssueCategory} from './Issue.js';
 import {IssuesManager} from './IssuesManager.js';
 
-export type IssuesAssociatable = SDK.NetworkRequest.NetworkRequest|SDK.Cookie.Cookie|string;
+export type IssuesAssociatable = Readonly<SDK.NetworkRequest.NetworkRequest>|SDK.Cookie.Cookie|string;
 
 function issuesAssociatedWithNetworkRequest(issues: Issue[], request: SDK.NetworkRequest.NetworkRequest): Issue[] {
   return issues.filter(issue => {

package/front_end/models/issues_manager/descriptions/federatedAuthRequestErrorIdToken.md

@@ -1 +1 @@
-# Error retrieving an id token.
+# Error retrieving a token.

package/front_end/models/issues_manager/descriptions/federatedAuthRequestIdTokenInvalidRequest.md

@@ -1 +1 @@
-# The id token fetching request is invalid.
+# The token fetching request is invalid.

package/front_end/models/issues_manager/descriptions/federatedAuthRequestIdTokenInvalidResponse.md

@@ -1 +1 @@
-# Provider's id token is invalid.
+# Provider's token is invalid.

package/front_end/models/issues_manager/descriptions/federatedAuthRequestIdTokenNoResponse.md

@@ -1 +1 @@
-# The response body is empty when fetching the provider's id token.
+# The response body is empty when fetching the provider's token.

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;

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -170,6 +170,20 @@ const UIStrings = {
   *@description Default name for worker
   */
   worker: 'worker',
+  /**
+   * @description Aria text for screen reader to announce they can scroll to top of manifest if invoked
+   */
+  onInvokeManifestAlert: 'Manifest: Invoke to scroll to the top of manifest',
+  /**
+   * @description Aria text for screen reader to announce they can scroll to a section if invoked
+   * @example {"Identity"} PH1
+   */
+  beforeInvokeAlert: '{PH1}: Invoke to scroll to this section in manifest',
+  /**
+   * @description Alert message for screen reader to announce which subsection is being scrolled to
+   * @example {"Identity"} PH1
+   */
+  onInvokeAlert: 'Scrolled to {PH1}',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/application/ApplicationPanelSidebar.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -233,6 +247,7 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     this.applicationTreeElement = this.addSidebarSection(applicationSectionTitle);
     const manifestTreeElement = new AppManifestTreeElement(panel);
     this.applicationTreeElement.appendChild(manifestTreeElement);
+    manifestTreeElement.generateChildren();
     this.serviceWorkersTreeElement = new ServiceWorkersTreeElement(panel);
     this.applicationTreeElement.appendChild(this.serviceWorkersTreeElement);
     const clearStorageTreeElement = new ClearStorageTreeElement(panel);
@@ -930,11 +945,18 @@ export class ServiceWorkersTreeElement extends ApplicationPanelTreeElement {
 }
 
 export class AppManifestTreeElement extends ApplicationPanelTreeElement {
-  private view?: AppManifestView;
+  private view: AppManifestView;
   constructor(storagePanel: ResourcesPanel) {
-    super(storagePanel, i18nString(UIStrings.manifest), false);
+    super(storagePanel, i18nString(UIStrings.manifest), true);
     const icon = UI.Icon.Icon.create('mediumicon-manifest', 'resource-tree-item');
     this.setLeadingIcons([icon]);
+    self.onInvokeElement(this.listItemElement, this.onInvoke.bind(this));
+    this.view = new AppManifestView();
+    UI.ARIAUtils.setAccessibleName(this.listItemElement, i18nString(UIStrings.onInvokeManifestAlert));
+    const handleExpansion = (evt: Event): void => {
+      this.setExpandable((evt as CustomEvent).detail);
+    };
+    this.view.contentElement.addEventListener('manifestDetection', handleExpansion);
   }
 
   get itemURL(): Platform.DevToolsPath.UrlString {
@@ -943,13 +965,53 @@ export class AppManifestTreeElement extends ApplicationPanelTreeElement {
 
   onselect(selectedByUser?: boolean): boolean {
     super.onselect(selectedByUser);
-    if (!this.view) {
-      this.view = new AppManifestView();
-    }
     this.showView(this.view);
     Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.app_manifest]);
     return false;
   }
+
+  generateChildren(): void {
+    const staticSections = this.view.getStaticSections();
+    for (const section of staticSections) {
+      const sectionElement = section.getTitleElement();
+      const childTitle = section.title();
+      const child = new ManifestChildTreeElement(this.resourcesPanel, sectionElement, childTitle);
+      this.appendChild(child);
+    }
+  }
+
+  onInvoke(): void {
+    this.view.getManifestElement().scrollIntoView();
+    UI.ARIAUtils.alert(i18nString(UIStrings.onInvokeAlert, {PH1: this.listItemElement.title}));
+  }
+
+  showManifestView(): void {
+    this.showView(this.view);
+  }
+}
+
+export class ManifestChildTreeElement extends ApplicationPanelTreeElement {
+  #sectionElement: Element;
+  constructor(storagePanel: ResourcesPanel, element: Element, childTitle: string) {
+    super(storagePanel, childTitle, false);
+    const icon = UI.Icon.Icon.create('mediumicon-manifest', 'resource-tree-item');
+    this.setLeadingIcons([icon]);
+    this.#sectionElement = element;
+    self.onInvokeElement(this.listItemElement, this.onInvoke.bind(this));
+    UI.ARIAUtils.setAccessibleName(
+        this.listItemElement, i18nString(UIStrings.beforeInvokeAlert, {PH1: this.listItemElement.title}));
+  }
+
+  get itemURL(): Platform.DevToolsPath.UrlString {
+    return 'manifest://' + this.title as Platform.DevToolsPath.UrlString;
+  }
+
+  onInvoke(): void {
+    (this.parent as AppManifestTreeElement)?.showManifestView();
+    this.#sectionElement.scrollIntoView();
+    UI.ARIAUtils.alert(i18nString(UIStrings.onInvokeAlert, {PH1: this.listItemElement.title}));
+    Host.userMetrics.manifestSectionSelected(this.listItemElement.title);
+  }
 }
 
 export class ClearStorageTreeElement extends ApplicationPanelTreeElement {