chrome-devtools-frontend 1.0.1537268 → 1.0.1538310

package/front_end/ui/components/buttons/Button.docs.ts

@@ -0,0 +1,195 @@
+// Copyright 2021 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {Button, FloatingButton} from './buttons.js';
+
+export async function render(container: HTMLElement) {
+  const style = document.createElement('style');
+  style.textContent = `
+      #container > div {
+        width: 80%;
+        padding: var(--sys-size-11);
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: var(--sys-size-5);
+      }
+    `;
+  container.appendChild(style);
+
+  const appendSection = (headerText: string, sectionElement: HTMLElement) => {
+    const header = document.createElement('header');
+    header.textContent = headerText;
+    container.appendChild(header);
+    container.appendChild(sectionElement);
+  };
+
+  const buttonsSection = document.createElement('div');
+  const primarySection = document.createElement('div');
+  const tonalSection = document.createElement('div');
+  const outlineSection = document.createElement('div');
+  const textSection = document.createElement('div');
+  const iconSection = document.createElement('div');
+  const floatingSection = document.createElement('div');
+
+  appendSection('Buttons', buttonsSection);
+  appendSection('Primary buttons', primarySection);
+  appendSection('Tonal buttons', tonalSection);
+  appendSection('Outlined buttons', outlineSection);
+  appendSection('Text buttons', textSection);
+  appendSection('Icon buttons', iconSection);
+  appendSection('Floating buttons', floatingSection);
+
+  const DEFAULT_TEXT = 'Default';
+  const WITH_ICON_TEXT = 'With icon';
+  const MICRO_TEXT = 'Micro';
+  // Buttons
+  {
+    const primaryButton = new Button.Button();
+    primaryButton.data = {
+      variant: Button.Variant.PRIMARY,
+    };
+    primaryButton.innerText = 'Primary button';
+    buttonsSection.appendChild(primaryButton);
+
+    const tonalButton = new Button.Button();
+    tonalButton.data = {
+      variant: Button.Variant.TONAL,
+    };
+    tonalButton.innerText = 'Tonal button';
+    buttonsSection.appendChild(tonalButton);
+
+    const outlinedButton = new Button.Button();
+    outlinedButton.data = {
+      variant: Button.Variant.OUTLINED,
+    };
+    outlinedButton.innerText = 'Outlined button';
+    buttonsSection.appendChild(outlinedButton);
+
+    const textButton = new Button.Button();
+    textButton.data = {
+      variant: Button.Variant.TEXT,
+    };
+    textButton.innerText = 'Text button';
+    buttonsSection.appendChild(textButton);
+
+    const iconButton = new Button.Button();
+    iconButton.data = {
+      variant: Button.Variant.ICON,
+      iconName: 'gear',
+    };
+    buttonsSection.appendChild(iconButton);
+  }
+
+  // Primary buttons
+  {
+    const primaryDefault = new Button.Button();
+    primaryDefault.data = {
+      variant: Button.Variant.PRIMARY,
+    };
+    primaryDefault.innerText = DEFAULT_TEXT;
+    primarySection.appendChild(primaryDefault);
+
+    const primaryWithIcon = new Button.Button();
+    primaryWithIcon.innerText = WITH_ICON_TEXT;
+    primaryWithIcon.data = {
+      variant: Button.Variant.PRIMARY,
+      iconName: 'plus',
+    };
+    primarySection.appendChild(primaryWithIcon);
+  }
+
+  // Tonal buttons
+  {
+    const tonalDefault = new Button.Button();
+    tonalDefault.data = {
+      variant: Button.Variant.TONAL,
+    };
+    tonalDefault.innerText = DEFAULT_TEXT;
+    tonalSection.appendChild(tonalDefault);
+
+    const tonalWithIcon = new Button.Button();
+    tonalWithIcon.innerText = WITH_ICON_TEXT;
+
+    tonalWithIcon.data = {
+      variant: Button.Variant.PRIMARY,
+      iconName: 'plus',
+    };
+    tonalSection.appendChild(tonalWithIcon);
+  }
+
+  // Outlined buttons
+  {
+    const outlinedDefault = new Button.Button();
+    outlinedDefault.data = {
+      variant: Button.Variant.OUTLINED,
+    };
+    outlinedDefault.innerText = DEFAULT_TEXT;
+    outlineSection.appendChild(outlinedDefault);
+
+    const outlinedWithIcon = new Button.Button();
+    outlinedWithIcon.innerText = WITH_ICON_TEXT;
+    outlinedWithIcon.data = {
+      variant: Button.Variant.OUTLINED,
+      iconName: 'plus',
+    };
+    outlineSection.appendChild(outlinedWithIcon);
+
+    const outlinedMicro = new Button.Button();
+    outlinedMicro.innerText = MICRO_TEXT;
+    outlinedMicro.data = {
+      variant: Button.Variant.OUTLINED,
+      size: Button.Size.MICRO,
+    };
+    outlineSection.appendChild(outlinedMicro);
+  }
+
+  // Text buttons
+  {
+    const textDefault = new Button.Button();
+    textDefault.innerText = DEFAULT_TEXT;
+    textDefault.data = {
+      variant: Button.Variant.TEXT,
+    };
+    textSection.appendChild(textDefault);
+
+    const textWithIcon = new Button.Button();
+    textWithIcon.innerText = WITH_ICON_TEXT;
+
+    textWithIcon.data = {
+      variant: Button.Variant.TEXT,
+      iconName: 'plus',
+    };
+    textSection.appendChild(textWithIcon);
+  }
+
+  // Icon buttons
+  {
+    const iconDefault = new Button.Button();
+    iconDefault.data = {
+      variant: Button.Variant.ICON,
+      iconName: 'gear',
+    };
+    iconSection.appendChild(iconDefault);
+
+    const iconToggle = new Button.Button();
+    iconToggle.data = {
+      variant: Button.Variant.ICON_TOGGLE,
+      iconName: 'gear',
+      toggledIconName: 'gear',
+      toggled: true,
+      toggleType: Button.ToggleType.PRIMARY,
+    };
+    const toggledWithLabel = document.createElement('span');
+    toggledWithLabel.textContent = '(Toggle)';
+    iconSection.appendChild(iconToggle);
+    iconSection.appendChild(toggledWithLabel);
+  }
+
+  // Floating buttons
+  {
+    const floatingButton = FloatingButton.create('smart-assistant', 'Ask AI!');
+    floatingSection.appendChild(floatingButton);
+  }
+}

