chrome-devtools-frontend 1.0.975541 → 1.0.976570

package/AUTHORS

@@ -29,6 +29,7 @@ Feng Lu <lufengd3@gmail.com>
 Gabriel Luong <gabriel.luong@gmail.com>
 Gautham Banasandra <gautham.bangalore@gmail.com>
 Jake Mulhern <mulherje@gmail.com>
+Jan Keitel <jan.keitel@gmail.com>
 Jeffrey Chen <jeffreyca16@gmail.com>
 Jesper van den Ende <jespertheend@gmail.com>
 Juba Borgohain <chromiumjuba@gmail.com>

package/config/gni/devtools_grd_files.gni

@@ -114,12 +114,14 @@ grd_files_release_sources = [
   "front_end/Images/lighthouse_logo.svg",
   "front_end/Images/link_icon.svg",
   "front_end/Images/mediumIcons.svg",
+  "front_end/Images/minus_icon.svg",
   "front_end/Images/navigationControls.png",
   "front_end/Images/navigationControls_2x.png",
   "front_end/Images/network_conditions_icon.svg",
   "front_end/Images/network_panel_icon.svg",
   "front_end/Images/nodeIcon.avif",
   "front_end/Images/node_search_icon.svg",
+  "front_end/Images/plus_icon.svg",
   "front_end/Images/popoverArrows.png",
   "front_end/Images/preview_feature_video_thumbnail.svg",
   "front_end/Images/profileGroupIcon.png",
@@ -480,6 +482,7 @@ grd_files_release_sources = [
   "front_end/third_party/wasmparser/wasmparser.js",
   "front_end/ui/components/adorners/adorners.js",
   "front_end/ui/components/buttons/buttons.js",
+  "front_end/ui/components/chrome_link/chrome_link.js",
   "front_end/ui/components/code_highlighter/code_highlighter.js",
   "front_end/ui/components/data_grid/data_grid.js",
   "front_end/ui/components/diff_view/diff_view.js",
@@ -1400,6 +1403,8 @@ grd_files_debug_sources = [
   "front_end/ui/components/adorners/adorner.css.js",
   "front_end/ui/components/buttons/Button.js",
   "front_end/ui/components/buttons/button.css.js",
+  "front_end/ui/components/chrome_link/ChromeLink.js",
+  "front_end/ui/components/chrome_link/chromeLink.css.js",
   "front_end/ui/components/code_highlighter/CodeHighlighter.js",
   "front_end/ui/components/code_highlighter/codeHighlighter.css.js",
   "front_end/ui/components/data_grid/DataGrid.js",

package/config/gni/devtools_image_files.gni

@@ -124,9 +124,11 @@ devtools_svg_sources = [
   "lighthouse_logo.svg",
   "link_icon.svg",
   "mediumIcons.svg",
+  "minus_icon.svg",
   "network_conditions_icon.svg",
   "network_panel_icon.svg",
   "node_search_icon.svg",
+  "plus_icon.svg",
   "preview_feature_video_thumbnail.svg",
   "refresh_12x12_icon.svg",
   "resizeDiagonal.svg",

package/front_end/Images/src/minus_icon.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 5.5H2V6.5H10V5.5Z" fill="#202124"/>
+</svg>

package/front_end/Images/src/plus_icon.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.5 2H5.5V5.5H2V6.5H5.5V10H6.5V6.5H10V5.5H6.5V2Z" fill="#202124"/>
+</svg>

package/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) {

package/front_end/generated/InspectorBackendCommands.js

@@ -1877,7 +1877,7 @@ export function registerCommands(inspectorBackend) {
   // Overlay.
   inspectorBackend.registerEnum('Overlay.LineStylePattern', {Dashed: 'dashed', Dotted: 'dotted'});
   inspectorBackend.registerEnum('Overlay.ContrastAlgorithm', {Aa: 'aa', Aaa: 'aaa', Apca: 'apca'});
-  inspectorBackend.registerEnum('Overlay.ColorFormat', {Rgb: 'rgb', Hsl: 'hsl', Hex: 'hex'});
+  inspectorBackend.registerEnum('Overlay.ColorFormat', {Rgb: 'rgb', Hsl: 'hsl', Hwb: 'hwb', Hex: 'hex'});
   inspectorBackend.registerEnum('Overlay.InspectMode', {
     SearchForNode: 'searchForNode',
     SearchForUAShadowDOM: 'searchForUAShadowDOM',

package/front_end/generated/protocol.ts

@@ -9587,6 +9587,7 @@ export namespace Overlay {
   export const enum ColorFormat {
     Rgb = 'rgb',
     Hsl = 'hsl',
+    Hwb = 'hwb',
     Hex = 'hex',
   }
 

package/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};
           }

package/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);

package/front_end/panels/settings/components/SyncSection.ts

@@ -8,7 +8,7 @@ import type * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as Settings from '../../../ui/components/settings/settings.js';
-import * as SDK from '../../../core/sdk/sdk.js';
+import * as ChromeLink from '../../../ui/components/chrome_link/chrome_link.js';
 
 import syncSectionStyles from './syncSection.css.js';
 
@@ -92,9 +92,8 @@ function renderAccountInfoOrWarning(syncInfo: Host.InspectorFrontendHostAPI.Sync
     // clang-format off
     return LitHtml.html`
       <span class="warning">
-        ${i18nString(UIStrings.syncDisabled)} <a href=${link} class="link" target="_blank"
-          @click=${(e: Event): void => openSettingsTab(link, e)}
-          @keydown=${(e: Event): void => openSettingsTab(link, e)}>${i18nString(UIStrings.settings)}</x-link>
+        ${i18nString(UIStrings.syncDisabled)}
+        <${ChromeLink.ChromeLink.ChromeLink.litTagName} .href=${link}>${i18nString(UIStrings.settings)}</${ChromeLink.ChromeLink.ChromeLink.litTagName}>
       </span>`;
     // clang-format on
   }
@@ -104,9 +103,8 @@ function renderAccountInfoOrWarning(syncInfo: Host.InspectorFrontendHostAPI.Sync
     // clang-format off
     return LitHtml.html`
       <span class="warning">
-        ${i18nString(UIStrings.preferencesSyncDisabled)} <a href=${link} class="link" target="_blank"
-          @click=${(e: Event): void => openSettingsTab(link, e)}
-          @keydown=${(e: Event): void => openSettingsTab(link, e)}>${i18nString(UIStrings.settings)}</x-link>
+        ${i18nString(UIStrings.preferencesSyncDisabled)}
+        <${ChromeLink.ChromeLink.ChromeLink.litTagName} .href=${link}>${i18nString(UIStrings.settings)}</${ChromeLink.ChromeLink.ChromeLink.litTagName}>
       </span>`;
     // clang-format on
   }
@@ -120,16 +118,6 @@ function renderAccountInfoOrWarning(syncInfo: Host.InspectorFrontendHostAPI.Sync
     </div>`;
 }
 
-// Navigating to a chrome:// link via a normal anchor doesn't work, so we "navigate"
-// there using CDP.
-function openSettingsTab(url: string, event: Event): void {
-  if (event.type === 'click' || (event.type === 'keydown' && self.isEnterOrSpaceKey(event))) {
-    const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
-    mainTarget && mainTarget.targetAgent().invoke_createTarget({url});
-    event.consume(true);
-  }
-}
-
 ComponentHelpers.CustomElements.defineComponent('devtools-sync-section', SyncSection);
 
 declare global {

package/front_end/panels/sources/CSSPlugin.ts

@@ -4,13 +4,17 @@
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import type * as Protocol from '../../generated/protocol.js';
 import type * as Workspace from '../../models/workspace/workspace.js';
 import * as ColorPicker from '../../ui/legacy/components/color_picker/color_picker.js';
 import * as InlineEditor from '../../ui/legacy/components/inline_editor/inline_editor.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
+import type * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
+import {assertNotNullOrUndefined} from '../../core/platform/platform.js';
 import {Plugin} from './Plugin.js';
 
 // Plugin to add CSS completion, shortcuts, and color/curve swatches
@@ -29,17 +33,6 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/sources/CSSPlugin.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export function completion(): CodeMirror.Extension {
-  const {cssCompletionSource} = CodeMirror.css;
-  return CodeMirror.autocompletion({
-    override:
-        [async(cx: CodeMirror.CompletionContext):
-             Promise<CodeMirror.CompletionResult|null> => {
-               return (await specificCssCompletion(cx)) || cssCompletionSource(cx);
-             }],
-  });
-}
-
 const dontCompleteIn = new Set(['ColorLiteral', 'NumberLiteral', 'StringLiteral', 'Comment', 'Important']);
 
 function findPropertyAt(node: CodeMirror.SyntaxNode, pos: number): CodeMirror.SyntaxNode|null {
@@ -57,18 +50,43 @@ function findPropertyAt(node: CodeMirror.SyntaxNode, pos: number): CodeMirror.Sy
   return null;
 }
 
-function specificCssCompletion(cx: CodeMirror.CompletionContext): CodeMirror.CompletionResult|null {
+function getCurrentStyleSheet(
+    url: Platform.DevToolsPath.UrlString, cssModel: SDK.CSSModel.CSSModel): Protocol.CSS.StyleSheetId {
+  const currentStyleSheet = cssModel.getStyleSheetIdsForURL(url);
+  if (currentStyleSheet.length === 0) {
+    Platform.DCHECK(() => currentStyleSheet.length !== 0, 'Can\'t find style sheet ID for current URL');
+  }
+
+  return currentStyleSheet[0];
+}
+
+async function specificCssCompletion(
+    cx: CodeMirror.CompletionContext, uiSourceCode: Workspace.UISourceCode.UISourceCode,
+    cssModel: SDK.CSSModel.CSSModel|undefined): Promise<CodeMirror.CompletionResult|null> {
   const node = CodeMirror.syntaxTree(cx.state).resolveInner(cx.pos, -1);
+  if (node.name === 'ClassName') {
+    // Should never happen, but let's code defensively here
+    assertNotNullOrUndefined(cssModel);
+
+    const currentStyleSheet = getCurrentStyleSheet(uiSourceCode.url(), cssModel);
+    const existingClassNames = await cssModel.classNamesPromise(currentStyleSheet);
+
+    return {
+      from: node.from,
+      options: existingClassNames.map(value => ({type: 'constant', label: value})),
+    };
+  }
   const property = findPropertyAt(node, cx.pos);
-  if (!property) {
-    return null;
+  if (property) {
+    const propertyValues =
+        SDK.CSSMetadata.cssMetadata().getPropertyValues(cx.state.sliceDoc(property.from, property.to));
+    return {
+      from: node.name === 'ValueName' ? node.from : cx.pos,
+      options: propertyValues.map(value => ({type: 'constant', label: value})),
+      span: /^[\w\P{ASCII}\-]+$/u,
+    };
   }
-  const propertyValues = SDK.CSSMetadata.cssMetadata().getPropertyValues(cx.state.sliceDoc(property.from, property.to));
-  return {
-    from: node.name === 'ValueName' ? node.from : cx.pos,
-    options: propertyValues.map(value => ({type: 'constant', label: value})),
-    span: /^[\w\P{ASCII}\-]+$/u,
-  };
+  return null;
 }
 
 function findColorsAndCurves(
@@ -380,12 +398,49 @@ export function cssBindings(): CodeMirror.Extension {
   });
 }
 
-export class CSSPlugin extends Plugin {
+export class CSSPlugin extends Plugin implements SDK.TargetManager.SDKModelObserver<SDK.CSSModel.CSSModel> {
+  #cssModel?: SDK.CSSModel.CSSModel;
+
+  constructor(uiSourceCode: Workspace.UISourceCode.UISourceCode, _transformer?: SourceFrame.SourceFrame.Transformer) {
+    super(uiSourceCode, _transformer);
+    SDK.TargetManager.TargetManager.instance().observeModels(SDK.CSSModel.CSSModel, this);
+  }
+
   static accepts(uiSourceCode: Workspace.UISourceCode.UISourceCode): boolean {
     return uiSourceCode.contentType().isStyleSheet();
   }
 
+  modelAdded(cssModel: SDK.CSSModel.CSSModel): void {
+    if (this.#cssModel) {
+      return;
+    }
+    this.#cssModel = cssModel;
+  }
+  modelRemoved(cssModel: SDK.CSSModel.CSSModel): void {
+    if (this.#cssModel === cssModel) {
+      this.#cssModel = undefined;
+    }
+  }
+
   editorExtension(): CodeMirror.Extension {
-    return [cssBindings(), completion(), cssSwatches()];
+    return [cssBindings(), this.#cssCompletion(), cssSwatches()];
+  }
+
+  #cssCompletion(): CodeMirror.Extension {
+    const {cssCompletionSource} = CodeMirror.css;
+
+    // CodeMirror binds the function below to the state object.
+    // Therefore, we can't access `this` and retrieve the following properties.
+    // Instead, retrieve them up front to bind them to the correct closure.
+    const uiSourceCode = this.uiSourceCode;
+    const cssModel = this.#cssModel;
+
+    return CodeMirror.autocompletion({
+      override:
+          [async(cx: CodeMirror.CompletionContext):
+               Promise<CodeMirror.CompletionResult|null> => {
+                 return (await specificCssCompletion(cx, uiSourceCode, cssModel)) || cssCompletionSource(cx);
+               }],
+    });
   }
 }

package/front_end/ui/components/chrome_link/ChromeLink.ts

@@ -0,0 +1,62 @@
+// 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 SDK from '../../../core/sdk/sdk.js';
+import * as LitHtml from '../../lit-html/lit-html.js';
+import * as ComponentHelpers from '../helpers/helpers.js';
+
+import chromeLinkStyles from './chromeLink.css.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'devtools-chrome-link': ChromeLink;
+  }
+}
+
+// Use this component to render links to 'chrome://...'-URLs
+// (for which regular <x-link>s do not work).
+export class ChromeLink extends HTMLElement {
+  static readonly litTagName = LitHtml.literal`devtools-chrome-link`;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  readonly #boundRender = this.#render.bind(this);
+  #href: string = '';
+
+  connectedCallback(): void {
+    this.#shadow.adoptedStyleSheets = [chromeLinkStyles];
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  }
+
+  set href(href: string) {
+    if (!href.startsWith('chrome://')) {
+      throw new Error('ChromeLink href needs to start with \'chrome://\'');
+    }
+    this.#href = href;
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  }
+
+  // Navigating to a chrome:// link via a normal anchor doesn't work, so we "navigate"
+  // there using CDP.
+  openSettingsTab(event: Event): void {
+    if (event.type === 'click' || (event.type === 'keydown' && self.isEnterOrSpaceKey(event))) {
+      const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
+      mainTarget && mainTarget.targetAgent().invoke_createTarget({url: this.#href});
+      event.consume(true);
+    }
+  }
+
+  #render(): void {
+    // clang-format off
+    LitHtml.render(
+      /* x-link doesn't work with custom click/keydown handlers */
+      /* eslint-disable rulesdir/ban_a_tags_in_lit_html */
+      LitHtml.html`
+        <a href=${this.#href} class="link" target="_blank"
+          @click=${this.openSettingsTab}
+          @keydown=${this.openSettingsTab}><slot></slot></a>
+      `, this.#shadow, {host: this});
+    // clang-format on
+  }
+}
+
+ComponentHelpers.CustomElements.defineComponent('devtools-chrome-link', ChromeLink);

package/front_end/ui/components/chrome_link/chromeLink.css

@@ -0,0 +1,12 @@
+/*
+ * 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.
+ */
+
+.link {
+  color: var(--color-link);
+  text-decoration: underline;
+  cursor: pointer;
+  padding: 2px 0; /* adjust focus ring size */
+}

package/front_end/ui/components/chrome_link/chrome_link.ts

@@ -0,0 +1,9 @@
+// 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 ChromeLink from './ChromeLink.js';
+
+export {
+  ChromeLink,
+};

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.975541"
+  "version": "1.0.976570"
 }