chrome-devtools-frontend 1.0.1578729 → 1.0.1581449

package/front_end/panels/greendev/GreenDevPanel.css

@@ -0,0 +1,241 @@
+/* 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: monospace;
+}
+
+.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: monospace;
+  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: 14px;
+  color: #666;
+  text-align: center;
+  margin-top: 8px;
+}

package/front_end/panels/greendev/GreenDevPanel.ts

@@ -0,0 +1,308 @@
+// 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 SDK from '../../core/sdk/sdk.js';
+import type * as Protocol from '../../generated/protocol.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';
+      disclaimer.textContent = 'Relevant data is sent to Google';
+      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');
+      if (lastMsg) {
+        lastMsg.textContent = data.text ?? null;
+      }
+    } 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';
+    content.textContent = text;
+    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

@@ -0,0 +1,13 @@
+// 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}>;
+}

package/front_end/panels/greendev/greendev-meta.ts

@@ -0,0 +1,52 @@
+// 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.
+
+import * as i18n from '../../core/i18n/i18n.js';
+import * as UI from '../../ui/legacy/legacy.js';
+
+import type * as GreenDev from './greendev.js';
+
+let loadedGreenDevModule: (typeof GreenDev|undefined);
+
+async function loadGreenDevModule(): Promise<typeof GreenDev> {
+  if (!loadedGreenDevModule) {
+    loadedGreenDevModule = await import('./greendev.js');
+  }
+  return loadedGreenDevModule;
+}
+
+UI.ViewManager.registerViewExtension({
+  location: UI.ViewManager.ViewLocationValues.PANEL,
+  id: 'greendev',
+  title: i18n.i18n.lockedLazyString('GreenDev'),
+  commandPrompt: i18n.i18n.lockedLazyString('Show GreenDev'),
+  persistence: UI.ViewManager.ViewPersistence.CLOSEABLE,
+  order: 100,
+  async loadView() {
+    const GreenDev = await loadGreenDevModule();
+    return GreenDev.GreenDevPanel.GreenDevPanel.instance();
+  },
+  condition: config => {
+    return Boolean(config?.devToolsGreenDevUi?.enabled);
+  },
+});
+
+const syncChannel = new BroadcastChannel('green-dev-sync');
+
+syncChannel.postMessage({type: 'main-window-alive'});
+
+syncChannel.onmessage = event => {
+  if (event.data.type === 'activate-panel') {
+    console.error('[GreenDev] Meta: Received activate-panel broadcast');
+
+    void UI.ViewManager.ViewManager.instance().showView('greendev').then(() => {
+      console.error('[GreenDev] Meta: View shown, broadcasting select-tab');
+
+      const replyChannel = new BroadcastChannel('green-dev-sync');
+      replyChannel.postMessage({type: 'select-tab', sessionId: event.data.sessionId});
+
+      replyChannel.close();
+    });
+  }
+};

package/front_end/panels/greendev/greendev.ts

@@ -0,0 +1,9 @@
+// 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.
+
+import * as GreenDevPanel from './GreenDevPanel.js';
+
+export {
+  GreenDevPanel,
+};

package/front_end/panels/issues/CorsIssueDetailsView.ts

@@ -176,7 +176,7 @@ export class CorsIssueDetailsView extends AffectedResourcesView {
         this.appendColumnTitle(header, i18nString(UIStrings.preflightRequestIfProblematic));
         this.appendColumnTitle(header, i18nString(UIStrings.allowCredentialsValueFromHeader));
         break;
-      case IssuesManager.CorsIssue.IssueCode.INSECURE_PRIVATE_NETWORK:
+      case IssuesManager.CorsIssue.IssueCode.INSECURE_LOCAL_NETWORK:
         this.appendColumnTitle(header, i18nString(UIStrings.resourceAddressSpace));
         this.appendColumnTitle(header, i18nString(UIStrings.initiatorAddressSpace));
         this.appendColumnTitle(header, i18nString(UIStrings.initiatorContext));
@@ -207,7 +207,7 @@ export class CorsIssueDetailsView extends AffectedResourcesView {
       default:
         Platform.assertUnhandled<IssuesManager.CorsIssue.IssueCode.PREFLIGHT_MISSING_ALLOW_EXTERNAL|
                                  IssuesManager.CorsIssue.IssueCode.PREFLIGHT_INVALID_ALLOW_EXTERNAL|
-                                 IssuesManager.CorsIssue.IssueCode.INVALID_PRIVATE_NETWORK_ACCESS|
+                                 IssuesManager.CorsIssue.IssueCode.INVALID_LOCAL_NETWORK_ACCESS|
                                  IssuesManager.CorsIssue.IssueCode.LOCAL_NETWORK_ACCESS_PERMISSION_DENIED>(issueCode);
     }
 
@@ -362,7 +362,7 @@ export class CorsIssueDetailsView extends AffectedResourcesView {
         }
         this.appendIssueDetailCell(element, details.corsErrorStatus.failedParameter, 'code-example');
         break;
-      case IssuesManager.CorsIssue.IssueCode.INSECURE_PRIVATE_NETWORK:
+      case IssuesManager.CorsIssue.IssueCode.INSECURE_LOCAL_NETWORK:
         element.appendChild(this.createRequestCell(details.request, opts));
         this.#appendStatus(element, details.isWarning);
         this.appendIssueDetailCell(element, details.resourceIPAddressSpace ?? '');
@@ -433,7 +433,7 @@ export class CorsIssueDetailsView extends AffectedResourcesView {
         this.#appendStatus(element, details.isWarning);
         Platform.assertUnhandled<IssuesManager.CorsIssue.IssueCode.PREFLIGHT_MISSING_ALLOW_EXTERNAL|
                                  IssuesManager.CorsIssue.IssueCode.PREFLIGHT_INVALID_ALLOW_EXTERNAL|
-                                 IssuesManager.CorsIssue.IssueCode.INVALID_PRIVATE_NETWORK_ACCESS|
+                                 IssuesManager.CorsIssue.IssueCode.INVALID_LOCAL_NETWORK_ACCESS|
                                  IssuesManager.CorsIssue.IssueCode.LOCAL_NETWORK_ACCESS_PERMISSION_DENIED>(issueCode);
         break;
     }

package/front_end/panels/lighthouse/LighthouseStartView.ts

@@ -182,7 +182,7 @@ export class StartView extends UI.Widget.Widget {
 <form class="lighthouse-start-view">
   <header class="hbox">
     <div class="lighthouse-logo"></div>
-    <div class="lighthouse-title">${i18nString(UIStrings.generateLighthouseReport)}</div>
+    <h1 class="lighthouse-title">${i18nString(UIStrings.generateLighthouseReport)}</h1>
     <div class="lighthouse-start-button-container" $="start-button-container">${this.startButton}</div>
   </header>
   <div $="help-text" class="lighthouse-help-text hidden"></div>

package/front_end/panels/lighthouse/lighthouseStartView.css

@@ -26,6 +26,12 @@
   margin-bottom: 16px;
 }
 
+.lighthouse-start-view .lighthouse-title {
+  margin: 0;
+  font-size: inherit;
+  font-weight: normal;
+}
+
 .lighthouse-logo {
   width: 75px;
   height: 75px;