chrome-devtools-frontend 1.0.1536371 → 1.0.1537860

package/front_end/ui/components/tooltips/Tooltip.docs.ts

@@ -0,0 +1,76 @@
+// 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 Lit from '../../lit/lit.js';
+
+import {Tooltip} from './Tooltip.js';
+
+const {html} = Lit;
+
+export async function render(container: HTMLElement) {
+  Lit.render(
+      html`
+    <div style="position: relative; z-index: 0;">
+      <button aria-describedby="simple-tooltip" style="position: absolute; left: 16px; top: 16px;">
+        Simple
+      </button>
+      <devtools-tooltip id="simple-tooltip">Simple content</devtools-tooltip>
+    </div>
+    <div style="position: relative; z-index: 0;">
+      <span
+        aria-details="rich-tooltip"
+        style="position: absolute; left: 16px; top: 116px; border: 1px solid black;"
+      >
+        Non-button click trigger
+      </span>
+      <devtools-tooltip id="rich-tooltip" variant="rich" use-click>
+        <p>Rich tooltip</p>
+        <button>Action</button>
+      </devtools-tooltip>
+    </div>
+    <div style="position: relative; z-index: 0;">
+      <button
+        id="removable"
+        @click=${() => document.getElementById('removable')?.remove()}
+        class="anchor"
+        aria-details="programatic"
+        style="position: absolute; left: 16px; top: 216px;"
+      >
+        Click to remove anchor
+      </button>
+    </div>
+  `,
+      container);
+
+  const anchor = container.querySelector('.anchor') as HTMLElement;
+  const programmaticTooltip = new Tooltip({id: 'programatic', variant: 'rich', anchor});
+  programmaticTooltip.append('Text content');
+  anchor.insertAdjacentElement('afterend', programmaticTooltip);
+
+  // Make the buttons draggable, so that we can experiment with the position of the tooltip.
+  container.querySelectorAll('button,span').forEach(anchor => draggable(anchor as HTMLElement));
+  function draggable(element: HTMLElement|null): void {
+    if (!element) {
+      return;
+    }
+    element.addEventListener('mousedown', event => {
+      const target = event.target as HTMLElement;
+      const offsetX = event.clientX - target.getBoundingClientRect().left + container.getBoundingClientRect().left;
+      const offsetY = event.clientY - target.getBoundingClientRect().top + container.getBoundingClientRect().top;
+
+      function onMouseMove(event: MouseEvent) {
+        target.style.left = `${event.clientX - offsetX}px`;
+        target.style.top = `${event.clientY - offsetY}px`;
+      }
+
+      function onMouseUp() {
+        document.removeEventListener('mousemove', onMouseMove);
+        document.removeEventListener('mouseup', onMouseUp);
+      }
+
+      document.addEventListener('mousemove', onMouseMove);
+      document.addEventListener('mouseup', onMouseUp);
+    });
+  }
+}

package/front_end/ui/components/tooltips/Tooltip.ts

@@ -443,7 +443,7 @@ export class Tooltip extends HTMLElement {
     this.#previousAnchorRect = anchorRect;
     this.#previousPopoverRect = currentPopoverRect;
 
-    const inspectorViewRect = UI.InspectorView.InspectorView.instance().element.getBoundingClientRect();
+    const inspectorViewRect = UI.UIUtils.getDevToolsBoundingElement().getBoundingClientRect();
     const preferredPositions =
         this.preferSpanLeft ? [PositionOption.BOTTOM_SPAN_LEFT, PositionOption.TOP_SPAN_LEFT] : [];
     const proposedPopoverRect = this.variant === 'rich' ?

package/front_end/ui/legacy/Dialog.ts

@@ -33,7 +33,6 @@ export class Dialog extends Common.ObjectWrapper.eventMixin<EventTypes, typeof G
       this.contentElement.setAttribute(
           'jslog', `${VisualLogging.dialog(jslogContext).track({resize: true, keydown: 'Escape'})}`);
     }
