chrome-devtools-frontend 1.0.1579812 → 1.0.1581708

package/front_end/entrypoints/greendev_floaty/greendev_floaty.ts

@@ -0,0 +1,422 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+/* eslint-disable @devtools/no-imperative-dom-api */
+
+import '../../core/sdk/sdk-meta.js';
+import '../../models/workspace/workspace-meta.js';
+import '../../panels/sensors/sensors-meta.js';
+import '../inspector_main/inspector_main-meta.js';
+import '../main/main-meta.js';
+
+import * as Common from '../../core/common/common.js';
+import * as Host from '../../core/host/host.js';
+import * as i18n from '../../core/i18n/i18n.js';
+import * as Root from '../../core/root/root.js';
+import * as SDK from '../../core/sdk/sdk.js';
+import * as Foundation from '../../foundation/foundation.js';
+import type * as Protocol from '../../generated/protocol.js';
+import * as AiAssistance from '../../models/ai_assistance/ai_assistance.js';
+
+const {AidaClient} = Host.AidaClient;
+const {ResponseType} = AiAssistance.AiAgent;
+const {NodeContext, StylingAgent} = AiAssistance.StylingAgent;
+
+class GreenDevFloaty {
+  #chatContainer: HTMLDivElement;
+  #textField: HTMLInputElement;
+  #playButton: HTMLButtonElement;
+  #node?: SDK.DOMModel.DOMNode;
+  #agent?: StylingAgent;
+  #nodeContext?: NodeContext;
+  #backendNodeId?: Protocol.DOM.BackendNodeId;
+  // Switching this to false can help while investigating tool conflicts.
+  #highlightNodeOnWindowFocus = false;
+
+  constructor(document: Document) {
+    this.#chatContainer = document.getElementById('chat-container') as HTMLDivElement;
+    this.#textField = document.querySelector('.green-dev-floaty-dialog-text-field') as HTMLInputElement;
+    this.#playButton = document.querySelector('.green-dev-floaty-dialog-play-button') as HTMLButtonElement;
+
+    this.#playButton.addEventListener('click', () => {
+      if (this.#node) {
+        void this.runConversation();
+      }
+    });
+
+    if (this.#highlightNodeOnWindowFocus) {
+      window.addEventListener('focus', () => {
+        if (this.#node) {
+          this.#node.highlight();
+        }
+      });
+    } else {
+      console.error('Node highlighting on focus disabled');
+    }
+
+    const nodeDescriptionElement =
+        document.querySelector('.green-dev-floaty-dialog-node-description') as HTMLDivElement;
+    nodeDescriptionElement.addEventListener('mousemove', () => {
+      if (this.#node) {
+        this.#node.highlight();
+      }
+    });
+    nodeDescriptionElement.addEventListener('mouseleave', () => {
+      if (this.#node && this.#backendNodeId) {
+        // Refresh the anchor by re-sending the show command.
+        const msg = JSON.stringify({
+          id: 9999,
+          method: 'Overlay.setShowInspectedElementAnchor',
+          params: {inspectedElementAnchorConfig: {backendNodeId: this.#backendNodeId}}
+        });
+        Host.InspectorFrontendHost.InspectorFrontendHostInstance.sendMessageToBackend(msg);
+      }
+    });
+
+    this.#textField.addEventListener('keydown', event => {
+      if (event.key === 'Enter' && this.#node) {
+        void this.runConversation();
+      }
+    });
+
+    this.#textField.focus();
+  }
+
+  static instance(opts: {
+    forceNew: boolean|null,
+    document: Document,
+  } = {forceNew: null, document}): GreenDevFloaty {
+    const {forceNew, document} = opts;
+    if (!greenDevFloatyInstance || forceNew) {
+      greenDevFloatyInstance = new GreenDevFloaty(document);
+    }
+
+    return greenDevFloatyInstance;
+  }
+
+  setNode(node: SDK.DOMModel.DOMNode): void {
+    if (this.#node === node) {
+      return;
+    }
+    this.#node = node;
+    this.#backendNodeId = node.backendNodeId();
+
+    // Highlight the node on the page.
+    void node.domModel().overlayModel().clearHighlight();
+    if (this.#highlightNodeOnWindowFocus) {
+      node.highlight();
+    }
+
+    this.#textField.focus();
+
+    // Reset conversation for a new node
+    this.#agent = undefined;
+    this.#nodeContext = undefined;
+
+    const nodeDescriptionElement = document.querySelector('.green-dev-floaty-dialog-node-description');
+    if (nodeDescriptionElement) {
+      const id = node.getAttribute('id');
+      if (id) {
+        nodeDescriptionElement.textContent = `#${id}`;
+      } else {
+        const classes = node.classNames().join('.');
+        nodeDescriptionElement.textContent = node.nodeName().toLowerCase() + (classes ? `.${classes}` : '');
+      }
+    }
+  }
+
+  #addMessage(text: string, isUser: boolean): {content: HTMLDivElement, details?: HTMLDivElement} {
+    const messageElement = document.createElement('div');
+    messageElement.className = `message ${isUser ? 'user-message' : 'ai-message'}`;
+
+    const content = document.createElement('div');
+    content.className = 'message-content';
+    content.textContent = text;
+    messageElement.appendChild(content);
+
+    let details: HTMLDivElement|undefined;
+    if (!isUser) {
+      details = document.createElement('div');
+      details.className = 'message-details';
+      details.style.display = 'none';
+      messageElement.appendChild(details);
+
+      const toggle = document.createElement('div');
+      toggle.className = 'message-details-toggle';
+      toggle.textContent = 'Show details';
+      toggle.onclick = () => {
+        if (details) {
+          const isHidden = details.style.display === 'none';
+          details.style.display = isHidden ? 'block' : 'none';
+          toggle.textContent = isHidden ? 'Hide details' : 'Show details';
+        }
+      };
+      messageElement.appendChild(toggle);
+    }
+
+    this.#chatContainer.appendChild(messageElement);
+    this.#chatContainer.scrollTop = this.#chatContainer.scrollHeight;
+    return {content, details};
+  }
+
+  async runConversation(): Promise<void> {
+    const query = this.#textField.value || this.#textField.placeholder;
+    this.#textField.value = '';
+
+    if (!this.#node) {
+      return;
+    }
+
+    if (!this.#agent) {
+      const aidaClient = new AidaClient();
+      this.#agent = new StylingAgent({aidaClient});
+      this.#nodeContext = new NodeContext(this.#node);
+    }
+
+    this.#addMessage(query, true);
+    const {content: aiContent, details: aiDetails} = this.#addMessage('Thinking...', false);
+
+    try {
+      if (!this.#nodeContext) {
+        throw new Error('Node context is not set.');
+      }
+      for await (const result of this.#agent.run(query, {selected: this.#nodeContext})) {
+        switch (result.type) {
+          case ResponseType.ANSWER:
+            aiContent.textContent = result.text;
+            break;
+          case ResponseType.ERROR:
+            aiContent.textContent = `Error: ${result.error}`;
+            break;
+          case ResponseType.THOUGHT:
+            if (aiDetails) {
+              const thought = document.createElement('div');
+              thought.className = 'thought';
+              thought.textContent = `Thought: ${result.thought}`;
+              aiDetails.appendChild(thought);
+            }
+            break;
+          case ResponseType.ACTION:
+            if (aiDetails) {
+              const action = document.createElement('div');
+              action.className = 'action';
+              action.textContent = `Action: ${result.code}\nOutput: ${result.output}`;
+              aiDetails.appendChild(action);
+            }
+            break;
+          case ResponseType.SIDE_EFFECT:
+            if (aiDetails) {
+              const se = document.createElement('div');
+              se.className = 'side-effect';
+              se.textContent = 'Side effect detected, auto-approving for Floaty...';
+              aiDetails.appendChild(se);
+            }
+            // For Floaty, we might want to auto-approve or show a button.
+            // Let's try auto-approving for now to see if it unblocks.
+            result.confirm(true);
+            break;
+          default:
+            console.error('Unhandled response type:', result.type, result);
+            break;
+        }
+        this.#chatContainer.scrollTop = this.#chatContainer.scrollHeight;
+      }
+    } catch (e) {
+      console.error('Caught exception in runConversation:', e);
+      aiContent.textContent = `Exception: ${e instanceof Error ? e.message : String(e)}`;
+    }
+  }
+}
+
+let greenDevFloatyInstance: GreenDevFloaty;
+
+async function init(): Promise<void> {
+  try {
+    Root.Runtime.Runtime.setPlatform(Host.Platform.platform());
+    const [config, prefs] = await Promise.all([
+      new Promise<Root.Runtime.HostConfig>(resolve => {
+        Host.InspectorFrontendHost.InspectorFrontendHostInstance.getHostConfig(resolve);
+      }),
+      new Promise<Record<string, string>>(
+          resolve => Host.InspectorFrontendHost.InspectorFrontendHostInstance.getPreferences(resolve)),
+    ]);
+
+    Object.assign(Root.Runtime.hostConfig, config);
+
+    // Register necessary experiments to avoid "Unknown experiment" errors.
+    Root.Runtime.experiments.register(
+        Root.ExperimentNames.ExperimentName.CAPTURE_NODE_CREATION_STACKS, 'Capture node creation stacks');
+    Root.Runtime.experiments.register(
+        Root.ExperimentNames.ExperimentName.INSTRUMENTATION_BREAKPOINTS, 'Enable instrumentation breakpoints');
+    Root.Runtime.experiments.register(
+        Root.ExperimentNames.ExperimentName.USE_SOURCE_MAP_SCOPES, 'Use scope information from source maps');
+    Root.Runtime.experiments.register(Root.ExperimentNames.ExperimentName.LIVE_HEAP_PROFILE, 'Live heap profile');
+    Root.Runtime.experiments.register(Root.ExperimentNames.ExperimentName.PROTOCOL_MONITOR, 'Protocol Monitor');
+    Root.Runtime.experiments.register(
+        Root.ExperimentNames.ExperimentName.SAMPLING_HEAP_PROFILER_TIMELINE, 'Sampling heap profiler timeline');
+    Root.Runtime.experiments.register(Root.ExperimentNames.ExperimentName.APCA, 'APCA');
+
+    const WINDOW_LOCAL_STORAGE: Common.Settings.SettingsBackingStore = {
+      register(_setting: string): void{},
+      async get(setting: string): Promise<string> {
+        return window.localStorage.getItem(setting) as unknown as string;
+      },
+      set(setting: string, value: string): void {
+        window.localStorage.setItem(setting, value);
+      },
+      remove(setting: string): void {
+        window.localStorage.removeItem(setting);
+      },
+      clear: () => window.localStorage.clear(),
+    };
+
+    const hostUnsyncedStorage: Common.Settings.SettingsBackingStore = {
+      register: (name: string) =>
+          Host.InspectorFrontendHost.InspectorFrontendHostInstance.registerPreference(name, {synced: false}),
+      set: Host.InspectorFrontendHost.InspectorFrontendHostInstance.setPreference,
+      get: (name: string) => {
+        return new Promise(resolve => {
+          Host.InspectorFrontendHost.InspectorFrontendHostInstance.getPreference(name, resolve);
+        });
+      },
+      remove: Host.InspectorFrontendHost.InspectorFrontendHostInstance.removePreference,
+      clear: Host.InspectorFrontendHost.InspectorFrontendHostInstance.clearPreferences,
+    };
+    const hostSyncedStorage: Common.Settings.SettingsBackingStore = {
+      ...hostUnsyncedStorage,
+      register: (name: string) =>
+          Host.InspectorFrontendHost.InspectorFrontendHostInstance.registerPreference(name, {synced: true}),
+    };
+
+    const syncedStorage = new Common.Settings.SettingsStorage(prefs, hostSyncedStorage, '');
+    const globalStorage = new Common.Settings.SettingsStorage(prefs, hostUnsyncedStorage, '');
+    const localStorage = new Common.Settings.SettingsStorage(window.localStorage, WINDOW_LOCAL_STORAGE, '');
+
+    Common.Settings.Settings.instance({
+      forceNew: true,
+      syncedStorage,
+      globalStorage,
+      localStorage,
+      settingRegistrations: Common.SettingRegistration.getRegisteredSettings(),
+    });
+
+    const settingLanguage = Common.Settings.Settings.instance().moduleSetting<string>('language').get();
+    i18n.DevToolsLocale.DevToolsLocale.instance({
+      create: true,
+      data: {
+        navigatorLanguage: navigator.language,
+        settingLanguage,
+        lookupClosestDevToolsLocale: i18n.i18n.lookupClosestSupportedDevToolsLocale,
+      },
+    });
+
+    const universe = new Foundation.Universe.Universe({
+      settingsCreationOptions: {
+        syncedStorage,
+        globalStorage,
+        localStorage,
+        settingRegistrations: Common.SettingRegistration.getRegisteredSettings(),
+      }
+    });
+    Root.DevToolsContext.setGlobalInstance(universe.context);
+
+    // Register a revealer that brings the floaty to the front.
+    Common.Revealer.registerRevealer({
+      contextTypes() {
+        return [SDK.DOMModel.DeferredDOMNode, SDK.DOMModel.DOMNode];
+      },
+      async loadRevealer() {
+        return {
+          async reveal() {
+            Host.InspectorFrontendHost.InspectorFrontendHostInstance.bringToFront();
+          },
+        };
+      },
+    });
+
+    await i18n.i18n.fetchAndRegisterLocaleData('en-US');
+
+    Host.InspectorFrontendHost.InspectorFrontendHostInstance.connectionReady();
+
+    const hash = window.location.hash.substring(1);
+    const params = new URLSearchParams(hash);
+    const x = parseInt(params.get('x') || '0', 10);
+    const y = parseInt(params.get('y') || '0', 10);
+    const backendNodeId = parseInt(params.get('backendNodeId') || '0', 10);
+
+    const floaty = GreenDevFloaty.instance({forceNew: null, document});
+
+    await SDK.Connections.initMainConnection(
+        async () => {
+          const targetManager = SDK.TargetManager.TargetManager.instance();
+
+          targetManager.createTarget('main', 'Main', SDK.Target.Type.FRAME, null);
+
+          // Wait for the target to be attached and initialized.
+          const mainTarget = await new Promise<SDK.Target.Target|null>((resolve, reject) => {
+            const target = targetManager.primaryPageTarget();
+            if (target) {
+              resolve(target);
+              return;
+            }
+            const observer = {
+              targetAdded: (target: SDK.Target.Target) => {
+                if (target === targetManager.primaryPageTarget()) {
+                  targetManager.unobserveTargets(observer);
+                  resolve(target);
+                }
+              },
+              targetRemoved: () => {},
+            };
+            targetManager.observeTargets(observer);
+            setTimeout(() => reject(new Error('Timeout waiting for primary page target')), 10000);
+          });
+
+          if (!mainTarget) {
+            console.error('Failed to obtain mainTarget');
+            return;
+          }
+
+          const domModel = mainTarget.model(SDK.DOMModel.DOMModel);
+          if (!domModel) {
+            console.error('DOMModel not found on mainTarget');
+            return;
+          }
+
+          let node: SDK.DOMModel.DOMNode|null = null;
+          if (backendNodeId) {
+            const nodesMap =
+                await domModel.pushNodesByBackendIdsToFrontend(new Set([backendNodeId as Protocol.DOM.BackendNodeId]));
+            node = nodesMap?.get(backendNodeId as Protocol.DOM.BackendNodeId) || null;
+          } else {
+            node = await domModel.nodeForLocation(x, y, true);
+          }
+
+          if (node) {
+            floaty.setNode(node);
+          } else {
+            console.error('No node found');
+          }
+
+          // Trigger overlay.
+          const showAnchor = (): void => {
+            if (backendNodeId) {
+              const msg = JSON.stringify({
+                id: 9999,
+                method: 'Overlay.setShowInspectedElementAnchor',
+                params: {inspectedElementAnchorConfig: {backendNodeId}}
+              });
+              Host.InspectorFrontendHost.InspectorFrontendHostInstance.sendMessageToBackend(msg);
+            }
+          };
+          showAnchor();
+        },
+        () => {
+          console.error('Connection lost');
+        });
+  } catch (err) {
+    console.error('Error during init():', err);
+  }
+}
+
+void init();

