chrome-devtools-frontend 1.0.925655 → 1.0.927419

package/front_end/third_party/codemirror.next/codemirror.next.js

@@ -0,0 +1,2 @@
+export{$ as cursorMatchingBracket,_ as closeBracketsKeymap,A as clojure,a0 as cursorSubwordBackward,a1 as cursorSubwordForward,a2 as indentLess,a3 as indentMore,a4 as selectMatchingBracket,a5 as selectSubwordBackward,a6 as selectSubwordForward,a7 as standardKeymap,a8 as toggleComment,a9 as codeFolding,aA as Facet,aa as foldGutter,aB as SelectionRange,ab as foldKeymap,aC as StateEffect,ac as gutter,ad as GutterMarker,aD as StateEffectType,aE as StateField,ae as gutters,aF as Transaction,af as lineNumbers,ag as HighlightStyle,aG as StreamLanguage,aH as StringStream,ah as highlightTree,aI as Line,ai as Tag,aJ as Text,aj as history,ak as historyKeymap,aK as showTooltip,al as redo,aL as tooltips,aM as Decoration,am as redoSelection,aN as drawSelection,an as undo,aO as highlightSpecialChars,ao as undoSelection,aP as MatchDecorator,ap as indentOnInput,aq as indentUnit,aQ as placeholder,ar as bracketMatching,aR as scrollPastEnd,as as Range,aS as ViewPlugin,at as RangeSet,aT as ViewUpdate,au as RangeSetBuilder,aU as WidgetType,aV as TreeCursor,av as selectNextOccurrence,aw as Annotation,ax as AnnotationType,ay as Compartment,az as EditorState,B as coffeescript,D as cpp,e as LanguageSupport,F as css,G as html,g as syntaxTree,h as EditorView,H as java,I as javascript,j as EditorSelection,J as json,K as markdown,L as LRParser,m as ifNotIn,M as php,N as NodeProp,o as NodeType,O as python,P as Parser,q as NodeSet,Q as shell,R as wast,S as xml,T as Tree,t as tags,u as Language,U as acceptCompletion,v as Prec,V as autocompletion,W as completeAnyWord,w as keymap,X as CompletionContext,Y as currentCompletions,Z as closeBrackets}from"./chunk/codemirror.js";
+

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

