chrome-devtools-frontend 1.0.927127 → 1.0.928589

package/front_end/third_party/codemirror.next/package.json

@@ -24,14 +24,14 @@
     "@codemirror/lang-xml": "0.19.2",
     "@codemirror/language": "0.19.3",
     "@codemirror/legacy-modes": "0.19.0",
-    "@codemirror/matchbrackets": "0.19.1",
+    "@codemirror/matchbrackets": "0.19.3",
     "@codemirror/search": "0.19.2",
     "@codemirror/state": "0.19.2",
     "@codemirror/stream-parser": "0.19.2",
-    "@codemirror/text": "0.19.3",
+    "@codemirror/text": "0.19.4",
     "@codemirror/tooltip": "0.19.2",
-    "@codemirror/view": "0.19.8",
-    "@lezer/common": "0.15.5",
+    "@codemirror/view": "0.19.9",
+    "@lezer/common": "0.15.6",
     "@rollup/plugin-node-resolve": "^13.0.4",
     "rollup-plugin-dts": "^4.0.0",
     "rollup-plugin-terser": "^7.0.2"

package/front_end/ui/components/code_highlighter/CodeHighlighter.ts

@@ -0,0 +1,137 @@
+// Copyright 2021 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 type * as CodeMirror from '../../../third_party/codemirror.next/codemirror.next.js';
+
+let highlightStyle: CodeMirror.HighlightStyle|null = null;
+
+function importCM(): Promise<typeof CodeMirror> {
+  return import('../../../third_party/codemirror.next/codemirror.next.js');
+}
+
+export function getHighlightStyle(modCM: typeof CodeMirror): CodeMirror.HighlightStyle {
+  if (!highlightStyle) {
+    const t = modCM.tags;
+    highlightStyle = modCM.HighlightStyle.define([
+      {tag: t.variableName, class: 'token-variable'},
+      {tag: t.propertyName, class: 'token-property'},
+      {tag: [t.typeName, t.className, t.namespace, t.macroName], class: 'token-type'},
+      {tag: [t.special(t.name), t.constant(t.className)], class: 'token-variable-special'},
+      {tag: t.definition(t.name), class: 'token-definition'},
+      {tag: t.standard(t.variableName), class: 'token-builtin'},
+
+      {tag: [t.number, t.literal, t.unit], class: 'token-number'},
+      {tag: t.string, class: 'token-string'},
+      {tag: [t.special(t.string), t.regexp, t.escape], class: 'token-string-special'},
+      {tag: [t.atom, t.labelName, t.bool], class: 'token-atom'},
+
+      {tag: t.keyword, class: 'token-keyword'},
+      {tag: [t.comment, t.quote], class: 'token-comment'},
+      {tag: t.meta, class: 'token-meta'},
+      {tag: t.invalid, class: 'token-invalid'},
+
+      {tag: t.tagName, class: 'token-tag'},
+      {tag: t.attributeName, class: 'token-attribute'},
+      {tag: t.attributeValue, class: 'token-attribute-value'},
+
+      {tag: t.inserted, class: 'token-inserted'},
+      {tag: t.deleted, class: 'token-deleted'},
+      {tag: t.heading, class: 'token-variable-special'},
+      {tag: t.link, class: 'token-variable-special'},
+      {tag: t.strikethrough, class: 'token-strikethrough'},
+      {tag: t.strong, class: 'token-strong'},
+      {tag: t.emphasis, class: 'token-emphasis'},
+    ]);
+  }
+  return highlightStyle;
+}
+
+export async function create(code: string, mimeType: string): Promise<CodeHighlighter> {
+  const CM = await importCM();
+  const language = await languageFromMIME(mimeType);
+  const tree = language ? language.language.parser.parse(code) : new CM.Tree(CM.NodeType.none, [], [], code.length);
+  return new CodeHighlighter(code, tree, CM);
+}
+
+export async function languageFromMIME(mimeType: string): Promise<CodeMirror.LanguageSupport|null> {
+  const CM = await importCM();
+
+  switch (mimeType) {
+    case 'text/javascript':
+      return (await CM.javascript()).javascript();
+    case 'text/jsx':
+      return (await CM.javascript()).javascript({jsx: true});
+    case 'text/typescript':
+      return (await CM.javascript()).javascript({typescript: true});
+    case 'text/typescript-jsx':
+      return (await CM.javascript()).javascript({typescript: true, jsx: true});
+
+    case 'text/css':
+    case 'text/x-scss':
+      return (await CM.css()).css();
+
+    case 'text/html':
+      return (await CM.html()).html();
+
+    case 'application/xml':
+      return (await CM.xml()).xml();
+
+    case 'text/webassembly':
+      return (await CM.wast()).wast();
+
+    case 'text/x-c++src':
+      return (await CM.cpp()).cpp();
+
+    case 'text/x-java':
+      return (await CM.java()).java();
+
+    case 'application/json':
+      return (await CM.json()).json();
+
+    case 'application/x-httpd-php':
+      return (await CM.php()).php();
+
+    case 'text/x-python':
+      return (await CM.python()).python();
+
+    case 'text/markdown':
+      return (await CM.markdown()).markdown();
+
+    case 'text/x-sh':
+      return new CM.LanguageSupport(await CM.shell());
+
+    case 'text/x-coffeescript':
+      return new CM.LanguageSupport(await CM.coffeescript());
+
+    case 'text/x-clojure':
+      return new CM.LanguageSupport(await CM.clojure());
+
+    default:
+      return null;
+  }
+}
+
+export class CodeHighlighter {
+  constructor(readonly code: string, readonly tree: CodeMirror.Tree, private readonly modCM: typeof CodeMirror) {
+  }
+
+  highlight(token: (text: string, style: string) => void): void {
+    this.highlightRange(0, this.code.length, token);
+  }
+
+  highlightRange(from: number, to: number, token: (text: string, style: string) => void): void {
+    let pos = from;
+    const flush = (to: number, style: string): void => {
+      if (to > pos) {
+        token(this.code.slice(pos, to), style);
+        pos = to;
+      }
+    };
+    this.modCM.highlightTree(this.tree, getHighlightStyle(this.modCM).match, (from, to, style) => {
+      flush(from, '');
+      flush(to, style);
+    }, from, to);
+    flush(to, '');
+  }
+}

