Link to adopted stylesheets

If a style is a constructed stylesheet with no source url, the text
indicating this is now a link that causes the adopted stylesheet to be
scrolled into view and highlighted.

Bug: 40802935
Change-Id: I4298ea270868f360c14a4ced3f99be00dcc927a7
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7485031
Reviewed-by: Philip Pfaffe <pfaffe@chromium.org>
Commit-Queue: Eric Leese <leese@chromium.org>

Author: Eric Leese

front_end/core/sdk/DOMModel.ts

@@ -882,7 +882,7 @@ export class DOMNode extends Common.ObjectWrapper.ObjectWrapper<DOMNodeEventType
   }
 
   private toAdoptedStyleSheets(ids: Protocol.DOM.StyleSheetId[]): AdoptedStyleSheet[] {
-    return ids.map(id => (new AdoptedStyleSheet(id, this.#domModel.cssModel())));
+    return ids.map(id => (new AdoptedStyleSheet(id, this)));
   }
 
   setAdoptedStyleSheets(ids: Protocol.DOM.StyleSheetId[]): void {
@@ -1280,7 +1280,11 @@ export class DOMDocument extends DOMNode {
 }
 
 export class AdoptedStyleSheet {
-  constructor(readonly id: Protocol.DOM.StyleSheetId, readonly cssModel: CSSModel) {
+  constructor(readonly id: Protocol.DOM.StyleSheetId, readonly parent: DOMNode) {
+  }
+
+  get cssModel(): CSSModel {
+    return this.parent.domModel().cssModel();
   }
 }
 

front_end/panels/common/DOMLinkifier.ts

@@ -5,6 +5,7 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import type * as Protocol from '../../generated/protocol.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {Directives, html, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -212,14 +213,16 @@ const DEFERRED_DEFAULT_VIEW: DeferredView = (input, _output, target: HTMLElement
 export class DeferredDOMNodeLink extends UI.Widget.Widget {
   #deferredNode: SDK.DOMModel.DeferredDOMNode|undefined = undefined;
   #options: Options|undefined = undefined;
+  #styleSheetId: Protocol.DOM.StyleSheetId|undefined = undefined;
   #view: DeferredView;
 
   constructor(
       element?: HTMLElement, deferredNode?: SDK.DOMModel.DeferredDOMNode, options?: Options,
-      view: DeferredView = DEFERRED_DEFAULT_VIEW) {
+      styleSheetId?: Protocol.DOM.StyleSheetId, view: DeferredView = DEFERRED_DEFAULT_VIEW) {
     super(element, {useShadowDom: true});
     this.element.classList.remove('vbox');
     this.#deferredNode = deferredNode;
+    this.#styleSheetId = styleSheetId;
     this.#options = options;
     this.#view = view;
     this.performUpdate();
@@ -230,6 +233,14 @@ export class DeferredDOMNodeLink extends UI.Widget.Widget {
       preventKeyboardFocus: this.#options?.preventKeyboardFocus,
       onClick: () => {
         this.#deferredNode?.resolve?.(node => {
+          if (node && this.#styleSheetId) {
+            for (const adoptedStyle of node.adoptedStyleSheetsForNode) {
+              if (adoptedStyle.id === this.#styleSheetId) {
+                void Common.Revealer.reveal(adoptedStyle);
+                return;
+              }
+            }
+          }
           void Common.Revealer.reveal(node);
           void node?.scrollIntoView();
         });

front_end/panels/elements/AdoptedStyleSheetTreeElement.ts

@@ -9,11 +9,12 @@ import * as CodeHighlighter from '../../ui/components/code_highlighter/code_high
 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';
+import {PanelUtils} from '../utils/utils.js';
 
 export class AdoptedStyleSheetTreeElement extends UI.TreeOutline.TreeElement {
   private eventListener: Common.EventTarget.EventDescriptor|null = null;
 
-  constructor(private readonly adoptedStyleSheet: SDK.DOMModel.AdoptedStyleSheet) {
+  constructor(readonly adoptedStyleSheet: SDK.DOMModel.AdoptedStyleSheet) {
     super('');
     const header = adoptedStyleSheet.cssModel.styleSheetHeaderForId(adoptedStyleSheet.id);
     if (header) {
@@ -50,6 +51,10 @@ export class AdoptedStyleSheetTreeElement extends UI.TreeOutline.TreeElement {
     }
     treeElement.appendChild(new AdoptedStyleSheetContentsTreeElement(header));
   }
+
+  highlight(): void {
+    PanelUtils.highlightElement(this.listItemElement);
+  }
 }
 
 export class AdoptedStyleSheetContentsTreeElement extends UI.TreeOutline.TreeElement {

front_end/panels/elements/ElementsPanel.ts

@@ -795,7 +795,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     return this.#domTreeWidget.selectedDOMNode();
   }
 
-  selectDOMNode(node: SDK.DOMModel.DOMNode, focus?: boolean): void {
+  selectDOMNode(node: SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet, focus?: boolean): void {
     this.#domTreeWidget.selectDOMNode(node, focus);
   }
 
@@ -899,6 +899,18 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     this.notFirstInspectElement = true;
   }
 
+  async revealAndSelectAdoptedStyleSheet(nodeToReveal: SDK.DOMModel.AdoptedStyleSheet, opts?: RevealAndSelectNodeOpts):
+      Promise<void> {
+    const {showPanel = true, focusNode = false} = opts ?? {};
+    this.omitDefaultSelection = true;
+
+    if (showPanel) {
+      await UI.ViewManager.ViewManager.instance().showView('elements', false, !focus);
+    }
+    this.selectDOMNode(nodeToReveal, focusNode);
+    delete this.omitDefaultSelection;
+  }
+
   private showUAShadowDOMChanged(): void {
     this.#domTreeWidget.reload();
   }
@@ -1309,10 +1321,12 @@ export class ContextMenuProvider implements
   }
 }
 
-export class DOMNodeRevealer implements
-    Common.Revealer.Revealer<SDK.DOMModel.DOMNode|SDK.DOMModel.DeferredDOMNode|SDK.RemoteObject.RemoteObject> {
-  reveal(node: SDK.DOMModel.DOMNode|SDK.DOMModel.DeferredDOMNode|SDK.RemoteObject.RemoteObject, omitFocus?: boolean):
-      Promise<void> {
+export class DOMNodeRevealer implements Common.Revealer.Revealer<
+    SDK.DOMModel.DOMNode|SDK.DOMModel.DeferredDOMNode|SDK.RemoteObject.RemoteObject|SDK.DOMModel.AdoptedStyleSheet> {
+  reveal(
+      node: SDK.DOMModel.DOMNode|SDK.DOMModel.DeferredDOMNode|SDK.RemoteObject.RemoteObject|
+      SDK.DOMModel.AdoptedStyleSheet,
+      omitFocus?: boolean): Promise<void> {
     const panel = ElementsPanel.instance();
     panel.pendingNodeReveal = true;
 
@@ -1332,7 +1346,7 @@ export class DOMNodeRevealer implements
 
     function revealPromise(
         resolve: () => void, reject: (arg0: Platform.UserVisibleError.UserVisibleError) => void): void {
-      if (node instanceof SDK.DOMModel.DOMNode) {
+      if (node instanceof SDK.DOMModel.DOMNode || node instanceof SDK.DOMModel.AdoptedStyleSheet) {
         onNodeResolved((node));
       } else if (node instanceof SDK.DOMModel.DeferredDOMNode) {
         (node).resolve(checkDeferredDOMNodeThenReveal);
@@ -1346,14 +1360,15 @@ export class DOMNodeRevealer implements
         }
       }
 
-      function onNodeResolved(resolvedNode: SDK.DOMModel.DOMNode): void {
+      function onNodeResolved(resolvedNode: SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet): void {
         panel.pendingNodeReveal = false;
 
         // A detached node could still have a parent and ownerDocument
         // properties, which means stepping up through the hierarchy to ensure
         // that the root node is the document itself. Any break implies
         // detachment.
-        let currentNode: SDK.DOMModel.DOMNode = resolvedNode;
+        let currentNode: SDK.DOMModel.DOMNode =
+            resolvedNode instanceof SDK.DOMModel.AdoptedStyleSheet ? resolvedNode.parent : resolvedNode;
         while (currentNode.parentNode) {
           currentNode = currentNode.parentNode;
         }
@@ -1367,7 +1382,11 @@ export class DOMNodeRevealer implements
         }
 
         if (resolvedNode) {
-          void panel.revealAndSelectNode(resolvedNode, {showPanel: true, focusNode: !omitFocus}).then(resolve);
+          const opts: RevealAndSelectNodeOpts = {showPanel: true, focusNode: !omitFocus};
+          const promise = resolvedNode instanceof SDK.DOMModel.AdoptedStyleSheet ?
+              panel.revealAndSelectAdoptedStyleSheet(resolvedNode, opts) :
+              panel.revealAndSelectNode(resolvedNode, opts);
+          void promise.then(resolve);
           return;
         }
         const msg = i18nString(UIStrings.nodeCannotBeFoundInTheCurrent);

front_end/panels/elements/ElementsTreeOutline.ts

@@ -274,8 +274,12 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     this.performUpdate();
   }
 
-  selectDOMNode(node: SDK.DOMModel.DOMNode|null, focus?: boolean): void {
-    this.#viewOutput?.elementsTreeOutline?.selectDOMNode(node, focus);
+  selectDOMNode(node: SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet|null, focus?: boolean): void {
+    if (node instanceof SDK.DOMModel.AdoptedStyleSheet) {
+      this.#viewOutput?.elementsTreeOutline?.highlightAdoptedStyleSheet(node);
+    } else {
+      this.#viewOutput?.elementsTreeOutline?.selectDOMNode(node, focus);
+    }
   }
 
   highlightNodeAttribute(node: SDK.DOMModel.DOMNode, attribute: string): void {
@@ -911,6 +915,22 @@ export class ElementsTreeOutline extends
     }
   }
 
+  highlightAdoptedStyleSheet(adoptedStyleSheet: SDK.DOMModel.AdoptedStyleSheet): void {
+    const parentNode = !this.includeRootDOMNode && adoptedStyleSheet.parent === this.rootDOMNode && this.rootDOMNode ?
+        this.rootElement() :
+        this.createTreeElementFor(adoptedStyleSheet.parent);
+    if (!parentNode) {
+      return;
+    }
+
+    for (const child of parentNode.children()) {
+      if (child instanceof AdoptedStyleSheetTreeElement && child.adoptedStyleSheet === adoptedStyleSheet) {
+        child.highlight();
+        return;
+      }
+    }
+  }
+
   editing(): boolean {
     const node = this.selectedDOMNode();
     if (!node) {

front_end/panels/elements/StylePropertiesSection.ts

@@ -409,6 +409,16 @@ export class StylePropertiesSection {
         link.textContent = label;
         return link;
       }
+      if (rule && rule.style.styleSheetId && rule.treeScope) {
+        // Make link for adopted stylesheet.
+        const ownerNode = new SDK.DOMModel.DeferredDOMNode(rule.cssModelInternal.target(), rule.treeScope);
+        const link = document.createElement('devtools-widget') as
+            UI.Widget.WidgetElement<PanelsCommon.DOMLinkifier.DeferredDOMNodeLink>;
+        link.widgetConfig = UI.Widget.widgetConfig(
+            e => new PanelsCommon.DOMLinkifier.DeferredDOMNodeLink(e, ownerNode, undefined, rule.style.styleSheetId));
+        link.textContent = label;
+        return link;
+      }
       return null;
     }
 

front_end/panels/elements/elements-meta.ts

@@ -617,6 +617,7 @@ Common.Revealer.registerRevealer({
       SDK.DOMModel.DOMNode,
       SDK.DOMModel.DeferredDOMNode,
       SDK.RemoteObject.RemoteObject,
+      SDK.DOMModel.AdoptedStyleSheet,
     ];
   },
   destination: Common.Revealer.RevealerDestination.ELEMENTS_PANEL,