chrome-devtools-frontend 1.0.1576287 → 1.0.1576915

package/front_end/panels/network/RequestPayloadView.ts

@@ -49,8 +49,10 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import requestPayloadTreeStyles from './requestPayloadTree.css.js';
 import requestPayloadViewStyles from './requestPayloadView.css.js';
+import {ShowMoreDetailsWidget} from './ShowMoreDetailsWidget.js';
 
 const {classMap} = Directives;
+const {widgetConfig} = UI.Widget;
 const UIStrings = {
   /**
    * @description A context menu item Payload View of the Network panel to copy a parsed value.
@@ -77,10 +79,6 @@ const UIStrings = {
    * @description Text in Request Payload View of the Network panel
    */
   formData: 'Form Data',
-  /**
-   * @description Text to show more content
-   */
-  showMore: 'Show more',
   /**
    * @description Text for toggling the view of payload data (e.g. query string parameters) from source to parsed in the payload tab
    */
@@ -134,7 +132,7 @@ export class RequestPayloadView extends UI.Widget.VBox {
 
     this.queryStringCategory = new Category(root, 'query-string');
     this.formDataCategory = new Category(root, 'form-data');
-    this.requestPayloadCategory = new Category(root, 'request-payload', i18nString(UIStrings.requestPayload));
+    this.requestPayloadCategory = new Category(root, 'request-payload');
   }
 
   override wasShown(): void {
@@ -200,45 +198,16 @@ export class RequestPayloadView extends UI.Widget.VBox {
     }
   }
 
-  private populateTreeElementWithSourceText(treeElement: UI.TreeOutline.TreeElement, sourceText: string|null): void {
-    const MAX_LENGTH = 3000;
-    const text = (sourceText || '').trim();
-    const trim = text.length > MAX_LENGTH;
-
-    const sourceTextElement = document.createElement('span');
-    sourceTextElement.classList.add('payload-value');
-    sourceTextElement.classList.add('source-code');
-    sourceTextElement.textContent = trim ? text.substr(0, MAX_LENGTH) : text;
-
-    const sourceTreeElement = new UI.TreeOutline.TreeElement(sourceTextElement);
+  private populateTreeElementWithSourceText(treeElement: UI.TreeOutline.TreeElement, text: string): void {
+    const sourceTreeElement = new UI.TreeOutline.TreeElement();
 
     treeElement.removeChildren();
     treeElement.appendChild(sourceTreeElement);
     this.addEntryContextMenuHandler(sourceTreeElement, i18nString(UIStrings.copyPayload), 'copy-payload', () => text);
-    if (!trim) {
-      return;
-    }
-
-    const showMoreButton = new Buttons.Button.Button();
-    showMoreButton.data = {variant: Buttons.Button.Variant.OUTLINED, jslogContext: 'show-more'};
-    showMoreButton.innerText = i18nString(UIStrings.showMore);
-    showMoreButton.classList.add('request-payload-show-more-button');
-
-    function showMore(): void {
-      showMoreButton.remove();
-      sourceTextElement.textContent = text;
-      sourceTreeElement.listItemElement.removeEventListener('contextmenu', onContextMenuShowMore);
-    }
-    showMoreButton.addEventListener('click', showMore);
-
-    function onContextMenuShowMore(event: Event): void {
-      const contextMenu = new UI.ContextMenu.ContextMenu(event);
-      const section = contextMenu.newSection();
-      section.appendItem(i18nString(UIStrings.showMore), showMore, {jslogContext: 'show-more'});
-      void contextMenu.show();
-    }
-    sourceTreeElement.listItemElement.addEventListener('contextmenu', onContextMenuShowMore);
-    sourceTextElement.appendChild(showMoreButton);
+    render(
+        html`<devtools-widget class='payload-value source-code'
+           .widgetConfig=${widgetConfig(ShowMoreDetailsWidget, {text})}></devtools-widget>`,
+        sourceTreeElement.listItemElement);
   }
 
   private refreshParams(
@@ -306,7 +275,7 @@ export class RequestPayloadView extends UI.Widget.VBox {
 
     paramsTreeElement.removeChildren();
     if (shouldViewSource) {
-      this.populateTreeElementWithSourceText(paramsTreeElement, sourceText);
+      this.populateTreeElementWithSourceText(paramsTreeElement, (sourceText ?? '').trim());
       paramsTreeElement.listItemElement.addEventListener('contextmenu', viewParsedContextMenu);
     } else {
       this.populateTreeElementWithParsedParameters(paramsTreeElement, params);
@@ -363,25 +332,6 @@ export class RequestPayloadView extends UI.Widget.VBox {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   private refreshRequestJSONPayload(parsedObject: any, sourceText: string): void {
     const rootListItem = this.requestPayloadCategory;
-    rootListItem.removeChildren();
-
-    const rootListItemElement = rootListItem.listItemElement;
-    rootListItemElement.removeChildren();
-    rootListItemElement.createChild('div', 'selection fill');
-    UI.UIUtils.createTextChild(rootListItemElement, this.requestPayloadCategory.title.toString());
-
-    if (viewSourceForItems.has(rootListItem)) {
-      this.appendJSONPayloadSource(rootListItem, parsedObject, sourceText);
-    } else {
-      this.appendJSONPayloadParsed(rootListItem, parsedObject, sourceText);
-    }
-  }
-
-  // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private appendJSONPayloadSource(rootListItem: Category, parsedObject: any, sourceText: string): void {
-    const rootListItemElement = rootListItem.listItemElement;
-    this.populateTreeElementWithSourceText(rootListItem, sourceText);
 
     const viewParsed = function(this: RequestPayloadView, event: Event): void {
       rootListItemElement.removeEventListener('contextmenu', viewParsedContextMenu);
@@ -390,9 +340,6 @@ export class RequestPayloadView extends UI.Widget.VBox {
       event.consume();
     };
 
-    const viewParsedButton = this.createViewSourceToggle(/* viewSource */ true, viewParsed.bind(this));
-    rootListItemElement.appendChild(viewParsedButton);
-
     const viewParsedContextMenu = (event: Event): void => {
       if (!rootListItem.expanded) {
         return;
@@ -403,27 +350,6 @@ export class RequestPayloadView extends UI.Widget.VBox {
       void contextMenu.show();
     };
 
-    rootListItemElement.addEventListener('contextmenu', viewParsedContextMenu);
-  }
-
-  // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private appendJSONPayloadParsed(rootListItem: Category, parsedObject: any, sourceText: string): void {
-    const object = (SDK.RemoteObject.RemoteObject.fromLocalObject(parsedObject) as SDK.RemoteObject.LocalJSONObject);
-    const section =
-        new ObjectUI.ObjectPropertiesSection.RootElement(new ObjectUI.ObjectPropertiesSection.ObjectTree(object));
-    section.title = (object.description);
-    section.expand();
-    // `editable` is not a valid property for `ObjectUI.ObjectPropertiesSection.RootElement`. Only for
-    // `ObjectUI.ObjectPropertiesSection.ObjectPropertiesSection`. We do not know if this assignment is
-    // safe to delete.
-    // @ts-expect-error
-    section.editable = false;
-    rootListItem.childrenListElement.classList.add('source-code', 'object-properties-section');
-
-    rootListItem.appendChild(section);
-    const rootListItemElement = rootListItem.listItemElement;
-
     const viewSource = function(this: RequestPayloadView, event: Event): void {
       rootListItemElement.removeEventListener('contextmenu', viewSourceContextMenu);
 
@@ -442,16 +368,41 @@ export class RequestPayloadView extends UI.Widget.VBox {
       void contextMenu.show();
     };
 
-    const viewSourceButton = this.createViewSourceToggle(/* viewSource */ false, viewSource.bind(this));
-    rootListItemElement.appendChild(viewSourceButton);
+    const showSource = viewSourceForItems.has(rootListItem);
+    const rootListItemElement = rootListItem.listItemElement;
+    render(
+        html`<div class="selection fill"></div>${i18nString(UIStrings.requestPayload)}${
+            this.createViewSourceToggle(showSource, showSource ? viewParsed.bind(this) : viewSource.bind(this))}`,
+        rootListItemElement);
+
+    rootListItem.removeChildren();
+    if (showSource) {
+      this.populateTreeElementWithSourceText(rootListItem, sourceText);
+      rootListItemElement.addEventListener('contextmenu', viewParsedContextMenu);
+    } else {
+      rootListItem.childrenListElement.classList.add('source-code', 'object-properties-section');
+      this.populateTreeElementWithObject(rootListItem, parsedObject);
+      rootListItemElement.addEventListener('contextmenu', viewSourceContextMenu);
+    }
+  }
 
-    rootListItemElement.addEventListener('contextmenu', viewSourceContextMenu);
+  private populateTreeElementWithObject(rootListItem: Category, parsedObject: object): void {
+    const object = new SDK.RemoteObject.LocalJSONObject(parsedObject);
+    const section =
+        new ObjectUI.ObjectPropertiesSection.RootElement(new ObjectUI.ObjectPropertiesSection.ObjectTree(object));
+    section.title = (object.description);
+    section.expand();
+    rootListItem.appendChild(section);
   }
 
-  private createViewSourceToggle(viewSource: boolean, handler: (arg0: Event) => void): Element {
-    const viewSourceToggleTitle = viewSource ? i18nString(UIStrings.viewParsed) : i18nString(UIStrings.viewSource);
-    return UI.UIUtils.createTextButton(
-        viewSourceToggleTitle, handler, {jslogContext: 'source-parse', className: 'payload-toggle'});
+  private createViewSourceToggle(viewSource: boolean, handler: (arg0: Event) => void): LitTemplate {
+    return html`<devtools-button
+        class=payload-toggle
+        jslogi=${VisualLogging.action().track({click: true}).context('source-parse')}
+        .variant=${Buttons.Button.Variant.OUTLINED}
+        @click=${handler}>
+      ${viewSource ? i18nString(UIStrings.viewParsed) : i18nString(UIStrings.viewSource)}
+    </devtools-button>`;
   }
 
   private toggleURLDecoding(event: Event): void {

package/front_end/panels/network/ShowMoreDetailsWidget.ts

@@ -0,0 +1,96 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as i18n from '../../core/i18n/i18n.js';
+import * as Buttons from '../../ui/components/buttons/buttons.js';
+import * as UI from '../../ui/legacy/legacy.js';
+import * as Lit from '../../ui/lit/lit.js';
+const UIStrings = {
+  /**
+   * @description Text to show more content
+   */
+  showMore: 'Show more',
+} as const;
+const str_ = i18n.i18n.registerUIStrings('panels/network/ShowMoreDetailsWidget.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+const {render, html} = Lit;
+interface ViewInput {
+  text: string;
+  showMore: boolean;
+  onToggle: () => void;
+  copy: CopyMenuItem|null;
+}
+type View = (input: ViewInput, output: object, target: HTMLElement) => void;
+const MAX_LENGTH = 3000;
+
+export const DEFAULT_VIEW: View = (input, output, target) => {
+  const onContextMenuShowMore = (event: Event): void => {
+    const contextMenu = new UI.ContextMenu.ContextMenu(event);
+    if (input.copy) {
+      contextMenu.clipboardSection().appendItem(input.copy.menuItem, input.copy.handler);
+    }
+    if (!input.showMore) {
+      contextMenu.newSection().appendItem(i18nString(UIStrings.showMore), input.onToggle, {jslogContext: 'show-more'});
+    }
+    void contextMenu.show();
+  };
+
+  render(html`<span
+            @contextmenu=${onContextMenuShowMore}
+            >${input.showMore ? input.text : input.text.substr(0, MAX_LENGTH)}</span>
+          ${
+             !input.showMore && input.text.length > MAX_LENGTH ? html`<devtools-button
+            .variant=${Buttons.Button.Variant.OUTLINED}
+            .jslogContext=${'show-more'}
+            @click=${input.onToggle}>
+            ${i18nString(UIStrings.showMore)}
+          </devtools-button>` :
+                                                                 Lit.nothing}`,
+         target);
+};
+
+interface CopyMenuItem {
+  menuItem: UI.ContextMenu.Item;
+  handler: () => void;
+}
+
+export class ShowMoreDetailsWidget extends UI.Widget.Widget {
+  readonly #view: View;
+  #text = '';
+  #showMore = false;
+  #copy: CopyMenuItem|null = null;
+  constructor(target?: HTMLElement, view = DEFAULT_VIEW) {
+    super(target);
+    this.#view = view;
+  }
+
+  get text(): string {
+    return this.#text;
+  }
+
+  set text(text: string) {
+    this.#text = text;
+    this.requestUpdate();
+  }
+
+  set copy(copy: CopyMenuItem) {
+    this.#copy = copy;
+    this.requestUpdate();
+  }
+
+  override performUpdate(): void {
+    this.#view(
+        {
+          copy: this.#copy,
+          text: this.#text,
+          showMore: this.#showMore,
+          onToggle: () => {
+            this.#showMore = true;
+            this.requestUpdate();
+          },
+        },
+        {}, this.contentElement);
+  }
+}

package/front_end/panels/network/components/RequestHeaderSection.ts

@@ -59,7 +59,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
     ${headers.map(header => html`
       <devtools-header-section-row
         .data=${{ header }}
-        jslog=${VisualLogging.item('request-header')}
+        jslog=${VisualLogging.item('request-header').track({resize: true})}
       ></devtools-header-section-row>
     `)}
   `, target);

package/front_end/panels/network/network.ts

@@ -52,6 +52,7 @@ import * as RequestResponseView from './RequestResponseView.js';
 import * as RequestTimingView from './RequestTimingView.js';
 import * as ResourceDirectSocketChunkView from './ResourceDirectSocketChunkView.js';
 import * as ResourceWebSocketFrameView from './ResourceWebSocketFrameView.js';
+import * as ShowMoreDetailsWidget from './ShowMoreDetailsWidget.js';
 import * as SignedExchangeInfoView from './SignedExchangeInfoView.js';
 
 export {
@@ -79,5 +80,6 @@ export {
   RequestTimingView,
   ResourceDirectSocketChunkView,
   ResourceWebSocketFrameView,
+  ShowMoreDetailsWidget,
   SignedExchangeInfoView,
 };

package/front_end/panels/protocol_monitor/JSONEditor.ts

@@ -990,7 +990,7 @@ function renderTargetSelectorRow(input: ViewInput): Lit.TemplateResult|undefined
             jslog=${VisualLogging.dropDown('target-selector').track({change: true})}
             @change=${input.onTargetSelected}>
       ${input.targets.map(target => html`
-        <option jslog=${VisualLogging.item('target').track({click: true})}
+        <option jslog=${VisualLogging.item('target').track({click: true, resize: true})}
                 value=${target.id()} ?selected=${target.id() === input.targetId}>
           ${target.name()} (${target.inspectedURL()})
         </option>`)}

package/front_end/panels/recorder/components/RecordingListView.ts

@@ -140,7 +140,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
                   @keydown=${(event: Event) => onKeyDown(recording.storageName, event)}
                   @click=${(event: Event) => onOpenClick(recording.storageName, event)}
                   jslog=${VisualLogging.item()
-                    .track({ click: true })
+                    .track({ click: true, resize: true })
                     .context('recording')}>
                   <div class="icon">
                     <devtools-icon name="flow">

package/front_end/panels/recorder/components/StepEditor.ts

@@ -646,7 +646,7 @@ export class StepEditor extends LitElement {
   #renderTypeRow(editable: boolean): Lit.TemplateResult {
     this.#renderedAttributes.add('type');
     // clang-format off
-    return html`<div class="row attribute" data-attribute="type" jslog=${VisualLogging.treeItem('type')}>
+    return html`<div class="row attribute" data-attribute="type" jslog=${VisualLogging.treeItem('type').track({resize: true})}>
       <div id="type">type<span class="separator">:</span></div>
       <devtools-suggestion-input
         aria-labelledby="type"
@@ -667,7 +667,7 @@ export class StepEditor extends LitElement {
       return;
     }
     // clang-format off
-    return html`<div class="row attribute" data-attribute=${attribute} jslog=${VisualLogging.treeItem(Platform.StringUtilities.toKebabCase(attribute))}>
+    return html`<div class="row attribute" data-attribute=${attribute} jslog=${VisualLogging.treeItem(Platform.StringUtilities.toKebabCase(attribute)).track({resize: true})}>
       <div id=${attribute}>${attribute}<span class="separator">:</span></div>
       <devtools-suggestion-input
         .disabled=${this.disabled}
@@ -706,7 +706,7 @@ export class StepEditor extends LitElement {
     }
     // clang-format off
     return html`
-      <div class="attribute" data-attribute="frame" jslog=${VisualLogging.treeItem('frame')}>
+      <div class="attribute" data-attribute="frame" jslog=${VisualLogging.treeItem('frame').track({resize: true})}>
         <div class="row">
           <div id="frame">frame<span class="separator">:</span></div>
           ${this.#renderDeleteButton('frame')}

package/front_end/panels/settings/KeybindsSettingsTab.ts

@@ -344,7 +344,8 @@ export class ShortcutListItem {
     this.settingsTab = settingsTab;
     this.item = item;
     this.element = document.createElement('div');
-    this.element.setAttribute('jslog', `${VisualLogging.item().context(item.id()).track({keydown: 'Escape'})}`);
+    this.element.setAttribute(
+        'jslog', `${VisualLogging.item().context(item.id()).track({keydown: 'Escape', resize: true})}`);
     this.editedShortcuts = new Map();
     this.shortcutInputs = new Map();
     this.shortcuts = UI.ShortcutRegistry.ShortcutRegistry.instance().shortcutsForAction(item.id());

package/front_end/panels/sources/CallStackSidebarPane.ts

@@ -88,6 +88,16 @@ const UIStrings = {
    * The user opens this context menu by selecting a specific call frame in the call stack sidebar pane.
    */
   restartFrame: 'Restart frame',
+  /**
+   * @description Error message that is displayed in UI debugging information cannot be found for a call frame
+   * @example {main} PH1
+   */
+  failedToLoadDebugSymbolsForFunction: 'No debug information for function "{PH1}"',
+  /**
+   * @description Error message that is displayed in UI when a file needed for debugging information for a call frame is missing
+   * @example {mainp.debug.wasm.dwp} PH1
+   */
+  debugSymbolsIncomplete: 'The debug information for function {PH1} is incomplete',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/sources/CallStackSidebarPane.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -253,10 +263,11 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
     const itemPromises = [];
     const uniqueWarnings = new Set<string>();
     for (const frame of details.callFrames) {
-      const itemPromise = Item.createForDebuggerCallFrame(frame, this.locationPool, this.refreshItem.bind(this));
+      const itemPromise =
+          Item.createForDebuggerCallFrame(frame, this.locationPool, this.refreshItem.bind(this), this.list);
       itemPromises.push(itemPromise);
       if (frame.missingDebugInfoDetails) {
-        uniqueWarnings.add(frame.missingDebugInfoDetails.details);
+        uniqueWarnings.add(convertMissingDebugInfo(frame.missingDebugInfoDetails, frame.functionName).details);
       }
     }
     const items = await Promise.all(itemPromises);
@@ -272,7 +283,8 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
       asyncStackTrace = stackTrace;
       const title = UI.UIUtils.asyncStackTraceLabel(asyncStackTrace.description, previousStackTrace);
       items.push(...await Item.createItemsForAsyncStack(
-          title, details.debuggerModel, asyncStackTrace.callFrames, this.locationPool, this.refreshItem.bind(this)));
+          title, details.debuggerModel, asyncStackTrace.callFrames, this.locationPool, this.refreshItem.bind(this),
+          this.list));
       previousStackTrace = asyncStackTrace.callFrames;
 
       if (--maxAsyncStackChainDepth <= 0) {
@@ -367,9 +379,10 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
       const icon = new Icon();
       icon.name = 'warning-filled';
       icon.classList.add('call-frame-warning-icon', 'small');
-      const messages = callframe.missingDebugInfoDetails.resources.map(
+      const {resources, details} = convertMissingDebugInfo(callframe.missingDebugInfoDetails, callframe.functionName);
+      const messages = resources.map(
           r => i18nString(UIStrings.debugFileNotFound, {PH1: Common.ParsedURL.ParsedURL.extractName(r.resourceUrl)}));
-      UI.Tooltip.Tooltip.install(icon, [callframe.missingDebugInfoDetails.details, ...messages].join('\n'));
+      UI.Tooltip.Tooltip.install(icon, [details, ...messages].join('\n'));
       element.appendChild(icon);
     }
     return element;
@@ -541,12 +554,13 @@ export class Item {
   updateDelegate: (arg0: Item) => void;
   /** Only set for synchronous frames */
   readonly frame?: SDK.DebuggerModel.CallFrame;
+  readonly list: UI.ListControl.ListControl<Item>;
 
   static async createForDebuggerCallFrame(
       frame: SDK.DebuggerModel.CallFrame, locationPool: Bindings.LiveLocation.LiveLocationPool,
-      updateDelegate: (arg0: Item) => void): Promise<Item> {
+      updateDelegate: (arg0: Item) => void, list: UI.ListControl.ListControl<Item>): Promise<Item> {
     const name = frame.functionName;
-    const item = new Item(UI.UIUtils.beautifyFunctionName(name), updateDelegate, frame);
+    const item = new Item(UI.UIUtils.beautifyFunctionName(name), updateDelegate, frame, list);
     await Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().createCallFrameLiveLocation(
         frame.location(), item.update.bind(item), locationPool);
     void SourceMapScopes.NamesResolver.resolveDebuggerFrameFunctionName(frame).then(functionName => {
@@ -563,16 +577,17 @@ export class Item {
 
   static async createItemsForAsyncStack(
       title: string, debuggerModel: SDK.DebuggerModel.DebuggerModel, frames: Protocol.Runtime.CallFrame[],
-      locationPool: Bindings.LiveLocation.LiveLocationPool, updateDelegate: (arg0: Item) => void): Promise<Item[]> {
+      locationPool: Bindings.LiveLocation.LiveLocationPool, updateDelegate: (arg0: Item) => void,
+      list: UI.ListControl.ListControl<Item>): Promise<Item[]> {
     const headerItemToItemsSet = new WeakMap<Item, Set<Item>>();
-    const asyncHeaderItem = new Item(title, updateDelegate);
+    const asyncHeaderItem = new Item(title, updateDelegate, undefined, list);
     headerItemToItemsSet.set(asyncHeaderItem, new Set());
     asyncHeaderItem.isAsyncHeader = true;
 
     const asyncFrameItems = [];
     const liveLocationPromises = [];
     for (const frame of frames) {
-      const item = new Item(UI.UIUtils.beautifyFunctionName(frame.functionName), update);
+      const item = new Item(UI.UIUtils.beautifyFunctionName(frame.functionName), update, undefined, list);
       const rawLocation =
           debuggerModel.createRawLocationByScriptId(frame.scriptId, frame.lineNumber, frame.columnNumber);
       liveLocationPromises.push(
@@ -613,7 +628,9 @@ export class Item {
     }
   }
 
-  constructor(title: string, updateDelegate: (arg0: Item) => void, frame?: SDK.DebuggerModel.CallFrame) {
+  constructor(
+      title: string, updateDelegate: (arg0: Item) => void, frame: SDK.DebuggerModel.CallFrame|undefined,
+      list: UI.ListControl.ListControl<Item>) {
     this.isIgnoreListed = false;
     this.title = title;
     this.linkText = '';
@@ -621,6 +638,7 @@ export class Item {
     this.isAsyncHeader = false;
     this.updateDelegate = updateDelegate;
     this.frame = frame;
+    this.list = list;
   }
 
   private async update(liveLocation: Bindings.LiveLocation.LiveLocation): Promise<void> {
@@ -628,6 +646,35 @@ export class Item {
     this.isIgnoreListed = Boolean(uiLocation?.isIgnoreListed());
     this.linkText = uiLocation ? uiLocation.linkText() : '';
     this.uiLocation = uiLocation;
+
+    if (this.frame && uiLocation && this === this.list.selectedItem()) {
+      UI.Context.Context.instance().setFlavor(
+          StackTrace.StackTrace.DebuggableFrameFlavor,
+          StackTrace.StackTrace.DebuggableFrameFlavor.for({
+                                                            uiSourceCode: uiLocation.uiSourceCode,
+                                                            line: uiLocation.lineNumber,
+                                                            column: uiLocation.columnNumber ?? -1,
+                                                            sdkFrame: this.frame,
+                                                          }));
+    }
+
     this.updateDelegate(this);
   }
 }
+
+export function convertMissingDebugInfo(
+    missingDebugInfo: SDK.DebuggerModel.MissingDebugInfo, functionName: string|undefined):
+    {details: Platform.UIString.LocalizedString, resources: SDK.DebuggerModel.MissingDebugFiles[]} {
+  switch (missingDebugInfo.type) {
+    case SDK.DebuggerModel.MissingDebugInfoType.PARTIAL_INFO:
+      return {
+        details: i18nString(UIStrings.debugSymbolsIncomplete, {PH1: functionName ?? ''}),
+        resources: missingDebugInfo.missingDebugFiles
+      };
+    case SDK.DebuggerModel.MissingDebugInfoType.NO_INFO:
+      return {
+        details: i18nString(UIStrings.failedToLoadDebugSymbolsForFunction, {PH1: functionName ?? ''}),
+        resources: []
+      };
+  }
+}

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -31,6 +31,7 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import {AddDebugInfoURLDialog} from './AddSourceMapURLDialog.js';
 import {BreakpointEditDialog} from './BreakpointEditDialog.js';
 import {BreakpointsSidebarController} from './BreakpointsView.js';
+import {convertMissingDebugInfo} from './CallStackSidebarPane.js';
 import {Plugin} from './Plugin.js';
 import {SourcesPanel} from './SourcesPanel.js';
 
@@ -201,7 +202,6 @@ export class DebuggerPlugin extends Plugin {
   // truth for re-creating the breakpoints.
   private breakpoints: BreakpointDescription[] = [];
   private continueToLocations: Array<{from: number, to: number, async: boolean, click: () => void}>|null = null;
-  private readonly liveLocationPool: Bindings.LiveLocation.LiveLocationPool;
   // When the editor content is changed by the user, this becomes
   // true. When the plugin is muted, breakpoints show up as disabled
   // and can't be manipulated. It is cleared again when the content is
@@ -252,7 +252,6 @@ export class DebuggerPlugin extends Plugin {
 
     UI.Context.Context.instance().addFlavorChangeListener(
         StackTrace.StackTrace.DebuggableFrameFlavor, this.callFrameChanged, this);
-    this.liveLocationPool = new Bindings.LiveLocation.LiveLocationPool();
 
     this.updateScriptFiles();
 
@@ -1441,7 +1440,9 @@ export class DebuggerPlugin extends Plugin {
     });
   }
 
-  private updateMissingDebugInfoInfobar(warning: SDK.DebuggerModel.MissingDebugInfoDetails|null): void {
+  private updateMissingDebugInfoInfobar(
+      warning: {resources: SDK.DebuggerModel.MissingDebugFiles[], details: Platform.UIString.LocalizedString}|
+      null): void {
     if (this.missingDebugInfoBar) {
       return;
     }
@@ -1655,25 +1656,22 @@ export class DebuggerPlugin extends Plugin {
   }
 
   private async callFrameChanged(): Promise<void> {
-    this.liveLocationPool.disposeAll();
-    const debuggableFrame = UI.Context.Context.instance().flavor(StackTrace.StackTrace.DebuggableFrameFlavor);
-    if (!debuggableFrame) {
-      this.setExecutionLocation(null);
+    const frameFlavor = UI.Context.Context.instance().flavor(StackTrace.StackTrace.DebuggableFrameFlavor);
+    if (frameFlavor?.frame.uiSourceCode?.canonicalScriptId() === this.uiSourceCode.canonicalScriptId()) {
+      const uiLocation = new Workspace.UISourceCode.UILocation(
+          frameFlavor.frame.uiSourceCode, frameFlavor.frame.line, frameFlavor.frame.column);
+      this.setExecutionLocation(uiLocation);
+      if (frameFlavor.sdkFrame.missingDebugInfoDetails) {
+        this.updateMissingDebugInfoInfobar(
+            convertMissingDebugInfo(frameFlavor.sdkFrame.missingDebugInfoDetails, frameFlavor.sdkFrame.functionName));
+      } else {
+        this.updateMissingDebugInfoInfobar(null);
+      }
+      // We are paused and the user is specifically looking at this UISourceCode either because
+      // this file is on top of stack, or the user explicitly selected a stack frame for this UISourceCode.
+      this.#recordSourcesPanelDebuggedMetrics();
     } else {
-      const callFrame = debuggableFrame.sdkFrame;
-      await Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().createCallFrameLiveLocation(
-          callFrame.location(), async (liveLocation: Bindings.LiveLocation.LiveLocation) => {
-            const uiLocation = await liveLocation.uiLocation();
-            if (uiLocation && uiLocation.uiSourceCode.canonicalScriptId() === this.uiSourceCode.canonicalScriptId()) {
-              this.setExecutionLocation(uiLocation);
-              this.updateMissingDebugInfoInfobar(callFrame.missingDebugInfoDetails);
-              // We are paused and the user is specifically looking at this UISourceCode either because
-              // this file is on top of stack, or the user explicitly selected a stack frame for this UISourceCode.
-              this.#recordSourcesPanelDebuggedMetrics();
-            } else {
-              this.setExecutionLocation(null);
-            }
-          }, this.liveLocationPool);
+      this.setExecutionLocation(null);
     }
   }
 
@@ -1744,7 +1742,6 @@ export class DebuggerPlugin extends Plugin {
     this.editor = undefined;
 
     UI.Context.Context.instance().removeFlavorChangeListener(SDK.DebuggerModel.CallFrame, this.callFrameChanged, this);
-    this.liveLocationPool.disposeAll();
   }
 
   /**