chrome-devtools-frontend 1.0.1576915 → 1.0.1577886

package/front_end/panels/lighthouse/LighthouseReportRenderer.ts

@@ -197,7 +197,7 @@ export class LighthouseReportRenderer {
         continue;
       }
 
-      auditEl.setAttribute('jslog', `${VisualLogging.item(`lighthouse.audit.${id}`).track({resize: true})}`);
+      auditEl.setAttribute('jslog', `${VisualLogging.item(`lighthouse.audit.${id}`)}`);
 
       let state: string|undefined;
       for (const className of auditEl.classList) {

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

@@ -60,7 +60,7 @@ function renderEndiannessSetting(
         data-endianness="true" @change=${(e: Event) => onEndiannessChanged((e.target as HTMLSelectElement).value as Endianness)}>
         ${[Endianness.LITTLE, Endianness.BIG].map(endianness => {
             return html`<option value=${endianness} .selected=${currentEndiannes === endianness}
-            jslog=${VisualLogging.item(Platform.StringUtilities.toKebabCase(endianness)).track({click: true, resize: true})}>${
+            jslog=${VisualLogging.item(Platform.StringUtilities.toKebabCase(endianness)).track({click: true})}>${
                 i18n.i18n.lockedString(endianness)}</option>`;
         })}
       </select>

package/front_end/panels/linear_memory_inspector/components/ValueInterpreterDisplay.ts

@@ -104,7 +104,7 @@ export const DEFAULT_VIEW: View = (input: ViewInput, _output: undefined, target:
                     ${VALUE_TYPE_MODE_LIST.filter(x => isValidMode(type, x)).map(mode => {
                       return html`
                         <option value=${mode} .selected=${input.valueTypeModes.get(type) === mode}
-                                jslog=${VisualLogging.item(mode).track({click: true, resize: true})}>${
+                                jslog=${VisualLogging.item(mode).track({click: true})}>${
                           i18n.i18n.lockedString(mode)}
                         </option>`;
                     })}

package/front_end/panels/media/PlayerListView.ts

@@ -73,7 +73,7 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
           })}
                @click=${() => input.onPlayerClick(player.playerID)}
                @contextmenu=${(e: Event) => input.onPlayerContextMenu(player.playerID, e)}
-               jslog=${VisualLogging.item('player').track({click: true, resize: true})}>
+               jslog=${VisualLogging.item('player').track({click: true})}>
             <div class="player-entry-status-icon vbox">
               <div class="player-entry-status-icon-centering">
                 <devtools-icon name=${player.iconName}></devtools-icon>

package/front_end/panels/network/NetworkLogViewColumns.ts

@@ -409,8 +409,7 @@ export class NetworkLogViewColumns {
 
   private createWaterfallHeader(): void {
     this.waterfallHeaderElement = this.waterfallColumn.contentElement.createChild('div', 'network-waterfall-header');
-    this.waterfallHeaderElement.setAttribute(
-        'jslog', `${VisualLogging.tableHeader('waterfall').track({click: true, resize: true})}`);
+    this.waterfallHeaderElement.setAttribute('jslog', `${VisualLogging.tableHeader('waterfall').track({click: true})}`);
     this.waterfallHeaderElement.addEventListener('click', waterfallHeaderClicked.bind(this));
     this.waterfallHeaderElement.addEventListener('contextmenu', event => {
       const contextMenu = new UI.ContextMenu.ContextMenu(event);

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').track({resize: true})}
+        jslog=${VisualLogging.item('request-header')}
       ></devtools-header-section-row>
     `)}
   `, target);

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, resize: true})}
+        <option jslog=${VisualLogging.item('target').track({click: 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, resize: true })
+                    .track({ click: true })
                     .context('recording')}>
                   <div class="icon">
                     <devtools-icon name="flow">

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

