chrome-devtools-frontend 1.0.945579 → 1.0.946920

package/front_end/third_party/codemirror.next/codemirror.next.js

@@ -1,2 +1,2 @@
-export{$ as cursorSubwordForward,_ as cursorSubwordBackward,A as java,a$ as ViewPlugin,a0 as indentLess,a1 as indentMore,a2 as insertNewlineAndIndent,a3 as selectMatchingBracket,a4 as selectSubwordBackward,a5 as selectSubwordForward,a6 as standardKeymap,a7 as toggleComment,a8 as codeFolding,a9 as foldGutter,a_ as scrollPastEnd,aa as foldKeymap,aA as selectNextOccurrence,aB as Annotation,ab as gutter,aC as AnnotationType,ac as GutterMarker,aD as ChangeDesc,ad as gutters,aE as ChangeSet,ae as lineNumberMarkers,aF as Compartment,af as lineNumbers,aG as EditorState,ag as HighlightStyle,aH as Facet,ah as highlightTree,aI as SelectionRange,ai as Tag,aJ as StateEffect,aj as history,aK as StateEffectType,ak as historyKeymap,aL as StateField,al as redo,aM as Transaction,am as redoSelection,aN as StreamLanguage,an as undo,aO as StringStream,ao as undoSelection,aP as Line,ap as css,aQ as Text,aq as html,ar as javascript,aR as showTooltip,as as ensureSyntaxTree,aS as tooltips,at as indentOnInput,aT as repositionTooltips,aU as Decoration,au as indentUnit,av as bracketMatching,aV as drawSelection,aW as EditorView,aw as showPanel,ax as Range,aX as highlightSpecialChars,aY as MatchDecorator,ay as RangeSet,az as RangeSetBuilder,aZ as placeholder,B as json,b0 as ViewUpdate,b1 as WidgetType,b2 as TreeCursor,b3 as StyleModule,D as markdown,e as LanguageSupport,F as php,g as NodeType,G as python,h as NodeSet,H as shell,I as wast,j as Language,J as xml,K as acceptCompletion,k as syntaxTree,L as LRParser,m as EditorSelection,M as autocompletion,N as NodeProp,n as Prec,O as closeCompletion,o as keymap,P as Parser,Q as completeAnyWord,R as CompletionContext,S as currentCompletions,T as Tree,t as tags,U as ifNotIn,V as selectedCompletion,W as startCompletion,x as clojure,X as closeBrackets,Y as closeBracketsKeymap,y as coffeescript,z as cpp,Z as cursorMatchingBracket}from"./chunk/codemirror.js";
+export{$ as cursorSubwordForward,_ as cursorSubwordBackward,A as java,a$ as ViewPlugin,a0 as indentLess,a1 as indentMore,a2 as insertNewlineAndIndent,a3 as selectMatchingBracket,a4 as selectSubwordBackward,a5 as selectSubwordForward,a6 as standardKeymap,a7 as toggleComment,a8 as codeFolding,a9 as foldGutter,a_ as scrollPastEnd,aa as foldKeymap,aA as selectNextOccurrence,aB as Annotation,ab as gutter,aC as AnnotationType,ac as GutterMarker,aD as ChangeDesc,ad as gutters,aE as ChangeSet,ae as lineNumberMarkers,aF as Compartment,af as lineNumbers,aG as EditorState,ag as HighlightStyle,aH as Facet,ah as highlightTree,aI as SelectionRange,ai as Tag,aJ as StateEffect,aj as history,aK as StateEffectType,ak as historyKeymap,aL as StateField,al as redo,aM as Transaction,am as redoSelection,aN as StreamLanguage,an as undo,aO as StringStream,ao as undoSelection,aP as Line,ap as css,aQ as Text,aq as html,ar as javascript,aR as repositionTooltips,as as ensureSyntaxTree,aS as showTooltip,at as indentOnInput,aT as tooltips,aU as Decoration,au as indentUnit,av as bracketMatching,aV as drawSelection,aW as EditorView,aw as showPanel,ax as Range,aX as highlightSpecialChars,aY as MatchDecorator,ay as RangeSet,az as RangeSetBuilder,aZ as placeholder,B as json,b0 as ViewUpdate,b1 as WidgetType,b2 as TreeCursor,b3 as StyleModule,D as markdown,e as LanguageSupport,F as php,g as NodeType,G as python,h as NodeSet,H as shell,I as wast,j as Language,J as xml,K as acceptCompletion,k as syntaxTree,L as LRParser,m as EditorSelection,M as autocompletion,N as NodeProp,n as Prec,O as closeCompletion,o as keymap,P as Parser,Q as completeAnyWord,R as CompletionContext,S as currentCompletions,T as Tree,t as tags,U as ifNotIn,V as selectedCompletion,W as startCompletion,x as clojure,X as closeBrackets,Y as closeBracketsKeymap,y as coffeescript,z as cpp,Z as cursorMatchingBracket}from"./chunk/codemirror.js";
 

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

