chrome-devtools-frontend 1.0.974575 → 1.0.975541

package/config/gni/devtools_grd_files.gni

@@ -83,6 +83,7 @@ grd_files_release_sources = [
   "front_end/Images/ic_folder_local.svg",
   "front_end/Images/ic_folder_network.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",
@@ -592,6 +593,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",
@@ -666,6 +668,7 @@ grd_files_debug_sources = [
   "front_end/entrypoints/formatter_worker/JSONFormatter.js",
   "front_end/entrypoints/formatter_worker/JavaScriptFormatter.js",
   "front_end/entrypoints/formatter_worker/JavaScriptOutline.js",
+  "front_end/entrypoints/formatter_worker/Substitute.js",
   "front_end/entrypoints/heap_snapshot_worker/AllocationProfile.js",
   "front_end/entrypoints/heap_snapshot_worker/HeapSnapshot.js",
   "front_end/entrypoints/heap_snapshot_worker/HeapSnapshotLoader.js",
@@ -933,6 +936,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",
@@ -978,6 +982,7 @@ grd_files_debug_sources = [
   "front_end/panels/elements/elementStatePaneWidget.css.js",
   "front_end/panels/elements/elementsPanel.css.js",
   "front_end/panels/elements/elementsTreeOutline.css.js",
+  "front_end/panels/elements/layersWidget.css.js",
   "front_end/panels/elements/layoutPane.css.js",
   "front_end/panels/elements/metricsSidebarPane.css.js",
   "front_end/panels/elements/nodeStackTraceWidget.css.js",

package/config/gni/devtools_image_files.gni

@@ -93,6 +93,7 @@ devtools_svg_sources = [
   "ic_folder_local.svg",
   "ic_folder_network.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",

package/front_end/Images/src/ic_layers_16x16.svg

@@ -0,0 +1,11 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_101_638)">
+<path d="M5.34247 8.54807L2.42415 9.82267C1.94959 10.0299 1.94959 10.859 2.42415 11.0663L7.822 13.4239C7.93714 13.4742 8.06277 13.4742 8.17792 13.4239L13.576 11.0663C14.0506 10.859 14.0506 10.0299 13.576 9.82266L10.6576 8.54803L9.05598 9.24755L11.7964 10.4445L7.99996 12.1026L4.20373 10.4445L6.9441 9.24761L5.34247 8.54807Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.20374 5.15001L7.99997 6.80809L11.7964 5.14999L8.0001 3.49191L4.20374 5.15001ZM2.42415 4.5282C1.94959 4.73547 1.94959 5.56454 2.42415 5.77181L7.822 8.12942C7.93715 8.17972 8.06277 8.17972 8.17792 8.12943L13.576 5.7718C14.0506 5.56453 14.0506 4.73546 13.576 4.52819L8.17806 2.17057C8.06291 2.12028 7.93729 2.12028 7.82214 2.17058L2.42415 4.5282Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_101_638">
+<rect width="16" height="16" rx="2" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/front_end/core/host/UserMetrics.ts

@@ -588,8 +588,9 @@ export enum DevtoolsExperiments {
   'headerOverrides' = 56,
   'lighthousePanelFR' = 57,
   'evaluateExpressionsWithSourceMaps' = 58,
+  'cssLayers' = 59,
   // Increment this when new experiments are added.
-  'MaxValue' = 59,
+  'MaxValue' = 60,
 }
 /* eslint-enable @typescript-eslint/naming-convention */
 

package/front_end/core/i18n/locales/en-US.json

@@ -4751,6 +4751,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"
   },
@@ -4832,6 +4838,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"
   },
@@ -4886,6 +4895,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"
   },
