chrome-devtools-frontend 1.0.975056 → 1.0.975442

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",
@@ -934,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",
@@ -979,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/main/MainImpl.ts

@@ -384,6 +384,10 @@ export class MainImpl {
     // New Lighthouse panel with timespan and snapshot mode
     Root.Runtime.experiments.register('lighthousePanelFR', 'Use Lighthouse panel with timespan and snapshot modes');
 
+    // Tooling for CSS layers in Styles sidebar pane.
+    Root.Runtime.experiments.register(
+        Root.Runtime.ExperimentName.CSS_LAYERS, 'Tooling for CSS layers in the Styles pane');
+
     Root.Runtime.experiments.enableExperimentsByDefault([
       'sourceOrderViewer',
       'hideIssuesFeature',
@@ -391,6 +395,7 @@ export class MainImpl {
       Root.Runtime.ExperimentName.PRECISE_CHANGES,
       'reportingApiDebugging',
       Root.Runtime.ExperimentName.SYNC_SETTINGS,
+      Root.Runtime.ExperimentName.CSS_LAYERS,
     ]);
 
     Root.Runtime.experiments.cleanUpStaleExperiments();

package/front_end/generated/protocol.ts

@@ -10869,6 +10869,12 @@ export namespace Page {
      * Not restored reason
      */
     reason: BackForwardCacheNotRestoredReason;
+    /**
+     * Context associated with the reason. The meaning of this context is
+     * dependent on the reason:
+     * - EmbedderExtensionSentMessageToCachedFrame: the extension ID.
+     */
+    context?: string;
   }
 
   export interface BackForwardCacheNotRestoredExplanationTree {

package/front_end/panels/elements/LayersWidget.ts

@@ -0,0 +1,167 @@
+// Copyright (c) 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 i18n from '../../core/i18n/i18n.js';
+import * as SDK from '../../core/sdk/sdk.js';
+import * as UI from '../../ui/legacy/legacy.js';
+import type * as Protocol from '../../generated/protocol.js';
+import * as TreeOutline from '../../ui/components/tree_outline/tree_outline.js';
+
+import {ElementsPanel} from './ElementsPanel.js';
+import layersWidgetStyles from './layersWidget.css.js';
+import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+
+const UIStrings = {
+  /**
+  * @description Title of a section in the Element State Pane Widget of the Elements panel.
+  * The widget shows the layers present in the context of the currently selected node.
+  * */
+  cssLayersTitle: 'CSS layers',
+  /**
+  * @description Tooltip text in Element State Pane Widget of the Elements panel.
+  * For a button that opens a tool that shows the layers present in the current document.
+  */
+  toggleCSSLayers: 'Toggle CSS Layers view',
+};
+const str_ = i18n.i18n.registerUIStrings('panels/elements/LayersWidget.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+let layersWidgetInstance: LayersWidget;
+
+export class LayersWidget extends UI.Widget.Widget {
+  private cssModel?: SDK.CSSModel.CSSModel|null;
+  private layerTreeComponent = new TreeOutline.TreeOutline.TreeOutline<string>();
+
+  constructor() {
+    super(true);
+
+    this.contentElement.className = 'styles-layers-pane';
+    UI.UIUtils.createTextChild(this.contentElement.createChild('div'), i18nString(UIStrings.cssLayersTitle));
+
+    this.contentElement.appendChild(this.layerTreeComponent);
+
+    UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, this.update, this);
+  }
+
+  private updateModel(cssModel: SDK.CSSModel.CSSModel|null): void {
+    if (this.cssModel === cssModel) {
+      return;
+    }
+    if (this.cssModel) {
+      this.cssModel.removeEventListener(SDK.CSSModel.Events.StyleSheetChanged, this.update, this);
+    }
+    this.cssModel = cssModel;
+    if (this.cssModel) {
+      this.cssModel.addEventListener(SDK.CSSModel.Events.StyleSheetChanged, this.update, this);
+    }
+  }
+
+  async wasShown(): Promise<void> {
+    super.wasShown();
+    this.registerCSSFiles([layersWidgetStyles]);
+    return this.update();
+  }
+
+  private async update(): Promise<void> {
+    if (!this.isShowing()) {
+      return;
+    }
+
+    let node = UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
+    if (node) {
+      node = node.enclosingElementOrSelf();
+    }
+    if (!node) {
+      // do something meaningful?
+      return;
+    }
+
+    this.updateModel(node.domModel().cssModel());
+    if (!this.cssModel) {
+      return;
+    }
+    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;
+          if (!subLayers) {
+            return {treeNodeData, id};
+          }
+          return {
+            treeNodeData,
+            id,
+            children: (): Promise<TreeOutline.TreeOutlineUtils.TreeNode<string>[]> =>
+                Promise.resolve(subLayers.sort((layer1, layer2) => layer1.order - layer2.order).map(makeTreeNode(id))),
+          };
+        };
+    const rootLayer = await this.cssModel.rootLayerPromise(node.id);
+    this.layerTreeComponent.data = {
+      defaultRenderer: TreeOutline.TreeOutline.defaultRenderer,
+      tree: [makeTreeNode('')(rootLayer)],
+    };
+
+    // We only expand the first 5 user-defined layers to not make the
+    // view too overwhelming.
+    await this.layerTreeComponent.expandRecursively(5);
+  }
+
+  async revealLayer(layerName: string): Promise<void> {
+    if (!this.isShowing()) {
+      ElementsPanel.instance().showToolbarPane(this, ButtonProvider.instance().item());
+    }
+    await this.update();
+    return this.layerTreeComponent.expandToAndSelectTreeNodeId('implicit outer layer.' + layerName);
+  }
+
+  static instance(opts: {
+    forceNew: boolean|null,
+  }|undefined = {forceNew: null}): LayersWidget {
+    const {forceNew} = opts;
+    if (!layersWidgetInstance || forceNew) {
+      layersWidgetInstance = new LayersWidget();
+    }
+
+    return layersWidgetInstance;
+  }
+}
+
+let buttonProviderInstance: ButtonProvider;
+
+export class ButtonProvider implements UI.Toolbar.Provider {
+  private readonly button: UI.Toolbar.ToolbarToggle;
+  private constructor() {
+    const layersIcon = new IconButton.Icon.Icon();
+    layersIcon.data = {
+      iconName: 'ic_layers_16x16',
+      color: 'var(--color-text-secondary)',
+      width: '13px',
+      height: '13px',
+    };
+    this.button = new UI.Toolbar.ToolbarToggle(i18nString(UIStrings.toggleCSSLayers), layersIcon);
+    this.button.setVisible(false);
+    this.button.addEventListener(UI.Toolbar.ToolbarButton.Events.Click, this.clicked, this);
+    this.button.element.classList.add('monospace');
+  }
+
+  static instance(opts: {
+    forceNew: boolean|null,
+  } = {forceNew: null}): ButtonProvider {
+    const {forceNew} = opts;
+    if (!buttonProviderInstance || forceNew) {
+      buttonProviderInstance = new ButtonProvider();
+    }
+
+    return buttonProviderInstance;
+  }
+
+  private clicked(): void {
+    const view = LayersWidget.instance();
+    ElementsPanel.instance().showToolbarPane(!view.isShowing() ? view : null, this.button);
+  }
+
+  item(): UI.Toolbar.ToolbarToggle {
+    return this.button;
+  }
+}

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -65,6 +65,7 @@ import stylesSidebarPaneStyles from './stylesSidebarPane.css.js';
 
 import type {Context} from './StylePropertyTreeElement.js';
 import {StylePropertyTreeElement} from './StylePropertyTreeElement.js';
+import * as LayersWidget from './LayersWidget.js';
 
 const UIStrings = {
   /**
@@ -187,6 +188,14 @@ const UIStrings = {
   *@description Tooltip text that appears after clicking on the copy CSS changes button
   */
   copiedToClipboard: 'Copied to clipboard',
+  /**
+  *@description Text displayed on layer separators in the styles sidebar pane.
+  */
+  layer: 'Layer',
+  /**
+  *@description Tooltip text for the link in the sidebar pane layer separators that reveals the layer in the layer tree view.
+  */
+  clickToRevealLayer: 'Click to reveal layer in layer tree',
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/elements/StylesSidebarPane.ts', UIStrings);
@@ -853,6 +862,31 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     const blocks = [new SectionBlock(null)];
     let sectionIdx = 0;
     let lastParentNode: SDK.DOMModel.DOMNode|null = null;
+
+    let lastLayers: SDK.CSSLayer.CSSLayer[]|null = null;
+    let sawLayers: boolean = false;
+
+    const layersExperimentEnabled = Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.CSS_LAYERS);
+    const addLayerSeparator = (style: SDK.CSSStyleDeclaration.CSSStyleDeclaration): void => {
+      if (!layersExperimentEnabled) {
+        return;
+      }
+      const parentRule = style.parentRule;
+      if (parentRule instanceof SDK.CSSRule.CSSStyleRule) {
+        const layers = parentRule.layers;
+        if ((layers.length || lastLayers) && lastLayers !== layers) {
+          const block = SectionBlock.createLayerBlock(layers);
+          blocks.push(block);
+          sawLayers = true;
+          lastLayers = layers;
+        }
+      }
+    };
+
+    // We disable the layer widget initially. If we see a layer in
+    // the matched styles we reenable the button.
+    LayersWidget.ButtonProvider.instance().item().setVisible(false);
+
     const refreshedURLs = new Set<string>();
     for (const style of matchedStyles.nodeStyles()) {
       if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.STYLES_PANE_CSS_CHANGES) && style.parentRule) {
@@ -870,6 +904,8 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
         blocks.push(block);
       }
 
+      addLayerSeparator(style);
+
       const lastBlock = blocks[blocks.length - 1];
       if (lastBlock) {
         this.idleCallbackManager.schedule(() => {
@@ -887,15 +923,18 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     }
     pseudoTypes = pseudoTypes.concat([...keys].sort());
     for (const pseudoType of pseudoTypes) {
-      const block = SectionBlock.createPseudoTypeBlock(pseudoType);
+      blocks.push(SectionBlock.createPseudoTypeBlock(pseudoType));
+      lastLayers = null;
+
       for (const style of matchedStyles.pseudoStyles(pseudoType)) {
+        addLayerSeparator(style);
+        const lastBlock = blocks[blocks.length - 1];
         this.idleCallbackManager.schedule(() => {
           const section = new StylePropertiesSection(this, matchedStyles, style, sectionIdx);
           sectionIdx++;
-          block.sections.push(section);
+          lastBlock.sections.push(section);
         });
       }
-      blocks.push(block);
     }
 
     for (const keyframesRule of matchedStyles.keyframes()) {
@@ -909,6 +948,18 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       blocks.push(block);
     }
 
+    if (layersExperimentEnabled) {
+      // If we have seen a layer in matched styles we enable
+      // the layer widget button.
+      if (sawLayers) {
+        LayersWidget.ButtonProvider.instance().item().setVisible(true);
+      } else if (LayersWidget.LayersWidget.instance().isShowing()) {
+        // Since the button for toggling the layers view is now hidden
+        // we ensure that the layers view is not currently toggled.
+        ElementsPanel.instance().showToolbarPane(null, LayersWidget.ButtonProvider.instance().item());
+      }
+    }
+
     await this.idleCallbackManager.awaitDone();
 
     return blocks;
@@ -1379,6 +1430,23 @@ export class SectionBlock {
     return new SectionBlock(separatorElement);
   }
 
+  static createLayerBlock(layers: SDK.CSSLayer.CSSLayer[]): 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');
+      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('.');
+    layerLink.textContent = name;
+    layerLink.onclick = (): Promise<void> => LayersWidget.LayersWidget.instance().revealLayer(name);
+    return new SectionBlock(separatorElement);
+  }
+
   updateFilter(): boolean {
     let hasAnyVisibleSection = false;
     for (const section of this.sections) {

package/front_end/panels/elements/elements-meta.ts

@@ -513,7 +513,7 @@ Common.Revealer.registerRevealer({
 UI.Toolbar.registerToolbarItem({
   async loadItem() {
     const Elements = await loadElementsModule();
-    return Elements.ElementStatePaneWidget.ButtonProvider.instance();
+    return Elements.LayersWidget.ButtonProvider.instance();
   },
   order: 1,
   location: UI.Toolbar.ToolbarItemLocation.STYLES_SIDEBARPANE_TOOLBAR,
@@ -526,7 +526,7 @@ UI.Toolbar.registerToolbarItem({
 UI.Toolbar.registerToolbarItem({
   async loadItem() {
     const Elements = await loadElementsModule();
-    return Elements.ClassesPaneWidget.ButtonProvider.instance();
+    return Elements.ElementStatePaneWidget.ButtonProvider.instance();
   },
   order: 2,
   location: UI.Toolbar.ToolbarItemLocation.STYLES_SIDEBARPANE_TOOLBAR,
@@ -536,6 +536,19 @@ UI.Toolbar.registerToolbarItem({
   actionId: undefined,
 });
 
+UI.Toolbar.registerToolbarItem({
+  async loadItem() {
+    const Elements = await loadElementsModule();
+    return Elements.ClassesPaneWidget.ButtonProvider.instance();
+  },
+  order: 3,
+  location: UI.Toolbar.ToolbarItemLocation.STYLES_SIDEBARPANE_TOOLBAR,
+  showLabel: undefined,
+  condition: undefined,
+  separator: undefined,
+  actionId: undefined,
+});
+
 UI.Toolbar.registerToolbarItem({
   async loadItem() {
     const Elements = await loadElementsModule();

package/front_end/panels/elements/elements.ts

@@ -39,6 +39,7 @@ import * as ElementsTreeElementHighlighter from './ElementsTreeElementHighlighte
 import * as ElementsTreeOutline from './ElementsTreeOutline.js';
 import * as EventListenersWidget from './EventListenersWidget.js';
 import * as InspectElementModeController from './InspectElementModeController.js';
+import * as LayersWidget from './LayersWidget.js';
 import * as LayoutSidebarPane from './LayoutSidebarPane.js';
 import * as MarkerDecorator from './MarkerDecorator.js';
 import * as MetricsSidebarPane from './MetricsSidebarPane.js';
@@ -66,6 +67,7 @@ export {
   ElementsTreeOutline,
   EventListenersWidget,
   InspectElementModeController,
+  LayersWidget,
   LayoutSidebarPane,
   MarkerDecorator,
   MetricsSidebarPane,

package/front_end/panels/elements/layersWidget.css

@@ -0,0 +1,28 @@
+/**
+ * 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.
+ */
+
+.styles-layers-pane {
+  overflow: hidden;
+  padding-left: 2px;
+  background-color: var(--color-background-elevation-1);
+  border-bottom: 1px solid var(--color-details-hairline);
+  margin-top: 0;
+  padding-bottom: 2px;
+}
+
+.styles-layers-pane > div {
+  font-weight: bold;
+  margin: 8px 4px 6px;
+}
+
+.styles-layers-pane > table {
+  width: 100%;
+  border-spacing: 0;
+}
+
+.styles-layers-pane td {
+  padding: 0;
+}

package/front_end/panels/elements/stylesSidebarPane.css

@@ -217,6 +217,10 @@
   margin-left: 2px;
 }
 
+.sidebar-separator.layer-separator {
+  display: flex;
+}
+
 .sidebar-pane-section-toolbar {
   position: absolute;
   right: 0;

package/front_end/panels/lighthouse/LighthouseController.ts

@@ -109,7 +109,7 @@ const UIStrings = {
    */
   lighthouseMode: 'Lighthouse mode',
   /**
-   * @description Tooltip text of a radio button to select the Lighthouse mode.
+   * @description Tooltip text of a radio button to select the Lighthouse mode. "Navigation" is a Lighthouse mode that audits a page navigation. "Timespan" is a Lighthouse mode that audits user interactions over a period of time. "Snapshot" is a Lighthouse mode that audits the current page state.
    */
   runLighthouseInMode: 'Run Lighthouse in navigation, timespan, or snapshot mode',
   /**
@@ -150,9 +150,9 @@ const UIStrings = {
    */
   legacyNavigation: 'Legacy navigation',
   /**
-   * @description Tooltip text that appears when hovering over the 'Legacy navigation' checkbox in the settings pane opened by clicking the setting cog in the start view of the audits panel
+   * @description Tooltip text that appears when hovering over the 'Legacy navigation' checkbox in the settings pane opened by clicking the setting cog in the start view of the audits panel. "Navigation mode" is a Lighthouse mode that analyzes a page navigation.
    */
-  useLegacyNavigation: 'Audit the page using classic Lighthouse when in navigation mode.',
+  useLegacyNavigation: 'Analyze the page using classic Lighthouse when in navigation mode.',
   /**
   * @description Tooltip text of checkbox to reset storage features prior to running audits in
   * Lighthouse. Resetting the storage clears/empties it to a neutral state.

package/package.json

@@ -54,5 +54,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.975056"
+  "version": "1.0.975442"
 }

package/scripts/build/assert_grd.py

@@ -1,4 +1,4 @@
-#!/usr/bin/env vpython
+#!/usr/bin/env vpython3
 # -*- coding: UTF-8 -*-
 #
 # Copyright 2021 The Chromium Authors. All rights reserved.

package/scripts/build/assert_third_party_readmes.py

@@ -1,4 +1,4 @@
-#!/usr/bin/env vpython
+#!/usr/bin/env vpython3
 # -*- coding: UTF-8 -*-
 #
 # Copyright 2022 The Chromium Authors. All rights reserved.

package/scripts/build/build_inspector_overlay.py

@@ -1,4 +1,4 @@
-#!/usr/bin/env vpython
+#!/usr/bin/env vpython3
 # -*- coding: utf-8 -*-
 #
 # Copyright 2020 The Chromium Authors. All rights reserved.

package/scripts/build/code_generator_frontend.py

@@ -1,4 +1,4 @@
-#!/usr/bin/env vpython
+#!/usr/bin/env vpython3
 # Copyright (c) 2011 Google Inc. All rights reserved.
 # Copyright (c) 2012 Intel Corporation. All rights reserved.
 #

package/scripts/build/efficiently_recompile.py

@@ -1,4 +1,4 @@
-#!/usr/bin/env vpython
+#!/usr/bin/env vpython3
 #
 # Copyright 2019 The Chromium Authors. All rights reserved.
 # Use of this source code is governed by a BSD-style license that can be

package/scripts/build/generate_aria.py

@@ -1,3 +1,5 @@
+#!/usr/bin/env vpython3
+#
 # Copyright 2018 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.

package/scripts/build/generate_devtools_grd.py

@@ -1,4 +1,4 @@
-#!/usr/bin/env vpython
+#!/usr/bin/env vpython3
 #
 # Copyright (C) 2011 Google Inc. All rights reserved.
 #
@@ -29,13 +29,9 @@
 # OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 """Creates a grd file for packaging the inspector files."""
 
-from __future__ import with_statement
-from os import path
 
-import errno
 import os
 import shlex
-import shutil
 import sys
 from xml.dom import minidom
 

package/scripts/build/generate_supported_css.py

@@ -1,4 +1,4 @@
-#!/usr/bin/env vpython
+#!/usr/bin/env vpython3
 # Copyright (c) 2014 Google Inc. All rights reserved.
 #
 # Redistribution and use in source and binary forms, with or without
@@ -44,7 +44,7 @@ READ_LOCATION = path.join(ROOT_DIRECTORY, 'third_party', 'blink', 'renderer', 'c
 
 
 def _keep_only_required_keys(entry):
-    for key in entry.keys():
+    for key in list(entry.keys()):
         if key not in ("name", "longhands", "svg", "inherited", "keywords"):
             del entry[key]
     return entry
@@ -70,9 +70,10 @@ def properties_from_file(file_name):
         properties.append(_keep_only_required_keys(entry))
         property_names[entry["name"]] = entry
         if "keywords" in entry:
-            keywords = list(
-                filter(lambda keyword: not keyword.startswith("-internal-"),
-                       entry["keywords"]))
+            keywords = [
+                keyword for keyword in entry["keywords"]
+                if not keyword.startswith("-internal-")
+            ]
             property_values[entry["name"]] = {"values": keywords}
 
     properties.sort(key=lambda entry: entry["name"])