chrome-devtools-frontend 1.0.1579812 → 1.0.1581708

package/front_end/ui/components/suggestion_input/SuggestionInput.ts

@@ -217,16 +217,21 @@ class SuggestionBox extends LitElement {
       return;
     }
 
-    // clang-format off
     return html`<style>${contentEditableStyles}</style><ul class="suggestions">
-      ${this.#suggestions.map((suggestion, index) => html`
-        <li class=${classMap({selected: index === this.cursor})}
-            @mousedown=${this.#dispatchSuggestEvent.bind(this, suggestion)}
-            jslog=${VisualLogging.item('suggestion').track({ click: true, resize: true })}>
+      ${this.#suggestions.map((suggestion, index) => {
+      return html`<li
+          class=${classMap({
+        selected: index === this.cursor,
+      })}
+          @mousedown=${this.#dispatchSuggestEvent.bind(this, suggestion)}
+          jslog=${VisualLogging.item('suggestion').track({
+        click: true,
+      })}
+        >
           ${suggestion}
-        </li>`)}
+        </li>`;
+    })}
     </ul>`;
-    // clang-format on
   }
 }
 

package/front_end/ui/components/text_editor/AutocompleteHistory.ts

@@ -107,10 +107,11 @@ export class AutocompleteHistory {
     }
   }
 