package/front_end/ui/components/code_highlighter/codeHighlighter.css

@@ -0,0 +1,51 @@
+/*
+ * Copyright 2021 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.
+ */
+
+.token-variable { color: var(--color-token-variable); }
+.token-property { color: var(--color-token-property); }
+.token-type { color: var(--color-token-type); }
+.token-variable-special { color: var(--color-token-variable-special); }
+.token-definition { color: var(--color-token-definition); }
+.token-builtin { color: var(--color-token-builtin); }
+
+.token-number { color: var(--color-token-number); }
+.token-string { color: var(--color-token-string); }
+.token-string-special { color: var(--color-token-string-special); }
+.token-atom { color: var(--color-token-atom); }
+
+.token-keyword { color: var(--color-token-keyword); }
+.token-comment { color: var(--color-token-comment); }
+.token-meta { color: var(--color-token-meta); }
+.token-invalid { color: var(--color-error-text); }
+
+.token-tag { color: var(--color-token-tag); }
+.token-attribute { color: var(--color-token-attribute); }
+.token-attribute-value { color: var(--color-token-attribute-value); }
+
+.token-inserted { color: var(--color-token-inserted); }
+.token-deleted { color: var(--color-token-deleted); }
+
+.token-heading {
+  color: var(--color-token-variable-special);
+  font-weight: bold;
+}
+
+.token-link {
+  color: var(--color-token-variable-special);
+  text-decoration: underline;
+}
+
+.token-strikethrough {
+  text-decoration: strike-through;
+}
+
+.token-strong {
+  font-weight: bold;
+}
+
+.token-emphasis {
+  font-style: italic;
+}

