[DeepLink]: Allow showing additional context in Performance graph.

This CL enables tracing functions `console.timestamp()` and
`performance.mark()`/`measure()` to add additional context to
the custom track. Specifically, this includes adding the ability
to add a DevTools-Extension-specific url, which can point back to
the extension to provide additional context.

This requires enabling via a chrome flag:
devtools-deep-link-via-extensibility-api

Bug: 427430112
Change-Id: I7a3b2d7bcebd3b6bc91cb12610dcdad0c341ed68
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6662880
Commit-Queue: Finnur Thorarinsson <[email protected]>
Reviewed-by: Paul Irish <[email protected]>

Author: finnurbreki

extension-api/ExtensionAPI.d.ts

@@ -95,6 +95,9 @@ export namespace Chrome {
       create(title: string, iconPath: string, pagePath: string, callback?: (panel: ExtensionPanel) => unknown): void;
       openResource(url: string, lineNumber: number, columnNumber?: number, callback?: () => unknown): void;
 
+      setOpenResourceHandler(
+          callback?: (resource: Resource, lineNumber: number, columnNumber: number) => void, scheme?: string): void;
+
       /**
        * Fired when the theme changes in DevTools.
        *

front_end/core/root/Runtime.ts

@@ -397,6 +397,10 @@ export interface HostConfigAiCodeCompletion {
   userTier: string;
 }
 
+export interface HostConfigDeepLinksViaExtensibilityApi {
+  enabled: boolean;
+}
+
 export interface HostConfigVeLogging {
   enabled: boolean;
   testing: boolean;
@@ -450,6 +454,7 @@ export type HostConfig = Platform.TypeScriptUtilities.RecursivePartial<{
   aidaAvailability: AidaAvailability,
   channel: Channel,
   devToolsConsoleInsights: HostConfigConsoleInsights,
+  devToolsDeepLinksViaExtensibilityApi: HostConfigDeepLinksViaExtensibilityApi,
   devToolsFreestyler: HostConfigFreestyler,
   devToolsAiAssistanceNetworkAgent: HostConfigAiAssistanceNetworkAgent,
   devToolsAiAssistanceFileAgent: HostConfigAiAssistanceFileAgent,

front_end/models/extensions/ExtensionAPI.ts

@@ -230,6 +230,7 @@ export namespace PrivateAPI {
   interface SetOpenResourceHandlerRequest {
     command: Commands.SetOpenResourceHandler;
     handlerPresent: boolean;
+    urlScheme?: string;
   }
   interface SetThemeChangeHandlerRequest {
     command: Commands.SetThemeChangeHandler;
@@ -473,7 +474,8 @@ namespace APIImpl {
 
   export interface Panels extends PublicAPI.Chrome.DevTools.Panels {
     get SearchAction(): Record<string, string>;
-    setOpenResourceHandler(callback?: (resource: PublicAPI.Chrome.DevTools.Resource, lineNumber: number) => unknown):
+    setOpenResourceHandler(
+        callback?: (resource: PublicAPI.Chrome.DevTools.Resource, lineNumber: number, columnNumber: number) => unknown):
         void;
     setThemeChangeHandler(callback?: (themeName: string) => unknown): void;
   }
@@ -693,15 +695,17 @@ self.injectedExtensionAPI = function(
     },
 
     setOpenResourceHandler: function(
-        callback: (resource: PublicAPI.Chrome.DevTools.Resource, lineNumber: number) => unknown): void {
+        callback: (resource: PublicAPI.Chrome.DevTools.Resource, lineNumber: number, columnNumber: number) => unknown,
+        urlScheme?: string): void {
       const hadHandler = extensionServer.hasHandler(PrivateAPI.Events.OpenResource);
 
       function callbackWrapper(message: unknown): void {
         // Allow the panel to show itself when handling the event.
         userAction = true;
         try {
-          const {resource, lineNumber} = message as {resource: APIImpl.ResourceData, lineNumber: number};
-          callback.call(null, new (Constructor(Resource))(resource), lineNumber);
+          const {resource, lineNumber, columnNumber} =
+              message as {resource: APIImpl.ResourceData, lineNumber: number, columnNumber: number};
+          callback.call(null, new (Constructor(Resource))(resource), lineNumber, columnNumber);
         } finally {
           userAction = false;
         }
@@ -716,7 +720,7 @@ self.injectedExtensionAPI = function(
       // Only send command if we either removed an existing handler or added handler and had none before.
       if (hadHandler === !callback) {
         extensionServer.sendRequest(
-            {command: PrivateAPI.Commands.SetOpenResourceHandler, handlerPresent: Boolean(callback)});
+            {command: PrivateAPI.Commands.SetOpenResourceHandler, handlerPresent: Boolean(callback), urlScheme});
       }
     },
 

front_end/models/extensions/ExtensionServer.test.ts

@@ -8,13 +8,15 @@ import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import {createTarget, expectConsoleLogs} from '../../testing/EnvironmentHelpers.js';
+import {spyCall} from '../../testing/ExpectStubCall.js';
 import {
   describeWithDevtoolsExtension,
   getExtensionOrigin,
 } from '../../testing/ExtensionHelpers.js';
 import {MockProtocolBackend} from '../../testing/MockScopeChain.js';
 import {addChildFrame, FRAME_URL, getMainFrame} from '../../testing/ResourceTreeHelpers.js';
 import {encodeSourceMap} from '../../testing/SourceMapEncoder.js';
+import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Bindings from '../bindings/bindings.js';
 import * as Extensions from '../extensions/extensions.js';
@@ -176,6 +178,57 @@ describeWithDevtoolsExtension('Extensions', {}, context => {
   });
 });
 
+describeWithDevtoolsExtension('Extensions', {}, context => {
+  beforeEach(() => {
+    createTarget().setInspectedURL(urlString`http://example.com`);
+  });
+
+  it('can register and unregister a global open resource handler', async () => {
+    const registerLinkHandlerSpy = spyCall(Components.Linkifier.Linkifier, 'registerLinkHandler');
+    const unregisterLinkHandlerSpy = spyCall(Components.Linkifier.Linkifier, 'unregisterLinkHandler');
+
+    // Register without a specific scheme (global handler).
+    context.chrome.devtools?.panels.setOpenResourceHandler(() => {});
+
+    const registration = await (await registerLinkHandlerSpy).args[0];
+    assert.strictEqual(registration.title, 'TestExtension');
+    assert.isUndefined(registration.scheme);
+    assert.isFunction(registration.handler);
+    assert.isFunction(registration.filter);
+
+    // Now unregister the extension.
+    context.chrome.devtools?.panels.setOpenResourceHandler();
+
+    const unregistration = await (await unregisterLinkHandlerSpy).args[0];
+    assert.strictEqual(unregistration.title, 'TestExtension');
+    assert.isUndefined(unregistration.scheme);
+    assert.isFunction(unregistration.handler);
+    assert.isFunction(unregistration.filter);
+  });
+
+  it('can register and unregister a scheme specific open resource handler', async () => {
+    const registerLinkHandlerSpy = spyCall(Components.Linkifier.Linkifier, 'registerLinkHandler');
+    const unregisterLinkHandlerSpy = spyCall(Components.Linkifier.Linkifier, 'unregisterLinkHandler');
+
+    context.chrome.devtools?.panels.setOpenResourceHandler(() => {}, 'foo-extension:');
+
+    const registration = await (await registerLinkHandlerSpy).args[0];
+    assert.strictEqual(registration.title, 'TestExtension');
+    assert.strictEqual(registration.scheme, 'foo-extension:');
+    assert.isFunction(registration.handler);
+    assert.isFunction(registration.filter);
+
+    // Now unregister the extension.
+    context.chrome.devtools?.panels.setOpenResourceHandler();
+
+    const unregistration = await (await unregisterLinkHandlerSpy).args[0];
+    assert.strictEqual(unregistration.title, 'TestExtension');
+    assert.isUndefined(unregistration.scheme);
+    assert.isFunction(unregistration.handler);
+    assert.isFunction(unregistration.filter);
+  });
+});
+
 describeWithDevtoolsExtension('Extensions', {}, context => {
   expectConsoleLogs({
     warn: ['evaluate: the main frame is not yet available'],

front_end/models/extensions/ExtensionServer.ts

@@ -106,6 +106,7 @@ export class HostsPolicy {
 }
 
 class RegisteredExtension {
+  openResourceScheme: null|string = null;
   constructor(readonly name: string, readonly hostsPolicy: HostsPolicy, readonly allowFileAccess: boolean) {
   }
 
@@ -118,6 +119,10 @@ class RegisteredExtension {
       return false;
     }
 
+    if (this.openResourceScheme && inspectedURL.startsWith(this.openResourceScheme)) {
+      return true;
+    }
+
     if (!ExtensionServer.canInspectURL(inspectedURL)) {
       return false;
     }
@@ -817,11 +822,23 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     if (!extension) {
       throw new Error('Received a message from an unregistered extension');
     }
+    if (message.urlScheme) {
+      extension.openResourceScheme = message.urlScheme;
+    }
+    const extensionOrigin = this.getExtensionOrigin(port);
     const {name} = extension;
+    const registration = {
+      title: name,
+      origin: extensionOrigin,
+      scheme: message.urlScheme,
+      handler: this.handleOpenURL.bind(this, port),
+      filter: (url: Platform.DevToolsPath.UrlString, schemes: Set<string>) =>
+          Components.Linkifier.Linkifier.shouldHandleOpenResource(extension.openResourceScheme, url, schemes),
+    };
     if (message.handlerPresent) {
-      Components.Linkifier.Linkifier.registerLinkHandler(name, this.handleOpenURL.bind(this, port));
+      Components.Linkifier.Linkifier.registerLinkHandler(registration);
     } else {
-      Components.Linkifier.Linkifier.unregisterLinkHandler(name);
+      Components.Linkifier.Linkifier.unregisterLinkHandler(registration);
     }
     return undefined;
   }
@@ -846,10 +863,25 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   }
 
   private handleOpenURL(
-      port: MessagePort, contentProvider: TextUtils.ContentProvider.ContentProvider, lineNumber: number): void {
-    if (this.extensionAllowedOnURL(contentProvider.contentURL(), port)) {
-      port.postMessage(
-          {command: 'open-resource', resource: this.makeResource(contentProvider), lineNumber: lineNumber + 1});
+      port: MessagePort, contentProviderOrUrl: TextUtils.ContentProvider.ContentProvider|string, lineNumber?: number,
+      columnNumber?: number): void {
+    let url: Platform.DevToolsPath.UrlString;
+    let resource: {url: string, type: string};
+    if (typeof contentProviderOrUrl !== 'string') {
+      url = contentProviderOrUrl.contentURL();
+      resource = this.makeResource(contentProviderOrUrl);
+    } else {
+      url = contentProviderOrUrl as Platform.DevToolsPath.UrlString;
+      resource = {url, type: Common.ResourceType.resourceTypes.Other.name()};
+    }
+
+    if (this.extensionAllowedOnURL(url, port)) {
+      port.postMessage({
+        command: 'open-resource',
+        resource,
+        lineNumber: lineNumber ? lineNumber + 1 : undefined,
+        columnNumber: columnNumber ? columnNumber + 1 : undefined,
+      });
     }
   }
 

front_end/models/trace/handlers/ExtensionTraceDataHandler.ts

@@ -214,14 +214,8 @@ export function extractPerformanceAPIExtensionEntries(
   }
 }
 
-export function extensionDataInPerformanceTiming(
-    timing: Types.Events.SyntheticUserTimingPair|Types.Events.PerformanceMark): Types.Extensions.ExtensionDataPayload|
-    null {
-  const timingDetail =
-      Types.Events.isPerformanceMark(timing) ? timing.args.data?.detail : timing.args.data.beginEvent.args.detail;
-  if (!timingDetail) {
-    return null;
-  }
+function parseDetail(timingDetail: string, key: string): Types.Extensions.ExtensionDataPayload|
+    Types.Extensions.ExtensionTrackEntryPayloadDeeplink|null {
   try {
     // Attempt to parse the detail as an object that might be coming from a
     // DevTools Perf extension.
@@ -230,19 +224,41 @@ export function extensionDataInPerformanceTiming(
     // 2.Not be an object - in which case the `in` check will error.
     // If we hit either of these cases, we just ignore this mark and move on.
     const detailObj = JSON.parse(timingDetail);
-    if (!('devtools' in detailObj)) {
+    if (!(key in detailObj)) {
       return null;
     }
-    if (!Types.Extensions.isValidExtensionPayload(detailObj.devtools)) {
+    if (!Types.Extensions.isValidExtensionPayload(detailObj[key])) {
       return null;
     }
-    return detailObj.devtools;
+    return detailObj[key];
   } catch {
     // No need to worry about this error, just discard this event and don't
     // treat it as having any useful information for the purposes of extensions
     return null;
   }
 }
+
+function extensionPayloadForConsoleApi(timing: Types.Events.ConsoleTimeStamp):
+    Types.Extensions.ExtensionTrackEntryPayloadDeeplink|null {
+  if (!timing.args.data || !('devtools' in timing.args.data)) {
+    return null;
+  }
+
+  return parseDetail(`{"additionalContext": ${timing.args.data.devtools} }`, 'additionalContext') as
+      Types.Extensions.ExtensionTrackEntryPayloadDeeplink;
+}
+
+export function extensionDataInPerformanceTiming(
+    timing: Types.Events.SyntheticUserTimingPair|Types.Events.PerformanceMark): Types.Extensions.ExtensionDataPayload|
+    null {
+  const timingDetail =
+      Types.Events.isPerformanceMark(timing) ? timing.args.data?.detail : timing.args.data.beginEvent.args.detail;
+  if (!timingDetail) {
+    return null;
+  }
+  return parseDetail(timingDetail, 'devtools') as Types.Extensions.ExtensionDataPayload;
+}
+
 /**
  * Extracts extension data from a `console.timeStamp` event.
  *
@@ -272,14 +288,22 @@ export function extensionDataInConsoleTimeStamp(timeStamp: Types.Events.ConsoleT
   if (trackName === '' || trackName === undefined) {
     return null;
   }
+
+  let additionalContext: Types.Extensions.ExtensionTrackEntryPayloadDeeplink|undefined;
+  const payload = extensionPayloadForConsoleApi(timeStamp);
+  if (payload) {
+    additionalContext = payload;
+  }
+
   return {
     // the color is defaulted to primary if it's value isn't one from
     // the defined palette (see ExtensionUI::extensionEntryColor) so
     // we don't need to check the value is valid here.
     color: String(timeStamp.args.data.color) as Types.Extensions.ExtensionTrackEntryPayload['color'],
     track: String(trackName),
     dataType: 'track-entry',
-    trackGroup: timeStamp.args.data.trackGroup !== undefined ? String(timeStamp.args.data.trackGroup) : undefined
+    trackGroup: timeStamp.args.data.trackGroup !== undefined ? String(timeStamp.args.data.trackGroup) : undefined,
+    additionalContext
   };
 }
 

front_end/models/trace/types/Extensions.ts

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import type * as Platform from '../../../core/platform/platform.js';
+
 import type {
   Args, ConsoleTimeStamp, Event, PerformanceMark, PerformanceMeasureBegin, Phase, SyntheticBased} from
   './TraceEvents.js';
@@ -37,6 +39,14 @@ export interface ExtensionDataPayloadBase {
 
 export type ExtensionDataPayload = ExtensionTrackEntryPayload|ExtensionMarkerPayload;
 
+export interface ExtensionTrackEntryPayloadDeeplink {
+  // The URL (deep-link) to show in the summary for the track.
+  url: Platform.DevToolsPath.UrlString;
+  // The label to show in front of the URL when the deep-link is shown in the
+  // graph.
+  description: string;
+}
+
 export interface ExtensionTrackEntryPayload extends ExtensionDataPayloadBase {
   // Typed as possibly undefined since when no data type is provided
   // the entry is defaulted to a track entry
@@ -51,6 +61,9 @@ export interface ExtensionTrackEntryPayload extends ExtensionDataPayloadBase {
   // same value in this property as well as the same value in the track
   // property.
   trackGroup?: string;
+  // Additional context (deep-link URL) that can be shown in the summary for the
+  // track.
+  additionalContext?: ExtensionTrackEntryPayloadDeeplink;
 }
 
 export interface ExtensionMarkerPayload extends ExtensionDataPayloadBase {
@@ -85,8 +98,16 @@ export function isExtensionPayloadTrackEntry(payload: {track?: string, dataType?
   return validEntryType && hasTrack;
 }
 
-export function isValidExtensionPayload(payload: {track?: string, dataType?: string}): payload is ExtensionDataPayload {
-  return isExtensionPayloadMarker(payload) || isExtensionPayloadTrackEntry(payload);
+export function isConsoleTimestampPayloadTrackEntry(payload: {description?: string, url?: string}):
+    payload is ExtensionTrackEntryPayloadDeeplink {
+  return payload.url !== undefined && payload.description !== undefined;
+}
+
+export function isValidExtensionPayload(
+    payload: {track?: string, dataType?: string, description?: string, url?: string}): payload is ExtensionDataPayload|
+    ExtensionTrackEntryPayloadDeeplink {
+  return isExtensionPayloadMarker(payload) || isExtensionPayloadTrackEntry(payload) ||
+      isConsoleTimestampPayloadTrackEntry(payload);
 }
 
 export function isSyntheticExtensionEntry(entry: Event): entry is SyntheticExtensionEntry {

front_end/models/trace/types/TraceEvents.ts

@@ -5,6 +5,7 @@
 import type * as Platform from '../../../core/platform/platform.js';
 import type * as Protocol from '../../../generated/protocol.js';
 
+import type {ExtensionTrackEntryPayloadDeeplink} from './Extensions.js';
 import type {Micro, Milli, Seconds, TraceWindowMicro} from './Timing.js';
 
 // Trace Events.
@@ -1478,6 +1479,9 @@ export interface ConsoleTimeStamp extends Event {
       track?: string|number,
       trackGroup?: string|number,
       color?: string|number,
+      devtools?: {
+        link: ExtensionTrackEntryPayloadDeeplink,
+      },
       sampleTraceId?: number,
     },
   };