chrome-devtools-frontend 1.0.974080 → 1.0.975442

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/front_end/panels/timeline/timelineStatusDialog.css

@@ -16,6 +16,7 @@
 .status-dialog-line {
   margin: 2px;
   height: 14px;
+  min-height: auto;
   display: flex;
   align-items: baseline;
 }

package/front_end/third_party/acorn/estree-legacy.d.ts

@@ -15,6 +15,7 @@ declare module 'estree' {
 // The @types/estree do not export the types to a namespace. Since we reference
 // these types as "ESTree.Node", we need to explicitly re-export them here.
 export type ArrayPattern = estree.ArrayPattern;
+export type AssignmentProperty = estree.AssignmentProperty;
 export type CatchClause = estree.CatchClause;
 export type Class = estree.Class;
 export type Expression = estree.Expression;

package/front_end/ui/components/text_editor/cursor_tooltip.ts

@@ -4,11 +4,12 @@
 
 import * as CodeMirror from '../../../third_party/codemirror.next/codemirror.next.js';
 
+export type ArgumentHintsTooltip = [CodeMirror.StateField<CodeMirror.Tooltip|null>, CodeMirror.ViewPlugin<{}>];
 export const closeTooltip = CodeMirror.StateEffect.define<null>();
 
 export function cursorTooltip(
     source: (state: CodeMirror.EditorState, pos: number) => Promise<(() => CodeMirror.TooltipView)|null>,
-    ): CodeMirror.Extension {
+    ): ArgumentHintsTooltip {
   const openTooltip = CodeMirror.StateEffect.define<() => CodeMirror.TooltipView>();
 
   const state = CodeMirror.StateField.define<null|CodeMirror.Tooltip>({

package/front_end/ui/components/text_editor/javascript.ts

@@ -8,7 +8,7 @@ import * as JavaScriptMetaData from '../../../models/javascript_metadata/javascr
 import * as CodeMirror from '../../../third_party/codemirror.next/codemirror.next.js';
 import * as UI from '../../legacy/legacy.js';
 
-import {closeTooltip, cursorTooltip} from './cursor_tooltip.js';
+import {type ArgumentHintsTooltip, closeTooltip, cursorTooltip} from './cursor_tooltip.js';
 
 export function completion(): CodeMirror.Extension {
   return CodeMirror.javascript.javascriptLanguage.data.of({
@@ -421,12 +421,19 @@ export async function isExpressionComplete(expression: string): Promise<boolean>
   return false;
 }
 
-export function argumentHints(): CodeMirror.Extension {
+export function argumentHints(): ArgumentHintsTooltip {
   return cursorTooltip(getArgumentHints);
 }
 
-export function closeArgumentsHintsTooltip(view: CodeMirror.EditorView): void {
+export function closeArgumentsHintsTooltip(
+    view: CodeMirror.EditorView, tooltip: CodeMirror.StateField<CodeMirror.Tooltip|null>): boolean {
+  // If the tooltip is currently showing, the state will reflect its properties.
+  // If it isn't showing, the state is explicitly set to `null`.
+  if (view.state.field(tooltip) === null) {
+    return false;
+  }
   view.dispatch({effects: closeTooltip.of(null)});
+  return true;
 }
 
 async function getArgumentHints(

package/front_end/ui/legacy/Toolbar.ts

@@ -542,6 +542,7 @@ export class ToolbarButton extends ToolbarItem<ToolbarButton.EventTypes> {
   private textElement: HTMLElement;
   private text?: string;
   private glyph?: string;
+  private icon?: HTMLElement;
   /**
    * TODO(crbug.com/1126026): remove glyph parameter in favor of icon.
    */
@@ -557,11 +558,8 @@ export class ToolbarButton extends ToolbarItem<ToolbarButton.EventTypes> {
     this.textElement = this.element.createChild('div', 'toolbar-text hidden');
 
     this.setTitle(title);
-    if (glyphOrIcon instanceof HTMLElement) {
-      glyphOrIcon.classList.add('toolbar-icon');
-      this.element.append(glyphOrIcon);
-    } else if (glyphOrIcon) {
-      this.setGlyph(glyphOrIcon);
+    if (glyphOrIcon) {
+      this.setGlyphOrIcon(glyphOrIcon);
     }
     this.setText(text || '');
     this.title = '';
@@ -580,6 +578,20 @@ export class ToolbarButton extends ToolbarItem<ToolbarButton.EventTypes> {
     this.text = text;
   }
 
+  setGlyphOrIcon(glyphOrIcon: string|HTMLElement): void {
+    if (glyphOrIcon instanceof HTMLElement) {
+      glyphOrIcon.classList.add('toolbar-icon');
+      if (this.icon) {
+        this.icon.replaceWith(glyphOrIcon);
+      } else {
+        this.element.appendChild(glyphOrIcon);
+      }
+      this.icon = glyphOrIcon;
+    } else if (glyphOrIcon) {
+      this.setGlyph(glyphOrIcon);
+    }
+  }
+
   setGlyph(glyph: string): void {
     if (this.glyph === glyph) {
       return;
@@ -739,14 +751,14 @@ export namespace ToolbarInput {
 
 export class ToolbarToggle extends ToolbarButton {
   private toggledInternal: boolean;
-  private readonly untoggledGlyph: string|undefined;
-  private readonly toggledGlyph: string|undefined;
+  private readonly untoggledGlyphOrIcon: string|HTMLElement|undefined;
+  private readonly toggledGlyphOrIcon: string|HTMLElement|undefined;
 
-  constructor(title: string, glyph?: string, toggledGlyph?: string) {
-    super(title, glyph, '');
+  constructor(title: string, glyphOrIcon?: string|HTMLElement, toggledGlyphOrIcon?: string|HTMLElement) {
+    super(title, glyphOrIcon, '');
     this.toggledInternal = false;
-    this.untoggledGlyph = glyph;
-    this.toggledGlyph = toggledGlyph;
+    this.untoggledGlyphOrIcon = glyphOrIcon;
+    this.toggledGlyphOrIcon = toggledGlyphOrIcon;
     this.element.classList.add('toolbar-state-off');
     ARIAUtils.setPressed(this.element, false);
   }
@@ -763,8 +775,8 @@ export class ToolbarToggle extends ToolbarButton {
     this.element.classList.toggle('toolbar-state-on', toggled);
     this.element.classList.toggle('toolbar-state-off', !toggled);
     ARIAUtils.setPressed(this.element, toggled);
-    if (this.toggledGlyph && this.untoggledGlyph) {
-      this.setGlyph(toggled ? this.toggledGlyph : this.untoggledGlyph);
+    if (this.toggledGlyphOrIcon && this.untoggledGlyphOrIcon) {
+      this.setGlyphOrIcon(toggled ? this.toggledGlyphOrIcon : this.untoggledGlyphOrIcon);
     }
   }
 

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.974080"
+  "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"])