chrome-devtools-frontend 1.0.1581449 → 1.0.1582745

package/front_end/ui/components/markdown_view/MarkdownLinksMap.ts

@@ -58,9 +58,12 @@ export const markdownLinks = new Map<string, string>([
   ['signatureHeader', 'https://www.rfc-editor.org/rfc/rfc9421.html#name-the-signature-http-field'],
   ['signatureInputHeader', 'https://www.rfc-editor.org/rfc/rfc9421.html#name-the-signature-input-http-fi'],
   ['signatureParameters', 'https://www.rfc-editor.org/rfc/rfc9421.html#name-signature-parameters'],
-  ['sfDictionary', 'https://www.rfc-editor.org/rfc/rfc8941.html#name-dictionaries'],
   ['sfByteSequence', 'https://www.rfc-editor.org/rfc/rfc8941.html#name-byte-sequences'],
+  ['sfDictionary', 'https://www.rfc-editor.org/rfc/rfc8941.html#name-dictionaries'],
   ['sfInnerList', 'https://www.rfc-editor.org/rfc/rfc8941.html#name-inner-lists'],
+  ['sfList', 'https://www.rfc-editor.org/rfc/rfc8941.html#name-lists'],
+  ['sfString', 'https://www.rfc-editor.org/rfc/rfc8941.html#name-strings'],
+  ['sfToken', 'https://www.rfc-editor.org/rfc/rfc8941.html#name-tokens'],
   ['componentParameterSf', 'https://www.rfc-editor.org/rfc/rfc9421.html#name-strict-serialization-of-htt'],
   ['componentParameterReq', 'https://www.rfc-editor.org/rfc/rfc9421.html#content-request-response'],
   [
@@ -74,6 +77,7 @@ export const markdownLinks = new Map<string, string>([
     'https://privacysandbox.com/news/update-on-plans-for-privacy-sandbox-technologies/',
     'https://privacysandbox.com/news/update-on-plans-for-privacy-sandbox-technologies/'
   ],
+  ['urlPatternSpec', 'https://urlpattern.spec.whatwg.org/'],
 ]);
 
 export const getMarkdownLink = (key: string): string => {

package/front_end/ui/legacy/ListControl.ts

@@ -282,6 +282,26 @@ export class ListControl<T> {
     return false;
   }
 
+  selectFirstItem(center?: boolean): boolean {
+    const index = this.findFirstSelectable(0, +1, false);
+    if (index !== -1) {
+      this.scrollIntoView(index, center);
+      this.select(index);
+      return true;
+    }
+    return false;
+  }
+
+  selectLastItem(center?: boolean): boolean {
+    const index = this.findFirstSelectable(this.model.length - 1, -1, false);
+    if (index !== -1) {
+      this.scrollIntoView(index, center);
+      this.select(index);
+      return true;
+    }
+    return false;
+  }
+
   private scrollIntoView(index: number, center?: boolean): void {
     if (this.mode === ListMode.NonViewport) {
       this.elementAtIndex(index).scrollIntoViewIfNeeded(Boolean(center));
@@ -328,6 +348,12 @@ export class ListControl<T> {
       case 'PageDown':
         selected = this.selectItemNextPage(false);
         break;
+      case 'Home':
+        selected = this.selectFirstItem();
+        break;
+      case 'End':
+        selected = this.selectLastItem();
+        break;
     }
     if (selected) {
       event.consume(true);
@@ -364,7 +390,8 @@ export class ListControl<T> {
       element = this.delegate.createElementForItem(item);
       if (!element.hasAttribute('jslog')) {
         element.setAttribute(
-            'jslog', `${VisualLogging.item().track({click: true, keydown: 'ArrowUp|ArrowDown|PageUp|PageDown'})}`);
+            'jslog',
+            `${VisualLogging.item().track({click: true, keydown: 'ArrowUp|ArrowDown|PageUp|PageDown|Home|End'})}`);
       }
       this.itemToElement.set(item, element);
       this.updateElementARIA(element, index);

package/front_end/ui/legacy/Toolbar.ts

@@ -1321,11 +1321,11 @@ export class ToolbarCheckbox extends ToolbarItem<void> {
   constructor(
       text: Common.UIString.LocalizedString, tooltip?: Common.UIString.LocalizedString,
       listener?: ((arg0: MouseEvent) => void), jslogContext?: string) {
-    const checkboxLabel = CheckboxLabel.create(text, undefined, undefined, jslogContext);
+    // Pass tooltip to CheckboxLabel.create so it's set on the inner input/text elements,
+    // rather than installing it on the wrapper element which causes screen readers to
+    // incorrectly announce it as a group name.
+    const checkboxLabel = CheckboxLabel.create(text, undefined, undefined, jslogContext, undefined, tooltip);
     super(checkboxLabel);
-    if (tooltip) {
-      Tooltip.install(this.element, tooltip);
-    }
     if (listener) {
       this.element.addEventListener('click', listener, false);
     }

package/front_end/ui/legacy/Treeoutline.ts

@@ -1566,7 +1566,7 @@ class TreeViewTreeElement extends TreeElement {
       this.listItemElement.classList.add(className);
       this.#clonedClasses.add(className);
     }
-    InterceptBindingDirective.attachEventListeners(this.configElement, this.listItemElement);
+    InterceptBindingDirective.setEventListeners(this.configElement, this.listItemElement);
 
     for (const child of this.configElement.childNodes) {
       if (child instanceof HTMLUListElement && child.role === 'group') {
@@ -1704,7 +1704,7 @@ export class TreeViewElement extends HTMLElementWithLightDOMTemplate {
     super();
     this.#treeOutline.addEventListener(Events.ElementSelected, event => {
       if (event.data instanceof TreeViewTreeElement) {
-        this.dispatchEvent(new TreeViewElement.SelectEvent(event.data.configElement));
+        event.data.listItemElement.dispatchEvent(new TreeViewElement.SelectEvent());
       }
     });
     this.#treeOutline.addEventListener(Events.ElementExpanded, event => {
@@ -1859,9 +1859,9 @@ export class TreeViewElement extends HTMLElementWithLightDOMTemplate {
 }
 
 export namespace TreeViewElement {
-  export class SelectEvent extends CustomEvent<HTMLLIElement> {
-    constructor(detail: HTMLLIElement) {
-      super('select', {detail});
+  export class SelectEvent extends CustomEvent<void> {
+    constructor() {
+      super('select');
     }
   }
 

package/front_end/ui/legacy/UIUtils.ts

@@ -1173,7 +1173,7 @@ export class CheckboxLabel extends HTMLElement {
 
   static create(
       title?: Platform.UIString.LocalizedString, checked?: boolean, subtitle?: Platform.UIString.LocalizedString,
-      jslogContext?: string, small?: boolean): CheckboxLabel {
+      jslogContext?: string, small?: boolean, tooltip?: Platform.UIString.LocalizedString): CheckboxLabel {
     const element = document.createElement('devtools-checkbox');
     element.#checkboxElement.checked = Boolean(checked);
     if (jslogContext) {
@@ -1182,11 +1182,17 @@ export class CheckboxLabel extends HTMLElement {
     }
     if (title !== undefined) {
       element.#textElement.textContent = title;
-      element.#checkboxElement.title = title;
       if (subtitle !== undefined) {
         element.#textElement.createChild('div', 'devtools-checkbox-subtitle').textContent = subtitle;
       }
     }
+    // checkboxElement tooltip: tooltip first, then title (custom tooltip takes precedence for the input)
+    const inputTooltip = tooltip ?? title;
+    if (inputTooltip) {
+      element.#checkboxElement.title = inputTooltip;
+      // Set aria-description for screen reader announcement
+      element.#checkboxElement.setAttribute('aria-description', inputTooltip);
+    }
     element.#checkboxElement.classList.toggle('small', small);
     return element;
   }
@@ -1970,6 +1976,7 @@ export function bindToAction(actionName: string): ReturnType<typeof Directives.r
 type BindingEventListener = (arg: any) => any;
 export class InterceptBindingDirective extends Lit.Directive.Directive {
   static readonly #interceptedBindings = new WeakMap<Element, Map<string, BindingEventListener>>();
+  static readonly #attachedBindings = new WeakMap<Element, Map<string, BindingEventListener>>();
 
   override update(part: Lit.Directive.Part, [listener]: [BindingEventListener]): unknown {
     if (part.type !== Lit.Directive.PartType.EVENT) {
@@ -1990,13 +1997,22 @@ export class InterceptBindingDirective extends Lit.Directive.Directive {
     return undefined;
   }
 
-  static attachEventListeners(templateElement: Element, renderedElement: Element): void {
-    const eventListeners = InterceptBindingDirective.#interceptedBindings.get(templateElement);
-    if (!eventListeners) {
-      return;
+  static setEventListeners(templateElement: Element, renderedElement: Element): void {
+    const attachedListeners = InterceptBindingDirective.#attachedBindings.get(renderedElement);
+    if (attachedListeners) {
+      for (const [name, listener] of attachedListeners) {
+        renderedElement.removeEventListener(name, listener);
+      }
     }
-    for (const [name, listener] of eventListeners) {
-      renderedElement.addEventListener(name, listener);
+
+    const newListeners = InterceptBindingDirective.#interceptedBindings.get(templateElement);
+    if (newListeners?.size) {
+      for (const [name, listener] of newListeners) {
+        renderedElement.addEventListener(name, listener);
+      }
+      InterceptBindingDirective.#attachedBindings.set(renderedElement, new Map(newListeners));
+    } else {
+      InterceptBindingDirective.#attachedBindings.delete(renderedElement);
     }
   }
 }
@@ -2029,7 +2045,7 @@ export class HTMLElementWithLightDOMTemplate extends HTMLElement {
       clone.appendChild(HTMLElementWithLightDOMTemplate.cloneNode(child));
     }
     if (node instanceof Element && clone instanceof Element) {
-      InterceptBindingDirective.attachEventListeners(node, clone);
+      InterceptBindingDirective.setEventListeners(node, clone);
     }
     return clone;
   }
@@ -2059,7 +2075,7 @@ export class HTMLElementWithLightDOMTemplate extends HTMLElement {
         HTMLElementWithLightDOMTemplate.patchLitTemplate(value);
         return value;
       }
-      if (Array.isArray(value)) {
+      if (Array.isArray(value) || value instanceof Iterator) {
         return value.map(patchValue);
       }
 

package/front_end/ui/legacy/components/utils/JSPresentationUtils.ts

@@ -96,7 +96,7 @@ function populateContextMenu(link: Element, event: Event): void {
 }
 
 // TODO(crbug.com/456517732): remove when all usages of runtimeStackTrace are migrated.
-export function buildStackTraceRowsForLegacyRuntimeStackTrace(
+function buildStackTraceRowsForLegacyRuntimeStackTrace(
     stackTrace: Protocol.Runtime.StackTrace,
     target: SDK.Target.Target|null,
     linkifier: Linkifier,
@@ -159,7 +159,7 @@ export function buildStackTraceRowsForLegacyRuntimeStackTrace(
   return stackTraceRows;
 }
 
-export function buildStackTraceRows(
+function buildStackTraceRows(
     stackTrace: StackTrace.StackTrace.StackTrace,
     target: SDK.Target.Target|null,
     linkifier: Linkifier,
@@ -189,14 +189,9 @@ export function buildStackTraceRows(
         inlineFrameIndex: 0,
         revealBreakpoint: previousStackFrameWasBreakpointCondition,
       });
-      if (link) {
-        link.setAttribute('jslog', `${VisualLogging.link('stack-trace').track({click: true})}`);
-        link.addEventListener('contextmenu', populateContextMenu.bind(null, link));
+      link.setAttribute('jslog', `${VisualLogging.link('stack-trace').track({click: true})}`);
+      link.addEventListener('contextmenu', populateContextMenu.bind(null, link));
 
-        if (!link.textContent) {
-          link.textContent = i18nString(UIStrings.unknownSource);
-        }
-      }
       stackTraceRows.push({functionName, link});
       previousStackFrameWasBreakpointCondition = [
         SDK.DebuggerModel.COND_BREAKPOINT_SOURCE_URL,
@@ -306,12 +301,12 @@ export interface Options {
   expandable?: boolean;
 }
 
-export interface StackTraceRegularRow {
+interface StackTraceRegularRow {
   functionName: string;
   link: HTMLElement|null;
 }
 
-export interface StackTraceAsyncRow {
+interface StackTraceAsyncRow {
   asyncDescription: string;
 }
 
@@ -353,8 +348,6 @@ export class StackTracePreviewContent extends UI.Widget.Widget {
     this.#table = this.contentElement.createChild('table', 'stack-preview-container');
     this.#table.classList.toggle('width-constrained', this.#options.widthConstrained ?? false);
 
-    this.#stackTrace?.addEventListener(StackTrace.StackTrace.Events.UPDATED, this.performUpdate.bind(this));
-
     this.performUpdate();
   }
 
@@ -407,7 +400,11 @@ export class StackTracePreviewContent extends UI.Widget.Widget {
   }
 
   set stackTrace(stackTrace: StackTrace.StackTrace.StackTrace) {
+    if (this.#stackTrace) {
+      this.#stackTrace.removeEventListener(StackTrace.StackTrace.Events.UPDATED, this.requestUpdate, this);
+    }
     this.#stackTrace = stackTrace;
+    this.#stackTrace.addEventListener(StackTrace.StackTrace.Events.UPDATED, this.requestUpdate, this);
     this.requestUpdate();
   }
 

package/front_end/ui/legacy/components/utils/Linkifier.ts

@@ -345,8 +345,7 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
   }
 
   maybeLinkifyStackTraceFrame(
-      target: SDK.Target.Target|null, frame: StackTrace.StackTrace.Frame, options?: LinkifyOptions): HTMLElement|null {
-    let fallbackAnchor: HTMLElement|null = null;
+      target: SDK.Target.Target|null, frame: StackTrace.StackTrace.Frame, options?: LinkifyOptions): HTMLElement {
     const linkifyURLOptions: LinkifyURLOptions = {
       ...options,
       lineNumber: frame.line,
@@ -361,10 +360,8 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
       omitOrigin: options?.omitOrigin,
     };
     const {className = ''} = linkifyURLOptions;
-    if (frame.url) {
-      fallbackAnchor = Linkifier.linkifyURL(frame.url as Platform.DevToolsPath.UrlString, linkifyURLOptions);
-    }
-    if (!target || target.isDisposed()) {
+    const fallbackAnchor = Linkifier.linkifyURL(frame.url as Platform.DevToolsPath.UrlString, linkifyURLOptions);
+    if (!target || target.isDisposed() || !frame.uiSourceCode) {
       return fallbackAnchor;
     }
 
@@ -383,7 +380,7 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
       revealBreakpoint: options?.revealBreakpoint,
     };
 
-    const uiLocation = frame.uiSourceCode?.uiLocation(frame.line, frame.column) ?? null;
+    const uiLocation = frame.uiSourceCode.uiLocation(frame.line, frame.column) ?? null;
     this.updateAnchorFromUILocation(link, linkDisplayOptions, uiLocation);
 
     const anchors = (this.anchorsByTarget.get(target) as Element[]);

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -923,12 +923,14 @@ export const knownContextValues = new Set([
   'content-type',
   'content-visibility',
   'context',
+  'context-added',
   'context-change-drjones-file',
   'context-change-drjones-network-request',
   'context-change-drjones-performance',
   'context-change-freestyler',
   'context-change-none',
   'context-change-performance-insight',
+  'context-removed',
   'context3',
   'contextmenu',
   'continue',

package/inspector_overlay/main.ts

@@ -7,6 +7,13 @@ import commonStyle from './common.css';
 import {adoptStyleSheet} from './common.js';
 import {gridStyle} from './highlight_grid_common.js';
 // @ts-expect-error Importing CSS is handled in Rollup.
+import greenDevAnchorsStyle from './tool_green_dev_anchors.css';
+import {
+  type GreenDevAnchorsDispatchMessage,
+  GreenDevAnchorsOverlay,
+  type GreenDevAnchorsToolMessage
+} from './tool_green_dev_anchors.js';
+// @ts-expect-error Importing CSS is handled in Rollup.
 import highlightGridStyle from './tool_grid.css';
 // @ts-expect-error Importing CSS is handled in Rollup.
 import highlightStyle from './tool_highlight.css';
@@ -29,7 +36,9 @@ import {WindowControlsOverlay} from './tool_window_controls.js';
 declare global {
   interface Window {
     // eslint-disable-next-line @typescript-eslint/naming-convention
-    InspectorOverlayHost: {send(data: PausedToolMessage|PersistentToolMessage|ScreenshotToolMessage|string): void};
+    InspectorOverlayHost: {
+      send(data: PausedToolMessage|PersistentToolMessage|ScreenshotToolMessage|GreenDevAnchorsToolMessage|string): void,
+    };
   }
 }
 
@@ -39,14 +48,18 @@ const gridStyleSheet = new CSSStyleSheet();
 gridStyleSheet.replaceSync(gridStyle);
 
 const highlightOverlay = new HighlightOverlay(window, [highlightStyle, gridStyleSheet]);
-const persistentOverlay = new PersistentOverlay(window, [highlightGridStyle, gridStyleSheet]);
+const persistentOverlay = new PersistentOverlay(window, [highlightGridStyle, greenDevAnchorsStyle, gridStyleSheet]);
 const pausedOverlay = new PausedOverlay(window, pausedStyle);
 const screenshotOverlay = new ScreenshotOverlay(window, screenshotStyle);
+const greenDevAnchorsOverlay = new GreenDevAnchorsOverlay(window, greenDevAnchorsStyle);
 const sourceOrderOverlay = new SourceOrderOverlay(window, sourceOrderStyle);
 const viewportSizeOverlay = new ViewportSizeOverlay(window);
 const windowControlsOverlay = new WindowControlsOverlay(window, [wcoStyle]);
 
+persistentOverlay.setGreenDevAnchorsOverlay(greenDevAnchorsOverlay);
+
 interface Overlays {
+  greenDevFloaty: GreenDevAnchorsOverlay;
   highlight: HighlightOverlay;
   persistent: PersistentOverlay;
   paused: PausedOverlay;
@@ -60,6 +73,7 @@ type PlatformName = string;
 
 // Key in this object is the name the backend refers to a particular overlay by.
 const overlays: Overlays = {
+  greenDevFloaty: greenDevAnchorsOverlay,
   highlight: highlightOverlay,
   persistent: persistentOverlay,
   paused: pausedOverlay,
@@ -76,6 +90,7 @@ interface MessageLookup {
   setOverlay: keyof Overlays;
   setPlatform: PlatformName;
   drawingFinished: '';
+  update: GreenDevAnchorsDispatchMessage;
 }
 
 const dispatch = <K extends keyof MessageLookup>(message: [a: K, b: MessageLookup[K]]) => {
@@ -93,7 +108,7 @@ const dispatch = <K extends keyof MessageLookup>(message: [a: K, b: MessageLooku
       currentOverlay.install();
     }
   } else if (functionName === 'setPlatform') {
-    platformName = message[1];
+    platformName = message[1] as PlatformName;
   } else if (functionName === 'drawingFinished') {
     // TODO The logic needs to be added here once the backend starts sending this event.
   } else {

package/inspector_overlay/tool_green_dev_anchors.css

@@ -0,0 +1,54 @@
+/*
+ * 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 color-named, plugin/use_theme_colors */
+
+: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%3C/mask%3E%3Cg%20mask%3D%22url(%23maskme)%22%3E%3Cpath%20fill%3D%22%234285F4%22%20d%3D%22M0%200h38.235L65%2027.66%2065%2065H0z%22/%3E%3Cpath%20fill%3D%22%23EA4335%22%20d%3D%22M26.765%200H65v38.235z%22/%3E%3Cpath%20fill%3D%22%2334A853%22%20d%3D%22M0%2026.765H38.235V65H0z%22/%3E%3Cpath%20fill%3D%22%23FBBC04%22%20d%3D%22M27.66%2065L65%2038.235V65z%22/%3E%3C/g%3E%3C/svg%3E");
+  --open-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6' /%3E%3Cpolyline points='15 3 21 3 21 9' /%3E%3Cline x1='10' y1='14' x2='21' y2='3' /%3E%3C/svg%3E");
+}
+
+#green-dev-anchors-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+  pointer-events: none;
+}
+
+.green-dev-anchor-minimal {
+  position: absolute;
+  width: 70px;
+  height: 40px;
+  background-color: #fff;
+  border-radius: 12px;
+  box-shadow: 0 4px 8px rgb(0 0 0 / 20%);
+  pointer-events: auto;
+  z-index: 1001;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 5px;
+  cursor: pointer;
+}
+
+.green-dev-anchor-icon-gemini {
+  width: 24px;
+  height: 24px;
+  background-image: var(--gemini-logo);
+  background-size: cover;
+  background-repeat: no-repeat;
+  margin-right: 5px;
+}
+
+.green-dev-anchor-icon-open {
+  width: 20px;
+  height: 20px;
+  background-image: var(--open-icon);
+  background-size: cover;
+  background-repeat: no-repeat;
+}

package/inspector_overlay/tool_green_dev_anchors.ts

@@ -0,0 +1,164 @@
+// 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 {Overlay} from './common.js';
+
+export interface GreenDevAnchorsHighlight {
+  nodeId: number;
+  x: number;
+  y: number;
+}
+
+export type GreenDevAnchorsToolMessage = {
+  highlightType: 'greenDevFloaty',
+  command: 'setInputValue',
+  nodeId: number,
+  value: string,
+}|{
+  highlightType: 'greenDevFloaty',
+  command: 'debugMessage',
+  message: string,
+}|{
+  highlightType: 'greenDevFloaty',
+  command: 'openDevTools',
+  nodeId: number,
+}|{
+  highlightType: 'greenDevFloaty',
+  command: 'restoreFloaty',
+  nodeId: number,
+};
+
+function consoleLog(message: string) {
+  window.InspectorOverlayHost.send({highlightType: 'greenDevFloaty', command: 'debugMessage', message});
+}
+
+export interface GreenDevAnchorsDispatchMessage {
+  nodeId: number;
+  value: string;
+}
+
+export class GreenDevAnchorsOverlay extends Overlay {
+  #anchorsContainer!: HTMLElement;
+  #anchorsByNodeId = new Map<number, HTMLElement>();
+
+  override install() {
+    consoleLog('GreenDevAnchorsOverlay.install() called');
+
+    this.document.body.classList.add('fill');
+
+    const canvas = this.document.createElement('canvas');
+    canvas.id = 'canvas';
+    canvas.classList.add('fill');
+    canvas.style.pointerEvents = 'none';
+    this.document.body.append(canvas);
+
+    const anchorsContainer = this.document.createElement('div');
+    anchorsContainer.id = 'green-dev-anchors-container';
+    this.document.body.append(anchorsContainer);
+    this.#anchorsContainer = anchorsContainer;
+
+    this.setCanvas(canvas);
+    super.install();
+  }
+
+  override uninstall() {
+    consoleLog('GreenDevAnchorsOverlay.uninstall() called');
+
+    this.document.body.classList.remove('fill');
+    if (this.#anchorsContainer && this.#anchorsContainer.parentElement) {
+      this.#anchorsContainer.parentElement.removeChild(this.#anchorsContainer);
+    }
+    // Clear the map as the elements are removed from DOM.
+    this.#anchorsByNodeId.clear();
+    super.uninstall();
+  }
+
+  drawGreenDevAnchors(highlights: GreenDevAnchorsHighlight[]) {
+    if (this.#anchorsContainer && !this.#anchorsContainer.isConnected) {
+      // The container was removed from the DOM (likely by PersistentOverlay.uninstall cleaning up),
+      // but this overlay still thinks it's installed. We need to re-install to restore the DOM.
+      try {
+        this.uninstall();
+      } catch (e) {
+        console.error('Error during uninstall in drawGreenDevAnchors:', e);
+      }
+      this.install();
+    }
+
+    const newAnchorsByNodeId = new Map<number, HTMLElement>();
+
+    for (const highlight of highlights) {
+      const {x, y, nodeId} = highlight;
+      let anchor = this.#anchorsByNodeId.get(nodeId);
+
+      if (anchor) {
+        anchor.style.left = `${x}px`;
+        anchor.style.top = `${y}px`;
+        // Remove from the old map so only anchors that need to be deleted remain.
+        this.#anchorsByNodeId.delete(nodeId);
+      } else {
+        const newAnchor = this.drawGreenDevAnchor(highlight);
+        if (!newAnchor) {
+          continue;
+        }
+        anchor = newAnchor;
+        anchor.style.left = `${x}px`;
+        anchor.style.top = `${y}px`;
+        this.#anchorsContainer.append(anchor);
+      }
+      newAnchorsByNodeId.set(nodeId, anchor);
+    }
+
+    // Remove any anchors that were not present in the new highlights list.
+    for (const anchor of this.#anchorsByNodeId.values()) {
+      anchor.remove();
+    }
+
+    this.#anchorsByNodeId = newAnchorsByNodeId;
+  }
+
+  private drawGreenDevAnchor(highlight: GreenDevAnchorsHighlight): HTMLElement {
+    const {nodeId} = highlight;
+    const anchor = this.document.createElement('div');
+    anchor.classList.add('green-dev-anchor-minimal');
+
+    const geminiIcon = this.document.createElement('div');
+    geminiIcon.classList.add('green-dev-anchor-icon-gemini');
+    anchor.append(geminiIcon);
+
+    const openIcon = this.document.createElement('div');
+    openIcon.classList.add('green-dev-anchor-icon-open');
+    anchor.append(openIcon);
+
+    const onEvent = (event: MouseEvent) => {
+      event.stopPropagation();
+      event.preventDefault();
+    };
+
+    openIcon.addEventListener('mousedown', onEvent);
+    openIcon.addEventListener('mouseup', onEvent);
+    openIcon.addEventListener('mousemove', onEvent);
+    openIcon.addEventListener('mouseenter', onEvent);
+    openIcon.addEventListener('mouseleave', onEvent);
+    openIcon.addEventListener('click', (event: MouseEvent) => {
+      onEvent(event);
+      window.InspectorOverlayHost.send({highlightType: 'greenDevFloaty', command: 'openDevTools', nodeId});
+    });
+
+    anchor.addEventListener('mousedown', onEvent);
+    anchor.addEventListener('mouseup', onEvent);
+    anchor.addEventListener('mousemove', onEvent);
+    anchor.addEventListener('mouseenter', onEvent);
+    anchor.addEventListener('mouseleave', onEvent);
+    anchor.addEventListener('click', (event: MouseEvent) => {
+      if (event.target !== anchor && !anchor.contains(event.target as Node)) {
+        return;
+      }
+      onEvent(event);
+      window.InspectorOverlayHost.send({highlightType: 'greenDevFloaty', command: 'restoreFloaty', nodeId});
+    });
+
+    return anchor;
+  }
+}

package/inspector_overlay/tool_persistent.ts

@@ -9,6 +9,7 @@ import {drawLayoutFlexContainerHighlight, type FlexContainerHighlight} from './h
 import {drawLayoutGridHighlight, type GridHighlight} from './highlight_grid_common.js';
 import {drawIsolatedElementHighlight, type IsolatedElementHighlight} from './highlight_isolated_element.js';
 import {drawScrollSnapHighlight, type ScrollSnapHighlight} from './highlight_scroll_snap.js';
+import type {GreenDevAnchorsHighlight, GreenDevAnchorsOverlay} from './tool_green_dev_anchors.js';
 
 export interface PersistentToolMessage {
   highlightType: string;
@@ -65,11 +66,17 @@ export class PersistentOverlay extends Overlay {
     initialHeight: number,
   }>();
   private dragHandler?: DragResizeHandler;
+  private greenDevAnchorsOverlay?: GreenDevAnchorsOverlay;
+
+  setGreenDevAnchorsOverlay(greenDevAnchorsOverlay: GreenDevAnchorsOverlay) {
+    this.greenDevAnchorsOverlay = greenDevAnchorsOverlay;
+  }
 
   override reset(data: ResetData) {
     super.reset(data);
     this.gridLabelState.gridLayerCounter = 0;
     this.gridLabels.innerHTML = '';
+    this.greenDevAnchorsOverlay?.reset(data);
   }
 
   renderGridMarkup() {
@@ -129,6 +136,13 @@ export class PersistentOverlay extends Overlay {
     this.context.restore();
   }
 
+  drawGreenDevFloatyAnchors(highlights: GreenDevAnchorsHighlight[]) {
+    if (this.greenDevAnchorsOverlay && !this.greenDevAnchorsOverlay.installed) {
+      this.greenDevAnchorsOverlay.install();
+    }
+    this.greenDevAnchorsOverlay?.drawGreenDevAnchors(highlights);
+  }
+
   drawIsolatedElementHighlight(highlight: IsolatedElementHighlight) {
     if (!this.dragHandler) {
       this.dragHandler = new DragResizeHandler(this.document, makeDraggableDelegate(this));

package/package.json

@@ -105,5 +105,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1581449"
+  "version": "1.0.1582745"
 }