npm - chrome-devtools-frontend - Versions diffs - 1.0.941208 → 1.0.943182 - Mend

chrome-devtools-frontend 1.0.941208 → 1.0.943182

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (289) hide show

package/front_end/third_party/lighthouse/report-assets/standalone-template.html CHANGED Viewed

@@ -21,13 +21,11 @@ limitations under the License.
   <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
   <link rel="icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAEhklEQVR4AWJxL/BhIAesev1U5tcflpncgNrKIsqNIwzC9feMpDUzs70kOczMzMzJJcxwCTMzncPMnOwtzBwzMzPb0vRfeZPp0VhPS5I39V5fdiXV1/VD+9QC7OVn9BsyH1XIoEI1PfmJvLFowVV564+34DFUHudbmfDh4kVXh//7XwE+WjS/YfXZe3yr4j2rqj1AIhSB7hZ8ZtPZu/zw8cK523U4wE1/rvPfWrz4zs0m9ZdC9yUJAlASdBAgocRegfF/f3/h/PuaFsxMdwjAR0vm1+06eMMfIrhLqTWqdH4EumU2SPfMhigJAlRQbZrgrRsl9U+Y2DYDFCz3ILC9kiAiqSrMwbWT0nceEnR+9Kggc2zjOJCASDENkg0a5HfZZgDP81CM3CrQs2Z1+o7DJ6ePr8sK0AOCHv5Jjdt3evyYSaZ351VIStIxPRAUtrBYbxC6w+BZ0ivVSBKkIhJhemSyZpfB00EiPO2VjzYkxhcqXQqCWCShGplvi3y0QxqbuBurMjyJeWnkHZuAEgIQGsUBqwrfjZ+IlBgKyRJzVVYF8O6qFWdh86YzQzMrZigYmxAyfvHgLZQ/LC1CbeniW2Hkqr/PH16SgvGuf2/uzNMBwJA/njxizGPtSyAf7EziJCMGRDRdhoAC4PL1A/SrKQMAAQkEfpJAcRQdrBJ7gNwjSpJsdwK+CANBkqa1LgQB4IicV9nYUct7gaxuDJUErQIiEAiMxLVOFlKzIktPpT0ggpdpC/8YAHnxbgkUY4tAAFSR7AAXNyAAWHJrA/kHGjzg5nleuwFO7Nd/IoDw4Pm58+4jNLmYG0wRA5bErc2Mr3Y+dXTDW1VvwqbJkzMCHQ4S1GTCBOIgUHJrGdEwqzR+jAp/o2qAZelUDoQnruEEdDclJI6576AlNVfc+22XN/+Y1vnJD0Yind6UpEEvn/Hqq15EYjCW7jZCJEpnNvDgkyelDjs106kuux2AAXCSobULOWP8mLhYlpoDMK4qAFXJGk+grtH8YXVz5KJblqaG1+VUdTc0I290bmUQAriGITRbdQnom0aoFj8kx1+wMD2ifncAXUQE4SkDqN1hE0jEophs1SUwZAOhUAiMCLwRtamtTZtbbmZErSAUHbSysaoEmnrsakiMiUAURi283gN6wans9oX8rOCrj7/JP35DFD+iQ7Au/K2KE1jzx6ujjUnXFH9KjEq6ZlhsTBICrNLJf47Pv/pkHzvup1w4dmUbEei0+bcXRqJuh5kVARQ8byyYxOwNGr7A87xh1tp8sGT+uMInrwi++Xj7TQz2d27NvwEkrOflAFQGIDA5khASBCGdO2/Z/MnLPwYfv5TFhjW7QhVKAB6afwe2LpFlFsCnlQEosgQgDsdOG1/LKeNqJS4JCSPJ/i+TakwEARor7gER1Iva5JmPOJK0RUqmoPnnlzFCtmIAhAAQEIQRgDaiYPIauNXcnDlRIrWNFY3hm7PG9YRqr7IV7HrCgAC17befjEvRq2nGhAHtBqDpOuI/I1diUUAMYIxEdyejBJqLnNoszGZtfiX/CztGv2mq+sdaAAAAAElFTkSuQmCC">
   <title>Lighthouse Report</title>
-  <style>/*%%LIGHTHOUSE_CSS%%*/</style>
+  <style>body {margin: 0}</style>
 </head>
-<body class="lh-root lh-vars">
+<body>
   <noscript>Lighthouse report requires JavaScript. Please enable.</noscript>
-  <main><!-- report populated here --></main>
   <div id="lh-log"></div>
   <script>window.__LIGHTHOUSE_JSON__ = %%LIGHTHOUSE_JSON%%;</script>

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

@@ -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 CHANGED Viewed

@@ -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/component_docs.ts CHANGED Viewed

@@ -12,3 +12,17 @@ import * as ToggleFonts from './toggle_fonts.js';
 ToggleDarkMode.init();
 CreateBreadcrumbs.init();
 ToggleFonts.init();
+// This can be used by tests to hide the UI elements that are part of the component docs interface.
+// E.g., this is useful for screenshot tests.
+window.addEventListener('hidecomponentdocsui', () => {
+  for (const node of document.querySelectorAll('.component-docs-ui')) {
+    (node as HTMLElement).style.display = 'none';
+  }
+});
+window.addEventListener('showcomponentdocsui', () => {
+  for (const node of document.querySelectorAll('.component-docs-ui')) {
+    (node as HTMLElement).style.display = '';
+  }
+});

package/front_end/ui/components/docs/create_breadcrumbs.ts CHANGED Viewed

@@ -32,7 +32,7 @@ export function init(): void {
     }
   </style>
