chrome-devtools-frontend 1.0.943017 → 1.0.944427

package/front_end/panels/console/ConsolePrompt.ts

@@ -6,9 +6,9 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import * as TextUtils from '../../models/text_utils/text_utils.js';
+import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
+import * as TextEditor from '../../ui/components/text_editor/text_editor.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 * as UI from '../../ui/legacy/legacy.js';
 
 import {ConsolePanel} from './ConsolePanel.js';
@@ -27,17 +27,17 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
   private addCompletionsFromHistory: boolean;
   private historyInternal: ConsoleHistoryManager;
   private initialText: string;
-  private editor: UI.TextEditor.TextEditor|null;
+  private editor: TextEditor.TextEditor.TextEditor;
   private readonly eagerPreviewElement: HTMLDivElement;
   private textChangeThrottler: Common.Throttler.Throttler;
   private readonly formatter: ObjectUI.RemoteObjectPreviewFormatter.RemoteObjectPreviewFormatter;
   private requestPreviewBound: () => Promise<void>;
+  private requestPreviewCurrent = 0;
   private readonly innerPreviewElement: HTMLElement;
   private readonly promptIcon: UI.Icon.Icon;
   private readonly iconThrottler: Common.Throttler.Throttler;
   private readonly eagerEvalSetting: Common.Settings.Setting<boolean>;
   private previewRequestForTest: Promise<void>|null;
-  private defaultAutocompleteConfig: UI.TextEditor.AutocompleteConfig|null;
   private highlightingNode: boolean;
 
   constructor() {
@@ -46,7 +46,6 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
     this.historyInternal = new ConsoleHistoryManager();
 
     this.initialText = '';
-    this.editor = null;
     this.eagerPreviewElement = document.createElement('div');
     this.eagerPreviewElement.classList.add('console-eager-preview');
     this.textChangeThrottler = new Common.Throttler.Throttler(150);
@@ -68,41 +67,41 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
 
     this.element.tabIndex = 0;
     this.previewRequestForTest = null;
+    this.highlightingNode = false;
 
-    this.defaultAutocompleteConfig = null;
+    const editorState = CodeMirror.EditorState.create({
+      doc: this.initialText,
+      extensions: [
+        CodeMirror.keymap.of(this.editorKeymap()),
+        CodeMirror.EditorView.updateListener.of(update => this.editorUpdate(update)),
+        TextEditor.JavaScript.argumentHints(),
+        TextEditor.JavaScript.completion(),
+        TextEditor.Config.showCompletionHint,
+        CodeMirror.javascript.javascript(),
+        TextEditor.Config.baseConfiguration(this.initialText),
+        TextEditor.Config.autocompletion,
+        CodeMirror.javascript.javascriptLanguage.data.of({
+          autocomplete: (context: CodeMirror.CompletionContext): CodeMirror.CompletionResult | null =>
+              this.historyCompletions(context),
+        }),
+        CodeMirror.EditorView.contentAttributes.of({'aria-label': i18nString(UIStrings.consolePrompt)}),
+        CodeMirror.EditorView.lineWrapping,
+        CodeMirror.autocompletion({aboveCursor: true}),
+      ],
+    });
 
-    this.highlightingNode = false;
+    this.editor = new TextEditor.TextEditor.TextEditor(editorState);
+    this.editor.addEventListener('keydown', (event): void => {
+      if (event.defaultPrevented) {
+        event.stopPropagation();
+      }
+    });
+    editorContainerElement.appendChild(this.editor);
 
-    const factory = TextEditor.CodeMirrorTextEditor.CodeMirrorTextEditorFactory.instance();
-
-    const options = {
-      devtoolsAccessibleName: (i18nString(UIStrings.consolePrompt) as string),
-      lineNumbers: false,
-      lineWrapping: true,
-      mimeType: 'javascript',
-      autoHeight: true,
-    };
-    this.editor = factory.createEditor((options as UI.TextEditor.Options));
-
-    this.defaultAutocompleteConfig =
-        ObjectUI.JavaScriptAutocomplete.JavaScriptAutocompleteConfig.createConfigForEditor(this.editor);
-    this.editor.configureAutocomplete(Object.assign({}, this.defaultAutocompleteConfig, {
-      suggestionsCallback: this.wordsWithQuery.bind(this),
-      anchorBehavior: UI.GlassPane.AnchorBehavior.PreferTop,
-    }));
-    this.editor.widget().element.addEventListener('keydown', this.editorKeyDown.bind(this), true);
-    this.editor.widget().show(editorContainerElement);
-    this.editor.addEventListener(UI.TextEditor.Events.CursorChanged, this.updatePromptIcon, this);
-    this.editor.addEventListener(UI.TextEditor.Events.TextChanged, this.onTextChanged, this);
-    this.editor.addEventListener(UI.TextEditor.Events.SuggestionChanged, this.onTextChanged, this);
-
-    this.setText(this.initialText);
-    this.initialText = '';
     if (this.hasFocus()) {
       this.focus();
     }
     this.element.removeAttribute('tabindex');
-    this.editor.widget().element.tabIndex = -1;
 
     this.editorSetForTest();
 
@@ -126,7 +125,7 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
     // ConsoleView and prompt both use a throttler, so we clear the preview
     // ASAP to avoid inconsistency between a fresh viewport and stale preview.
     if (this.eagerEvalSetting.get()) {
-      const asSoonAsPossible = !this.editor || !this.editor.textWithCurrentSuggestion();
+      const asSoonAsPossible = !TextEditor.Config.contentIncludingHint(this.editor.editor);
       this.previewRequestForTest = this.textChangeThrottler.schedule(this.requestPreviewBound, asSoonAsPossible);
     }
     this.updatePromptIcon();
@@ -134,15 +133,16 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
   }
 
   private async requestPreview(): Promise<void> {
-    if (!this.editor) {
-      return;
-    }
-    const text = this.editor.textWithCurrentSuggestion().trim();
+    const id = ++this.requestPreviewCurrent;
+    const text = TextEditor.Config.contentIncludingHint(this.editor.editor).trim();
     const executionContext = UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext);
     const {preview, result} = await ObjectUI.JavaScriptREPL.JavaScriptREPL.evaluateAndBuildPreview(
         text, true /* throwOnSideEffect */, true /* replMode */, 500 /* timeout */);
