feat: add CSS cascade layers support to Styles pane

packages/devtools-frontend-lynx/config/gni/devtools_grd_files.gni

@@ -74,6 +74,7 @@ grd_files_release_sources = [
   "front_end/Images/ic_folder_network.svg",
   "front_end/Images/ic_help_16x16.svg",
   "front_end/Images/ic_info_black_18dp.svg",
+  "front_end/Images/ic_layers_16x16.svg",
   "front_end/Images/ic_memory_16x16.svg",
   "front_end/Images/ic_page_next_16x16_icon.svg",
   "front_end/Images/ic_page_prev_16x16_icon.svg",
@@ -563,6 +564,7 @@ grd_files_debug_sources = [
   "front_end/core/sdk/CPUThrottlingManager.js",
   "front_end/core/sdk/CSSContainerQuery.js",
   "front_end/core/sdk/CSSFontFace.js",
+  "front_end/core/sdk/CSSLayer.js",
   "front_end/core/sdk/CSSMatchedStyles.js",
   "front_end/core/sdk/CSSMedia.js",
   "front_end/core/sdk/CSSMetadata.js",
@@ -845,6 +847,7 @@ grd_files_debug_sources = [
   "front_end/panels/elements/EventListenersWidget.js",
   "front_end/panels/elements/ImagePreviewPopover.js",
   "front_end/panels/elements/InspectElementModeController.js",
+  "front_end/panels/elements/LayersWidget.js",
   "front_end/panels/elements/LayoutSidebarPane.js",
   "front_end/panels/elements/MarkerDecorator.js",
   "front_end/panels/elements/MetricsSidebarPane.js",
@@ -882,6 +885,7 @@ grd_files_debug_sources = [
   "front_end/panels/elements/components/nodeText.css.js",
   "front_end/panels/elements/components/queryContainer.css.js",
   "front_end/panels/elements/components/stylePropertyEditor.css.js",
+  "front_end/panels/elements/layersWidget.css.js",
   "front_end/panels/emulation/AdvancedApp.js",
   "front_end/panels/emulation/DeviceModeModel.js",
   "front_end/panels/emulation/DeviceModeToolbar.js",

packages/devtools-frontend-lynx/config/gni/devtools_image_files.gni

@@ -86,6 +86,7 @@ devtools_svg_sources = [
   "ic_folder_network.svg",
   "ic_help_16x16.svg",
   "ic_info_black_18dp.svg",
+  "ic_layers_16x16.svg",
   "ic_memory_16x16.svg",
   "ic_page_next_16x16_icon.svg",
   "ic_page_prev_16x16_icon.svg",

packages/devtools-frontend-lynx/front_end/core/i18n/locales/en-US.json

@@ -4190,6 +4190,12 @@
   "panels/elements/EventListenersWidget.ts | showListenersOnTheAncestors": {
     "message": "Show listeners on the ancestors"
   },
+  "panels/elements/LayersWidget.ts | cssLayersTitle": {
+    "message": "CSS layers"
+  },
+  "panels/elements/LayersWidget.ts | toggleCSSLayers": {
+    "message": "Toggle CSS Layers view"
+  },
   "panels/elements/MarkerDecorator.ts | domBreakpoint": {
     "message": "DOM Breakpoint"
   },
@@ -4250,6 +4256,9 @@
   "panels/elements/StylePropertyTreeElement.ts | viewComputedValue": {
     "message": "View computed value"
   },
+  "panels/elements/StylesSidebarPane.ts | clickToRevealLayer": {
+    "message": "Click to reveal layer in layer tree"
+  },
   "panels/elements/StylesSidebarPane.ts | constructedStylesheet": {
     "message": "constructed stylesheet"
   },
@@ -4289,6 +4298,9 @@
   "panels/elements/StylesSidebarPane.ts | invalidString": {
     "message": "{PH1}, property name: {PH2}, property value: {PH3}"
   },
+  "panels/elements/StylesSidebarPane.ts | layer": {
+    "message": "Layer"
+  },
   "panels/elements/StylesSidebarPane.ts | newStyleRule": {
     "message": "New Style Rule"
   },

packages/devtools-frontend-lynx/front_end/core/i18n/locales/en-XL.json

@@ -4190,6 +4190,12 @@
   "panels/elements/EventListenersWidget.ts | showListenersOnTheAncestors": {
     "message": "Ŝh́ôẃ l̂íŝt́êńêŕŝ ón̂ t́ĥé âńĉéŝt́ôŕŝ"
   },
+  "panels/elements/LayersWidget.ts | cssLayersTitle": {
+    "message": "ĈŚŜ ĺâýêŕŝ"
+  },
+  "panels/elements/LayersWidget.ts | toggleCSSLayers": {
+    "message": "T̂óĝǵl̂é ĈŚŜ Ĺâýêŕŝ v́îéŵ"
+  },
   "panels/elements/MarkerDecorator.ts | domBreakpoint": {
     "message": "D̂ÓM̂ B́r̂éâḱp̂óîńt̂"
   },
@@ -4250,6 +4256,9 @@
   "panels/elements/StylePropertyTreeElement.ts | viewComputedValue": {
     "message": "V̂íêẃ ĉóm̂ṕût́êd́ v̂ál̂úê"
   },
+  "panels/elements/StylesSidebarPane.ts | clickToRevealLayer": {
+    "message": "Ĉĺîćk̂ t́ô ŕêv́êál̂ ĺâýêŕ îń l̂áŷér̂ t́r̂éê"
+  },
   "panels/elements/StylesSidebarPane.ts | constructedStylesheet": {
     "message": "ĉón̂śt̂ŕûćt̂éd̂ śt̂ýl̂éŝh́êét̂"
   },
@@ -4289,6 +4298,9 @@
   "panels/elements/StylesSidebarPane.ts | invalidString": {
     "message": "{PH1}, p̂ŕôṕêŕt̂ý n̂ám̂é: {PH2}, p̂ŕôṕêŕt̂ý v̂ál̂úê: {PH3}"
   },
+  "panels/elements/StylesSidebarPane.ts | layer": {
+    "message": "L̂áŷér̂"
+  },
   "panels/elements/StylesSidebarPane.ts | newStyleRule": {
     "message": "N̂éŵ Śt̂ýl̂é R̂úl̂é"
   },

packages/devtools-frontend-lynx/front_end/core/sdk/BUILD.gn

@@ -17,6 +17,7 @@ devtools_module("sdk") {
     "CPUThrottlingManager.ts",
     "CSSContainerQuery.ts",
     "CSSFontFace.ts",
+    "CSSLayer.ts",
     "CSSMatchedStyles.ts",
     "CSSMedia.ts",
     "CSSMetadata.ts",

packages/devtools-frontend-lynx/front_end/core/sdk/CSSLayer.ts

@@ -0,0 +1,30 @@
+// Copyright 2022 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as TextUtils from '../../models/text_utils/text_utils.js';
+import type * as Protocol from '../../generated/protocol.js';
+
+import type {CSSModel} from './CSSModel.js';
+import {CSSQuery} from './CSSQuery.js';
+
+export class CSSLayer extends CSSQuery {
+  static parseLayerPayload(cssModel: CSSModel, payload: Protocol.CSS.CSSLayer[]): CSSLayer[] {
+    return payload.map(layer => new CSSLayer(cssModel, layer));
+  }
+
+  constructor(cssModel: CSSModel, payload: Protocol.CSS.CSSLayer) {
+    super(cssModel);
+    this.reinitialize(payload);
+  }
+
+  reinitialize(payload: Protocol.CSS.CSSLayer): void {
+    this.text = payload.text;
+    this.range = payload.range ? TextUtils.TextRange.TextRange.fromObject(payload.range) : null;
+    this.styleSheetId = payload.styleSheetId;
+  }
+
+  active(): boolean {
+    return true;
+  }
+}

packages/devtools-frontend-lynx/front_end/core/sdk/CSSModel.ts

@@ -154,6 +154,10 @@ export class CSSModel extends SDKModel {
     return this._sourceMapManager;
   }
 
+  static readableLayerName(text: string): string {
+    return text || '<anonymous>';
+  }
+
   static trimSourceURL(text: string): string {
     let sourceURLIndex = text.lastIndexOf('/*# sourceURL=');
     if (sourceURLIndex === -1) {
@@ -267,6 +271,11 @@ export class CSSModel extends SDKModel {
     return medias ? CSSMedia.parseMediaArrayPayload(this, medias) : [];
   }
 
+  async getRootLayer(nodeId: Protocol.DOM.NodeId): Promise<Protocol.CSS.CSSLayerData> {
+    const {rootLayer} = await this._agent.invoke_getLayersForNode({nodeId});
+    return rootLayer;
+  }
+
   isEnabled(): boolean {
     return this._isEnabled;
   }

packages/devtools-frontend-lynx/front_end/core/sdk/CSSQuery.ts

@@ -9,7 +9,8 @@ import type {CSSModel, Edit} from './CSSModel.js';
 import {CSSLocation} from './CSSModel.js';
 import type {CSSStyleSheetHeader} from './CSSStyleSheetHeader.js';
 
-type CSSQueryPayload = Protocol.CSS.CSSMedia|Protocol.CSS.CSSContainerQuery|Protocol.CSS.CSSSupports;
+type CSSQueryPayload =
+    Protocol.CSS.CSSMedia|Protocol.CSS.CSSContainerQuery|Protocol.CSS.CSSSupports|Protocol.CSS.CSSLayer;
 
 export abstract class CSSQuery {
   text = '';

packages/devtools-frontend-lynx/front_end/core/sdk/CSSRule.ts

@@ -14,6 +14,7 @@ import { reportToStatistics } from '../host/InspectorFrontendHost.js';
 import { envLogger } from '../protocol_client/InspectorBackend.js';
 
 import {CSSContainerQuery} from './CSSContainerQuery.js';
+import {CSSLayer} from './CSSLayer.js';
 import {CSSMedia} from './CSSMedia.js';
 import {CSSSupports} from './CSSSupports.js';
 
@@ -118,6 +119,7 @@ export class CSSStyleRule extends CSSRule {
   media: CSSMedia[];
   containerQueries: CSSContainerQuery[];
   supports: CSSSupports[];
+  layers: CSSLayer[];
   wasUsed: boolean;
   constructor(cssModel: CSSModel, payload: Protocol.CSS.CSSRule, wasUsed?: boolean) {
     // TODO(crbug.com/1011811): Replace with spread operator or better types once Closure is gone.
@@ -128,6 +130,7 @@ export class CSSStyleRule extends CSSRule {
         CSSContainerQuery.parseContainerQueriesPayload(cssModel, payload.containerQueries) :
         [];
     this.supports = payload.supports ? CSSSupports.parseSupportsPayload(cssModel, payload.supports) : [];
+    this.layers = payload.layers ? CSSLayer.parseLayerPayload(cssModel, payload.layers) : [];
     this.wasUsed = wasUsed || false;
   }
 

packages/devtools-frontend-lynx/front_end/core/sdk/sdk.ts

@@ -23,6 +23,7 @@ import * as CPUProfilerModel from './CPUProfilerModel.js';
 import * as CPUThrottlingManager from './CPUThrottlingManager.js';
 import * as CSSContainerQuery from './CSSContainerQuery.js';
 import * as CSSFontFace from './CSSFontFace.js';
+import * as CSSLayer from './CSSLayer.js';
 import * as CSSMatchedStyles from './CSSMatchedStyles.js';
 import * as CSSMedia from './CSSMedia.js';
 import * as CSSMetadata from './CSSMetadata.js';
@@ -89,6 +90,7 @@ export {
   CPUThrottlingManager,
   CSSContainerQuery,
   CSSFontFace,
+  CSSLayer,
   CSSMatchedStyles,
   CSSMedia,
   CSSMetadata,

packages/devtools-frontend-lynx/front_end/generated/InspectorBackendCommands.js

@@ -479,6 +479,8 @@ export function registerCommands(inspectorBackend) {
       'CSS.getPlatformFontsForNode', [{'name': 'nodeId', 'type': 'number', 'optional': false}], ['fonts']);
   inspectorBackend.registerCommand(
       'CSS.getStyleSheetText', [{'name': 'styleSheetId', 'type': 'string', 'optional': false}], ['text']);
+  inspectorBackend.registerCommand(
+      'CSS.getLayersForNode', [{'name': 'nodeId', 'type': 'number', 'optional': false}], ['rootLayer']);
   inspectorBackend.registerCommand(
       'CSS.trackComputedStyleUpdates', [{'name': 'propertiesToTrack', 'type': 'object', 'optional': false}], []);
   inspectorBackend.registerCommand('CSS.takeComputedStyleUpdates', [], ['nodeIds']);

packages/devtools-frontend-lynx/front_end/generated/protocol-mapping.d.ts

@@ -976,6 +976,11 @@ export namespace ProtocolMapping {
      */
     'CSS.getStyleSheetText':
         {paramsType: [Protocol.CSS.GetStyleSheetTextRequest]; returnType: Protocol.CSS.GetStyleSheetTextResponse;};
+    /**
+     * Returns all layers parsed by the rendering engine for the tree scope of a node.
+     */
+    'CSS.getLayersForNode':
+        {paramsType: [Protocol.CSS.GetLayersForNodeRequest]; returnType: Protocol.CSS.GetLayersForNodeResponse;};
     /**
      * Starts tracking the given computed styles for updates. The specified array of properties
      * replaces the one previously specified. Pass empty array to disable tracking.

packages/devtools-frontend-lynx/front_end/generated/protocol-proxy-api.d.ts

@@ -605,6 +605,12 @@ declare namespace ProtocolProxyApi {
     invoke_getStyleSheetText(params: Protocol.CSS.GetStyleSheetTextRequest):
         Promise<Protocol.CSS.GetStyleSheetTextResponse>;
 
+    /**
+     * Returns all layers parsed by the rendering engine for the tree scope of a node.
+     */
+    invoke_getLayersForNode(params: Protocol.CSS.GetLayersForNodeRequest):
+        Promise<Protocol.CSS.GetLayersForNodeResponse>;
+
     /**
      * Starts tracking the given computed styles for updates. The specified array of properties
      * replaces the one previously specified. Pass empty array to disable tracking.

packages/devtools-frontend-lynx/front_end/generated/protocol.d.ts

@@ -1879,6 +1879,11 @@ declare namespace Protocol {
        * The array enumerates @supports at-rules starting with the innermost one, going outwards.
        */
       supports?: CSSSupports[];
+      /**
+       * Cascade layer array. Contains the layer hierarchy that this rule belongs to starting
+       * with the innermost layer and going outwards.
+       */
+      layers?: CSSLayer[];
     }
 
     /**
@@ -2140,6 +2145,42 @@ declare namespace Protocol {
       styleSheetId?: StyleSheetId;
     }
 
+    /**
+     * CSS Layer at-rule descriptor.
+     */
+    export interface CSSLayer {
+      /**
+       * Layer name.
+       */
+      text: string;
+      /**
+       * The associated rule header range in the enclosing stylesheet (if available).
+       */
+      range?: SourceRange;
+      /**
+       * Identifier of the stylesheet containing this object (if exists).
+       */
+      styleSheetId?: StyleSheetId;
+    }
+
+    /**
+     * CSS Layer data.
+     */
+    export interface CSSLayerData {
+      /**
+       * Layer name.
+       */
+      name: string;
+      /**
+       * Direct sub-layers.
+       */
+      subLayers?: CSSLayerData[];
+      /**
+       * Layer order. A higher number has higher priority in the cascade order.
+       */
+      order: number;
+    }
+
     /**
      * Information about amount of glyphs that were rendered with given font.
      */
@@ -2450,6 +2491,14 @@ declare namespace Protocol {
       text: string;
     }
 
+    export interface GetLayersForNodeRequest {
+      nodeId: DOM.NodeId;
+    }
+
+    export interface GetLayersForNodeResponse extends ProtocolResponseWithError {
+      rootLayer: CSSLayerData;
+    }
+
     export interface TrackComputedStyleUpdatesRequest {
       propertiesToTrack: CSSComputedStyleProperty[];
     }

packages/devtools-frontend-lynx/front_end/panels/elements/BUILD.gn

@@ -4,9 +4,14 @@
 
 import("../../../scripts/build/ninja/devtools_entrypoint.gni")
 import("../../../scripts/build/ninja/devtools_module.gni")
+import("../../../scripts/build/ninja/generate_css.gni")
 import("../../../third_party/typescript/typescript.gni")
 import("../visibility.gni")
 
+generate_css("css_files") {
+  sources = [ "layersWidget.css" ]
+}
+
 devtools_module("elements") {
   sources = [
     "AccessibilityTreeUtils.ts",
@@ -26,6 +31,7 @@ devtools_module("elements") {
     "EventListenersWidget.ts",
     "ImagePreviewPopover.ts",
     "InspectElementModeController.ts",
+    "LayersWidget.ts",
     "LayoutSidebarPane.ts",
     "MarkerDecorator.ts",
     "MetricsSidebarPane.ts",