From e573a564ca72fd39ca7d37085cc7780d3cc105d7 Mon Sep 17 00:00:00 2001
From: Johan Bay <jobay@google.com>
Date: Tue, 1 Mar 2022 07:45:11 +0000
Subject: [PATCH] Fix naming of anonymous layers in layers widget

Bug: 1240596
Change-Id: I9bcf3d4cb84157208d1deb08221bf4b0598dc74c
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3492520
Reviewed-by: Changhao Han <changhaohan@chromium.org>
Commit-Queue: Johan Bay <jobay@chromium.org>
---
 front_end/core/sdk/CSSModel.ts                |  4 ++++
 front_end/panels/elements/LayersWidget.ts     |  5 +++--
 .../panels/elements/StylesSidebarPane.ts      | 13 +++++++-----
 .../elements/style-pane-properties_test.ts    | 21 ++++++++++---------
 test/e2e/resources/elements/css-layers.html   | 17 +++++++++++++++
 5 files changed, 43 insertions(+), 17 deletions(-)

diff --git a/front_end/core/sdk/CSSModel.ts b/front_end/core/sdk/CSSModel.ts
index 6c018437ac..89537ebbd7 100644
--- a/front_end/core/sdk/CSSModel.ts
+++ b/front_end/core/sdk/CSSModel.ts
@@ -150,6 +150,10 @@ export class CSSModel extends SDKModel<EventTypes> {
     return this.#sourceMapManager;
   }
 