package/front_end/ui/components/code_highlighter/code_highlighter.ts

@@ -0,0 +1,11 @@
+// Copyright 2021 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 Style from './codeHighlighter.css.js';
+import * as CodeHighlighter from './CodeHighlighter.js';
+
+export {
+  CodeHighlighter,
+  Style,
+};

package/front_end/ui/components/docs/text_editor/basic.html

@@ -0,0 +1,28 @@
+<!--
+  Copyright 2020 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.
+-->
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Basic Data grid example</title>
+    <style>
+      #container {
+        width: 80%;
+        border: 1px solid black;
+        margin: 30px;
+      }
+    </style>
+  </head>
+  <body>
+
+    <div id="container">
+    </div>
+
+    <ul id="events"></ul>
+    <script type="module" src="./basic.js"></script>
+  </body>
+</html>

package/front_end/ui/components/docs/text_editor/basic.ts

@@ -0,0 +1,14 @@
+// Copyright 2020 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 FrontendHelpers from '../../../../../test/unittests/front_end/helpers/EnvironmentHelpers.js';
+import * as ComponentHelpers from '../../helpers/helpers.js';
+import * as TextEditor from '../../text_editor/text_editor.js';
+
+await ComponentHelpers.ComponentServerSetup.setup();
+await FrontendHelpers.initializeGlobalVars();
+
+const component = new TextEditor.TextEditor.TextEditor();
+
+document.getElementById('container')?.appendChild(component);

package/front_end/ui/components/docs/text_prompt/basic.html

@@ -0,0 +1,35 @@
+<!--
+  Copyright 2021 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.
+-->
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width" />
+  <title>Basic Text Prompt example</title>
+  <meta charset="UTF-8" />
+  <style>
+    #container {
+      width: 80%;
+      border: 1px solid black;
+      padding: 20px;
+      height: 300px;
+    }
+
+    #container > devtools-text-prompt {
+      vertical-align: middle;
+      font-size: 14px;
+      border: 1px solid #ccc;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="container"></div>
+  <script type="module" src="./basic.js"></script>
+</body>
+
+</html>

package/front_end/ui/components/docs/text_prompt/basic.ts

@@ -0,0 +1,19 @@
+// Copyright 2021 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 FrontendHelpers from '../../../../../test/unittests/front_end/helpers/EnvironmentHelpers.js';
+import * as ComponentHelpers from '../../helpers/helpers.js';
+import * as TextPrompt from '../../text_prompt/text_prompt.js';
+
+await ComponentHelpers.ComponentServerSetup.setup();
+await FrontendHelpers.initializeGlobalVars();
+
+const textPrompt = new TextPrompt.TextPrompt.TextPrompt();
+document.getElementById('container')?.appendChild(textPrompt);
+
+textPrompt.data = {
+  ariaLabel: 'Quick open prompt',
+  prefix: 'Open',
+  suggestion: 'File',
+};

package/front_end/ui/components/issue_counter/IssueLinkIcon.ts