@@ -5823,7 +5835,7 @@
     "message": "Timespan"
   },
   "panels/lighthouse/LighthouseController.ts | useLegacyNavigation": {
-    "message": "Audit the page using classic Lighthouse when in navigation mode."
+    "message": "Analyze the page using classic Lighthouse when in navigation mode."
   },
   "panels/lighthouse/LighthouseController.ts | webSql": {
     "message": "Web SQL"

package/front_end/core/i18n/locales/en-XL.json

@@ -4751,6 +4751,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̂"
   },
@@ -4832,6 +4838,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̂"
   },
@@ -4886,6 +4895,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̂é"
   },
@@ -5823,7 +5835,7 @@
     "message": "T̂ím̂éŝṕâń"
   },
   "panels/lighthouse/LighthouseController.ts | useLegacyNavigation": {
-    "message": "Âúd̂ít̂ t́ĥé p̂áĝé ûśîńĝ ćl̂áŝśîć L̂íĝh́t̂h́ôúŝé ŵh́êń îń n̂áv̂íĝát̂íôń m̂ód̂é."
+    "message": "Âńâĺŷźê t́ĥé p̂áĝé ûśîńĝ ćl̂áŝśîć L̂íĝh́t̂h́ôúŝé ŵh́êń îń n̂áv̂íĝát̂íôń m̂ód̂é."
   },
   "panels/lighthouse/LighthouseController.ts | webSql": {
     "message": "Ŵéb̂ ŚQ̂Ĺ"

package/front_end/core/root/Runtime.ts

@@ -275,6 +275,7 @@ export enum ExperimentName {
   PRECISE_CHANGES = 'preciseChanges',
   STYLES_PANE_CSS_CHANGES = 'stylesPaneCSSChanges',
   HEADER_OVERRIDES = 'headerOverrides',
+  CSS_LAYERS = 'cssLayers',
 }
 
 // TODO(crbug.com/1167717): Make this a const enum again

package/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(supports => new CSSLayer(cssModel, supports));
+  }
+
+  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;
+  }
+}

package/front_end/core/sdk/CSSModel.ts

@@ -266,6 +266,11 @@ export class CSSModel extends SDKModel<EventTypes> {
     return medias ? CSSMedia.parseMediaArrayPayload(this, medias) : [];
   }
 
+  async rootLayerPromise(nodeId: Protocol.DOM.NodeId): Promise<Protocol.CSS.CSSLayerData> {
+    const {rootLayer} = await this.agent.invoke_getLayersForNode({nodeId});
+    return rootLayer;
+  }
+
   isEnabled(): boolean {
     return this.#isEnabled;
   }

package/front_end/core/sdk/CSSRule.ts

@@ -6,6 +6,7 @@ import * as Protocol from '../../generated/protocol.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 
 import {CSSContainerQuery} from './CSSContainerQuery.js';
+import {CSSLayer} from './CSSLayer.js';
 import {CSSMedia} from './CSSMedia.js';
 import {CSSSupports} from './CSSSupports.js';
 
@@ -101,6 +102,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.
@@ -111,6 +113,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;
   }
 

package/front_end/core/sdk/sdk.ts

@@ -24,6 +24,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';
@@ -92,6 +93,7 @@ export {
   CPUThrottlingManager,
   CSSContainerQuery,
   CSSFontFace,
+  CSSLayer,
   CSSMatchedStyles,
   CSSMedia,
   CSSMetadata,

package/front_end/entrypoints/formatter_worker/FormatterWorker.ts

@@ -42,6 +42,7 @@ import {HTMLFormatter} from './HTMLFormatter.js';
 import {IdentityFormatter} from './IdentityFormatter.js';
 import {JavaScriptFormatter} from './JavaScriptFormatter.js';
 import {JSONFormatter} from './JSONFormatter.js';
+import {computeSubstitution, applySubstitution} from './Substitute.js';
 
 export interface Chunk {
   // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
@@ -304,3 +305,5 @@ export function argumentsList(content: string): string[] {
     console.error = (): undefined => undefined;
   }
 })();
+
+export {applySubstitution, computeSubstitution};