package/front_end/ui/components/icon_button/IconButton.ts

@@ -93,6 +93,7 @@ export class IconButton extends HTMLElement {
   }
 }
 
+// eslint-disable-next-line @devtools/enforce-custom-element-prefix
 customElements.define('icon-button', IconButton);
 
 declare global {

package/front_end/ui/components/settings/SettingCheckbox.ts

@@ -3,7 +3,9 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
+import '../tooltips/tooltips.js';
 import './SettingDeprecationWarning.js';
+import '../../legacy/legacy.js';
 
 import type * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
@@ -66,23 +68,56 @@ export class SettingCheckbox extends HTMLElement {
     }
 
     const learnMore = this.#setting.learnMore();
-    if (learnMore?.url) {
-      const url = learnMore.url;
+    if (learnMore) {
+      const jsLogContext = `${this.#setting.name}-documentation`;
       const data: Buttons.Button.ButtonData = {
-        iconName: 'help',
+        iconName: 'info',
         variant: Buttons.Button.Variant.ICON,
         size: Buttons.Button.Size.SMALL,
-        jslogContext: `${this.#setting.name}-documentation`,
-        title: i18nString(UIStrings.learnMore),
-      };
-      const handleClick = (event: MouseEvent): void => {
-        Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(url);
-        event.consume();
+        jslogContext: jsLogContext,
       };
-      return html`<devtools-button
-                    class=learn-more
-                    @click=${handleClick}
-                    .data=${data}></devtools-button>`;
+
+      const url = learnMore.url;
+      if (learnMore.tooltip) {
+        const id = `${this.#setting.name}-information`;
+        // clang-format off
+        return html`
+          <devtools-button
+            class="info-icon"
+            aria-details=${id}
+            .data=${data}
+          ></devtools-button>
+          <devtools-tooltip id=${id} variant="rich">
+            <span>${learnMore.tooltip()}</span><br />
+            ${url
+              ? html`<x-link
+                  href=${url}
+                  class="link"
+                  jslog=${VisualLogging.link(jsLogContext).track({
+                    click: true,
+                  })}
+                  >${i18nString(UIStrings.learnMore)}</x-link
+                >`
+              : Lit.nothing}
+          </devtools-tooltip>
+        `;
+        // clang-format on
+      }
+      if (url) {
+        const handleClick = (event: MouseEvent): void => {
+          Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(url);
+          event.consume();
+        };
+        data.iconName = 'help';
+        data.title = i18nString(UIStrings.learnMore);
+        // clang-format off
+        return html`<devtools-button
+          class="info-icon"
+          @click=${handleClick}
+          .data=${data}
+        ></devtools-button>`;
+        // clang-format on
+      }
     }
 
     return undefined;
@@ -102,7 +137,7 @@ export class SettingCheckbox extends HTMLElement {
     }
 
     const icon = this.icon();
-    const title = `${this.#setting.learnMore() ? this.#setting.learnMore()?.tooltip() : ''}`;
+    const title = `${this.#setting.learnMore() ? this.#setting.learnMore()?.tooltip?.() : ''}`;
     const disabledReasons = this.#setting.disabledReasons();
     const reason = disabledReasons.length ?
         html`
@@ -141,6 +176,7 @@ export class SettingCheckbox extends HTMLElement {
   }
 }
 
+// eslint-disable-next-line @devtools/enforce-custom-element-prefix
 customElements.define('setting-checkbox', SettingCheckbox);
 
 declare global {

package/front_end/ui/components/settings/settingCheckbox.css

@@ -35,7 +35,7 @@ p {
   height: var(--sys-size-9);
 }
 
-.learn-more {
+.info-icon {
   cursor: pointer;
   position: relative;
   margin-left: var(--sys-size-2);
@@ -43,3 +43,8 @@ p {
   width: var(--sys-size-9);
   height: var(--sys-size-9);
 }
+
+.link {
+  color: var(--text-link);
+  text-decoration: underline;
+}

package/front_end/ui/components/spinners/Spinners.docs.ts

@@ -0,0 +1,13 @@
+// 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 './spinners.js';
+
+import * as Lit from '../../lit/lit.js';
+
+const {html} = Lit;
+
+export async function render(container: HTMLElement) {
+  Lit.render(html`<devtools-spinner></devtools-spinner>`, container);
+}

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/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/Treeoutline.ts

@@ -1604,6 +1604,18 @@ function getTreeNodes(nodeList: NodeList|Node[]): HTMLLIElement[] {
       .toArray();
 }
 
+function getStyleElements(nodes: NodeList|Node[]): HTMLElement[] {
+  return [...nodes].flatMap(node => {
+    if (node instanceof HTMLStyleElement) {
+      return [node];
+    }
+    if (node instanceof HTMLElement) {
+      return [...node.querySelectorAll<HTMLStyleElement>('style')];
+    }
+    return [] as HTMLElement[];
+  });
+}
+
 /**
  * A tree element that can be used as progressive enhancement over a <ul> element. A `template` IDL attribute allows
  * additionally to insert the <ul> into a <template>, avoiding rendering anything into light DOM, which is recommended.
@@ -1763,6 +1775,9 @@ export class TreeViewElement extends HTMLElementWithLightDOMTemplate {
         parent.treeElement.expand();
       }
     }
+    for (const element of getStyleElements(nodes)) {
+      this.#treeOutline.shadowRoot.appendChild(element.cloneNode(true));
+    }
   }
 
   protected override removeNodes(nodes: NodeList): void {