@@ -163,6 +163,7 @@ export class IssueLinkIcon extends HTMLElement {
     // clang-format off
     return LitHtml.html`
       <span class=${LitHtml.Directives.classMap({'link': Boolean(this.issue)})}
+            tabindex="0"
             @click=${this.handleClick}>
         <${IconButton.Icon.Icon.litTagName} .data=${this.iconData() as IconButton.Icon.IconData}
           title=${this.getTooltip()}></${IconButton.Icon.Icon.litTagName}>

package/front_end/ui/components/render_coordinator/RenderCoordinator.ts

@@ -59,6 +59,11 @@ const UNNAMED_WRITE = 'Unnamed write';
 const UNNAMED_SCROLL = 'Unnamed scroll';
 const DEADLOCK_TIMEOUT = 1500;
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+(globalThis as any).__getRenderCoordinatorPendingFrames = function(): number {
+  return RenderCoordinator.pendingFramesCount();
+};
+
 export class RenderCoordinator extends EventTarget {
   static instance({forceNew = false} = {}): RenderCoordinator {
     if (!renderCoordinatorInstance || forceNew) {
@@ -68,6 +73,14 @@ export class RenderCoordinator extends EventTarget {
     return renderCoordinatorInstance;
   }
 
+  static pendingFramesCount(): number {
+    if (!renderCoordinatorInstance) {
+      throw new Error('No render coordinator instance found.');
+    }
+
+    return renderCoordinatorInstance.pendingFramesCount();
+  }
+
   // Toggle on to start tracking. You must call takeRecords() to
   // obtain the records. Please note: records are limited by maxRecordSize below.
   observe = false;
@@ -85,6 +98,10 @@ export class RenderCoordinator extends EventTarget {
   private readonly labels = new WeakMap<CoordinatorCallback, string>();
   private scheduledWorkId = 0;
 
+  pendingFramesCount(): number {
+    return this.pendingWorkFrames.length;
+  }
+
   done(): Promise<void> {
     if (this.pendingWorkFrames.length === 0) {
       this.logIfEnabled('[Queue empty]');

package/front_end/ui/components/request_link_icon/RequestLinkIcon.ts

@@ -197,6 +197,7 @@ export class RequestLinkIcon extends HTMLElement {
     // clang-format off
     return LitHtml.html`
       <span class=${LitHtml.Directives.classMap({'link': Boolean(this.request)})}
+            tabindex="0"
             @click=${this.handleClick}>
         <${IconButton.Icon.Icon.litTagName} .data=${this.iconData() as IconButton.Icon.IconData}
           title=${this.getTooltip()}></${IconButton.Icon.Icon.litTagName}>

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

@@ -0,0 +1,161 @@
+// Copyright 2021 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 Common from '../../../core/common/common.js';
+import * as CodeMirror from '../../../third_party/codemirror.next/codemirror.next.js';
+import * as LitHtml from '../../lit-html/lit-html.js';
+import * as CodeHighlighter from '../code_highlighter/code_highlighter.js';
+import * as ComponentHelpers from '../helpers/helpers.js';
+
+import {baseConfiguration, dynamicSetting} from './config.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'devtools-text-editor': TextEditor;
+  }
+}
+
+export class TextEditor extends HTMLElement {
+  static readonly litTagName = LitHtml.literal`devtools-text-editor`;
+
+  private readonly shadow = this.attachShadow({mode: 'open'});
+  private activeEditor: CodeMirror.EditorView|undefined = undefined;
+  private activeSettingListeners: [Common.Settings.Setting<unknown>, (event: {data: unknown}) => void][] = [];
+  private pendingState: CodeMirror.EditorState|undefined;
+
+  constructor(pendingState?: CodeMirror.EditorState) {
+    super();
+    this.pendingState = pendingState;
+    this.shadow.adoptedStyleSheets = [CodeHighlighter.Style.default];
+  }
+
+  private createEditor(): CodeMirror.EditorView {
+    this.activeEditor = new CodeMirror.EditorView({
+      state: this.updateDynamicSettings(this.state),
+      parent: this.shadow,
+      root: this.shadow,
+    });
+    return this.activeEditor;
+  }
+
+  get editor(): CodeMirror.EditorView {
+    return this.activeEditor || this.createEditor();
+  }
+
+  get state(): CodeMirror.EditorState {
+    if (this.activeEditor) {
+      return this.activeEditor.state;
+    }
+    if (!this.pendingState) {
+      this.pendingState = CodeMirror.EditorState.create({extensions: baseConfiguration('')});
+    }
+    return this.pendingState;
+  }
+
+  set state(state: CodeMirror.EditorState) {
+    if (this.activeEditor) {
+      this.activeEditor.setState(state);
+    } else {
+      this.pendingState = state;
+    }
+  }
+
+  connectedCallback(): void {
+    if (!this.activeEditor) {
+      this.createEditor();
+    }
+    this.registerSettingHandlers();
+  }
+
+  disconnectedCallback(): void {
+    if (this.activeEditor) {
+      this.pendingState = this.activeEditor.state;
+      this.activeEditor.destroy();
+      this.activeEditor = undefined;
+    }
+    for (const [setting, listener] of this.activeSettingListeners) {
+      setting.removeChangeListener(listener);
+    }
+    this.activeSettingListeners = [];
+  }
+
+  private updateDynamicSettings(state: CodeMirror.EditorState): CodeMirror.EditorState {
+    const settings = Common.Settings.Settings.instance();
+    const changes = [];
+    for (const opt of state.facet(dynamicSetting)) {
+      const mustUpdate = opt.sync(state, settings.moduleSetting(opt.settingName).get());
+      if (mustUpdate) {
+        changes.push(mustUpdate);
+      }
+    }
+    return changes.length ? state.update({effects: changes}).state : state;
+  }
+
+  private registerSettingHandlers(): void {
+    const settings = Common.Settings.Settings.instance();
+    for (const opt of this.state.facet(dynamicSetting)) {
+      const handler = ({data}: {data: unknown}): void => {
+        const change = opt.sync(this.state, data);
+        if (change && this.activeEditor) {
+          this.activeEditor.dispatch({effects: change});
+        }
+      };
+      const setting = settings.moduleSetting(opt.settingName);
+      setting.addChangeListener(handler);
+      this.activeSettingListeners.push([setting, handler]);
+    }
+  }
+
+  revealPosition(position: number): void {
+    const view = this.activeEditor;
+    if (!view) {
+      return;
+    }
+
+    const line = view.state.doc.lineAt(position);
+    view.dispatch({
+      selection: CodeMirror.EditorSelection.cursor(position),
+      scrollIntoView: true,
+      effects:
+          [view.state.field(highlightState, false) ?
+               setHighlightLine.of(line.from) :
+               CodeMirror.StateEffect.appendConfig.of(highlightState.init(() => highlightDeco(line.from)))],
+    });
+    const {id} = view.state.field(highlightState);
+    // Reset the highlight state if, after 2 seconds (the animation
+    // duration) it is still showing this highlight.
+    setTimeout(() => {
+      if (view.state.field(highlightState).id === id) {
+        view.dispatch({effects: setHighlightLine.of(null)});
+      }
+    }, 2000);
+  }
+}
+
+ComponentHelpers.CustomElements.defineComponent('devtools-text-editor', TextEditor);
+
+const setHighlightLine = CodeMirror.StateEffect.define<number|null>(
+    {map: (value, mapping) => value === null ? null : mapping.mapPos(value)});
+
+function highlightDeco(position: number): {deco: CodeMirror.DecorationSet, id: number} {
+  const deco = CodeMirror.Decoration.set(
+      [CodeMirror.Decoration.line({attributes: {class: 'cm-highlightedLine'}}).range(position)]);
+  return {deco, id: Math.floor(Math.random() * 0xfffff)};
+}
+
+const highlightState = CodeMirror.StateField.define<{deco: CodeMirror.DecorationSet, id: number}>({
+  create: () => ({deco: CodeMirror.Decoration.none, id: 0}),
+  update(value, tr) {
+    if (!tr.changes.empty && value.deco.size) {
+      value = {deco: value.deco.map(tr.changes), id: value.id};
+    }
+    for (const effect of tr.effects) {
+      if (effect.is(setHighlightLine)) {
+        value = effect.value === null ? {deco: CodeMirror.Decoration.none, id: 0} : highlightDeco(effect.value);
+      }
+    }
+    return value;
+  },
+  provide: field => CodeMirror.EditorView.decorations.from(field, value => value.deco),
+});