chrome-devtools-frontend 1.0.1549484 → 1.0.1550444

package/front_end/panels/application/preloading/components/UsedPreloadingView.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
-import '../../../../ui/components/icon_button/icon_button.js';
+import '../../../../ui/kit/kit.js';
 import '../../../../ui/components/report_view/report_view.js';
 import './PreloadingMismatchedHeadersGrid.js';
 import './MismatchedPreloadingGrid.js';

package/front_end/panels/changes/ChangesSidebar.ts

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../ui/kit/kit.js';
+
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Workspace from '../../models/workspace/workspace.js';

package/front_end/panels/changes/CombinedDiffView.ts

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../ui/kit/kit.js';
+
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Persistence from '../../models/persistence/persistence.js';

package/front_end/panels/common/AnnotationManager.ts

@@ -0,0 +1,71 @@
+// 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 type * as Common from '../../core/common/common.js';
+import type * as SDK from '../../core/sdk/sdk.js';
+import * as Annotations from '../../ui/components/annotations/annotations.js';
+
+interface AnnotationPlacement {
+  parentElement: Element;
+  insertBefore?: Node|null;
+  resolveRelativePosition:
+      (parentElement: Element, revealNode: boolean, lookupId: string,
+       node?: SDK.DOMModel.DOMNode) => Promise<{x: number, y: number}|null>;
+}
+
+// This class handles general management of Annotations, the data needed to display them and any panel-specific things
+// that the AnnotationRepository must be free from. It is created on-demand the first time a panel, that wants to show
+// an Annotation, appears.
+//
+// NOTE: For now this class is not for general use and is inactive (unless a specific flag is supplied).
+export class AnnotationManager {
+  static #instance: AnnotationManager|null = null;
+
+  #annotationPlacements: Map<Annotations.AnnotationType, AnnotationPlacement>|null = null;
+
+  constructor() {
+    if (!Annotations.AnnotationRepository.annotationsEnabled()) {
+      console.warn('AnnotationManager created with annotations disabled');
+      return;
+    }
+
+    Annotations.AnnotationRepository.instance().addEventListener(
+        Annotations.Events.ANNOTATION_ADDED, this.#onAnnotationAdded, this);
+  }
+
+  static instance(): AnnotationManager {
+    if (!AnnotationManager.#instance) {
+      AnnotationManager.#instance = new AnnotationManager();
+    }
+    return AnnotationManager.#instance;
+  }
+
+  initializePlacementForAnnotationType(
+      type: Annotations.AnnotationType,
+      resolveRelativePosition:
+          (parentElement: Element, revealNode: boolean, lookupId: string,
+           node?: SDK.DOMModel.DOMNode) => Promise<{x: number, y: number}|null>,
+      parentElement: Element, insertBefore: Node|null = null): void {
+    if (!Annotations.AnnotationRepository.annotationsEnabled()) {
+      return;
+    }
+
+    if (!this.#annotationPlacements) {
+      this.#annotationPlacements = new Map();
+    }
+    this.#annotationPlacements.set(type, {parentElement, insertBefore, resolveRelativePosition});
+
+    // eslint-disable-next-line no-console
+    console.log(
+        `[AnnotationManager] initializing placement for ${Annotations.AnnotationType[type]}`, {parentElement},
+        'placement count:', this.#annotationPlacements);
+  }
+
+  async #onAnnotationAdded(
+      event: Common.EventTarget.EventTargetEvent<Annotations.EventTypes[Annotations.Events.ANNOTATION_ADDED]>):
+      Promise<void> {
+    // eslint-disable-next-line no-console
+    console.log('[AnnotationManager] received event onAnnotationAdded', event);
+  }
+}

package/front_end/panels/common/PersistenceUtils.ts

@@ -1,14 +1,13 @@
 // Copyright 2016 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 @devtools/no-imperative-dom-api */
 
 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 Persistence from '../../models/persistence/persistence.js';
 import * as Workspace from '../../models/workspace/workspace.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {Icon} from '../../ui/kit/kit.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -43,13 +42,13 @@ export class PersistenceUtils {
     return i18nString(UIStrings.linkedToS, {PH1: Platform.StringUtilities.trimMiddle(binding.network.url(), 150)});
   }
 
-  static iconForUISourceCode(uiSourceCode: Workspace.UISourceCode.UISourceCode): IconButton.Icon.Icon|null {
+  static iconForUISourceCode(uiSourceCode: Workspace.UISourceCode.UISourceCode): Icon|null {
     const binding = Persistence.Persistence.PersistenceImpl.instance().binding(uiSourceCode);
     if (binding) {
       if (!Common.ParsedURL.schemeIs(binding.fileSystem.url(), 'file:')) {
         return null;
       }
-      const icon = new IconButton.Icon.Icon();
+      const icon = new Icon();
       icon.name = 'document';
       icon.classList.add('small');
       UI.Tooltip.Tooltip.install(icon, PersistenceUtils.tooltipForUISourceCode(binding.network));
@@ -69,14 +68,14 @@ export class PersistenceUtils {
 
     if (Persistence.NetworkPersistenceManager.NetworkPersistenceManager.instance().isActiveHeaderOverrides(
             uiSourceCode)) {
-      const icon = new IconButton.Icon.Icon();
+      const icon = new Icon();
       icon.name = 'document';
       icon.classList.add('small');
       icon.classList.add('dot', 'purple');
       return icon;
     }
 
-    const icon = new IconButton.Icon.Icon();
+    const icon = new Icon();
     icon.name = 'document';
     icon.classList.add('small');
     UI.Tooltip.Tooltip.install(icon, PersistenceUtils.tooltipForUISourceCode(uiSourceCode));
@@ -97,7 +96,7 @@ export class LinkDecorator extends Common.ObjectWrapper.ObjectWrapper<Components
     this.dispatchEventToListeners(Components.Linkifier.LinkDecorator.Events.LINK_ICON_CHANGED, binding.network);
   }
 
-  linkIcon(uiSourceCode: Workspace.UISourceCode.UISourceCode): IconButton.Icon.Icon|null {
+  linkIcon(uiSourceCode: Workspace.UISourceCode.UISourceCode): Icon|null {
     return PersistenceUtils.iconForUISourceCode(uiSourceCode);
   }
 }

package/front_end/panels/common/common.ts

@@ -96,6 +96,7 @@ export class TypeToAllowDialog {
 
 export {AiCodeCompletionTeaser} from './AiCodeCompletionTeaser.js';
 export {AiCodeGenerationTeaser} from './AiCodeGenerationTeaser.js';
+export {AnnotationManager} from './AnnotationManager.js';
 export {FreDialog} from './FreDialog.js';
 export {GdpSignUpDialog} from './GdpSignUpDialog.js';
 export {AiCodeCompletionDisclaimer} from './AiCodeCompletionDisclaimer.js';

package/front_end/panels/console/ConsolePrompt.ts

@@ -13,8 +13,8 @@ import * as Badges from '../../models/badges/badges.js';
 import * as Formatter from '../../models/formatter/formatter.js';
 import * as SourceMapScopes from '../../models/source_map_scopes/source_map_scopes.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as TextEditor from '../../ui/components/text_editor/text_editor.js';
+import {Icon} from '../../ui/kit/kit.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -57,7 +57,7 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
   private requestPreviewBound: () => Promise<void>;
   private requestPreviewCurrent = 0;
   private readonly innerPreviewElement: HTMLElement;
-  private readonly promptIcon: IconButton.Icon.Icon;
+  private readonly promptIcon: Icon;
   private readonly iconThrottler: Common.Throttler.Throttler;
   private readonly eagerEvalSetting: Common.Settings.Setting<boolean>;
   protected previewRequestForTest: Promise<void>|null;
@@ -119,7 +119,7 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
     this.textChangeThrottler = new Common.Throttler.Throttler(150);
     this.requestPreviewBound = this.requestPreview.bind(this);
     this.innerPreviewElement = this.eagerPreviewElement.createChild('div', 'console-eager-inner-preview');
-    const previewIcon = new IconButton.Icon.Icon();
+    const previewIcon = new Icon();
     previewIcon.name = 'chevron-left-dot';
     previewIcon.classList.add('preview-result-icon', 'medium');
     this.eagerPreviewElement.appendChild(previewIcon);
@@ -127,7 +127,7 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
     const editorContainerElement = this.element.createChild('div', 'console-prompt-editor-container');
     this.element.appendChild(this.eagerPreviewElement);
 
-    this.promptIcon = new IconButton.Icon.Icon();
+    this.promptIcon = new Icon();
     this.promptIcon.name = 'chevron-right';
     this.promptIcon.style.color = 'var(--icon-action)';
     this.promptIcon.classList.add('console-prompt-icon', 'medium');

package/front_end/panels/console/ConsoleView.ts

@@ -48,8 +48,8 @@ import * as Logs from '../../models/logs/logs.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
 import * as Highlighting from '../../ui/components/highlighting/highlighting.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as IssueCounter from '../../ui/components/issue_counter/issue_counter.js';
+import {createIcon} from '../../ui/kit/kit.js';
 // eslint-disable-next-line @devtools/es-modules-import
 import objectValueStyles from '../../ui/legacy/components/object_ui/objectValue.css.js';
 import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
@@ -1781,7 +1781,7 @@ export class ConsoleViewFilter {
 
     this.levelMenuButton =
         new UI.Toolbar.ToolbarMenuButton(this.appendLevelMenuItems.bind(this), undefined, undefined, 'log-level');
-    const levelMenuButtonInfoIcon = IconButton.Icon.create('info', 'console-sidebar-levels-info');
+    const levelMenuButtonInfoIcon = createIcon('info', 'console-sidebar-levels-info');
     levelMenuButtonInfoIcon.title = i18nString(UIStrings.overriddenByFilterSidebar);
     this.levelMenuButtonInfo = new UI.Toolbar.ToolbarItem(levelMenuButtonInfoIcon);
     this.levelMenuButtonInfo.setVisible(false);

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -50,9 +50,9 @@ import * as Workspace from '../../models/workspace/workspace.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
 import * as Highlighting from '../../ui/components/highlighting/highlighting.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as IssueCounter from '../../ui/components/issue_counter/issue_counter.js';
 import * as RequestLinkIcon from '../../ui/components/request_link_icon/request_link_icon.js';
+import {createIcon, Icon} from '../../ui/kit/kit.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 // eslint-disable-next-line @devtools/es-modules-import
@@ -317,7 +317,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
   protected consoleRowWrapper: HTMLElement|null = null;
   private readonly previewFormatter: ObjectUI.RemoteObjectPreviewFormatter.RemoteObjectPreviewFormatter;
   private searchRegexInternal: RegExp|null;
-  protected messageIcon: IconButton.Icon.Icon|null;
+  protected messageIcon: Icon|null;
   private traceExpanded: boolean;
   private expandTrace: ((arg0: boolean) => void)|null;
   protected anchorElement: HTMLElement|null;
@@ -662,7 +662,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
   }
 
   private buildMessageWithStackTrace(runtimeModel: SDK.RuntimeModel.RuntimeModel): HTMLElement {
-    const icon = IconButton.Icon.create('triangle-right', 'console-message-expand-icon');
+    const icon = createIcon('triangle-right', 'console-message-expand-icon');
     const {stackTraceElement, contentElement, messageElement, clickableElement, toggleElement} =
         this.buildMessageHelper(runtimeModel.target(), this.message.stackTrace, icon);
     // We debounce the trace expansion metric in case this was accidental.
@@ -711,8 +711,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
   }
 
   private buildMessageHelper(
-      target: SDK.Target.Target|null, stackTrace: Protocol.Runtime.StackTrace|undefined,
-      icon: IconButton.Icon.Icon|null): {
+      target: SDK.Target.Target|null, stackTrace: Protocol.Runtime.StackTrace|undefined, icon: Icon|null): {
     stackTraceElement: HTMLElement,
     contentElement: HTMLElement,
     messageElement: HTMLElement,
@@ -1568,7 +1567,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
   }
 
   #createHoverButton(): HTMLButtonElement {
-    const icon = new IconButton.Icon.Icon();
+    const icon = new Icon();
     icon.name = 'lightbulb-spark';
     icon.style.color = 'var(--devtools-icon-color)';
     icon.classList.add('medium');
@@ -1631,7 +1630,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       return;
     }
 
-    this.messageIcon = new IconButton.Icon.Icon();
+    this.messageIcon = new Icon();
     this.messageIcon.name = iconName;
     this.messageIcon.style.color = color;
     this.messageIcon.classList.add('message-level-icon', 'small');
@@ -2067,7 +2066,7 @@ function getOrCreateTokenizers(): {
 
 export class ConsoleGroupViewMessage extends ConsoleViewMessage {
   private collapsedInternal: boolean;
-  private expandGroupIcon: IconButton.Icon.Icon|null;
+  private expandGroupIcon: Icon|null;
   private readonly onToggle: () => void;
   private groupEndMessageInternal: ConsoleViewMessage|null;
 
@@ -2113,7 +2112,7 @@ export class ConsoleGroupViewMessage extends ConsoleViewMessage {
     if (!element) {
       element = super.toMessageElement();
       const iconType = this.collapsedInternal ? 'triangle-right' : 'triangle-down';
-      this.expandGroupIcon = IconButton.Icon.create(iconType, 'expand-group-icon');
+      this.expandGroupIcon = createIcon(iconType, 'expand-group-icon');
       // Intercept focus to avoid highlight on click.
       this.contentElement().tabIndex = -1;
       if (this.repeatCountElement) {
@@ -2175,7 +2174,7 @@ export class ConsoleCommand extends ConsoleViewMessage {
     const newContentElement = document.createElement('div');
     this.setContentElement(newContentElement);
     newContentElement.classList.add('console-user-command');
-    const userCommandIcon = new IconButton.Icon.Icon();
+    const userCommandIcon = new Icon();
     userCommandIcon.name = 'chevron-right';
     userCommandIcon.classList.add('command-result-icon', 'medium');
     newContentElement.appendChild(userCommandIcon);
@@ -2208,7 +2207,7 @@ export class ConsoleCommandResult extends ConsoleViewMessage {
     if (!element.classList.contains('console-user-command-result')) {
       element.classList.add('console-user-command-result');
       if (this.consoleMessage().level === Protocol.Log.LogEntryLevel.Info) {
-        const icon = new IconButton.Icon.Icon();
+        const icon = new Icon();
         icon.name = 'chevron-left-dot';
         icon.classList.add('command-result-icon', 'medium');
         element.insertBefore(icon, element.firstChild);

package/front_end/panels/console_counters/WarningErrorCounter.ts

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../ui/components/icon_button/icon_button.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';

package/front_end/panels/css_overview/CSSOverviewCompletedView.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 import '../../ui/legacy/components/data_grid/data_grid.js';
-import '../../ui/components/icon_button/icon_button.js';
+import '../../ui/kit/kit.js';
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';

package/front_end/panels/elements/ColorSwatchPopoverIcon.ts

@@ -6,7 +6,7 @@ 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 Bindings from '../../models/bindings/bindings.js';
-import type * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import type {Icon} from '../../ui/kit/kit.js';
 import * as ColorPicker from '../../ui/legacy/components/color_picker/color_picker.js';
 import * as InlineEditor from '../../ui/legacy/components/inline_editor/inline_editor.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -33,14 +33,14 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 interface BezierPopoverIconParams {
   treeElement: StylePropertyTreeElement;
   swatchPopoverHelper: InlineEditor.SwatchPopoverHelper.SwatchPopoverHelper;
-  swatch: IconButton.Icon.Icon;
+  swatch: Icon;
   bezierText: HTMLElement;
 }
 
 export class BezierPopoverIcon {
   private treeElement: StylePropertyTreeElement;
   private readonly swatchPopoverHelper: InlineEditor.SwatchPopoverHelper.SwatchPopoverHelper;
-  private readonly swatch: IconButton.Icon.Icon;
+  private readonly swatch: Icon;
   private readonly bezierText: HTMLElement;
   private readonly boundBezierChanged: (event: Common.EventTarget.EventTargetEvent<string>) => void;
   private readonly boundOnScroll: (event: Event) => void;

package/front_end/panels/elements/ElementsPanel.ts

@@ -39,8 +39,10 @@ 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 PanelCommon from '../../panels/common/common.js';
 import type * as Adorners from '../../ui/components/adorners/adorners.js';
+import * as Annotations from '../../ui/components/annotations/annotations.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as TreeOutline from '../../ui/components/tree_outline/tree_outline.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -332,6 +334,12 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
         .addChangeListener(this.showUAShadowDOMChanged.bind(this));
     PanelCommon.ExtensionServer.ExtensionServer.instance().addEventListener(
         PanelCommon.ExtensionServer.Events.SidebarPaneAdded, this.extensionSidebarPaneAdded, this);
+
+    if (Annotations.AnnotationRepository.annotationsEnabled()) {
+      PanelCommon.AnnotationManager.instance().initializePlacementForAnnotationType(
+          Annotations.AnnotationType.ELEMENT_NODE, this.resolveRelativePosition.bind(this),
+          this.#domTreeWidget.element);
+    }
   }
 
   private initializeFullAccessibilityTreeView(): void {
@@ -1169,6 +1177,47 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     this.#domTreeWidget.copyStyles(node);
   }
 
+  async resolveRelativePosition(
+      parentElement: Element, revealNode: boolean, lookupId: string,
+      node?: SDK.DOMModel.DOMNode): Promise<{x: number, y: number}|null> {
+    if (!node) {
+      const backendNodeId = Number(lookupId) as Protocol.DOM.BackendNodeId;
+      if (isNaN(backendNodeId)) {
+        return null;
+      }
+      const rootDOMNode = this.#domTreeWidget.rootDOMNode;
+      if (!rootDOMNode) {
+        return null;
+      }
+      const domModel = rootDOMNode.domModel();
+      const nodes = await domModel.pushNodesByBackendIdsToFrontend(new Set([backendNodeId]));
+      if (!nodes) {
+        return null;
+      }
+      const foundNode = nodes.get(backendNodeId);
+      if (!foundNode) {
+        return null;
+      }
+      node = foundNode;
+    }
+
+    const element = this.#domTreeWidget.treeElementForNode(node);
+    if (!element) {
+      return null;
+    }
+
+    if (revealNode) {
+      // The node must have been revealed in order to calculate its position.
+      await Common.Revealer.reveal(node);
+    }
+
+    const targetRect = element.listItemElement.getBoundingClientRect();
+    const parentRect = parentElement.getBoundingClientRect();
+    const relativeX = 0;
+    const relativeY = targetRect.y - parentRect.y;
+    return {x: relativeX, y: relativeY};
+  }
+
   protected static firstInspectElementCompletedForTest = function(): void {};
   protected static firstInspectElementNodeNameForTest = '';
 }