RPP: Move RevealableNetworkRequest class to SDK

This class is used to link to Network panel from Performance. But, due
to the subtleties of how providers and our *-meta.ts files work, the
entire trace model was imported during devtools boot.

Moving where the class lives means we can reduce the import dependencies
needed to start up the baseline DevTools UI.

Bug:390743134, 352512721
Change-Id: Ic21aa122ef4886ec16af1e852cdf1854a22e24e4
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6183081
Reviewed-by: Danil Somsikov <[email protected]>
Commit-Queue: Paul Irish <[email protected]>
Reviewed-by: Jack Franklin <[email protected]>

Author: paulirish

config/gni/devtools_grd_files.gni

@@ -1916,7 +1916,6 @@ grd_files_debug_sources = [
   "front_end/panels/timeline/utils/Helpers.js",
   "front_end/panels/timeline/utils/IgnoreList.js",
   "front_end/panels/timeline/utils/ImageCache.js",
-  "front_end/panels/timeline/utils/NetworkRequest.js",
   "front_end/panels/timeline/utils/SourceMapsResolver.js",
   "front_end/panels/web_audio/AudioContextContentBuilder.js",
   "front_end/panels/web_audio/AudioContextSelector.js",

front_end/core/sdk/TraceObject.ts

@@ -2,8 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Common from '../../core/common/common.js';
+import type * as Platform from '../../core/platform/platform.js';
 import type * as Protocol from '../../generated/protocol.js';
 
+import type {NetworkRequest} from './NetworkRequest.js';
+import {ResourceTreeModel} from './ResourceTreeModel.js';
+
 // A thin wrapper class, mostly to enable instanceof-based revealing of traces to open in Timeline.
 export class TraceObject {
   readonly traceEvents: Protocol.Tracing.DataCollectedEvent['value'];
@@ -21,3 +26,30 @@ export class RevealableEvent {
   constructor(public event: any) {
   }
 }
+
+/**
+ * Another wrapper class for revealing network requests in Network panel. The reason is the `Open in Network panel`
+ * option is handled by the context menu provider, which will add this option for all supporting types. And there are a
+ * lot of context menu providers that support `SDK.NetworkRequest.NetworkRequest`, for example `Override content` by
+ * PersistenceActions, but we so far just want the one to reveal in network panel, so add a new class which will only be
+ * supported by Network panel.
+ *
+ * Also we want to have a different behavior(select the network request) from the `SDK.NetworkRequest.NetworkRequest`
+ * (highlight the network request once).
+ */
+export class RevealableNetworkRequest {
+  constructor(public networkRequest: NetworkRequest) {
+  }
+
+  // Only Trace.Types.Events.SyntheticNetworkRequest are passed in, but we can't depend on that type from SDK
+  static create(event: unknown): RevealableNetworkRequest|null {
+    const syntheticNetworkRequest = event;
+    // @ts-expect-error We don't have type checking here to confirm these events have .args.data.url.
+    const url = syntheticNetworkRequest.args.data.url as Platform.DevToolsPath.UrlString;
+    const urlWithoutHash = Common.ParsedURL.ParsedURL.urlWithoutHash(url) as Platform.DevToolsPath.UrlString;
+
+    const resource = ResourceTreeModel.resourceForURL(url) ?? ResourceTreeModel.resourceForURL(urlWithoutHash);
+    const sdkNetworkRequest = resource?.request;
+    return sdkNetworkRequest ? new RevealableNetworkRequest(sdkNetworkRequest) : null;
+  }
+}

front_end/panels/network/BUILD.gn

@@ -79,7 +79,6 @@ devtools_module("network") {
     "../../panels/mobile_throttling:bundle",
     "../../panels/search:bundle",
     "../../panels/sources:bundle",
-    "../../panels/timeline/utils:bundle",
     "../../panels/utils:bundle",
     "../../third_party/chromium/client-variations:bundle",
     "../../ui/components/expandable_list:bundle",

front_end/panels/network/NetworkPanel.ts

@@ -50,7 +50,6 @@ import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as MobileThrottling from '../mobile_throttling/mobile_throttling.js';
 import * as Search from '../search/search.js';
-import * as TimelineUtils from '../timeline/utils/utils.js';
 
 import {Events, type RequestActivatedEvent} from './NetworkDataGridNode.js';
 import {NetworkItemView} from './NetworkItemView.js';
@@ -767,7 +766,7 @@ export class NetworkPanel extends UI.Panel.Panel implements
   appendApplicableItems(
       this: NetworkPanel, event: Event, contextMenu: UI.ContextMenu.ContextMenu,
       target: SDK.NetworkRequest.NetworkRequest|SDK.Resource.Resource|Workspace.UISourceCode.UISourceCode|
-      TimelineUtils.NetworkRequest.TimelineNetworkRequest): void {
+      SDK.TraceObject.RevealableNetworkRequest): void {
     const appendRevealItem = (request: SDK.NetworkRequest.NetworkRequest): void => {
       contextMenu.revealSection().appendItem(
           i18nString(UIStrings.openInNetworkPanel),
@@ -783,14 +782,14 @@ export class NetworkPanel extends UI.Panel.Panel implements
         jslogContext: 'reveal-in-network',
       });
     };
-    const appendRevealItemAndSelect = (request: TimelineUtils.NetworkRequest.TimelineNetworkRequest): void => {
+    const appendRevealItemAndSelect = (request: SDK.TraceObject.RevealableNetworkRequest): void => {
       contextMenu.revealSection().appendItem(
           i18nString(UIStrings.openInNetworkPanel),
           () => UI.ViewManager.ViewManager.instance()
                     .showView('network')
                     .then(this.networkLogView.resetFilter.bind(this.networkLogView))
                     .then(this.selectAndActivateRequest.bind(
-                        this, request.request, NetworkForward.UIRequestLocation.UIRequestTabs.HEADERS_COMPONENT,
+                        this, request.networkRequest, NetworkForward.UIRequestLocation.UIRequestTabs.HEADERS_COMPONENT,
                         /* FilterOptions= */ undefined)),
           {jslogContext: 'timeline.reveal-in-network'});
     };
@@ -816,7 +815,7 @@ export class NetworkPanel extends UI.Panel.Panel implements
       }
       return;
     }
-    if (target instanceof TimelineUtils.NetworkRequest.TimelineNetworkRequest) {
+    if (target instanceof SDK.TraceObject.RevealableNetworkRequest) {
       appendRevealItemAndSelect(target);
       return;
     }

front_end/panels/network/network-meta.ts

@@ -10,7 +10,6 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as Extensions from '../../models/extensions/extensions.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import * as TimelineUtils from '../timeline/utils/utils.js';
 
 import * as NetworkForward from './forward/forward.js';
 import type * as Network from './network.js';
@@ -443,7 +442,7 @@ UI.ContextMenu.registerProvider({
       SDK.NetworkRequest.NetworkRequest,
       SDK.Resource.Resource,
       Workspace.UISourceCode.UISourceCode,
-      TimelineUtils.NetworkRequest.TimelineNetworkRequest,
+      SDK.TraceObject.RevealableNetworkRequest,
     ];
   },
   async loadProvider() {

front_end/panels/timeline/TimelineFlameChartNetworkDataProvider.ts

@@ -4,6 +4,7 @@
 
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
+import * as SDK from '../../core/sdk/sdk.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -141,7 +142,7 @@ export class TimelineFlameChartNetworkDataProvider implements PerfUI.FlameChart.
     if (!networkRequest || !Trace.Types.Events.isSyntheticNetworkRequest(networkRequest)) {
       return;
     }
-    const timelineNetworkRequest = TimelineUtils.NetworkRequest.createTimelineNetworkRequest(networkRequest);
+    const timelineNetworkRequest = SDK.TraceObject.RevealableNetworkRequest.create(networkRequest);
     const contextMenu = new UI.ContextMenu.ContextMenu(event);
     contextMenu.appendApplicableItems(timelineNetworkRequest);
     return contextMenu;

front_end/panels/timeline/components/NetworkRequestDetails.ts

@@ -6,13 +6,13 @@ import '../../../ui/components/request_link_icon/request_link_icon.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as Platform from '../../../core/platform/platform.js';
-import type * as SDK from '../../../core/sdk/sdk.js';
+import * as SDK from '../../../core/sdk/sdk.js';
 import * as Helpers from '../../../models/trace/helpers/helpers.js';
 import * as Trace from '../../../models/trace/trace.js';
 import * as LegacyComponents from '../../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
-import * as TimelineUtils from '../utils/utils.js';
+import type * as TimelineUtils from '../utils/utils.js';
 
 import NetworkRequestDetailsStyles from './networkRequestDetails.css.js';
 import networkRequestTooltipStyles from './networkRequestTooltip.css.js';
@@ -168,28 +168,22 @@ export class NetworkRequestDetails extends HTMLElement {
     const linkifiedURL = LegacyComponents.Linkifier.Linkifier.linkifyURL(
         this.#networkRequest.args.data.url as Platform.DevToolsPath.UrlString, options);
 
-    const networkRequest = TimelineUtils.NetworkRequest.getNetworkRequest(this.#networkRequest);
+    // Potentially link to request within Network Panel
+    const networkRequest = SDK.TraceObject.RevealableNetworkRequest.create(this.#networkRequest);
     if (networkRequest) {
       linkifiedURL.addEventListener('contextmenu', (event: MouseEvent) => {
         if (!this.#networkRequest) {
           return;
         }
-        // Add a wrapper class here.
-        // The main reason is the `Open in Network panel` option is handled by the context menu provider, which will
-        // add this option for all supporting types. And there are a lot of context menu providers that support
-        // `SDK.NetworkRequest.NetworkRequest`, for example `Override content` by PersistenceActions, but we so far just
-        // want the one to reveal in network panel, so add a new class which will only be supported by Network panel.
-        // Also we want to have a different behavior(select the network request) from the
-        // `SDK.NetworkRequest.NetworkRequest` (highlight the network request once).
         const contextMenu = new UI.ContextMenu.ContextMenu(event);
-        contextMenu.appendApplicableItems(new TimelineUtils.NetworkRequest.TimelineNetworkRequest(networkRequest));
+        contextMenu.appendApplicableItems(networkRequest);
         void contextMenu.show();
       });
 
       // clang-format off
       const urlElement = html`
         ${linkifiedURL}
-        <devtools-request-link-icon .data=${{request: networkRequest}}>
+        <devtools-request-link-icon .data=${{request: networkRequest.networkRequest}}>
         </devtools-request-link-icon>
       `;
       // clang-format on

front_end/panels/timeline/utils/BUILD.gn

@@ -14,7 +14,6 @@ devtools_module("utils") {
     "Helpers.ts",
     "IgnoreList.ts",
     "ImageCache.ts",
-    "NetworkRequest.ts",
     "SourceMapsResolver.ts",
   ]
 
@@ -26,7 +25,6 @@ devtools_module("utils") {
     "../../../models/bindings:bundle",
     "../../../models/crux-manager:bundle",
     "../../../models/source_map_scopes:bundle",
-    "../../../models/timeline_model:bundle",
     "../../../models/trace:bundle",
     "../../../models/workspace:bundle",
     "../../../panels/mobile_throttling:bundle",

front_end/panels/timeline/utils/NetworkRequest.ts

@@ -8,7 +8,6 @@ import * as EntryStyles from './EntryStyles.js';
 import * as Helpers from './Helpers.js';
 import * as IgnoreList from './IgnoreList.js';
 import * as ImageCache from './ImageCache.js';
-import * as NetworkRequest from './NetworkRequest.js';
 import * as SourceMapsResolver from './SourceMapsResolver.js';
 
 export {
@@ -19,6 +18,5 @@ export {
   Helpers,
   IgnoreList,
   ImageCache,
-  NetworkRequest,
   SourceMapsResolver,
 };