chrome-devtools-frontend 1.0.1548980 → 1.0.1550444

package/front_end/ui/{components/icon_button → kit/icons}/Icon.ts

@@ -35,8 +35,8 @@ export type IconData = IconWithName|{
  *
  * ```js
  * // Instantiate programmatically via the `create()` helper:
- * const icon = IconButton.Icon.create('bin');
- * const iconWithClassName = IconButton.Icon.create('bin', 'delete-icon');
+ * const icon = createIcon('bin');
+ * const iconWithClassName = createIcon('bin', 'delete-icon');
  *
  * // Use within a template:
  * Lit.html`
@@ -74,7 +74,9 @@ export class Icon extends HTMLElement {
 
   constructor() {
     super();
-    this.role = 'presentation';
+    if (!this.role) {
+      this.role = 'presentation';
+    }
     const style = document.createElement('style');
     style.textContent = iconStyles;
     this.#icon = document.createElement('span');
@@ -165,7 +167,7 @@ export class Icon extends HTMLElement {
  * @param className optional CSS class name(s) to put onto the element.
  * @returns the newly created `Icon` instance.
  */
-export const create = (name: string, className?: string): Icon => {
+export const createIcon = (name: string, className?: string): Icon => {
   const icon = new Icon();
   icon.name = name;
   if (className !== undefined) {

package/front_end/ui/kit/kit.ts

@@ -0,0 +1,6 @@
+// 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.
+
+export * from './cards/Card.js';
+export * from './icons/Icon.js';

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';
@@ -429,10 +429,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/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/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);
 

package/front_end/ui/legacy/TabbedPane.ts

@@ -10,9 +10,10 @@ import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as Geometry from '../../models/geometry/geometry.js';
+import * as Annotations from '../../ui/components/annotations/annotations.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, Icon} from '../kit/kit.js';
 
 import * as ARIAUtils from './ARIAUtils.js';
 import {ContextMenu} from './ContextMenu.js';
@@ -53,6 +54,10 @@ const UIStrings = {
    * @description Indicates that a tab contains a preview feature (i.e., a beta / experimental feature).
    */
   previewFeature: 'Preview feature',
+  /**
+   * @description Indicates that a tab contains annotation(s).
+   */
+  panelContainsAnnotation: 'This panel has one or more annotations',
   /**
    * @description Text to move a tab forwar.
    */
@@ -121,6 +126,11 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     this.currentDevicePixelRatio = window.devicePixelRatio;
     ZoomManager.instance().addEventListener(ZoomManagerEvents.ZOOM_CHANGED, this.zoomChanged, this);
     this.makeTabSlider();
+
+    if (Annotations.AnnotationRepository.annotationsEnabled()) {
+      Annotations.AnnotationRepository.instance().addEventListener(
+          Annotations.Events.ANNOTATION_ADDED, this.#onAnnotationAdded, this);
+    }
   }
 
   setAccessibleName(name: string): void {
@@ -392,7 +402,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     return this.tabsHistory.slice(0, tabsCount).map(tabToTabId);
   }
 
-  setTabIcon(id: string, icon: IconButton.Icon.Icon|null): void {
+  setTabIcon(id: string, icon: Icon|null): void {
     const tab = this.tabsById.get(id);
     if (!tab) {
       return;
@@ -401,7 +411,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     this.requestUpdate();
   }
 
-  setTrailingTabIcon(id: string, icon: IconButton.Icon.Icon|null): void {
+  setTrailingTabIcon(id: string, icon: Icon|null): void {
     const tab = this.tabsById.get(id);
     if (!tab) {
       return;
@@ -555,6 +565,36 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     this.performUpdate();
   }
 
+  updateTabAnnotationIcons(): void {
+    if (!Annotations.AnnotationRepository.annotationsEnabled()) {
+      return;
+    }
+
+    const annotations = Annotations.AnnotationRepository.instance();
+    if (!annotations) {
+      return;
+    }
+
+    for (const tab of this.tabs) {
+      let primaryType = -1;
+      let secondaryType = -1;
+      switch (tab.id) {
+        case 'elements':
+          primaryType = Annotations.AnnotationType.ELEMENT_NODE;
+          secondaryType = Annotations.AnnotationType.STYLE_RULE;
+          break;
+        case 'network':
+          primaryType = Annotations.AnnotationType.NETWORK_REQUEST;
+          secondaryType = Annotations.AnnotationType.NETWORK_REQUEST_SUBPANEL_HEADERS;
+          break;
+      }
+
+      const showTabAnnotationIcon = annotations.getAnnotationsByType(primaryType).length > 0 ||
+          annotations.getAnnotationsByType(secondaryType).length > 0;
+      this.setTabAnnotationIcon(tab.id, showTabAnnotationIcon);
+    }
+  }
+
   override performUpdate(): void {
     if (!this.isShowing()) {
       return;
@@ -583,6 +623,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     this.updateWidths();
     this.updateTabsDropDown();
     this.updateTabSlider();
+    this.updateTabAnnotationIcons();
   }
 
   private adjustToolbarWidth(): void {
@@ -621,7 +662,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     const dropDownContainer = document.createElement('div');
     dropDownContainer.classList.add('tabbed-pane-header-tabs-drop-down-container');
     dropDownContainer.setAttribute('jslog', `${VisualLogging.dropDown('more-tabs').track({click: true})}`);
-    const chevronIcon = IconButton.Icon.create('chevron-double-right', 'chevron-icon');
+    const chevronIcon = createIcon('chevron-double-right', 'chevron-icon');
     const moreTabsString = i18nString(UIStrings.moreTabs);
     dropDownContainer.title = moreTabsString;
     ARIAUtils.markAsMenuButton(dropDownContainer);
@@ -939,6 +980,17 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     this.automaticReorder = automatic;
   }
 
+  setTabAnnotationIcon(id: string, iconVisible: boolean): void {
+    const tab = this.tabsById.get(id);
+    if (tab) {
+      tab.tabAnnotationIcon = iconVisible;
+    }
+  }
+
+  #onAnnotationAdded(): void {
+    this.updateTabAnnotationIcons();
+  }
+
   private keyDown(event: KeyboardEvent): void {
     if (!this.currentTab) {
       return;
@@ -1009,6 +1061,7 @@ export interface EventTypes {
 export class TabbedPaneTab {
   closeable: boolean;
   previewFeature = false;
+  #tabAnnotationIcon = false;
   private readonly tabbedPane: TabbedPane;
   #id: string;
   #title: string;
@@ -1017,7 +1070,7 @@ export class TabbedPaneTab {
   shown: boolean;
   measuredWidth!: number|undefined;
   #tabElement!: HTMLElement|undefined;
-  private icon: IconButton.Icon.Icon|null = null;
+  private icon: Icon|null = null;
   private suffixElement: HTMLElement|null = null;
   #width?: number;
   private delegate?: TabbedPaneTabDelegate;
@@ -1064,11 +1117,37 @@ export class TabbedPaneTab {
     return this.#jslogContext ?? (this.#id === 'console-view' ? 'console' : this.#id);
   }
 
+  get tabAnnotationIcon(): boolean {
+    return this.#tabAnnotationIcon;
+  }
+
+  set tabAnnotationIcon(iconVisible: boolean) {
+    if (this.#tabAnnotationIcon === iconVisible) {
+      return;
+    }
+    this.#tabAnnotationIcon = iconVisible;
+    if (!this.#tabElement) {
+      return;
+    }
+    const iconElement = this.#tabElement.querySelector('.ai-icon');
+    if (iconVisible) {
+      if (!iconElement) {
+        const closeButton = this.#tabElement.querySelector('.close-button');
+        this.#tabElement.insertBefore(this.createTabAnnotationIcon(), closeButton);
+      }
+    } else {
+      iconElement?.remove();
+    }
+    this.#tabElement.classList.toggle('ai', iconVisible);
+    delete this.measuredWidth;
+    this.tabbedPane.requestUpdate();
+  }
+
   isCloseable(): boolean {
     return this.closeable;
   }
 
-  setIcon(icon: IconButton.Icon.Icon|null): void {
+  setIcon(icon: Icon|null): void {
     this.icon = icon;
     if (this.#tabElement && this.titleElement) {
       this.createIconElement(this.#tabElement, this.titleElement, false);
@@ -1171,7 +1250,7 @@ export class TabbedPaneTab {
     tabSuffixElements.set(tabElement, suffixElementContainer);
   }
 
-  private createMeasureClone(original: IconButton.Icon.Icon): Element {
+  private createMeasureClone(original: Icon): Element {
     // Cloning doesn't work for the icon component because the shadow
     // root isn't copied, but it is sufficient to create a div styled
     // to be the same size.
@@ -1204,6 +1283,12 @@ export class TabbedPaneTab {
       tabElement.classList.add('preview');
     }
 
+    if (this.tabAnnotationIcon) {
+      const tabAnnotationIcon = this.createTabAnnotationIcon();
+      tabElement.appendChild(tabAnnotationIcon);
+      tabElement.classList.add('ai');
+    }
+
     if (this.closeable) {
       const closeIcon = this.createCloseIconButton();
       tabElement.appendChild(closeIcon);
@@ -1230,6 +1315,19 @@ export class TabbedPaneTab {
     return tabElement as HTMLElement;
   }
 
+  private createTabAnnotationIcon(): HTMLDivElement {
+    // TODO(finnur): Replace the ai-icon with the squiggly svg once it becomes available.
+    const iconContainer = document.createElement('div');
+    iconContainer.classList.add('ai-icon');
+    const tabAnnotationIcon = new Icon();
+    tabAnnotationIcon.name = 'smart-assistant';
+    tabAnnotationIcon.classList.add('small');
+    iconContainer.appendChild(tabAnnotationIcon);
+    iconContainer.setAttribute('title', i18nString(UIStrings.panelContainsAnnotation));
+    iconContainer.setAttribute('aria-label', i18nString(UIStrings.panelContainsAnnotation));
+    return iconContainer;
+  }
+
   private createCloseIconButton(): Buttons.Button.Button {
     const closeButton = new Buttons.Button.Button();
     closeButton.data = {
@@ -1248,7 +1346,7 @@ export class TabbedPaneTab {
   private createPreviewIcon(): HTMLDivElement {
     const iconContainer = document.createElement('div');
     iconContainer.classList.add('preview-icon');
-    const previewIcon = new IconButton.Icon.Icon();
+    const previewIcon = new Icon();
     previewIcon.name = 'experiment';
     previewIcon.classList.add('small');
     iconContainer.appendChild(previewIcon);

package/front_end/ui/legacy/Toolbar.ts

@@ -10,7 +10,7 @@ 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 * as IconButton from '../components/icon_button/icon_button.js';
+import {createIcon} from '../kit/kit.js';
 
 import {type Action, Events as ActionEvents} from './ActionRegistration.js';
 import {ActionRegistry} from './ActionRegistry.js';
@@ -824,7 +824,7 @@ export class ToolbarFilter extends ToolbarInput {
         filterPlaceholder, filterPlaceholder, growFactor, shrinkFactor, tooltip, completions, dynamicCompletions,
         jslogContext || 'filter', element);
 
-    const filterIcon = IconButton.Icon.create('filter');
+    const filterIcon = createIcon('filter');
     this.element.prepend(filterIcon);
     this.element.classList.add('toolbar-filter');
   }
@@ -997,7 +997,7 @@ export class ToolbarMenuButton extends ToolbarItem<ToolbarButton.EventTypes> {
     this.title = '';
     if (!isIconDropdown) {
       this.element.classList.add('toolbar-has-dropdown');
-      const dropdownArrowIcon = IconButton.Icon.create('triangle-down', 'toolbar-dropdown-arrow');
+      const dropdownArrowIcon = createIcon('triangle-down', 'toolbar-dropdown-arrow');
       this.element.appendChild(dropdownArrowIcon);
     }
     if (jslogContext) {

package/front_end/ui/legacy/Treeoutline.ts

@@ -40,7 +40,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import type * as TextUtils from '../../models/text_utils/text_utils.js';
 import type * as Buttons from '../components/buttons/buttons.js';
 import * as Highlighting from '../components/highlighting/highlighting.js';
-import type * as IconButton from '../components/icon_button/icon_button.js';
+import type {Icon} from '../kit/kit.js';
 import * as Lit from '../lit/lit.js';
 import * as VisualLogging from '../visual_logging/visual_logging.js';
 
@@ -810,7 +810,7 @@ export class TreeElement {
     }
   }
 
-  setLeadingIcons(icons: IconButton.Icon.Icon[]|Lit.TemplateResult[]): void {
+  setLeadingIcons(icons: Icon[]|Lit.TemplateResult[]): void {
     if (!this.leadingIconsElement && !icons.length) {
       return;
     }