chrome-devtools-frontend 1.0.1579812 → 1.0.1581708

package/front_end/entrypoints/greendev_floaty/FloatyEntrypoint.ts

@@ -0,0 +1,536 @@
+// 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 '../../entrypoints/inspector_main/inspector_main-meta.js';
+import '../../entrypoints/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 type * as Platform from '../../core/platform/platform.js';
+import type * as ExperimentNames from '../../core/root/ExperimentNames.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';
+import type {SyncMessage} from '../../panels/greendev/GreenDevShared.js';
+import * as UI from '../../ui/legacy/legacy.js';
+import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
+
+const {AidaClient} = Host.AidaClient;
+const {ResponseType} = AiAssistance.AiAgent;
+
+let pendingActivationSessionId: number|null = null;
+
+class GreenDevFloaty {
+  #chatContainer!: HTMLDivElement;
+  #textField!: HTMLInputElement;
+  #playButton!: HTMLButtonElement;
+  #node?: SDK.DOMModel.DOMNode;
+  #agent?: AiAssistance.StylingAgent.StylingAgent;
+  #nodeContext?: AiAssistance.StylingAgent.NodeContext;
+  #backendNodeId?: Protocol.DOM.BackendNodeId;
+  #syncChannel: BroadcastChannel;
+  #isFloatyWindow: boolean;
+
+  constructor(document: Document) {
+    const params = new URLSearchParams(window.location.hash.substring(1));
+    this.#backendNodeId = parseInt(params.get('backendNodeId') || '0', 10) as Protocol.DOM.BackendNodeId;
+    this.#isFloatyWindow = !!this.#backendNodeId;
+
+    this.#syncChannel = new BroadcastChannel('green-dev-sync');
+    this.#syncChannel.onmessage = event => {
+      this.#onSyncMessage(event.data);
+    };
+
+    this.#initFloatyMode(document);
+  }
+
+  #initFloatyMode(doc: Document): void {
+    this.#chatContainer = doc.getElementById('chat-container') as HTMLDivElement;
+    this.#textField = doc.querySelector('.green-dev-floaty-dialog-text-field') as HTMLInputElement;
+    this.#playButton = doc.querySelector('.green-dev-floaty-dialog-play-button') as HTMLButtonElement;
+
+    this.#playButton?.addEventListener('click', () => {
+      if (this.#node) {
+        void this.runConversation();
+      }
+    });
+
+    const contextText = doc.querySelector('.green-dev-floaty-dialog-context-text') as HTMLSpanElement;
+    if (contextText) {
+      contextText.style.cursor = 'pointer';
+      contextText.title = 'Click to show in DevTools Panel';
+      contextText.addEventListener('click', () => {
+        this.#broadcastFullState();
+      });
+    }
+
+    const learnMoreLink = doc.querySelector('.learn-more-link');
+    if (learnMoreLink) {
+      learnMoreLink.addEventListener('click', event => {
+        event.preventDefault();
+        Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(
+            'https://developer.chrome.com/docs/devtools/ai-assistance' as Platform.DevToolsPath.UrlString);
+      });
+    }
+
+    const nodeDescriptionElement = doc.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) {
+        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();
+  }
+
+  #broadcastFullState(): void {
+    const state = {
+      type: 'full-state',
+      messages: this.#getMessages(),
+      sessionId: this.#backendNodeId,
+      nodeDescription: document.querySelector('.green-dev-floaty-dialog-node-description')?.textContent
+    };
+    this.#syncChannel.postMessage(state);
+  }
+
+  #onSyncMessage(data: SyncMessage): void {
+    if (data.type === 'main-window-alive') {
+      if (pendingActivationSessionId) {
+        const syncChannel = new BroadcastChannel('green-dev-sync');
+        syncChannel.postMessage({type: 'activate-panel', sessionId: pendingActivationSessionId});
+        syncChannel.close();
+      }
+    } else if (data.type === 'request-session-state') {
+      this.#broadcastFullState();
+
+      if (pendingActivationSessionId) {
+        this.#syncChannel.postMessage({type: 'select-tab', sessionId: pendingActivationSessionId});
+        pendingActivationSessionId = null;
+      }
+    } else if (data.type === 'user-input' && data.sessionId === this.#backendNodeId) {
+      if (this.#textField) {
+        this.#textField.value = data.text ?? '';
+        void this.runConversation();
+      }
+    } else if (data.type === 'restore-floaty' && data.sessionId === this.#backendNodeId) {
+      // The main DevTools window will bring the floaty to the front,
+      // so the floaty window itself doesn't need to do it.
+      Host.InspectorFrontendHost.InspectorFrontendHostInstance.bringToFront();
+    }
+  }
+
+  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;
+  }
+
+  handlePanelRequest = (event: Common.EventTarget.EventTargetEvent<number>): void => {
+    pendingActivationSessionId = event.data;
+    this.#sendActivatePanelMessage(pendingActivationSessionId, 0);
+    Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(
+        'magic:open-devtools' as Platform.DevToolsPath.UrlString);
+  };
+
+  readonly #maxActivationRetries = 10;
+  readonly #activationRetryDelayMs = 200;
+
+  #sendActivatePanelMessage(sessionId: number, retryCount: number): void {
+    if (retryCount >= this.#maxActivationRetries) {
+      return;
+    }
+
+    const syncChannel = new BroadcastChannel('green-dev-sync');
+    syncChannel.postMessage({type: 'activate-panel', sessionId});
+    syncChannel.close();
+
+    // To ensure the activate-panel is always received, let's add a small delay and retry.
+    // This is a pragmatic fix for the prototype given the existing async message flow.
+    setTimeout(() => {
+      // Check if pendingActivationSessionId is still set. If it is, it means
+      // the panel hasn't been activated yet (or the confirmation message
+      // hasn't arrived), so we retry.
+      if (pendingActivationSessionId === sessionId) {
+        this.#sendActivatePanelMessage(sessionId, retryCount + 1);
+      }
+    }, this.#activationRetryDelayMs);
+  }
+
+  handleRestoreEvent(event: Common.EventTarget.EventTargetEvent<number>): void {
+    const sessionId = event.data;
+    // Only the main DevTools window (which is NOT a floaty window) should broadcast the restore request.
+    if (!this.#isFloatyWindow) {
+      this.#syncChannel.postMessage({type: 'restore-floaty', sessionId});
+    } else if (this.#backendNodeId === sessionId) {
+      // If a floaty window receives a restore request for its own session,
+      // it should bring itself to the front.
+      console.error('[GreenDev] Calling bringToFront for session ' + sessionId);
+      Host.InspectorFrontendHost.InspectorFrontendHostInstance.bringToFront();
+    }
+  }
+
+  setNode(node: SDK.DOMModel.DOMNode): void {
+    if (this.#node) {
+      this.#node.domModel().overlayModel().removeEventListener(
+          SDK.OverlayModel.Events.INSPECT_PANEL_SHOW_REQUESTED, this.handlePanelRequest);
+    }
+    if (this.#node === node) {
+      return;
+    }
+    this.#node = node;
+    this.#node.domModel().overlayModel().addEventListener(
+        SDK.OverlayModel.Events.INSPECT_PANEL_SHOW_REQUESTED, this.handlePanelRequest);
+    this.#backendNodeId = node.backendNodeId();
+
+    void node.domModel().overlayModel().clearHighlight();
+    this.#textField?.focus();
+    this.#agent = undefined;
+    this.#nodeContext = undefined;
+
+    const nodeDescriptionElement = document.querySelector('.green-dev-floaty-dialog-node-description');
+    let description = '';
+    if (nodeDescriptionElement) {
+      const id = node.getAttribute('id');
+      if (id) {
+        description = `#${id}`;
+      } else {
+        const classes = node.classNames().join('.');
+        description = node.nodeName().toLowerCase() + (classes ? `.${classes}` : '');
+      }
+      nodeDescriptionElement.textContent = description;
+    }
+
+    this.#syncChannel.postMessage({type: 'node-changed', sessionId: this.#backendNodeId, nodeDescription: description});
+
+    if (this.#backendNodeId) {
+      const msg = JSON.stringify({
+        id: 9999,
+        method: 'Overlay.setShowInspectedElementAnchor',
+        params: {inspectedElementAnchorConfig: {backendNodeId: this.#backendNodeId}}
+      });
+      Host.InspectorFrontendHost.InspectorFrontendHostInstance.sendMessageToBackend(msg);
+    }
+  }
+
+  #getMessages(): Array<{text: string, isUser: boolean}> {
+    const messages = [];
+    if (this.#chatContainer) {
+      const messageElements = this.#chatContainer.querySelectorAll('.message');
+      for (const el of messageElements) {
+        const isUser = el.classList.contains('user-message');
+        const content = el.querySelector('.message-content')?.textContent || '';
+        messages.push({text: content, isUser});
+      }
+    }
+    return messages;
+  }
+
+  runConversation = async(): Promise<void> => {
+    if (!this.#textField || !this.#node) {
+      return;
+    }
+    const query = this.#textField.value || this.#textField.placeholder;
+    this.#textField.value = '';
+
+    if (!this.#agent) {
+      const aidaClient = new AidaClient();
+      this.#agent = new AiAssistance.StylingAgent.StylingAgent({aidaClient});
+      this.#nodeContext = new AiAssistance.StylingAgent.NodeContext(this.#node);
+    }
+
+    this.#addMessageInternal(query, true);
+    this.#syncChannel.postMessage({
+      type: 'new-message',
+      text: query,
+      isUser: true,
+      sessionId: this.#backendNodeId,
+      nodeDescription: document.querySelector('.green-dev-floaty-dialog-node-description')?.textContent,
+    });
+
+    const {content: aiContent} = this.#addMessageInternal('Thinking...', false);
+    this.#syncChannel.postMessage({
+      type: 'new-message',
+      text: 'Thinking...',
+      isUser: false,
+      sessionId: this.#backendNodeId,
+      nodeDescription: document.querySelector('.green-dev-floaty-dialog-node-description')?.textContent,
+    });
+
+    try {
+      if (!this.#nodeContext) {
+        throw new Error('Node context not found.');
+      }
+      for await (const result of this.#agent.run(query, {selected: this.#nodeContext})) {
+        switch (result.type) {
+          case ResponseType.ANSWER:
+            aiContent.textContent = result.text;
+            this.#syncChannel.postMessage(
+                {type: 'update-last-message', text: result.text, sessionId: this.#backendNodeId});
+            break;
+          case ResponseType.ERROR:
+            aiContent.textContent = `Error: ${result.error}`;
+            this.#syncChannel.postMessage(
+                {type: 'update-last-message', text: `Error: ${result.error}`, sessionId: this.#backendNodeId});
+            break;
+          case ResponseType.SIDE_EFFECT:
+            result.confirm(true);
+            break;
+          default:
+            break;
+        }
+        if (this.#chatContainer) {
+          this.#chatContainer.scrollTop = this.#chatContainer.scrollHeight;
+        }
+      }
+    } catch (e) {
+      aiContent.textContent = `Exception: ${e instanceof Error ? e.message : String(e)}`;
+    }
+  };
+
+  #addMessageInternal(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);
+    }
+    if (this.#chatContainer) {
+      this.#chatContainer.appendChild(messageElement);
+      this.#chatContainer.scrollTop = this.#chatContainer.scrollHeight;
+    }
+    return {content, details};
+  }
+}
+
+let greenDevFloatyInstance: GreenDevFloaty;
+
+function safeRegisterExperiment(name: string, title: string): void {
+  try {
+    Root.Runtime.experiments.register(name as ExperimentNames.ExperimentName, title);
+  } catch (e) {
+    console.error('Unable to register experiment ', name, title, e);
+  }
+}
+
+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);
+
+    safeRegisterExperiment(
+        Root.ExperimentNames.ExperimentName.CAPTURE_NODE_CREATION_STACKS, 'Capture node creation stacks');
+    safeRegisterExperiment(
+        Root.ExperimentNames.ExperimentName.INSTRUMENTATION_BREAKPOINTS, 'Enable instrumentation breakpoints');
+    safeRegisterExperiment(
+        Root.ExperimentNames.ExperimentName.USE_SOURCE_MAP_SCOPES, 'Use scope information from source maps');
+    safeRegisterExperiment(Root.ExperimentNames.ExperimentName.LIVE_HEAP_PROFILE, 'Live heap profile');
+    safeRegisterExperiment(Root.ExperimentNames.ExperimentName.PROTOCOL_MONITOR, 'Protocol Monitor');
+    safeRegisterExperiment(
+        Root.ExperimentNames.ExperimentName.SAMPLING_HEAP_PROFILER_TIMELINE, 'Sampling heap profiler timeline');
+    safeRegisterExperiment(Root.ExperimentNames.ExperimentName.APCA, 'APCA');
+
+    const hostUnsyncedStorage: Common.Settings.SettingsBackingStore = {
+      register: (name: string) =>
+          Host.InspectorFrontendHost.InspectorFrontendHostInstance.registerPreference(name, {synced: false}),
+      set: Host.InspectorFrontendHost.InspectorFrontendHostInstance.setPreference,
+      get: (name: string) =>
+          new Promise(resolve => Host.InspectorFrontendHost.InspectorFrontendHostInstance.getPreference(name, resolve)),
+      remove: Host.InspectorFrontendHost.InspectorFrontendHostInstance.removePreference,
+      clear: Host.InspectorFrontendHost.InspectorFrontendHostInstance.clearPreferences,
+    };
+    const syncedStorage = new Common.Settings.SettingsStorage(prefs, hostUnsyncedStorage, '');
+    const globalStorage = new Common.Settings.SettingsStorage(prefs, hostUnsyncedStorage, '');
+    const localStorage = new Common.Settings.SettingsStorage(
+        window.localStorage, {
+          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(),
+        },
+        '');
+
+    Common.Settings.Settings.instance({
+      forceNew: true,
+      syncedStorage,
+      globalStorage,
+      localStorage,
+      settingRegistrations: Common.SettingRegistration.getRegisteredSettings(),
+    });
+
+    UI.UIUtils.initializeUIUtils(document);
+    ThemeSupport.ThemeSupport.instance({
+      forceNew: true,
+      setting: Common.Settings.Settings.instance().moduleSetting('ui-theme'),
+    });
+    UI.ZoomManager.ZoomManager.instance(
+        {forceNew: true, win: window, frontendHost: Host.InspectorFrontendHost.InspectorFrontendHostInstance});
+
+    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);
+
+    await i18n.i18n.fetchAndRegisterLocaleData('en-US');
+    Host.InspectorFrontendHost.InspectorFrontendHostInstance.connectionReady();
+
+    const hash = window.location.hash.substring(1);
+    const params = new URLSearchParams(hash);
+    const backendNodeId = parseInt(params.get('backendNodeId') || '0', 10);
+
+    const floaty = GreenDevFloaty.instance({forceNew: null, document});
+
+    if (backendNodeId) {
+      await SDK.Connections.initMainConnection(async () => {
+        const targetManager = SDK.TargetManager.TargetManager.instance();
+        targetManager.createTarget('main', 'Main', SDK.Target.Type.FRAME, null);
+        const mainTarget = await new Promise<SDK.Target.Target|null>(resolve => {
+          const t = targetManager.primaryPageTarget();
+          if (t) {
+            resolve(t);
+            return;
+          }
+          const observer = {
+            targetAdded: (target: SDK.Target.Target) => {
+              if (target === targetManager.primaryPageTarget()) {
+                targetManager.unobserveTargets(observer);
+                resolve(target);
+              }
+            },
+            targetRemoved: () => {},
+          };
+          targetManager.observeTargets(observer);
+        });
+        if (!mainTarget) {
+          return;
+        }
+        const domModel = mainTarget.model(SDK.DOMModel.DOMModel);
+        if (!domModel) {
+          return;
+        }
+
+        // Add listener for floaty restore events
+        const overlayModel = mainTarget.model(SDK.OverlayModel.OverlayModel);
+        if (overlayModel) {
+          overlayModel.addEventListener(
+              SDK.OverlayModel.Events.INSPECTED_ELEMENT_WINDOW_RESTORED, floaty.handleRestoreEvent, floaty);
+        }
+
+        const nodesMap =
+            await domModel.pushNodesByBackendIdsToFrontend(new Set([backendNodeId as Protocol.DOM.BackendNodeId]));
+        const node = nodesMap?.get(backendNodeId as Protocol.DOM.BackendNodeId) || null;
+        if (node) {
+          floaty.setNode(node);
+        }
+      }, () => {});
+    } else {
+      const targetManager = SDK.TargetManager.TargetManager.instance();
+      const observer = {
+        targetAdded: (target: SDK.Target.Target) => {
+          if (target.type() === SDK.Target.Type.FRAME) {
+            const overlayModel = target.model(SDK.OverlayModel.OverlayModel);
+            if (overlayModel) {
+              overlayModel.addEventListener(
+                  SDK.OverlayModel.Events.INSPECTED_ELEMENT_WINDOW_RESTORED, floaty.handleRestoreEvent, floaty);
+              overlayModel.addEventListener(
+                  SDK.OverlayModel.Events.INSPECT_PANEL_SHOW_REQUESTED, floaty.handlePanelRequest);
+            }
+          }
+        },
+        targetRemoved: (target: SDK.Target.Target) => {
+          if (target.type() === SDK.Target.Type.FRAME) {
+            const overlayModel = target.model(SDK.OverlayModel.OverlayModel);
+            if (overlayModel) {
+              overlayModel.removeEventListener(
+                  SDK.OverlayModel.Events.INSPECTED_ELEMENT_WINDOW_RESTORED, floaty.handleRestoreEvent, floaty);
+              overlayModel.removeEventListener(
+                  SDK.OverlayModel.Events.INSPECT_PANEL_SHOW_REQUESTED, floaty.handlePanelRequest);
+            }
+          }
+        },
+      };
+      targetManager.observeTargets(observer);
+    }
+  } catch (err) {
+    console.error('[GreenDev] FATAL ERROR during init():', err);
+  }
+}
+
+void init();