chrome-devtools-frontend 1.0.1608868 → 1.0.1611099

package/front_end/models/trace/EntityMapper.ts

@@ -10,6 +10,8 @@ import * as Helpers from './helpers/helpers.js';
 import type {ParsedTrace} from './ModelImpl.js';
 import type * as Types from './types/types.js';
 
+const mapperCache = new WeakMap<ParsedTrace, EntityMapper>();
+
 export class EntityMapper {
   #parsedTrace: ParsedTrace;
   #entityMappings: Handlers.Helpers.EntityMappings;
@@ -30,6 +32,16 @@ export class EntityMapper {
     this.#thirdPartyEvents = this.#getThirdPartyEvents();
   }
 
+  static getOrCreate(parsedTrace: ParsedTrace): EntityMapper {
+    const cached = mapperCache.get(parsedTrace);
+    if (cached) {
+      return cached;
+    }
+    const instance = new EntityMapper(parsedTrace);
+    mapperCache.set(parsedTrace, instance);
+    return instance;
+  }
+
   #findFirstPartyEntity(): Handlers.Helpers.Entity|null {
     // As a starting point, we consider the first navigation as the 1P.
     const nav =

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -539,15 +539,13 @@ function defaultView(input: ViewInput, output: PanelViewOutput, target: HTMLElem
           <div slot="main" class="main-view">
             ${renderState()}
           </div>
-          <div slot="sidebar" class="sidebar-view">
-            ${shouldShowWalkthrough ? html`
-              <devtools-widget ${widget(WalkthroughView, {
-                message: input.props.walkthrough.activeSidebarMessage,
-                isLoading: input.props.isLoading && walkthroughIsForLastMessage,
-                markdownRenderer: input.props.markdownRenderer,
-                onToggle: input.props.walkthrough.onToggle,
-              })}></devtools-widget>` : Lit.nothing}
-          </div>
+          ${shouldShowWalkthrough ? html`
+            <devtools-widget slot="sidebar" ${widget(WalkthroughView, {
+              message: input.props.walkthrough.activeSidebarMessage,
+              isLoading: input.props.isLoading && walkthroughIsForLastMessage,
+              markdownRenderer: input.props.markdownRenderer,
+              onToggle: input.props.walkthrough.onToggle,
+            })}></devtools-widget>` : Lit.nothing}
         </devtools-split-view>
       </div>
     `, target);

package/front_end/panels/ai_assistance/components/ChatMessage.ts

@@ -199,7 +199,7 @@ const UIStringsNotTranslate = {
   /**
    * @description The title of the button that allows exporting the conversation for agents.
    */
-  exportForAgents: 'Copy for your coding agent',
+  exportForAgents: 'Copy to coding agent',
   /**
    * @description Title for the bottom up thread activity widget.
    */
@@ -417,6 +417,7 @@ export const DEFAULT_VIEW = (input: ChatMessageViewInput, output: ViewOutput, ta
         ` : Lit.nothing}
         ${input.showActions ? renderActions(input, output) : Lit.nothing}
       </div>
+      ${hasAiV2 ? renderSideEffectStepsUI(input, steps) : Lit.nothing}
     </section>
   `, target);
   // clang-format on
@@ -482,7 +483,6 @@ function renderStepCode(step: Step): Lit.LitTemplate {
       <devtools-code-block
         .code=${step.code.trim()}
         .codeLang=${'js'}
-        .displayLimit=${MAX_NUM_LINES_IN_CODEBLOCK}
         .displayNotice=${!Boolean(step.output)}
         .header=${codeHeadingText}
         .showCopyButton=${true}
@@ -493,7 +493,6 @@ function renderStepCode(step: Step): Lit.LitTemplate {
     <devtools-code-block
       .code=${step.output}
       .codeLang=${'js'}
-      .displayLimit=${MAX_NUM_LINES_IN_CODEBLOCK}
       .displayNotice=${true}
       .header=${lockedString(UIStringsNotTranslate.dataReturned)}
       .showCopyButton=${false}
@@ -526,7 +525,6 @@ function renderStepDetails({
       <devtools-code-block
         .code=${contextDetail.text}
         .codeLang=${contextDetail.codeLang || ''}
-        .displayLimit=${MAX_NUM_LINES_IN_CODEBLOCK}
         .displayNotice=${false}
         .header=${contextDetail.title}
         .showCopyButton=${true}
@@ -568,9 +566,14 @@ function renderWalkthroughSidebarButton(
   const variant = hasOneStepWithWidget && !input.isLoading ? Buttons.Button.Variant.TONAL : Buttons.Button.Variant.TEXT;
   const icon = AiAssistanceModel.AiUtils.getIconName();
 
+  const toggleContainerClasses = Lit.Directives.classMap({
+    'walkthrough-toggle-container': true,
+    // We only apply the widget styling when loading is complete
+    'has-widgets': hasOneStepWithWidget && !input.isLoading,
+  });
   // clang-format off
   return html`
-    <div class="walkthrough-toggle-container ${hasOneStepWithWidget ? 'has-widgets' : ''}">
+    <div class=${toggleContainerClasses}>
       ${input.isLoading ?
         html`<devtools-spinner></devtools-spinner>` :
         html`<devtools-icon name=${icon}></devtools-icon>`}
@@ -589,9 +592,7 @@ function renderWalkthroughSidebarButton(
             // the walkthrough open with an alternative message.
             walkthrough.onOpen(message as ModelChatMessage);
           }
-        }}
->
-        ${title}<devtools-icon class="chevron" .name=${isExpanded ? 'cross' : 'chevron-right'}></devtools-icon>
+        }}>${title}<devtools-icon class="chevron" .name=${isExpanded ? 'cross' : 'chevron-right'}></devtools-icon>
       </devtools-button>
     </div>
   `;
@@ -609,7 +610,6 @@ function renderWalkthroughUI(input: ChatMessageViewInput, steps: Step[]): Lit.Li
     // No steps = no walkthrough UI in the chat view.
     return Lit.nothing;
   }
-  const sideEffectSteps = steps.filter(s => s.requestApproval);
   // If the walkthrough is in the sidebar, we render a button into the
   // ChatView to open it.
   const openWalkThroughSidebarButton =
@@ -622,22 +622,6 @@ function renderWalkthroughUI(input: ChatMessageViewInput, steps: Step[]): Lit.Li
       input.walkthrough.inlineExpandedMessages.includes(input.message as ModelChatMessage) :
       (input.walkthrough.isExpanded && input.walkthrough.activeSidebarMessage === input.message);
 
-  // When a side-effect step is present and needs user approval, it's
-  // shown in the main chat UI, regardless of if the walkthrough is
-  // open or closed.
-  // Once the user has approved/denied it, it goes back into the sidebar.
-  // clang-format off
-  const sideEffectStepsUI = sideEffectSteps.length > 0 ? sideEffectSteps.map(step => html`
-    <div class="side-effect-container">
-      ${renderStep({
-         step,
-         isLoading: input.isLoading,
-         markdownRenderer: input.markdownRenderer,
-         isLast: true
-      })}
-    </div> `) : Lit.nothing;
-  // clang-format on
-
   // clang-format off
   const walkthroughInline = input.walkthrough.isInlined ? html`
     <div class="walkthrough-container">
