chrome-devtools-frontend 1.0.1021582 → 1.0.1022059

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;

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 {

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -35,10 +35,12 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as Adorners from '../../ui/components/adorners/adorners.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
+import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import {linkifyDeferredNodeReference} from './DOMLinkifier.js';
+import * as ElementsComponents from './components/components.js';
 import {ElementsPanel} from './ElementsPanel.js';
 import {ElementsTreeElement, InitialChildrenLimit} from './ElementsTreeElement.js';
 import elementsTreeOutlineStyles from './elementsTreeOutline.css.js';
@@ -1629,13 +1631,45 @@ export class ShortcutTreeElement extends UI.TreeOutline.TreeElement {
       text = '<' + text + '>';
     }
     title.textContent = '\u21AA ' + text;
-
-    const link = (linkifyDeferredNodeReference(nodeShortcut.deferredNode) as Element);
-    UI.UIUtils.createTextChild(this.listItemElement, ' ');
-    link.classList.add('elements-tree-shortcut-link');
-    link.textContent = i18nString(UIStrings.reveal);
-    this.listItemElement.appendChild(link);
     this.nodeShortcut = nodeShortcut;
+    this.addRevealAdorner();
+  }
+
+  addRevealAdorner(): void {
+    const adorner = new Adorners.Adorner.Adorner();
+    adorner.classList.add('adorner-reveal');
+    const config = ElementsComponents.AdornerManager.getRegisteredAdorner(
+        ElementsComponents.AdornerManager.RegisteredAdorners.REVEAL);
+    const name = config.name;
+    const adornerContent = document.createElement('span');
+    const linkIcon = new IconButton.Icon.Icon();
+    linkIcon
+        .data = {iconName: 'ic_show_node_16x16', color: 'var(--color-text-disabled)', width: '12px', height: '12px'};
+    const slotText = document.createElement('span');
+    slotText.textContent = name;
+    adornerContent.append(linkIcon);
+    adornerContent.append(slotText);
+    adornerContent.classList.add('adorner-with-icon');
+    adorner.data = {
+      name,
+      content: adornerContent,
+    };
+    this.listItemElement.appendChild(adorner);
+    const onClick = (((): void => {
+                       this.nodeShortcut.deferredNode.resolve(
+                           node => {
+                             void Common.Revealer.reveal(node);
+                           },
+                       );
+                     }) as EventListener);
+    adorner.addInteraction(onClick, {
+      isToggle: false,
+      shouldPropagateOnKeydown: false,
+      ariaLabelDefault: i18nString(UIStrings.reveal),
+      ariaLabelActive: i18nString(UIStrings.reveal),
+    });
+    adorner.addEventListener('mousedown', e => e.consume(), false);
+    ElementsPanel.instance().registerAdorner(adorner);
   }
 
   get hovered(): boolean {

package/front_end/panels/elements/TopLayerContainer.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import * as ElementsComponents from './components/components.js';
@@ -79,7 +80,14 @@ export class TopLayerContainer extends UI.TreeOutline.TreeElement {
     const config = ElementsComponents.AdornerManager.getRegisteredAdorner(
         ElementsComponents.AdornerManager.RegisteredAdorners.TOP_LAYER);
     const adornerContent = document.createElement('span');
-    adornerContent.textContent = ` top-layer (${topLayerElementIndex}) `;
+    adornerContent.classList.add('adorner-with-icon');
+    const linkIcon = new IconButton.Icon.Icon();
+    linkIcon
+        .data = {iconName: 'ic_show_node_16x16', color: 'var(--color-text-disabled)', width: '12px', height: '12px'};
+    const adornerText = document.createElement('span');
+    adornerText.textContent = ` top-layer (${topLayerElementIndex}) `;
+    adornerContent.append(linkIcon);
+    adornerContent.append(adornerText);
     const adorner = element?.adorn(config, adornerContent);
     if (adorner) {
       const onClick = (((): void => {

package/front_end/panels/elements/components/AdornerManager.ts

@@ -31,6 +31,7 @@ export enum RegisteredAdorners {
   CONTAINER = 'container',
   SLOT = 'slot',
   TOP_LAYER = 'top-layer',
+  REVEAL = 'reveal',
 }
 
 // This enum-like const object serves as the authoritative registry for all the
@@ -79,6 +80,12 @@ export function getRegisteredAdorner(which: RegisteredAdorners): RegisteredAdorn
         category: AdornerCategories.LAYOUT,
         enabledByDefault: true,
       };
+    case RegisteredAdorners.REVEAL:
+      return {
+        name: 'reveal',
+        category: AdornerCategories.DEFAULT,
+        enabledByDefault: true,
+      };
   }
 }
 

package/front_end/panels/elements/elementsTreeOutline.css

@@ -27,6 +27,10 @@
   display: none;
 }
 
+.adorner-reveal {
+  margin: 3px;
+}
+
 .adorner-with-icon {
   display: flex;
   justify-content: center;

package/front_end/third_party/acorn/acorn.ts

@@ -4,7 +4,7 @@
 
 import * as acorn from './package/dist/acorn.mjs';
 
-import type * as ESTree from './estree-legacy';
+import type * as ESTree from './estree-legacy.js';
 export {ESTree};
 
 export { type Comment, defaultOptions, getLineInfo, isNewLine, lineBreak, lineBreakG, Node, SourceLocation, Token, tokTypes, tokContexts} from './package/dist/acorn.mjs';

package/front_end/third_party/chromium/client-variations/client-variations.ts

@@ -2,4 +2,4 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-export * from './ClientVariations.js';
+export * from './ClientVariations.js';

package/front_end/third_party/diff/DiffWrapper.ts

@@ -5,10 +5,12 @@
 import * as Common from '../../core/common/common.js';
 
 declare global {
+  /* eslint-disable @typescript-eslint/naming-convention */
   class diff_match_patch {
     diff_main(text1: string, text2: string): Array<{0: number, 1: string}>;
     diff_cleanupSemantic(diff: Array<{0: number, 1: string}>): void;
   }
+  /* eslint-enable @typescript-eslint/naming-convention */
 }
 
 export const DiffWrapper = {

package/front_end/third_party/i18n/i18n-impl.ts

@@ -15,8 +15,12 @@ export class I18n {
   readonly supportedLocales: ReadonlySet<Intl.UnicodeBCP47LocaleIdentifier>;
 
   private localeData = new Map<Intl.UnicodeBCP47LocaleIdentifier, LocalizedMessages>();
+  readonly defaultLocale;
+
+  constructor(
+    supportedLocales: readonly Intl.UnicodeBCP47LocaleIdentifier[] = LOCALES, defaultLocale = DEFAULT_LOCALE) {
+    this.defaultLocale = defaultLocale;
 
-  constructor(supportedLocales: ReadonlyArray<Intl.UnicodeBCP47LocaleIdentifier> = LOCALES, public readonly defaultLocale = DEFAULT_LOCALE) {
     this.supportedLocales = new Set(supportedLocales);
   }
 

package/front_end/third_party/i18n/i18n.ts

@@ -8,4 +8,4 @@ import * as LocalizedStringSet from './localized-string-set.js';
 export {
   I18n,
   LocalizedStringSet,
-}
+};