@@ -140,6 +140,14 @@ const UIStrings = {
    * @description The title of the button that open current recording in Performance panel.
    */
   performancePanel: 'Performance panel',
+  /**
+   * @description The announcement when the code sidebar is opened.
+   */
+  codeSidebarOpened: 'Code sidebar opened',
+  /**
+   * @description The announcement when the code sidebar is closed.
+   */
+  codeSidebarClosed: 'Code sidebar closed'
 } as const;
 const str_ = i18n.i18n.registerUIStrings(
     'panels/recorder/components/RecordingView.ts',
@@ -1189,6 +1197,13 @@ export class RecordingView extends UI.Widget.Widget {
 
   showCodeToggle = (): void => {
     this.#showCodeView = !this.#showCodeView;
+
+    if (this.#showCodeView) {
+      UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.codeSidebarOpened));
+    } else {
+      UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.codeSidebarClosed));
+    }
+
     void this.#convertToCode();
   };
 

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').track({resize: true})}>
+    return html`<div class="row attribute" data-attribute="type" jslog=${VisualLogging.treeItem('type')}>
       <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)).track({resize: true})}>
+    return html`<div class="row attribute" data-attribute=${attribute} jslog=${VisualLogging.treeItem(Platform.StringUtilities.toKebabCase(attribute))}>
       <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').track({resize: true})}>