@@ -3,17 +3,17 @@
   "version": "0.0.1",
   "private": true,
   "dependencies": {
-    "@codemirror/autocomplete": "0.19.8",
+    "@codemirror/autocomplete": "0.19.9",
     "@codemirror/closebrackets": "0.19.0",
     "@codemirror/commands": "0.19.5",
     "@codemirror/comment": "0.19.0",
-    "@codemirror/fold": "0.19.1",
-    "@codemirror/gutter": "0.19.3",
+    "@codemirror/fold": "0.19.2",
+    "@codemirror/gutter": "0.19.7",
     "@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-html": "0.19.4",
     "@codemirror/lang-java": "0.19.1",
     "@codemirror/lang-javascript": "0.19.3",
     "@codemirror/lang-json": "0.19.1",
@@ -22,18 +22,18 @@
     "@codemirror/lang-python": "0.19.2",
     "@codemirror/lang-wast": "0.19.0",
     "@codemirror/lang-xml": "0.19.2",
-    "@codemirror/language": "0.19.3",
+    "@codemirror/language": "0.19.6",
     "@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.5",
+    "@codemirror/search": "0.19.3",
+    "@codemirror/state": "0.19.6",
     "@codemirror/stream-parser": "0.19.2",
     "@codemirror/text": "0.19.5",
     "@codemirror/tooltip": "0.19.10",
-    "@codemirror/view": "0.19.20",
-    "@lezer/common": "0.15.8",
+    "@codemirror/view": "0.19.23",
+    "@lezer/common": "0.15.10",
     "@rollup/plugin-node-resolve": "^13.0.4",
     "rollup-plugin-dts": "^4.0.0",
     "rollup-plugin-terser": "^7.0.2",

package/front_end/ui/components/buttons/Button.ts

@@ -33,6 +33,7 @@ interface ButtonState {
   size?: Size;
   disabled: boolean;
   active: boolean;
+  spinner?: boolean;
   type: ButtonType;
   value?: string;
 }
@@ -43,6 +44,7 @@ export type ButtonData = {
   size?: Size,
   disabled?: boolean,
   active?: boolean,
+  spinner?: boolean,
   type?: ButtonType,
   value?: string,
 }|{
@@ -51,6 +53,7 @@ export type ButtonData = {
   size?: Size,
   disabled?: boolean,
   active?: boolean,
+  spinner?: boolean,
   type?: ButtonType,
   value?: string,
 };
@@ -74,6 +77,7 @@ export class Button extends HTMLElement {
     size: Size.MEDIUM,
     disabled: false,
     active: false,
+    spinner: false,
     type: 'button',
   };
   #isEmpty = true;
@@ -94,6 +98,7 @@ export class Button extends HTMLElement {
     this.#props.iconUrl = data.iconUrl;
     this.#props.size = data.size || Size.MEDIUM;
     this.#props.active = Boolean(data.active);
+    this.#props.spinner = Boolean(data.spinner);
     this.#props.type = data.type || 'button';
     this.setDisabledProperty(data.disabled || false);
     ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
@@ -129,6 +134,11 @@ export class Button extends HTMLElement {
     ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
   }
 
+  set spinner(spinner: boolean) {
+    this.#props.spinner = spinner;
+    ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  }
+
   private setDisabledProperty(disabled: boolean): void {
     this.#props.disabled = disabled;
     this.toggleAttribute('disabled', disabled);
@@ -189,6 +199,12 @@ export class Button extends HTMLElement {
       small: Boolean(this.#props.size === Size.SMALL),
       active: this.#props.active,
     };
+    const spinnerClasses = {
+      primary: this.#props.variant === Variant.PRIMARY,
+      secondary: this.#props.variant === Variant.SECONDARY,
+      disabled: Boolean(this.#props.disabled),
+      'spinner-component': true,
+    };
     // clang-format off
     LitHtml.render(
       LitHtml.html`
@@ -200,6 +216,7 @@ export class Button extends HTMLElement {
             } as IconButton.Icon.IconData}
           >
           </${IconButton.Icon.Icon.litTagName}>` : ''}
+          ${this.#props.spinner ? LitHtml.html`<span class=${LitHtml.Directives.classMap(spinnerClasses)}></span>` : ''}
           <slot @slotchange=${this.onSlotChange}></slot>
         </button>
       `, this.#shadow, {host: this});

package/front_end/ui/components/buttons/button.css

@@ -201,3 +201,34 @@ button.primary:disabled devtools-icon {
 button.secondary:disabled devtools-icon {
   --icon-color: var(--color-text-disabled);
 }
+
+.spinner-component.secondary {
+  border: 2px solid var(--color-primary);
+  border-right-color: transparent;
+}
+
+.spinner-component.disabled {
+  border: 2px solid var(--color-text-disabled);
+  border-right-color: transparent;
+}
+
+.spinner-component {
+  display: block;
+  width: 12px;
+  height: 12px;
+  border-radius: 6px;
+  border: 2px solid var(--color-background);
+  animation: spinner-animation 1s linear infinite;
+  border-right-color: transparent;
+  margin-right: 6px;
+}
+
+@keyframes spinner-animation {
+  from {
+    transform: rotate(0);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}

package/front_end/ui/components/data_grid/DataGrid.ts

@@ -832,6 +832,15 @@ export class DataGrid extends HTMLElement {
     }
     this.scrollToBottomIfRequired();
     this.engageResizeObserver();
+    if (this.#hasRenderedAtLeastOnce) {
+      // We may have had a cell's width change on a re-render, or it may have
+      // been hidden entirely, so we need to ensure that the resize handlers are
+      // re-positioned correctly if so.
+
+      // We don't have to do this on first render as it will fire when the resize observer is engaged.
+      this.alignScrollHandlers();
+    }
+
     this.#isRendering = false;
     this.#hasRenderedAtLeastOnce = true;
 

package/front_end/ui/components/docs/button/basic.ts

@@ -42,6 +42,16 @@ forcedActive.innerText = 'Forced active';
 forcedActive.onclick = () => alert('clicked');
 appendButton(forcedActive);
 
+// Primary (forced spinner)
+const forcedSpinner = new Buttons.Button.Button();
+forcedSpinner.data = {
+  variant: Buttons.Button.Variant.PRIMARY,
+  spinner: true,
+};
+forcedSpinner.innerText = 'Forced spinner';
+forcedSpinner.onclick = () => alert('clicked');
+appendButton(forcedSpinner);
+
 // Secondary
 const secondaryButton = new Buttons.Button.Button();
 secondaryButton.innerText = 'Click me';
@@ -51,6 +61,16 @@ secondaryButton.data = {
 };
 appendButton(secondaryButton);
 
+// Secondary spinner
+const secondarySpinnerButton = new Buttons.Button.Button();
+secondarySpinnerButton.innerText = 'Click me';
+secondarySpinnerButton.onclick = () => alert('clicked');
+secondarySpinnerButton.data = {
+  variant: Buttons.Button.Variant.SECONDARY,
+  spinner: true,
+};
+appendButton(secondarySpinnerButton);
+
 // Primary
 const disabledPrimaryButtons = new Buttons.Button.Button();
 disabledPrimaryButtons.data = {
@@ -61,6 +81,17 @@ disabledPrimaryButtons.innerText = 'Cannot click me';
 disabledPrimaryButtons.onclick = () => alert('clicked');
 appendButton(disabledPrimaryButtons);
 
+// Primary spinner
+const disabledSpinnerPrimaryButtons = new Buttons.Button.Button();
+disabledSpinnerPrimaryButtons.data = {
+  variant: Buttons.Button.Variant.PRIMARY,
+  disabled: true,
+  spinner: true,
+};
+disabledSpinnerPrimaryButtons.innerText = 'Cannot click me';
+disabledSpinnerPrimaryButtons.onclick = () => alert('clicked');
+appendButton(disabledSpinnerPrimaryButtons);
+
 // Secondary
 const disabledSecondaryButton = new Buttons.Button.Button();
 disabledSecondaryButton.innerText = 'Cannot click me';
@@ -71,6 +102,17 @@ disabledSecondaryButton.data = {
 };
 appendButton(disabledSecondaryButton);
 
+// Secondary spinner
+const disabledSpinnerSecondaryButton = new Buttons.Button.Button();
+disabledSpinnerSecondaryButton.innerText = 'Cannot click me';
+disabledSpinnerSecondaryButton.onclick = () => alert('clicked');
+disabledSpinnerSecondaryButton.data = {
+  variant: Buttons.Button.Variant.SECONDARY,
+  disabled: true,
+  spinner: true,
+};
+appendButton(disabledSpinnerSecondaryButton);
+
 // Primary Icon
 const primaryIconButton = new Buttons.Button.Button();
 primaryIconButton.innerText = 'Click me';

package/front_end/ui/components/linear_memory_inspector/LinearMemoryValueInterpreter.ts

@@ -16,7 +16,6 @@ import {Endianness} from './ValueInterpreterDisplayUtils.js';
 import type {TypeToggleEvent, ValueInterpreterSettingsData} from './ValueInterpreterSettings.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
-import inspectorCommonStyles from '../../legacy/inspectorCommon.css.js';
 
 const UIStrings = {
   /**
@@ -74,13 +73,6 @@ export class LinearMemoryValueInterpreter extends HTMLElement {
   #memoryLength = 0;
   #showSettings = false;
 
-  constructor() {
-    super();
-    this.#shadow.adoptedStyleSheets = [
-      inspectorCommonStyles,
-    ];
-  }
-
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets = [linearMemoryValueInterpreterStyles];
   }

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

@@ -28,7 +28,7 @@ export class TextEditor extends HTMLElement {
   #pendingState: CodeMirror.EditorState|undefined;
   #lastScrollPos = {left: 0, top: 0};
   #resizeTimeout = -1;
-  #devtoolsResizeObserver = new ResizeObserver(() => {
+  #resizeListener = (): void => {
     if (this.#resizeTimeout < 0) {
       this.#resizeTimeout = window.setTimeout(() => {
         this.#resizeTimeout = -1;
@@ -37,7 +37,8 @@ export class TextEditor extends HTMLElement {
         }
       }, 50);
     }
-  });
+  };
+  #devtoolsResizeObserver = new ResizeObserver(this.#resizeListener);
 
   constructor(pendingState?: CodeMirror.EditorState) {
     super();
@@ -104,6 +105,7 @@ export class TextEditor extends HTMLElement {
     if (this.#activeEditor) {
       this.#pendingState = this.#activeEditor.state;
       this.#devtoolsResizeObserver.disconnect();
+      window.removeEventListener('resize', this.#resizeListener);
       this.#activeEditor.destroy();
       this.#activeEditor = undefined;
       this.ensureSettingListeners();
@@ -148,6 +150,7 @@ export class TextEditor extends HTMLElement {
     if (devtoolsElement) {
       this.#devtoolsResizeObserver.observe(devtoolsElement);
     }
+    window.addEventListener('resize', this.#resizeListener);
   }
 
   revealPosition(selection: CodeMirror.EditorSelection, highlight: boolean = true): void {

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

@@ -63,7 +63,7 @@ export class DynamicSetting<T> {
   static none: readonly DynamicSetting<unknown>[] = [];
 }
 
-export const tabMovesFocus = DynamicSetting.bool('textEditorTabMovesFocus', CM.keymap.of([{
+export const tabMovesFocus = DynamicSetting.bool('textEditorTabMovesFocus', [], CM.keymap.of([{
   key: 'Tab',
   run: (view: CM.EditorView): boolean => view.state.doc.length ? CM.indentMore(view) : false,
   shift: (view: CM.EditorView): boolean => view.state.doc.length ? CM.indentLess(view) : false,
@@ -85,7 +85,7 @@ export function guessIndent(doc: CM.Text): string {
   let scanned = 0;
   for (let cur = doc.iterLines(1, Math.min(doc.lines + 1, LINES_TO_SCAN_FOR_INDENTATION_GUESSING)); !cur.next().done;) {
     let space = (/^\s*/.exec(cur.value) as string[])[0];
-    if (space.length === cur.value.length || !space.length) {
+    if (space.length === cur.value.length || !space.length || cur.value[space.length] === '*') {
       continue;
     }
     if (space[0] === '\t') {
@@ -324,7 +324,7 @@ export const showCompletionHint = CM.ViewPlugin.fromClass(class {
     if (pos !== lineBefore.to) {
       return null;
     }
-    const wordBefore = /[\w$]+$/.exec(lineBefore.text);
+    const wordBefore = /#?[\w$]+$/.exec(lineBefore.text);
     if (wordBefore && !label.startsWith(wordBefore[0])) {
       return null;
     }

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

@@ -15,6 +15,23 @@ export function completion(): CodeMirror.Extension {
   });
 }
 
+export async function completeInContext(
+    textBefore: string, query: string, force: boolean = false): Promise<UI.SuggestBox.Suggestions> {
+  const state = CodeMirror.EditorState.create({
+    doc: textBefore,
+    selection: {anchor: textBefore.length},
+    extensions: CodeMirror.javascript.javascriptLanguage,
+  });
+  const result = await javascriptCompletionSource(new CodeMirror.CompletionContext(state, textBefore.length, force));
+  return result ?
+      result.options.filter((o): boolean => o.label.startsWith(query)).map((o): UI.SuggestBox.Suggestion => ({
+                                                                             text: o.label,
+                                                                             priority: 100 + (o.boost || 0),
+                                                                             isSecondary: o.type === 'secondary',
+                                                                           })) :
+      [];
+}
+
 class CompletionSet {
   constructor(
       readonly completions: CodeMirror.Completion[] = [],
@@ -35,10 +52,10 @@ class CompletionSet {
 }
 
 const javascriptKeywords = [
-  'async',  'await',      'break',  'case',   'catch',   'class',   'const',  'continue', 'debugger', 'default',
-  'delete', 'do',         'else',   'export', 'extends', 'finally', 'for',    'function', 'if',       'import',
-  'in',     'instanceof', 'let',    'new',    'of',      'return',  'static', 'super',    'switch',   'this',
-  'throw',  'try',        'typeof', 'var',    'void',    'while',   'with',   'yield',
+  'async',      'await', 'break',  'case',    'catch', 'class',   'const',  'continue', 'debugger', 'default', 'delete',
+  'do',         'else',  'export', 'extends', 'false', 'finally', 'for',    'function', 'if',       'import',  'in',
+  'instanceof', 'let',   'new',    'null',    'of',    'return',  'static', 'super',    'switch',   'this',    'throw',
+  'true',       'try',   'typeof', 'var',     'void',  'while',   'with',   'yield',
 ];
 const consoleBuiltinFunctions = [
   'clear',
@@ -101,7 +118,7 @@ export function getQueryType(tree: CodeMirror.Tree, pos: number, doc: CodeMirror
     return null;
   }
 
-  if (node.name === 'PropertyName') {
+  if (node.name === 'PropertyName' || node.name === 'PrivatePropertyName') {
     return parent?.name !== 'MemberExpression' ? null :
                                                  {type: QueryType.PropertyName, from: node.from, relatedNode: parent};
   }
@@ -172,7 +189,7 @@ export async function javascriptCompletionSource(cx: CodeMirror.CompletionContex
   return {
     from: query.from ?? cx.pos,
     options: result.completions,
-    span: /^[\w\P{ASCII}]*/u,
+    span: /^#?[\w\P{ASCII}]*/u,
   };
 }
 
@@ -306,13 +323,14 @@ async function completePropertiesInner(
     object = await evaluateExpression(context, toPrototype + '.prototype', 'completion');
   }
 
-  const functionType = expression === 'window' ? 'function' : 'method';
-  const otherType = expression === 'window' ? 'variable' : 'property';
+  const functionType = expression === 'globalThis' ? 'function' : 'method';
+  const otherType = expression === 'globalThis' ? 'variable' : 'property';
   if (object && (object.type === 'object' || object.type === 'function')) {
     const properties = await object.getAllProperties(false, false);
     const isFunction = object.type === 'function';
     for (const prop of properties.properties || []) {
-      if (!prop.symbol && !(isFunction && (prop.name === 'arguments' || prop.name === 'caller'))) {
+      if (!prop.symbol && !(isFunction && (prop.name === 'arguments' || prop.name === 'caller')) &&
+          (!prop.private || expression === 'this')) {
         const label = quoted ? quoted + prop.name + quoted : prop.name;
         const completion: CodeMirror.Completion = {
           label,
@@ -365,7 +383,7 @@ async function completeExpressionGlobal(): Promise<CompletionSet> {
   }
   const result = baseCompletions.copy();
 
-  const fetchNames = completePropertiesInner('window', context).then(fromWindow => {
+  const fetchNames = completePropertiesInner('globalThis', context).then(fromWindow => {
     return context.globalLexicalScopeNames().then(globals => {
       for (const option of fromWindow.completions) {
         result.add(option);

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

@@ -7,6 +7,7 @@ import * as CM from '../../../third_party/codemirror.next/codemirror.next.js';
 export const editorTheme = CM.EditorView.theme({
   '&.cm-editor': {
     color: 'color: var(--color-text-primary)',
+    cursor: 'auto',
     '&.cm-focused': {
       outline: 'none',
     },

package/front_end/ui/legacy/InspectorView.ts

@@ -107,6 +107,14 @@ const UIStrings = {
   *@description The aria label for the drawer.
   */
   drawer: 'Tool drawer',
+  /**
+  *@description The aria label for the drawer shown.
+  */
+  drawerShown: 'Drawer shown',
+  /**
+  *@description The aria label for the drawer hidden.
+  */
+  drawerHidden: 'Drawer hidden',
 };
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/InspectorView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -312,6 +320,7 @@ export class InspectorView extends VBox implements ViewLocationResolver {
       this.focusRestorer = null;
     }
     this.emitDrawerChangeEvent(true);
+    ARIAUtils.alert(i18nString(UIStrings.drawerShown));
   }
 
   drawerVisible(): boolean {
@@ -328,6 +337,7 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     this.drawerSplitWidget.hideSidebar(true);
 
     this.emitDrawerChangeEvent(false);
+    ARIAUtils.alert(i18nString(UIStrings.drawerHidden));
   }
 
   setDrawerMinimized(minimized: boolean): void {

package/front_end/ui/legacy/ListWidget.ts

@@ -276,10 +276,10 @@ export class Editor<T> {
     this.element = document.createElement('div');
     this.element.classList.add('editor-container');
     this.element.addEventListener('keydown', onKeyDown.bind(null, isEscKey, this.cancelClicked.bind(this)), false);
-    this.element.addEventListener(
-        'keydown', onKeyDown.bind(null, event => event.key === 'Enter', this.commitClicked.bind(this)), false);
 
     this.contentElementInternal = this.element.createChild('div', 'editor-content');
+    this.contentElementInternal.addEventListener(
+        'keydown', onKeyDown.bind(null, event => event.key === 'Enter', this.commitClicked.bind(this)), false);
 
     const buttonsRow = this.element.createChild('div', 'editor-buttons');
     this.commitButton = createTextButton('', this.commitClicked.bind(this), '', true /* primary */);

package/front_end/ui/legacy/components/object_ui/ObjectPropertiesSection.ts

@@ -37,10 +37,10 @@ import * as Platform from '../../../../core/platform/platform.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
 import * as TextUtils from '../../../../models/text_utils/text_utils.js';
 import * as IconButton from '../../../components/icon_button/icon_button.js';
+import * as TextEditor from '../../../components/text_editor/text_editor.js';
 import * as UI from '../../legacy.js';
 
 import {CustomPreviewComponent} from './CustomPreviewComponent.js';
-import {JavaScriptAutocomplete} from './JavaScriptAutocomplete.js';
 import {JavaScriptREPL} from './JavaScriptREPL.js';
 import {createSpansForNodeTitle, RemoteObjectPreviewFormatter} from './RemoteObjectPreviewFormatter.js';
 import objectValueStyles from './objectValue.css.js';
@@ -1513,8 +1513,7 @@ export class ArrayGroupingTreeElement extends UI.TreeOutline.TreeElement {
 export class ObjectPropertyPrompt extends UI.TextPrompt.TextPrompt {
   constructor() {
     super();
-    const javaScriptAutocomplete = JavaScriptAutocomplete.instance();
-    this.initialize(javaScriptAutocomplete.completionsForTextInCurrentContext.bind(javaScriptAutocomplete));
+    this.initialize(TextEditor.JavaScript.completeInContext);
   }
 }
 

package/front_end/ui/legacy/components/object_ui/objectPropertiesSection.css

@@ -61,7 +61,6 @@
 
 .name-and-value {
   overflow: hidden;
-  text-overflow: ellipsis;
   line-height: 16px;
 }
 

package/front_end/ui/legacy/components/object_ui/object_ui-legacy.ts

@@ -12,14 +12,6 @@ ObjectUI = ObjectUI || {};
 /** @constructor */
 ObjectUI.CustomPreviewComponent = ObjectUIModule.CustomPreviewComponent.CustomPreviewComponent;
 
-/** @constructor */
-ObjectUI.JavaScriptAutocomplete = ObjectUIModule.JavaScriptAutocomplete.JavaScriptAutocomplete;
-
-/** @constructor */
-ObjectUI.JavaScriptAutocompleteConfig = ObjectUIModule.JavaScriptAutocomplete.JavaScriptAutocompleteConfig;
-
-ObjectUI.javaScriptAutocomplete = ObjectUIModule.javaScriptAutocomplete;
-
 /** @constructor */
 ObjectUI.JavaScriptREPL = ObjectUIModule.JavaScriptREPL.JavaScriptREPL;
 

package/front_end/ui/legacy/components/object_ui/object_ui.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as CustomPreviewComponent from './CustomPreviewComponent.js';
-import * as JavaScriptAutocomplete from './JavaScriptAutocomplete.js';
 import * as JavaScriptREPL from './JavaScriptREPL.js';
 import * as ObjectPopoverHelper from './ObjectPopoverHelper.js';
 import * as ObjectPropertiesSection from './ObjectPropertiesSection.js';
@@ -11,11 +10,8 @@ import * as RemoteObjectPreviewFormatter from './RemoteObjectPreviewFormatter.js
 
 export {
   CustomPreviewComponent,
-  JavaScriptAutocomplete,
   JavaScriptREPL,
   ObjectPopoverHelper,
   ObjectPropertiesSection,
   RemoteObjectPreviewFormatter,
 };
-
-export const javaScriptAutocomplete = JavaScriptAutocomplete.JavaScriptAutocomplete.instance();

package/front_end/ui/legacy/components/source_frame/SourceFrame.ts

@@ -229,6 +229,9 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
             },
           },
         },
+        ':host-context(.pretty-printed) & .cm-lineNumbers .cm-gutterElement': {
+          color: 'var(--legacy-accent-color)',
+        },
       }),
       CodeMirror.EditorView.domEventHandlers({
         focus: () => this.onFocus(),