chrome-devtools-frontend 1.0.945884 → 1.0.946351

package/front_end/models/bindings/DebuggerWorkspaceBinding.ts

@@ -341,7 +341,7 @@ export class DebuggerWorkspaceBinding implements SDK.TargetManager.SDKModelObser
     modelData.callFrameLocations.clear();
   }
 
-  private resetForTest(target: SDK.Target.Target): void {
+  resetForTest(target: SDK.Target.Target): void {
     const debuggerModel = (target.model(SDK.DebuggerModel.DebuggerModel) as SDK.DebuggerModel.DebuggerModel);
     const modelData = this.#debuggerModelToData.get(debuggerModel);
     if (modelData) {

package/front_end/models/bindings/ResourceMapping.ts

@@ -149,7 +149,7 @@ export class ResourceMapping implements SDK.TargetManager.SDKModelObserver<SDK.R
         uiLocation.uiSourceCode.url(), uiLocation.lineNumber, uiLocation.columnNumber);
   }
 
-  private resetForTest(target: SDK.Target.Target): void {
+  resetForTest(target: SDK.Target.Target): void {
     const resourceTreeModel = target.model(SDK.ResourceTreeModel.ResourceTreeModel);
     const info = resourceTreeModel ? this.#modelToInfo.get(resourceTreeModel) : null;
     if (info) {

package/front_end/models/formatter/FormatterWorkerPool.ts

@@ -171,24 +171,6 @@ export class FormatterWorkerPool {
     }
   }
 
-  findLastExpression(content: string): Promise<string|null> {
-    return this.runTask(FormatterActions.FormatterActions.FIND_LAST_EXPRESSION, {content}) as Promise<string|null>;
-  }
-
-  findLastFunctionCall(content: string): Promise<{
-    baseExpression: string,
-    receiver: string,
-    argumentIndex: number,
-    functionName: string,
-  }|null> {
-    return this.runTask(FormatterActions.FormatterActions.FIND_LAST_FUNCTION_CALL, {content}) as Promise<{
-             baseExpression: string,
-             receiver: string,
-             argumentIndex: number,
-             functionName: string,
-           }|null>;
-  }
-
   argumentsList(content: string): Promise<string[]> {
     return this.runTask(FormatterActions.FormatterActions.ARGUMENTS_LIST, {content}) as Promise<string[]>;
   }

package/front_end/models/text_utils/CodeMirrorUtils.ts

@@ -31,57 +31,11 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 import type * as CodeMirrorModule from '../../third_party/codemirror/codemirror-legacy.js'; // eslint-disable-line @typescript-eslint/no-unused-vars
+import '../../third_party/codemirror/package/addon/runmode/runmode-standalone.js';
+import '../../third_party/codemirror/package/mode/css/css.js';
 
-import * as TextRange from './TextRange.js';
 import type * as TextUtils from './TextUtils.js';
 
-export function toPos(range: TextRange.TextRange): {
-  start: any,
-  end: any,
-} {
-  return {
-    start: new CodeMirror.Pos(range.startLine, range.startColumn),
-    end: new CodeMirror.Pos(range.endLine, range.endColumn),
-  };
-}
-
-export function toRange(start: any, end: any): TextRange.TextRange {
-  return new TextRange.TextRange(start.line, start.ch, end.line, end.ch);
-}
-
-export function changeObjectToEditOperation(changeObject: any): {
-  oldRange: TextRange.TextRange,
-  newRange: TextRange.TextRange,
-} {
-  const oldRange = toRange(changeObject.from, changeObject.to);
-  const newRange = oldRange.clone();
-  const linesAdded = changeObject.text.length;
-  if (linesAdded === 0) {
-    newRange.endLine = newRange.startLine;
-    newRange.endColumn = newRange.startColumn;
-  } else if (linesAdded === 1) {
-    newRange.endLine = newRange.startLine;
-    newRange.endColumn = newRange.startColumn + changeObject.text[0].length;
-  } else {
-    newRange.endLine = newRange.startLine + linesAdded - 1;
-    newRange.endColumn = changeObject.text[linesAdded - 1].length;
-  }
-  return {oldRange: oldRange, newRange: newRange};
-}
-
-export function pullLines(codeMirror: typeof CodeMirror, linesCount: number): string[] {
-  const lines: string[] = [];
-  // @ts-expect-error CodeMirror types do not specify eachLine.
-  codeMirror.eachLine(0, linesCount, onLineHandle);
-  return lines;
-
-  function onLineHandle(lineHandle: {
-    text: string,
-  }): void {
-    lines.push(lineHandle.text);
-  }
-}
-
 let tokenizerFactoryInstance: TokenizerFactory;
 
 export type Tokenizer =
@@ -103,15 +57,16 @@ export class TokenizerFactory implements TextUtils.TokenizerFactory {
   }
 
   // https://crbug.com/1151919 * = CodeMirror.Mode
-  createTokenizer(mimeType: string, mode?: any): Tokenizer {
-    const cmMode = mode || CodeMirror.getMode({indentUnit: 2}, mimeType);
+  createTokenizer(mimeType: string): Tokenizer {
+    const cmMode = CodeMirror.getMode({indentUnit: 2}, mimeType);
     const state = CodeMirror.startState(cmMode);
 
     function tokenize(
         line: string, callback: (value: string, style: string|null, start: number, end: number) => void): void {
       const stream = new CodeMirror.StringStream(line);
       while (!stream.eol()) {
-        const style = cmMode.token(stream, state);
+        const style =
+            (cmMode.token as (stream: CodeMirror.StringStream, state: unknown) => string | null)(stream, state);
         const value = stream.current();
         callback(value, style, stream.start, stream.start + value.length);
         stream.start = stream.pos;

package/front_end/models/text_utils/TextUtils.ts

@@ -29,7 +29,6 @@
  */
 
 import * as Platform from '../../core/platform/platform.js';
-import type * as CodeMirrorModule from '../../third_party/codemirror/codemirror-legacy.js'; // eslint-disable-line @typescript-eslint/no-unused-vars
 
 import {SearchMatch} from './ContentProvider.js';
 import {Text} from './Text.js';
@@ -330,7 +329,7 @@ export class BalancedJSONTokenizer {
 export interface TokenizerFactory {
   // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  createTokenizer(mimeType: string, mode?: CodeMirror.Mode<any>):
+  createTokenizer(mimeType: string):
       (arg0: string, arg1: (arg0: string, arg1: string|null, arg2: number, arg3: number) => void) => void;
 }
 

package/front_end/models/text_utils/text_utils-legacy.ts

@@ -48,10 +48,5 @@ TextUtils.isMinified = TextUtilsModule.TextUtils.isMinified;
 
 TextUtils.CodeMirrorUtils = {};
 
-TextUtils.CodeMirrorUtils.toPos = TextUtilsModule.CodeMirrorUtils.toPos;
-TextUtils.CodeMirrorUtils.toRange = TextUtilsModule.CodeMirrorUtils.toRange;
-TextUtils.CodeMirrorUtils.changeObjectToEditOperation = TextUtilsModule.CodeMirrorUtils.changeObjectToEditOperation;
-TextUtils.CodeMirrorUtils.pullLines = TextUtilsModule.CodeMirrorUtils.pullLines;
-
 /** @constructor */
 TextUtils.CodeMirrorUtils.TokenizerFactory = TextUtilsModule.CodeMirrorUtils.TokenizerFactory;

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -281,10 +281,8 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     this.cacheStorageListTreeElement = new ServiceWorkerCacheTreeElement(panel);
     cacheTreeElement.appendChild(this.cacheStorageListTreeElement);
 
-    if (Root.Runtime.experiments.isEnabled('bfcacheDebugging')) {
-      this.backForwardCacheListTreeElement = new BackForwardCacheTreeElement(panel);
-      cacheTreeElement.appendChild(this.backForwardCacheListTreeElement);
-    }
+    this.backForwardCacheListTreeElement = new BackForwardCacheTreeElement(panel);
+    cacheTreeElement.appendChild(this.backForwardCacheListTreeElement);
 
     if (Root.Runtime.experiments.isEnabled('backgroundServices')) {
       const backgroundServiceSectionTitle = i18nString(UIStrings.backgroundServices);

package/front_end/panels/elements/elementsTreeOutline.css

@@ -186,19 +186,6 @@
   margin-right: 4px;
 }
 
-.CodeMirror {
-  background-color: var(--color-background);
-  height: 300px !important; /* stylelint-disable-line declaration-no-important */
-}
-
-.CodeMirror-lines {
-  padding: 0;
-}
-
-.CodeMirror pre {
-  padding: 0;
-}
-
 button,
 input,
 select {

package/front_end/panels/network/NetworkConfigView.ts

@@ -50,6 +50,10 @@ const UIStrings = {
    * a set of checkboxes to override the content encodings supported by the browser.
    */
   acceptedEncoding: 'Accepted `Content-Encoding`s',
+  /**
+  * @description Status text for successful update of client hints.
+  */
+  clientHintsStatusText: 'User agent updated.',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/network/NetworkConfigView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -246,10 +250,12 @@ export class NetworkConfigView extends UI.Widget.VBox {
         showMobileCheckbox: true,
         showSubmitButton: true,
       };
+      userAgentUpdateButtonStatusText.textContent = '';
     });
 
     clientHints.addEventListener('clienthintschange', () => {
       customSelectAndInput.select.value = 'custom';
+      userAgentUpdateButtonStatusText.textContent = '';
     });
 
     clientHints.addEventListener('clienthintssubmit', (event: Event) => {
@@ -257,8 +263,12 @@ export class NetworkConfigView extends UI.Widget.VBox {
       const customUA = customUserAgentSetting.get();
       userAgentMetadataSetting.set(metaData);
       SDK.NetworkManager.MultitargetNetworkManager.instance().setCustomUserAgentOverride(customUA, metaData);
+      userAgentUpdateButtonStatusText.textContent = i18nString(UIStrings.clientHintsStatusText);
     });
 
+    const userAgentUpdateButtonStatusText = section.createChild('span', 'status-text');
+    userAgentUpdateButtonStatusText.textContent = '';
+
     userAgentSelectBoxChanged();
 
     function userAgentSelectBoxChanged(): void {

package/front_end/panels/network/NetworkItemView.ts

@@ -250,6 +250,9 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
   }
 
   private async maybeAppendPayloadPanel(): Promise<void> {
+    if (this.hasTab('payload')) {
+      return;
+    }
     if (this.requestInternal.queryParameters || await this.requestInternal.requestFormData()) {
       this.payloadView = new RequestPayloadView(this.requestInternal);
       this.appendTab(

package/front_end/panels/network/networkConfigView.css

@@ -99,3 +99,8 @@
   margin-top: 14px;
   width: min(100%, 400px);
 }
+
+.status-text {
+  padding: 10px;
+  color: var(--color-accent-green);
+}

package/front_end/panels/profiler/profilesPanel.css

@@ -55,7 +55,7 @@
 
 .profile-view .data-grid span.percent-column {
   color: var(--color-text-secondary);
-  width: 55px;
+  width: 9ex;
   display: inline-block;
 }
 

package/front_end/panels/settings/emulation/components/UserAgentClientHintsForm.ts

@@ -3,8 +3,10 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../../../core/i18n/i18n.js';
+import * as Buttons from '../../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../../ui/components/helpers/helpers.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
+
 import userAgentClientHintsFormStyles from './userAgentClientHintsForm.css.js';
 
 import type * as Protocol from '../../../../generated/protocol.js';
@@ -532,12 +534,12 @@ export class UserAgentClientHintsForm extends HTMLElement {
         'architecture');
     const deviceModelSection = this.renderDeviceModelSection();
     const submitButton = this.showSubmitButton ? LitHtml.html`
-      <button
-        type="submit"
-        class="submit-button full-row"
+      <${Buttons.Button.Button.litTagName}
+        .variant=${Buttons.Button.Variant.SECONDARY}
+        .type=${'submit'}
       >
         ${i18nString(UIStrings.update)}
-      </button>
+      </${Buttons.Button.Button.litTagName}>
     ` :
                                                  LitHtml.html``;
     const output = LitHtml.html`

package/front_end/panels/settings/emulation/components/userAgentClientHintsForm.css

@@ -96,18 +96,6 @@
   margin-left: 5px;
 }
 
-.submit-button {
-  border: none;
-  border-radius: 2px;
-  font-weight: normal;
-  height: 24px;
-  font-size: 12px;
-  padding: 0 12px;
-  cursor: pointer;
-  background-color: var(--color-primary-variant);
-  color: var(--color-text-primary);
-}
-
 .hide-container {
   display: none;
 }

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -589,8 +589,12 @@ export class DebuggerPlugin extends Plugin {
       if (node.firstChild) {
         return null;
       }
-      while (node && node.name !== 'VariableDefinition' && node.name !== 'VariableName' &&
-             node.name !== 'MemberExpression') {
+      while (
+          node && node.name !== 'VariableDefinition' && node.name !== 'VariableName' &&
+          node.name !== 'MemberExpression' &&
+          !(node.name === 'PropertyName' && node.parent?.name === 'PatternProperty' &&
+            node.nextSibling?.name !== ':') &&
+          !(node.name === 'PropertyDefinition' && node.parent?.name === 'Property' && node.nextSibling?.name !== ':')) {
         node = node.parent;
       }
       if (!node) {

package/front_end/panels/sources/sourcesView.css

@@ -58,133 +58,3 @@
 .-theme-with-dark-background .source-frame-debugger-script {
   --override-debugger-background-tint: rgb(61 61 0 / 50%);
 }
-
-@keyframes source-frame-value-update-highlight-animation {
-  from {
-    background-color: inherit;
-    color: inherit;
-  }
-
-  10% {
-    background-color: var(--override-highlight-animation-10pc-background-color);
-    color: var(--override-highlight-animation-10pc-foreground-color);
-  }
-
-  to {
-    background-color: inherit;
-    color: inherit;
-  }
-}
-
-.source-frame-value-update-highlight {
-  animation: source-frame-value-update-highlight-animation 0.8s 1 cubic-bezier(0, 0, 0.2, 1);
-  border-radius: 2px;
-}
-
-.diff-entry-insert {
-  --override-diff-line-number-background-color: hsl(144deg 55% 49% / 20%);
-}
-
-.-theme-with-dark-background .diff-entry-insert,
-:host-context(.-theme-with-dark-background) .diff-entry-insert {
-  --override-diff-line-number-background-color: rgb(61 199 116 / 20%);
-}
-
-.diff-entry-insert .diff-marker {
-  border-left: 4px solid var(--color-accent-green);
-}
-
-.diff-entry-insert .CodeMirror-gutter-background {
-  background-color: var(--override-diff-line-number-background-color);
-}
-
-.diff-entry-modify {
-  --override-diff-line-number-background-color: rgb(186 104 200 / 20%);
-  --override-diff-line-number-border-color: #9c27b0;
-}
-
-.-theme-with-dark-background .diff-entry-modify,
-:host-context(.-theme-with-dark-background) .diff-entry-modify {
-  --override-diff-line-number-background-color: rgb(137 55 151 / 20%);
-  --override-diff-line-number-border-color: rgb(196 79 216);
-}
-
-.diff-entry-modify .diff-marker {
-  border-left: 4px solid var(--override-diff-line-number-border-color);
-}
-
-.diff-entry-modify .CodeMirror-gutter-background {
-  background-color: var(--override-diff-line-number-background-color);
-}
-
-.diff-entry-delete {
-  --override-diff-deletion-color: #d32f2f;
-}
-
-.-theme-with-dark-background .diff-entry-delete,
-:host-context(.-theme-with-dark-background) .diff-entry-delete {
-  --override-diff-deletion-color: rgb(208 44 44);
-}
-
-.diff-entry-delete .diff-marker {
-  width: 0;
-  height: 0;
-  border-top: 6px solid transparent;
-  border-bottom: 6px solid transparent;
-  border-left: 6px solid var(--override-diff-deletion-color);
-  position: relative;
-  top: 6px;
-  cursor: pointer;
-  left: 0;
-}
-
-.diff-entry-delete .CodeMirror-gutter-background {
-  border-bottom: 2px solid var(--override-diff-deletion-color);
-}
-
-.CodeMirror-gutter-diff {
-  width: 4px;
-}
-
-.highlight-line-modification {
-  --override-modification-background-fadeout-from: rgb(158 54 153 / 50%);
-  --override-modification-background-fadeout-90pc: rgb(158 54 153 / 0%);
-  --override-modification-foreground-fadeout-from: #fff;
-
-  animation: source-line-modification-background-fadeout 0.4s 0s;
-  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
-}
-
-.highlight-line-modification span {
-  animation: source-line-modification-foreground-fadeout 0.4s 0s;
-  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
-}
-
-@keyframes source-line-modification-background-fadeout {
-  from {
-    background-color: var(--override-modification-background-fadeout-from);
-  }
-
-  50% {
-    /* Purposefully uses the `from` color to delay the animation from 0-50% */
-    background-color: var(--override-modification-background-fadeout-from);
-  }
-
-  90% {
-    background-color: var(--override-modification-background-fadeout-90pc);
-  }
-  to { background-color: transparent; }
-}
-
-@keyframes source-line-modification-foreground-fadeout {
-  from {
-    color: var(--override-modification-foreground-fadeout-from);
-  }
-
-  50% {
-    /* Purposefully uses the `from` color to delay the animation from 0-50% */
-    color: var(--override-modification-foreground-fadeout-from);
-  }
-  90% { color: initial; }
-  to { color: initial; }
-}

package/front_end/third_party/codemirror/codemirror-tsconfig.json

@@ -3,33 +3,9 @@
     "composite": true
   },
   "files": [
-    "package/addon/comment/comment.js",
-    "package/addon/edit/closebrackets.js",
-    "package/addon/edit/matchbrackets.js",
-    "package/addon/fold/brace-fold.js",
-    "package/addon/fold/foldcode.js",
-    "package/addon/fold/foldgutter.js",
-    "package/addon/mode/multiplex.js",
-    "package/addon/mode/overlay.js",
-    "package/addon/mode/simple.js",
     "package/addon/runmode/runmode-standalone.js",
-    "package/addon/selection/active-line.js",
-    "package/addon/selection/mark-selection.js",
-    "package/lib/codemirror.js",
-    "package/mode/clike/clike.js",
-    "package/mode/clojure/clojure.js",
-    "package/mode/coffeescript/coffeescript.js",
     "package/mode/css/css.js",
-    "package/mode/htmlembedded/htmlembedded.js",
-    "package/mode/htmlmixed/htmlmixed.js",
     "package/mode/javascript/javascript.js",
-    "package/mode/jsx/jsx.js",
-    "package/mode/livescript/livescript.js",
-    "package/mode/markdown/markdown.js",
-    "package/mode/php/php.js",
-    "package/mode/python/python.js",
-    "package/mode/shell/shell.js",
-    "package/mode/wast/wast.js",
     "package/mode/xml/xml.js"
   ]
-}
+}

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[] = [],
@@ -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,
   };
 }
 
@@ -312,7 +329,8 @@ async function completePropertiesInner(
     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,

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/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(),