@@ -0,0 +1,39 @@
+{
+  "description": "Package list used when building/upgrading CodeMirror 6",
+  "version": "0.0.1",
+  "private": true,
+  "dependencies": {
+    "@codemirror/autocomplete": "0.19.3",
+    "@codemirror/closebrackets": "0.19.0",
+    "@codemirror/commands": "0.19.4",
+    "@codemirror/comment": "0.19.0",
+    "@codemirror/fold": "0.19.0",
+    "@codemirror/gutter": "0.19.2",
+    "@codemirror/highlight": "0.19.6",
+    "@codemirror/history": "0.19.0",
+    "@codemirror/lang-cpp": "0.19.1",
+    "@codemirror/lang-css": "0.19.3",
+    "@codemirror/lang-html": "0.19.3",
+    "@codemirror/lang-java": "0.19.1",
+    "@codemirror/lang-javascript": "0.19.2",
+    "@codemirror/lang-json": "0.19.1",
+    "@codemirror/lang-markdown": "0.19.1",
+    "@codemirror/lang-php": "0.19.1",
+    "@codemirror/lang-python": "0.19.2",
+    "@codemirror/lang-wast": "0.19.0",
+    "@codemirror/lang-xml": "0.19.2",
+    "@codemirror/language": "0.19.3",
+    "@codemirror/legacy-modes": "0.19.0",
+    "@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.4",
+    "@codemirror/tooltip": "0.19.2",
+    "@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/third_party/codemirror.next/rebuild.sh

@@ -0,0 +1,6 @@
+npm install
+../../../node_modules/.bin/tsc -d -t es2020 -m es2020 --moduleResolution node bundle.ts
+../../../node_modules/.bin/rollup -c
+rm -rf node_modules package-lock.json bundle.js bundle.d.ts
+# Because there's a bug in clang causing it to reformat import lists even where formatting is disabled, run it right away
+git cl format --js

package/front_end/third_party/codemirror.next/rollup.config.js

@@ -0,0 +1,45 @@
+import {nodeResolve} from '@rollup/plugin-node-resolve';
+import dts from 'rollup-plugin-dts';
+import {terser} from 'rollup-plugin-terser';
+
+export default [{
+  input: './bundle.js',
+  output: {
+    format: 'es',
+    dir: '.',
+    manualChunks(id) {
+      if (/legacy-modes/.test(id)) return 'chunk/legacy';
+    },
+    chunkFileNames(info) {
+      for (let mod of Object.keys(info.modules)) {
+        let name = (/@codemirror\/([\w-]+)/.exec(mod) || [])[1];
+        if (name === 'view') return 'chunk/codemirror.js';
+        if (/^lang-/.test(name)) return `chunk/${name.slice(5)}.js`;
+        if (name === 'legacy-modes') return 'chunk/legacy.js';
+      }
+      throw new Error('Failed to determine a chunk name for ' + Object.keys(info.modules));
+    },
+    entryFileNames: 'codemirror.next.js'
+  },
+  plugins: [
+    nodeResolve(),
+    terser()
+  ]
+}, {
+  input: './bundle.d.ts',
+  output: {
+    file: './codemirror.next.d.ts',
+    format: 'es'
+  },
+  plugins: [
+    dts({respectExternal: true}),
+    {
+      name: 'delete-trailing-whitespace',
+      generateBundle(options, bundle) {
+        for (let file of Object.values(bundle)) {
+          if (file.code) file.code = file.code.replace(/[ \t]+(\n|$)/g, '$1');
+        }
+      }
+    }
+  ]
+}];

package/front_end/ui/components/buttons/Button.ts

@@ -19,9 +19,15 @@ export const enum Variant {
   SECONDARY = 'secondary',
 }
 
-export interface ButtonData {
+export const enum Size {
+  SMALL = 'SMALL',
+  MEDIUM = 'MEDIUM',
+}
+
+interface ButtonData {
   iconUrl?: string;
   variant?: Variant;
+  size?: Size;
 }
 
 export interface ButtonDataWithVariant extends ButtonData {
@@ -30,9 +36,12 @@ export interface ButtonDataWithVariant extends ButtonData {
 
 export class Button extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-button`;
-  private readonly shadow = this.attachShadow({mode: 'open'});
+  private readonly shadow = this.attachShadow({mode: 'open', delegatesFocus: true});
   private readonly boundRender = this.render.bind(this);
-  private readonly props: ButtonData = {};
+  private readonly props: ButtonData = {
+    size: Size.MEDIUM,
+  };
+  private isEmpty = true;
 
   constructor() {
     super();
@@ -46,6 +55,7 @@ export class Button extends HTMLElement {
   set data(data: ButtonDataWithVariant) {
     this.props.variant = data.variant;
     this.props.iconUrl = data.iconUrl;
+    this.props.size = data.size || Size.MEDIUM;
     ComponentHelpers.ScheduledRender.scheduleRender(this, this.boundRender);
   }
 
@@ -59,11 +69,27 @@ export class Button extends HTMLElement {
     ComponentHelpers.ScheduledRender.scheduleRender(this, this.boundRender);
   }
 
+  set size(size: Size) {
+    this.props.size = size;
+    ComponentHelpers.ScheduledRender.scheduleRender(this, this.boundRender);
+  }
+
+  focus(): void {
+    this.shadow.querySelector('button')?.focus();
+  }
+
   connectedCallback(): void {
     this.shadow.adoptedStyleSheets = [buttonStyles];
     ComponentHelpers.ScheduledRender.scheduleRender(this, this.boundRender);
   }
 
+  private onSlotChange(event: Event): void {
+    const slot = event.target as HTMLSlotElement | undefined;
+    const nodes = slot?.assignedNodes();
+    this.isEmpty = !nodes || !Boolean(nodes.length);
+    ComponentHelpers.ScheduledRender.scheduleRender(this, this.boundRender);
+  }
+
   private render(): void {
     if (!this.props.variant) {
       throw new Error('Button requires a variant to be defined');
@@ -71,7 +97,9 @@ export class Button extends HTMLElement {
     const classes = {
       primary: this.props.variant === Variant.PRIMARY,
       secondary: this.props.variant === Variant.SECONDARY,
-      'with-icon': Boolean(this.props.iconUrl),
+      'text-with-icon': Boolean(this.props.iconUrl) && !this.isEmpty,
+      'only-icon': Boolean(this.props.iconUrl) && this.isEmpty,
+      small: Boolean(this.props.size === Size.SMALL),
     };
     // clang-format off
     LitHtml.render(
@@ -84,7 +112,7 @@ export class Button extends HTMLElement {
             } as IconButton.Icon.IconData}
           >
           </${IconButton.Icon.Icon.litTagName}>` : ''}
-          <slot></slot>
+          <slot @slotchange=${this.onSlotChange}></slot>
         </button>
       `, this.shadow, {host: this});
     // clang-format on

package/front_end/ui/components/buttons/button.css

@@ -10,8 +10,14 @@
   box-sizing: border-box;
 }
 
+/**
+* Reset default UA styles for focused elements.
+* The button styles below explicitly implement custom focus styles.
+*/
 *:focus,
-*:focus-visible {
+*:focus-visible,
+:host(:focus),
+:host(:focus-visible) {
   outline: none;
 }
 
@@ -24,6 +30,13 @@ button {
   height: 25px;
   line-height: 14px;
   padding: 5px 12px;
+  justify-content: center;
+  width: 100%;
+}
+
+button.small {
+  height: 18px;
+  border-radius: 2px;
 }
 
 button:focus-visible {
@@ -69,15 +82,32 @@ button.secondary:focus-visible {
   border: 1px solid var(--color-background);
 }
 
-button.with-icon {
+button.secondary:active:focus-visible {
+  border: 1px solid var(--color-button-secondary-background-pressed);
+}
+
+button.text-with-icon {
   padding: 0 12px 0 4px;
 }
 
+button.small.text-with-icon {
+  padding: 0 9px 0 3px;
+}
+
+button.only-icon {
+  padding: 0;
+}
+
 button devtools-icon {
   width: 19px;
   height: 19px;
 }
 
+button.small devtools-icon {
+  width: 14px;
+  height: 14px;
+}
+
 button.primary devtools-icon {
   --icon-color: var(--color-background);
 }

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/button/basic.html

@@ -14,6 +14,7 @@
         padding: 25px;
         display: flex;
         align-items: center;
+        flex-wrap: wrap;
       }
       #container > * {
         margin-right: 10px;

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

@@ -9,8 +9,7 @@ import * as ComponentHelpers from '../../helpers/helpers.js';
 await ComponentHelpers.ComponentServerSetup.setup();
 await FrontendHelpers.initializeGlobalVars();
 
-const testIcon =
-    'data:text/plain;charset=utf-8;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGQ9Ik0xMyA1SDEyVjExSDZWMTJIMTJWMThIMTNWMTJIMTlWMTFIMTNWNVoiIGZpbGw9ImJsYWNrIi8+DQo8L3N2Zz4=';
+const testIcon = '/front_end/Images/ic_file_image.svg';
 
 function appendButton(button: Buttons.Button.Button): void {
   document.querySelector('#container')?.appendChild(button);
@@ -46,10 +45,54 @@ appendButton(primaryIconButton);
 
 // Secondary Icon
 const secondaryIconButton = new Buttons.Button.Button();
-secondaryIconButton.innerText = 'Click me';
-secondaryIconButton.onclick = () => alert('clicked');
+secondaryIconButton.innerText = 'Focus the first button';
+secondaryIconButton.onclick = () => {
+  primaryButton.focus();
+};
 secondaryIconButton.data = {
   variant: Buttons.Button.Variant.SECONDARY,
   iconUrl: testIcon,
 };
 appendButton(secondaryIconButton);
+
+// Primary Icon Only
+const primaryIconOnlyButton = new Buttons.Button.Button();
+primaryIconOnlyButton.data = {
+  variant: Buttons.Button.Variant.PRIMARY,
+  iconUrl: testIcon,
+};
+primaryIconOnlyButton.onclick = () => alert('clicked');
+primaryIconOnlyButton.style.width = '25px';
+appendButton(primaryIconOnlyButton);
+
+// Secondary Icon Only
+const secondaryIconOnlyButton = new Buttons.Button.Button();
+secondaryIconOnlyButton.onclick = () => alert('clicked');
+secondaryIconOnlyButton.style.width = '25px';
+secondaryIconOnlyButton.data = {
+  variant: Buttons.Button.Variant.SECONDARY,
+  iconUrl: testIcon,
+};
+appendButton(secondaryIconOnlyButton);
+
+// Small Primary Icon
+const smallPrimaryIconButton = new Buttons.Button.Button();
+smallPrimaryIconButton.innerText = 'Click me';
+smallPrimaryIconButton.data = {
+  variant: Buttons.Button.Variant.PRIMARY,
+  iconUrl: testIcon,
+  size: Buttons.Button.Size.SMALL,
+};
+smallPrimaryIconButton.onclick = () => alert('clicked');
+appendButton(smallPrimaryIconButton);
+
+// Small Secondary Icon Only
+const smallSecondaryIconOnlyButton = new Buttons.Button.Button();
+smallSecondaryIconOnlyButton.onclick = () => alert('clicked');
+smallSecondaryIconOnlyButton.style.width = '18px';
+smallSecondaryIconOnlyButton.data = {
+  variant: Buttons.Button.Variant.SECONDARY,
+  iconUrl: testIcon,
+  size: Buttons.Button.Size.SMALL,
+};
+appendButton(smallSecondaryIconOnlyButton);

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/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]');