chrome-devtools-frontend 1.0.1549484 → 1.0.1553956

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;
@@ -379,13 +379,18 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
   }
 
   setInsight(insight: HTMLElement): void {
-    this.elementInternal?.querySelector('devtools-console-insight')?.remove();
+    this.elementInternal?.querySelector('.devtools-console-insight')?.remove();
     this.elementInternal?.append(insight);
     this.elementInternal?.classList.toggle('has-insight', true);
     insight.addEventListener('close', () => {
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightClosed);
       this.elementInternal?.classList.toggle('has-insight', false);
-      this.elementInternal?.removeChild(insight);
+      const widget = UI.Widget.Widget.get(insight);
+      if (widget) {
+        widget.detach();
+      } else {
+        this.elementInternal?.removeChild(insight);
+      }
       this.#teaser?.setInactive(false);
     }, {once: true});
     this.#teaser?.setInactive(true);
@@ -662,7 +667,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 +716,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,
@@ -1527,7 +1531,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       return false;
     }
     if (!Common.Settings.Settings.instance().moduleSetting('console-insight-teasers-enabled').getIfNotDisabled() ||
-        !AiAssistanceModel.BuiltInAi.BuiltInAi.instance().hasSession()) {
+        !AiAssistanceModel.BuiltInAi.BuiltInAi.instance().isEventuallyAvailable()) {
       return false;
     }
     const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance();
@@ -1568,7 +1572,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 +1635,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 +2071,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 +2117,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 +2179,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 +2212,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/consoleInsightTeaser.css

@@ -13,6 +13,8 @@
 
   .response-container {
     height: 85px;
+    display: flex;
+    flex-direction: column;
   }
 
   @keyframes gradient {
@@ -94,4 +96,25 @@
       margin-left: auto;
     }
   }
+
+  .progress-line {
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+
+    .label {
+      margin-right: var(--sys-size-6);
+    }
+
+    .indicator-container {
+      height: var(--sys-size-5);
+      background-color: var(--sys-color-surface5);
+      flex-grow: 1
+    }
+
+    .indicator {
+      background-color: var(--sys-color-primary);
+      height: 100%;
+    }
+  }
 }

package/front_end/panels/console/consoleView.css

@@ -538,7 +538,7 @@
   height: 0;
 }
 
-devtools-console-insight {
+.devtools-console-insight {
   margin: 9px 22px 11px 24px;
 }
 

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

@@ -0,0 +1,89 @@
+// 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 * as SDK from '../../core/sdk/sdk.js';
+import * as TextUtils from '../../models/text_utils/text_utils.js';
+import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
+import * as Components from '../../ui/legacy/components/utils/utils.js';
+import * as UI from '../../ui/legacy/legacy.js';
+import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
+
+export class AdoptedStyleSheetTreeElement extends UI.TreeOutline.TreeElement {
+  private eventListener: Common.EventTarget.EventDescriptor|null = null;
+
+  constructor(private readonly adoptedStyleSheet: SDK.DOMModel.AdoptedStyleSheet) {
+    super('');
+    const header = adoptedStyleSheet.cssModel.styleSheetHeaderForId(adoptedStyleSheet.id);
+    if (header) {
+      AdoptedStyleSheetTreeElement.createContents(header, this);
+    } else {
+      this.eventListener = adoptedStyleSheet.cssModel.addEventListener(
+          SDK.CSSModel.Events.StyleSheetAdded, this.onStyleSheetAdded, this);
+    }
+  }
+
+  onStyleSheetAdded({data: header}: Common.EventTarget.EventTargetEvent<SDK.CSSStyleSheetHeader.CSSStyleSheetHeader>):
+      void {
+    if (header.id === this.adoptedStyleSheet.id) {
+      AdoptedStyleSheetTreeElement.createContents(header, this);
+      this.adoptedStyleSheet.cssModel.removeEventListener(
+          SDK.CSSModel.Events.StyleSheetAdded, this.onStyleSheetAdded, this);
+      this.eventListener = null;
+    }
+  }
+
+  static createContents(header: SDK.CSSStyleSheetHeader.CSSStyleSheetHeader, treeElement: UI.TreeOutline.TreeElement):
+      void {
+    const documentElement = treeElement.listItemElement.createChild('span');
+    const linkText = header.sourceURL;
+    UI.UIUtils.createTextChild(documentElement, '#adopted-style-sheet' + (linkText ? ' (' : ''));
+    if (linkText) {
+      documentElement.appendChild(Components.Linkifier.Linkifier.linkifyURL(linkText, {
+        text: linkText,
+        preventClick: true,
+        showColumnNumber: false,
+        inlineFrameIndex: 0,
+      }));
+      UI.UIUtils.createTextChild(documentElement, ')');
+    }
+    treeElement.appendChild(new AdoptedStyleSheetContentsTreeElement(header));
+  }
+}
+
+export class AdoptedStyleSheetContentsTreeElement extends UI.TreeOutline.TreeElement {
+  constructor(private readonly styleSheetHeader: SDK.CSSStyleSheetHeader.CSSStyleSheetHeader) {
+    super('');
+  }
+
+  override onbind(): void {
+    this.styleSheetHeader.cssModel().addEventListener(
+        SDK.CSSModel.Events.StyleSheetChanged, this.onStyleSheetChanged, this);
+    void this.onpopulate();
+  }
+
+  override onunbind(): void {
+    this.styleSheetHeader.cssModel().removeEventListener(
+        SDK.CSSModel.Events.StyleSheetChanged, this.onStyleSheetChanged, this);
+  }
+
+  override async onpopulate(): Promise<void> {
+    const data = await this.styleSheetHeader.requestContentData();
+    if (!TextUtils.ContentData.ContentData.isError(data) && data.isTextContent) {
+      this.listItemElement.removeChildren();
+      const newNode = this.listItemElement.createChild('span', 'webkit-html-text-node webkit-html-css-node');
+      newNode.setAttribute('jslog', `${VisualLogging.value('css-text-node').track({change: true, dblclick: true})}`);
+      const text = data.text;
+      newNode.textContent = text.replace(/^[\n\r]+|\s+$/g, '');
+      void CodeHighlighter.CodeHighlighter.highlightNode(newNode, 'text/css');
+    }
+  }
+
+  onStyleSheetChanged({data: {styleSheetId}}: Common.EventTarget.EventTargetEvent<SDK.CSSModel.StyleSheetChangedEvent>):
+      void {
+    if (styleSheetId === this.styleSheetHeader.id) {
+      void this.onpopulate();
+    }
+  }
+}

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;
@@ -200,7 +200,7 @@ export class ColorSwatchPopoverIcon extends Common.ObjectWrapper.ObjectWrapper<C
       return;
     }
 