-  next(): string|undefined {
+  next(currentText: string): string|undefined {
     if (this.#historyOffset === 1) {
       return undefined;
     }
+    this.#saveCurrentEdit(currentText);
     --this.#historyOffset;
     return this.#currentHistoryItem();
   }

package/front_end/ui/components/text_editor/TextEditorHistory.ts

@@ -48,7 +48,7 @@ export class TextEditorHistory {
 
     const text = editor.state.doc.toString();
     const history = this.#history;
-    const newText = isBackward ? history.previous(text) : history.next();
+    const newText = isBackward ? history.previous(text) : history.next(text);
     if (newText === undefined) {
       return false;
     }

package/front_end/ui/components/tree_outline/TreeOutline.ts

@@ -475,7 +475,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
         aria-level=${depth + 1}
         aria-posinset=${positionInSet + 1}
         class=${listItemClasses}
-        jslog=${VisualLogging.treeItem(node.jslogContext).track({click: true, resize: true, keydown: 'ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Enter|Space|Home|End'})}
+        jslog=${VisualLogging.treeItem(node.jslogContext).track({click: true, keydown: 'ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Enter|Space|Home|End'})}
         @click=${this.#onNodeClick}
         track-dom-node-to-tree-node=${trackDOMNodeToTreeNode(this.#domNodeToTreeNodeMap, node)}
         ${Lit.Directives.ref(domNode => {

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);
@@ -365,7 +391,7 @@ export class ListControl<T> {
       if (!element.hasAttribute('jslog')) {
         element.setAttribute(
             'jslog',
-            `${VisualLogging.item().track({click: true, resize: true, keydown: 'ArrowUp|ArrowDown|PageUp|PageDown'})}`);
+            `${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/ListWidget.ts

@@ -150,7 +150,7 @@ export class ListWidget<T> extends VBox {
     }
     const content = this.delegate.renderItem(item, editable, this.#items.length - 1);
     if (!content.hasAttribute('jslog')) {
-      element.setAttribute('jslog', `${VisualLogging.item().track({resize: true})}`);
+      element.setAttribute('jslog', `${VisualLogging.item()}`);
     }
     element.appendChild(content);
     if (editable) {

package/front_end/ui/legacy/SearchableView.ts

@@ -502,8 +502,10 @@ export class SearchableView extends VBox {
   private updateSearchNavigationButtonState(enabled: boolean): void {
     this.replaceButtonElement.disabled = !enabled;
     this.replaceAllButtonElement.disabled = !enabled;
-    this.searchNavigationPrevElement.setEnabled(enabled);
-    this.searchNavigationNextElement.setEnabled(enabled);
+    if (this.searchProvider.supportsMatchCounts?.() === true) {
+      this.searchNavigationPrevElement.setEnabled(enabled);
+      this.searchNavigationNextElement.setEnabled(enabled);
+    }
   }
 
   private updateSearchMatchesCountAndCurrentMatchIndex(matches: number, currentMatchIndex: number): void {
@@ -682,6 +684,7 @@ export class SearchableView extends VBox {
 const searchableViewsByElement = new WeakMap<Element, SearchableView>();
 
 export interface Searchable {
+  supportsMatchCounts?(): boolean;
   currentQuery?: string;
   currentSearchMatches?: number;
   onSearchCanceled(): void;

package/front_end/ui/legacy/SoftContextMenu.ts

@@ -335,8 +335,7 @@ export class SoftContextMenu {
     menuItemElement.addEventListener('mouseleave', (this.menuItemMouseLeave.bind(this) as EventListener), false);
 
     if (item.jslogContext) {
-      menuItemElement.setAttribute(
-          'jslog', `${VisualLogging.item(item.jslogContext).track({click: true, resize: true})}`);
+      menuItemElement.setAttribute('jslog', `${VisualLogging.item().context(item.jslogContext)}`);
     }
     return menuItemElement;
   }

package/front_end/ui/legacy/Treeoutline.ts

@@ -499,7 +499,6 @@ export class TreeElement {
     this.listItemNode.setAttribute(
         'jslog', `${VisualLogging.treeItem().parent('parentTreeItem').context(jslogContext).track({
           click: true,
-          resize: true,
           keydown: 'ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Backspace|Delete|Enter|Space|Home|End',
         })}`);
     ARIAUtils.markAsTreeitem(this.listItemNode);
@@ -1567,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') {

package/front_end/ui/legacy/UIUtils.ts

@@ -1970,6 +1970,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 +1991,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 +2039,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;
   }

package/front_end/ui/legacy/Widget.ts

@@ -73,6 +73,7 @@ let currentUpdateQueue: Map<Widget, PromiseWithResolvers<void>>|null = null;
 const currentlyProcessed = new Set<Widget>();
 let nextUpdateQueue = new Map<Widget, PromiseWithResolvers<void>>();
 let pendingAnimationFrame: number|null = null;
+let overallUpdatePromise: PromiseWithResolvers<void>|null = null;
 
 function enqueueIntoNextUpdateQueue(widget: Widget): Promise<void> {
   const scheduledUpdate = nextUpdateQueue.get(widget) ?? Promise.withResolvers<void>();
@@ -132,6 +133,10 @@ function runNextUpdate(): void {
     } else {
       currentUpdateQueue = null;
       currentlyProcessed.clear();
+      if (!pendingAnimationFrame && overallUpdatePromise) {
+        overallUpdatePromise.resolve();
+        overallUpdatePromise = null;
+      }
     }
   });
 }
@@ -414,6 +419,16 @@ export class Widget {
     return widgetMap.get(node);
   }
 
+  static get allUpdatesComplete(): Promise<void> {
+    if (!pendingAnimationFrame && !currentUpdateQueue) {
+      return Promise.resolve();
+    }
+    if (!overallUpdatePromise) {
+      overallUpdatePromise = Promise.withResolvers<void>();
+    }
+    return overallUpdatePromise.promise;
+  }
+
   static getOrCreateWidget(element: HTMLElement): Widget {
     const widget = Widget.get(element);
     if (widget) {

package/front_end/ui/legacy/components/data_grid/DataGrid.ts

@@ -1679,6 +1679,8 @@ export const enum Events {
   OPENED_NODE = 'OpenedNode',
   SORTING_CHANGED = 'SortingChanged',
   PADDING_CHANGED = 'PaddingChanged',
+  EXPANDED_NODE = 'ExpandedNode',
+  COLLAPSED_NODE = 'CollapsedNode',
 }
 
 export interface EventTypes<T> {
@@ -1687,6 +1689,8 @@ export interface EventTypes<T> {
   [Events.OPENED_NODE]: DataGridNode<T>;
   [Events.SORTING_CHANGED]: void;
   [Events.PADDING_CHANGED]: void;
+  [Events.EXPANDED_NODE]: DataGridNode<T>;
+  [Events.COLLAPSED_NODE]: DataGridNode<T>;
 }
 
 export enum Order {
@@ -1762,10 +1766,8 @@ export class DataGridNode<T> {
 
   protected createElement(): HTMLElement {
     this.elementInternal = document.createElement('tr');
-    this.elementInternal.setAttribute('jslog', `${VisualLogging.tableRow().track({
-                                        resize: true,
-                                        keydown: 'ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Enter|Space'
-                                      })}`);
+    this.elementInternal.setAttribute(
+        'jslog', `${VisualLogging.tableRow().track({keydown: 'ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Enter|Space'})}`);
     this.elementInternal.classList.add('data-grid-data-grid-node');
     if (this.dataGrid) {
       this.dataGrid.elementToDataGridNode.set(this.elementInternal, this);
@@ -2229,6 +2231,7 @@ export class DataGridNode<T> {
     for (let i = 0; i < this.children.length; ++i) {
       this.children[i].revealed = false;
     }
+    this.dataGrid?.dispatchEventToListeners(Events.COLLAPSED_NODE, this);
   }
 
   collapseRecursively(): void {
@@ -2286,6 +2289,7 @@ export class DataGridNode<T> {
     }
 
     this.expandedInternal = true;
+    this.dataGrid?.dispatchEventToListeners(Events.EXPANDED_NODE, this);
   }
 
   expandRecursively(): void {

package/front_end/ui/legacy/components/data_grid/DataGridElement.ts

@@ -5,6 +5,7 @@
 
 import type * as Platform from '../../../../core/platform/platform.js';
 import type * as TextUtils from '../../../../models/text_utils/text_utils.js';
+import * as Lit from '../../../lit/lit.js';
 import * as UI from '../../legacy.js';
 
 import dataGridStyles from './dataGrid.css.js';
@@ -81,6 +82,12 @@ class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate {
     this.#dataGrid.addEventListener(
         DataGridEvents.OPENED_NODE,
         e => (e.data as DataGridElementNode).configElement.dispatchEvent(new CustomEvent('open')));
+    this.#dataGrid.addEventListener(
+        DataGridEvents.EXPANDED_NODE,
+        e => (e.data as DataGridElementNode).configElement.dispatchEvent(new CustomEvent('expand')));
+    this.#dataGrid.addEventListener(
+        DataGridEvents.COLLAPSED_NODE,
+        e => (e.data as DataGridElementNode).configElement.dispatchEvent(new CustomEvent('collapse')));
     this.#dataGrid.addEventListener(DataGridEvents.SORTING_CHANGED, () => this.dispatchEvent(new CustomEvent('sort', {
       detail: {columnId: this.#dataGrid.sortColumnId(), ascending: this.#dataGrid.isSortOrderAscending()}
     })));
@@ -170,6 +177,14 @@ class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate {
     return this.#columns;
   }
 
+  #updateHasChildren(dataGridNode: DataGridElementNode, dataRow: Element): void {
+    let hasChildren = dataGridNode.children.length > 0;
+    if (!hasChildren) {
+      hasChildren = Boolean(dataRow.querySelector('td table'));
+    }
+    dataGridNode.setHasChildren(hasChildren);
+  }
+
   #updateColumns(): void {
     for (const column of Object.keys(this.#dataGrid.columns)) {
       this.#dataGrid.removeColumn(column);
@@ -292,6 +307,7 @@ class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate {
       const nextNode = this.#findNextExistingNode(element);
       const index = nextNode ? parentNode.children.indexOf(nextNode) : parentNode.children.length;
       const node = new DataGridElementNode(element, this);
+      this.#updateHasChildren(node, element);
       if ((parentRow || node.hasChildren()) && !this.#dataGrid.disclosureColumnId) {
         this.#dataGrid.disclosureColumnId = this.#columns[0].id;
       }
@@ -319,7 +335,7 @@ class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate {
     for (const element of this.#getDataRows(nodes)) {
       const node = DataGridElementNode.get(element);
       if (node) {
-        node.remove();
+        DataGridElementNode.remove(node);
       }
     }
   }
@@ -344,6 +360,7 @@ class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate {
       } else if (attributeName === 'highlighted') {
         dataGridNode.setHighlighted(hasBooleanAttribute(dataRow, 'highlighted'));
       } else {
+        this.#updateHasChildren(dataGridNode, dataRow);
         dataGridNode.refresh();
       }
     }
@@ -591,3 +608,35 @@ export interface DataGridInternalToken {
 const INTERNAL_TOKEN: DataGridInternalToken = {
   token: 'DataGridInternalToken'
 };
+
+export const ifExpanded = Lit.Directive.directive(class extends Lit.Directive.Directive {
+  #partInfo: {type: Lit.Directive.PartType, startNode: Node};
+  constructor(partInfo: Lit.Directive.PartInfo) {
+    if (partInfo.type !== Lit.Directive.PartType.CHILD) {
+      throw new Error('expand directive must be used in a child node');
+    }
+    super(partInfo);
+    this.#partInfo = partInfo as {type: Lit.Directive.PartType, startNode: Node};
+  }
+
+  render(content: () => Lit.TemplateResult): Lit.LitTemplate {
+    return this.#isInExpandedRow(this.#partInfo.startNode) ? content() : Lit.nothing;
+  }
+
+  #isInExpandedRow(element: Node|null|undefined): boolean {
+    if (!element) {
+      return false;
+    }
+    if (!(element instanceof HTMLElement)) {
+      element = element.parentNode;
+    }
+    if (!(element instanceof HTMLElement)) {
+      return false;
+    }
+    const node = DataGridElementNode.get(element.closest('tr') ?? undefined);
+    if (!node) {
+      return false;
+    }
+    return node.expanded;
+  }
+});

package/front_end/ui/legacy/components/data_grid/ViewportDataGrid.ts

@@ -7,7 +7,7 @@ import * as Platform from '../../../../core/platform/platform.js';
 import type * as TextUtils from '../../../../models/text_utils/text_utils.js';
 import * as RenderCoordinator from '../../../components/render_coordinator/render_coordinator.js';
 
-import {type DataGridData, DataGridImpl, DataGridNode, type Parameters} from './DataGrid.js';
+import {type DataGridData, DataGridImpl, DataGridNode, Events as DataGridEvents, type Parameters} from './DataGrid.js';
 
 let nextId = 0;
 
@@ -492,6 +492,7 @@ export class ViewportDataGridNode<T> extends DataGridNode<ViewportDataGridNode<T
       (this.dataGrid as ViewportDataGrid<T>).announceSelectedGridNode();
     }
     (this.dataGrid as ViewportDataGrid<T>).scheduleUpdateStructure();
+    this.dataGrid?.dispatchEventToListeners(DataGridEvents.COLLAPSED_NODE, this);
   }
 
   override expand(): void {

package/front_end/ui/legacy/components/data_grid/data_grid.ts

@@ -13,4 +13,5 @@ import * as ShowMoreDataGridNode from './ShowMoreDataGridNode.js';
 import * as SortableDataGrid from './SortableDataGrid.js';
 import * as ViewportDataGrid from './ViewportDataGrid.js';
 
+export {ifExpanded} from './DataGridElement.js';
 export {DataGrid, ShowMoreDataGridNode, SortableDataGrid, ViewportDataGrid};

package/front_end/ui/legacy/components/quick_open/FilteredListWidget.ts

@@ -280,7 +280,7 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
     if (this.provider) {
       render(this.provider.renderItem(item, this.cleanValue()), wrapperElement);
       wrapperElement.setAttribute(
-          'jslog', `${VisualLogging.item(this.provider.jslogContextAt(item)).track({click: true, resize: true})}`);
+          'jslog', `${VisualLogging.item(this.provider.jslogContextAt(item)).track({click: true})}`);
     }
     UI.ARIAUtils.markAsOption(wrapperElement);
     return wrapperElement;

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

@@ -353,8 +353,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 +405,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/visual_logging/KnownContextValues.ts

@@ -923,6 +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',
@@ -1770,6 +1778,7 @@ export const knownContextValues = new Set([
   'gotpointercapture',
   'grace-period-link',
   'grace-period-mitigation-disabled',
+  'greendev',
   'greendev-ai-annotations-enabled',
   'greendev-artifact-viewer-enabled',
   'greendev-copy-to-gemini-enabled',
@@ -2515,6 +2524,7 @@ export const knownContextValues = new Set([
   'margin-left',
   'margin-right',
   'margin-top',
+  'margin-trim',
   'marker',
   'marker-end',
   'marker-mid',
@@ -3261,6 +3271,7 @@ export const knownContextValues = new Set([
   'rule-inset',
   'rule-interior-inset',
   'rule-outset',
+  'rule-overlap',
   'rule-set',
   'rule-set-details',
   'rule-style',
@@ -3689,6 +3700,7 @@ export const knownContextValues = new Set([
   'start-conversation-drjones-performance',
   'start-conversation-freestyler',
   'start-conversation-performance-insight',
+  'start-conversation-performance-none',
   'start-new-chat',
   'start-recording',
   'start-time',
@@ -3894,6 +3906,9 @@ export const knownContextValues = new Set([
   'timeline-tree-current-thread',
   'timeline-tree-group-by',
   'timeline-trigger',
+  'timeline-trigger-activation-range',
+  'timeline-trigger-activation-range-end',
+  'timeline-trigger-activation-range-start',
   'timeline-trigger-active-range',
   'timeline-trigger-active-range-end',
   'timeline-trigger-active-range-start',

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;
+}