chrome-devtools-frontend 1.0.1581449 → 1.0.1581708

package/front_end/panels/application/ResourcesPanel.ts

@@ -37,9 +37,13 @@ export class ResourcesPanel extends UI.Panel.PanelWithSidebar {
   private cookieView: CookieItemsView|null;
   private deviceBoundSessionsView: DeviceBoundSessionsView|null;
   private readonly sidebar: ApplicationPanelSidebar;
+  mode: 'default'|'node' = 'default';
 
-  private constructor() {
+  private constructor(
+      mode: 'default'|'node' = 'default',
+  ) {
     super('resources');
+    this.mode = mode;
     this.registerRequiredCSS(resourcesPanelStyles);
 
     this.resourcesLastSelectedItemSetting =
@@ -68,11 +72,12 @@ export class ResourcesPanel extends UI.Panel.PanelWithSidebar {
   }
 
   static instance(opts: {
-    forceNew: boolean|null,
-  } = {forceNew: null}): ResourcesPanel {
-    const {forceNew} = opts;
+    forceNew?: boolean|null,
+    mode?: 'default'|'node',
+  } = {forceNew: null, mode: 'default'}): ResourcesPanel {
+    const {forceNew, mode} = opts;
     if (!resourcesPanelInstance || forceNew) {
-      resourcesPanelInstance = new ResourcesPanel();
+      resourcesPanelInstance = new ResourcesPanel(mode);
     }
 
     return resourcesPanelInstance;

package/front_end/panels/common/AiCodeCompletionTeaser.ts

@@ -73,12 +73,12 @@ const UIStringsNotTranslate = {
    * @description Code generation disclaimer item text for the fre dialog.
    */
   freDisclaimerDescribeCodeInComment:
-      'In Console or Sources, describe the code you need in a comment, then press Ctrl+I to generate it.',
+      'In Console or Sources, describe the code you need in a comment, then press ctrl+i to generate it.',
   /**
    * @description Code generation disclaimer item text for the fre dialog.
    */
   freDisclaimerDescribeCodeInCommentForMacOs:
-      'In Console or Sources, describe the code you need in a comment, then press Cmd+I to generate it.',
+      'In Console or Sources, describe the code you need in a comment, then press cmd+i to generate it.',
   /**
    * @description Privacy disclaimer item text for the fre dialog.
    */
@@ -140,7 +140,17 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
               <span>${lockedString(UIStringsNotTranslate.i)}</span>
             </span>
             </span>&nbsp;${lockedString(UIStringsNotTranslate.toTurnOnCodeSuggestions)}&nbsp;
-            <span role="button" class="ai-code-completion-teaser-dismiss" @click=${input.onDismiss}
+            <span role="button" class="ai-code-completion-teaser-dismiss"
+              tabindex="0"
+              @click=${input.onDismiss}
+              @keydown=${(e: KeyboardEvent) => {
+                // Handle Enter and Space events to make dismiss button accessible for only keyboard users.
+                if (e.key === 'Enter' || e.key === ' ') {
+                  input.onDismiss(e);
+                  e.stopPropagation();
+                  e.preventDefault();
+                }
+              }}
               jslog=${VisualLogging.action('ai-code-completion-teaser.dismiss').track({click: true})}>
                 ${lockedString(UIStringsNotTranslate.dontShowAgain)}
             </span>

package/front_end/panels/common/aiCodeCompletionTeaser.css

@@ -26,6 +26,12 @@
         .ai-code-completion-teaser-dismiss {
             text-decoration: underline;
             cursor: pointer;
+
+            &:focus-visible {
+                border-radius: var(--sys-shape-corner-extra-small);
+                outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
+                outline-offset: 0;
+            }
         }
 
         .ai-code-completion-teaser-action {

package/front_end/panels/console_counters/WarningErrorCounter.ts

@@ -12,9 +12,11 @@ import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import type * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as IssueCounter from '../../ui/components/issue_counter/issue_counter.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import {html, nothing, render} from '../../ui/lit/lit.js';
+import * as Lit from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
+const {html, nothing, render} = Lit;
+
 const UIStrings = {
   /**
    * @description The console error count in the Warning Error Counter shown in the main toolbar (top-left in DevTools). The error count refers to the number of errors currently present in the JavaScript console.
@@ -95,21 +97,25 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
 
   render(
       html`<div class="status-buttons"
-         ><icon-button
+         >${
+          errors + warnings ? html`<icon-button
             .data=${iconData}
             title=${consoleTitle}
-            class=${'small' + warnings || errors ? nothing as unknown as string : 'hidden'}
+            class=${'small'}
             jslog=${VisualLogging.counter('console').track({
-        click: true
-      })}
-         ></icon-button><devtools-issue-counter
-            class=${'main-toolbar' + (issues ? '' : ' hidden')}
+            click: true
+          })}
+         ></icon-button>` :
+                              nothing}${
+          issues ? html`<devtools-issue-counter
+            class=${'main-toolbar'}
             title=${issuesTitle}
             .data=${issueCounterData}
             jslog=${VisualLogging.counter('issue').track({
-        click: true
-      })}
-         ></devtools-issue-counter></div>`,
+            click: true
+          })}
+         ></devtools-issue-counter>` :
+                   nothing}</div>`,
       target);
 };
 

package/front_end/panels/elements/ComputedStyleWidget.ts

@@ -53,7 +53,7 @@ import {categorizePropertyName, type Category, DefaultCategoryOrder} from './Pro
 import {Renderer, rendererBase, type RenderingContext, StringRenderer, URLRenderer} from './PropertyRenderer.js';
 import {StylePropertiesSection} from './StylePropertiesSection.js';
 
-const {html} = Lit;
+const {html, render} = Lit;
 
 const UIStrings = {
   /**
@@ -197,7 +197,7 @@ const createTraceElement =
       return trace;
     };
 
-/** clang-format off **/
+// clang-format off
 class ColorRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.ColorMatch) {
   // clang-format on
   override render(match: SDK.CSSPropertyParserMatchers.ColorMatch, context: RenderingContext): Node[] {
@@ -261,21 +261,47 @@ type ComputedStyleData = {
   name: string,
 };
 
+interface ComputedStyleWidgetInput {
+  computedStylesTree: TreeOutline.TreeOutline.TreeOutline<ComputedStyleData>;
+  toolbar: HTMLElement;
+  hasMatches: boolean;
+  computedStyleModel: ComputedStyleModule.ComputedStyleModel.ComputedStyleModel;
+}
+
+type View = (input: ComputedStyleWidgetInput, output: null, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW: View = (input, _output, target) => {
+  // clang-format off
+  render(html`
+    <div class="styles-sidebar-pane-toolbar">${input.toolbar}</div>
+    <div class="computed-style-tree-outline-container">
+      ${input.computedStylesTree}
+    </div>
+    ${!input.hasMatches ? html`<div class="gray-info-message">${i18nString(UIStrings.noMatchingProperty)}</div>` : ''}
+    <div class="platform-fonts-widget-container">
+      <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(PlatformFontsWidget, { sharedModel: input.computedStyleModel})}></devtools-widget>
+    </div>
+  `, target);
+  // clang-format on
+};
+
 export class ComputedStyleWidget extends UI.Widget.VBox {
   private computedStyleModel: ComputedStyleModule.ComputedStyleModel.ComputedStyleModel;
   private readonly showInheritedComputedStylePropertiesSetting: Common.Settings.Setting<boolean>;
   private readonly groupComputedStylesSetting: Common.Settings.Setting<boolean>;
   input: UI.Toolbar.ToolbarInput;
   private filterRegex: RegExp|null;
-  private readonly noMatchesElement: HTMLElement;
   private readonly linkifier: Components.Linkifier.Linkifier;
   private readonly imagePreviewPopover: ImagePreviewPopover;
 
   #computedStylesTree = new TreeOutline.TreeOutline.TreeOutline<ComputedStyleData>();
   #treeData?: TreeOutline.TreeOutline.TreeOutlineData<ComputedStyleData>;
+  readonly #view: View;
+  private readonly toolbarElement: HTMLElement;
 
   constructor(computedStyleModel: ComputedStyleModule.ComputedStyleModel.ComputedStyleModel) {
     super({useShadowDom: true});
+    this.#view = DEFAULT_VIEW;
     this.registerRequiredCSS(computedStyleSidebarPaneStyles);
 
     this.contentElement.classList.add('styles-sidebar-computed-style-widget');
@@ -295,8 +321,12 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
       this.requestUpdate();
     });
 
-    const hbox = this.contentElement.createChild('div', 'hbox styles-sidebar-pane-toolbar');
-    const toolbar = hbox.createChild('devtools-toolbar', 'styles-pane-toolbar');
+    this.toolbarElement = document.createElement('div');
+    this.toolbarElement.classList.add('hbox', 'styles-sidebar-pane-toolbar');
+    const toolbar = document.createElement('devtools-toolbar');
+    toolbar.classList.add('styles-pane-toolbar');
+    this.toolbarElement.appendChild(toolbar);
+
     const filterInput = new UI.Toolbar.ToolbarFilter(undefined, 1, 1, undefined, undefined, false);
     filterInput.addEventListener(UI.Toolbar.ToolbarInput.Event.TEXT_CHANGED, this.onFilterChanged, this);
     toolbar.appendToolbarItem(filterInput);
@@ -308,11 +338,6 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
     toolbar.appendToolbarItem(
         new UI.Toolbar.ToolbarSettingCheckbox(this.groupComputedStylesSetting, undefined, i18nString(UIStrings.group)));
 
-    this.noMatchesElement = this.contentElement.createChild('div', 'gray-info-message');
-    this.noMatchesElement.textContent = i18nString(UIStrings.noMatchingProperty);
-
-    this.contentElement.appendChild(this.#computedStylesTree);
-
     this.linkifier = new Components.Linkifier.Linkifier(maxLinkLength);
 
     this.imagePreviewPopover = new ImagePreviewPopover(this.contentElement, event => {
@@ -323,8 +348,7 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
       return null;
     }, () => this.computedStyleModel.node);
 
-    const fontsWidget = new PlatformFontsWidget(this.computedStyleModel);
-    fontsWidget.show(this.contentElement);
+    this.#updateView({hasMatches: true});
   }
 
   override onResize(): void {
@@ -342,11 +366,24 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
     UI.Context.Context.instance().setFlavor(ComputedStyleWidget, null);
   }
 
+  /**
+   * @param input.hasMatches Whether any properties matched the current filter (or if any properties exist at all).
+   */
+  #updateView({hasMatches}: {hasMatches: boolean}): void {
+    this.#view(
+        {
+          computedStylesTree: this.#computedStylesTree,
+          toolbar: this.toolbarElement,
+          hasMatches,
+          computedStyleModel: this.computedStyleModel,
+        },
+        null, this.contentElement);
+  }
+
   override async performUpdate(): Promise<void> {
-    const [nodeStyles, matchedStyles] =
-        await Promise.all([this.computedStyleModel.fetchComputedStyle(), this.fetchMatchedCascade()]);
+    const {computedStyle: nodeStyles, matchedStyles} = await this.computedStyleModel.fetchAllComputedStyleInfo();
     if (!nodeStyles || !matchedStyles) {
-      this.noMatchesElement.classList.remove('hidden');
+      this.#updateView({hasMatches: false});
       return;
     }
     const shouldGroupComputedStyles = this.groupComputedStylesSetting.get();
@@ -357,25 +394,6 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
     }
   }
 
-  private async fetchMatchedCascade(): Promise<SDK.CSSMatchedStyles.CSSMatchedStyles|null> {
-    const node = this.computedStyleModel.node;
-    if (!node || !this.computedStyleModel.cssModel()) {
-      return null;
-    }
-
-    const cssModel = this.computedStyleModel.cssModel();
-    if (!cssModel) {
-      return null;
-    }
-
-    return await cssModel.cachedMatchedCascadeForNode(node).then(validateStyles.bind(this));
-
-    function validateStyles(this: ComputedStyleWidget, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles|null):
-        SDK.CSSMatchedStyles.CSSMatchedStyles|null {
-      return matchedStyles && matchedStyles.node() === this.computedStyleModel.node ? matchedStyles : null;
-    }
-  }
-
   private async rebuildAlphabeticalList(
       nodeStyle: ComputedStyleModule.ComputedStyleModel.ComputedStyle,
       matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles): Promise<void> {
@@ -426,7 +444,7 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
     this.linkifier.reset();
     const cssModel = this.computedStyleModel.cssModel();
     if (!nodeStyle || !matchedStyles || !cssModel) {
-      this.noMatchesElement.classList.remove('hidden');
+      this.#updateView({hasMatches: false});
       return;
     }
 
@@ -648,7 +666,7 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
       defaultRenderer: this.#treeData.defaultRenderer,
       compact: this.#treeData.compact,
     };
-    this.noMatchesElement.classList.toggle('hidden', Boolean(tree.length));
+    this.#updateView({hasMatches: Boolean(tree.length)});
   }
 
   private async filterGroupLists(): Promise<void> {
@@ -675,7 +693,7 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
       compact: this.#treeData.compact,
     };
     await this.#computedStylesTree.expandRecursively(0);
-    this.noMatchesElement.classList.toggle('hidden', Boolean(tree.length));
+    this.#updateView({hasMatches: Boolean(tree.length)});
   }
 }
 

package/front_end/panels/elements/PlatformFontsWidget.ts

@@ -78,24 +78,37 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
 };
 
 export class PlatformFontsWidget extends UI.Widget.VBox {
-  private readonly sharedModel: ComputedStyle.ComputedStyleModel.ComputedStyleModel;
   readonly #view: View;
+  #sharedModel: ComputedStyle.ComputedStyleModel.ComputedStyleModel|null = null;
 
-  constructor(sharedModel: ComputedStyle.ComputedStyleModel.ComputedStyleModel, view: View = DEFAULT_VIEW) {
-    super({useShadowDom: true});
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
     this.#view = view;
     this.registerRequiredCSS(platformFontsWidgetStyles);
+  }
+
+  get sharedModel(): ComputedStyle.ComputedStyleModel.ComputedStyleModel|null {
+    return this.#sharedModel;
+  }
+
+  set sharedModel(model: ComputedStyle.ComputedStyleModel.ComputedStyleModel) {
+    if (model !== this.sharedModel) {
+      this.sharedModel?.removeEventListener(
+          ComputedStyle.ComputedStyleModel.Events.CSS_MODEL_CHANGED, this.requestUpdate, this);
+      this.sharedModel?.removeEventListener(
+          ComputedStyle.ComputedStyleModel.Events.COMPUTED_STYLE_CHANGED, this.requestUpdate, this);
+
+      model.addEventListener(ComputedStyle.ComputedStyleModel.Events.CSS_MODEL_CHANGED, this.requestUpdate, this);
+      model.addEventListener(ComputedStyle.ComputedStyleModel.Events.COMPUTED_STYLE_CHANGED, this.requestUpdate, this);
+    }
 
-    this.sharedModel = sharedModel;
-    this.sharedModel.addEventListener(
-        ComputedStyle.ComputedStyleModel.Events.CSS_MODEL_CHANGED, this.requestUpdate, this);
-    this.sharedModel.addEventListener(
-        ComputedStyle.ComputedStyleModel.Events.COMPUTED_STYLE_CHANGED, this.requestUpdate, this);
+    this.#sharedModel = model;
+    void this.requestUpdate();
   }
 
   override async performUpdate(): Promise<void> {
-    const cssModel = this.sharedModel.cssModel();
-    const node = this.sharedModel.node;
+    const cssModel = this.#sharedModel?.cssModel();
+    const node = this.#sharedModel?.node;
     if (!node || !cssModel) {
       this.#view({platformFonts: null}, {}, this.contentElement);
       return;

package/front_end/panels/greendev/GreenDevPanel.css

@@ -234,8 +234,49 @@
 }
 
 .green-dev-floaty-disclaimer {
-  font-size: 14px;
+  font-size: 15px;
   color: #666;
   text-align: center;
   margin-top: 8px;
+  position: relative; /* For tooltip positioning */
+}
+
+.disclaimer-link {
+  color: #666; /* Match text color */
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.disclaimer-tooltip {
+  display: none;
+  position: absolute;
+  bottom: 100%; /* Position above */
+  left: 50%;
+  transform: translateX(-50%);
+  width: 300px;
+  padding: 12px;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgb(0 0 0 / 20%);
+  z-index: 1000;
+  text-align: left;
+  font-size: 16px;
+  line-height: 1.4;
+  color: #333;
+  white-space: normal; /* Ensure text wraps */
+}
+
+.disclaimer-link:hover + .disclaimer-tooltip,
+.disclaimer-tooltip:hover {
+  display: block;
+}
+
+.learn-more-link {
+  color: #0b57d0;
+  text-decoration: none;
+}
+
+.learn-more-link:hover {
+  text-decoration: underline;
 }

package/front_end/panels/greendev/GreenDevPanel.ts

@@ -4,6 +4,8 @@
 /* eslint-disable @devtools/no-imperative-dom-api */
 
 import type * as Common from '../../core/common/common.js';
+import * as Host from '../../core/host/host.js';
+import type * 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 UI from '../../ui/legacy/legacy.js';
@@ -186,7 +188,34 @@ export class GreenDevPanel extends UI.Panel.Panel {
 
       const disclaimer = document.createElement('div');
       disclaimer.className = 'green-dev-floaty-disclaimer';
-      disclaimer.textContent = 'Relevant data is sent to Google';
+
+      const link = document.createElement('span');
+      link.className = 'disclaimer-link';
+      link.textContent = 'Relevant data';
+      disclaimer.appendChild(link);
+
+      disclaimer.appendChild(document.createTextNode(' is sent to Google'));
+
+      const tooltip = document.createElement('div');
+      tooltip.className = 'disclaimer-tooltip';
+
+      tooltip.appendChild(document.createTextNode(
+          'Chat messages and any data the inspected page can access via Web APIs are sent to Google and may be seen by human reviewers to improve this feature. This is an experimental AI feature and won\'t always get it right.'));
+      tooltip.appendChild(document.createElement('br'));
+      tooltip.appendChild(document.createElement('br'));
+
+      const learnMore = document.createElement('a');
+      const href = 'https://developer.chrome.com/docs/devtools/ai-assistance' as Platform.DevToolsPath.UrlString;
+      learnMore.href = href;
+      learnMore.className = 'learn-more-link';
+      learnMore.textContent = 'Learn about AI in DevTools';
+      learnMore.addEventListener('click', event => {
+        event.preventDefault();
+        Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(href);
+      });
+      tooltip.appendChild(learnMore);
+
+      disclaimer.appendChild(tooltip);
       blueCard.appendChild(disclaimer);
 
       content.appendChild(blueCard);

package/front_end/panels/network/RequestInitiatorView.ts

@@ -184,21 +184,18 @@ export class RequestInitiatorView extends UI.Widget.VBox {
     if (!initiator?.stack) {
       return null;
     }
+    const targetManager = SDK.TargetManager.TargetManager.instance();
     const networkManager = SDK.NetworkManager.NetworkManager.forRequest(request);
-    const target = networkManager ? networkManager.target() : undefined;
+    const target = networkManager?.target() ?? targetManager.primaryPageTarget() ?? targetManager.rootTarget();
+    let stackTrace: StackTrace.StackTrace.StackTrace|null = null;
+    const preview = new Components.JSPresentationUtils.StackTracePreviewContent(
+        undefined, target ?? undefined, linkifier, {tabStops: focusableLink});
     if (target) {
-      const stackTrace = await Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()
-                             .createStackTraceFromProtocolRuntime(initiator.stack, target);
-      const preview = new Components.JSPresentationUtils.StackTracePreviewContent(
-          undefined, target, linkifier, {tabStops: focusableLink});
+      stackTrace = await Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()
+                       .createStackTraceFromProtocolRuntime(initiator.stack, target);
       preview.stackTrace = stackTrace;
-      return {preview, stackTrace};
     }
-    return {
-      preview: new Components.JSPresentationUtils.StackTracePreviewContent(
-          undefined, target, linkifier, {runtimeStackTrace: initiator.stack, tabStops: focusableLink}),
-      stackTrace: null
-    };
+    return {preview, stackTrace};
   }
 
   override performUpdate(): void {

package/front_end/panels/network/RequestTimingView.ts

@@ -576,7 +576,7 @@ export class RequestTimingView extends UI.Widget.VBox {
       calculator: this.#calculator,
       requestStartTime: this.#request.startTime,
       requestIssueTime: this.#request.issueTime(),
-      requestUnfinished: false,
+      requestUnfinished: !this.#request.finished,
       fetchDetails: this.#fetchDetailsTree(),
       routerDetails: this.#routerDetailsTree(),
       wasThrottled: conditions?.urlPattern ? conditions : undefined,

package/front_end/panels/settings/KeybindsSettingsTab.ts

@@ -222,8 +222,9 @@ export class KeybindsSettingsTab extends UI.Widget.VBox implements UI.ListContro
     return 0;
   }
 
-  isItemSelectable(_item: KeybindsItem): boolean {
-    return true;
+  isItemSelectable(item: KeybindsItem): boolean {
+    // Category headers (UI.ActionRegistration.ActionCategory) should not be selectable
+    return item instanceof UI.ActionRegistration.Action;
   }
 
   selectedItemChanged(
@@ -314,7 +315,7 @@ export class KeybindsSettingsTab extends UI.Widget.VBox implements UI.ListContro
     }
     this.list.refreshAllItems();
     if (!this.list.selectedItem()) {
-      this.list.selectItem(this.items.at(0));
+      this.list.selectFirstItem();
     }
   }
 

package/front_end/panels/sources/OutlineQuickOpen.ts

@@ -179,6 +179,25 @@ export function outline(state: CodeMirror.EditorState): OutlineItem[] {
             ])) {
           let title = state.sliceDoc(cursor.from, cursor.to);
           const {lineNumber, columnNumber} = toLineColumn(cursor.from);
+          let hasEquals = false;
+          let node: CodeMirror.SyntaxNode|null = cursor.node;
+          while (node && node.name !== 'AssignmentExpression' && node.name !== 'VariableDeclaration') {
+            let sibling = node.nextSibling;
+            while (sibling) {
+              if (sibling.name === 'Equals') {
+                hasEquals = true;
+                break;
+              }
+              sibling = sibling.nextSibling;
+            }
+            if (hasEquals) {
+              break;
+            }
+            node = node.parent;
+          }
+          if (!hasEquals) {
+            break;
+          }
           while (cursor.name as string !== 'Equals') {
             if (!cursor.next()) {
               return items;

package/front_end/panels/timeline/TimelinePanel.ts

@@ -3041,6 +3041,31 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     this.#setActiveInsight({model: insightModel, insightSetKey}, {highlightInsight: true});
   }
 
+  static async executeRecordAndReload(): Promise<Trace.TraceModel.ParsedTrace> {
+    await UI.ViewManager.ViewManager.instance().showView('timeline');
+    const panelInstance = TimelinePanel.instance();
+
+    const result: EventTypes[Events.RECORDING_COMPLETED] = await new Promise(resolve => {
+      function listener(e: Common.EventTarget.EventTargetEvent<EventTypes[Events.RECORDING_COMPLETED]>): void {
+        resolve(e.data);
+        panelInstance.removeEventListener(Events.RECORDING_COMPLETED, listener);
+      }
+      panelInstance.addEventListener(Events.RECORDING_COMPLETED, listener);
+      panelInstance.recordReload();
+    });
+
+    if ('errorText' in result) {
+      throw new Error(result.errorText);
+    }
+
+    const trace = panelInstance.model.parsedTrace(result.traceIndex);
+    if (!trace) {
+      throw new Error('Failed to parse trace');
+    }
+
+    return trace;
+  }
+
   static async *
       handleExternalRecordRequest(): AsyncGenerator<
           AiAssistanceModel.AiAgent.ExternalRequestResponse, AiAssistanceModel.AiAgent.ExternalRequestResponse> {

package/front_end/third_party/lighthouse/README.chromium

@@ -1,7 +1,7 @@
 Name: Lighthouse
 Short Name: lighthouse
-Version: 13.0.1
-Revision: 6ca156ba2950a5220f9f2c8468eee88842eff39a
+Version: 13.0.2
+Revision: 440f8bf87117ef61dc970c3ce4cebf91d46eb181
 Update Mechanism: Manual
 URL: https://github.com/GoogleChrome/lighthouse
 License: Apache-2.0