chrome-devtools-frontend 1.0.943182 → 1.0.944903

package/front_end/third_party/wasmparser/package/src/WasmParser.ts

@@ -1877,7 +1877,7 @@ export class BinaryReader {
       shift += 7;
       if ((byte & 0x80) === 0) break;
     }
-    return result;
+    return result >>> 0;
   }
   private readVarInt64(): Int64 {
     var result = new Uint8Array(8);
@@ -1951,7 +1951,7 @@ export class BinaryReader {
     return new Type(TypeKind.unspecified, func_index);
   }
   private readStringBytes(): Uint8Array {
-    var length = this.readVarUint32() >>> 0;
+    var length = this.readVarUint32();
     return this.readBytes(length);
   }
   private readBytes(length: number): Uint8Array {
@@ -1965,7 +1965,7 @@ export class BinaryReader {
   private hasStringBytes(): boolean {
     if (!this.hasVarIntBytes()) return false;
     var pos = this._pos;
-    var length = this.readVarUint32() >>> 0;
+    var length = this.readVarUint32();
     var result = this.hasBytes(length);
     this._pos = pos;
     return result;
@@ -1974,7 +1974,7 @@ export class BinaryReader {
     return this.hasBytes(this._sectionRange.end - this._pos);
   }
   private readFuncType(): ITypeEntry {
-    var paramCount = this.readVarUint32() >>> 0;
+    var paramCount = this.readVarUint32();
     var paramTypes = new Array(paramCount);
     for (var i = 0; i < paramCount; i++) paramTypes[i] = this.readType();
     var returnCount = this.readVarUint1();
@@ -1993,7 +1993,7 @@ export class BinaryReader {
     return result;
   }
   private readStructType(): ITypeEntry {
-    var fieldCount = this.readVarUint32() >>> 0;
+    var fieldCount = this.readVarUint32();
     var fieldTypes = new Array(fieldCount);
     var fieldMutabilities = new Array(fieldCount);
     for (var i = 0; i < fieldCount; i++) {
@@ -2028,21 +2028,21 @@ export class BinaryReader {
     return result;
   }
   private readResizableLimits(maxPresent: boolean): IResizableLimits {
-    var initial = this.readVarUint32() >>> 0;
+    var initial = this.readVarUint32();
     var maximum;
     if (maxPresent) {
-      maximum = this.readVarUint32() >>> 0;
+      maximum = this.readVarUint32();
     }
     return { initial: initial, maximum: maximum };
   }
   private readTableType(): ITableType {
     var elementType = this.readType();
-    var flags = this.readVarUint32() >>> 0;
+    var flags = this.readVarUint32();
     var limits = this.readResizableLimits(!!(flags & 0x01));
     return { elementType: elementType, limits: limits };
   }
   private readMemoryType(): IMemoryType {
-    var flags = this.readVarUint32() >>> 0;
+    var flags = this.readVarUint32();
     var shared = !!(flags & 0x02);
     return {
       limits: this.readResizableLimits(!!(flags & 0x01)),
@@ -2063,8 +2063,8 @@ export class BinaryReader {
     return { contentType: contentType, mutability: mutability };
   }
   private readEventType(): IEventType {
-    var attribute = this.readVarUint32() >>> 0;
-    var typeIndex = this.readVarUint32() >>> 0;
+    var attribute = this.readVarUint32();
+    var typeIndex = this.readVarUint32();
     return {
       attribute: attribute,
       typeIndex: typeIndex,
@@ -2115,7 +2115,7 @@ export class BinaryReader {
     var type: ITableType | IMemoryType | IGlobalType | IEventType;
     switch (kind) {
       case ExternalKind.Function:
-        funcTypeIndex = this.readVarUint32() >>> 0;
+        funcTypeIndex = this.readVarUint32();
         break;
       case ExternalKind.Table:
         type = this.readTableType();
@@ -2147,7 +2147,7 @@ export class BinaryReader {
     }
     var field = this.readStringBytes();
     var kind = this.readUint8();
-    var index = this.readVarUint32() >>> 0;
+    var index = this.readVarUint32();
     this.state = BinaryReaderState.EXPORT_SECTION_ENTRY;
     this.result = { field: field, kind: kind, index: index };
     this._sectionEntriesLeft--;
@@ -2158,7 +2158,7 @@ export class BinaryReader {
       this.skipSection();
       return this.read();
     }
-    var typeIndex = this.readVarUint32() >>> 0;
+    var typeIndex = this.readVarUint32();
     this.state = BinaryReaderState.FUNCTION_SECTION_ENTRY;
     this.result = { typeIndex: typeIndex };
     this._sectionEntriesLeft--;
@@ -2345,8 +2345,8 @@ export class BinaryReader {
     return true;
   }
   private readMemoryImmediate(): IMemoryAddress {
-    var flags = this.readVarUint32() >>> 0;
-    var offset = this.readVarUint32() >>> 0;
+    var flags = this.readVarUint32();
+    var offset = this.readVarUint32();
     return { flags: flags, offset: offset };
   }
   private readNameMap(): INaming[] {
@@ -2473,7 +2473,7 @@ export class BinaryReader {
     }
     if (!this.hasVarIntBytes()) return false;
     var pos = this._pos;
-    var type: LinkingType = this.readVarUint32() >>> 0;
+    var type: LinkingType = this.readVarUint32();
     var index;
     switch (type) {
       case LinkingType.StackPointer:
@@ -2570,11 +2570,11 @@ export class BinaryReader {
       case OperatorCode.br_on_non_data:
       case OperatorCode.br_on_i31:
       case OperatorCode.br_on_non_i31:
-        brDepth = this.readVarUint32() >>> 0;
+        brDepth = this.readVarUint32();
         break;
       case OperatorCode.br_on_cast_static:
       case OperatorCode.br_on_cast_static_fail:
-        brDepth = this.readVarUint32() >>> 0;
+        brDepth = this.readVarUint32();
         refType = this.readHeapType();
         break;
       case OperatorCode.array_get:
@@ -2613,7 +2613,7 @@ export class BinaryReader {
         refType = this.readHeapType();
         // This really is the "length" value. Overload "brDepth" to keep the
         // IOperatorInformation interface a little leaner.
-        brDepth = this.readVarUint32() >>> 0;
+        brDepth = this.readVarUint32();
         break;
       case OperatorCode.ref_is_func:
       case OperatorCode.ref_is_data:
@@ -2682,25 +2682,25 @@ export class BinaryReader {
         reserved = this.readVarUint1();
         break;
       case OperatorCode.table_init:
-        segmentIndex = this.readVarUint32() >>> 0;
-        tableIndex = this.readVarUint32() >>> 0;
+        segmentIndex = this.readVarUint32();
+        tableIndex = this.readVarUint32();
         break;
       case OperatorCode.table_copy:
-        tableIndex = this.readVarUint32() >>> 0;
-        destinationIndex = this.readVarUint32() >>> 0;
+        tableIndex = this.readVarUint32();
+        destinationIndex = this.readVarUint32();
         break;
       case OperatorCode.table_grow:
       case OperatorCode.table_size:
       case OperatorCode.table_fill:
-        tableIndex = this.readVarUint32() >>> 0;
+        tableIndex = this.readVarUint32();
         break;
       case OperatorCode.memory_init:
-        segmentIndex = this.readVarUint32() >>> 0;
+        segmentIndex = this.readVarUint32();
         reserved = this.readVarUint1();
         break;
       case OperatorCode.data_drop:
       case OperatorCode.elem_drop:
-        segmentIndex = this.readVarUint32() >>> 0;
+        segmentIndex = this.readVarUint32();
         break;
       default:
         this.error = new Error(
@@ -3218,10 +3218,10 @@ export class BinaryReader {
         case OperatorCode.br_if:
         case OperatorCode.br_on_null:
         case OperatorCode.br_on_non_null:
-          brDepth = this.readVarUint32() >>> 0;
+          brDepth = this.readVarUint32();
           break;
         case OperatorCode.br_table:
-          var tableCount = this.readVarUint32() >>> 0;
+          var tableCount = this.readVarUint32();
           if (!this.hasBytes(tableCount + 1)) {
             // We need at least (tableCount + 1) bytes
             this._pos = pos;
@@ -3234,12 +3234,12 @@ export class BinaryReader {
               this._pos = pos;
               return false;
             }
-            brTable.push(this.readVarUint32() >>> 0);
+            brTable.push(this.readVarUint32());
           }
           break;
         case OperatorCode.rethrow:
         case OperatorCode.delegate:
-          relativeDepth = this.readVarUint32() >>> 0;
+          relativeDepth = this.readVarUint32();
           break;
         case OperatorCode.catch:
         case OperatorCode.throw:
@@ -3251,25 +3251,25 @@ export class BinaryReader {
         case OperatorCode.call:
         case OperatorCode.return_call:
         case OperatorCode.ref_func:
-          funcIndex = this.readVarUint32() >>> 0;
+          funcIndex = this.readVarUint32();
           break;
         case OperatorCode.call_indirect:
         case OperatorCode.return_call_indirect:
-          typeIndex = this.readVarUint32() >>> 0;
+          typeIndex = this.readVarUint32();
           reserved = this.readVarUint1();
           break;
         case OperatorCode.local_get:
         case OperatorCode.local_set:
         case OperatorCode.local_tee:
-          localIndex = this.readVarUint32() >>> 0;
+          localIndex = this.readVarUint32();
           break;
         case OperatorCode.global_get:
         case OperatorCode.global_set:
-          globalIndex = this.readVarUint32() >>> 0;
+          globalIndex = this.readVarUint32();
           break;
         case OperatorCode.table_get:
         case OperatorCode.table_set:
-          tableIndex = this.readVarUint32() >>> 0;
+          tableIndex = this.readVarUint32();
           break;
         case OperatorCode.i32_load:
         case OperatorCode.i64_load:
@@ -3532,20 +3532,20 @@ export class BinaryReader {
     }
     if (!this.hasVarIntBytes()) return false;
     var pos = this._pos;
-    var size = this.readVarUint32() >>> 0;
+    var size = this.readVarUint32();
     var bodyEnd = this._pos + size;
     if (!this.hasVarIntBytes()) {
       this._pos = pos;
       return false;
     }
-    var localCount = this.readVarUint32() >>> 0;
+    var localCount = this.readVarUint32();
     var locals: Array<ILocals> = [];
     for (var i = 0; i < localCount; i++) {
       if (!this.hasVarIntBytes()) {
         this._pos = pos;
         return false;
       }
-      var count = this.readVarUint32() >>> 0;
+      var count = this.readVarUint32();
       if (!this.hasVarIntBytes()) {
         this._pos = pos;
         return false;
@@ -3588,7 +3588,7 @@ export class BinaryReader {
       this._pos = sectionStart;
       return false;
     }
-    var payloadLength = this.readVarUint32() >>> 0;
+    var payloadLength = this.readVarUint32();
     var name = null;
     var payloadEnd = this._pos + payloadLength;
     if (id == 0) {
@@ -3625,31 +3625,31 @@ export class BinaryReader {
     switch (currentSection.id) {
       case SectionCode.Type:
         if (!this.hasSectionPayload()) return false;
-        this._sectionEntriesLeft = this.readVarUint32() >>> 0;
+        this._sectionEntriesLeft = this.readVarUint32();
         return this.readTypeEntry();
       case SectionCode.Import:
         if (!this.hasSectionPayload()) return false;
-        this._sectionEntriesLeft = this.readVarUint32() >>> 0;
+        this._sectionEntriesLeft = this.readVarUint32();
         return this.readImportEntry();
       case SectionCode.Export:
         if (!this.hasSectionPayload()) return false;
-        this._sectionEntriesLeft = this.readVarUint32() >>> 0;
+        this._sectionEntriesLeft = this.readVarUint32();
         return this.readExportEntry();
       case SectionCode.Function:
         if (!this.hasSectionPayload()) return false;
-        this._sectionEntriesLeft = this.readVarUint32() >>> 0;
+        this._sectionEntriesLeft = this.readVarUint32();
         return this.readFunctionEntry();
       case SectionCode.Table:
         if (!this.hasSectionPayload()) return false;
-        this._sectionEntriesLeft = this.readVarUint32() >>> 0;
+        this._sectionEntriesLeft = this.readVarUint32();
         return this.readTableEntry();
       case SectionCode.Memory:
         if (!this.hasSectionPayload()) return false;
-        this._sectionEntriesLeft = this.readVarUint32() >>> 0;
+        this._sectionEntriesLeft = this.readVarUint32();
         return this.readMemoryEntry();
       case SectionCode.Global:
         if (!this.hasVarIntBytes()) return false;
-        this._sectionEntriesLeft = this.readVarUint32() >>> 0;
+        this._sectionEntriesLeft = this.readVarUint32();
         return this.readGlobalEntry();
       case SectionCode.Start:
         if (!this.hasVarIntBytes()) return false;
@@ -3658,20 +3658,20 @@ export class BinaryReader {
         return true;
       case SectionCode.Code:
         if (!this.hasVarIntBytes()) return false;
-        this._sectionEntriesLeft = this.readVarUint32() >>> 0;
+        this._sectionEntriesLeft = this.readVarUint32();
         this.state = BinaryReaderState.READING_FUNCTION_HEADER;
         return this.readFunctionBody();
       case SectionCode.Element:
         if (!this.hasVarIntBytes()) return false;
-        this._sectionEntriesLeft = this.readVarUint32() >>> 0;
+        this._sectionEntriesLeft = this.readVarUint32();
         return this.readElementEntry();
       case SectionCode.Data:
         if (!this.hasVarIntBytes()) return false;
-        this._sectionEntriesLeft = this.readVarUint32() >>> 0;
+        this._sectionEntriesLeft = this.readVarUint32();
         return this.readDataEntry();
       case SectionCode.Event:
         if (!this.hasVarIntBytes()) return false;
-        this._sectionEntriesLeft = this.readVarUint32() >>> 0;
+        this._sectionEntriesLeft = this.readVarUint32();
         return this.readEventEntry();
       case SectionCode.Custom:
         var customSectionName = bytesToString(currentSection.name);
@@ -3683,7 +3683,7 @@ export class BinaryReader {
         }
         if (customSectionName === "linking") {
           if (!this.hasVarIntBytes()) return false;
-          this._sectionEntriesLeft = this.readVarUint32() >>> 0;
+          this._sectionEntriesLeft = this.readVarUint32();
           return this.readLinkingEntry();
         }
         if (customSectionName === "sourceMappingURL") {
@@ -3827,7 +3827,7 @@ export class BinaryReader {
         return this.readNameEntry();
       case BinaryReaderState.RELOC_SECTION_HEADER:
         if (!this.hasVarIntBytes()) return false;
-        this._sectionEntriesLeft = this.readVarUint32() >>> 0;
+        this._sectionEntriesLeft = this.readVarUint32();
         return this.readRelocEntry();
       case BinaryReaderState.LINKING_SECTION_ENTRY:
         return this.readLinkingEntry();

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

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as Common from '../../../core/common/common.js';
+import * as WindowBoundsService from '../../../services/window_bounds/window_bounds.js';
 import * as CodeMirror from '../../../third_party/codemirror.next/codemirror.next.js';
 import * as LitHtml from '../../lit-html/lit-html.js';
 import * as CodeHighlighter from '../code_highlighter/code_highlighter.js';
@@ -25,6 +26,18 @@ export class TextEditor extends HTMLElement {
   private dynamicSettings: readonly DynamicSetting<unknown>[] = DynamicSetting.none;
   private activeSettingListeners: [Common.Settings.Setting<unknown>, (event: {data: unknown}) => void][] = [];
   private pendingState: CodeMirror.EditorState|undefined;
+  private lastScrollPos = {left: 0, top: 0};
+  private resizeTimeout = -1;
+  private devtoolsResizeObserver = new ResizeObserver(() => {
+    if (this.resizeTimeout < 0) {
+      this.resizeTimeout = window.setTimeout(() => {
+        this.resizeTimeout = -1;
+        if (this.activeEditor) {
+          CodeMirror.repositionTooltips(this.activeEditor);
+        }
+      }, 50);
+    }
+  });
 
   constructor(pendingState?: CodeMirror.EditorState) {
     super();
@@ -44,7 +57,14 @@ export class TextEditor extends HTMLElement {
         }
       },
     });
+    this.activeEditor.scrollDOM.scrollTop = this.lastScrollPos.top;
+    this.activeEditor.scrollDOM.scrollLeft = this.lastScrollPos.left;
+    this.activeEditor.scrollDOM.addEventListener('scroll', (event): void => {
+      this.lastScrollPos.left = (event.target as HTMLElement).scrollLeft;
+      this.lastScrollPos.top = (event.target as HTMLElement).scrollTop;
+    });
     this.ensureSettingListeners();
+    this.startObservingResize();
     return this.activeEditor;
   }
 
@@ -83,6 +103,7 @@ export class TextEditor extends HTMLElement {
   disconnectedCallback(): void {
     if (this.activeEditor) {
       this.pendingState = this.activeEditor.state;
+      this.devtoolsResizeObserver.disconnect();
       this.activeEditor.destroy();
       this.activeEditor = undefined;
       this.ensureSettingListeners();
@@ -121,6 +142,14 @@ export class TextEditor extends HTMLElement {
     }
   }
 
+  private startObservingResize(): void {
+    const devtoolsElement =
+        WindowBoundsService.WindowBoundsService.WindowBoundsServiceImpl.instance().getDevToolsBoundingElement();
+    if (devtoolsElement) {
+      this.devtoolsResizeObserver.observe(devtoolsElement);
+    }
+  }
+
   revealPosition(selection: CodeMirror.EditorSelection, highlight: boolean = true): void {
     const view = this.activeEditor;
     if (!view) {

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

@@ -4,6 +4,7 @@
 
 import * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';
+import * as WindowBoundsService from '../../../services/window_bounds/window_bounds.js';
 import * as CM from '../../../third_party/codemirror.next/codemirror.next.js';
 import * as CodeHighlighter from '../code_highlighter/code_highlighter.js';
 
@@ -68,7 +69,10 @@ export const tabMovesFocus = DynamicSetting.bool('textEditorTabMovesFocus', CM.k
   shift: (view: CM.EditorView): boolean => view.state.doc.length ? CM.indentLess(view) : false,
 }]));
 
-export const autocompletion = CM.autocompletion({icons: false});
+export const autocompletion = CM.autocompletion({
+  icons: false,
+  optionClass: (option: CM.Completion): string => option.type === 'secondary' ? 'cm-secondaryCompletion' : '',
+});
 
 export const sourcesAutocompletion = DynamicSetting.bool('textEditorAutocompletion', autocompletion);
 
@@ -185,7 +189,6 @@ const baseKeymap = CM.keymap.of([
   {key: 'Mod-d', run: CM.selectNextOccurrence},
   {key: 'Alt-ArrowLeft', mac: 'Ctrl-ArrowLeft', run: CM.cursorSubwordBackward, shift: CM.selectSubwordBackward},
   {key: 'Alt-ArrowRight', mac: 'Ctrl-ArrowRight', run: CM.cursorSubwordForward, shift: CM.selectSubwordForward},
-  ...CM.closeBracketsKeymap,
   ...CM.standardKeymap,
   ...CM.historyKeymap,
 ]);
@@ -201,6 +204,16 @@ export function theme(): CM.Extension {
   return [editorTheme, themeIsDark() ? dummyDarkTheme : []];
 }
 
+let sideBarElement: HTMLElement|null = null;
+
+function getTooltipSpace(): DOMRect {
+  if (!sideBarElement) {
+    sideBarElement =
+        WindowBoundsService.WindowBoundsService.WindowBoundsServiceImpl.instance().getDevToolsBoundingElement();
+  }
+  return sideBarElement.getBoundingClientRect();
+}
+
 export function baseConfiguration(text: string): CM.Extension {
   return [
     theme(),
@@ -210,7 +223,6 @@ export function baseConfiguration(text: string): CM.Extension {
     CM.EditorState.allowMultipleSelections.of(true),
     CM.indentOnInput(),
     CodeHighlighter.CodeHighlighter.highlightStyle,
-    CM.closeBrackets(),
     baseKeymap,
     tabMovesFocus.instance(),
     bracketMatching.instance(),
@@ -218,10 +230,18 @@ export function baseConfiguration(text: string): CM.Extension {
     CM.Prec.lowest(CM.EditorView.contentAttributes.of({'aria-label': i18nString(UIStrings.codeEditor)})),
     detectLineSeparator(text),
     autocompletion,
-    CM.tooltips({parent: getTooltipHost() as unknown as HTMLElement}),
+    CM.tooltips({
+      parent: getTooltipHost() as unknown as HTMLElement,
+      tooltipSpace: getTooltipSpace,
+    }),
   ];
 }
 
+export const closeBrackets: CM.Extension = [
+  CM.closeBrackets(),
+  CM.keymap.of(CM.closeBracketsKeymap),
+];
+
 // Root editor tooltips at the top of the document, creating a special
 // element with the editor styles mounted in it for them. This is
 // annoying, but necessary because a scrollable parent node clips them
@@ -287,12 +307,16 @@ export const showCompletionHint = CM.ViewPlugin.fromClass(class {
   }
 
   topCompletion(state: CM.EditorState): string|null {
-    const completions = CM.currentCompletions(state);
-    if (!completions.length) {
+    const completion = CM.selectedCompletion(state);
+    if (!completion) {
       return null;
     }
-    const {label} = completions[0];
-    if (label.length > 100 || label.indexOf('\n') > -1) {
+    let {label, apply} = completion;
+    if (typeof apply === 'string') {
+      label = apply;
+      apply = undefined;
+    }
+    if (apply || label.length > 100 || label.indexOf('\n') > -1 || completion.type === 'secondary') {
       return null;
     }
     const pos = state.selection.main.head;
@@ -300,13 +324,11 @@ export const showCompletionHint = CM.ViewPlugin.fromClass(class {
     if (pos !== lineBefore.to) {
       return null;
     }
-    const textBefore = lineBefore.text.slice(0, pos - lineBefore.from);
-    for (let i = label.length - 1; i > 0; i--) {
-      if (textBefore.endsWith(label.slice(0, i)) && !/\w/.test(textBefore.charAt(textBefore.length - i - 1))) {
-        return label.slice(i);
-      }
+    const wordBefore = /[\w$]+$/.exec(lineBefore.text);
+    if (wordBefore && !label.startsWith(wordBefore[0])) {
+      return null;
     }
-    return null;
+    return label.slice(wordBefore ? wordBefore[0].length : 0);
   }
 }, {decorations: p => p.decorations});
 

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

@@ -90,7 +90,7 @@ export const enum QueryType {
   PropertyExpression = 2,
 }
 
-export function getQueryType(tree: CodeMirror.Tree, pos: number): {
+export function getQueryType(tree: CodeMirror.Tree, pos: number, doc: CodeMirror.Text): {
   type: QueryType,
   from?: number,
   relatedNode?: CodeMirror.SyntaxNode,
@@ -101,13 +101,15 @@ export function getQueryType(tree: CodeMirror.Tree, pos: number): {
     return null;
   }
 
-  if (node.name === 'VariableName') {
-    return {type: QueryType.Expression, from: node.from};
-  }
   if (node.name === 'PropertyName') {
     return parent?.name !== 'MemberExpression' ? null :
                                                  {type: QueryType.PropertyName, from: node.from, relatedNode: parent};
   }
+  if (node.name === 'VariableName' ||
+      // Treat alphabetic keywords as variables
+      !node.firstChild && node.to - node.from < 20 && !/[^a-z]/.test(doc.sliceString(node.from, node.to))) {
+    return {type: QueryType.Expression, from: node.from};
+  }
   if (node.name === 'String') {
     const parent = node.parent;
     return parent?.name === 'MemberExpression' && parent.childBefore(node.from)?.name === '[' ?
@@ -134,8 +136,8 @@ export function getQueryType(tree: CodeMirror.Tree, pos: number): {
 
 export async function javascriptCompletionSource(cx: CodeMirror.CompletionContext):
     Promise<CodeMirror.CompletionResult|null> {
-  const query = getQueryType(CodeMirror.syntaxTree(cx.state), cx.pos);
-  if (!query || query.from === undefined && !cx.explicit) {
+  const query = getQueryType(CodeMirror.syntaxTree(cx.state), cx.pos, cx.state.doc);
+  if (!query || query.from === undefined && !cx.explicit && query.type === QueryType.Expression) {
     return null;
   }
 
@@ -162,7 +164,8 @@ export async function javascriptCompletionSource(cx: CodeMirror.CompletionContex
     if (!objectExpr) {
       return null;
     }
-    result = await completeProperties(cx.state.sliceDoc(objectExpr.from, objectExpr.to), quote);
+    result = await completeProperties(
+        cx.state.sliceDoc(objectExpr.from, objectExpr.to), quote, cx.state.sliceDoc(cx.pos, cx.pos + 1) === ']');
   } else {
     return null;
   }
@@ -250,6 +253,7 @@ class PropertyCache {
 async function completeProperties(
     expression: string,
     quoted?: string,
+    hasBracket: boolean = false,
     ): Promise<CompletionSet> {
   const cache = PropertyCache.instance();
   if (!quoted) {
@@ -262,7 +266,7 @@ async function completeProperties(
   if (!context) {
     return new CompletionSet();
   }
-  const result = completePropertiesInner(expression, context, quoted);
+  const result = completePropertiesInner(expression, context, quoted, hasBracket);
   if (!quoted) {
     cache.set(expression, result);
   }
@@ -275,6 +279,7 @@ async function completePropertiesInner(
     expression: string,
     context: SDK.RuntimeModel.ExecutionContext,
     quoted?: string,
+    hasBracket: boolean = false,
     ): Promise<CompletionSet> {
   const result = new CompletionSet();
   if (!context) {
@@ -313,7 +318,7 @@ async function completePropertiesInner(
           label,
           type: prop.value?.type === 'function' ? functionType : otherType,
         };
-        if (quoted) {
+        if (quoted && !hasBracket) {
           completion.apply = label + ']';
         }
         if (!prop.isOwn) {

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

@@ -18,7 +18,7 @@ export const editorTheme = CM.EditorView.theme({
     fontSize: 'var(--source-code-font-size)',
   },
 
-  '.cm-panels, .cm-tooltip': {
+  '.cm-panels': {
     backgroundColor: 'var(--color-background-elevation-1)',
   },
 
@@ -110,25 +110,50 @@ export const editorTheme = CM.EditorView.theme({
     color: 'var(--color-text-secondary)',
   },
 
+  '.cm-tooltip': {
+    boxShadow: 'var(--drop-shadow)',
+    backgroundColor: 'var(--color-background-elevation-1)',
+  },
+
   '.cm-argumentHints': {
     pointerEvents: 'none',
     padding: '0 4px',
     whiteSpace: 'nowrap',
     lineHeight: '20px',
     marginBottom: '4px',
-    boxShadow: 'var(--drop-shadow)',
-    backgroundColor: 'var(--color-background)',
     width: 'fit-content',
   },
 
   '.cm-tooltip.cm-tooltip-autocomplete > ul': {
+    backgroundColor: 'var(--color-background)',
     minWidth: '16em',
+    '& > li.cm-secondaryCompletion': {
+      display: 'flex',
+      backgroundColor: 'var(--color-background-elevation-1)',
+      justifyContent: 'space-between',
+      '&::before': {
+        content: '">"',
+        fontWeight: 'bold',
+        color: 'var(--color-primary-variant)',
+        marginRight: '5px',
+      },
+    },
+    '& > li:hover': {
+      backgroundColor: 'var(--item-hover-color)',
+    },
     '& > li[aria-selected]': {
       backgroundColor: 'var(--color-selected-option-background)',
-      color: 'var(--color-selected-option)',
+      '&, &.cm-secondaryCompletion::before': {
+        color: 'var(--color-selected-option)',
+      },
     },
   },
 
+  '.cm-completionMatchedText': {
+    textDecoration: 'none',
+    fontWeight: 'bold',
+  },
+
   '.cm-highlightedLine': {
     animation: 'cm-fading-highlight 2s 0s',
   },

package/front_end/ui/components/tree_outline/TreeOutline.ts

@@ -166,6 +166,14 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
     await this.render();
   }
 
+  /**
+   * Collapses all nodes in the tree.
+   */
+  async collapseAllNodes(): Promise<void> {
+    this.nodeExpandedMap.clear();
+    await this.render();
+  }
+
   /**
    * Takes a TreeNode, expands the outline to reveal it, and focuses it.
    */