Group adopted style sheets under an #adopted-style-sheets node

Updates display of adopted style sheets in the DOM tree to be under an #adopted-style-sheets node so that they don't create clutter when there are a lot of them and the user isn't interested in them.

Drive-by: Move the generated package.json file up a level because the hosted server needs it too to support running e2e tests in a full chromium checkout.

Fixed: 476399197
Change-Id: Ia7208bcf3bb9c9b1621ec6b103a6390d218b9f9e
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7549168
Commit-Queue: Eric Leese <leese@chromium.org>
Auto-Submit: Eric Leese <leese@chromium.org>
Reviewed-by: Philip Pfaffe <pfaffe@chromium.org>

Author: Eric Leese

BUILD.gn

@@ -212,3 +212,6 @@ copy_to_gen("favicon") {
 group("mcp") {
   deps = [ "./mcp" ]
 }
+
+# TODO(@nvitkov): When http://b/469573569 is fixed
+write_file("$target_gen_dir/package.json", "{}")

front_end/panels/elements/AdoptedStyleSheetTreeElement.test.ts

@@ -98,13 +98,18 @@ describeWithMockConnection('AdoptedStyleSheetTreeElement highlighting', () => {
       length: initialCSS.length,
       loadingFailed: false,
     });
-    const adoptedStyleSheetTreeElement =
-        new Elements.AdoptedStyleSheetTreeElement.AdoptedStyleSheetTreeElement(adoptedSheet);
-    shadowRootTreeElement.appendChild(adoptedStyleSheetTreeElement);
+    const adoptedStyleSheetSetTreeElement =
+        new Elements.AdoptedStyleSheetTreeElement.AdoptedStyleSheetSetTreeElement([adoptedSheet]);
+    shadowRootTreeElement.appendChild(adoptedStyleSheetSetTreeElement);
     await shadowRootTreeElement.onpopulate();
     shadowRootTreeElement.expand();
     assert.strictEqual(shadowRootTreeElement.childCount(), 1);
-    assert.strictEqual(shadowRootTreeElement.children()[0], adoptedStyleSheetTreeElement);
+    assert.strictEqual(shadowRootTreeElement.children()[0], adoptedStyleSheetSetTreeElement);
+    await adoptedStyleSheetSetTreeElement.onpopulate();
+    adoptedStyleSheetSetTreeElement.expand();
+    assert.strictEqual(adoptedStyleSheetSetTreeElement.childCount(), 1);
+    const adoptedStyleSheetTreeElement = adoptedStyleSheetSetTreeElement.children()[0] as
+        Elements.AdoptedStyleSheetTreeElement.AdoptedStyleSheetTreeElement;
     await adoptedStyleSheetTreeElement.onpopulate();
     adoptedStyleSheetTreeElement.expand();
     assert.strictEqual(adoptedStyleSheetTreeElement.childCount(), 1);

front_end/panels/elements/AdoptedStyleSheetTreeElement.ts

@@ -13,6 +13,17 @@ import {PanelUtils} from '../utils/utils.js';
 
 import type {EditorHandles} from './ElementsTreeElement.js';
 
+export class AdoptedStyleSheetSetTreeElement extends UI.TreeOutline.TreeElement {
+  constructor(readonly adoptedStyleSheets: SDK.DOMModel.AdoptedStyleSheet[]) {
+    super('');
+    const documentElement = this.listItemElement.createChild('span');
+    UI.UIUtils.createTextChild(documentElement, '#adopted-style-sheets');
+    for (const adoptedStyleSheet of adoptedStyleSheets) {
+      this.appendChild(new AdoptedStyleSheetTreeElement(adoptedStyleSheet));
+    }
+  }
+}
+
 export class AdoptedStyleSheetTreeElement extends UI.TreeOutline.TreeElement {
   private eventListener: Common.EventTarget.EventDescriptor|null = null;
 

front_end/panels/elements/ElementsTreeOutline.ts

@@ -47,7 +47,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 import {html, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
-import {AdoptedStyleSheetTreeElement} from './AdoptedStyleSheetTreeElement.js';
+import {AdoptedStyleSheetSetTreeElement, AdoptedStyleSheetTreeElement} from './AdoptedStyleSheetTreeElement.js';
 import {getElementIssueDetails} from './ElementIssueUtils.js';
 import {ElementsPanel} from './ElementsPanel.js';
 import {ElementsTreeElement, InitialChildrenLimit, isOpeningTag} from './ElementsTreeElement.js';
@@ -917,15 +917,21 @@ export class ElementsTreeOutline extends
   }
 
   highlightAdoptedStyleSheet(adoptedStyleSheet: SDK.DOMModel.AdoptedStyleSheet): void {
-    const parentNode = !this.includeRootDOMNode && adoptedStyleSheet.parent === this.rootDOMNode && this.rootDOMNode ?
+    const parentDOMNode =
+        !this.includeRootDOMNode && adoptedStyleSheet.parent === this.rootDOMNode && this.rootDOMNode ?
         this.rootElement() :
         this.createTreeElementFor(adoptedStyleSheet.parent);
-    if (!parentNode) {
+    if (!parentDOMNode) {
+      return;
+    }
+    const parentNode = parentDOMNode.firstChild();
+    if (!(parentNode && parentNode instanceof AdoptedStyleSheetSetTreeElement)) {
       return;
     }
 
     for (const child of parentNode.children()) {
       if (child instanceof AdoptedStyleSheetTreeElement && child.adoptedStyleSheet === adoptedStyleSheet) {
+        parentNode.expand();
         child.highlight();
         return;
       }
@@ -980,8 +986,8 @@ export class ElementsTreeOutline extends
     this.dispatchEventToListeners(ElementsTreeOutline.Events.ElementsTreeUpdated, nodes);
   }
 
-  findTreeElement(node: SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet): ElementsTreeElement|null {
-    if (node instanceof SDK.DOMModel.AdoptedStyleSheet) {
+  findTreeElement(node: SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet[]): ElementsTreeElement|null {
+    if (node instanceof Array) {
       return null;
     }
     let treeElement = this.lookUpTreeElement(node);
@@ -1768,10 +1774,10 @@ export class ElementsTreeOutline extends
     }
   }
 
-  private createElementTreeElement(node: SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet, isClosingTag?: boolean):
+  private createElementTreeElement(node: SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet[], isClosingTag?: boolean):
       UI.TreeOutline.TreeElement {
-    if (node instanceof SDK.DOMModel.AdoptedStyleSheet) {
-      return new AdoptedStyleSheetTreeElement(node);
+    if (node instanceof Array) {
+      return new AdoptedStyleSheetSetTreeElement(node);
     }
     const treeElement = new ElementsTreeElement(node, isClosingTag);
     treeElement.setExpandable(!isClosingTag && this.hasVisibleChildren(node));
@@ -1800,8 +1806,12 @@ export class ElementsTreeOutline extends
     return treeElement.childAt(index) as ElementsTreeElement;
   }
 
-  private visibleChildren(node: SDK.DOMModel.DOMNode): Array<SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet> {
-    let visibleChildren = [...node.adoptedStyleSheetsForNode, ...ElementsTreeElement.visibleShadowRoots(node)];
+  private visibleChildren(node: SDK.DOMModel.DOMNode): Array<SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet[]> {
+    const visibleChildren: Array<SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet[]> = [];
+    if (node.adoptedStyleSheetsForNode.length) {
+      visibleChildren.push(node.adoptedStyleSheetsForNode);
+    }
+    visibleChildren.push(...ElementsTreeElement.visibleShadowRoots(node));
 
     const contentDocument = node.contentDocument();
     if (contentDocument) {
@@ -1838,7 +1848,7 @@ export class ElementsTreeOutline extends
       if (!this.showHTMLCommentsSetting.get()) {
         children = children.filter(n => n.nodeType() !== Node.COMMENT_NODE);
       }
-      visibleChildren = visibleChildren.concat(children);
+      visibleChildren.push(...children);
     }
 
     const afterPseudoElement = node.afterPseudoElement();
@@ -1927,7 +1937,7 @@ export class ElementsTreeOutline extends
   }
 
   insertChildElement(
-      treeElement: ElementsTreeElement|TopLayerContainer, child: SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet,
+      treeElement: ElementsTreeElement|TopLayerContainer, child: SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet[],
       index: number, isClosingTag?: boolean): UI.TreeOutline.TreeElement {
     const newElement = this.createElementTreeElement(child, isClosingTag);
     treeElement.insertChild(newElement, index);
@@ -1957,12 +1967,12 @@ export class ElementsTreeOutline extends
 
     const node = treeElement.node();
     const visibleChildren = this.visibleChildren(node);
-    const visibleChildrenSet = new Set<SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet>(visibleChildren);
+    const visibleChildrenSet = new Set<SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet[]>(visibleChildren);
 
     // Remove any tree elements that no longer have this node as their parent and save
     // all existing elements that could be reused. This also removes closing tag element.
-    const existingTreeElements =
-        new Map<SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet, UI.TreeOutline.TreeElement&ElementsTreeElement>();
+    const existingTreeElements = new Map<
+        SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet[], UI.TreeOutline.TreeElement&ElementsTreeElement>();
     for (let i = treeElement.childCount() - 1; i >= 0; --i) {
       const existingTreeElement = treeElement.childAt(i);
       if (!(existingTreeElement instanceof ElementsTreeElement)) {

test/BUILD.gn

@@ -32,9 +32,6 @@ node_ts_library("run") {
   deps = [ "shared" ]
 }
 
-# TODO(@nvitkov): When http://b/469573569 is fixed
-write_file("$target_gen_dir/package.json", "{}")
-
 source_root = rebase_path("//$devtools_location", target_gen_dir)
 checkout_root = rebase_path("//", target_gen_dir)
 build_root = rebase_path(root_build_dir, target_gen_dir)

test/e2e/elements/adopted-stylesheets.test.ts

@@ -5,6 +5,7 @@
 import {assert} from 'chai';
 
 import {
+  elementWithPartialText,
   getContentOfSelectedNode,
   waitForAndClickTreeElementWithPartialText,
   waitForChildrenOfSelectedElementNode,
@@ -21,14 +22,14 @@ describe('The Elements tab', function() {
     await inspectedPage.goToResource('elements/adopted-stylesheet.html');
     const tree = await devToolsPage.waitForAria('Page DOM');
     const treeContent = await devToolsPage.waitForTextNotMatching(tree, /^\<html\>/);
-    const expectedAdoptedStyleSheet = '#adopted-style-sheet/* For document */';
+    const expectedAdoptedStyleSheet = '#adopted-style-sheets#adopted-style-sheet/* For document */';
     assertStartsWith(treeContent, expectedAdoptedStyleSheet);
   });
 
   it('updates adopted stylesheets in document root', async ({devToolsPage, inspectedPage}) => {
     await inspectedPage.goToResource('elements/adopted-stylesheet.html');
     const tree = await devToolsPage.waitForAria('Page DOM');
-    const initialAdoptedStyleSheet = '#adopted-style-sheet/* For document */';
+    const initialAdoptedStyleSheet = '#adopted-style-sheets#adopted-style-sheet/* For document */';
     assertStartsWith(await tree.evaluate(e => e.textContent), initialAdoptedStyleSheet);
     await inspectedPage.evaluate(() => {
       document.adoptedStyleSheets = [];
@@ -38,13 +39,15 @@ describe('The Elements tab', function() {
       document.adoptedStyleSheets = [new CSSStyleSheet(), new CSSStyleSheet()];
     });
     assertStartsWith(
-        await devToolsPage.waitForTextNotMatching(tree, /^\<html\>/), '#adopted-style-sheet#adopted-style-sheet<html>');
+        await devToolsPage.waitForTextNotMatching(tree, /^\<html\>/),
+        '#adopted-style-sheets#adopted-style-sheet#adopted-style-sheet<html>');
     await inspectedPage.evaluate(() => {
       document.adoptedStyleSheets[0].replaceSync('/**/');
     });
     assertStartsWith(
-        await devToolsPage.waitForTextNotMatching(tree, /^#adopted-style-sheet#adopted-style-sheet/),
-        '#adopted-style-sheet/**/#adopted-style-sheet<html>');
+        await devToolsPage.waitForTextNotMatching(
+            tree, /^#adopted-style-sheets#adopted-style-sheet#adopted-style-sheet/),
+        '#adopted-style-sheets#adopted-style-sheet/**/#adopted-style-sheet<html>');
   });
 
   it('shows link to imported stylesheet', async ({devToolsPage, inspectedPage}) => {
@@ -71,15 +74,53 @@ describe('The Elements tab', function() {
     await devToolsPage.pressKey('ArrowRight');
     await waitForPartialContentOfSelectedElementsNode('#shadow-root', devToolsPage);
 
+    // One more time to get the adopted stylesheet set.
+    await devToolsPage.pressKey('ArrowRight');
+    await waitForChildrenOfSelectedElementNode(devToolsPage);
+    await devToolsPage.pressKey('ArrowRight');
+    await waitForPartialContentOfSelectedElementsNode('#adopted-style-sheets', devToolsPage);
+
     // One more time to get the adopted stylesheet.
     await devToolsPage.pressKey('ArrowRight');
     await waitForChildrenOfSelectedElementNode(devToolsPage);
     await devToolsPage.pressKey('ArrowRight');
-    await waitForPartialContentOfSelectedElementsNode('#adopted-style-sheet', devToolsPage);
+    await waitForPartialContentOfSelectedElementsNode('#adopted-style-sheet \(', devToolsPage);
 
     // Check that the link to the imported stylesheet is present.
     assert.match(
         await getContentOfSelectedNode(devToolsPage),
         /#adopted-style-sheet \(https?:\/\/.*\/test\/e2e\/resources\/elements\/adopted-style.css\)/);
   });
+
+  it('reveals adopted stylesheets in document root when clicking link from styles pane',
+     async ({devToolsPage, inspectedPage}) => {
+       await inspectedPage.goToResource('elements/adopted-stylesheet.html');
+       const tree = await devToolsPage.waitForAria('Page DOM');
+       await devToolsPage.waitForTextNotMatching(tree, /^\<html\>/);
+       const styleSheets = await elementWithPartialText('#adopted-style-sheets', devToolsPage);
+       assert.isOk(styleSheets);
+       const expectExpanded = async (expanded: boolean) =>
+           assert.strictEqual(await styleSheets.evaluate(e => e.getAttribute('aria-expanded')), `${expanded}`);
+       await expectExpanded(false);
+
+       // Check to make sure we have the correct node selected after opening a file
+       await waitForPartialContentOfSelectedElementsNode('<body>', devToolsPage);
+       // This isn't consistently expanded, so this arrow right might expand it
+       // or it might move the selected node, but either way it should change
+       // the text of the selected node.
+       const bodyNodeText = await getContentOfSelectedNode(devToolsPage);
+       await devToolsPage.pressKey('ArrowRight');
+       await waitForSelectedNodeChange(bodyNodeText, devToolsPage);
+
+       // Click the node for this test.
+       await waitForAndClickTreeElementWithPartialText('"from-document"', devToolsPage);
+
+       // Click the link to the adopted stylesheet in the styles pane.
+       await devToolsPage.click(
+           '.matched-styles[aria-label=".from-document, css selector"] > .styles-section-subtitle > devtools-widget');
+
+       // The adopted stylesheet set should now be expanded.
+       await devToolsPage.waitForClass(styleSheets, 'expanded');
+       await expectExpanded(true);
+     });
 });

test/e2e/helpers/elements-helpers.ts

@@ -281,7 +281,7 @@ export const waitForElementWithPartialText = async (text: string, devToolsPage:
   return await devToolsPage.waitForFunction(async () => await elementWithPartialText(text, devToolsPage));
 };
 
-const elementWithPartialText = async (text: string, devToolsPage: DevToolsPage) => {
+export const elementWithPartialText = async (text: string, devToolsPage: DevToolsPage) => {
   const tree = await devToolsPage.waitFor('Page DOM[role="tree"]', undefined, undefined, 'aria');
   const elements = await devToolsPage.$$('[role="treeitem"]', tree, 'aria');
   for (const handle of elements) {