+    if (this.requestPreviewCurrent !== id) {
+      return;
+    }
     this.innerPreviewElement.removeChildren();
-    if (preview.deepTextContent() !== this.editor.textWithCurrentSuggestion().trim()) {
+    if (preview.deepTextContent() !== TextEditor.Config.contentIncludingHint(this.editor.editor).trim()) {
       this.innerPreviewElement.appendChild(preview);
     }
     if (result && 'object' in result && result.object && result.object.subtype === 'node') {
@@ -174,149 +174,102 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
   }
 
   clearAutocomplete(): void {
-    if (this.editor) {
-      this.editor.clearAutocomplete();
-    }
+    CodeMirror.closeCompletion(this.editor.editor);
   }
 
   private isCaretAtEndOfPrompt(): boolean {
-    return this.editor !== null &&
-        this.editor.selection().collapseToEnd().equal(this.editor.fullRange().collapseToEnd());
+    return this.editor.state.selection.main.head === this.editor.state.doc.length;
   }
 
   moveCaretToEndOfPrompt(): void {
-    if (this.editor) {
-      this.editor.setSelection(TextUtils.TextRange.TextRange.createFromLocation(Infinity, Infinity));
-    }
+    this.editor.dispatch({
+      selection: CodeMirror.EditorSelection.cursor(this.editor.state.doc.length),
+    });
   }
 
-  setText(text: string): void {
-    if (this.editor) {
-      this.editor.setText(text);
-    } else {
-      this.initialText = text;
-    }
-    this.dispatchEventToListeners(Events.TextChanged);
+  clear(): void {
+    this.editor.dispatch({
+      changes: {from: 0, to: this.editor.state.doc.length},
+    });
   }
 
   text(): string {
-    return this.editor ? this.editor.text() : this.initialText;
+    return this.editor.state.doc.toString();
   }
 
   setAddCompletionsFromHistory(value: boolean): void {
     this.addCompletionsFromHistory = value;
   }
 
-  private editorKeyDown(event: Event): void {
-    if (!this.editor) {
-      return;
-    }
-    const keyboardEvent = (event as KeyboardEvent);
-    let newText;
-    let isPrevious;
-    // Check against visual coordinates in case lines wrap.
-    const selection = this.editor.selection();
-    const cursorY = this.editor.visualCoordinates(selection.endLine, selection.endColumn).y;
-
-    switch (keyboardEvent.keyCode) {
-      case UI.KeyboardShortcut.Keys.Up.code: {
-        const startY = this.editor.visualCoordinates(0, 0).y;
-        if (keyboardEvent.shiftKey || !selection.isEmpty() || cursorY !== startY) {
-          break;
-        }
-        newText = this.historyInternal.previous(this.text());
-        isPrevious = true;
-        break;
-      }
-      case UI.KeyboardShortcut.Keys.Down.code: {
-        const fullRange = this.editor.fullRange();
-        const endY = this.editor.visualCoordinates(fullRange.endLine, fullRange.endColumn).y;
-        if (keyboardEvent.shiftKey || !selection.isEmpty() || cursorY !== endY) {
-          break;
-        }
-        newText = this.historyInternal.next();
-        break;
-      }
-      case UI.KeyboardShortcut.Keys.P.code: {  // Ctrl+P = Previous
-        if (Host.Platform.isMac() && keyboardEvent.ctrlKey && !keyboardEvent.metaKey && !keyboardEvent.altKey &&
-            !keyboardEvent.shiftKey) {
-          newText = this.historyInternal.previous(this.text());
-          isPrevious = true;
-        }
-        break;
-      }
-      case UI.KeyboardShortcut.Keys.N.code: {  // Ctrl+N = Next
-        if (Host.Platform.isMac() && keyboardEvent.ctrlKey && !keyboardEvent.metaKey && !keyboardEvent.altKey &&
-            !keyboardEvent.shiftKey) {
-          newText = this.historyInternal.next();
-        }
-        break;
-      }
-      case UI.KeyboardShortcut.Keys.Enter.code: {
-        this.enterKeyPressed(keyboardEvent);
-        break;
+  private editorKeymap(): readonly CodeMirror.KeyBinding[] {
+    return [
+      {key: 'ArrowUp', run: (): boolean => this.moveHistory(-1)},
+      {key: 'ArrowDown', run: (): boolean => this.moveHistory(1)},
+      {mac: 'Ctrl-p', run: (): boolean => this.moveHistory(-1, true)},
+      {mac: 'Ctrl-n', run: (): boolean => this.moveHistory(1, true)},
+      {key: 'Enter', run: (): boolean => this.evaluate(), shift: CodeMirror.insertNewlineAndIndent},
+    ];
+  }
+
+  private moveHistory(dir: -1|1, force = false): boolean {
+    const {editor} = this.editor, {main} = editor.state.selection;
+    if (!force) {
+      if (!main.empty) {
+        return false;
       }
-      case UI.KeyboardShortcut.Keys.Tab.code: {
-        if (!this.text()) {
-          keyboardEvent.consume();
-        }
-        break;
+      const cursorCoords = editor.coordsAtPos(main.head);
+      const endCoords = editor.coordsAtPos(dir < 0 ? 0 : editor.state.doc.length);
+      // Check if there are wrapped lines in this direction, and let
+      // the cursor move normally if there are.
+      if (cursorCoords && endCoords &&
+          (dir < 0 ? cursorCoords.top > endCoords.top + 5 : cursorCoords.bottom < endCoords.bottom - 5)) {
+        return false;
       }
     }
 
+    const history = this.historyInternal;
+    const newText = dir < 0 ? history.previous(this.text()) : history.next();
     if (newText === undefined) {
-      return;
+      return false;
     }
-    keyboardEvent.consume(true);
-    this.setText(newText);
 
-    if (isPrevious) {
-      this.editor.setSelection(TextUtils.TextRange.TextRange.createFromLocation(0, Infinity));
-    } else {
-      this.moveCaretToEndOfPrompt();
-    }
+    const cursorPos = dir < 0 ? newText.search(/\n|$/) : newText.length;
+    this.editor.dispatch({
+      changes: {from: 0, to: this.editor.state.doc.length, insert: newText},
+      selection: CodeMirror.EditorSelection.cursor(cursorPos),
+      scrollIntoView: true,
+    });
+    return true;
+  }
+
+  private enterWillEvaluate(): boolean {
+    const {state} = this.editor;
+    return state.doc.length > 0 && TextEditor.JavaScript.isExpressionComplete(state);
   }
 
-  private async enterWillEvaluate(): Promise<boolean> {
-    if (!this.isCaretAtEndOfPrompt()) {
-      return true;
+  private evaluate(): boolean {
+    if (this.enterWillEvaluate()) {
+      this.appendCommand(this.text(), true);
+      this.editor.dispatch({
+        changes: {from: 0, to: this.editor.state.doc.length},
+        scrollIntoView: true,
+      });
+    } else if (this.editor.state.doc.length) {
+      return CodeMirror.insertNewlineAndIndent(this.editor.editor);
+    } else {
+      this.editor.dispatch({scrollIntoView: true});
     }
-    return await ObjectUI.JavaScriptAutocomplete.JavaScriptAutocomplete.isExpressionComplete(this.text());
+    this.enterProcessedForTest();
+    return true;
   }
 
   private updatePromptIcon(): void {
     this.iconThrottler.schedule(async () => {
-      const canComplete = await this.enterWillEvaluate();
-      this.promptIcon.classList.toggle('console-prompt-incomplete', !canComplete);
+      this.promptIcon.classList.toggle('console-prompt-incomplete', !this.enterWillEvaluate());
     });
   }
 
-  private async enterKeyPressed(event: KeyboardEvent): Promise<void> {
-    if (event.altKey || event.ctrlKey || event.shiftKey) {
-      return;
-    }
-
-    event.consume(true);
-
-    // Since we prevent default, manually emulate the native "scroll on key input" behavior.
-    this.element.scrollIntoView();
-    this.clearAutocomplete();
-
-    const str = this.text();
-    if (!str.length) {
-      return;
-    }
-
-    if (await this.enterWillEvaluate()) {
-      await this.appendCommand(str, true);
-    } else if (this.editor) {
-      this.editor.newlineAndIndent();
-    }
-    this.enterProcessedForTest();
-  }
-
-  private async appendCommand(text: string, useCommandLineAPI: boolean): Promise<void> {
-    this.setText('');
+  private appendCommand(text: string, useCommandLineAPI: boolean): void {
     const currentExecutionContext = UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext);
     if (currentExecutionContext) {
       const executionContext = currentExecutionContext;
@@ -333,10 +286,19 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
   private enterProcessedForTest(): void {
   }
 
-  private historyCompletions(prefix: string, force?: boolean): UI.SuggestBox.Suggestions {
+  private editorUpdate(update: CodeMirror.ViewUpdate): void {
+    if (update.docChanged ||
+        CodeMirror.selectedCompletion(update.state) !== CodeMirror.selectedCompletion(update.startState)) {
+      this.onTextChanged();
+    } else if (update.selectionSet) {
+      this.updatePromptIcon();
+    }
+  }
+
+  private historyCompletions(context: CodeMirror.CompletionContext): CodeMirror.CompletionResult|null {
     const text = this.text();
-    if (!this.addCompletionsFromHistory || !this.isCaretAtEndOfPrompt() || (!text && !force)) {
-      return [];
+    if (!this.addCompletionsFromHistory || !this.isCaretAtEndOfPrompt() || (!text.length && !context.explicit)) {
+      return null;
     }
     const result = [];
     const set = new Set<string>();
@@ -350,30 +312,18 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
         continue;
       }
       set.add(item);
-      result.push(
-          {text: item.substring(text.length - prefix.length), iconType: 'smallicon-text-prompt', isSecondary: true});
+      result.push({label: item, type: 'secondary', boost: -1e5});
     }
-    return result as UI.SuggestBox.Suggestions;
+    return result.length ? {
+      from: 0,
+      to: text.length,
+      options: result,
+    } :
+                           null;
   }
 
   focus(): void {
-    if (this.editor) {
-      this.editor.widget().focus();
-    } else {
-      this.element.focus();
-    }
-  }
-
-  private async wordsWithQuery(
-      queryRange: TextUtils.TextRange.TextRange, substituteRange: TextUtils.TextRange.TextRange,
-      force?: boolean): Promise<UI.SuggestBox.Suggestions> {
-    if (!this.editor || !this.defaultAutocompleteConfig || !this.defaultAutocompleteConfig.suggestionsCallback) {
-      return [];
-    }
-    const query = this.editor.text(queryRange);
-    const words = await this.defaultAutocompleteConfig.suggestionsCallback(queryRange, substituteRange, force);
-    const historyWords = this.historyCompletions(query, force);
-    return words ? words.concat(historyWords) : historyWords;
+    this.editor.focus();
   }
 
   private editorSetForTest(): void {

package/front_end/panels/console/ConsoleView.ts

@@ -1218,7 +1218,7 @@ export class ConsoleView extends UI.Widget.VBox implements UI.SearchableView.Sea
   }
 
   private clearPromptBackwards(): void {
-    this.prompt.setText('');
+    this.prompt.clear();
   }
 
   private promptKeyDown(event: Event): void {

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -50,9 +50,12 @@ import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
+// eslint-disable-next-line rulesdir/es_modules_import
+import objectValueStyles from '../../ui/legacy/components/object_ui/objectValue.css.js';
 import type {Chrome} from '../../../extension-api/ExtensionAPI.js'; // eslint-disable-line rulesdir/es_modules_import
 
 import type {ConsoleViewportElement} from './ConsoleViewport.js';
+import consoleViewStyles from './consoleView.css.js';
 
 const UIStrings = {
   /**
@@ -2067,7 +2070,11 @@ export class ConsoleTableMessageView extends ConsoleViewMessage {
         const tableElement = formattedResult.createChild('div', 'console-message-formatted-table');
         const dataGridContainer = tableElement.createChild('span');
         tableElement.appendChild(this.formatParameter(actualTable, true, false));
-        dataGridContainer.appendChild(this.dataGrid.element);
+        const shadowRoot = dataGridContainer.attachShadow({mode: 'open'});
+        const dataGridWidget = this.dataGrid.asWidget();
+        dataGridWidget.markAsRoot();
+        dataGridWidget.show(shadowRoot as unknown as Element);
+        dataGridWidget.registerCSSFiles([consoleViewStyles, objectValueStyles]);
         formattedMessage.appendChild(formattedResult);
         this.dataGrid.renderInline();
       }

package/front_end/panels/console/console-meta.ts

@@ -5,7 +5,6 @@
 import * as Common from '../../core/common/common.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-// eslint-disable-next-line rulesdir/es_modules_import
 import type * as Console from './console.js';
 
 import * as i18n from '../../core/i18n/i18n.js';

package/front_end/panels/console/consoleView.css

@@ -345,13 +345,13 @@
 }
 
 #console-messages .link {
+  cursor: pointer;
   text-decoration: underline;
 }
 
 #console-messages .link,
 #console-messages .devtools-link {
   color: var(--color-text-secondary);
-  cursor: pointer;
   word-break: break-all;
 }
 

package/front_end/panels/console_counters/console_counters-meta.ts

@@ -4,7 +4,6 @@
 
 import * as UI from '../../ui/legacy/legacy.js';
 
-// eslint-disable-next-line rulesdir/es_modules_import
 import type * as ConsoleCounters from './console_counters.js';
 
 let loadedConsoleCountersModule: (typeof ConsoleCounters|undefined);

package/front_end/panels/coverage/coverage-meta.ts

@@ -5,7 +5,6 @@
 import * as i18n from '../../core/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-// eslint-disable-next-line rulesdir/es_modules_import
 import type * as Coverage from './coverage.js';
 
 const UIStrings = {

package/front_end/panels/css_overview/cssOverviewCompletedView.css

@@ -338,7 +338,7 @@
   background: none;
   border: none;
   -webkit-mask-image: var(--image-file-ic_show_node_16x16);
-  background-color: var(--color-background-elevation-1);
+  background-color: var(--color-text-secondary);
   width: 16px;
   height: 16px;
   display: none;
@@ -348,7 +348,7 @@
 
 .show-element:focus,
 .show-element:hover {
-  background-color: var(--color-syntax-1);
+  background-color: var(--color-primary);
 }
 
 .nodeId-column:focus-within .show-element,

package/front_end/panels/css_overview/css_overview-meta.ts

@@ -5,7 +5,6 @@
 import * as i18n from '../../core/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-// eslint-disable-next-line rulesdir/es_modules_import
 import type * as CSSOverview from './css_overview.js';
 
 const UIStrings = {

package/front_end/panels/developer_resources/developer_resources-meta.ts

@@ -6,7 +6,6 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Root from '../../core/root/root.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-// eslint-disable-next-line rulesdir/es_modules_import
 import type * as DeveloperResources from './developer_resources.js';
 
 const UIStrings = {