@@ -656,7 +640,26 @@ function renderWalkthroughUI(input: ChatMessageViewInput, steps: Step[]): Lit.Li
   return html`
     ${openWalkThroughSidebarButton}
     ${walkthroughInline}
-    ${sideEffectStepsUI}
+  `;
+  // clang-format on
+}
+
+function renderSideEffectStepsUI(input: ChatMessageViewInput, steps: Step[]): Lit.LitTemplate {
+  const sideEffectSteps = steps.filter(s => s.requestApproval);
+  if (sideEffectSteps.length === 0) {
+    return Lit.nothing;
+  }
+  // clang-format off
+  return html`
+    ${sideEffectSteps.map(step => html`
+      <div class="side-effect-container">
+        ${renderStep({
+           step,
+           isLoading: input.isLoading,
+           markdownRenderer: input.markdownRenderer,
+           isLast: true
+        })}
+      </div> `)}
   `;
   // clang-format on
 }
@@ -761,6 +764,15 @@ async function makeComputedStyleWidget(widgetData: ComputedStyleAiWidget): Promi
   }
   const styles = new ComputedStyle.ComputedStyleModel.ComputedStyle(domNodeForId, widgetData.data.computedStyles);
 
+  let filterText: RegExp|null = null;
+  try {
+    filterText = new RegExp(widgetData.data.properties.join('|'), 'i');
+  } catch {
+    // If the AI provides an invalid regex (e.g. "*"), we don't want to crash.
+    // We can just skip the widget in this case.
+    return null;
+  }
+
   // clang-format off
   const renderedWidget = html`<devtools-widget
       class="computed-styles-widget" ${widget(Elements.ComputedStyleWidget.ComputedStyleWidget, {
@@ -769,7 +781,7 @@ async function makeComputedStyleWidget(widgetData: ComputedStyleAiWidget): Promi
         // This disables showing the nested traces and detailed information in the widget.
         propertyTraces: null,
         allowUserControl: false,
-        filterText: new RegExp(widgetData.data.properties.join('|'), 'i'),
+        filterText,
         enableNarrowViewResizing: false,
       })}></devtools-widget>`;
   // clang-format on
