chrome-devtools-frontend 1.0.943986 → 1.0.944427

package/front_end/third_party/codemirror.next/codemirror.next.d.ts

@@ -3537,6 +3537,12 @@ interface CompletionConfig {
     */
     defaultKeymap?: boolean;
     /**
+    By default, completions are shown below the cursor when there is
+    space. Setting this to true will make the extension put the
+    completions above the cursor when possible.
+    */
+    aboveCursor?: boolean;
+    /**
     This can be used to add additional CSS classes to completion
     options.
     */
@@ -3739,6 +3745,14 @@ interface CompletionResult {
 Accept the current completion.
 */
 declare const acceptCompletion: Command;
+/**
+Explicitly start autocompletion.
+*/
+declare const startCompletion: Command;
+/**
+Close the currently active completion.
+*/
+declare const closeCompletion: Command;
 
 /**
 A completion source that will scan the document for words (using a
@@ -3755,6 +3769,10 @@ declare function autocompletion(config?: CompletionConfig): Extension;
 Returns the available completions as an array.
 */
 declare function currentCompletions(state: EditorState): readonly Completion[];
+/**
+Return the currently selected completion, if any.
+*/
+declare function selectedCompletion(state: EditorState): Completion | null;
 
 /**
 Describes an element in your XML document schema.
@@ -5484,6 +5502,19 @@ declare function tooltips(config?: {
     those.
     */
     parent?: HTMLElement;
+    /**
+    By default, when figuring out whether there is room for a
+    tooltip at a given position, the extension considers the entire
+    space between 0,0 and `innerWidth`,`innerHeight` to be available
+    for showing tooltips. You can provide a function here that
+    returns an alternative rectangle.
+    */
+    tooltipSpace?: (view: EditorView) => {
+        top: number;
+        left: number;
+        bottom: number;
+        right: number;
+    };
 }): Extension;
 /**
 Describes a tooltip. Values of this type, when provided through
@@ -5574,4 +5605,4 @@ declare function shell(): Promise<StreamLanguage<unknown>>;
 declare function wast(): Promise<typeof _codemirror_lang_wast>;
 declare function xml(): Promise<typeof _codemirror_lang_xml>;
 
-export { Annotation, AnnotationType, ChangeDesc, ChangeSet, ChangeSpec, Command, Compartment, Completion, CompletionContext, CompletionResult, CompletionSource, Decoration, DecorationSet, EditorSelection, EditorState, EditorStateConfig, EditorView, Extension, Facet, GutterMarker, HighlightStyle, KeyBinding, LRParser, Language, LanguageSupport, Line$1 as Line, MatchDecorator, NodeProp, NodeSet, NodeType, Panel, Parser, Prec, Range, RangeSet, RangeSetBuilder, SelectionRange, StateEffect, StateEffectType, StateField, StreamLanguage, StreamParser, StringStream, StyleModule, SyntaxNode, Tag, TagStyle, Text, TextIterator, Tooltip, TooltipView, Transaction, TransactionSpec, Tree, TreeCursor, ViewPlugin, ViewUpdate, WidgetType, acceptCompletion, autocompletion, bracketMatching, clojure, closeBrackets, closeBracketsKeymap, codeFolding, coffeescript, completeAnyWord, cpp, index_d$2 as css, currentCompletions, cursorMatchingBracket, cursorSubwordBackward, cursorSubwordForward, drawSelection, ensureSyntaxTree, foldGutter, foldKeymap, gutter, gutters, highlightSpecialChars, highlightTree, history, historyKeymap, index_d$1 as html, ifNotIn, indentLess, indentMore, indentOnInput, indentUnit, insertNewlineAndIndent, java, index_d as javascript, json, keymap, lineNumberMarkers, lineNumbers, markdown, php, placeholder, python, redo, redoSelection, scrollPastEnd, selectMatchingBracket, selectNextOccurrence, selectSubwordBackward, selectSubwordForward, shell, showPanel, showTooltip, standardKeymap, syntaxTree, tags, toggleComment, tooltips, undo, undoSelection, wast, xml };
+export { Annotation, AnnotationType, ChangeDesc, ChangeSet, ChangeSpec, Command, Compartment, Completion, CompletionContext, CompletionResult, CompletionSource, Decoration, DecorationSet, EditorSelection, EditorState, EditorStateConfig, EditorView, Extension, Facet, GutterMarker, HighlightStyle, KeyBinding, LRParser, Language, LanguageSupport, Line$1 as Line, MatchDecorator, NodeProp, NodeSet, NodeType, Panel, Parser, Prec, Range, RangeSet, RangeSetBuilder, SelectionRange, StateEffect, StateEffectType, StateField, StreamLanguage, StreamParser, StringStream, StyleModule, SyntaxNode, Tag, TagStyle, Text, TextIterator, Tooltip, TooltipView, Transaction, TransactionSpec, Tree, TreeCursor, ViewPlugin, ViewUpdate, WidgetType, acceptCompletion, autocompletion, bracketMatching, clojure, closeBrackets, closeBracketsKeymap, closeCompletion, codeFolding, coffeescript, completeAnyWord, cpp, index_d$2 as css, currentCompletions, cursorMatchingBracket, cursorSubwordBackward, cursorSubwordForward, drawSelection, ensureSyntaxTree, foldGutter, foldKeymap, gutter, gutters, highlightSpecialChars, highlightTree, history, historyKeymap, index_d$1 as html, ifNotIn, indentLess, indentMore, indentOnInput, indentUnit, insertNewlineAndIndent, java, index_d as javascript, json, keymap, lineNumberMarkers, lineNumbers, markdown, php, placeholder, python, redo, redoSelection, scrollPastEnd, selectMatchingBracket, selectNextOccurrence, selectSubwordBackward, selectSubwordForward, selectedCompletion, shell, showPanel, showTooltip, standardKeymap, startCompletion, syntaxTree, tags, toggleComment, tooltips, undo, undoSelection, wast, xml };

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

@@ -1,2 +1,2 @@
-export{$ as insertNewlineAndIndent,_ as indentMore,A as java,a$ as StyleModule,a0 as selectMatchingBracket,a1 as selectSubwordBackward,a2 as selectSubwordForward,a3 as standardKeymap,a4 as toggleComment,a5 as codeFolding,a6 as foldGutter,a7 as foldKeymap,a8 as gutter,a9 as GutterMarker,a_ as TreeCursor,aA as ChangeDesc,aa as gutters,aB as ChangeSet,ab as lineNumberMarkers,aC as Compartment,ac as lineNumbers,aD as EditorState,ad as HighlightStyle,aE as Facet,ae as highlightTree,aF as SelectionRange,af as Tag,aG as StateEffect,ag as history,aH as StateEffectType,ah as historyKeymap,aI as StateField,ai as redo,aJ as Transaction,aj as redoSelection,aK as StreamLanguage,ak as undo,aL as StringStream,al as undoSelection,aM as Line,am as css,aN as Text,an as html,ao as javascript,aO as showTooltip,ap as ensureSyntaxTree,aP as tooltips,aQ as Decoration,aq as indentOnInput,aR as drawSelection,ar as indentUnit,aS as EditorView,as as bracketMatching,aT as highlightSpecialChars,at as showPanel,aU as MatchDecorator,au as Range,av as RangeSet,aV as placeholder,aw as RangeSetBuilder,aW as scrollPastEnd,aX as ViewPlugin,ax as selectNextOccurrence,ay as Annotation,aY as ViewUpdate,az as AnnotationType,aZ as WidgetType,B as json,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 completeAnyWord,o as keymap,P as Parser,Q as CompletionContext,R as currentCompletions,S as ifNotIn,T as Tree,t as tags,U as closeBrackets,V as closeBracketsKeymap,W as cursorMatchingBracket,x as clojure,X as cursorSubwordBackward,y as coffeescript,Y as cursorSubwordForward,z as cpp,Z as indentLess}from"./chunk/codemirror.js";
+export{$ as cursorSubwordForward,_ as cursorSubwordBackward,A as java,a$ as ViewUpdate,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 ViewPlugin,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 Decoration,at as indentOnInput,aU as drawSelection,au as indentUnit,aV as EditorView,av as bracketMatching,aW as highlightSpecialChars,aw as showPanel,aX as MatchDecorator,ax as Range,ay as RangeSet,aY as placeholder,az as RangeSetBuilder,aZ as scrollPastEnd,B as json,b0 as WidgetType,b1 as TreeCursor,b2 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,7 +3,7 @@
   "version": "0.0.1",
   "private": true,
   "dependencies": {
-    "@codemirror/autocomplete": "0.19.5",
+    "@codemirror/autocomplete": "0.19.8",
     "@codemirror/closebrackets": "0.19.0",
     "@codemirror/commands": "0.19.5",
     "@codemirror/comment": "0.19.0",
@@ -28,11 +28,11 @@
     "@codemirror/panel": "0.19.0",
     "@codemirror/rangeset": "0.19.2",
     "@codemirror/search": "0.19.2",
-    "@codemirror/state": "0.19.6",
+    "@codemirror/state": "0.19.5",
     "@codemirror/stream-parser": "0.19.2",
     "@codemirror/text": "0.19.5",
-    "@codemirror/tooltip": "0.19.6",
-    "@codemirror/view": "0.19.16",
+    "@codemirror/tooltip": "0.19.9",
+    "@codemirror/view": "0.19.20",
     "@lezer/common": "0.15.8",
     "@rollup/plugin-node-resolve": "^13.0.4",
     "rollup-plugin-dts": "^4.0.0",

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

@@ -68,7 +68,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 +188,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 +203,15 @@ export function theme(): CM.Extension {
   return [editorTheme, themeIsDark() ? dummyDarkTheme : []];
 }
 
+let sideBarElement: HTMLElement|null = null;
+
+function getTooltipSpace(): DOMRect {
+  if (!sideBarElement) {
+    sideBarElement = document.querySelector('[slot="insertion-point-sidebar"]');
+  }
+  return (sideBarElement || document.body).getBoundingClientRect();
+}
+
 export function baseConfiguration(text: string): CM.Extension {
   return [
     theme(),
@@ -210,7 +221,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 +228,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 +305,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 +322,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/legacy/components/source_frame/SourceFrame.ts

@@ -206,6 +206,7 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
     return [
       CodeMirror.EditorView.updateListener.of(update => this.dispatchEventToListeners(Events.EditorUpdate, update)),
       TextEditor.Config.baseConfiguration(doc),
+      TextEditor.Config.closeBrackets,
       TextEditor.Config.sourcesAutocompletion.instance(),
       TextEditor.Config.showWhitespace.instance(),
       TextEditor.Config.allowScrollPastEof.instance(),

package/front_end/ui/legacy/components/utils/Linkifier.ts

@@ -184,17 +184,9 @@ export class Linkifier implements SDK.TargetManager.Observer {
       }
       info.liveLocation = null;
       Linkifier.unbindUILocation(anchor);
-      const fallback = (info.fallback as HTMLElement | null);
+      const fallback = info.fallback;
       if (fallback) {
-        // @ts-ignore
-        anchor.href = fallback.href;
-        UI.Tooltip.Tooltip.install(anchor, fallback.title);
-        anchor.className = fallback.className;
-        anchor.textContent = fallback.textContent;
-        const fallbackInfo = infoByAnchor.get(fallback);
-        if (fallbackInfo) {
-          infoByAnchor.set(anchor, fallbackInfo);
-        }
+        anchor.replaceWith(fallback);
       }
     }
   }
@@ -249,15 +241,11 @@ export class Linkifier implements SDK.TargetManager.Observer {
     // Not initialising the anchor element with 'zero width space' (\u200b) causes a crash
     // in the layout engine.
     // TODO(szuend): Remove comment and workaround once the crash is fixed.
-    const anchor = Linkifier.createLink(
+    const {link, linkInfo} = Linkifier.createLink(
         fallbackAnchor && fallbackAnchor.textContent ? fallbackAnchor.textContent : '\u200b', className,
         createLinkOptions);
-    const info = Linkifier.linkInfo(anchor);
-    if (!info) {
-      return fallbackAnchor;
-    }
-    info.enableDecorator = this.useLinkDecorator;
-    info.fallback = fallbackAnchor;
+    linkInfo.enableDecorator = this.useLinkDecorator;
+    linkInfo.fallback = fallbackAnchor;
 
     const pool = this.locationPoolByTarget.get(rawLocation.debuggerModel.target());
     if (!pool) {
@@ -268,10 +256,10 @@ export class Linkifier implements SDK.TargetManager.Observer {
 
     const currentOnLiveLocationUpdate = this.onLiveLocationUpdate;
     Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()
-        .createLiveLocation(rawLocation, this.updateAnchor.bind(this, anchor, linkDisplayOptions), pool)
+        .createLiveLocation(rawLocation, this.updateAnchor.bind(this, link, linkDisplayOptions), pool)
         .then(liveLocation => {
           if (liveLocation) {
-            info.liveLocation = liveLocation;
+            linkInfo.liveLocation = liveLocation;
             // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
             // @ts-expect-error
             currentOnLiveLocationUpdate();
@@ -279,8 +267,8 @@ export class Linkifier implements SDK.TargetManager.Observer {
         });
 
     const anchors = (this.anchorsByTarget.get(rawLocation.debuggerModel.target()) as Element[]);
-    anchors.push(anchor);
-    return anchor;
+    anchors.push(link);
+    return link;
   }
 
   linkifyScriptLocation(
@@ -327,68 +315,61 @@ export class Linkifier implements SDK.TargetManager.Observer {
         target, callFrame.scriptId, callFrame.url, callFrame.lineNumber, linkifyOptions);
   }
 
-  linkifyStackTraceTopFrame(target: SDK.Target.Target, stackTrace: Protocol.Runtime.StackTrace, classes?: string):
+  linkifyStackTraceTopFrame(target: SDK.Target.Target, stackTrace: Protocol.Runtime.StackTrace, className?: string):
       HTMLElement {
-    console.assert(Boolean(stackTrace.callFrames) && Boolean(stackTrace.callFrames.length));
+    console.assert(stackTrace.callFrames.length > 0);
 
-    const topFrame = stackTrace.callFrames[0];
-    const fallbackAnchor = Linkifier.linkifyURL(topFrame.url, {
-      className: classes,
-      lineNumber: topFrame.lineNumber,
-      columnNumber: topFrame.columnNumber,
+    const {url, lineNumber, columnNumber} = stackTrace.callFrames[0];
+    const fallbackAnchor = Linkifier.linkifyURL(url, {
+      className,
+      lineNumber,
+      columnNumber,
       showColumnNumber: false,
       inlineFrameIndex: 0,
       maxLength: this.maxLength,
       text: undefined,
-      preventClick: undefined,
+      preventClick: true,
       tabStop: undefined,
       bypassURLTrimming: undefined,
     });
-    if (target.isDisposed()) {
-      return fallbackAnchor;
-    }
 
-    const debuggerModel = target.model(SDK.DebuggerModel.DebuggerModel);
-    if (!debuggerModel) {
-      return fallbackAnchor;
-    }
-    const rawLocations = debuggerModel.createRawLocationsByStackTrace(stackTrace);
-    if (rawLocations.length === 0) {
+    // The contract is that disposed targets don't have a LiveLocationPool
+    // associated, whereas all active targets have one such pool. This ensures
+    // that the fallbackAnchor is only ever used when the target was disposed.
+    const pool = this.locationPoolByTarget.get(target);
+    if (!pool) {
+      console.assert(target.isDisposed());
       return fallbackAnchor;
     }
+    console.assert(!target.isDisposed());
+
+    // All targets that can report stack traces also have a debugger model.
+    const debuggerModel = target.model(SDK.DebuggerModel.DebuggerModel) as SDK.DebuggerModel.DebuggerModel;
 
     // Not initialising the anchor element with 'zero width space' (\u200b) causes a crash
     // in the layout engine.
     // TODO(szuend): Remove comment and workaround once the crash is fixed.
-    const anchor = Linkifier.createLink('\u200b', classes || '');
-    const info = Linkifier.linkInfo(anchor);
-    if (!info) {
-      return fallbackAnchor;
-    }
-    info.enableDecorator = this.useLinkDecorator;
-    info.fallback = fallbackAnchor;
-
-    const pool = this.locationPoolByTarget.get(target);
-    if (!pool) {
-      return fallbackAnchor;
-    }
+    const {link, linkInfo} = Linkifier.createLink('\u200b', className ?? '');
+    linkInfo.enableDecorator = this.useLinkDecorator;
+    linkInfo.fallback = fallbackAnchor;
 
     const linkDisplayOptions = {showColumnNumber: false};
 
     const currentOnLiveLocationUpdate = this.onLiveLocationUpdate;
     Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()
         .createStackTraceTopFrameLiveLocation(
-            rawLocations, this.updateAnchor.bind(this, anchor, linkDisplayOptions), pool)
+            debuggerModel.createRawLocationsByStackTrace(stackTrace),
+            this.updateAnchor.bind(this, link, linkDisplayOptions), pool)
         .then(liveLocation => {
-          info.liveLocation = liveLocation;
+          linkInfo.liveLocation = liveLocation;
           // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
           // @ts-expect-error
           currentOnLiveLocationUpdate();
         });
 
     const anchors = (this.anchorsByTarget.get(target) as Element[]);
-    anchors.push(anchor);
-    return anchor;
+    anchors.push(link);
+    return link;
   }
 
   linkifyCSSLocation(rawLocation: SDK.CSSModel.CSSLocation, classes?: string): Element {
@@ -403,33 +384,29 @@ export class Linkifier implements SDK.TargetManager.Observer {
     // Not initialising the anchor element with 'zero width space' (\u200b) causes a crash
     // in the layout engine.
     // TODO(szuend): Remove comment and workaround once the crash is fixed.
-    const anchor = (Linkifier.createLink('\u200b', classes || '', createLinkOptions) as HTMLElement);
-    const info = Linkifier.linkInfo(anchor);
-    if (!info) {
-      return anchor;
-    }
-    info.enableDecorator = this.useLinkDecorator;
+    const {link, linkInfo} = Linkifier.createLink('\u200b', classes || '', createLinkOptions);
+    linkInfo.enableDecorator = this.useLinkDecorator;
 
     const pool = this.locationPoolByTarget.get(rawLocation.cssModel().target());
     if (!pool) {
-      return anchor;
+      return link;
     }
 
     const linkDisplayOptions = {showColumnNumber: false};
 
     const currentOnLiveLocationUpdate = this.onLiveLocationUpdate;
     Bindings.CSSWorkspaceBinding.CSSWorkspaceBinding.instance()
-        .createLiveLocation(rawLocation, this.updateAnchor.bind(this, anchor, linkDisplayOptions), pool)
+        .createLiveLocation(rawLocation, this.updateAnchor.bind(this, link, linkDisplayOptions), pool)
         .then(liveLocation => {
-          info.liveLocation = liveLocation;
+          linkInfo.liveLocation = liveLocation;
           // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
           // @ts-expect-error
           currentOnLiveLocationUpdate();
         });
 
     const anchors = (this.anchorsByTarget.get(rawLocation.cssModel().target()) as Element[]);
-    anchors.push(anchor);
-    return anchor;
+    anchors.push(link);
+    return link;
   }
 
   reset(): void {
@@ -557,16 +534,12 @@ export class Linkifier implements SDK.TargetManager.Observer {
     }
     const title = linkText !== url ? url : '';
     const linkOptions = {maxLength, title, href: url, preventClick, tabStop: options.tabStop, bypassURLTrimming};
-    const link = Linkifier.createLink(linkText, className, linkOptions);
-    const info = Linkifier.linkInfo(link);
-    if (!info) {
-      return link;
-    }
+    const {link, linkInfo} = Linkifier.createLink(linkText, className, linkOptions);
     if (lineNumber) {
-      info.lineNumber = lineNumber;
+      linkInfo.lineNumber = lineNumber;
     }
     if (columnNumber) {
-      info.columnNumber = columnNumber;
+      linkInfo.columnNumber = columnNumber;
     }
     return link;
   }
@@ -582,16 +555,13 @@ export class Linkifier implements SDK.TargetManager.Observer {
       tabStop: undefined,
       bypassURLTrimming: undefined,
     };
-    const link = Linkifier.createLink(text, className || '', createLinkOptions);
-    const linkInfo = Linkifier.linkInfo(link);
-    if (!linkInfo) {
-      return link;
-    }
+    const {link, linkInfo} = Linkifier.createLink(text, className || '', createLinkOptions);
     linkInfo.revealable = revealable;
     return link;
   }
 
-  private static createLink(text: string|HTMLElement, className: string, options?: _CreateLinkOptions): HTMLElement {
+  private static createLink(text: string|HTMLElement, className: string, options?: _CreateLinkOptions):
+      {link: HTMLElement, linkInfo: _LinkInfo} {
     options = options || {
       maxLength: undefined,
       title: undefined,
@@ -654,7 +624,7 @@ export class Linkifier implements SDK.TargetManager.Observer {
     }
     UI.ARIAUtils.markAsLink(link);
     link.tabIndex = tabStop ? 0 : -1;
-    return link;
+    return {link, linkInfo};
   }
 
   private static setTrimmedText(link: Element, text: string, maxLength?: number): void {

package/front_end/ui/legacy/themeColors.css

@@ -167,6 +167,7 @@
   --color-selected-option: #fff;
   --color-selected-option-background: #1a73e8;
   --color-highlighted-line: rgb(255 255 0 / 50%);
+  --color-completion-hover: rgb(56 121 217 / 10%);
   --color-search-match-border: rgb(128 128 128);
   --color-selected-search-match: var(--color-text-primary);
   --color-selected-search-match-background: rgb(241 234 0);
@@ -307,6 +308,7 @@
   --color-selected-option: #fff;
   --color-selected-option-background: #0e639c;
   --color-highlighted-line: hsl(133deg 100% 30% / 50%);
+  --color-completion-hover: rgb(56 121 217 / 10%);
   --color-search-match-border: rgb(128 128 128);
   --color-selected-search-match: #eee;
   --color-selected-search-match-background: hsl(133deg 100% 30%);

package/package.json

@@ -55,5 +55,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.943986"
+  "version": "1.0.944427"
 }