chrome-devtools-frontend 1.0.1550444 → 1.0.1553956

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

@@ -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

@@ -324,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});
@@ -337,8 +339,19 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
 
     if (Annotations.AnnotationRepository.annotationsEnabled()) {
       PanelCommon.AnnotationManager.instance().initializePlacementForAnnotationType(
-          Annotations.AnnotationType.ELEMENT_NODE, this.resolveRelativePosition.bind(this),
-          this.#domTreeWidget.element);
+          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);
     }
   }
 
@@ -492,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 {
@@ -1177,10 +1194,14 @@ 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) {
+  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;
@@ -1198,23 +1219,28 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
       if (!foundNode) {
         return null;
       }
-      node = foundNode;
+      anchor = foundNode;
     }
 
-    const element = this.#domTreeWidget.treeElementForNode(node);
+    const element = this.#domTreeWidget.treeElementForNode(anchor as SDK.DOMModel.DOMNode);
     if (!element) {
       return null;
     }
 
-    if (revealNode) {
+    if (reveal) {
       // The node must have been revealed in order to calculate its position.
-      await Common.Revealer.reveal(node);
+      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 = 0;
-    const relativeY = targetRect.y - parentRect.y;
+    const relativeX = targetRect.x - parentRect.x + offsetToTagName;
+    const relativeY = targetRect.y - parentRect.y + yPadding;
     return {x: relativeX, y: relativeY};
   }
 

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);