@@ -777,11 +789,19 @@ async function makeComputedStyleWidget(widgetData: ComputedStyleAiWidget): Promi
   return {
     renderedWidget,
     revealable: new Elements.ElementsPanel.NodeComputedStyles(domNodeForId),
-    title: html`<devtools-widget
-      ${widget(PanelsCommon.DOMLinkifier.DOMNodeLink, {
-      node: domNodeForId,
-    })}
-    ></devtools-widget>`,
+    // clang-format off
+    title: html`
+      <span class="computed-style-title-wrapper">
+        <span class="computed-style-title-prefix">Computed styles</span>
+        <span class="style-class-wrapper">
+          (<devtools-widget
+            ${widget(PanelsCommon.DOMLinkifier.DOMNodeLink, {
+            node: domNodeForId,
+          })}
+          ></devtools-widget>)
+        </span>
+      </span>`,
+    // clang-format on
   };
 }
 
@@ -804,12 +824,21 @@ async function makeStylePropertiesWidget(widgetData: StylePropertiesAiWidget): P
     return null;
   }
 
+  let filter: RegExp|null = null;
+  try {
+    filter = widgetData.data.selector ? new RegExp(widgetData.data.selector) : null;
+  } catch {
+    // If the AI provides an invalid regex (e.g. "*"), we don't want to crash.
+    // We can just skip the widget in this case.
+    return null;
+  }
+
   // clang-format off
   const renderedWidget = html`<devtools-widget
       class="styling-preview-widget"
       ${widget(Elements.StandaloneStylesContainer.StandaloneStylesContainer, {
       domNode: domNodeForId,
-      filter: widgetData.data.selector ? new RegExp(widgetData.data.selector) : null,
+      filter,
     })}>
   </devtools-widget>`;
   // clang-format on
