chrome-devtools-frontend 1.0.941208 → 1.0.942095

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

@@ -3,21 +3,21 @@
   "version": "0.0.1",
   "private": true,
   "dependencies": {
-    "@codemirror/autocomplete": "0.19.3",
+    "@codemirror/autocomplete": "0.19.5",
     "@codemirror/closebrackets": "0.19.0",
-    "@codemirror/commands": "0.19.4",
+    "@codemirror/commands": "0.19.5",
     "@codemirror/comment": "0.19.0",
-    "@codemirror/fold": "0.19.0",
-    "@codemirror/gutter": "0.19.2",
+    "@codemirror/fold": "0.19.1",
+    "@codemirror/gutter": "0.19.3",
     "@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-javascript": "0.19.3",
     "@codemirror/lang-json": "0.19.1",
-    "@codemirror/lang-markdown": "0.19.1",
+    "@codemirror/lang-markdown": "0.19.2",
     "@codemirror/lang-php": "0.19.1",
     "@codemirror/lang-python": "0.19.2",
     "@codemirror/lang-wast": "0.19.0",
@@ -25,13 +25,15 @@
     "@codemirror/language": "0.19.3",
     "@codemirror/legacy-modes": "0.19.0",
     "@codemirror/matchbrackets": "0.19.3",
+    "@codemirror/panel": "0.19.0",
+    "@codemirror/rangeset": "0.19.2",
     "@codemirror/search": "0.19.2",
-    "@codemirror/state": "0.19.2",
+    "@codemirror/state": "0.19.5",
     "@codemirror/stream-parser": "0.19.2",
-    "@codemirror/text": "0.19.4",
-    "@codemirror/tooltip": "0.19.4",
-    "@codemirror/view": "0.19.9",
-    "@lezer/common": "0.15.7",
+    "@codemirror/text": "0.19.5",
+    "@codemirror/tooltip": "0.19.6",
+    "@codemirror/view": "0.19.16",
+    "@lezer/common": "0.15.8",
     "@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

@@ -2,56 +2,50 @@
 // 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-heading'},
-      {tag: t.link, class: 'token-link'},
-      {tag: t.strikethrough, class: 'token-strikethrough'},
-      {tag: t.strong, class: 'token-strong'},
-      {tag: t.emphasis, class: 'token-emphasis'},
-    ]);
-  }
-  return highlightStyle;
-}
+import * as CodeMirror from '../../../third_party/codemirror.next/codemirror.next.js';
+
+const t = CodeMirror.tags;
+
+export const highlightStyle: CodeMirror.HighlightStyle = CodeMirror.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-heading'},
+  {tag: t.link, class: 'token-link'},
+  {tag: t.strikethrough, class: 'token-strikethrough'},
+  {tag: t.strong, class: 'token-strong'},
+  {tag: t.emphasis, class: 'token-emphasis'},
+]);
 
 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);
