chrome-devtools-frontend 1.0.930109 → 1.0.930993

package/front_end/panels/sources/BreakpointEditDialog.ts

@@ -3,8 +3,8 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../core/i18n/i18n.js';
-import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
-import * as TextEditor from '../../ui/legacy/components/text_editor/text_editor.js';
+import type * as TextEditor from '../../ui/components/text_editor/text_editor.js';
+import type * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import breakpointEditDialogStyles from './breakpointEditDialog.css.js';
@@ -48,25 +48,51 @@ const UIStrings = {
 };
 const str_ = i18n.i18n.registerUIStrings('panels/sources/BreakpointEditDialog.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
 export class BreakpointEditDialog extends UI.Widget.Widget {
   private readonly onFinish: (arg0: {
     committed: boolean,
     condition: string,
   }) => Promise<void>;
   private finished: boolean;
-  private editor: TextEditor.CodeMirrorTextEditor.CodeMirrorTextEditor|null;
+  private editor: TextEditor.TextEditor.TextEditor;
   private isLogpoint: boolean;
   private readonly typeSelector: UI.Toolbar.ToolbarComboBox;
+  private placeholderCompartment: CodeMirror.Compartment;
+
+  static async create(
+      editorLineNumber: number,
+      oldCondition: string,
+      preferLogpoint: boolean,
+      onFinish: (arg0: {committed: boolean, condition: string}) => Promise<void>,
+      ): Promise<BreakpointEditDialog> {
+    const TextEditor = await import('../../ui/components/text_editor/text_editor.js');
+    const CodeMirror = await import('../../third_party/codemirror.next/codemirror.next.js');
+    const editorConfig = [
+      (await CodeMirror.javascript()).javascriptLanguage,
+      TextEditor.Config.baseConfiguration(oldCondition || ''),
+      CodeMirror.EditorView.lineWrapping,
+      TextEditor.Config.showCompletionHint,
+      await TextEditor.JavaScript.completion(),
+      TextEditor.JavaScript.argumentHints(),
+    ];
+    return new BreakpointEditDialog(
+        editorLineNumber, oldCondition, preferLogpoint, onFinish, TextEditor, CodeMirror, editorConfig);
+  }
 
-  constructor(editorLineNumber: number, oldCondition: string, preferLogpoint: boolean, onFinish: (arg0: {
-                                                                                         committed: boolean,
-                                                                                         condition: string,
-                                                                                       }) => Promise<void>) {
+  constructor(
+      editorLineNumber: number,
+      oldCondition: string,
+      preferLogpoint: boolean,
+      onFinish: (arg0: {committed: boolean, condition: string}) => Promise<void>,
+      modTextEditor: typeof TextEditor,
+      readonly modCodeMirror: typeof CodeMirror,
+      editorConfig: CodeMirror.Extension,
+  ) {
     super(true);
 
     this.onFinish = onFinish;
     this.finished = false;
-    this.editor = null;
     this.element.tabIndex = -1;
 
     const logpointPrefix = LogpointPrefix;
@@ -90,113 +116,104 @@ export class BreakpointEditDialog extends UI.Widget.Widget {
     this.typeSelector.select(this.isLogpoint ? logpointOption : conditionalOption);
     toolbar.appendToolbarItem(this.typeSelector);
 
-    const factory = TextEditor.CodeMirrorTextEditor.CodeMirrorTextEditorFactory.instance();
-    const editorOptions = {
-      lineNumbers: false,
-      lineWrapping: true,
-      mimeType: 'javascript',
-      autoHeight: true,
-      bracketMatchingSetting: undefined,
-      devtoolsAccessibleName: undefined,
-      padBottom: undefined,
-      maxHighlightLength: undefined,
-      placeholder: undefined,
-      lineWiseCopyCut: undefined,
-      inputStyle: undefined,
-    };
-    this.editor = factory.createEditor(editorOptions);
-    this.updatePlaceholder();
-    this.editor.widget().element.classList.add('condition-editor');
-    this.editor.configureAutocomplete(
-        ObjectUI.JavaScriptAutocomplete.JavaScriptAutocompleteConfig.createConfigForEditor(this.editor));
-    if (oldCondition) {
-      this.editor.setText(oldCondition);
-    }
-    this.editor.widget().markAsExternallyManaged();
-    this.editor.widget().show(this.contentElement);
-    this.editor.setSelection(this.editor.fullRange());
-    this.editor.widget().element.addEventListener('keydown', this.onKeyDown.bind(this), true);
+    const content = oldCondition || '';
+    const keymap = [
+      {
+        key: 'Mod-Enter',
+        run: (view: CodeMirror.EditorView): boolean => {
+          if (modTextEditor.JavaScript.isExpressionComplete(view.state)) {
+            this.finishEditing(true, this.editor.state.doc.toString());
+            return true;
+          }
+          return false;
+        },
+      },
+      {
+        key: 'Escape',
+        run: (): boolean => {
+          this.finishEditing(false, '');
+          return true;
+        },
+      },
+    ];
+
+    this.placeholderCompartment = new modCodeMirror.Compartment();
+
+    this.editor = new modTextEditor.TextEditor.TextEditor(modCodeMirror.EditorState.create({
+      doc: content,
+      selection: {anchor: 0, head: content.length},
+      extensions: [
+        this.placeholderCompartment.of(this.getPlaceholder()),
+        modCodeMirror.keymap.of(keymap),
+        editorConfig,
+      ],
+    }));
+    this.editor.classList.add('condition-editor');
+
+    this.updateTooltip();
+    this.contentElement.appendChild(this.editor);
     this.element.addEventListener('blur', event => {
       if (!event.relatedTarget ||
           (event.relatedTarget && !(event.relatedTarget as Node).isSelfOrDescendant(this.element))) {
-        this.finishEditing(true);
+        this.finishEditing(true, this.editor.state.doc.toString());
       }
     }, true);
   }
 
   focusEditor(): void {
-    if (this.editor) {
-      this.editor.widget().focus();
-    }
+    this.editor.editor.focus();
   }
   private static conditionForLogpoint(condition: string): string {
     return `${LogpointPrefix}${condition}${LogpointSuffix}`;
   }
 
   private onTypeChanged(): void {
-    const option = this.typeSelector.selectedOption();
-    if (!option || !this.editor) {
-      return;
-    }
-    const value = option.value;
-    this.isLogpoint = value === BreakpointType.Logpoint;
-    this.updatePlaceholder();
-    if (value === BreakpointType.Breakpoint) {
-      this.editor.setText('');
-      this.finishEditing(true);
+    const type = this.breakpointType;
+    if (type === BreakpointType.Breakpoint) {
+      this.finishEditing(true, '');
+    } else {
+      this.editor.editor.dispatch({effects: this.placeholderCompartment.reconfigure(this.getPlaceholder())});
+      this.updateTooltip();
     }
   }
 
-  private updatePlaceholder(): void {
+  private get breakpointType(): string|null {
     const option = this.typeSelector.selectedOption();
-    if (!option || !this.editor) {
-      return;
+    return option ? option.value : null;
+  }
+
+  private getPlaceholder(): CodeMirror.Extension {
+    const type = this.breakpointType;
+    if (type === BreakpointType.Conditional) {
+      return this.modCodeMirror.placeholder(i18nString(UIStrings.expressionToCheckBeforePausingEg));
+    }
+    if (type === BreakpointType.Logpoint) {
+      return this.modCodeMirror.placeholder(i18nString(UIStrings.logMessageEgXIsX));
     }
-    const selectedValue = option.value;
-    if (selectedValue === BreakpointType.Conditional) {
-      this.editor.setPlaceholder(i18nString(UIStrings.expressionToCheckBeforePausingEg));
+    return [];
+  }
+
+  private updateTooltip(): void {
+    const type = this.breakpointType;
+    if (type === BreakpointType.Conditional) {
       UI.Tooltip.Tooltip.install((this.typeSelector.element), i18nString(UIStrings.pauseOnlyWhenTheConditionIsTrue));
-    } else if (selectedValue === BreakpointType.Logpoint) {
-      this.editor.setPlaceholder(i18nString(UIStrings.logMessageEgXIsX));
+    } else if (type === BreakpointType.Logpoint) {
       UI.Tooltip.Tooltip.install((this.typeSelector.element), i18nString(UIStrings.logAMessageToConsoleDoNotBreak));
     }
   }
 
-  private finishEditing(committed: boolean): void {
+  private finishEditing(committed: boolean, condition: string): void {
     if (this.finished) {
       return;
     }
     this.finished = true;
-    if (!this.editor) {
-      return;
-    }
-    this.editor.widget().detach();
-    let condition = this.editor.text();
+    this.editor.remove();
     if (this.isLogpoint) {
       condition = BreakpointEditDialog.conditionForLogpoint(condition);
     }
     this.onFinish({committed, condition});
   }
 
-  private async onKeyDown(event: Event): Promise<void> {
-    if (!(event instanceof KeyboardEvent) || !this.editor) {
-      return;
-    }
-    if (event.key === 'Enter' && !event.shiftKey) {
-      event.consume(true);
-      const expression = this.editor.text();
-      if (event.ctrlKey ||
-          await ObjectUI.JavaScriptAutocomplete.JavaScriptAutocomplete.isExpressionComplete(expression)) {
-        this.finishEditing(true);
-      } else {
-        this.editor.newlineAndIndent();
-      }
-    }
-    if (isEscKey(event)) {
-      this.finishEditing(false);
-      event.stopImmediatePropagation();
-    }
-  }
   wasShown(): void {
     super.wasShown();
     this.registerCSSFiles([breakpointEditDialogStyles]);

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -899,20 +899,21 @@ export class DebuggerPlugin extends Plugin {
       preferLogpoint?: boolean): Promise<void> {
     const oldCondition = breakpoint ? breakpoint.condition() : '';
     const decorationElement = document.createElement('div');
-    const dialog = new BreakpointEditDialog(editorLineNumber, oldCondition, Boolean(preferLogpoint), async result => {
-      dialog.detach();
-      this.textEditor.removeDecoration(decorationElement, editorLineNumber);
-      if (!result.committed) {
-        return;
-      }
-      if (breakpoint) {
-        breakpoint.setCondition(result.condition);
-      } else if (location) {
-        await this.setBreakpoint(location.lineNumber, location.columnNumber, result.condition, true);
-      } else {
-        await this.createNewBreakpoint(editorLineNumber, result.condition, true);
-      }
-    });
+    const dialog =
+        await BreakpointEditDialog.create(editorLineNumber, oldCondition, Boolean(preferLogpoint), async result => {
+          dialog.detach();
+          this.textEditor.removeDecoration(decorationElement, editorLineNumber);
+          if (!result.committed) {
+            return;
+          }
+          if (breakpoint) {
+            breakpoint.setCondition(result.condition);
+          } else if (location) {
+            await this.setBreakpoint(location.lineNumber, location.columnNumber, result.condition, true);
+          } else {
+            await this.createNewBreakpoint(editorLineNumber, result.condition, true);
+          }
+        });
     this.textEditor.addDecoration(decorationElement, editorLineNumber);
     dialog.markAsExternallyManaged();
     dialog.show(decorationElement);

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

@@ -37,8 +37,8 @@ export function getHighlightStyle(modCM: typeof CodeMirror): CodeMirror.Highligh
 
       {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.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'},
@@ -54,6 +54,22 @@ export async function create(code: string, mimeType: string): Promise<CodeHighli
   return new CodeHighlighter(code, tree, CM);
 }
 
+export async function highlightNode(node: Element, mimeType: string): Promise<void> {
+  const code = node.textContent || '';
+  const highlighter = await create(code, mimeType);
+  node.removeChildren();
+  highlighter.highlight((text, style) => {
+    let token: Node = document.createTextNode(text);
+    if (style) {
+      const span = document.createElement('span');
+      span.className = style;
+      span.appendChild(token);
+      token = span;
+    }
+    node.appendChild(token);
+  });
+}
+
 export async function languageFromMIME(mimeType: string): Promise<CodeMirror.LanguageSupport|null> {
   const CM = await importCM();
 

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

@@ -57,8 +57,12 @@ export const tabMovesFocus = DynamicSetting.bool('textEditorTabMovesFocus', CM.k
   shift: (view: CM.EditorView): boolean => view.state.doc.length ? CM.indentLess(view) : false,
 }]));
 
+export const autocompletion = DynamicSetting.bool('textEditorAutocompletion', CM.autocompletion());
+
 export const bracketMatching = DynamicSetting.bool('textEditorBracketMatching', CM.bracketMatching());
 
+export const codeFolding = DynamicSetting.bool('textEditorCodeFolding', [CM.foldGutter(), CM.keymap.of(CM.foldKeymap)]);
+
 export function guessIndent(doc: CM.Text): string {
   const values: {[indent: string]: number} = Object.create(null);
   let scanned = 0;
@@ -160,6 +164,7 @@ function detectLineSeparator(text: string): CM.Extension {
 }
 
 const baseKeymap = CM.keymap.of([
+  {key: 'Tab', run: CM.acceptCompletion},
   {key: 'Ctrl-m', run: CM.cursorMatchingBracket, shift: CM.selectMatchingBracket},
   {key: 'Mod-/', run: CM.toggleComment},
   {key: 'Mod-d', run: CM.selectNextOccurrence},
@@ -194,6 +199,7 @@ export function baseConfiguration(text: string): CM.Extension {
     indentUnit,
     CM.Prec.fallback(CM.EditorView.contentAttributes.of({'aria-label': i18nString(UIStrings.codeEditor)})),
     detectLineSeparator(text),
+    autocompletion,
     CM.tooltips({position: 'absolute'}),
   ];
 }

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

@@ -0,0 +1,70 @@
+// 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 CodeMirror from '../../../third_party/codemirror.next/codemirror.next.js';
+
+export function cursorTooltip(
+    source: (state: CodeMirror.EditorState, pos: number) => Promise<(() => CodeMirror.TooltipView)|null>,
+    ): CodeMirror.Extension {
+  const openTooltip = CodeMirror.StateEffect.define<() => CodeMirror.TooltipView>();
+
+  const state = CodeMirror.StateField.define<null|CodeMirror.Tooltip>({
+    create() {
+      return null;
+    },
+    update(val, tr) {
+      if (tr.selection) {
+        val = null;
+      }
+      if (val && !tr.changes.empty) {
+        val = {pos: tr.changes.mapPos(val.pos), create: val.create, above: true};
+      }
+      for (const effect of tr.effects) {
+        if (effect.is(openTooltip)) {
+          val = {pos: tr.state.selection.main.from, create: effect.value, above: true};
+        }
+      }
+      return val;
+    },
+    provide: field => CodeMirror.showTooltip.from(field),
+  });
+
+  const plugin = CodeMirror.ViewPlugin.fromClass(class {
+    pending = -1;
+    updateID = 0;
+
+    update(update: CodeMirror.ViewUpdate): void {
+      this.updateID++;
+      if (update.transactions.some(tr => tr.selection) && update.state.selection.main.empty) {
+        this.scheduleUpdate(update.view);
+      }
+    }
+
+    scheduleUpdate(view: CodeMirror.EditorView): void {
+      if (this.pending > -1) {
+        clearTimeout(this.pending);
+      }
+      this.pending = setTimeout(() => this.startUpdate(view), 50) as unknown as number;
+    }
+
+    startUpdate(view: CodeMirror.EditorView): void {
+      this.pending = -1;
+      const {main} = view.state.selection;
+      if (main.empty) {
+        const {updateID} = this;
+        source(view.state, main.from).then(tooltip => {
+          if (this.updateID !== updateID) {
+            if (this.pending < 0) {
+              this.scheduleUpdate(view);
+            }
+          } else if (tooltip) {
+            view.dispatch({effects: openTooltip.of(tooltip)});
+          }
+        });
+      }
+    }
+  });
+
+  return [state, plugin];
+}