[node_app] Show network panel as a preview panel in node_app/js_app

Design-doc: https://docs.google.com/document/d/1CmXzXt2bVD6Oy4wMakjJcc2ciry4GAAGSgHk4UuqLsE/edit?tab=t.0
Bug: 353924015
Change-Id: Icfc6b5a6448f17b0d30ea80835cefd8a001412a3
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6185606
Reviewed-by: Danil Somsikov <[email protected]>
Reviewed-by: Simon Zünd <[email protected]>
Commit-Queue: Danil Somsikov <[email protected]>

Author: legendecas

front_end/core/root/Runtime.test.ts

@@ -34,6 +34,23 @@ describe('Runtime', () => {
         assert.isNull(Root.Runtime.getRemoteBase(`${bundled}?remoteBase=${remoteOrigin}`));
       });
     });
+
+    describe('isNodeEntry', () => {
+      it('returns true for node_app', () => {
+        assert.isTrue(Root.Runtime.isNodeEntry('/bundled/node_app.html'));
+        assert.isTrue(Root.Runtime.isNodeEntry('/node_app'));
+      });
+
+      it('returns true for js_app', () => {
+        assert.isTrue(Root.Runtime.isNodeEntry('/bundled/js_app.html'));
+        assert.isTrue(Root.Runtime.isNodeEntry('/js_app'));
+      });
+
+      it('returns false for other entries', () => {
+        assert.isFalse(Root.Runtime.isNodeEntry('/bundled/inspector.html'));
+        assert.isFalse(Root.Runtime.isNodeEntry('/inspector'));
+      });
+    });
   });
 
   it('allConfigurableExperiments returns all registered experiments', () => {

front_end/core/root/Runtime.ts

@@ -9,6 +9,7 @@ const queryParamsObject = new URLSearchParams(location.search);
 let runtimePlatform = '';
 
 let runtimeInstance: Runtime|undefined;
+let isNode: boolean|undefined;
 
 export function getRemoteBase(location: string = self.location.toString()): {
   base: string,
@@ -32,6 +33,11 @@ export function getPathName(): string {
   return window.location.pathname;
 }
 
+export function isNodeEntry(pathname: string): boolean {
+  const nodeEntryPoints = ['node_app', 'js_app'];
+  return nodeEntryPoints.some(component => pathname.includes(component));
+}
+
 export class Runtime {
   private constructor() {
   }
@@ -74,6 +80,13 @@ export class Runtime {
     }
   }
 
+  static isNode(): boolean {
+    if (isNode === undefined) {
+      isNode = isNodeEntry(getPathName());
+    }
+    return isNode;
+  }
+
   static setPlatform(platform: string): void {
     runtimePlatform = platform;
   }

front_end/core/sdk/Target.ts

@@ -87,7 +87,7 @@ export class Target extends ProtocolClient.InspectorBackend.TargetBase {
         this.#capabilitiesMask = Capability.JS | Capability.LOG | Capability.EVENT_BREAKPOINTS | Capability.NETWORK;
         break;
       case Type.NODE:
-        this.#capabilitiesMask = Capability.JS;
+        this.#capabilitiesMask = Capability.JS | Capability.NETWORK;
         break;
       case Type.AUCTION_WORKLET:
         this.#capabilitiesMask = Capability.JS | Capability.EVENT_BREAKPOINTS;

front_end/entrypoints/js_app/BUILD.gn

@@ -15,6 +15,7 @@ devtools_entrypoint("entrypoint") {
     "../../generated:protocol",
     "../../panels/js_timeline:meta",
     "../../panels/mobile_throttling:meta",
+    "../../panels/network:meta",
     "../../ui/legacy/components/utils:bundle",
     "../main:bundle",
     "../shell",

front_end/entrypoints/js_app/js_app.ts

@@ -5,6 +5,7 @@
 import '../shell/shell.js';
 import '../../panels/js_timeline/js_timeline-meta.js';
 import '../../panels/mobile_throttling/mobile_throttling-meta.js';
+import '../../panels/network/network-meta.js';
 
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';

front_end/entrypoints/node_app/BUILD.gn

@@ -38,6 +38,7 @@ devtools_entrypoint("entrypoint") {
     "../../core/root:bundle",
     "../../panels/js_timeline:meta",
     "../../panels/mobile_throttling:meta",
+    "../../panels/network:meta",
     "../../panels/sources:bundle",
     "../../ui/legacy:bundle",
     "../shell",

front_end/entrypoints/node_app/node_app.ts

@@ -4,6 +4,7 @@
 import '../shell/shell.js';
 import '../../panels/mobile_throttling/mobile_throttling-meta.js';
 import '../../panels/js_timeline/js_timeline-meta.js';
+import '../../panels/network/network-meta.js';
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';

front_end/panels/network/network-meta.ts

@@ -5,6 +5,7 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
+import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Extensions from '../../models/extensions/extensions.js';
 import * as Workspace from '../../models/workspace/workspace.js';
@@ -144,6 +145,8 @@ const str_ = i18n.i18n.registerUIStrings('panels/network/network-meta.ts', UIStr
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
 let loadedNetworkModule: (typeof Network|undefined);
 
+const isNode = Root.Runtime.Runtime.isNode();
+
 async function loadNetworkModule(): Promise<typeof Network> {
   if (!loadedNetworkModule) {
     loadedNetworkModule = await import('./network.js');
@@ -164,6 +167,7 @@ UI.ViewManager.registerViewExtension({
   commandPrompt: i18nLazyString(UIStrings.showNetwork),
   title: i18nLazyString(UIStrings.network),
   order: 40,
+  isPreviewFeature: isNode,
   async loadView() {
     const Network = await loadNetworkModule();
     return Network.NetworkPanel.NetworkPanel.instance();