chrome-devtools-frontend 1.0.940255 → 1.0.942095

package/front_end/ui/components/panel_feedback/panel_feedback.ts

@@ -0,0 +1,6 @@
+// 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.
+
+export * as FeedbackButton from './FeedbackButton.js';
+export * as PanelFeedback from './PanelFeedback.js';

package/front_end/ui/components/report_view/reportValue.css

@@ -14,4 +14,5 @@
   color: var(--color-text-primary);
   margin-inline-start: 0;
   padding: 0 6px;
+  overflow-wrap: break-word;
 }

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};
+}

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

@@ -4,4 +4,5 @@
 
 export * as Config from './config.js';
 export * as JavaScript from './javascript.js';
+export * as Position from './position.js';
 export * as TextEditor from './TextEditor.js';

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

@@ -52,6 +52,10 @@ export const editorTheme = CM.EditorView.theme({
     backgroundColor: 'var(--color-background)',
   },
 
+  '.cm-lineNumbers': {
+    overflow: 'visible',
+    minWidth: '40px',
+  },
   '.cm-lineNumbers .cm-gutterElement': {
     color: 'var(--color-line-number)',
     padding: '0 3px 0 9px',
@@ -74,7 +78,7 @@ export const editorTheme = CM.EditorView.theme({
   },
 
   '.cm-trailingWhitespace': {
-    backgroundColor: 'var(--color-error-text)',
+    backgroundColor: 'var(--color-trailing-whitespace)',
   },
 
   '.cm-highlightedTab': {

package/front_end/ui/legacy/Infobar.ts

@@ -46,9 +46,7 @@ export class Infobar {
   private readonly closeContainer: HTMLElement;
   private readonly toggleElement: HTMLButtonElement;
   private readonly closeButton: HTMLElement;
-  // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private closeCallback: (() => any)|null;
+  private closeCallback: (() => void)|null;
   private parentView?: Widget;
 
   // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
@@ -160,9 +158,7 @@ export class Infobar {
     this.onResize();
   }
 
-  // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  setCloseCallback(callback: (() => any)|null): void {
+  setCloseCallback(callback: (() => void)|null): void {
     this.closeCallback = callback;
   }
 

package/front_end/ui/legacy/ShortcutRegistry.ts

@@ -144,27 +144,31 @@ export class ShortcutRegistry {
     return this.devToolsDefaultShortcutActions.has(actionId);
   }
 
-  addShortcutListener(element: Element, handlers: {
-    [x: string]: () => Promise<boolean>,
-  }): (arg0: Event) => void {
+  getShortcutListener(handlers: {[x: string]: () => Promise<boolean>}): (event: KeyboardEvent) => void {
+    const shortcuts = Object.keys(handlers).flatMap(action => [...this.actionToShortcut.get(action)]);
     // We only want keys for these specific actions to get handled this
     // way; all others should be allowed to bubble up.
     const allowlistKeyMap = new ShortcutTreeNode(0, 0);
-    const shortcuts = Object.keys(handlers).flatMap(action => [...this.actionToShortcut.get(action)]);
     shortcuts.forEach(shortcut => {
       allowlistKeyMap.addKeyMapping(shortcut.descriptors.map(descriptor => descriptor.key), shortcut.action);
     });
 
-    const listener = (event: Event): void => {
-      const key = KeyboardShortcut.makeKeyFromEvent((event as KeyboardEvent));
+    return (event: KeyboardEvent): void => {
+      const key = KeyboardShortcut.makeKeyFromEvent(event);
       const keyMap = this.activePrefixKey ? allowlistKeyMap.getNode(this.activePrefixKey.key()) : allowlistKeyMap;
       if (!keyMap) {
         return;
       }
       if (keyMap.getNode(key)) {
-        this.handleShortcut((event as KeyboardEvent), handlers);
+        this.handleShortcut(event, handlers);
       }
     };
+  }
+
+  addShortcutListener(element: Element, handlers: {
+    [x: string]: () => Promise<boolean>,
+  }): (arg0: Event) => void {
+    const listener = this.getShortcutListener(handlers) as (event: Event) => void;
     element.addEventListener('keydown', listener);
     return listener;
   }

package/front_end/ui/legacy/Widget.ts

@@ -458,7 +458,7 @@ export class Widget {
     this.doResize();
   }
 
-  registerRequiredCSS(cssFile: string): void {
+  registerRequiredCSS(cssFile: string|{cssContent: string}): void {
     if (this.isWebComponent) {
       Utils.appendStyle((this.shadowRoot as DocumentFragment), cssFile);
     } else {

package/front_end/ui/legacy/components/perf_ui/ChartViewport.ts

@@ -7,6 +7,7 @@ import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
 import * as UI from '../../legacy.js';
 
+import chartViewPortStyles from './chartViewport.css.legacy.js';
 import {MinimalTimeWindowMs} from './FlameChart.js';
 
 export interface ChartViewportDelegate {
@@ -51,7 +52,7 @@ export class ChartViewport extends UI.Widget.VBox {
 
   constructor(delegate: ChartViewportDelegate) {
     super();
-    this.registerRequiredCSS('ui/legacy/components/perf_ui/chartViewport.css');
+    this.registerRequiredCSS(chartViewPortStyles);
 
     this.delegate = delegate;
 

package/front_end/ui/legacy/components/perf_ui/FilmStripView.ts

@@ -9,6 +9,8 @@ import * as Platform from '../../../../core/platform/platform.js';
 import type * as SDK from '../../../../core/sdk/sdk.js';
 import * as UI from '../../legacy.js';
 
+import filmStripViewStyles from './filmStripView.css.legacy.js';
+
 const UIStrings = {
   /**
   *@description Element title in Film Strip View of the Performance panel
@@ -43,7 +45,7 @@ export class FilmStripView extends Common.ObjectWrapper.eventMixin<EventTypes, t
 
   constructor() {
     super(true);
-    this.registerRequiredCSS('ui/legacy/components/perf_ui/filmStripView.css');
+    this.registerRequiredCSS(filmStripViewStyles);
     this.contentElement.classList.add('film-strip-view');
     this.statusLabel = this.contentElement.createChild('div', 'label');
     this.reset();

package/front_end/ui/legacy/components/perf_ui/FlameChart.ts

@@ -42,6 +42,7 @@ import type {ChartViewportDelegate} from './ChartViewport.js';
 import {ChartViewport} from './ChartViewport.js';
 import type {Calculator} from './TimelineGrid.js';
 import {TimelineGrid} from './TimelineGrid.js';
+import flameChartStyles from './flameChart.css.legacy.js';
 
 const UIStrings = {
   /**
@@ -157,7 +158,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
       dataProvider: FlameChartDataProvider, flameChartDelegate: FlameChartDelegate,
       groupExpansionSetting?: Common.Settings.Setting<GroupExpansionState>) {
     super(true);
-    this.registerRequiredCSS('ui/legacy/components/perf_ui/flameChart.css');
+    this.registerRequiredCSS(flameChartStyles);
     this.contentElement.classList.add('flame-chart-main-pane');
     this.groupExpansionSetting = groupExpansionSetting;
     this.groupExpansionState = groupExpansionSetting && groupExpansionSetting.get() || {};