-    this.widget().setDefaultFocusedElement(this.contentElement);
     this.setPointerEventsBehavior(PointerEventsBehavior.BLOCKED_BY_GLASS_PANE);
     this.setOutsideClickCallback(event => {
       // If there are stacked dialogs, we only want to

package/front_end/ui/legacy/FilterBar.ts

@@ -15,11 +15,10 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as ARIAUtils from './ARIAUtils.js';
 import filterStyles from './filter.css.js';
 import {KeyboardShortcut, Modifiers} from './KeyboardShortcut.js';
-import {bindCheckbox} from './SettingsUI.js';
 import type {Suggestions} from './SuggestBox.js';
 import {type ToolbarButton, ToolbarFilter, ToolbarInput, ToolbarSettingToggle} from './Toolbar.js';
 import {Tooltip} from './Tooltip.js';
-import {CheckboxLabel, createTextChild} from './UIUtils.js';
+import {bindCheckbox, CheckboxLabel, createTextChild} from './UIUtils.js';
 import {HBox} from './Widget.js';
 
 const UIStrings = {

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

@@ -0,0 +1,41 @@
+// Copyright 2024 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {UIUtils} from './legacy.js';
+
+export async function render(container: HTMLElement) {
+  const styleElement = document.createElement('style');
+  styleElement.textContent = 'fieldset { label { display: block; } }';
+  container.appendChild(styleElement);
+
+  function radioExample({name, tabbable, disabled}: {
+    name: string,
+    tabbable: boolean,
+    disabled: boolean,
+  }): HTMLElement {
+    const example = document.createElement('fieldset');
+    example.style.marginTop = '20px';
+    const legend = document.createElement('legend');
+    legend.textContent = name;
+    const list = document.createElement('div');
+    for (let i = 0; i < 3; ++i) {
+      const {label, radio} = UIUtils.createRadioButton(name, `Option #${i + 1}`, name);
+      radio.tabIndex = tabbable ? 0 : -1;
+      radio.disabled = disabled;
+      radio.checked = i === 0;
+      list.append(label);
+    }
+    example.append(legend, list);
+    return example;
+  }
+
+  // Basic
+  container.appendChild(radioExample({name: 'basic', tabbable: true, disabled: false}));
+
+  // Not tab reachable
+  container.appendChild(radioExample({name: 'not-table-reachable', tabbable: false, disabled: false}));
+
+  // Disabled
+  container.appendChild(radioExample({name: 'disabled', tabbable: true, disabled: true}));
+}

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

@@ -0,0 +1,98 @@
+// Copyright 2023 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 Lit from '../lit/lit.js';
+import * as VisualLogging from '../visual_logging/visual_logging.js';
+
+import {UIUtils} from './legacy.js';
+
+const {html} = Lit;
+
+export async function render(container: HTMLElement) {
+  function createDivWithP(text: string): HTMLDivElement {
+    const div = document.createElement('div');
+    div.style.paddingLeft = '25px';
+    const p = document.createElement('p');
+    p.style.marginLeft = '-25px';
+    p.textContent = text;
+    div.appendChild(p);
+    container.appendChild(div);
+    return div;
+  }
+
+  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);
+    }
+  }
+
+  {
+    const simpleMenuHTML = createDivWithP('Simple item select with lit-html');
+    Lit.render(
+        html`<select id="menu" aria-label="Select an option"
+                @change=${onChange}>
+        <option hidden>Select an option</option>
+        <option id="option-1" jslog=${VisualLogging.item('option-1').track({
+          click: true
+        })}
+                value="Option1">Option 1</option>
+        <option jslog=${VisualLogging.item('option-2').track({
+          click: true
+        })}
+                value="Option2">Option 2</option>
+        <option disabled jslog=${VisualLogging.item('option-3').track({
+          click: true
+        })}
+                value="Option3">Option 3</option>
+      </select>`,
+        simpleMenuHTML);
+  }
+
+  {
+    const groupMenuHTML = createDivWithP('Select with groups with lit-html');
+    Lit.render(
+        html`<select aria-label="Select an option"
+                  @change=${onChange}>
+        <optgroup label="Group 1">
+          <option jslog=${VisualLogging.item('option-1').track({
+          click: true
+        })}
+          value="Option1">Option 1</option>
+        </optgroup>
+        <optgroup label="Group 2">
+          <option jslog=${VisualLogging.item('option-2').track({
+          click: true
+        })}
+          value="Option2">Option 2</option>
+          <option jslog=${VisualLogging.item('option-3').track({
+          click: true
+        })}
+          value="Option3">Option 3</option>
+        </optgroup>
+      </select>`,
+        groupMenuHTML);
+  }
+
+  {
+    const simpleMenuImperative = createDivWithP('Simple item select with imperative API');
+    const simpleSelect = UIUtils.createSelect('Select an option', [
+      'Option 1',
+      'Option 2',
+      'Option 3',
+    ]);
+    simpleSelect.addEventListener('change', event => onChange(event));
+    simpleMenuImperative.appendChild(simpleSelect);
+  }
+
+  {
+    const groupMenuImperative = createDivWithP('Select with groups with imperative API');
+    const group1 = new Map<string, string[]>([['Group 1', ['Option 1']]]);
+    const group2 = new Map<string, string[]>([['Group 2', ['Option 2', 'Option 3']]]);
+    const groupSelect = UIUtils.createSelect('Select an option', [group1, group2]);
+    groupSelect.addEventListener('change', event => onChange(event));
+    groupMenuImperative.appendChild(groupSelect);
+  }
+}

