chrome-devtools-frontend 1.0.1652307 → 1.0.1656291

package/front_end/panels/greendev/GreenDevPanel.css

@@ -1,282 +0,0 @@
-/* eslint-disable color-named, no-duplicate-selectors */
-/* stylelint-disable plugin/use_theme_colors */
-/*
- * 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.
- */
-
-:root {
-  --gemini-logo: url("data:image/svg+xml,%0A%3Csvg%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2065%2065%22%3E%3Cmask%20id%3D%22maskme%22%20style%3D%22mask-type%3Aalpha%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2265%22%20height%3D%2265%22%3E%3Cpath%20d%3D%22M32.447%200c.68%200%201.273.465%201.439%201.125a38.904%2038.904%200%20001.999%205.905c2.152%205%205.105%209.376%208.854%2013.125%203.751%203.75%208.126%206.703%2013.125%208.855a38.98%2038.98%200%20005.906%201.999c.66.166%201.124.758%201.124%201.438%200%20.68-.464%201.273-1.125%201.439a38.902%2038.902%200%2000-5.905%201.999c-5%202.152-9.375%205.105-13.125%208.854-3.749%203.751-6.702%208.126-8.854%2013.125a38.973%2038.973%200%2000-2%205.906%201.485%201.485%200%2001-1.438%201.124c-.68%200-1.272-.464-1.438-1.125a38.913%2038.913%200%2000-2-5.905c-2.151-5-5.103-9.375-8.854-13.125-3.75-3.749-8.125-6.702-13.125-8.854a38.973%2038.973%200%2000-5.905-2A1.485%201.485%200%20010%2032.448c0-.68.465-1.272%201.125-1.438a38.903%2038.903%200%20005.905-2c5-2.151%209.376-5.104%2013.125-8.854%203.75-3.749%206.703-8.125%208.855-13.125a38.972%2038.972%200%20001.999-5.905A1.485%201.485%200%200132.447%200z%22%20fill%3D%22%23000%22/%3E%3Cpath%20d%3D%22M32.447%200c.68%200%201.273.465%201.439%201.125a38.904%2038.904%200%20001.999%205.905c2.152%205%205.105%209.376%208.854%2013.125%203.751%203.75%208.126%206.703%2013.125%208.855a38.98%2038.98%200%20005.906%201.999c.66.166%201.124.758%201.124%201.438%200%20.68-.464%201.273-1.125%201.439a38.902%2038.902%200%2000-5.905%201.999c-5%202.152-9.375%205.105-13.125%208.854-3.749%203.751-6.702%208.126-8.854%2013.125a38.973%2038.973%200%2000-2%205.906%201.485%201.485%200%2001-1.438%201.124c-.68%200-1.272-.464-1.438-1.125a38.913%2038.913%200%2000-2-5.905c-2.151-5-5.103-9.375-8.854-13.125-3.75-3.749-8.125-6.702-13.125-8.854a38.973%2038.973%200%2000-5.905-2A1.485%201.485%200%20010%2032.448c0-.68.465-1.272%201.125-1.438a38.903%2038.903%200%20005.905-2c5-2.151%209.376-5.104%2013.125-8.854%203.75-3.749%206.703-8.125%208.855-13.125a38.972%2038.972%200%20001.999-5.905A1.485%201.485%200%200132.447%200z%22%20fill%3D%22%23000%22/%3E%3Cpath%20d%3D%22M32.447%200c.68%200%201.273.465%201.439%201.125a38.904%2038.904%200%20001.999%205.905c2.152%205%205.105%209.376%208.854%2013.125%203.751%203.75%208.126%206.703%2013.125%208.855a38.98%2038.98%200%20005.906%201.999c.66.166%201.124.758%201.124%201.438%200%20.68-.464%201.273-1.125%201.439a38.902%2038.902%200%2000-5.905%201.999c-5%202.152-9.375%205.105-13.125%208.854-3.749%203.751-6.702%208.126-8.854%2013.125a38.973%2038.973%200%2000-2%205.906%201.485%201.485%200%2001-1.438%201.124c-.68%200-1.272-.464-1.438-1.125a38.913%2038.913%200%2000-2-5.905c-2.151-5-5.103-9.375-8.854-13.125-3.75-3.749-8.125-6.702-13.125-8.854a38.973%2038.973%200%2000-5.905-2A1.485%201.485%200%20010%2032.448c0-.68.465-1.272%201.125-1.438a38.903%2038.903%200%20005.905-2c5-2.151%209.376-5.104%2013.125-8.854%203.75-3.749%206.703-8.125%208.855-13.125a38.972%2038.972%200%20001.999-5.905A1.485%201.485%200%200132.447%200z%22%20fill%3D%22%23000%22/%3E%3Cpath%20d%3D%22M32.447%200c.68%200%201.273.465%201.439%201.125a38.904%2038.904%200%20001.999%205.905c2.152%205%205.105%209.376%208.854%2013.125%203.751%203.75%208.126%206.703%2013.125%208.855a38.98%2038.98%200%20005.906%201.999c.66.166%201.124.758%201.124%201.438%200%20.68-.464%201.273-1.125%201.439a38.902%2038.902%200%2000-5.905%201.999c-5%202.152-9.375%205.105-13.125%208.854-3.749%203.751-6.702%208.126-8.854%2013.125a38.973%2038.973%200%2000-2%205.906%201.485%201.485%200%2001-1.438%201.124c-.68%200-1.272-.464-1.438-1.125a38.913%2038.913%200%2000-2-5.905c-2.151-5-5.103-9.375-8.854-13.125-3.75-3.749-8.125-6.702-13.125-8.854a38.973%2038.973%200%2000-5.905-2A1.485%201.485%200%20010%2032.448c0-.68.465-1.272%201.125-1.438a38.903%2038.903%200%20005.905-2c5-2.151%209.376-5.104%2013.125-8.854%203.75-3.749%206.703-8.125%208.855-13.125a38.972%2038.972%200%20001.999-5.905A1.485%201.485%200%200132.447%200z%22%20fill%3D%22%23000%22/%3E%3C/mask%3E%3Cg%20mask%3D%22url%28%23maskme%29%22%3E%3Cpath%20d%3D%22M32.447%200c25.437%200%2046.062%2020.625%2046.062%2046.062%200%2025.438-20.625%2046.063-46.062%2046.063-25.438%200-46.062-20.625-46.062-46.063C-13.615%2020.625%207.01%200%2032.447%200z%22%20fill%3D%22%231967D2%22/%3E%3Cpath%20d%3D%22M65%200v65H0V0h65z%22%20fill%3D%22%231967D2%22/%3E%3Cpath%20d%3D%22M63.79%2033.567L33.567%2063.79%201.21%2031.433%2031.433%201.21%2063.79%2033.567z%22%20fill%3D%22%23fff%22%20style%3D%22mix-blend-mode%3Asoft-light%22/%3E%3C/g%3E%3C/svg%3E");
-}
-
-.green-dev-floaty-dialog {
-  width: 100%;
-  height: 100%;
-  background-color: #fff;
-  display: flex;
-  flex-direction: column;
-  font-family: sans-serif;
-  color: #333;
-  font-size: 16px;
-  box-sizing: border-box;
-}
-
-/* Header extending upwards */
-.green-dev-floaty-dialog-header {
-  position: relative;
-  height: 70px;
-  margin-top: -20px;
-  background-color: #d3e3fd;
-  border-top-left-radius: 12px;
-  border-top-right-radius: 12px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 34px 10px 11px;
-  box-sizing: border-box;
-}
-
-.green-dev-floaty-dialog-header-text {
-  font-weight: bold;
-  font-size: 18px;
-}
-
-.green-dev-floaty-dialog-close-button {
-  width: 20px;
-  height: 20px;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23333' d='M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z'/%3E%3C/svg%3E");
-  background-size: cover;
-  cursor: pointer;
-  border: none;
-  background-color: transparent;
-  padding: 0;
-}
-
-/* Main content area of the white card */
-.green-dev-floaty-dialog-content {
-  flex-grow: 1;
-  padding: 20px;
-  display: flex;
-  flex-direction: column;
-  min-height: 0; /* Important for flex-grow with overflow */
-}
-
-.green-dev-floaty-dialog-chat-container {
-  flex-grow: 1;
-  margin-bottom: 10px;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  padding: 10px;
-  border: 1px solid #e0e0e0;
-  border-radius: 8px;
-  background-color: #f9f9f9;
-}
-
-.message {
-  padding: 8px 12px;
-  border-radius: 12px;
-  max-width: 85%;
-  overflow-wrap: break-word;
-  line-height: 1.4;
-  white-space: pre-wrap; /* Preserve newlines */
-}
-
-.user-message {
-  align-self: flex-end;
-  background-color: #d3e3fd;
-  color: #0b57d0;
-  border-bottom-right-radius: 2px;
-}
-
-.ai-message {
-  align-self: flex-start;
-  background-color: #fff;
-  color: #333;
-  border: 1px solid #e0e0e0;
-  border-bottom-left-radius: 2px;
-}
-
-.message-details-toggle {
-  font-size: 11px;
-  color: #0b57d0;
-  cursor: pointer;
-  margin-top: 4px;
-  text-decoration: underline;
-}
-
-.message-details-toggle:hover {
-  color: #0842a0;
-}
-
-.message-details {
-  font-size: 11px;
-  color: #666;
-  margin-top: 8px;
-  padding-top: 8px;
-  border-top: 1px solid #eee;
-  font-family: var(--monospace-font-family);
-}
-
-.thought, .action {
-  margin-bottom: 6px;
-  white-space: pre-wrap;
-}
-
-.thought {
-  font-style: italic;
-}
-
-.green-dev-floaty-dialog-top-row {
-  display: flex;
-  align-items: center;
-  margin-bottom: 15px; /* Space between top row and blue card */
-}
-
-.green-dev-floaty-dialog-gemini-icon {
-  width: 24px;
-  height: 24px;
-  background-image: var(--gemini-logo);
-  background-size: cover;
-  margin-right: 10px;
-}
-
-.green-dev-floaty-dialog-checkmark-icon {
-  width: 20px;
-  height: 20px;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234CAF50' d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
-  background-size: cover;
-  margin-right: 5px;
-}
-
-.green-dev-floaty-dialog-context-text {
-  font-weight: bold;
-}
-
-/* Blue card at the bottom */
-.green-dev-floaty-dialog-blue-card {
-  position: relative;
-  background-color: #edf2fa; /* Light blue */
-  border-radius: 12px;
-  padding: 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  border: 1px solid #d3e3fd;
-}
-
-.green-dev-floaty-dialog-node-description {
-  font-size: 11px;
-  font-family: var(--monospace-font-family);
-  color: #0b57d0;
-  background-color: #d3e3fd;
-  padding: 2px 8px;
-  margin-bottom: 10px;
-  border-radius: 4px;
-  align-self: flex-start;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.input-row {
-  display: flex;
-  align-items: center;
-  width: 100%;
-}
-
-.green-dev-floaty-dialog-text-field {
-  flex-grow: 1;
-  background-color: #fff;
-  border: 1px solid #a7d9f0;
-  border-radius: 20px; /* Pill shape */
-  padding: 8px 16px;
-  font-size: 14px;
-  color: #333;
-  margin-right: 8px;
-  outline: none;
-  transition: border-color 0.2s;
-}
-
-.green-dev-floaty-dialog-text-field:focus {
-  border-color: #0b57d0;
-}
-
-.green-dev-floaty-dialog-play-button {
-  width: 30px;
-  height: 30px;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231976D2' d='M8 5v14l11-7z'/%3E%3C/svg%3E");
-  background-size: cover;
-  cursor: pointer;
-  border: none;
-  background-color: transparent;
-  padding: 0;
-}
-
-.green-dev-floaty-minimal {
-  position: absolute;
-  width: 40px;
-  height: 40px;
-  background-color: #fff;
-  background-image: var(--gemini-logo);
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: 32px;
-  cursor: pointer;
-  pointer-events: all;
-  z-index: 1001;
-  border-radius: 12px;
-  box-shadow: 0 4px 8px rgb(0 0 0 / 20%);
-  padding: 5px;
-}
-
-.green-dev-floaty-disclaimer {
-  font-size: 15px;
-  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: 16px;
-  line-height: 1.4;
-  color: #333;
-  white-space: normal; /* Ensure text wraps */
-}
-
-.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/panels/greendev/GreenDevPanel.ts

@@ -1,364 +0,0 @@
-// 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 type * as Common from '../../core/common/common.js';
-import * as Host from '../../core/host/host.js';
-import type * as Platform from '../../core/platform/platform.js';
-import * as SDK from '../../core/sdk/sdk.js';
-import type * as Protocol from '../../generated/protocol.js';
-import * as Marked from '../../third_party/marked/marked.js';
-import * as MarkdownView from '../../ui/components/markdown_view/markdown_view.js';
-import * as UI from '../../ui/legacy/legacy.js';
-
-import greenDevPanelStyles from './GreenDevPanel.css.js';
-import type {SyncMessage} from './GreenDevShared.js';
-
-let greenDevPanelInstance: GreenDevPanel;
-
-export class GreenDevPanel extends UI.Panel.Panel {
-  #tabbedPane: UI.TabbedPane.TabbedPane;
-  #sessions = new Map<
-      string,
-      {view: UI.Widget.Widget, container: HTMLDivElement, description: HTMLDivElement, node?: SDK.DOMModel.DOMNode}>();
-  #syncChannel: BroadcastChannel;
-
-  private constructor() {
-    super('greendev');
-    this.contentElement.style.display = 'flex';
-    this.contentElement.style.flexDirection = 'column';
-    this.contentElement.style.height = '100%';
-    this.contentElement.style.overflow = 'hidden';
-
-    this.#tabbedPane = new UI.TabbedPane.TabbedPane();
-    this.#tabbedPane.element.style.flex = '1';
-    this.#tabbedPane.show(this.contentElement);
-
-    // Welcome Tab
-    this.#createWelcomeTab();
-
-    this.#tabbedPane.addEventListener(UI.TabbedPane.Events.TabClosed, this.#onTabClosed, this);
-
-    this.#syncChannel = new BroadcastChannel('green-dev-sync');
-    this.#syncChannel.onmessage = event => {
-      void this.#handlePanelMessage(event.data as SyncMessage);
-    };
-
-    // Request state from active floaties
-    this.#syncChannel.postMessage({type: 'request-session-state'});
-  }
-
-  override wasShown(): void {
-    super.wasShown();
-    this.registerRequiredCSS(greenDevPanelStyles);
-    SDK.OverlayModel.OverlayModel.setInspectNodeHandler(this.#handleInspectNode.bind(this));
-  }
-
-  override willHide(): void {
-    super.willHide();
-    SDK.OverlayModel.OverlayModel.setInspectNodeHandler(async () => {});
-  }
-
-  async #handleInspectNode(_node: SDK.DOMModel.DOMNode): Promise<void> {
-    // Suppress reveal in Elements panel by doing nothing here.
-    // The Floaty will handle its own opening and broadcasting.
-  }
-
-  #onTabClosed(event: Common.EventTarget.EventTargetEvent<UI.TabbedPane.EventData>): void {
-    const tabId = event.data.tabId;
-    if (tabId === 'welcome') {
-      return;
-    }
-    this.#sessions.delete(tabId);
-    if (this.#sessions.size === 0) {
-      if (!this.#tabbedPane.hasTab('welcome')) {
-        this.#createWelcomeTab();
-      }
-    }
-  }
-
-  #createWelcomeTab(): void {
-    const welcomeWidget = new UI.Widget.Widget();
-    welcomeWidget.element.style.display = 'flex';
-    welcomeWidget.element.style.alignItems = 'center';
-    welcomeWidget.element.style.justifyContent = 'center';
-    welcomeWidget.element.style.height = '100%';
-    const welcomeContent = document.createElement('div');
-    welcomeContent.textContent = 'Interact with GreenDev Floaty dialogs to see conversations here.';
-    welcomeContent.style.padding = '20px';
-    welcomeContent.style.fontSize = '14px';
-    welcomeContent.style.color = 'var(--sys-color-on-surface-subtle)';
-    welcomeWidget.contentElement.appendChild(welcomeContent);
-    this.#tabbedPane.appendTab('welcome', 'Welcome', welcomeWidget);
-    this.#tabbedPane.selectTab('welcome');
-  }
-
-  closeSession(sessionId: string): void {
-    this.#tabbedPane.closeTab(sessionId);
-  }
-
-  async #handlePanelMessage(data: SyncMessage): Promise<void> {
-    const sessionId = String(data.sessionId);
-    if (!sessionId || sessionId === '0' || sessionId === 'undefined') {
-      return;
-    }
-
-    let session = this.#sessions.get(sessionId);
-    if (!session) {
-      // If we are adding a new tab, check if we need to remove the welcome tab
-      if (this.#tabbedPane.hasTab('welcome')) {
-        this.#tabbedPane.closeTab('welcome');
-      }
-
-      const widget = new UI.Widget.Widget();
-      widget.contentElement.className = 'green-dev-floaty-dialog';
-      widget.contentElement.style.display = 'flex';
-      widget.contentElement.style.flexDirection = 'column';
-      widget.contentElement.style.height = '100%';
-      widget.contentElement.style.padding = '0';
-
-      const content = document.createElement('div');
-      content.className = 'green-dev-floaty-dialog-content';
-      content.style.flexGrow = '1';
-      content.style.display = 'flex';
-      content.style.flexDirection = 'column';
-      content.style.overflow = 'hidden';
-
-      // Top row: Context added
-      const topRow = document.createElement('div');
-      topRow.className = 'green-dev-floaty-dialog-top-row';
-      topRow.style.flexShrink = '0';
-      const geminiIcon = document.createElement('div');
-      geminiIcon.className = 'green-dev-floaty-dialog-gemini-icon';
-      const checkmarkIcon = document.createElement('div');
-      checkmarkIcon.className = 'green-dev-floaty-dialog-checkmark-icon';
-      const contextText = document.createElement('span');
-      contextText.className = 'green-dev-floaty-dialog-context-text';
-      contextText.textContent = 'Context added';
-      topRow.appendChild(geminiIcon);
-      topRow.appendChild(checkmarkIcon);
-      topRow.appendChild(contextText);
-      content.appendChild(topRow);
-
-      const chatContainer = document.createElement('div');
-      chatContainer.className = 'green-dev-floaty-dialog-chat-container';
-      chatContainer.style.flexGrow = '1';
-      chatContainer.style.overflowY = 'auto';
-      content.appendChild(chatContainer);
-
-      const blueCard = document.createElement('div');
-      blueCard.className = 'green-dev-floaty-dialog-blue-card';
-      blueCard.style.flexShrink = '0';
-
-      const desc = document.createElement('div');
-      desc.className = 'green-dev-floaty-dialog-node-description';
-      desc.style.whiteSpace = 'normal';
-      desc.style.overflow = 'auto';
-      blueCard.appendChild(desc);
-
-      const inputRow = document.createElement('div');
-      inputRow.className = 'input-row';
-
-      const input = document.createElement('input');
-      input.type = 'text';
-      input.className = 'green-dev-floaty-dialog-text-field';
-      input.placeholder = 'Ask a question...';
-
-      const button = document.createElement('button');
-      button.className = 'green-dev-floaty-dialog-play-button';
-
-      const sendAction = (): void => {
-        const text = input.value;
-        if (text) {
-          input.value = '';
-          // Do not append locally; wait for broadcast from floaty
-          this.#syncChannel.postMessage({type: 'user-input', sessionId: parseInt(sessionId, 10), text});
-        }
-      };
-
-      button.addEventListener('click', sendAction);
-      input.addEventListener('keydown', e => {
-        if (e.key === 'Enter') {
-          sendAction();
-        }
-      });
-
-      inputRow.appendChild(input);
-      inputRow.appendChild(button);
-      blueCard.appendChild(inputRow);
-
-      const disclaimer = document.createElement('div');
-      disclaimer.className = 'green-dev-floaty-disclaimer';
-
-      const link = document.createElement('span');
-      link.className = 'disclaimer-link';
-      link.textContent = 'Relevant data';
-      disclaimer.appendChild(link);
-
-      disclaimer.appendChild(document.createTextNode(' is sent to Google'));
-
-      const tooltip = document.createElement('div');
-      tooltip.className = 'disclaimer-tooltip';
-
-      tooltip.appendChild(document.createTextNode(
-          '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.'));
-      tooltip.appendChild(document.createElement('br'));
-      tooltip.appendChild(document.createElement('br'));
-
-      const learnMore = document.createElement('a');
-      const href = 'https://developer.chrome.com/docs/devtools/ai-assistance' as Platform.DevToolsPath.UrlString;
-      learnMore.href = href;
-      learnMore.className = 'learn-more-link';
-      learnMore.textContent = 'Learn about AI in DevTools';
-      learnMore.addEventListener('click', event => {
-        event.preventDefault();
-        Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(href);
-      });
-      tooltip.appendChild(learnMore);
-
-      disclaimer.appendChild(tooltip);
-      blueCard.appendChild(disclaimer);
-
-      content.appendChild(blueCard);
-      widget.contentElement.appendChild(content);
-
-      this.#sessions.set(sessionId, {view: widget, container: chatContainer, description: desc});
-      session = {view: widget, container: chatContainer, description: desc};
-
-      const title = data.nodeDescription || `Node ${sessionId}`;
-      this.#tabbedPane.appendTab(sessionId, title, widget, undefined, undefined, true);
-      this.#tabbedPane.selectTab(sessionId);
-    }
-
-    if (!session.node && (data.type === 'full-state' || data.type === 'node-changed' || !session)) {
-      const backendNodeId = parseInt(sessionId, 10);
-      const targetManager = SDK.TargetManager.TargetManager.instance();
-      let mainTarget = targetManager.primaryPageTarget();
-
-      const fetchNode = async(target: SDK.Target.Target): Promise<void> => {
-        const domModel = target.model(SDK.DOMModel.DOMModel);
-        if (domModel) {
-          const nodesMap = await domModel.pushNodesByBackendIdsToFrontend(
-              new Set([backendNodeId]) as Set<Protocol.DOM.BackendNodeId>);
-          const node = nodesMap?.get(backendNodeId as Protocol.DOM.BackendNodeId) || null;
-          if (node && session) {
-            session.node = node;
-            this.#addHighlightListeners(session.description, node);
-          }
-        }
-      };
-
-      if (mainTarget) {
-        await fetchNode(mainTarget);
-      } else {
-        targetManager.observeTargets({
-          targetAdded: async(target: SDK.Target.Target): Promise<void> => {
-            if (target === targetManager.primaryPageTarget()) {
-              mainTarget = target;
-              await fetchNode(mainTarget);
-            }
-          },
-          targetRemoved: (_: SDK.Target.Target): void => {},
-        });
-      }
-    }
-
-    if (data.type === 'new-message' && data.text) {
-      this.#appendMessageToContainer(session.container, data.text, data.isUser ?? false);
-    } else if (data.type === 'update-last-message') {
-      const lastMsg = session.container.lastElementChild?.querySelector('.message-content devtools-markdown-view');
-      if (lastMsg) {
-        (lastMsg as MarkdownView.MarkdownView.MarkdownView).data = {
-          tokens: Marked.Marked.lexer(data.text ?? ''),
-        };
-      }
-    } else if (data.type === 'full-state') {
-      session.container.innerHTML = '';
-      if (data.messages) {
-        for (const msg of data.messages) {
-          this.#appendMessageToContainer(session.container, msg.text, msg.isUser);
-        }
-      }
-    } else if (data.type === 'select-tab') {
-      this.#tabbedPane.selectTab(sessionId);
-    }
-
-    if (data.nodeDescription) {
-      session.description.textContent = data.nodeDescription;
-      if (data.type === 'node-changed') {
-        this.#tabbedPane.changeTabTitle(sessionId, data.nodeDescription);
-      }
-    }
-  }
-
-  #addHighlightListeners(element: HTMLElement, node: SDK.DOMModel.DOMNode): void {
-    element.addEventListener('mousemove', () => {
-      node.highlight();
-    });
-    element.addEventListener('mouseleave', () => {
-      void node.domModel().overlayModel().clearHighlight();
-    });
-  }
-
-  #appendMessageToContainer(container: HTMLDivElement, text: string, isUser: boolean): void {
-    const messageElement = document.createElement('div');
-    messageElement.className = `message ${isUser ? 'user-message' : 'ai-message'}`;
-    messageElement.style.display = 'flex';
-    messageElement.style.flexDirection = 'column';
-    messageElement.style.flexShrink = '0';
-
-    const content = document.createElement('div');
-    content.className = 'message-content';
-    if (isUser) {
-      content.textContent = text;
-    } else {
-      const markdown = new MarkdownView.MarkdownView.MarkdownView();
-      markdown.data = {
-        tokens: Marked.Marked.lexer(text),
-      };
-      content.append(markdown);
-      const style = document.createElement('style');
-      style.textContent = `
-        .message { font-size: 1.0rem; }
-        .message code { font-size: 1.0rem; font-family: 'Roboto Mono', monospace; color: green; }
-        devtools-code-block {
-          white-space: pre-wrap;
-        }
-      `;
-      markdown.shadowRoot?.appendChild(style);
-
-      const codeBlocks = markdown.shadowRoot?.querySelectorAll('devtools-code-block');
-      for (const block of codeBlocks ?? []) {
-        // We need to rerender the component for the styles to be applied.
-        block.connectedCallback();
-      }
-    }
-    content.style.flexGrow = '1';
-    messageElement.appendChild(content);
-
-    container.appendChild(messageElement);
-    container.scrollTop = container.scrollHeight;
-  }
-
-  static instance(opts: {
-    forceNew: boolean|null,
-  } = {forceNew: null}): GreenDevPanel {
-    const {forceNew} = opts;
-    if (!greenDevPanelInstance || forceNew) {
-      greenDevPanelInstance = new GreenDevPanel();
-    }
-
-    return greenDevPanelInstance;
-  }
-}
-
-// Expose global method for browser process to call
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-(window as any).GreenDevPanel = {
-  closeSession: (sessionId: number): void => {
-    if (greenDevPanelInstance) {
-      greenDevPanelInstance.closeSession(String(sessionId));
-    }
-  },
-};

package/front_end/panels/greendev/GreenDevShared.ts

@@ -1,13 +0,0 @@
-// 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.
-
-export interface SyncMessage {
-  type: 'main-window-alive'|'request-session-state'|'user-input'|'restore-floaty'|'full-state'|'activate-panel'|
-      'select-tab'|'node-changed'|'new-message'|'update-last-message';
-  sessionId?: number;
-  text?: string;
-  isUser?: boolean;
-  nodeDescription?: string|null;
-  messages?: Array<{text: string, isUser: boolean}>;
-}