chrome-devtools-frontend 1.0.975699 → 1.0.976703

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.getClassNames(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/panels/sources/SourcesView.ts

@@ -12,6 +12,7 @@ import * as QuickOpen from '../../ui/legacy/components/quick_open/quick_open.js'
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
+import * as Components from './components/components.js';
 import {EditingLocationHistoryManager} from './EditingLocationHistoryManager.js';
 import sourcesViewStyles from './sourcesView.css.js';
 
@@ -377,6 +378,10 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
       sourceView = new SourceFrame.ImageView.ImageView(uiSourceCode.mimeType(), uiSourceCode);
     } else if (contentType === Common.ResourceType.resourceTypes.Font) {
       sourceView = new SourceFrame.FontView.FontView(uiSourceCode.mimeType(), uiSourceCode);
+    } else if (
+        uiSourceCode.name() === HEADER_OVERRIDES_FILENAME &&
+        Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.HEADER_OVERRIDES)) {
+      sourceView = new Components.HeadersView.HeadersView(uiSourceCode);
     } else {
       sourceFrame = new UISourceCodeFrame(uiSourceCode);
     }
@@ -399,10 +404,18 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
     if (widget instanceof SourceFrame.FontView.FontView) {
       return SourceViewType.FontView;
     }
+    if (widget instanceof Components.HeadersView.HeadersView) {
+      return SourceViewType.HeadersView;
+    }
     return SourceViewType.SourceView;
   }
 