@@ -1519,7 +1548,7 @@ async function makeTimelineRangeSummaryWidget(widgetData: TimelineRangeSummaryAi
   eventsArray.sort((a, b) => a.ts - b.ts);
 
   const thirdPartyTree = new Timeline.ThirdPartyTreeView.ThirdPartyTreeViewWidget();
-  const mapper = new Trace.EntityMapper.EntityMapper(parsedTrace);
+  const mapper = Trace.EntityMapper.EntityMapper.getOrCreate(parsedTrace);
   thirdPartyTree.model = {selectedEvents: eventsArray, parsedTrace, entityMapper: mapper};
   thirdPartyTree.activeSelection = Timeline.TimelineSelection.selectionFromRangeMicroSeconds(bounds.min, bounds.max);
   thirdPartyTree.refreshTree(true);
@@ -1542,6 +1571,9 @@ async function makeTimelineRangeSummaryWidget(widgetData: TimelineRangeSummaryAi
                 entityMapper: thirdPartyTree.entityMapper(),
               },
               activeSelection: { bounds },
+              onBottomUpButtonClicked: (node: Trace.Extras.TraceTree.Node|null) => {
+                void Common.Revealer.reveal(new TimelineUtils.Helpers.RevealableBottomUpProfile(bounds, node ?? undefined));
+              },
             })}`,
         } as TimelineComponents.TimelineRangeSummaryView.TimelineRangeSummaryViewData,
       })}

package/front_end/panels/ai_assistance/components/ExportForAgentsDialog.ts

@@ -19,7 +19,7 @@ const UIStrings = {
   /**
    * @description Title for the export for agents dialog.
    */
-  exportForAgents: 'Copy for your coding agent',
+  exportForAgents: 'Copy to coding agent',
   /**
    * @description Button text for copying to clipboard.
    */

package/front_end/panels/ai_assistance/components/WalkthroughView.ts

@@ -246,6 +246,7 @@ export class WalkthroughView extends UI.Widget.Widget {
   constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element);
     this.#view = view;
+    this.setMinimumSize(330, 0);
   }
 
   override wasShown(): void {

package/front_end/panels/ai_assistance/components/chatMessage.css

@@ -13,6 +13,8 @@
     align-items: center;
     margin-block: calc(-1 * var(--sys-size-3));
     margin-top: var(--sys-size-5);
+    overflow: hidden;
+    mask-image: linear-gradient(to right, var(--ref-palette-neutral0) calc(100% - var(--sys-size-15)), transparent 100%);
 
     &.not-v2 {
       /* Can be removed when AIv2 ships */
@@ -456,6 +458,19 @@
       white-space: nowrap; /* stop the titles going onto multiple lines */
     }
 
+    /* This widget's title is some text + then a DOM node link, so it
+     * needs some extra styling */
+    .computed-style-title-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      gap: var(--sys-size-3);
+    }
+
+    .computed-style-title-prefix {
+      flex-shrink: 0;
+    }
+
     .widget-reveal-container {
       padding: 0;
       background: none;

package/front_end/panels/ai_assistance/components/walkthroughView.css

@@ -99,23 +99,24 @@
 
   .inline-wrapper {
     display: flex;
-    /* Note: no gap here; the gap is dealt with in padding on the text */
-    align-items: flex-start;
+    align-items: center;
+    gap: var(--sys-size-2);
     justify-content: flex-start;
 
     .inline-icon {
       display: block;
-      margin-top: var(--sys-size-2);
+    margin-top: var(--sys-size-2);
     }
   }
 
   .walkthrough-inline {
-    border-radius: var(--sys-size-5);
+    border-radius: var(--sys-shape-corner-full);
     overflow: hidden;
     width: fit-content;
     max-width: 100%;
 
     &[open] {
+      border-radius: var(--sys-size-5);
       width: auto;
       background-color: var(--sys-color-surface1);
       margin-left: calc(var(--sys-size-6) / 2);

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -1031,6 +1031,14 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     }
   }
 
+  showStorageBucket(bucketInfo: Protocol.Storage.StorageBucketInfo): void {
+    const bucketsModel = SDK.TargetManager.TargetManager.instance().primaryPageTarget()?.model(
+        SDK.StorageBucketsModel.StorageBucketsModel);
+    if (bucketsModel) {
+      this.storageBucketsTreeElement?.getBucketTreeElement(bucketsModel, bucketInfo)?.revealAndSelect(true);
+    }
+  }
+
   private onmousemove(event: MouseEvent): void {
     const nodeUnderMouse = (event.target as Node);
     if (!nodeUnderMouse) {

package/front_end/panels/application/IndexedDBViews.ts

@@ -147,7 +147,7 @@ export class IDBDatabaseView extends ApplicationComponents.StorageMetadataView.S
     super();
 
     this.model = model;
-    this.setShowOnlyBucket(false);
+    this.setShowOnlyBucket(true);
     if (database) {
       this.update(database);
     }

package/front_end/panels/application/ResourcesPanel.ts

@@ -12,6 +12,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {ApplicationPanelSidebar, StorageCategoryView} from './ApplicationPanelSidebar.js';
+import type {StorageMetadataView} from './components/components.js';
 import {CookieItemsView} from './CookieItemsView.js';
 import type {DeviceBoundSessionsModel} from './DeviceBoundSessionsModel.js';
 import {DeviceBoundSessionsView} from './DeviceBoundSessionsView.js';
@@ -260,3 +261,10 @@ export class AttemptViewWithFilterRevealer implements
     sidebar.showPreloadingAttemptViewWithFilter(filter);
   }
 }
+
+export class StorageBucketRevealer implements Common.Revealer.Revealer<StorageMetadataView.StorageBucketRevealInfo> {
+  async reveal(revealInfo: StorageMetadataView.StorageBucketRevealInfo): Promise<void> {
+    const sidebar = await ResourcesPanel.showAndGetSidebar();
+    sidebar.showStorageBucket(revealInfo.bucketInfo);
+  }
+}

package/front_end/panels/application/ServiceWorkerCacheViews.ts

@@ -133,7 +133,7 @@ export class ServiceWorkerCacheView extends UI.View.SimpleView {
                            .model(SDK.StorageBucketsModel.StorageBucketsModel)
                            ?.getBucketByName(cache.storageBucket.storageKey, cache.storageBucket.name);
 
-    this.metadataView.setShowOnlyBucket(false);
+    this.metadataView.setShowOnlyBucket(true);
 
     if (bucketInfo) {
       this.metadataView.setStorageBucket(bucketInfo);

package/front_end/panels/application/application-meta.ts

@@ -174,3 +174,14 @@ Common.Revealer.registerRevealer({
     return new Resources.ResourcesPanel.AttemptViewWithFilterRevealer();
   },
 });
+
+Common.Revealer.registerRevealer({
+  contextTypes() {
+    return maybeRetrieveContextTypes(Resources => [Resources.Components.StorageMetadataView.StorageBucketRevealInfo]);
+  },
+  destination: Common.Revealer.RevealerDestination.APPLICATION_PANEL,
+  async loadRevealer() {
+    const Resources = await loadResourcesModule();
+    return new Resources.ResourcesPanel.StorageBucketRevealer();
+  },
+});

package/front_end/panels/application/application.ts

@@ -45,6 +45,7 @@ import * as TrustTokensTreeElement from './TrustTokensTreeElement.js';
 import * as WebMCPTreeElement from './WebMCPTreeElement.js';
 import * as WebMCPView from './WebMCPView.js';
 
+export * as Components from './components/components.js';
 export {
   ApplicationPanelSidebar,
   AppManifestView,

package/front_end/panels/application/components/StorageMetadataView.ts

@@ -4,7 +4,9 @@
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import '../../../ui/components/report_view/report_view.js';
+import '../../../ui/kit/kit.js';
 
+import * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../generated/protocol.js';
@@ -13,6 +15,7 @@ import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wra
 import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import {html, type LitTemplate, nothing, render, type TemplateResult} from '../../../ui/lit/lit.js';
+import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import storageMetadataViewStyle from './storageMetadataView.css.js';
 
@@ -113,12 +116,17 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/StorageMetadataView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
+export class StorageBucketRevealInfo {
+  constructor(public bucketInfo: Protocol.Storage.StorageBucketInfo) {
+  }
+}
+
 export class StorageMetadataView extends LegacyWrapper.LegacyWrapper.WrappableComponent {
   readonly #shadow = this.attachShadow({mode: 'open'});
   #storageBucketsModel?: SDK.StorageBucketsModel.StorageBucketsModel;
   #storageKey: SDK.StorageKeyManager.StorageKey|null = null;
   #storageBucket: Protocol.Storage.StorageBucketInfo|null = null;
-  #showOnlyBucket = true;
+  #showOnlyBucket = false;
 
   setStorageKey(storageKey: string): void {
     this.#storageKey = SDK.StorageKeyManager.parseStorageKey(storageKey);
@@ -220,20 +228,36 @@ export class StorageMetadataView extends LegacyWrapper.LegacyWrapper.WrappableCo
     const {bucket: {name}, persistent, durability, quota} = this.#storageBucket;
     const isDefault = !name;
 
-    if (!this.#showOnlyBucket) {
+    const renderBucketName = (): TemplateResult => {
       if (isDefault) {
-        return html`
-          ${this.key(i18nString(UIStrings.bucketName))}
-          ${this.value(html`<span class="default-bucket">default</span>`)}`;
+        return html`<span class="default-bucket">${i18nString(UIStrings.defaultBucket)}</span>`;
       }
+      if (!this.#showOnlyBucket) {
+        return html`${name}`;
+      }
+      const revealBucket = (e: Event): void => {
+        e.preventDefault();
+        void Common.Revealer.reveal(
+            new StorageBucketRevealInfo(this.#storageBucket as Protocol.Storage.StorageBucketInfo));
+      };
+      return html`<devtools-link
+        @click=${revealBucket}
+        title=${name}
+        jslog=${VisualLogging.action('storage-bucket').track({
+        click: true
+      })}
+      >${name}</devtools-link>`;
+    };
+
+    if (this.#showOnlyBucket) {
       return html`
         ${this.key(i18nString(UIStrings.bucketName))}