+      <div class="attribute" data-attribute="frame" jslog=${VisualLogging.treeItem('frame')}>
         <div class="row">
           <div id="frame">frame<span class="separator">:</span></div>
           ${this.#renderDeleteButton('frame')}

package/front_end/panels/settings/KeybindsSettingsTab.ts

@@ -344,8 +344,7 @@ 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', resize: true})}`);
+    this.element.setAttribute('jslog', `${VisualLogging.item().context(item.id()).track({keydown: 'Escape'})}`);
     this.editedShortcuts = new Map();
     this.shortcutInputs = new Map();
     this.shortcuts = UI.ShortcutRegistry.ShortcutRegistry.instance().shortcutsForAction(item.id());

package/front_end/panels/sources/CallStackSidebarPane.ts

@@ -34,10 +34,8 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import type * as Protocol from '../../generated/protocol.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as Persistence from '../../models/persistence/persistence.js';
-import * as SourceMapScopes from '../../models/source_map_scopes/source_map_scopes.js';
 import * as StackTrace from '../../models/stack_trace/stack_trace.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import {Icon} from '../../ui/kit/kit.js';
@@ -116,14 +114,12 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
   private list: UI.ListControl.ListControl<Item>;
   private readonly showMoreMessageElement: Element;
   private showIgnoreListed = false;
-  private readonly locationPool = new Bindings.LiveLocation.LiveLocationPool();
   private maxAsyncStackChainDepth = defaultMaxAsyncStackChainDepth;
   private readonly updateItemThrottler = new Common.Throttler.Throttler(100);
   private readonly scheduledForUpdateItems = new Set<Item>();
   private muteActivateItem?: boolean;
-  private lastDebuggerModel: SDK.DebuggerModel.DebuggerModel|null = null;
 
-  #details: SDK.DebuggerModel.DebuggerPausedDetails|null = null;
+  #stackTrace: StackTrace.StackTrace.DebuggableStackTrace|null = null;
 
   private constructor() {
     super({
@@ -194,9 +190,6 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
     this.showMoreMessageElement = showMoreRef.value as HTMLElement;
 
     this.requestUpdate();
-
-    SDK.TargetManager.TargetManager.instance().addModelListener(
-        SDK.DebuggerModel.DebuggerModel, SDK.DebuggerModel.Events.DebugInfoAttached, this.debugInfoAttached, this);
   }
 
   static instance(opts: {
@@ -210,45 +203,30 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
     return callstackSidebarPaneInstance;
   }
 
-  flavorChanged(details: SDK.DebuggerModel.DebuggerPausedDetails|null): void {
+  async flavorChanged(details: SDK.DebuggerModel.DebuggerPausedDetails|null): Promise<void> {
     this.showIgnoreListed = false;
     this.ignoreListCheckboxElement.checked = false;
     this.maxAsyncStackChainDepth = defaultMaxAsyncStackChainDepth;
-    this.#details = details;
-    this.setSourceMapSubscription(details?.debuggerModel ?? null);
 
-    this.requestUpdate();
-  }
-
-  private debugInfoAttached(): void {
-    this.requestUpdate();
-  }
-
-  private setSourceMapSubscription(debuggerModel: SDK.DebuggerModel.DebuggerModel|null): void {
-    // Shortcut for the case when we are listening to the same model.
-    if (this.lastDebuggerModel === debuggerModel) {
-      return;
+    if (this.#stackTrace) {
+      this.#stackTrace.removeEventListener(StackTrace.StackTrace.Events.UPDATED, this.requestUpdate, this);
+      this.#stackTrace = null;
+      this.requestUpdate();  // In case creating the stack trace takes a while, we render an empty view first.
     }
 
-    if (this.lastDebuggerModel) {
-      this.lastDebuggerModel.sourceMapManager().removeEventListener(
-          SDK.SourceMapManager.Events.SourceMapAttached, this.debugInfoAttached, this);
+    if (details) {
+      this.#stackTrace = await Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()
+                             .createStackTraceFromDebuggerPaused(details, details.debuggerModel.target());
+      this.#stackTrace.addEventListener(StackTrace.StackTrace.Events.UPDATED, this.requestUpdate, this);
     }
 
-    this.lastDebuggerModel = debuggerModel;
-    if (this.lastDebuggerModel) {
-      this.lastDebuggerModel.sourceMapManager().addEventListener(
-          SDK.SourceMapManager.Events.SourceMapAttached, this.debugInfoAttached, this);
-    }
+    this.requestUpdate();
   }
 
-  override async performUpdate(): Promise<void> {
-    this.locationPool.disposeAll();
-
+  override performUpdate(): void {
     this.callFrameWarningsElement.classList.add('hidden');
 
-    const details = this.#details;
-    if (!details) {
+    if (!this.#stackTrace) {
       this.notPausedMessageElement.classList.remove('hidden');
       this.ignoreListMessageElement.classList.add('hidden');
       this.showMoreMessageElement.classList.add('hidden');
@@ -260,39 +238,38 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
 
     this.notPausedMessageElement.classList.add('hidden');
 
-    const itemPromises = [];
+    const items: Item[] = [];
     const uniqueWarnings = new Set<string>();
-    for (const frame of details.callFrames) {
-      const itemPromise =
-          Item.createForDebuggerCallFrame(frame, this.locationPool, this.refreshItem.bind(this), this.list);
-      itemPromises.push(itemPromise);
-      if (frame.missingDebugInfoDetails) {
-        uniqueWarnings.add(convertMissingDebugInfo(frame.missingDebugInfoDetails, frame.functionName).details);
+    for (const frame of this.#stackTrace.syncFragment.frames) {
+      items.push(Item.createForDebuggableFrame(frame));
+      if (frame.missingDebugInfo) {
+        uniqueWarnings.add(convertMissingDebugInfo(frame.missingDebugInfo, frame.sdkFrame.functionName).details);
       }
     }
-    const items = await Promise.all(itemPromises);
+
     if (uniqueWarnings.size) {
       this.callFrameWarningsElement.classList.remove('hidden');
       UI.Tooltip.Tooltip.install(this.callFrameWarningsElement, Array.from(uniqueWarnings).join('\n'));
     }
 
-    let previousStackTrace: Protocol.Runtime.CallFrame[]|SDK.DebuggerModel.CallFrame[] = details.callFrames;
     let {maxAsyncStackChainDepth} = this;
-    let asyncStackTrace: Protocol.Runtime.StackTrace|null = null;
-    for await (const {stackTrace} of details.debuggerModel.iterateAsyncParents(details)) {
-      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),
-          this.list));
-      previousStackTrace = asyncStackTrace.callFrames;
+    let hasMore = false;
+    let previousFragment: StackTrace.StackTrace.Fragment = this.#stackTrace.syncFragment;
+    for (const asyncFragment of this.#stackTrace.asyncFragments) {
+      items.push(Item.createForAsyncHeader(asyncFragment, previousFragment));
+      for (const frame of asyncFragment.frames) {
+        items.push(Item.createForFrame(frame));
+      }
+
+      previousFragment = asyncFragment;
 
       if (--maxAsyncStackChainDepth <= 0) {
+        hasMore = asyncFragment !== this.#stackTrace.asyncFragments.at(-1);
         break;
       }
     }
 
-    this.showMoreMessageElement.classList.toggle('hidden', !asyncStackTrace);
+    this.showMoreMessageElement.classList.toggle('hidden', !hasMore);
     this.items.replaceAll(items);
     for (const item of this.items) {
       this.refreshItem(item);
@@ -363,8 +340,8 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
         UI.ARIAUtils.setDisabled(element, true);
       }
     }
-    const callframe = item.frame;
-    const isSelected = callframe === UI.Context.Context.instance().flavor(SDK.DebuggerModel.CallFrame);
+    const isSelected =
+        item.frame === UI.Context.Context.instance().flavor(StackTrace.StackTrace.DebuggableFrameFlavor)?.frame;
 
     element.classList.toggle('selected', isSelected);
     UI.ARIAUtils.setSelected(element, isSelected);
@@ -375,11 +352,12 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
     element.appendChild(icon);
     element.tabIndex = item === this.list.selectedItem() ? 0 : -1;
 
-    if (callframe?.missingDebugInfoDetails) {
+    if (item.frame?.missingDebugInfo) {
       const icon = new Icon();
       icon.name = 'warning-filled';
       icon.classList.add('call-frame-warning-icon', 'small');
-      const {resources, details} = convertMissingDebugInfo(callframe.missingDebugInfoDetails, callframe.functionName);
+      const {resources, details} =
+          convertMissingDebugInfo(item.frame.missingDebugInfo, item.frame.sdkFrame.functionName);
       const messages = resources.map(
           r => i18nString(UIStrings.debugFileNotFound, {PH1: Common.ParsedURL.ParsedURL.extractName(r.resourceUrl)}));
       UI.Tooltip.Tooltip.install(icon, [details, ...messages].join('\n'));
@@ -421,7 +399,7 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
       return;
     }
     const contextMenu = new UI.ContextMenu.ContextMenu(event);
-    const debuggerCallFrame = item.frame;
+    const debuggerCallFrame = item.frame?.sdkFrame;
     if (debuggerCallFrame) {
       contextMenu.defaultSection().appendItem(i18nString(UIStrings.restartFrame), () => {
         Host.userMetrics.actionTaken(Host.UserMetrics.Action.StackFrameRestarted);
@@ -444,17 +422,14 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
     this.list.selectItem(item);
     const debuggerCallFrame = item.frame;
     const oldItem = this.activeCallFrameItem();
-    if (debuggerCallFrame && oldItem !== item) {
-      debuggerCallFrame.debuggerModel.setSelectedCallFrame(debuggerCallFrame);
-      UI.Context.Context.instance().setFlavor(SDK.DebuggerModel.CallFrame, debuggerCallFrame);
+    if (debuggerCallFrame) {
+      debuggerCallFrame.sdkFrame.debuggerModel.setSelectedCallFrame(debuggerCallFrame.sdkFrame);
+      UI.Context.Context.instance().setFlavor(SDK.DebuggerModel.CallFrame, debuggerCallFrame.sdkFrame);
       UI.Context.Context.instance().setFlavor(
           StackTrace.StackTrace.DebuggableFrameFlavor,
-          StackTrace.StackTrace.DebuggableFrameFlavor.for({
-                                                            uiSourceCode: item.uiLocation?.uiSourceCode,
-                                                            line: uiLocation.lineNumber,
-                                                            column: uiLocation.columnNumber ?? -1,
-                                                            sdkFrame: debuggerCallFrame,
-                                                          }));
+          StackTrace.StackTrace.DebuggableFrameFlavor.for(debuggerCallFrame));
+    }
+    if (oldItem !== item) {
       if (oldItem) {
         this.refreshItem(oldItem);
       }
@@ -467,7 +442,7 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
   activeCallFrameItem(): Item|null {
     const callFrame = UI.Context.Context.instance().flavor(SDK.DebuggerModel.CallFrame);
     if (callFrame) {
-      return this.items.find(callFrameItem => callFrameItem.frame === callFrame) || null;
+      return this.items.find(callFrameItem => callFrameItem.frame?.sdkFrame === callFrame) || null;
     }
     return null;
   }
@@ -546,132 +521,56 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
 }
 
 export class Item {
-  isIgnoreListed: boolean;
-  title: string;
-  linkText: string;
-  uiLocation: Workspace.UISourceCode.UILocation|null;
-  isAsyncHeader: boolean;
-  updateDelegate: (arg0: Item) => void;
+  isIgnoreListed = false;
+  title = '';
+  linkText = '';
+  uiLocation: Workspace.UISourceCode.UILocation|null = null;
+  isAsyncHeader = false;
+
   /** 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, list: UI.ListControl.ListControl<Item>): Promise<Item> {
-    const name = frame.functionName;
-    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 => {
-      if (functionName && functionName !== name) {
-        // Just update the item's title and call the update delegate directly,
-        // instead of going through the update method below, since location
-        // didn't change.
-        item.title = functionName;
-        item.updateDelegate(item);
-      }
-    });
+  frame?: StackTrace.StackTrace.DebuggableFrame;
+
+  static createForDebuggableFrame(frame: StackTrace.StackTrace.DebuggableFrame): Item {
+    const item = Item.createForFrame(frame);
+    item.frame = frame;
     return item;
   }
 
-  static async createItemsForAsyncStack(
-      title: string, debuggerModel: SDK.DebuggerModel.DebuggerModel, frames: Protocol.Runtime.CallFrame[],
-      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, 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, undefined, list);
-      const rawLocation =
-          debuggerModel.createRawLocationByScriptId(frame.scriptId, frame.lineNumber, frame.columnNumber);
-      liveLocationPromises.push(
-          Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().createCallFrameLiveLocation(
-              rawLocation, item.update.bind(item), locationPool));
-      void SourceMapScopes.NamesResolver.resolveProfileFrameFunctionName(frame, debuggerModel.target())
-          .then(functionName => {
-            if (functionName && functionName !== frame.functionName) {
-              item.title = functionName;
-              item.updateDelegate(item);
-            }
-          });
-      asyncFrameItems.push(item);
-    }
-
-    await Promise.all(liveLocationPromises);
-    updateDelegate(asyncHeaderItem);
-
-    return [asyncHeaderItem, ...asyncFrameItems];
-
-    function update(item: Item): void {
-      updateDelegate(item);
-      let shouldUpdate = false;
-      const items = headerItemToItemsSet.get(asyncHeaderItem);
-      if (items) {
-        if (item.isIgnoreListed) {
-          items.delete(item);
-          shouldUpdate = items.size === 0;
-        } else {
-          shouldUpdate = items.size === 0;
-          items.add(item);
-        }
-        asyncHeaderItem.isIgnoreListed = items.size === 0;
-      }
-      if (shouldUpdate) {
-        updateDelegate(asyncHeaderItem);
-      }
+  static createForFrame(frame: StackTrace.StackTrace.Frame): Item {
+    const item = new Item(UI.UIUtils.beautifyFunctionName(frame.name ?? ''));
+    const uiSourceCode = frame.uiSourceCode;
+    if (uiSourceCode) {
+      item.isIgnoreListed = uiSourceCode.isIgnoreListed() ?? false;
+      item.uiLocation = uiSourceCode.uiLocation(frame.line, frame.column);
+      item.linkText = item.uiLocation.linkText();
     }
+    return item;
   }
 
-  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 = '';
-    this.uiLocation = null;
-    this.isAsyncHeader = false;
-    this.updateDelegate = updateDelegate;
-    this.frame = frame;
-    this.list = list;
+  static createForAsyncHeader(
+      fragment: StackTrace.StackTrace.AsyncFragment, previousFragment: StackTrace.StackTrace.Fragment): Item {
+    const description = UI.UIUtils.asyncStackTraceLabel(
+        fragment.description, previousFragment.frames.map(f => ({functionName: f.name ?? ''})));
+    const item = new Item(description);
+    item.isAsyncHeader = true;
+    return item;
   }
 
-  private async update(liveLocation: Bindings.LiveLocation.LiveLocation): Promise<void> {
-    const uiLocation = await liveLocation.uiLocation();
-    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);
+  private constructor(title: string) {
+    this.title = title;
   }
 }
 
 export function convertMissingDebugInfo(
-    missingDebugInfo: SDK.DebuggerModel.MissingDebugInfo, functionName: string|undefined):
+    missingDebugInfo: StackTrace.StackTrace.MissingDebugInfo, functionName: string|undefined):
     {details: Platform.UIString.LocalizedString, resources: SDK.DebuggerModel.MissingDebugFiles[]} {
   switch (missingDebugInfo.type) {
-    case SDK.DebuggerModel.MissingDebugInfoType.PARTIAL_INFO:
+    case StackTrace.StackTrace.MissingDebugInfoType.PARTIAL_INFO:
       return {
         details: i18nString(UIStrings.debugSymbolsIncomplete, {PH1: functionName ?? ''}),
         resources: missingDebugInfo.missingDebugFiles
       };
-    case SDK.DebuggerModel.MissingDebugInfoType.NO_INFO:
+    case StackTrace.StackTrace.MissingDebugInfoType.NO_INFO:
       return {
         details: i18nString(UIStrings.failedToLoadDebugSymbolsForFunction, {PH1: functionName ?? ''}),
         resources: []

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -1661,9 +1661,9 @@ export class DebuggerPlugin extends Plugin {
       const uiLocation = new Workspace.UISourceCode.UILocation(
           frameFlavor.frame.uiSourceCode, frameFlavor.frame.line, frameFlavor.frame.column);
       this.setExecutionLocation(uiLocation);
-      if (frameFlavor.sdkFrame.missingDebugInfoDetails) {
+      if (frameFlavor.frame.missingDebugInfo) {
         this.updateMissingDebugInfoInfobar(
-            convertMissingDebugInfo(frameFlavor.sdkFrame.missingDebugInfoDetails, frameFlavor.sdkFrame.functionName));
+            convertMissingDebugInfo(frameFlavor.frame.missingDebugInfo, frameFlavor.sdkFrame.functionName));
       } else {
         this.updateMissingDebugInfoInfobar(null);
       }

package/front_end/panels/sources/components/HeadersView.ts

@@ -404,7 +404,7 @@ export class HeadersViewComponent extends HTMLElement {
     // clang-format off
     return html`
       <div class="row" data-block-index=${blockIndex}
-           jslog=${VisualLogging.treeItem(pattern === '*' ? pattern : undefined).track({resize: true})}>
+           jslog=${VisualLogging.treeItem(pattern === '*' ? pattern : undefined)}>
         <div>${i18n.i18n.lockedString('Apply to')}</div>
         <div class="separator">:</div>
         ${this.#renderEditable(pattern, 'apply-to')}
@@ -427,7 +427,7 @@ export class HeadersViewComponent extends HTMLElement {
     // clang-format off
     return html`
       <div class="row padded" data-block-index=${blockIndex} data-header-index=${headerIndex}
-           jslog=${VisualLogging.treeItem(header.name).parent('headers-editor-row-parent').track({resize: true})}>
+           jslog=${VisualLogging.treeItem(header.name).parent('headers-editor-row-parent')}>
         ${this.#renderEditable(header.name, 'header-name red', true)}
         <div class="separator">:</div>
         ${this.#renderEditable(header.value, 'header-value')}

package/front_end/panels/timeline/components/BreadcrumbsUI.ts

@@ -111,7 +111,7 @@ export class BreadcrumbsUI extends HTMLElement {
     // clang-format off
     return html`
           <div class="breadcrumb" @contextmenu=${(event: Event) => this.#onContextMenu(event, breadcrumb)} @click=${() => this.#activateBreadcrumb(breadcrumb)}
-          jslog=${VisualLogging.item('timeline.breadcrumb-select').track({click: true, resize: true})}>
+          jslog=${VisualLogging.item('timeline.breadcrumb-select').track({click: true})}>
            <span class="${(breadcrumb === this.#activeBreadcrumb) ? 'active-breadcrumb' : ''} range">
             ${(index === 0) ?
               `Full range (${i18n.TimeUtilities.preciseMillisToString(breadcrumbRange, 2)})` :

package/front_end/panels/timeline/components/SidebarAnnotationsTab.ts

@@ -424,7 +424,7 @@ export const DEFAULT_VIEW: (input: SidebarAnnotationsTabViewInput, output: objec
                   @mouseout=${() => (annotation.type === 'ENTRY_LABEL') ? input.onAnnotationHoverOut() : null}
                   aria-label=${label}
                   tabindex="0"
-                  jslog=${VisualLogging.item(`timeline.annotation-sidebar.annotation-${jslogForAnnotation(annotation)}`).track({click: true, resize: true})}
+                  jslog=${VisualLogging.item(`timeline.annotation-sidebar.annotation-${jslogForAnnotation(annotation)}`).track({click: true})}
                 >
                   <div class="annotation">
                     ${renderAnnotationIdentifier(annotation, input.annotationEntryToColorMap)}

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: https://chromium.googlesource.com/chromium/src
 Version: N/A
-Revision: 7b471f64da6b27f50ddd9944c7246a80dc726b40
+Revision: b49b82a652effc8081624941a4f102e6ac80fba9
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/front_end/ui/components/suggestion_input/SuggestionInput.ts

@@ -217,16 +217,21 @@ class SuggestionBox extends LitElement {
       return;
     }
 
-    // clang-format off
     return html`<style>${contentEditableStyles}</style><ul class="suggestions">
-      ${this.#suggestions.map((suggestion, index) => html`
-        <li class=${classMap({selected: index === this.cursor})}
-            @mousedown=${this.#dispatchSuggestEvent.bind(this, suggestion)}
-            jslog=${VisualLogging.item('suggestion').track({ click: true, resize: true })}>
+      ${this.#suggestions.map((suggestion, index) => {
+      return html`<li
+          class=${classMap({
+        selected: index === this.cursor,
+      })}
+          @mousedown=${this.#dispatchSuggestEvent.bind(this, suggestion)}
+          jslog=${VisualLogging.item('suggestion').track({
+        click: true,
+      })}
+        >
           ${suggestion}
-        </li>`)}
+        </li>`;
+    })}
     </ul>`;
-    // clang-format on
   }
 }
 

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

@@ -475,7 +475,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
         aria-level=${depth + 1}
         aria-posinset=${positionInSet + 1}
         class=${listItemClasses}
-        jslog=${VisualLogging.treeItem(node.jslogContext).track({click: true, resize: true, keydown: 'ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Enter|Space|Home|End'})}
+        jslog=${VisualLogging.treeItem(node.jslogContext).track({click: true, keydown: 'ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Enter|Space|Home|End'})}
         @click=${this.#onNodeClick}
         track-dom-node-to-tree-node=${trackDOMNodeToTreeNode(this.#domNodeToTreeNodeMap, node)}
         ${Lit.Directives.ref(domNode => {