package/front_end/ui/legacy/Toolbar.ts

@@ -10,7 +10,6 @@ import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
-import type * as Adorners from '../components/adorners/adorners.js';
 import * as IconButton from '../components/icon_button/icon_button.js';
 
 import {type Action, Events as ActionEvents} from './ActionRegistration.js';
@@ -18,12 +17,11 @@ import {ActionRegistry} from './ActionRegistry.js';
 import * as ARIAUtils from './ARIAUtils.js';
 import {ContextMenu} from './ContextMenu.js';
 import {GlassPane, PointerEventsBehavior} from './GlassPane.js';
-import {bindCheckbox} from './SettingsUI.js';
 import type {Suggestion} from './SuggestBox.js';
 import {Events as TextPromptEvents, TextPrompt} from './TextPrompt.js';
 import toolbarStyles from './toolbar.css.js';
 import {Tooltip} from './Tooltip.js';
-import {CheckboxLabel, LongClickController} from './UIUtils.js';
+import {bindCheckbox, CheckboxLabel, LongClickController} from './UIUtils.js';
 
 const UIStrings = {
   /**
@@ -643,7 +641,7 @@ export class ToolbarButton extends ToolbarItem<ToolbarButton.EventTypes, Buttons
     this.text = text;
   }
 
-  setAdorner(adorner: Adorners.Adorner.Adorner): void {
+  setAdorner(adorner: HTMLElement): void {
     if (this.adorner) {
       this.adorner.replaceWith(adorner);
     } else {
@@ -971,7 +969,7 @@ export class ToolbarMenuButton extends ToolbarItem<ToolbarButton.EventTypes> {
   private textElement?: HTMLElement;
   private text?: string;
   private iconName?: string;
-  private adorner?: Adorners.Adorner.Adorner;
+  private adorner?: HTMLElement;
   private readonly contextMenuHandler: (arg0: ContextMenu) => void;
   private readonly useSoftMenu: boolean;
   private readonly keepOpen: boolean;
@@ -1028,7 +1026,7 @@ export class ToolbarMenuButton extends ToolbarItem<ToolbarButton.EventTypes> {
     this.text = text;
   }
 
-  setAdorner(adorner: Adorners.Adorner.Adorner): void {
+  setAdorner(adorner: HTMLElement): void {
     if (this.iconName) {
       return;
     }

package/front_end/ui/legacy/UIUtils.ts

@@ -36,7 +36,7 @@
 
 import './Toolbar.js';
 
-import type * as Common from '../../core/common/common.js';
+import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
@@ -2353,3 +2353,116 @@ export function copyTextToClipboard(text: string, alert?: string): void {
 export function getDevToolsBoundingElement(): HTMLElement {
   return InspectorView.maybeGetInspectorViewInstance()?.element || document.body;
 }
+
+/**
+ * @deprecated Prefer {@link bindToSetting} as this function leaks the checkbox via the setting listener.
+ */
+export const bindCheckbox = function(
+    input: CheckboxLabel, setting: Common.Settings.Setting<boolean>, metric?: UserMetricOptions): void {
+  const setValue = bindCheckboxImpl(input, setting.set.bind(setting), metric);
+  setting.addChangeListener(event => setValue(event.data));
+  setValue(setting.get());
+};
+
+export const bindCheckboxImpl = function(
+    input: CheckboxLabel, apply: (value: boolean) => void, metric?: UserMetricOptions): (value: boolean) => void {
+  input.addEventListener('change', onInputChanged, false);
+
+  function onInputChanged(): void {
+    apply(input.checked);
+
+    if (input.checked && metric?.enable) {
+      Host.userMetrics.actionTaken(metric.enable);
+    }
+
+    if (!input.checked && metric?.disable) {
+      Host.userMetrics.actionTaken(metric.disable);
+    }
+
+    if (metric?.toggle) {
+      Host.userMetrics.actionTaken(metric.toggle);
+    }
+  }
+
+  return function setValue(value: boolean): void {
+    if (value !== input.checked) {
+      input.checked = value;
+    }
+  };
+};
+
+export const bindToSetting =
+    (settingOrName: string|Common.Settings.Setting<boolean|string>|Common.Settings.RegExpSetting,
+     stringValidator?: (newSettingValue: string) => boolean): ReturnType<typeof Directives.ref> => {
+      const setting = typeof settingOrName === 'string' ?
+          Common.Settings.Settings.instance().moduleSetting(settingOrName) :
+          settingOrName;
+
+      // We can't use `setValue` as the change listener directly, otherwise we won't
+      // be able to remove it again.
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      let setValue: (value: any) => void;
+      function settingChanged(): void {
+        setValue(setting.get());
+      }
+
+      if (setting.type() === Common.Settings.SettingType.BOOLEAN || typeof setting.defaultValue === 'boolean') {
+        return Directives.ref(e => {
+          if (e === undefined) {
+            setting.removeChangeListener(settingChanged);
+            return;
+          }
+
+          setting.addChangeListener(settingChanged);
+          setValue =
+              bindCheckboxImpl(e as CheckboxLabel, (setting as Common.Settings.Setting<boolean>).set.bind(setting));
+          setValue(setting.get());
+        });
+      }
+
+      if (setting.type() === Common.Settings.SettingType.REGEX || setting instanceof Common.Settings.RegExpSetting) {
+        return Directives.ref(e => {
+          if (e === undefined) {
+            setting.removeChangeListener(settingChanged);
+            return;
+          }
+
+          setting.addChangeListener(settingChanged);
+          setValue = bindInput(e as HTMLInputElement, setting.set.bind(setting), (value: string) => {
+            try {
+              new RegExp(value);
+              return true;
+            } catch {
+              return false;
+            }
+          }, /* numeric */ false);
+          setValue(setting.get());
+        });
+      }
+
+      if (typeof setting.defaultValue === 'string') {
+        return Directives.ref(e => {
+          if (e === undefined) {
+            setting.removeChangeListener(settingChanged);
+            return;
+          }
+
+          setting.addChangeListener(settingChanged);
+          setValue = bindInput(
+              e as HTMLInputElement, setting.set.bind(setting), stringValidator ?? (() => true), /* numeric */ false);
+          setValue(setting.get());
+        });
+      }
+
+      throw new Error(`Cannot infer type for setting  '${setting.name}'`);
+    };
+
+/**
+ * Track toggle action as a whole or
+ * track on and off action separately.
+ */
+export interface UserMetricOptions {
+  toggle?: Host.UserMetrics.Action;
+  enable?: Host.UserMetrics.Action;
+  disable?: Host.UserMetrics.Action;
+}

package/front_end/ui/legacy/Widget.ts

@@ -68,6 +68,64 @@ export function widgetConfig<F extends WidgetFactory<Widget>, ParamKeys extends
   return new WidgetConfig(widgetClass, widgetParams);
 }
 