-        ${this.value(name)}`;
+        ${this.value(renderBucketName())}`;
     }
     // clang-format off
     return html`
       ${this.key(i18nString(UIStrings.bucketName))}
-      ${this.value(name || html`<span class="default-bucket">default</span>`)}
+      ${this.value(renderBucketName())}
       ${this.key(i18nString(UIStrings.persistent))}
       ${this.value(persistent ? i18nString(UIStrings.yes) : i18nString(UIStrings.no))}
       ${this.key(i18nString(UIStrings.durability))}

package/front_end/panels/application/components/backForwardCacheView.css

@@ -4,6 +4,10 @@
  * found in the LICENSE file.
  */
 
+:host {
+  overflow: auto;
+}
+
 devtools-report-value {
   overflow: hidden;
 }

package/front_end/panels/application/preloading/components/PreloadingDetailsReportView.ts

@@ -54,6 +54,10 @@ const UIStrings = {
    * @description Text in details
    */
   detailsTargetHint: 'Target hint',
+  /**
+   * @description Text in details
+   */
+  detailsFormSubmission: 'Form submission',
   /**
    * @description Text in details
    */
@@ -62,6 +66,14 @@ const UIStrings = {
    * @description Header of rule set
    */
   detailsRuleSet: 'Rule set',
+  /**
+   * @description Text indicating that the preloading field is true.
+   */
+  yes: 'Yes',
+  /**
+   * @description Text indicating that the preloading field is false.
+   */
+  no: 'No',
   /**
    * @description Description: status
    */
@@ -202,6 +214,7 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
           ${this.#action(isFallbackToPrefetch)}
           ${this.#status(isFallbackToPrefetch)}
           ${this.#targetHint()}
+          ${this.#formSubmission()}
           ${this.#maybePrefetchFailureReason()}
           ${this.#maybePrerenderFailureReason()}
 
@@ -381,6 +394,22 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
     `;
   }
 