-    const color = this.swatch.getColor();
+    const color = this.swatch.color;
     if (!color) {
       return;
     }
@@ -277,7 +277,7 @@ export class ColorSwatchPopoverIcon extends Common.ObjectWrapper.ObjectWrapper<C
       return;
     }
 
-    this.swatch.renderColor(color);
+    this.swatch.color = color;
     this.dispatchEventToListeners(ColorSwatchPopoverIconEvents.COLOR_CHANGED, color);
   }
 

package/front_end/panels/elements/ComputedStyleWidget.ts

@@ -82,7 +82,13 @@ const UIStrings = {
    * @description Context menu item in Elements panel to navigate to the corresponding CSS style rule
    * for this computed property.
    */
-  navigateToStyle: 'Navigate to style',
+  navigateToStyle: 'Navigate to styles',
+  /**
+   * @description Text announced to screen readers when a filter is applied to the computed styles list, informing them of the filter term and the number of results.
+   * @example {example} PH1
+   * @example {5} PH2
+   */
+  filterUpdateAriaText: `Filter applied: {PH1}. Total Results: {PH2}`,
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/elements/ComputedStyleWidget.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -201,8 +207,8 @@ class ColorRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.ColorMatc
     }
 
     const swatch = new InlineEditor.ColorSwatch.ColorSwatch();
-    swatch.setReadonly(true);
-    swatch.renderColor(color);
+    swatch.readonly = true;
+    swatch.color = color;
     const valueElement = document.createElement('span');
     valueElement.textContent = match.text;
 
@@ -600,9 +606,14 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
     return result;
   }
 