+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;
+
+function enqueueIntoNextUpdateQueue(widget: Widget): Promise<void> {
+  const scheduledUpdate = nextUpdateQueue.get(widget) ?? Promise.withResolvers<void>();
+  nextUpdateQueue.delete(widget);
+  nextUpdateQueue.set(widget, scheduledUpdate);
+  if (pendingAnimationFrame === null) {
+    pendingAnimationFrame = requestAnimationFrame(runNextUpdate);
+  }
+  return scheduledUpdate.promise;
+}
+
+function enqueueWidgetUpdate(widget: Widget): Promise<void> {
+  if (currentUpdateQueue) {
+    if (currentlyProcessed.has(widget)) {
+      return enqueueIntoNextUpdateQueue(widget);
+    }
+    const scheduledUpdate = currentUpdateQueue.get(widget) ?? Promise.withResolvers<void>();
+    currentUpdateQueue.delete(widget);
+    currentUpdateQueue.set(widget, scheduledUpdate);
+    return scheduledUpdate.promise;
+  }
+  return enqueueIntoNextUpdateQueue(widget);
+}
+
+function cancelUpdate(widget: Widget): void {
+  if (currentUpdateQueue) {
+    const scheduledUpdate = currentUpdateQueue.get(widget);
+    if (scheduledUpdate) {
+      scheduledUpdate.resolve();
+      currentUpdateQueue.delete(widget);
+    }
+  }
+  const scheduledUpdate = nextUpdateQueue.get(widget);
+  if (scheduledUpdate) {
+    scheduledUpdate.resolve();
+    nextUpdateQueue.delete(widget);
+  }
+}
+
+function runNextUpdate(): void {
+  pendingAnimationFrame = null;
+  currentUpdateQueue = nextUpdateQueue;
+  nextUpdateQueue = new Map();
+  for (const [widget, {resolve}] of currentUpdateQueue) {
+    currentlyProcessed.add(widget);
+    void (async () => {
+      await widget.performUpdate();
+      resolve();
+    })();
+  }
+  currentUpdateQueue = null;
+  currentlyProcessed.clear();
+}
+
 export class WidgetElement<WidgetT extends Widget> extends HTMLElement {
   #widgetClass?: WidgetFactory<WidgetT>;
   #widgetParams?: Partial<WidgetT>;
@@ -218,8 +276,7 @@ function decrementWidgetCounter(parentElement: Element, childElement: Element):
 // The resolved `updateComplete` promise, which is used as a marker for the
 // Widget's `#updateComplete` private property to indicate that there's no
 // pending update.
-const UPDATE_COMPLETE = Promise.resolve(true);
-const UPDATE_COMPLETE_RESOLVE = (_result: boolean): void => {};
+const UPDATE_COMPLETE = Promise.resolve();
 
 /**
  * Additional options passed to the `Widget` constructor to configure the
@@ -277,8 +334,6 @@ export class Widget {
   #invalidationsRequested?: boolean;
   #externallyManaged?: boolean;
   #updateComplete = UPDATE_COMPLETE;
-  #updateCompleteResolve = UPDATE_COMPLETE_RESOLVE;
-  #updateRequestID = 0;
 
   /**
    * Constructs a new `Widget` with the given `options`.
@@ -617,14 +672,7 @@ export class Widget {
       return;
     }
 
-    // Cancel any pending update.
-    if (this.#updateRequestID !== 0) {
-      cancelAnimationFrame(this.#updateRequestID);
-      this.#updateCompleteResolve(true);
-      this.#updateCompleteResolve = UPDATE_COMPLETE_RESOLVE;
-      this.#updateComplete = UPDATE_COMPLETE;
-      this.#updateRequestID = 0;
-    }
+    cancelUpdate(this);
 
     // hideOnDetach means that we should never remove element from dom - content
     // has iframes and detaching it will hurt.
@@ -876,21 +924,6 @@ export class Widget {
   performUpdate(): Promise<void>|void {
   }
 
-  async #performUpdateCallback(): Promise<boolean> {
-    // Mark this update cycle as complete by assigning
-    // the marker sentinel.
-    this.#updateComplete = UPDATE_COMPLETE;
-    this.#updateCompleteResolve = UPDATE_COMPLETE_RESOLVE;
-    this.#updateRequestID = 0;
-
-    // Run the actual update logic.
-    await this.performUpdate();
-
-    // Resolve the `updateComplete` with `true` if no
-    // new update was triggered during this cycle.
-    return this.#updateComplete === UPDATE_COMPLETE;
-  }
-
   /**
    * Schedules an asynchronous update for this widget.
    *
@@ -898,12 +931,7 @@ export class Widget {
    * frame.
    */
   requestUpdate(): void {
-    if (this.#updateComplete === UPDATE_COMPLETE) {
-      this.#updateComplete = new Promise((resolve, reject) => {
-        this.#updateCompleteResolve = resolve;
-        this.#updateRequestID = requestAnimationFrame(() => this.#performUpdateCallback().then(resolve, reject));
-      });
-    }
+    this.#updateComplete = enqueueWidgetUpdate(this);
   }
 
   /**
@@ -931,7 +959,7 @@ export class Widget {
    *          updating, the value is `true` if there are no more pending updates,
    *          and `false` if the update cycle triggered another update.
    */