-  <ul class="docs-breadcrumbs">
+  <ul class="docs-breadcrumbs component-docs-ui">
     <li><a href="/">Index</a></li>
     <li><a href=".">All component examples</a></li>
   </ul>`, container);

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

@@ -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 ADDED Viewed

@@ -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/docs/icon_button/basic.ts CHANGED Viewed

@@ -12,18 +12,18 @@ function appendComponent(data: IconButton.IconButton.IconButtonData) {
 appendComponent({
   clickHandler: (): void => {},
-  groups: [{iconName: 'feedback_thin_16x16_icon', iconColor: 'black', text: '1 item'}],
+  groups: [{iconName: 'survey_feedback_icon', iconColor: 'black', text: '1 item'}],
 });
 appendComponent({
   clickHandler: (): void => {},
-  groups: [{iconName: 'feedback_thin_16x16_icon', iconColor: 'black', text: '1 item'}],
+  groups: [{iconName: 'survey_feedback_icon', iconColor: 'black', text: '1 item'}],
 });
 appendComponent({
   clickHandler: (): void => {},
   groups: [
-    {iconName: 'feedback_thin_16x16_icon', iconColor: 'blue', text: 'Test'},
+    {iconName: 'survey_feedback_icon', iconColor: 'blue', text: 'Test'},
     {iconName: 'warning_icon', iconColor: '', text: '1'},
   ],
 });

package/front_end/ui/components/docs/toggle_dark_mode.ts CHANGED Viewed

@@ -16,6 +16,7 @@ export function init(): void {
   window.addEventListener('load', () => {
     const button = document.createElement('button');
     button.innerText = 'Toggle light/dark mode';
+    button.className = 'component-docs-ui';
     button.style.position = 'fixed';
     button.style.bottom = '10px';

package/front_end/ui/components/docs/toggle_fonts.ts CHANGED Viewed

@@ -14,6 +14,7 @@ export function init(): void {
   // we want a single font-family to be used by the tests.
   if (urlParams.has('fontFamily')) {
     const div = document.createElement('div');
+    div.className = 'component-docs-ui';
     div.style.position = 'fixed';
     div.style.bottom = '10px';
     div.style.right = '230px';
@@ -30,6 +31,7 @@ export function init(): void {
   document.body.classList.add(PLATFORM_LINUX_CLASS);
   const button = document.createElement('button');
+  button.className = 'component-docs-ui';
   const loop = [
     PLATFORM_LINUX_CLASS,

package/front_end/ui/components/helpers/get-stylesheet.ts CHANGED Viewed

@@ -41,20 +41,5 @@ export function legacyGetStyleSheets(path: string): CSSStyleSheet[] {
  * them through to the right place, respecting Karma's ROOT_DIRECTORY setting.
  */
 export const CSS_RESOURCES_TO_LOAD_INTO_RUNTIME = [
-  'ui/legacy/inspectorCommon.css',
-  'ui/legacy/textButton.css',
-  'ui/legacy/themeColors.css',
-  'ui/legacy/inspectorSyntaxHighlight.css',
-  'ui/legacy/progressIndicator.css',
   'panels/application/serviceWorkerUpdateCycleView.css',
-  'ui/legacy/tabbedPane.css',
-  'ui/legacy/glassPane.css',
-  'ui/legacy/suggestBox.css',
-  'ui/legacy/treeoutline.css',
-  'ui/legacy/softContextMenu.css',
-  'ui/legacy/splitWidget.css',
-  'ui/legacy/components/source_frame/jsonView.css',
-  'ui/legacy/searchableView.css',
-  'ui/legacy/toolbar.css',
-  'ui/legacy/inspectorViewTabbedPane.css',
 ];

package/front_end/ui/components/linear_memory_inspector/linear_memory_inspector-meta.ts CHANGED Viewed

@@ -2,12 +2,11 @@
 // 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 UI from '../../legacy/legacy.js';
-// eslint-disable-next-line rulesdir/es_modules_import
 import type * as LinearMemoryInspector from './linear_memory_inspector.js';
-import * as i18n from '../../../core/i18n/i18n.js';
 const UIStrings = {
   /**
   *@description Title of the Linear Memory Inspector tool

package/front_end/ui/components/markdown_view/MarkdownImagesMap.ts CHANGED Viewed

@@ -22,7 +22,7 @@ export interface ImageData {
  * [
  *   'feedbackIcon',
  *   {
- *     src: 'Images/feedback_thin_16x16_icon.svg',
+ *     src: 'Images/survey_feedback_icon.svg',
  *     isIcon: true,
  *     width: '20px',
  *     height: '20px',

package/front_end/ui/components/survey_link/SurveyLink.ts CHANGED Viewed

@@ -124,7 +124,7 @@ export class SurveyLink extends HTMLElement {
     // eslint-disable-next-line rulesdir/ban_style_tags_in_lit_html
     const output = LitHtml.html`
       <button class="link ${linkState}" tabindex=${ariaDisabled ? '-1' : '0'} .disabled=${ariaDisabled} aria-disabled=${ariaDisabled} @click=${this.sendSurvey}>
-        <${IconButton.Icon.Icon.litTagName} class="link-icon" .data=${{iconName: 'feedback_thin_16x16_icon', color: 'var(--color-link)', width: 'var(--issue-link-icon-size, 16px)', height: 'var(--issue-link-icon-size, 16px)'} as IconButton.Icon.IconData}></${IconButton.Icon.Icon.litTagName}><!--
+        <${IconButton.Icon.Icon.litTagName} class="link-icon" .data=${{iconName: 'feedback_button_icon', color: 'var(--color-link)', width: 'var(--issue-link-icon-size, 16px)', height: 'var(--issue-link-icon-size, 16px)'} as IconButton.Icon.IconData}></${IconButton.Icon.Icon.litTagName}><!--
       -->${linkText}
       </button>
     `;

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

@@ -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);
   }
 }