package/front_end/entrypoints/inspector_main/InspectorMain.ts

@@ -9,7 +9,6 @@ import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as MobileThrottling from '../../panels/mobile_throttling/mobile_throttling.js';
-import * as Security from '../../panels/security/security.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
@@ -110,43 +109,6 @@ export class InspectorMainImpl implements Common.Runnable.Runnable {
         Host.InspectorFrontendHostAPI.Events.ReloadInspectedPage, ({data: hard}) => {
           SDK.ResourceTreeModel.ResourceTreeModel.reloadAllPages(hard);
         });
-
-    // Skip possibly showing the cookie control reload banner if devtools UI is not enabled or if there is an enterprise policy blocking third party cookies
-    if (!Root.Runtime.hostConfig.devToolsPrivacyUI?.enabled ||
-        Root.Runtime.hostConfig.thirdPartyCookieControls?.managedBlockThirdPartyCookies === true) {
-      return;
-    }
-
-    // Third party cookie control settings according to the browser
-    const browserCookieControls = Root.Runtime.hostConfig.thirdPartyCookieControls;
-
-    // Devtools cookie controls settings
-    const cookieControlOverrideSetting =
-        Common.Settings.Settings.instance().createSetting('cookie-control-override-enabled', undefined);
-    const gracePeriodMitigationDisabledSetting =
-        Common.Settings.Settings.instance().createSetting('grace-period-mitigation-disabled', undefined);
-    const heuristicMitigationDisabledSetting =
-        Common.Settings.Settings.instance().createSetting('heuristic-mitigation-disabled', undefined);
-
-    // If there are saved cookie control settings, check to see if they differ from the browser config. If they do, prompt a page reload so the user will see the cookie controls behavior.
-    if (cookieControlOverrideSetting.get() !== undefined) {
-      if (browserCookieControls?.thirdPartyCookieRestrictionEnabled !== cookieControlOverrideSetting.get()) {
-        Security.CookieControlsView.showInfobar();
-        return;
-      }
-
-      // If the devtools third-party cookie control is active, we also need to check if there's a discrepancy in the mitigation behavior.
-      if (cookieControlOverrideSetting.get()) {
-        if (browserCookieControls?.thirdPartyCookieMetadataEnabled === gracePeriodMitigationDisabledSetting.get()) {
-          Security.CookieControlsView.showInfobar();
-          return;
-        }
-        if (browserCookieControls?.thirdPartyCookieHeuristicsEnabled === heuristicMitigationDisabledSetting.get()) {
-          Security.CookieControlsView.showInfobar();
-          return;
-        }
-      }
-    }
   }
 }
 

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