+  let tree: CodeMirror.Tree;
+  if (language) {
+    tree = language.language.parser.parse(code);
+  } else {
+    tree = new CodeMirror.Tree(CodeMirror.NodeType.none, [], [], code.length);
+  }
+  return new CodeHighlighter(code, tree);
 }
 
 export async function highlightNode(node: Element, mimeType: string): Promise<void> {
@@ -71,57 +65,55 @@ export async function highlightNode(node: Element, mimeType: string): Promise<vo
 }
 
 export async function languageFromMIME(mimeType: string): Promise<CodeMirror.LanguageSupport|null> {
-  const CM = await importCM();
-
   switch (mimeType) {
     case 'text/javascript':
-      return (await CM.javascript()).javascript();
+      return CodeMirror.javascript.javascript();
     case 'text/jsx':
-      return (await CM.javascript()).javascript({jsx: true});
+      return CodeMirror.javascript.javascript({jsx: true});
     case 'text/typescript':
-      return (await CM.javascript()).javascript({typescript: true});
+      return CodeMirror.javascript.javascript({typescript: true});
     case 'text/typescript-jsx':
-      return (await CM.javascript()).javascript({typescript: true, jsx: true});
+      return CodeMirror.javascript.javascript({typescript: true, jsx: true});
 
     case 'text/css':
     case 'text/x-scss':
-      return (await CM.css()).css();
+      return CodeMirror.css.css();
 
     case 'text/html':
-      return (await CM.html()).html();
+      return CodeMirror.html.html();
 
     case 'application/xml':
-      return (await CM.xml()).xml();
+      return (await CodeMirror.xml()).xml();
 
     case 'text/webassembly':
-      return (await CM.wast()).wast();
+      return (await CodeMirror.wast()).wast();
 
     case 'text/x-c++src':
-      return (await CM.cpp()).cpp();
+      return (await CodeMirror.cpp()).cpp();
 
     case 'text/x-java':
-      return (await CM.java()).java();
+      return (await CodeMirror.java()).java();
 
     case 'application/json':
-      return (await CM.json()).json();
+      return (await CodeMirror.json()).json();
 
     case 'application/x-httpd-php':
-      return (await CM.php()).php();
+      return (await CodeMirror.php()).php();
 
     case 'text/x-python':
-      return (await CM.python()).python();
+      return (await CodeMirror.python()).python();
 
     case 'text/markdown':
-      return (await CM.markdown()).markdown();
+      return (await CodeMirror.markdown()).markdown();
 
     case 'text/x-sh':
-      return new CM.LanguageSupport(await CM.shell());
+      return new CodeMirror.LanguageSupport(await CodeMirror.shell());
 
     case 'text/x-coffeescript':
-      return new CM.LanguageSupport(await CM.coffeescript());
+      return new CodeMirror.LanguageSupport(await CodeMirror.coffeescript());
 
     case 'text/x-clojure':
-      return new CM.LanguageSupport(await CM.clojure());
+      return new CodeMirror.LanguageSupport(await CodeMirror.clojure());
 
     default:
       return null;
@@ -129,7 +121,7 @@ export async function languageFromMIME(mimeType: string): Promise<CodeMirror.Lan
 }
 
 export class CodeHighlighter {
-  constructor(readonly code: string, readonly tree: CodeMirror.Tree, private readonly modCM: typeof CodeMirror) {
+  constructor(readonly code: string, readonly tree: CodeMirror.Tree) {
   }
 
   highlight(token: (text: string, style: string) => void): void {
@@ -144,7 +136,7 @@ export class CodeHighlighter {
         pos = to;
       }
     };
-    this.modCM.highlightTree(this.tree, getHighlightStyle(this.modCM).match, (from, to, style) => {
+    CodeMirror.highlightTree(this.tree, highlightStyle.match, (from, to, style) => {
       flush(from, '');
       flush(to, style);
     }, from, to);

package/front_end/ui/components/data_grid/dataGrid.css

@@ -120,21 +120,23 @@ th.firstVisibleColumn {
 }
 
 [aria-sort="descending"]::after {
-  content: " ";
-  border-left: 0.3em solid transparent;
-  border-right: 0.3em solid transparent;
-  border-top: 0.3em solid var(--color-text-primary);
+  content: "";
+  width: 0;
+  border-left: 0.4em solid transparent;
+  border-right: 0.4em solid transparent;
+  border-top: 0.4em solid var(--color-text-secondary);
   position: absolute;
   right: 0.5em;
-  top: 0.6em;
+  top: 0.85em;
 }
 
 [aria-sort="ascending"]::after {
-  content: " ";
-  border-bottom: 0.3em solid var(--color-text-primary);
-  border-left: 0.3em solid transparent;
-  border-right: 0.3em solid transparent;
+  content: "";
+  width: 0;
+  border-bottom: 0.4em solid var(--color-text-secondary);
+  border-left: 0.4em solid transparent;
+  border-right: 0.4em solid transparent;
   position: absolute;
   right: 0.5em;
-  top: 0.6em;
+  top: 0.7em;
 }

package/front_end/ui/components/docs/css_overview/start_view.html

@@ -0,0 +1,25 @@
+<!--
+  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>CSS Overview Start View</title>
+    <style>
+      #container {
+        width: 80%;
+        border: 1px solid black;
+        padding: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+    </div>
+    <script type="module" src="./start_view.js"></script>
+  </body>
+</html>

package/front_end/ui/components/docs/css_overview/start_view.ts

@@ -0,0 +1,14 @@
+// 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 CSSOverviewComponents from '../../../../panels/css_overview/components/components.js';
+import * as ComponentHelpers from '../../helpers/helpers.js';
+
+await ComponentHelpers.ComponentServerSetup.setup();
+await FrontendHelpers.initializeGlobalVars();
+
+const component = new CSSOverviewComponents.CSSOverviewStartView.CSSOverviewStartView();
+
+document.getElementById('container')?.appendChild(component);

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

@@ -8,7 +8,8 @@ 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';
+import {baseConfiguration, dynamicSetting, DynamicSetting} from './config.js';
+import {toLineColumn, toOffset} from './position.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -21,6 +22,7 @@ export class TextEditor extends HTMLElement {
 
   private readonly shadow = this.attachShadow({mode: 'open'});
   private activeEditor: CodeMirror.EditorView|undefined = undefined;
+  private dynamicSettings: readonly DynamicSetting<unknown>[] = DynamicSetting.none;
   private activeSettingListeners: [Common.Settings.Setting<unknown>, (event: {data: unknown}) => void][] = [];
   private pendingState: CodeMirror.EditorState|undefined;
 
@@ -32,10 +34,17 @@ export class TextEditor extends HTMLElement {
 
   private createEditor(): CodeMirror.EditorView {
     this.activeEditor = new CodeMirror.EditorView({
-      state: this.updateDynamicSettings(this.state),
+      state: this.state,
       parent: this.shadow,
       root: this.shadow,
+      dispatch: (tr: CodeMirror.Transaction): void => {
+        this.editor.update([tr]);
+        if (tr.reconfigured) {
+          this.ensureSettingListeners();
+        }
+      },
     });
+    this.ensureSettingListeners();
     return this.activeEditor;
   }
 
@@ -43,6 +52,10 @@ export class TextEditor extends HTMLElement {
     return this.activeEditor || this.createEditor();
   }
 
+  dispatch(spec: CodeMirror.TransactionSpec): void {
+    return this.editor.dispatch(spec);
+  }
+
   get state(): CodeMirror.EditorState {
     if (this.activeEditor) {
       return this.activeEditor.state;
@@ -65,7 +78,6 @@ export class TextEditor extends HTMLElement {
     if (!this.activeEditor) {
       this.createEditor();
     }
-    this.registerSettingHandlers();
   }
 
   disconnectedCallback(): void {
@@ -73,63 +85,94 @@ export class TextEditor extends HTMLElement {
       this.pendingState = this.activeEditor.state;
       this.activeEditor.destroy();
       this.activeEditor = undefined;
+      this.ensureSettingListeners();
     }
-    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);
-      }
+  focus(): void {
+    if (this.activeEditor) {
+      this.activeEditor.focus();
     }
-    return changes.length ? state.update({effects: changes}).state : state;
   }
 
-  private registerSettingHandlers(): void {
+  private ensureSettingListeners(): void {
+    const dynamicSettings = this.activeEditor ? this.activeEditor.state.facet(dynamicSetting) : DynamicSetting.none;
+    if (dynamicSettings === this.dynamicSettings) {
+      return;
+    }
+    this.dynamicSettings = dynamicSettings;
+
+    for (const [setting, listener] of this.activeSettingListeners) {
+      setting.removeChangeListener(listener);
+    }
+    this.activeSettingListeners = [];
+
     const settings = Common.Settings.Settings.instance();
-    for (const opt of this.state.facet(dynamicSetting)) {
+    for (const dynamicSetting of dynamicSettings) {
       const handler = ({data}: {data: unknown}): void => {
-        const change = opt.sync(this.state, data);
+        const change = dynamicSetting.sync(this.state, data);
         if (change && this.activeEditor) {
           this.activeEditor.dispatch({effects: change});
         }
       };
-      const setting = settings.moduleSetting(opt.settingName);
+      const setting = settings.moduleSetting(dynamicSetting.settingName);
       setting.addChangeListener(handler);
       this.activeSettingListeners.push([setting, handler]);
     }
   }
 
-  revealPosition(position: number): void {
+  revealPosition(selection: CodeMirror.EditorSelection, highlight: boolean = true): void {
     const view = this.activeEditor;
     if (!view) {
       return;
     }
 
-    const line = view.state.doc.lineAt(position);
+    const line = view.state.doc.lineAt(selection.main.head);
+    const effects: CodeMirror.StateEffect<unknown>[] = [];
+    if (highlight) {
+      effects.push(
+          view.state.field(highlightState, false) ?
+              setHighlightLine.of(line.from) :
+              CodeMirror.StateEffect.appendConfig.of(highlightState.init(() => highlightDeco(line.from))));
+    }
+    const editorRect = view.scrollDOM.getBoundingClientRect();
+    const targetPos = view.coordsAtPos(selection.main.head);
+    if (!targetPos || targetPos.top < editorRect.top || targetPos.bottom > editorRect.bottom) {
+      effects.push(CodeMirror.EditorView.centerOn.of(selection.main));
+    }
+
     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)))],
+      selection,
+      effects,
+      userEvent: 'select.reveal',
     });
-    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);
+    if (highlight) {
+      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);
+    }
+  }
+
+  createSelection(head: {lineNumber: number, columnNumber: number}, anchor?: {
+    lineNumber: number,
+    columnNumber: number,
+  }): CodeMirror.EditorSelection {
+    const {doc} = this.state;
+    const headPos = toOffset(doc, head);
+    return CodeMirror.EditorSelection.single(anchor ? toOffset(doc, anchor) : headPos, headPos);
+  }
+
+  toLineColumn(pos: number): {lineNumber: number, columnNumber: number} {
+    return toLineColumn(this.state.doc, pos);
+  }
+
+  toOffset(pos: {lineNumber: number, columnNumber: number}): number {
+    return toOffset(this.state.doc, pos);
   }
 }
 

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

@@ -31,24 +31,35 @@ export const dynamicSetting = CM.Facet.define<DynamicSetting<unknown>>();
 
 export class DynamicSetting<T> {
   compartment = new CM.Compartment();
-  extension: CM.Extension;
 
   constructor(
       readonly settingName: string,
-      private readonly getExtension: (value: T, state: CM.EditorState) => CM.Extension,
+      private readonly getExtension: (value: T) => CM.Extension,
   ) {
-    this.extension = [this.compartment.of(empty), dynamicSetting.of(this as DynamicSetting<unknown>)];
+  }
+
+  settingValue(): T {
+    return Common.Settings.Settings.instance().moduleSetting(this.settingName).get() as T;
+  }
+
+  instance(): CM.Extension {
+    return [
+      this.compartment.of(this.getExtension(this.settingValue())),
+      dynamicSetting.of(this as DynamicSetting<unknown>),
+    ];
   }
 
   sync(state: CM.EditorState, value: T): CM.StateEffect<unknown>|null {
     const cur = this.compartment.get(state);
-    const needed = this.getExtension(value, state);
+    const needed = this.getExtension(value);
     return cur === needed ? null : this.compartment.reconfigure(needed);
   }
 
   static bool(name: string, enabled: CM.Extension, disabled: CM.Extension = empty): DynamicSetting<boolean> {
     return new DynamicSetting<boolean>(name, val => val ? enabled : disabled);
   }
+
+  static none: readonly DynamicSetting<unknown>[] = [];
 }
 
 export const tabMovesFocus = DynamicSetting.bool('textEditorTabMovesFocus', CM.keymap.of([{
@@ -82,23 +93,15 @@ export function guessIndent(doc: CM.Text): string {
     values[space] = (values[space] || 0) + 1;
   }
   const minOccurrence = scanned * 0.05;
-  const sorted = Object.entries(values).filter(e => e[1] > minOccurrence).sort((a, b) => a[1] - b[1]);
-  return sorted.length ? sorted[0][0] : Common.Settings.Settings.instance().moduleSetting('textEditorIndent').get();
+  const shortest = Object.entries(values).reduce((shortest, [string, count]): string|null => {
+    return count < minOccurrence || shortest && shortest.length < string.length ? shortest : string;
+  }, null as string | null);
+  return shortest ?? Common.Settings.Settings.instance().moduleSetting('textEditorIndent').get();
 }
 
-const cachedIndentUnit: {[indent: string]: CM.Extension} = Object.create(null);
+const deriveIndentUnit = CM.Prec.highest(CM.indentUnit.compute([], (state: CM.EditorState) => guessIndent(state.doc)));
 
-function getIndentUnit(indent: string): CM.Extension {
-  let value = cachedIndentUnit[indent];
-  if (!value) {
-    value = cachedIndentUnit[indent] = CM.indentUnit.of(indent);
-  }
-  return value;
-}
-
-export const autoDetectIndent = new DynamicSetting<boolean>('textEditorAutoDetectIndent', (on, state) => {
-  return on ? CM.Prec.override(getIndentUnit(guessIndent(state.doc))) : empty;
-});
+export const autoDetectIndent = DynamicSetting.bool('textEditorAutoDetectIndent', deriveIndentUnit);
 
 function matcher(decorator: CM.MatchDecorator): CM.Extension {
   return CM.ViewPlugin.define(
@@ -154,6 +157,16 @@ export const showWhitespace = new DynamicSetting<string>('showWhitespacesInEdito
 
 export const allowScrollPastEof = DynamicSetting.bool('allowScrollPastEof', CM.scrollPastEnd());
 
+const cachedIndentUnit: {[indent: string]: CM.Extension} = Object.create(null);
+
+function getIndentUnit(indent: string): CM.Extension {
+  let value = cachedIndentUnit[indent];
+  if (!value) {
+    value = cachedIndentUnit[indent] = CM.indentUnit.of(indent);
+  }
+  return value;
+}
+
 export const indentUnit = new DynamicSetting<string>('textEditorIndent', getIndentUnit);
 
 export const domWordWrap = DynamicSetting.bool('domWordWrap', CM.EditorView.lineWrapping);
@@ -184,22 +197,25 @@ function themeIsDark(): boolean {
 
 const dummyDarkTheme = CM.EditorView.theme({}, {dark: true});
 
+export function theme(): CM.Extension {
+  return [editorTheme, themeIsDark() ? dummyDarkTheme : []];
+}
+
 export function baseConfiguration(text: string): CM.Extension {
   return [
-    editorTheme,
-    themeIsDark() ? dummyDarkTheme : [],
+    theme(),
     CM.highlightSpecialChars(),
     CM.history(),
     CM.drawSelection(),
     CM.EditorState.allowMultipleSelections.of(true),
     CM.indentOnInput(),
-    CodeHighlighter.CodeHighlighter.getHighlightStyle(CM),
+    CodeHighlighter.CodeHighlighter.highlightStyle,
     CM.closeBrackets(),
     baseKeymap,
-    tabMovesFocus,
-    bracketMatching,
-    indentUnit,
-    CM.Prec.fallback(CM.EditorView.contentAttributes.of({'aria-label': i18nString(UIStrings.codeEditor)})),
+    tabMovesFocus.instance(),
+    bracketMatching.instance(),
+    indentUnit.instance(),
+    CM.Prec.lowest(CM.EditorView.contentAttributes.of({'aria-label': i18nString(UIStrings.codeEditor)})),
     detectLineSeparator(text),
     autocompletion,
     CM.tooltips({parent: getTooltipHost() as unknown as HTMLElement}),
@@ -221,7 +237,7 @@ function getTooltipHost(): ShadowRoot {
                                extensions: [
                                  editorTheme,
                                  themeIsDark() ? dummyDarkTheme : [],
-                                 CodeHighlighter.CodeHighlighter.getHighlightStyle(CM),
+                                 CodeHighlighter.CodeHighlighter.highlightStyle,
                                  CM.showTooltip.of({
                                    pos: 0,
                                    create() {

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

@@ -9,9 +9,8 @@ import * as CodeMirror from '../../../third_party/codemirror.next/codemirror.nex
 import * as UI from '../../legacy/legacy.js';
 import {cursorTooltip} from './cursor_tooltip.js';
 
-export async function completion(): Promise<CodeMirror.Extension> {
-  const {javascriptLanguage} = await CodeMirror.javascript();
-  return javascriptLanguage.data.of({
+export function completion(): CodeMirror.Extension {
+  return CodeMirror.javascript.javascriptLanguage.data.of({
     autocomplete: javascriptCompletionSource,
   });
 }

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

@@ -0,0 +1,17 @@
+// 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';
+
+export function toOffset(
+    doc: CodeMirror.Text, {lineNumber, columnNumber}: {lineNumber: number, columnNumber: number}): number {
+  const line = doc.line(Math.max(1, Math.min(doc.lines, lineNumber + 1)));
+  return Math.max(line.from, Math.min(line.to, line.from + columnNumber));
+}
+
+export function toLineColumn(doc: CodeMirror.Text, offset: number): {lineNumber: number, columnNumber: number} {
+  offset = Math.max(0, Math.min(offset, doc.length));
+  const line = doc.lineAt(offset);
+  return {lineNumber: line.number - 1, columnNumber: offset - line.from};
+}