-  #sourceViewTypeForContentType(contentType: Common.ResourceType.ResourceType): SourceViewType {
+  #sourceViewTypeForUISourceCode(uiSourceCode: Workspace.UISourceCode.UISourceCode): SourceViewType {
+    if (uiSourceCode.name() === HEADER_OVERRIDES_FILENAME &&
+        Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.HEADER_OVERRIDES)) {
+      return SourceViewType.HeadersView;
+    }
+    const contentType = uiSourceCode.contentType();
     switch (contentType) {
       case Common.ResourceType.resourceTypes.Image:
         return SourceViewType.ImageView;
@@ -417,8 +430,7 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
     const uiSourceCode = event.data;
     const widget = this.sourceViewByUISourceCode.get(uiSourceCode);
     if (widget) {
-      const contentType = uiSourceCode.contentType();
-      if (this.#sourceViewTypeForWidget(widget) !== this.#sourceViewTypeForContentType(contentType)) {
+      if (this.#sourceViewTypeForWidget(widget) !== this.#sourceViewTypeForUISourceCode(uiSourceCode)) {
         // Remove the exisiting editor tab and create a new one of the correct type.
         this.removeUISourceCodes([uiSourceCode]);
         this.showSourceLocation(uiSourceCode);
@@ -602,20 +614,18 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
   }
 
   save(): void {
-    this.saveSourceFrame(this.currentSourceFrame());
+    this.saveSourceView(this.visibleView());
   }
 
   saveAll(): void {
     const sourceFrames = this.editorContainer.fileViews();
-    sourceFrames.forEach(this.saveSourceFrame.bind(this));
+    sourceFrames.forEach(this.saveSourceView.bind(this));
   }
 
-  private saveSourceFrame(sourceFrame: UI.Widget.Widget|null): void {
-    if (!(sourceFrame instanceof UISourceCodeFrame)) {
-      return;
+  private saveSourceView(sourceView: UI.Widget.Widget|null): void {
+    if (sourceView instanceof UISourceCodeFrame || sourceView instanceof Components.HeadersView.HeadersView) {
+      sourceView.commitEditing();
     }
-    const uiSourceCodeFrame = (sourceFrame as UISourceCodeFrame);
-    uiSourceCodeFrame.commitEditing();
   }
 
   toggleBreakpointsActiveState(active: boolean): void {
@@ -764,9 +774,12 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
   }
 }
 
+const HEADER_OVERRIDES_FILENAME = '.headers';
+
 // eslint-disable-next-line rulesdir/const_enum
 enum SourceViewType {
   ImageView = 'ImageView',
   FontView = 'FontView',
+  HeadersView = 'HeadersView',
   SourceView = 'SourceView',
 }

package/front_end/panels/sources/components/HeadersView.css

@@ -0,0 +1,32 @@
+/*
+ * 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.
+ */
+
+:host {
+  flex-grow: 1;
+}
+
+.center-wrapper {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.centered {
+  margin: 1em;
+  max-width: 300px;
+  text-align: center;
+}
+
+.error-header {
+  font-weight: bold;
+  margin-bottom: 1em;
+}
+
+.error-body {
+  line-height: 1.5em;
+  color: var(--color-text-secondary);
+}

package/front_end/panels/sources/components/HeadersView.ts

@@ -0,0 +1,89 @@
+// 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 i18n from '../../../core/i18n/i18n.js';
+import * as Persistence from '../../../models/persistence/persistence.js';
+import type * as Workspace from '../../../models/workspace/workspace.js';
+import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
+import * as UI from '../../../ui/legacy/legacy.js';
+import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+
+import HeadersViewStyles from './HeadersView.css.js';
+
+const UIStrings = {
+  /**
+  *@description Error message for files which cannot not be parsed.
+  *@example {.headers} PH1
+  */
+  errorWhenParsing: 'Error when parsing \'\'{PH1}\'\'.',
+  /**
+  *@description Explainer for files which cannot be parsed.
+  *@example {.headers} PH1
+  */
+  parsingErrorExplainer:
+      'This is most likely due to a syntax error in \'\'{PH1}\'\'. Try opening this file in an external editor to fix the error or delete the file and re-create the override.',
+};
+const str_ = i18n.i18n.registerUIStrings('panels/sources/components/HeadersView.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export class HeadersView extends UI.View.SimpleView {
+  readonly #headersViewComponent = new HeadersViewComponent();
+  #uiSourceCode: Workspace.UISourceCode.UISourceCode;
+
+  constructor(uiSourceCode: Workspace.UISourceCode.UISourceCode) {
+    super('HeadersView');
+    this.#uiSourceCode = uiSourceCode;
+    this.element.appendChild(this.#headersViewComponent);
+    this.#headersViewComponent.data = {
+      uiSourceCode: this.#uiSourceCode,
+    };
+  }
+
+  commitEditing(): void {
+    this.#uiSourceCode.commitWorkingCopy();
+    Persistence.NetworkPersistenceManager.NetworkPersistenceManager.instance().updateInterceptionPatterns();
+  }
+}
+
+export interface HeadersViewComponentData {
+  uiSourceCode: Workspace.UISourceCode.UISourceCode;
+}
+
+export class HeadersViewComponent extends HTMLElement {
+  static readonly litTagName = LitHtml.literal`devtools-sources-headers-view`;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #uiSourceCode: Workspace.UISourceCode.UISourceCode|null = null;
+
+  connectedCallback(): void {
+    this.#shadow.adoptedStyleSheets = [HeadersViewStyles];
+  }
+
+  set data(data: HeadersViewComponentData) {
+    this.#uiSourceCode = data.uiSourceCode;
+    this.#render();
+  }
+
+  #render(): void {
+    const fileName = this.#uiSourceCode?.name() || '.headers';
+    // clang-format off
+    LitHtml.render(LitHtml.html`
+      <div class="center-wrapper">
+        <div class="centered">
+          <div class="error-header">${i18nString(UIStrings.errorWhenParsing, {PH1: fileName})}</div>
+          <div class="error-body">${i18nString(UIStrings.parsingErrorExplainer, {PH1: fileName})}</div>
+        </div>
+      </div>
+    `, this.#shadow, {host: this});
+    // clang-format on
+  }
+}
+
+ComponentHelpers.CustomElements.defineComponent('devtools-sources-headers-view', HeadersViewComponent);
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface HTMLElementTagNameMap {
+    'devtools-sources-headers-view': HeadersViewComponent;
+  }
+}

package/front_end/panels/sources/components/components.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 HeadersView from './HeadersView.js';
+
+export {
+  HeadersView,
+};

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.975699"
+  "version": "1.0.976703"
 }