enable dom_storage for node

This is a change request to enable DOM storage inspection in Node.js.
The Node.js changes are implemented in the following PR.
nodejs/node#61139

Bug: none
Change-Id: Iaf0fe135f1cc3f6cc746856d6a3fdd506f08390e
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7274801
Reviewed-by: Philip Pfaffe <pfaffe@chromium.org>
Reviewed-by: Simon Zünd <szuend@chromium.org>
Commit-Queue: Simon Zünd <szuend@chromium.org>

Author: islandryu

front_end/core/sdk/StorageKeyManager.ts

@@ -56,7 +56,12 @@ export function parseStorageKey(storageKeyString: string): StorageKey {
   // third_party/blink/common/storage_key/storage_key.cc
   const components = storageKeyString.split('^');
   const origin = Common.ParsedURL.ParsedURL.extractOrigin(components[0] as Platform.DevToolsPath.UrlString);
-  const storageKey = {origin, components: new Map<StorageKeyComponent, string>()};
+  const storageKey = {
+    // For file:// URLs, extracting the origin collapses it to "file://".
+    // Node.js uses the full file URL as the StorageKey, so keep the original URL here.
+    origin: origin === 'file://' ? components[0] as Platform.DevToolsPath.UrlString : origin,
+    components: new Map<StorageKeyComponent, string>()
+  };
   for (let i = 1; i < components.length; ++i) {
     storageKey.components.set(components[i].charAt(0) as StorageKeyComponent, components[i].substring(1));
   }

front_end/core/sdk/Target.ts

@@ -49,7 +49,7 @@ export class Target extends ProtocolClient.InspectorBackend.TargetBase {
         this.#capabilitiesMask = Capability.BROWSER | Capability.STORAGE | Capability.DOM | Capability.JS |
             Capability.LOG | Capability.NETWORK | Capability.TARGET | Capability.TRACING | Capability.EMULATION |
             Capability.INPUT | Capability.INSPECTOR | Capability.AUDITS | Capability.WEB_AUTHN | Capability.IO |
-            Capability.MEDIA | Capability.EVENT_BREAKPOINTS;
+            Capability.MEDIA | Capability.EVENT_BREAKPOINTS | Capability.DOM_STORAGE;
         if (parentTarget?.type() !== Type.FRAME) {
           // This matches backend exposing certain capabilities only for the main frame.
           this.#capabilitiesMask |=
@@ -92,7 +92,8 @@ 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 | Capability.NETWORK | Capability.TARGET | Capability.IO;
+        this.#capabilitiesMask =
+            Capability.JS | Capability.NETWORK | Capability.TARGET | Capability.IO | Capability.DOM_STORAGE;
         break;
       case Type.AUCTION_WORKLET:
         this.#capabilitiesMask = Capability.JS | Capability.EVENT_BREAKPOINTS;
@@ -318,5 +319,6 @@ export const enum Capability {
   IO = 1 << 17,
   MEDIA = 1 << 18,
   EVENT_BREAKPOINTS = 1 << 19,
+  DOM_STORAGE = 1 << 20,
   NONE = 0,
 }

front_end/entrypoints/node_app/BUILD.gn

@@ -12,6 +12,7 @@ devtools_entrypoint("entrypoint") {
     "../../core/common:bundle",
     "../../core/i18n:bundle",
     "../../core/root:bundle",
+    "../../panels/application:bundle",
     "../../panels/js_timeline:meta",
     "../../panels/mobile_throttling:meta",
     "../../panels/network:meta",

front_end/entrypoints/node_app/app/NodeMain.ts

@@ -107,7 +107,7 @@ export class NodeChildTargetManager extends SDK.SDKModel.SDKModel<void> implemen
   targetDestroyed(_event: Protocol.Target.TargetDestroyedEvent): void {
   }
 
-  attachedToTarget({sessionId, targetInfo}: Protocol.Target.AttachedToTargetEvent): void {
+  async attachedToTarget({sessionId, targetInfo}: Protocol.Target.AttachedToTargetEvent): Promise<void> {
     let target: SDK.Target.Target;
     if (targetInfo.type === 'node_worker') {
       target = this.#targetManager.createTarget(
@@ -124,6 +124,24 @@ export class NodeChildTargetManager extends SDK.SDKModel.SDKModel<void> implemen
     }
     this.#childTargets.set(sessionId, target);
     void target.runtimeAgent().invoke_runIfWaitingForDebugger();
+    await this.#initializeStorage(target);
+  }
+
+  async #initializeStorage(target: SDK.Target.Target): Promise<void> {
+    const storageAgent = target.storageAgent();
+    const response = await storageAgent.invoke_getStorageKey({});
+
+    const storageKey = response.storageKey;
+    if (response.getError() || !storageKey) {
+      console.error(`Failed to get storage key for target ${target.id()}: ${response.getError()}`);
+      return;
+    }
+
+    const storageKeyManager = target.model(SDK.StorageKeyManager.StorageKeyManager);
+    if (storageKeyManager) {
+      storageKeyManager.setMainStorageKey(storageKey);
+      storageKeyManager.updateStorageKeys(new Set([storageKey]));
+    }
   }
 
   detachedFromTarget({sessionId}: Protocol.Target.DetachedFromTargetEvent): void {

front_end/entrypoints/node_app/node_app.ts

@@ -9,6 +9,7 @@ import '../../panels/network/network-meta.js';
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Root from '../../core/root/root.js';
+import type * as Resources from '../../panels/application/application.js';
 import type * as Sources from '../../panels/sources/sources.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Main from '../main/main.js';
@@ -39,6 +40,14 @@ const UIStrings = {
    * @description Command for showing the 'Node' tool in the Network Navigator View, which is part of the Sources tool
    */
   showNode: 'Show Node',
+  /**
+   * @description Text in Application Panel Sidebar of the Application panel
+   */
+  application: 'Application',
+  /**
+   * @description Command for showing the 'Application' tool
+   */
+  showApplication: 'Show Application',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('entrypoints/node_app/node_app.ts', UIStrings);
@@ -78,6 +87,31 @@ UI.ViewManager.registerViewExtension({
   },
 });
 
+let loadedResourcesModule: (typeof Resources|undefined);
+
+async function loadResourcesModule(): Promise<typeof Resources> {
+  if (!loadedResourcesModule) {
+    loadedResourcesModule = await import('../../panels/application/application.js');
+  }
+  return loadedResourcesModule;
+}
+
+UI.ViewManager.registerViewExtension({
+  location: UI.ViewManager.ViewLocationValues.PANEL,
+  id: 'resources',
+  title: i18nLazyString(UIStrings.application),
+  commandPrompt: i18nLazyString(UIStrings.showApplication),
+  order: 70,
+  async loadView() {
+    const Resources = await loadResourcesModule();
+    return Resources.ResourcesPanel.ResourcesPanel.instance({
+      forceNew: true,
+      mode: 'node',
+    });
+  },
+  tags: [],
+});
+
 // @ts-expect-error Exposed for legacy layout tests
 self.runtime = Root.Runtime.Runtime.instance({forceNew: true});
 Common.Runnable.registerEarlyInitializationRunnable(NodeMainImpl.instance);

front_end/panels/application/ApplicationPanelSidebar.ts

@@ -1916,17 +1916,19 @@ export class ResourcesSection implements SDK.TargetManager.Observer {
     frameManager.addEventListener(
         SDK.FrameManager.Events.RESOURCE_ADDED, event => this.resourceAdded(event.data.resource), this);
 
-    SDK.TargetManager.TargetManager.instance().addModelListener(
-        SDK.ChildTargetManager.ChildTargetManager, SDK.ChildTargetManager.Events.TARGET_CREATED, this.windowOpened,
-        this, {scoped: true});
-    SDK.TargetManager.TargetManager.instance().addModelListener(
-        SDK.ChildTargetManager.ChildTargetManager, SDK.ChildTargetManager.Events.TARGET_INFO_CHANGED,
-        this.windowChanged, this, {scoped: true});
-    SDK.TargetManager.TargetManager.instance().addModelListener(
-        SDK.ChildTargetManager.ChildTargetManager, SDK.ChildTargetManager.Events.TARGET_DESTROYED, this.windowDestroyed,
-        this, {scoped: true});
-
-    SDK.TargetManager.TargetManager.instance().observeTargets(this, {scoped: true});
+    if (this.panel.mode !== 'node') {
+      SDK.TargetManager.TargetManager.instance().addModelListener(
+          SDK.ChildTargetManager.ChildTargetManager, SDK.ChildTargetManager.Events.TARGET_CREATED, this.windowOpened,
+          this, {scoped: true});
+      SDK.TargetManager.TargetManager.instance().addModelListener(
+          SDK.ChildTargetManager.ChildTargetManager, SDK.ChildTargetManager.Events.TARGET_INFO_CHANGED,
+          this.windowChanged, this, {scoped: true});
+      SDK.TargetManager.TargetManager.instance().addModelListener(
+          SDK.ChildTargetManager.ChildTargetManager, SDK.ChildTargetManager.Events.TARGET_DESTROYED,
+          this.windowDestroyed, this, {scoped: true});
+
+      SDK.TargetManager.TargetManager.instance().observeTargets(this, {scoped: true});
+    }
   }
 
   private initialize(): void {

front_end/panels/application/DOMStorageModel.ts

@@ -250,7 +250,7 @@ export class DOMStorageModel extends SDK.SDKModel.SDKModel<EventTypes> {
   }
 }
 
-SDK.SDKModel.SDKModel.register(DOMStorageModel, {capabilities: SDK.Target.Capability.DOM, autostart: false});
+SDK.SDKModel.SDKModel.register(DOMStorageModel, {capabilities: SDK.Target.Capability.DOM_STORAGE, autostart: false});
 
 export const enum Events {
   DOM_STORAGE_ADDED = 'DOMStorageAdded',

front_end/panels/application/ResourcesPanel.ts

@@ -37,9 +37,13 @@ export class ResourcesPanel extends UI.Panel.PanelWithSidebar {
   private cookieView: CookieItemsView|null;
   private deviceBoundSessionsView: DeviceBoundSessionsView|null;
   private readonly sidebar: ApplicationPanelSidebar;
+  mode: 'default'|'node' = 'default';
 
-  private constructor() {
+  private constructor(
+      mode: 'default'|'node' = 'default',
+  ) {
     super('resources');
+    this.mode = mode;
     this.registerRequiredCSS(resourcesPanelStyles);
 
     this.resourcesLastSelectedItemSetting =
@@ -68,11 +72,12 @@ export class ResourcesPanel extends UI.Panel.PanelWithSidebar {
   }
 
   static instance(opts: {
-    forceNew: boolean|null,
-  } = {forceNew: null}): ResourcesPanel {
-    const {forceNew} = opts;
+    forceNew?: boolean|null,
+    mode?: 'default'|'node',
+  } = {forceNew: null, mode: 'default'}): ResourcesPanel {
+    const {forceNew, mode} = opts;
     if (!resourcesPanelInstance || forceNew) {
-      resourcesPanelInstance = new ResourcesPanel();
+      resourcesPanelInstance = new ResourcesPanel(mode);
     }
 
     return resourcesPanelInstance;