+  #formSubmission(): Lit.LitTemplate {
+    assertNotNullOrUndefined(this.#data);
+    const attempt = this.#data.pipeline.getOriginallyTriggered();
+    const hasFormSubmission = attempt.key.formSubmission !== undefined;
+    if (!hasFormSubmission || !this.#isPrerenderLike(attempt.action)) {
+      return Lit.nothing;
+    }
+
+    return html`
+        <devtools-report-key>${i18nString(UIStrings.detailsFormSubmission)}</devtools-report-key>
+        <devtools-report-value>
+          ${attempt.key.formSubmission ? i18nString(UIStrings.yes) : i18nString(UIStrings.no)}
+        </devtools-report-value>
+    `;
+  }
+
   #maybePrerenderFailureReason(): Lit.LitTemplate {
     assertNotNullOrUndefined(this.#data);
     const attempt = this.#data.pipeline.getOriginallyTriggered();

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -2850,6 +2850,10 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   updateDecorations(): void {
+    // Important to keep the entire tree node row as a clickable area for that
+    // node.
+    this.listItemElement.style.setProperty('--indent', this.computeLeftIndent() + 'px');
+
     if (this.isClosingTag()) {
       return;
     }

package/front_end/panels/lighthouse/LighthousePanel.ts

@@ -159,7 +159,6 @@ export class LighthousePanel extends UI.Panel.Panel {
       this.renderStatusView();
       const {lhr, artifacts} = await this.controller.collectLighthouseResults();
       this.buildReportUI(lhr, artifacts);
-      UI.Context.Context.instance().setFlavor(ActiveLighthouseReport, new ActiveLighthouseReport(lhr));
       return {report: lhr};
     } catch (err) {
       this.handleError(err);
@@ -278,6 +277,7 @@ export class LighthousePanel extends UI.Panel.Panel {
     this.statusView.hide();
 
     this.reportSelector.selectNewReport();
+    UI.Context.Context.instance().setFlavor(ActiveLighthouseReport, null);
     this.contentElement.classList.toggle('in-progress', false);
 
     this.startView.show(this.contentElement);
@@ -324,6 +324,8 @@ export class LighthousePanel extends UI.Panel.Panel {
     this.newButton.setEnabled(true);
     this.refreshToolbarUI();
 
+    UI.Context.Context.instance().setFlavor(ActiveLighthouseReport, new ActiveLighthouseReport(lighthouseResult));
+
     const cachedRenderedReport = this.cachedRenderedReports.get(lighthouseResult);
     if (cachedRenderedReport) {
       this.auditResultsElement.appendChild(cachedRenderedReport);

package/front_end/panels/profiler/HeapSnapshotDataGrids.ts

@@ -5,7 +5,7 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as SDK from '../../core/sdk/sdk.js';
-import * as HeapSnapshotModel from '../../models/heap_snapshot_model/heap_snapshot_model.js';
+import * as HeapSnapshotModel from '../../models/heap_snapshot/heap_snapshot.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';

package/front_end/panels/profiler/HeapSnapshotGridNodes.ts

@@ -10,7 +10,7 @@ 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 HeapSnapshotModel from '../../models/heap_snapshot_model/heap_snapshot_model.js';
+import * as HeapSnapshotModel from '../../models/heap_snapshot/heap_snapshot.js';
 import {createIcon} from '../../ui/kit/kit.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as UI from '../../ui/legacy/legacy.js';

package/front_end/panels/profiler/HeapSnapshotView.ts

@@ -11,7 +11,7 @@ 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 HeapSnapshotModel from '../../models/heap_snapshot_model/heap_snapshot_model.js';
+import * as HeapSnapshotModel from '../../models/heap_snapshot/heap_snapshot.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';