-  private onFilterChanged(event: Common.EventTarget.EventTargetEvent<string>): void {
-    void this.filterComputedStyles(
+  private async onFilterChanged(event: Common.EventTarget.EventTargetEvent<string>): Promise<void> {
+    await this.filterComputedStyles(
         event.data ? new RegExp(Platform.StringUtilities.escapeForRegExp(event.data), 'i') : null);
+
+    if (event.data && this.#computedStylesTree.data && this.#computedStylesTree.data.tree) {
+      UI.ARIAUtils.LiveAnnouncer.alert(i18nString(
+          UIStrings.filterUpdateAriaText, {PH1: event.data, PH2: this.#computedStylesTree.data.tree.length}));
+    }
   }
 
   async filterComputedStyles(regex: RegExp|null): Promise<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';
@@ -322,6 +324,8 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     this.#domTreeWidget.onSelectedNodeChanged = this.selectedNodeChanged.bind(this);
     this.#domTreeWidget.onElementsTreeUpdated = this.updateBreadcrumbIfNeeded.bind(this);
     this.#domTreeWidget.onDocumentUpdated = this.documentUpdated.bind(this);
+    this.#domTreeWidget.onElementExpanded = this.handleElementExpanded.bind(this);
+    this.#domTreeWidget.onElementCollapsed = this.handleElementCollapsed.bind(this);
     this.#domTreeWidget.setWordWrap(Common.Settings.Settings.instance().moduleSetting('dom-word-wrap').get());
 
     SDK.TargetManager.TargetManager.instance().observeModels(SDK.DOMModel.DOMModel, this, {scoped: true});
@@ -332,6 +336,23 @@ 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.resolveInitialState.bind(this), this.#domTreeWidget.element);
+    }
+  }
+
+  private handleElementExpanded(): void {
+    if (Annotations.AnnotationRepository.annotationsEnabled()) {
+      void PanelCommon.AnnotationManager.instance().resolveAnnotationsOfType(Annotations.AnnotationType.ELEMENT_NODE);
+    }
+  }
+
+  private handleElementCollapsed(): void {
+    if (Annotations.AnnotationRepository.annotationsEnabled()) {
+      void PanelCommon.AnnotationManager.instance().resolveAnnotationsOfType(Annotations.AnnotationType.ELEMENT_NODE);
+    }
   }
 
   private initializeFullAccessibilityTreeView(): void {
@@ -484,6 +505,10 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     super.wasShown();
     UI.Context.Context.instance().setFlavor(ElementsPanel, this);
     this.#domTreeWidget.show(this.domTreeContainer);
+
+    if (Annotations.AnnotationRepository.annotationsEnabled()) {
+      void PanelCommon.AnnotationManager.instance().resolveAnnotationsOfType(Annotations.AnnotationType.ELEMENT_NODE);
+    }
   }
 
   override willHide(): void {
@@ -1169,6 +1194,56 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     this.#domTreeWidget.copyStyles(node);
   }
 
+  async resolveInitialState(
+      parentElement: Element, reveal: boolean, lookupId: string,
+      anchor?: SDK.DOMModel.DOMNode|SDK.NetworkRequest.NetworkRequest): Promise<{x: number, y: number}|null> {
+    if (!this.isShowing()) {
+      return null;
+    }
+
+    if (!anchor) {
+      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;
+      }
+      anchor = foundNode;
+    }
+
+    const element = this.#domTreeWidget.treeElementForNode(anchor as SDK.DOMModel.DOMNode);
+    if (!element) {
+      return null;
+    }
+
+    if (reveal) {
+      // The node must have been revealed in order to calculate its position.
+      await Common.Revealer.reveal(anchor);
+    }
+
+    // The tree element element starts at the top-left of the expand/collapse arrow). We
+    // want to aim for the tagname instead.
+    const offsetToTagName = 22;
+    const yPadding = 5;
+
+    const targetRect = element.listItemElement.getBoundingClientRect();
+    const parentRect = parentElement.getBoundingClientRect();
+    const relativeX = targetRect.x - parentRect.x + offsetToTagName;
+    const relativeY = targetRect.y - parentRect.y + yPadding;
+    return {x: relativeX, y: relativeY};
+  }
+
   protected static firstInspectElementCompletedForTest = function(): void {};
   protected static firstInspectElementNodeNameForTest = '';
 }

package/front_end/panels/elements/ElementsSidebarPane.ts

@@ -1,7 +1,6 @@
 // Copyright 2014 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 type * as SDK from '../../core/sdk/sdk.js';
@@ -14,8 +13,7 @@ export class ElementsSidebarPane extends UI.Widget.VBox {
   private readonly updateThrottler: Common.Throttler.Throttler;
   private updateWhenVisible: boolean;
   constructor(computedStyleModel: ComputedStyleModel, delegatesFocus?: boolean) {
-    super({useShadowDom: true, delegatesFocus});
-    this.element.classList.add('flex-none');
+    super({useShadowDom: true, delegatesFocus, classes: ['flex-none']});
     this.computedStyleModelInternal = computedStyleModel;
     this.computedStyleModelInternal.addEventListener(Events.CSS_MODEL_CHANGED, this.onCSSModelChanged, this);
     this.computedStyleModelInternal.addEventListener(Events.COMPUTED_STYLE_CHANGED, this.onComputedStyleChanged, this);