-  get updateComplete(): Promise<boolean> {
+  get updateComplete(): Promise<void> {
     return this.#updateComplete;
   }
 }

package/front_end/ui/legacy/XLink.ts

@@ -4,7 +4,6 @@
 
 import * as Host from '../../core/host/host.js';
 import * as Platform from '../../core/platform/platform.js';
-import {html} from '../lit/lit.js';
 import * as VisualLogging from '../visual_logging/visual_logging.js';
 
 import * as ARIAUtils from './ARIAUtils.js';
@@ -155,5 +154,3 @@ export class ContextMenuProvider implements Provider<Node> {
 }
 
 customElements.define('x-link', XLink);
-
-export const sample = html`<p>Hello, <x-link>world!</x-link></p>`;

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

@@ -372,6 +372,15 @@ class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate {
       this.#updateColumns();
     }
     this.#updateCreationNode();
+
+    const hadAddedNodes = mutationList.some(m => m.addedNodes.length > 0);
+    // If we got an update, and the data grid is sorted, we need to update the
+    // columns to maintain the sort order as the data within has changed.
+    // However, if we have nodes added, that will trigger a sort anyway so we
+    // don't need to re-sort again.
+    if (this.#dataGrid.sortColumnId() !== null && !hadAddedNodes) {
+      this.#dataGrid.dispatchEventToListeners(DataGridEvents.SORTING_CHANGED);
+    }
   }
 
   #editCallback(