chrome-devtools-frontend 1.0.1581449 → 1.0.1581708

package/front_end/entrypoints/greendev_floaty/floaty.css

@@ -251,8 +251,48 @@ html, body {
 }
 
 .green-dev-floaty-disclaimer {
-  font-size: 13px;
+  font-size: 16px;
   color: #666;
   text-align: center;
   margin-top: 8px;
+  position: relative; /* For tooltip positioning */
+}
+
+.disclaimer-link {
+  color: #666; /* Match text color */
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.disclaimer-tooltip {
+  display: none;
+  position: absolute;
+  bottom: 100%; /* Position above */
+  left: 50%;
+  transform: translateX(-50%);
+  width: 300px;
+  padding: 12px;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgb(0 0 0 / 20%);
+  z-index: 1000;
+  text-align: left;
+  font-size: 14px;
+  line-height: 1.4;
+  color: #333;
+}
+
+.disclaimer-link:hover + .disclaimer-tooltip,
+.disclaimer-tooltip:hover {
+  display: block;
+}
+
+.learn-more-link {
+  color: #0b57d0;
+  text-decoration: none;
+}
+
+.learn-more-link:hover {
+  text-decoration: underline;
 }

package/front_end/entrypoints/greendev_floaty/floaty.html

@@ -23,7 +23,14 @@
           <input type="text" class="green-dev-floaty-dialog-text-field" placeholder="Why is this not centered?">
           <button class="green-dev-floaty-dialog-play-button"></button>
         </div>
-        <div class="green-dev-floaty-disclaimer">Relevant data is sent to Google</div>
+        <div class="green-dev-floaty-disclaimer">
+          <span class="disclaimer-link">Relevant data</span> is sent to Google
+          <div class="disclaimer-tooltip">
+            Chat messages and any data the inspected page can access via Web APIs are sent to Google and may be seen by human reviewers to improve this feature. This is an experimental AI feature and won't always get it right.
+            <br><br>
+            <a href="https://developer.chrome.com/docs/devtools/ai-assistance" class="learn-more-link">Learn about AI in DevTools</a>
+          </div>
+        </div>
       </div>
     </div>
   </div>

package/front_end/entrypoints/greendev_floaty/greendev_floaty.ts

@@ -66,8 +66,8 @@ class GreenDevFloaty {
         // Refresh the anchor by re-sending the show command.
         const msg = JSON.stringify({
           id: 9999,
-          method: 'Overlay.setShowGreenDevFloatyAnchor',
-          params: {greenDevFloatyHighlightConfig: {backendNodeId: this.#backendNodeId}}
+          method: 'Overlay.setShowInspectedElementAnchor',
+          params: {inspectedElementAnchorConfig: {backendNodeId: this.#backendNodeId}}
         });
         Host.InspectorFrontendHost.InspectorFrontendHostInstance.sendMessageToBackend(msg);
       }
@@ -403,8 +403,8 @@ async function init(): Promise<void> {
             if (backendNodeId) {
               const msg = JSON.stringify({
                 id: 9999,
-                method: 'Overlay.setShowGreenDevFloatyAnchor',
-                params: {greenDevFloatyHighlightConfig: {backendNodeId}}
+                method: 'Overlay.setShowInspectedElementAnchor',
+                params: {inspectedElementAnchorConfig: {backendNodeId}}
               });
               Host.InspectorFrontendHost.InspectorFrontendHostInstance.sendMessageToBackend(msg);
             }

package/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 {

package/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);

package/front_end/models/ai_assistance/AiConversation.ts

@@ -55,6 +55,7 @@ export class AiConversation {
         undefined,
         undefined,
         serializedConversation.isExternal,
+        undefined,
     );
   }
 
@@ -74,6 +75,9 @@ export class AiConversation {
 
   #contexts: Array<ConversationContext<unknown>> = [];
 
+  #performanceRecordAndReload?: () => Promise<Trace.TraceModel.ParsedTrace>;
+  #onInspectElement?: () => Promise<SDK.DOMModel.DOMNode|null>;
+
   constructor(
       type: ConversationType,
       data: ResponseData[] = [],
@@ -82,9 +86,13 @@ export class AiConversation {
       aidaClient: Host.AidaClient.AidaClient = new Host.AidaClient.AidaClient(),
       changeManager?: ChangeManager,
       isExternal = false,
+      performanceRecordAndReload?: () => Promise<Trace.TraceModel.ParsedTrace>,
+      onInspectElement?: () => Promise<SDK.DOMModel.DOMNode|null>,
   ) {
     this.#changeManager = changeManager;
     this.#aidaClient = aidaClient;
+    this.#performanceRecordAndReload = performanceRecordAndReload;
+    this.#onInspectElement = onInspectElement;
 
     this.id = id;
     this.#isReadOnly = isReadOnly;
@@ -278,6 +286,8 @@ export class AiConversation {
       serverSideLoggingEnabled: isAiAssistanceServerSideLoggingEnabled(),
       sessionId: this.id,
       changeManager: this.#changeManager,
+      performanceRecordAndReload: this.#performanceRecordAndReload,
+      onInspectElement: this.#onInspectElement,
     };
     switch (type) {
       case ConversationType.STYLING: {

package/front_end/models/ai_assistance/agents/AiAgent.ts

@@ -4,6 +4,7 @@
 
 import * as Host from '../../../core/host/host.js';
 import * as Root from '../../../core/root/root.js';
+import type * as SDK from '../../../core/sdk/sdk.js';
 import {debugLog, isStructuredLogEnabled} from '../debug.js';
 
 export const enum ResponseType {
@@ -133,6 +134,7 @@ export interface AgentOptions {
   serverSideLoggingEnabled?: boolean;
   sessionId?: string;
   confirmSideEffectForTest?: typeof Promise.withResolvers;
+  onInspectElement?: () => Promise<SDK.DOMModel.DOMNode|null>;
 }
 
 export interface ParsedAnswer {

package/front_end/models/ai_assistance/agents/ContextSelectionAgent.snapshot.txt

@@ -88,6 +88,28 @@ Content:
           }
         }
       }
+    },
+    {
+      "name": "performanceRecordAndReload",
+      "description": "Start a new performance recording and reload the page.",
+      "parameters": {
+        "type": 6,
+        "description": "",
+        "nullable": true,
+        "required": [],
+        "properties": {}
+      }
+    },
+    {
+      "name": "inspectDom",
+      "description": "Prompts user to select a DOM element from the page.",
+      "parameters": {
+        "type": 6,
+        "description": "",
+        "nullable": true,
+        "required": [],
+        "properties": {}
+      }
     }
   ],
   "options": {},

package/front_end/models/ai_assistance/agents/ContextSelectionAgent.ts

@@ -9,7 +9,9 @@ import * 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 Logs from '../../logs/logs.js';
+import type * as Trace from '../../trace/trace.js';
 import * as Workspace from '../../workspace/workspace.js';
+import {AgentFocus} from '../performance/AIContext.js';
 
 import {
   type AgentOptions,
@@ -71,8 +73,16 @@ export class ContextSelectionAgent extends AiAgent<never> {
     };
   }
 
-  constructor(opts: AgentOptions) {
+  readonly #performanceRecordAndReload?: () => Promise<Trace.TraceModel.ParsedTrace>;
+  readonly #onInspectElement?: () => Promise<SDK.DOMModel.DOMNode|null>;
+
+  constructor(opts: AgentOptions&{
+    performanceRecordAndReload?: () => Promise<Trace.TraceModel.ParsedTrace>,
+    onInspectElement?: () => Promise<SDK.DOMModel.DOMNode|null>,
+  }) {
     super(opts);
+    this.#performanceRecordAndReload = opts.performanceRecordAndReload;
+    this.#onInspectElement = opts.onInspectElement;
 
     this.declareFunction<Record<string, never>>('listNetworkRequests', {
       description: `Gives a list of network requests including URL, status code, and duration in ms`,
@@ -213,6 +223,66 @@ export class ContextSelectionAgent extends AiAgent<never> {
         return {error: 'Unable to find file.'};
       },
     });
+
+    this.declareFunction('performanceRecordAndReload', {
+      description: 'Start a new performance recording and reload the page.',
+      parameters: {
+        type: Host.AidaClient.ParametersTypes.OBJECT,
+        description: '',
+        nullable: true,
+        required: [],
+        properties: {},
+      },
+      displayInfoFromArgs: () => {
+        return {
+          title: 'Recording a performance trace…',
+          action: 'performanceRecordAndReload()',
+        };
+      },
+      handler: async () => {
+        if (!this.#performanceRecordAndReload) {
+          return {
+            error: 'Performance recording is not available.',
+          };
+        }
+        const result = await this.#performanceRecordAndReload();
+
+        return {
+          context: AgentFocus.fromParsedTrace(result),
+        };
+      }
+    });
+
+    this.declareFunction<Record<string, never>>('inspectDom', {
+      description: `Prompts user to select a DOM element from the page.`,
+      parameters: {
+        type: Host.AidaClient.ParametersTypes.OBJECT,
+        description: '',
+        nullable: true,
+        required: [],
+        properties: {},
+      },
+      displayInfoFromArgs: () => {
+        return {
+          title: lockedString('Please select an element on the page...'),
+          action: 'selectElement()',
+        };
+      },
+      handler: async () => {
+        if (!this.#onInspectElement) {
+          return {error: 'The inspect element action is not available.'};
+        }
+        const node = await this.#onInspectElement();
+        if (node) {
+          return {
+            context: node,
+          };
+        }
+        return {
+          error: 'Unable to select element.',
+        };
+      },
+    });
   }
 
   #getUISourceCodes = (): Iterable<Workspace.UISourceCode.UISourceCode> => {

package/front_end/models/computed_style/ComputedStyleModel.ts

@@ -137,6 +137,32 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
                                                            null as ComputedStyle | null;
     }
   }
+
+  private async fetchMatchedCascade(): Promise<SDK.CSSMatchedStyles.CSSMatchedStyles|null> {
+    const node = this.node;
+    if (!node || !this.cssModel()) {
+      return null;
+    }
+
+    const cssModel = this.cssModel();
+    if (!cssModel) {
+      return null;
+    }
+
+    const matchedStyles = await cssModel.cachedMatchedCascadeForNode(node);
+    if (!matchedStyles) {
+      return null;
+    }
+    return matchedStyles.node() === this.node ? matchedStyles : null;
+  }
+
+  async fetchAllComputedStyleInfo(): Promise<{
+    computedStyle: ComputedStyle | null,
+    matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles|null,
+  }> {
+    const [computedStyle, matchedStyles] = await Promise.all([this.fetchComputedStyle(), this.fetchMatchedCascade()]);
+    return {computedStyle, matchedStyles};
+  }
 }
 
 export const enum Events {

package/front_end/models/issues_manager/CookieIssue.ts

@@ -8,7 +8,6 @@ import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
-import * as ThirdPartyWeb from '../../third_party/third-party-web/third-party-web.js';
 
 import {Issue, IssueCategory, IssueKind} from './Issue.js';
 import {
@@ -55,15 +54,6 @@ export const enum CookieStatus {
   ALLOWED_BY_HEURISTICS = 3,
 }
 
-export interface CookieReportInfo {
-  name: string;
-  domain: string;
-  type?: string;
-  platform?: string;
-  status: CookieStatus;
-  insight?: Protocol.Audits.CookieIssueInsight;
-}
-
 export class CookieIssue extends Issue<Protocol.Audits.CookieIssueDetails> {
   cookieId(): string {
     const details = this.details();
@@ -246,24 +236,6 @@ export class CookieIssue extends Issue<Protocol.Audits.CookieIssueDetails> {
     return IssueKind.BREAKING_CHANGE;
   }
 
-  makeCookieReportEntry(): CookieReportInfo|undefined {
-    const status = CookieIssue.getCookieStatus(this.details());
-    const details = this.details();
-    if (details.cookie && details.cookieUrl && status !== undefined) {
-      const entity = ThirdPartyWeb.ThirdPartyWeb.getEntity(details.cookieUrl);
-      return {
-        name: details.cookie.name,
-        domain: details.cookie.domain,
-        type: entity?.category,
-        platform: entity?.name,
-        status,
-        insight: this.details().insight,
-      };
-    }
-
-    return;
-  }
-
   static getCookieStatus(cookieIssueDetails: Protocol.Audits.CookieIssueDetails): CookieStatus|undefined {
     if (cookieIssueDetails.cookieExclusionReasons.includes(
             Protocol.Audits.CookieExclusionReason.ExcludeThirdPartyPhaseout)) {

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -15,6 +15,7 @@ import * as Annotations from '../../models/annotations/annotations.js';
 import * as Badges from '../../models/badges/badges.js';
 import * as GreenDev from '../../models/greendev/greendev.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
+import type * as Trace from '../../models/trace/trace.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as Snackbars from '../../ui/components/snackbars/snackbars.js';
@@ -503,6 +504,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   #selectedRequest: AiAssistanceModel.NetworkAgent.RequestContext|null = null;
   // Messages displayed in the `ChatView` component.
   #messages: Message[] = [];
+  #isContextAutoSelectionSuspended = false;
 
   // Whether the UI should show loading or not.
   #isLoading = false;
@@ -672,6 +674,10 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     this.requestUpdate();
   }
 
+  async #handlePerformanceRecordAndReload(): Promise<Trace.TraceModel.ParsedTrace> {
+    return await TimelinePanel.TimelinePanel.TimelinePanel.executeRecordAndReload();
+  }
+
   #getDefaultConversationType(): AiAssistanceModel.AiHistoryStorage.ConversationType|undefined {
     const {hostConfig} = Root.Runtime;
     const viewManager = UI.ViewManager.ViewManager.instance();
@@ -715,7 +721,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     }
     const conversation = targetConversationType ?
         new AiAssistanceModel.AiConversation.AiConversation(
-            targetConversationType, [], undefined, false, this.#aidaClient, this.#changeManager) :
+            targetConversationType, [], undefined, false, this.#aidaClient, this.#changeManager, false,
+            this.#handlePerformanceRecordAndReload.bind(this), this.#handleInspectElement.bind(this)) :
         undefined;
 
     this.#updateConversationState(conversation);
@@ -735,16 +742,28 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         const conversationType = this.#getDefaultConversationType();
         if (conversationType) {
           conversation = new AiAssistanceModel.AiConversation.AiConversation(
-              conversationType, [], undefined, false, this.#aidaClient, this.#changeManager);
+              conversationType,
+              [],
+              undefined,
+              false,
+              this.#aidaClient,
+              this.#changeManager,
+              false,
+              this.#handlePerformanceRecordAndReload.bind(this),
+              this.#handleInspectElement.bind(this),
+          );
         }
       }
 
       this.#conversation = conversation;
+      this.#isContextAutoSelectionSuspended = false;
     }
 
-    this.#conversation?.setContext(this.#getConversationContext(
-        isAiAssistanceContextSelectionAgentEnabled() ? this.#getDefaultConversationType() :
-                                                       (this.#conversation?.type ?? null)));
+    if (!this.#isContextAutoSelectionSuspended) {
+      this.#conversation?.setContext(this.#getConversationContext(
+          isAiAssistanceContextSelectionAgentEnabled() ? this.#getDefaultConversationType() :
+                                                         (this.#conversation?.type ?? null)));
+    }
 
     this.requestUpdate();
   }
@@ -1116,10 +1135,12 @@ export class AiAssistancePanel extends UI.Panel.Panel {
 
   #handleContextRemoved(): void {
     this.#conversation?.setContext(null);
+    this.#isContextAutoSelectionSuspended = true;
     this.requestUpdate();
   }
 
   #handleContextAdd(): void {
+    this.#isContextAutoSelectionSuspended = false;
     this.#conversation?.setContext(this.#getConversationContext(this.#getDefaultConversationType()));
     this.requestUpdate();
   }
@@ -1141,6 +1162,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       return;
     }
 
+    this.#isContextAutoSelectionSuspended = false;
     let targetConversationType: AiAssistanceModel.AiHistoryStorage.ConversationType|undefined;
     switch (actionId) {
       case 'freestyler.elements-floating-button': {
@@ -1187,7 +1209,16 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     let conversation = this.#conversation;
     if (!this.#conversation || this.#conversation.type !== targetConversationType || this.#conversation.isEmpty) {
       conversation = new AiAssistanceModel.AiConversation.AiConversation(
-          targetConversationType, [], undefined, false, this.#aidaClient, this.#changeManager);
+          targetConversationType,
+          [],
+          undefined,
+          false,
+          this.#aidaClient,
+          this.#changeManager,
+          false,
+          this.#handlePerformanceRecordAndReload.bind(this),
+          this.#handleInspectElement.bind(this),
+      );
     }
     this.#updateConversationState(conversation);
     const predefinedPrompt = opts?.['prompt'];
@@ -1334,11 +1365,61 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       this.#conversation?.setContext(context);
     }
 
+    this.#isContextAutoSelectionSuspended = false;
+
     void VisualLogging.logFunctionCall(`context-change-${this.#conversation?.type}`);
 
     this.requestUpdate();
   };
 
+  async #handleInspectElement(): Promise<SDK.DOMModel.DOMNode|null> {
+    if (!this.#toggleSearchElementAction) {
+      return null;
+    }
+
+    const result = new Promise<SDK.DOMModel.DOMNode|null>(resolve => {
+      // Track the new flavor change for dom node.
+      const handleDOMNodeFlavorChange = (ev: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode>): void => {
+        if (!ev.data) {
+          return;
+        }
+        resolve(selectedElementFilter(ev.data));
+        removeListeners();
+      };
+
+      // If the inspect mode is toggled, we want to resolve null.
+      const handleInspectModeToggled = (ev: Common.EventTarget.EventTargetEvent<boolean>): void => {
+        if (!ev.data) {
+          // The inspect element is toggled off
+          // before the flavor change event fires
+          // so we need to wait a bit to see if the flavor changed.
+          window.setTimeout(() => {
+            resolve((selectedElementFilter(UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode))));
+            removeListeners();
+          }, 50);
+        }
+      };
+
+      const removeListeners = (): void => {
+        UI.Context.Context.instance().removeFlavorChangeListener(SDK.DOMModel.DOMNode, handleDOMNodeFlavorChange);
+        this.#toggleSearchElementAction?.removeEventListener(
+            UI.ActionRegistration.Events.TOGGLED, handleInspectModeToggled);
+      };
+
+      UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, handleDOMNodeFlavorChange);
+      this.#toggleSearchElementAction?.addEventListener(UI.ActionRegistration.Events.TOGGLED, handleInspectModeToggled);
+
+      // Clean-up listeners in case of abort.
+      this.#runAbortController.signal.addEventListener('abort', () => {
+        resolve(null);
+        removeListeners();
+      }, {once: true});
+    });
+
+    void this.#toggleSearchElementAction.execute();
+    return await result;
+  }
+
   async #startConversation(
       text: string,
       imageInput?: Host.AidaClient.Part,

package/front_end/panels/ai_assistance/components/ChatInput.ts

@@ -392,7 +392,7 @@ export const
                                     class="add-context"
                                     .iconName=${'plus'}
                                     .size=${Buttons.Button.Size.SMALL}
-                                    .jslogContext=${'context-add'}
+                                    .jslogContext=${'context-added'}
                                     .variant=${Buttons.Button.Variant.ICON}
                                     @click=${input.onContextAdd}></devtools-button>` : Lit.nothing}
               </div>

package/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 {

package/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',