chrome-devtools-frontend 1.0.976172 → 1.0.976570

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",

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