chrome-devtools-frontend 1.0.1608453 → 1.0.1609381

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

@@ -482,7 +482,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 +492,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 +524,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 +565,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 +591,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>
   `;
@@ -761,6 +761,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 +778,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 +786,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 +821,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 +1545,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 +1568,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/chatMessage.css

@@ -456,6 +456,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/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/ReportingApiTreeElement.ts

@@ -8,6 +8,7 @@ import type * as Platform from '../../core/platform/platform.js';
 import {createIcon} from '../../ui/kit/kit.js';
 
 import {ApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
+import {CrashReportContextView} from './CrashReportContextView.js';
 import {ReportingApiView} from './ReportingApiView.js';
 import type {ResourcesPanel} from './ResourcesPanel.js';
 
@@ -16,19 +17,32 @@ const UIStrings = {
    * @description Label for an item in the Application Panel Sidebar of the Application panel
    */
   reportingApi: 'Reporting API',
+  /**
+   * @description Label for the Crash Report Context child item in the Reporting API section.
+   */
+  crashReportContext: 'Crash Report Context',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/application/ReportingApiTreeElement.ts', UIStrings);
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class ReportingApiTreeElement extends ApplicationPanelTreeElement {
   private view?: ReportingApiView;
+  #childrenInitialized = false;
 
   constructor(storagePanel: ResourcesPanel) {
-    super(storagePanel, i18nString(UIStrings.reportingApi), false, 'reporting-api');
+    super(storagePanel, i18nString(UIStrings.reportingApi), true, 'reporting-api');
     const icon = createIcon('document');
     this.setLeadingIcons([icon]);
   }
 
+  override onattach(): void {
+    super.onattach();
+    if (!this.#childrenInitialized) {
+      this.#childrenInitialized = true;
+      this.appendChild(new CrashReportContextTreeElement(this.resourcesPanel));
+    }
+  }
+
   override get itemURL(): Platform.DevToolsPath.UrlString {
     return 'reportingApi://' as Platform.DevToolsPath.UrlString;
   }
@@ -43,3 +57,28 @@ export class ReportingApiTreeElement extends ApplicationPanelTreeElement {
     return false;
   }
 }
+
+export class CrashReportContextTreeElement extends ApplicationPanelTreeElement {
+  private view?: CrashReportContextView;
+
+  constructor(storagePanel: ResourcesPanel) {
+    super(storagePanel, i18nString(UIStrings.crashReportContext), false, 'crash-report-context');
+    const icon = createIcon('table');
+    this.setLeadingIcons([icon]);
+  }
+
+  override get itemURL(): Platform.DevToolsPath.UrlString {
+    return 'reportingApi://crash-report-context' as Platform.DevToolsPath.UrlString;
+  }
+
+  override onselect(selectedByUser?: boolean): boolean {
+    super.onselect(selectedByUser);
+    if (!this.view) {
+      this.view = new CrashReportContextView();
+    }
+    this.view.requestUpdate();
+    this.showView(this.view);
+    Host.userMetrics.panelShown('crash-report-context');
+    return false;
+  }
+}

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/WebMCPView.ts

@@ -19,6 +19,7 @@ import * as Adorners from '../../ui/components/adorners/adorners.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import type * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import type * as NodeText from '../../ui/components/node_text/node_text.js';
+import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {
@@ -26,6 +27,7 @@ import {
   html,
   nothing,
   render,
+  type TemplateResult,
 } from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
@@ -299,6 +301,23 @@ function getIconGroupsFromStats(toolStats: ReturnType<typeof calculateToolStats>
   return groups;
 }
 
+export function parsePayload(payload?: unknown): {
+  valueObject: unknown,
+  valueString: string|undefined,
+} {
+  if (payload === undefined) {
+    return {valueObject: undefined, valueString: undefined};
+  }
+  if (typeof payload === 'string') {
+    try {
+      return {valueObject: JSON.parse(payload), valueString: undefined};
+    } catch {
+      return {valueObject: undefined, valueString: payload};
+    }
+  }
+  return {valueObject: payload, valueString: undefined};
+}
+
 export const DEFAULT_VIEW: View = (input, output, target) => {
   const tools = input.tools;
   const stats = calculateToolStats(input.toolCalls);
@@ -393,11 +412,11 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                           <span>${statusString(call)}</span>
                         </div>
                       </td>
-                          ${!input.selectedCall ? html`
-                      <td>${call.input}</td>
-                          <td>${call.result?.output ? JSON.stringify(call.result.output)
+                      ${!input.selectedCall ? html`
+                        <td>${call.input}</td>
+                        <td>${call.result?.output ? JSON.stringify(call.result.output)
                                                     : call.result?.errorText ?? ''}</td>
-                          ` : nothing}
+                        ` : nothing}
                     </tr>
                   `)}
                   </table>`}>
@@ -418,6 +437,16 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                   title=${i18nString(UIStrings.toolDetails)}
                   ${widget(ToolDetailsWidget, {tool: input.selectedCall?.tool})}>
                 </devtools-widget>
+                <devtools-widget
+                  id="inputs"
+                  title=${i18nString(UIStrings.input)}
+                  ${widget(PayloadWidget, parsePayload(input.selectedCall?.input))}>
+                </devtools-widget>
+                <devtools-widget
+                  id="outputs"
+                  title=${i18nString(UIStrings.output)}
+                  ${widget(PayloadWidget, parsePayload(input.selectedCall?.result?.output))}>
+                </devtools-widget>
               </devtools-tabbed-pane>
             </div>
           </devtools-split-view>
@@ -653,6 +682,95 @@ export class WebMCPView extends UI.Widget.VBox {
     this.#view(input, {}, this.contentElement);
   }
 }
+export interface PayloadViewInput {
+  valueObject?: unknown;
+  valueString?: string;
+}
+
+export const PAYLOAD_DEFAULT_VIEW = (input: PayloadViewInput, output: object, target: HTMLElement): void => {
+  if (input.valueObject === undefined && input.valueString === undefined) {
+    render(nothing, target);
+    return;
+  }
+  const isParsable = input.valueObject !== undefined;
+
+  const createPayload = (parsedInput: unknown): TemplateResult => {
+    const object = new SDK.RemoteObject.LocalJSONObject(parsedInput);
+    const section =
+        new ObjectUI.ObjectPropertiesSection.RootElement(new ObjectUI.ObjectPropertiesSection.ObjectTree(object, {
+          readOnly: true,
+          propertiesMode: ObjectUI.ObjectPropertiesSection.ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
+        }));
+    section.title = document.createTextNode(object.description);
+    section.listItemElement.classList.add('source-code', 'object-properties-section');
+    section.childrenListElement.classList.add('source-code', 'object-properties-section');
+    section.expand();
+    return html`<devtools-tree .template=${html`
+          <style>${ObjectUI.ObjectPropertiesSection.objectValueStyles}</style>
+          <style>${ObjectUI.ObjectPropertiesSection.objectPropertiesSectionStyles}</style>
+          <ul role="tree">
+            <devtools-tree-wrapper .treeElement=${section}></devtools-tree-wrapper>
+          </ul>
+        `}></devtools-tree>`;
+  };
+
+  const createSourceText = (text: string): TemplateResult => html`<div class="payload-value source-code">${text}</div>`;
+
+  render(
+      html`
+    <style>${webMCPViewStyles}</style>
+    <div class="call-payload-view">
+      <div class="call-payload-content">
+            ${
+          isParsable ? createPayload(input.valueObject) :
+                       (input.valueString !== undefined ? createSourceText(input.valueString) : nothing)}
+      </div>
+    </div>
+  `,
+      target);
+};
+
+export class PayloadWidget extends UI.Widget.Widget {
+  #valueObject?: unknown;
+  #valueString?: string;
+  #view: typeof PAYLOAD_DEFAULT_VIEW;
+
+  constructor(element?: HTMLElement, view = PAYLOAD_DEFAULT_VIEW) {
+    super(element);
+    this.#view = view;
+  }
+
+  set valueObject(valueObject: unknown) {
+    this.#valueObject = valueObject;
+    this.requestUpdate();
+  }
+
+  get valueObject(): unknown {
+    return this.#valueObject;
+  }
+
+  set valueString(valueString: string|undefined) {
+    this.#valueString = valueString;
+    this.requestUpdate();
+  }
+
+  get valueString(): string|undefined {
+    return this.#valueString;
+  }
+
+  override wasShown(): void {
+    super.wasShown();
+    this.requestUpdate();
+  }
+
+  override performUpdate(): void {
+    const input: PayloadViewInput = {
+      valueObject: this.#valueObject,
+      valueString: this.#valueString,
+    };
+    this.#view(input, {}, this.contentElement);
+  }
+}
 
 export interface ToolDetailsViewInput {
   tool: WebMCP.WebMCPModel.Tool|null|undefined;

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

@@ -27,6 +27,7 @@ import * as OpenedWindowDetailsView from './OpenedWindowDetailsView.js';
 import * as OriginTrialTreeView from './OriginTrialTreeView.js';
 import * as PreloadingView from './preloading/PreloadingView.js';
 import * as PreloadingTreeElement from './PreloadingTreeElement.js';
+import * as ReportingApiTreeElement from './ReportingApiTreeElement.js';
 import * as ReportingApiView from './ReportingApiView.js';
 import * as ResourcesPanel from './ResourcesPanel.js';
 import * as ServiceWorkerCacheViews from './ServiceWorkerCacheViews.js';
@@ -44,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,
@@ -70,6 +72,7 @@ export {
   OriginTrialTreeView,
   PreloadingTreeElement,
   PreloadingView,
+  ReportingApiTreeElement,
   ReportingApiView,
   ResourcesPanel,
   ServiceWorkerCacheViews,

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/application/webMCPView.css

@@ -198,4 +198,16 @@
         flex: auto;
         border-bottom: 1px solid var(--sys-color-divider);
     }
+
+    .call-payload-view {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+    }
+
+    .call-payload-content {
+        padding: var(--sys-size-5);
+        flex: auto;
+        overflow: auto;
+    }
 }

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;
     }