+  static readableLayerName(text: string): string {
+    return text || '<anonymous>';
+  }
+
   static trimSourceURL(text: string): string {
     let sourceURLIndex = text.lastIndexOf('/*# sourceURL=');
     if (sourceURLIndex === -1) {
diff --git a/front_end/panels/elements/LayersWidget.ts b/front_end/panels/elements/LayersWidget.ts
index 1f54d6ea12..3f964bdb9f 100644
--- a/front_end/panels/elements/LayersWidget.ts
+++ b/front_end/panels/elements/LayersWidget.ts
@@ -84,8 +84,9 @@ export class LayersWidget extends UI.Widget.Widget {
     const makeTreeNode = (parentId: string) =>
         (layer: Protocol.CSS.CSSLayerData): TreeOutline.TreeOutlineUtils.TreeNode<string> => {
           const subLayers = layer.subLayers;
-          const treeNodeData = layer.order + ': ' + layer.name;
-          const id = parentId ? parentId + '.' + layer.name : layer.name;
+          const name = SDK.CSSModel.CSSModel.readableLayerName(layer.name);
+          const treeNodeData = layer.order + ': ' + name;
+          const id = parentId ? parentId + '.' + name : name;
           if (!subLayers) {
             return {treeNodeData, id};
           }
diff --git a/front_end/panels/elements/StylesSidebarPane.ts b/front_end/panels/elements/StylesSidebarPane.ts
index a00b2f39cf..a6648788fe 100644
--- a/front_end/panels/elements/StylesSidebarPane.ts
+++ b/front_end/panels/elements/StylesSidebarPane.ts
@@ -875,7 +875,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       if (parentRule instanceof SDK.CSSRule.CSSStyleRule) {
         const layers = parentRule.layers;
         if ((layers.length || lastLayers) && lastLayers !== layers) {
-          const block = SectionBlock.createLayerBlock(layers);
+          const block = SectionBlock.createLayerBlock(parentRule);
           blocks.push(block);
           sawLayers = true;
           lastLayers = layers;
@@ -1430,18 +1430,21 @@ export class SectionBlock {
     return new SectionBlock(separatorElement);
   }
 
-  static createLayerBlock(layers: SDK.CSSLayer.CSSLayer[]): SectionBlock {
+  static createLayerBlock(rule: SDK.CSSRule.CSSStyleRule): SectionBlock {
     const separatorElement = document.createElement('div');
     separatorElement.className = 'sidebar-separator layer-separator';
     UI.UIUtils.createTextChild(separatorElement.createChild('div'), i18nString(UIStrings.layer));
-    if (!layers.length) {
-      UI.UIUtils.createTextChild(separatorElement.createChild('div'), '\xa0user\xa0agent\xa0stylesheet');
+    const layers = rule.layers;
+    if (!layers.length && rule.origin === Protocol.CSS.StyleSheetOrigin.UserAgent) {
+      const name = rule.origin === Protocol.CSS.StyleSheetOrigin.UserAgent ? '\xa0user\xa0agent\xa0stylesheet' :
+                                                                             '\xa0implicit\xa0outer\xa0layer';
+      UI.UIUtils.createTextChild(separatorElement.createChild('div'), name);
       return new SectionBlock(separatorElement);
     }
     const layerLink = separatorElement.createChild('button') as HTMLButtonElement;
     layerLink.className = 'link';
     layerLink.title = i18nString(UIStrings.clickToRevealLayer);
-    const name = layers.map(layer => layer.text || '<anonymous>').join('.');
+    const name = layers.map(layer => SDK.CSSModel.CSSModel.readableLayerName(layer.text)).join('.');
     layerLink.textContent = name;
     layerLink.onclick = (): Promise<void> => LayersWidget.LayersWidget.instance().revealLayer(name);
     return new SectionBlock(separatorElement);
diff --git a/test/e2e/elements/style-pane-properties_test.ts b/test/e2e/elements/style-pane-properties_test.ts
index 564922b8c9..0e626fd653 100644
--- a/test/e2e/elements/style-pane-properties_test.ts
+++ b/test/e2e/elements/style-pane-properties_test.ts
@@ -374,12 +374,19 @@ describe('The Styles pane', async () => {
 
     const layerSeparators = await waitForFunction(async () => {
       const layers = await $$(LAYER_SEPARATOR_SELECTOR);
-      return layers.length === 3 ? layers : null;
+      return layers.length === 6 ? layers : null;
     });
     assertNotNullOrUndefined(layerSeparators);
 
     const layerText = await Promise.all(layerSeparators.map(element => element.evaluate(node => node.textContent)));
-    assert.deepEqual(layerText.slice(0, -1), ['Layeroverrule', 'Layerbase']);
+    assert.deepEqual(layerText, [
+      'Layer<anonymous>',
+      'Layerimportant',
+      'Layeroverrule',
+      'Layeroverrule.<anonymous>',
+      'Layerbase',
+      'Layer\xa0user\xa0agent\xa0stylesheet',
+    ]);
   });
 
   it('can click @layer separators to open layer tree', async () => {
@@ -390,16 +397,10 @@ describe('The Styles pane', async () => {
     await frontend.keyboard.press('ArrowDown');
     await waitForContentOfSelectedElementsNode('<div class=\u200B"rule1">\u200B</div>\u200B');
 
-    const layerSeparators = await waitForFunction(async () => {
-      const layers = await $$(LAYER_SEPARATOR_SELECTOR);
-      return layers.length === 3 ? layers : null;
-    });
-    assertNotNullOrUndefined(layerSeparators);
-    const overruleButton = await frontend.$('aria/overrule');
-    assertNotNullOrUndefined(overruleButton);
+    const overruleButton = await waitFor('overrule[role="button"]', undefined, undefined, 'aria');
     await click(overruleButton);
 
-    const treeElement = await waitFor('[data-node-key="1: overrule"]');
+    const treeElement = await waitFor('[data-node-key="2: overrule"]');
     assertNotNullOrUndefined(treeElement);
   });
 });
diff --git a/test/e2e/resources/elements/css-layers.html b/test/e2e/resources/elements/css-layers.html
index 354327086d..ca4c2f380f 100644
--- a/test/e2e/resources/elements/css-layers.html
+++ b/test/e2e/resources/elements/css-layers.html
@@ -15,6 +15,23 @@
     .rule1 {
       width: 15px;
     }
+    @layer {
+      .rule1 {
+        width: 16px;
+      }
+    }
+  }
+
+  @layer important {
+    .rule1 {
+      width: 20px !important;
+    }
+  }
+
+  @layer {
+    .rule1 {
+      width: 25px !important;
+    }
   }
 </style>
 <div class="rule1"></div>