chrome-devtools-frontend 1.0.1549484 → 1.0.1553956

package/front_end/ui/legacy/Floaty.ts

@@ -0,0 +1,442 @@
+// Copyright 2025 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 Platform from '../../core/platform/platform.js';
+import * as Root from '../../core/root/root.js';
+import * as SDK from '../../core/sdk/sdk.js';
+import type * as Protocol from '../../generated/protocol.js';
+import * as Logs from '../../models/logs/logs.js';
+import * as Trace from '../../models/trace/trace.js';
+import * as Buttons from '../components/buttons/buttons.js';
+import {html, render, type TemplateResult} from '../lit/lit.js';
+
+import {Context} from './Context.js';
+import floatyStyles from './floaty.css.js';
+import {Widget} from './Widget.js';
+
+let instance: Floaty|null = null;
+
+export const enum FloatyContextTypes {
+  ELEMENT_NODE_ID = 'ELEMENT_NODE_ID',
+  NETWORK_REQUEST = 'NETWORK_REQUEST',
+  PERFORMANCE_EVENT = 'PERFORMANCE_EVENT',
+  PERFORMANCE_INSIGHT = 'PERFORMANCE_INSIGHT'
+}
+
+export type FloatyContextSelection = SDK.DOMModel.DOMNode|SDK.NetworkRequest.NetworkRequest|
+                                     {event: Trace.Types.Events.Event, traceStartTime: Trace.Types.Timing.Micro}|
+                                     {insight: Trace.Insights.Types.InsightModel, trace: Trace.TraceModel.ParsedTrace};
+
+const enum State {
+  READONLY = 'readonly',
+  INSPECT_MODE = 'inspect',
+}
+
+export class FloatyFlavor {
+  selectedContexts: FloatyContextSelection[] = [];
+
+  constructor(contexts: Set<FloatyContextSelection>) {
+    this.selectedContexts = Array.from(contexts);
+  }
+}
+
+export class Floaty {
+  static defaultVisibility = false;
+
+  #container: HTMLElement;
+  #floaty: FloatyUI;
+
+  #boundKeyDown = this.#onKeyShortcut.bind(this);
+
+  static exists(): boolean {
+    return instance !== null;
+  }
+
+  static instance(opts: {
+    forceNew: boolean|null,
+    document: Document|null,
+  } = {forceNew: null, document: null}): Floaty {
+    if (instance) {
+      return instance;
+    }
+    if (!opts.document) {
+      throw new Error('document required');
+    }
+    instance = new Floaty(opts.document);
+    return instance;
+  }
+
+  private constructor(document: Document) {
+    // eslint-disable-next-line @devtools/no-imperative-dom-api
+    this.#container = document.createElement('div');
+    this.#container.classList.add('floaty-container');
+    this.#floaty = new FloatyUI();
+    this.#floaty.markAsRoot();
+    this.#insertIntoDOM();
+  }
+
+  #onKeyShortcut(e: KeyboardEvent): void {
+    const origin = e.composedPath().at(0);
+    // If the user was typing into an input field, don't make it trigger the Floaty.
+    if (origin && (origin instanceof HTMLTextAreaElement || origin instanceof HTMLInputElement)) {
+      return;
+    }
+    if (e.key === 'f') {
+      this.open();
+    }
+  }
+
+  #insertIntoDOM(): void {
+    if (Root.Runtime.hostConfig.devToolsGreenDevUi?.enabled) {
+      this.#floaty.show(this.#container);
+      document.body.appendChild(this.#container);
+      document.body.addEventListener('keydown', this.#boundKeyDown);
+    }
+  }
+
+  setDevToolsRect(rect: DOMRect): void {
+    this.#floaty.devtoolsRect = rect;
+  }
+
+  open(): void {
+    this.#floaty.open = true;
+  }
+
+  registerClick(input: Readonly<FloatyClickInput>): void {
+    if (this.#floaty.state !== State.INSPECT_MODE) {
+      return;
+    }
+
+    const type = input.type;  // Switching on type, rather than input.type, means TS narrows it properly.
+    switch (type) {
+      case FloatyContextTypes.ELEMENT_NODE_ID: {
+        const mainTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+        if (!mainTarget) {
+          return;
+        }
+        const domModel = mainTarget.model(SDK.DOMModel.DOMModel);
+        const node = domModel?.nodeForId(input.data.nodeId);
+        if (node) {
+          this.#floaty.addSelectedContext(node);
+        }
+        break;
+      }
+      case FloatyContextTypes.NETWORK_REQUEST: {
+        const networkRequests = Logs.NetworkLog.NetworkLog.instance().requestsForId(input.data.requestId);
+        for (const req of networkRequests) {
+          this.#floaty.addSelectedContext(req);
+        }
+        break;
+      }
+      case FloatyContextTypes.PERFORMANCE_EVENT: {
+        this.#floaty.addSelectedContext(input.data);
+        break;
+      }
+      case FloatyContextTypes.PERFORMANCE_INSIGHT: {
+        this.#floaty.addSelectedContext(input.data);
+        break;
+      }
+      default:
+        Platform.assertNever(type, 'Unsupported Floaty Context type');
+    }
+  }
+
+  inInspectMode(): boolean {
+    return this.#floaty.state === State.INSPECT_MODE;
+  }
+
+  deleteContext(context: FloatyContextSelection): void {
+    this.#floaty.removeSelectedContext(context);
+  }
+}
+
+type FloatyClickInput = {
+  type: FloatyContextTypes.ELEMENT_NODE_ID,
+  data: {nodeId: Protocol.DOM.NodeId},
+}|{
+  type: FloatyContextTypes.NETWORK_REQUEST,
+  data: {requestId: string},
+}|{
+  type: FloatyContextTypes.PERFORMANCE_EVENT,
+  data: {event: Trace.Types.Events.Event, traceStartTime: Trace.Types.Timing.Micro},
+}|{
+  type: FloatyContextTypes.PERFORMANCE_INSIGHT,
+  data: {
+    insight: Trace.Insights.Types.InsightModel,
+    trace: Trace.TraceModel.ParsedTrace,
+  },
+};
+
+export function enabled(): boolean {
+  return Root.Runtime.hostConfig.devToolsGreenDevUi?.enabled === true;
+}
+
+export function onFloatyOpen(): void {
+  if (!enabled()) {
+    return;
+  }
+  Floaty.instance().open();
+}
+
+export function onFloatyContextDelete(context: FloatyContextSelection): void {
+  if (!enabled()) {
+    return;
+  }
+  Floaty.instance().deleteContext(context);
+}
+
+/**
+ * Registers a click to the Floaty.
+ * @returns true if the element was added to the floaty context, and false
+ * otherwise. This lets callers determine if this should override the default
+ * click behaviour.
+ */
+export function onFloatyClick(input: FloatyClickInput): boolean {
+  if (!enabled()) {
+    return false;
+  }
+  const floaty = Floaty.instance();
+  if (floaty.inInspectMode()) {
+    floaty.registerClick(input);
+    return true;
+  }
+  return false;
+}
+
+export class FloatyUI extends Widget {
+  #view: (input: ViewInput, output: null, target: HTMLElement) => void;
+  #dialog: HTMLDialogElement|null = null;
+  #initialMouseX = 0;
+  #initialMouseY = 0;
+  #initialDialogLeft = 0;
+  #initialDialogTop = 0;
+  #devtoolsRect: DOMRect|null = null;
+  #selectedContexts = new Set<FloatyContextSelection>();
+  #open = Floaty.defaultVisibility;
+  #state = State.READONLY;
+
+  constructor(element?: HTMLElement, view = VIEW) {
+    super(element);
+    this.#view = view;
+  }
+
+  get devtoolsRect(): DOMRect|null {
+    return this.#devtoolsRect;
+  }
+
+  get state(): State {
+    return this.#state;
+  }
+
+  set state(x: State) {
+    this.#state = x;
+    this.requestUpdate();
+  }
+
+  set devtoolsRect(rect: DOMRect) {
+    this.#devtoolsRect = rect;
+    this.#repositionWithNewRect(rect);
+    this.requestUpdate();
+  }
+
+  addSelectedContext(context: FloatyContextSelection): void {
+    if (this.#selectedContexts.has(context)) {
+      return;
+    }
+
+    this.#selectedContexts.add(context);
+    Context.instance().setFlavor(FloatyFlavor, new FloatyFlavor(this.#selectedContexts));
+    this.requestUpdate();
+  }
+
+  removeSelectedContext(context: FloatyContextSelection): void {
+    this.#selectedContexts.delete(context);
+    this.#state = State.READONLY;
+    Context.instance().setFlavor(FloatyFlavor, new FloatyFlavor(this.#selectedContexts));
+    this.requestUpdate();
+  }
+
+  get open(): boolean {
+    return this.#open;
+  }
+
+  set open(open: boolean) {
+    this.#open = open;
+    this.requestUpdate();
+  }
+
+  override wasShown(): void {
+    super.wasShown();
+    this.requestUpdate();
+  }
+
+  #repositionWithNewRect(rect: DOMRect): void {
+    if (!this.#dialog) {
+      return;
+    }
+    const computedStyle = window.getComputedStyle(this.#dialog);
+    const currentLeft = parseInt(computedStyle.left, 10);
+    const currentTop = parseInt(computedStyle.top, 10);
+    this.#dialog.style.left = `${Math.max(currentLeft, rect.left)}px`;
+    this.#dialog.style.top = `${Math.max(currentTop, rect.top)}px`;
+  }
+
+  #onInspectClick(): void {
+    if (this.#state === State.INSPECT_MODE) {
+      this.#state = State.READONLY;
+    } else {
+      this.#state = State.INSPECT_MODE;
+    }
+    this.requestUpdate();
+  }
+
+  #onDialogClose(e: PointerEvent): void {
+    e.preventDefault();
+    this.#open = false;
+    this.requestUpdate();
+  }
+
+  #onContextDelete(context: FloatyContextSelection): (e: MouseEvent) => void {
+    return e => {
+      e.preventDefault();
+      this.removeSelectedContext(context);
+    };
+  }
+
+  override performUpdate(): void {
+    this.#view(
+        {
+          open: this.open,
+          onDragStart: this.#onDragStart,
+          selectedContexts: this.#selectedContexts,
+          state: this.#state,
+          onInspectClick: this.#onInspectClick.bind(this),
+          onDialogClose: this.#onDialogClose.bind(this),
+          onContextDelete: this.#onContextDelete.bind(this)
+        },
+        null, this.contentElement);
+    this.#dialog = this.contentElement.querySelector('dialog');
+  }
+
+  #onDragStart = (event: MouseEvent): void => {
+    if (!this.#dialog) {
+      return;
+    }
+    this.#initialMouseX = event.clientX;
+    this.#initialMouseY = event.clientY;
+    const computedStyle = window.getComputedStyle(this.#dialog);
+    this.#initialDialogLeft = parseInt(computedStyle.left, 10);
+    this.#initialDialogTop = parseInt(computedStyle.top, 10);
+
+    document.addEventListener('mousemove', this.#onDrag);
+    document.addEventListener('mouseup', this.#onDragEnd);
+  };
+
+  #onDrag = (event: MouseEvent): void => {
+    if (!this.#dialog) {
+      return;
+    }
+    const deltaX = event.clientX - this.#initialMouseX;
+    const deltaY = event.clientY - this.#initialMouseY;
+
+    const minLeft = this.#devtoolsRect?.left ?? 0;
+    const minTop = this.#devtoolsRect?.top ?? 0;
+    const newLeft = Math.max(minLeft, this.#initialDialogLeft + deltaX);
+    const newTop = Math.max(minTop, this.#initialDialogTop + deltaY);
+    this.#dialog.style.left = `${newLeft}px`;
+    this.#dialog.style.top = `${newTop}px`;
+  };
+
+  #onDragEnd = (): void => {
+    document.removeEventListener('mousemove', this.#onDrag);
+    document.removeEventListener('mouseup', this.#onDragEnd);
+  };
+}
+
+interface ViewInput {
+  onDragStart: (event: MouseEvent) => void;
+  selectedContexts: ReadonlySet<FloatyContextSelection>;
+  open: boolean;
+  state: State;
+  onInspectClick: () => void;
+  onDialogClose: (e: PointerEvent) => void;
+  onContextDelete: (item: FloatyContextSelection) => (e: MouseEvent) => void;
+}
+
+const VIEW = (input: ViewInput, _output: null, target: HTMLElement): void => {
+  const contexts = Array.from(input.selectedContexts);
+  // clang-format off
+  render(html`
+   <style>${floatyStyles}</style>
+   <dialog ?open=${input.open} @mousedown=${input.onDragStart}>
+    <header>
+      <span>DevTools context picker</span>
+      <devtools-button
+        class="close-button"
+        @click=${input.onDialogClose}
+        .data=${{
+          variant: Buttons.Button.Variant.TOOLBAR,
+          iconName: 'cross',
+          title: 'Close',
+          size: Buttons.Button.Size.SMALL,
+        } as Buttons.Button.ButtonData}
+      ></devtools-button>
+    </header>
+    <section class="body">
+      <section class="contexts">
+      ${contexts.length === 0 ? html`
+        <span class="no-context">Select items to add them to the AI agent's context.</span>
+        ` : html`
+        <ul class="floaty-contexts">
+          ${contexts.map(context => {
+            return html`<li>
+            <span class="context-item">
+              ${floatyContextToUI(context)}
+            </span>
+            <devtools-button
+              class="close-button"
+              @click=${input.onContextDelete(context)}
+              .data=${{
+                variant: Buttons.Button.Variant.TOOLBAR,
+                iconName: 'cross',
+                title: 'Delete',
+                size: Buttons.Button.Size.SMALL,
+              } as Buttons.Button.ButtonData}
+            ></devtools-button>
+            </li>`;
+          })}
+        </ul>
+      `}
+      </section>
+      <section class="actions">
+          <devtools-button title="Select" @click=${input.onInspectClick}
+            .active=${input.state === State.INSPECT_MODE}
+            .variant=${Buttons.Button.Variant.TONAL} .iconName=${'select-element'}
+          >Select</devtools-button>
+        </devtools-toolbar>
+      </section>
+    </section>
+   </dialog>`,
+  target);
+  // clang-format on
+};
+
+function floatyContextToUI(context: FloatyContextSelection): TemplateResult {
+  if (context instanceof SDK.NetworkRequest.NetworkRequest) {
+    return html`${context.url()}`;
+  }
+  if (context instanceof SDK.DOMModel.DOMNode) {
+    return html`${context.simpleSelector()}`;
+  }
+  if ('insight' in context) {
+    return html`Insight: ${context.insight.title}`;
+  }
+  if ('event' in context && 'traceStartTime' in context) {
+    const time = Trace.Types.Timing.Micro(context.event.ts - context.traceStartTime);
+    return html`${context.event.name} @ ${i18n.TimeUtilities.formatMicroSecondsAsMillisFixed(time)}`;
+  }
+
+  Platform.assertNever(context, '');
+}

package/front_end/ui/legacy/Infobar.ts

@@ -7,7 +7,7 @@ import type * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
-import * as IconButton from '../components/icon_button/icon_button.js';
+import {createIcon} from '../kit/kit.js';
 
 import * as ARIAUtils from './ARIAUtils.js';
 import infobarStyles from './infobar.css.js';
@@ -55,7 +55,7 @@ export class Infobar {
     this.shadowRoot = createShadowRootWithCoreStyles(this.element, {cssFile: infobarStyles});
 
     this.contentElement = this.shadowRoot.createChild('div', 'infobar infobar-' + type);
-    const icon = IconButton.Icon.create(TYPE_TO_ICON[type], type + '-icon');
+    const icon = createIcon(TYPE_TO_ICON[type], type + '-icon');
     this.contentElement.createChild('div', 'icon-container').appendChild(icon);
 
     this.mainRow = this.contentElement.createChild('div', 'infobar-main-row');
@@ -180,7 +180,7 @@ export class Infobar {
     if (!this.detailsRows) {
       const details = document.createElement('details');
       const summary = details.createChild('summary');
-      const triangleIcon = IconButton.Icon.create('arrow-drop-down');
+      const triangleIcon = createIcon('arrow-drop-down');
       summary.createChild('div', 'icon-container').appendChild(triangleIcon);
       this.contentElement.insertBefore(details, this.mainRow);
       summary.appendChild(this.mainRow);

package/front_end/ui/legacy/InspectorView.ts

@@ -9,7 +9,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
-import * as IconButton from '../components/icon_button/icon_button.js';
+import {createIcon, type Icon} from '../kit/kit.js';
 import * as VisualLogging from '../visual_logging/visual_logging.js';
 
 import type {ActionDelegate as ActionDelegateInterface} from './ActionRegistration.js';
@@ -19,6 +19,7 @@ import type {Context} from './Context.js';
 import type {ContextMenu} from './ContextMenu.js';
 import {Dialog} from './Dialog.js';
 import {DockController, DockState, Events as DockControllerEvents} from './DockController.js';
+import {Floaty} from './Floaty.js';
 import {GlassPane} from './GlassPane.js';
 import {Infobar, Type as InfobarType} from './Infobar.js';
 import {KeyboardShortcut} from './KeyboardShortcut.js';
@@ -359,6 +360,10 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     this.element.style.setProperty('--devtools-window-top', `${rect.top}px`);
     this.element.style.setProperty('--devtools-window-bottom', `${window.innerHeight - rect.bottom}px`);
     this.element.style.setProperty('--devtools-window-height', `${rect.height}px`);
+
+    if (Floaty.exists()) {
+      Floaty.instance().setDevToolsRect(rect);
+    }
   }
 
   override wasShown(): void {
@@ -369,6 +374,13 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     DockController.instance().addEventListener(
         DockControllerEvents.DOCK_SIDE_CHANGED, this.#applyDrawerOrientationForDockSide, this);
     this.#applyDrawerOrientationForDockSide();
+
+    if (Root.Runtime.hostConfig.devToolsGreenDevUi?.enabled) {
+      Floaty.instance({
+        forceNew: true,
+        document: this.element.ownerDocument,
+      });
+    }
   }
 
   override willHide(): void {
@@ -429,10 +441,10 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     // Find the tabbed location where the panel lives
     const tabbedPane = this.getTabbedPaneForTabId(tabId);
     if (tabbedPane) {
-      let icon: IconButton.Icon.Icon|null = null;
+      let icon: Icon|null = null;
       if (warnings.length !== 0) {
         const warning = warnings.length === 1 ? warnings[0] : '· ' + warnings.join('\n· ');
-        icon = IconButton.Icon.create('warning-filled', 'small');
+        icon = createIcon('warning-filled', 'small');
         icon.classList.add('warning');
         Tooltip.install(icon, warning);
       }

package/front_end/ui/legacy/ReportView.ts

@@ -182,7 +182,7 @@ export class Section extends VBox {
     return row.lastElementChild as HTMLElement;
   }
 
-  appendFlexedField(title: string, textValue?: string): Element {
+  appendFlexedField(title: string, textValue?: string): HTMLElement {
     const field = this.appendField(title, textValue);
     field.classList.add('report-field-value-is-flexed');
     return field;

package/front_end/ui/legacy/SearchableView.ts

@@ -41,7 +41,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as Buttons from '../components/buttons/buttons.js';
-import * as IconButton from '../components/icon_button/icon_button.js';
+import {createIcon} from '../kit/kit.js';
 
 import * as ARIAUtils from './ARIAUtils.js';
 import {InspectorView} from './InspectorView.js';
@@ -189,7 +189,7 @@ export class SearchableView extends VBox {
     // Elements within `searchInputElements` are added according to their expected tab order.
     const searchInputElements = this.footerElement.createChild('div', 'search-inputs');
     const iconAndInput = searchInputElements.createChild('div', 'icon-and-input');
-    const searchIcon = IconButton.Icon.create('search');
+    const searchIcon = createIcon('search');
     iconAndInput.appendChild(searchIcon);
 
     this.searchInputElement = createHistoryInput('search', 'search-replace search');

package/front_end/ui/legacy/SelectMenu.docs.ts

@@ -24,7 +24,6 @@ export function render(container: HTMLElement) {
   function onChange(event: Event): void {
     const menu = event.target;
     if (menu instanceof HTMLSelectElement) {
-      // eslint-disable-next-line no-console
       console.log('Option selected: ', menu.value);
     }
   }

package/front_end/ui/legacy/SoftContextMenu.ts

@@ -6,7 +6,7 @@
 
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {createIcon} from '../../ui/kit/kit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import * as ARIAUtils from './ARIAUtils.js';
@@ -218,7 +218,7 @@ export class SoftContextMenu {
 
     // If the menu contains a checkbox, add checkbox space in front of the label to align the items
     if (menuContainsCheckbox) {
-      const checkMarkElement = IconButton.Icon.create('checkmark', 'checkmark');
+      const checkMarkElement = createIcon('checkmark', 'checkmark');
       menuItemElement.appendChild(checkMarkElement);
     }
     if (item.tooltip) {
@@ -293,7 +293,7 @@ export class SoftContextMenu {
     ARIAUtils.setLabel(menuItemElement, accessibleName);
 
     if (item.isExperimentalFeature) {
-      const experimentIcon = IconButton.Icon.create('experiment');
+      const experimentIcon = createIcon('experiment');
       menuItemElement.appendChild(experimentIcon);
     }
 
@@ -317,14 +317,14 @@ export class SoftContextMenu {
 
     // If the menu contains a checkbox, add checkbox space in front of the label to align the items
     if (menuContainsCheckbox) {
-      const checkMarkElement = IconButton.Icon.create('checkmark', 'checkmark soft-context-menu-item-checkmark');
+      const checkMarkElement = createIcon('checkmark', 'checkmark soft-context-menu-item-checkmark');
       menuItemElement.appendChild(checkMarkElement);
     }
 
     createTextChild(menuItemElement, item.label || '');
     ARIAUtils.setExpanded(menuItemElement, false);
 
-    const subMenuArrowElement = IconButton.Icon.create('keyboard-arrow-right', 'soft-context-menu-item-submenu-arrow');
+    const subMenuArrowElement = createIcon('keyboard-arrow-right', 'soft-context-menu-item-submenu-arrow');
     menuItemElement.appendChild(subMenuArrowElement);
 
     menuItemElement.addEventListener('mousedown', this.menuItemMouseDown.bind(this), false);

package/front_end/ui/legacy/SoftDropDown.ts

@@ -6,7 +6,7 @@
 import type * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Geometry from '../../models/geometry/geometry.js';
-import * as IconButton from '../components/icon_button/icon_button.js';
+import {createIcon} from '../kit/kit.js';
 import * as VisualLogging from '../visual_logging/visual_logging.js';
 
 import * as ARIAUtils from './ARIAUtils.js';
@@ -56,7 +56,7 @@ export class SoftDropDown<T> implements ListDelegate<T> {
     this.element.classList.add('soft-dropdown');
     appendStyle(this.element, softDropDownButtonStyles);
     this.titleElement = this.element.createChild('span', 'title');
-    const dropdownArrowIcon = IconButton.Icon.create('triangle-down');
+    const dropdownArrowIcon = createIcon('triangle-down');
     this.element.appendChild(dropdownArrowIcon);
     ARIAUtils.setExpanded(this.element, false);