chrome-devtools-frontend 1.0.1602348 → 1.0.1603822

package/front_end/models/lighthouse/LighthouseReporterTypes.ts

@@ -82,10 +82,17 @@ export interface ReportJSON {
 export type DetailsJSON =
     |TableDetailsJSON|OpportunityDetailsJSON|FilmstripDetailsJSON|ScreenshotDetailsJSON|DebugDataDetailsJSON;
 
+export interface SubItemsJSON {
+  type: 'subitems';
+  items: Array<Record<string, TableItemValue>>;
+}
+
+export type TableItem = Record<string, TableItemValue|SubItemsJSON|undefined>;
+
 export interface TableDetailsJSON {
   type: 'table';
   headings: TableHeadingJSON[];
-  items: Array<Record<string, TableItemValue>>;
+  items: TableItem[];
   summary?: OpportunitySummary;
 }
 
@@ -96,7 +103,7 @@ export interface TableHeadingJSON {
   itemType?: string;
   subItemsHeading?: {
     key: string,
-    valueType: string,
+    valueType?: string,
   };
 }
 
@@ -109,12 +116,7 @@ export type TableItemValue =|string|number|NodeDetailsJSON|SourceLocationDetails
 export interface OpportunityDetailsJSON {
   type: 'opportunity';
   headings: TableHeadingJSON[];
-  items: Array<{
-    url: string,
-    wastedBytes?: number,
-    wastedMs?: number,
-    totalBytes?: number, [key: string]: unknown,
-  }>;
+  items: TableItem[];
   overallSavingsMs: number;
   overallSavingsBytes?: number;
 }

package/front_end/models/lighthouse/RunTypes.ts

@@ -6,6 +6,7 @@ import type * as Host from '../../core/host/host.js';
 import type * as Platform from '../../core/platform/platform.js';
 
 export type CategoryId = 'performance'|'accessibility'|'best-practices'|'seo';
+export type RunMode = 'navigation'|'timespan'|'snapshot';
 
 export interface Preset {
   setting: Common.Settings.Setting<boolean>;
@@ -33,10 +34,11 @@ export interface Flags {
   disableStorageReset?: boolean;
   throttlingMethod?: string;
   formFactor?: string|boolean;
-  mode?: string|boolean;
+  mode?: RunMode;
 }
 
 export interface RunOverrides {
   categoryIds?: CategoryId[];
+  mode?: RunMode;
   isAIControlled?: boolean;
 }

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -821,7 +821,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       return;
     }
     // If the UI changed, we reset the visibility of the AI Walkthrough.
-    this.#clearWalkthrough();
+    this.#resetWalkthrough();
     this.#walkthrough.isInlined = isNarrow;
     this.requestUpdate();
   }
@@ -888,8 +888,12 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     return await TimelinePanel.TimelinePanel.TimelinePanel.executeRecordAndReload();
   }
 
-  async #handleLighthouseRun(): Promise<LHModel.ReporterTypes.ReportJSON|null> {
-    return await LighthousePanel.LighthousePanel.LighthousePanel.executeLighthouseRecording({isAIControlled: true});
+  async #handleLighthouseRun(overrides?: LHModel.RunTypes.RunOverrides):
+      Promise<LHModel.ReporterTypes.ReportJSON|null> {
+    return await LighthousePanel.LighthousePanel.LighthousePanel.executeLighthouseRecording({
+      isAIControlled: true,
+      ...overrides,
+    });
   }
 
   #getDefaultConversationType(): AiAssistanceModel.AiHistoryStorage.ConversationType|undefined {
@@ -988,6 +992,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
             performanceRecordAndReload: this.#handlePerformanceRecordAndReload.bind(this),
             onInspectElement: this.#handleInspectElement.bind(this),
             networkTimeCalculator: NetworkPanel.NetworkPanel.NetworkPanel.instance().networkLogView.timeCalculator(),
+            lighthouseRecording: this.#handleLighthouseRun.bind(this),
           });
         }
       }
@@ -1026,6 +1031,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       performanceRecordAndReload: this.#handlePerformanceRecordAndReload.bind(this),
       onInspectElement: this.#handleInspectElement.bind(this),
       networkTimeCalculator: NetworkPanel.NetworkPanel.NetworkPanel.instance().networkLogView.timeCalculator(),
+      lighthouseRecording: this.#handleLighthouseRun.bind(this),
     });
     this.#updateConversationState(conversation);
     this.#conversation?.setContext(context);
@@ -1501,6 +1507,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         performanceRecordAndReload: this.#handlePerformanceRecordAndReload.bind(this),
         onInspectElement: this.#handleInspectElement.bind(this),
         networkTimeCalculator: NetworkPanel.NetworkPanel.NetworkPanel.instance().networkLogView.timeCalculator(),
+        lighthouseRecording: this.#handleLighthouseRun.bind(this),
       });
     }
     this.#updateConversationState(conversation);
@@ -1556,7 +1563,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     this.#updateConversationState();
   }
 
-  #clearWalkthrough(): void {
+  #resetWalkthrough(): void {
     this.#walkthrough.isExpanded = false;
     this.#walkthrough.activeMessage = null;
   }
@@ -1567,7 +1574,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     }
 
     // Ensure we clear the walkthrough so it doesn't hold onto a chat that is about to be deleted.
-    this.#clearWalkthrough();
+    this.#resetWalkthrough();
 
     void AiAssistanceModel.AiHistoryStorage.AiHistoryStorage.instance().deleteHistoryEntry(this.#conversation.id);
     this.#updateConversationState();
@@ -1592,6 +1599,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
 
   #handleNewChatRequest(): void {
     this.#updateConversationState();
+    this.#resetWalkthrough();
     UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.newChatCreated));
 
     if (Annotations.AnnotationRepository.annotationsEnabled()) {

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

@@ -14,9 +14,11 @@ import * as SDK from '../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../generated/protocol.js';
 import type {
   AiWidget, ComputedStyleAiWidget, CoreVitalsAiWidget, DomTreeAiWidget, LcpBreakdownAiWidget, PerformanceTraceAiWidget,
-  StylePropertiesAiWidget} from '../../../models/ai_assistance/agents/AiAgent.js';
+  StylePropertiesAiWidget, TimelineRangeSummaryAiWidget} from '../../../models/ai_assistance/agents/AiAgent.js';
 import * as AiAssistanceModel from '../../../models/ai_assistance/ai_assistance.js';
 import * as ComputedStyle from '../../../models/computed_style/computed_style.js';
+import * as Trace from '../../../models/trace/trace.js';
+import * as PanelsCommon from '../../../panels/common/common.js';
 import * as Marked from '../../../third_party/marked/marked.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as Input from '../../../ui/components/input/input.js';
@@ -47,7 +49,10 @@ const SCROLL_ROUNDING_OFFSET = 1;
 * Strings that don't need to be translated at this time.
 */
 const UIStringsNotTranslate = {
-
+  /**
+   * @description Text used in the button to close an open walkthrough
+   */
+  closeAgentWalkthrough: 'Close agent walkthrough',
   /**
    * @description The title of the button that allows submitting positive
    * feedback about the response for AI assistance.
@@ -181,7 +186,23 @@ const UIStringsNotTranslate = {
   /**
    * @description Title used for revealing the performance trace.
    */
-  revealTrace: 'Reveal trace'
+  revealTrace: 'Reveal trace',
+  /**
+   * @description Title for the core web vitals widget.
+   */
+  coreVitals: 'Core Web Vitals',
+  /**
+   * @description Title for the LCP breakdown widget.
+   */
+  lcpBreakdown: 'LCP breakdown',
+  /**
+   * @description Title for the LCP element widget.
+   */
+  lcpElement: 'LCP element',
+  /**
+   * @description Title for the performance summary widget.
+   */
+  performanceSummary: 'Performance summary'
 } as const;
 
 export interface Step {
@@ -495,18 +516,25 @@ function renderWalkthroughSidebarButton(
   }
 
   const hasOneStepWithWidget = steps.some(step => step.widgets?.length);
-  const title = walkthroughTitle({
+  const isOpen = input.message === input.walkthrough.activeMessage;
+
+  const title = isOpen ? lockedString(UIStringsNotTranslate.closeAgentWalkthrough) : walkthroughTitle({
     isLoading: input.isLoading,
     hasWidgets: hasOneStepWithWidget,
     lastStep,
   });
 
+  // The button should be tonal when there are widgets, but we only
+  // want to change it visually at the end once everything has stopped
+  // loading.
+  const variant = hasOneStepWithWidget && !input.isLoading ? Buttons.Button.Variant.TONAL : Buttons.Button.Variant.TEXT;
+
   // clang-format off
   return html`
     <div class="walkthrough-toggle-container">
       ${input.isLoading ? html`<devtools-spinner></devtools-spinner>` : Lit.nothing}
       <devtools-button
-        .variant=${Buttons.Button.Variant.OUTLINED}
+        .variant=${variant}
         .size=${Buttons.Button.Size.SMALL}
         .title=${lastStep.isLoading ? titleForStep(lastStep) : lockedString(UIStringsNotTranslate.showThinking)}
         .jslogContext=${walkthrough.isExpanded ? 'ai-hide-walkthrough-sidebar' : 'ai-show-walkthrough-sidebar'}
@@ -521,7 +549,9 @@ function renderWalkthroughSidebarButton(
             walkthrough.onOpen(message as ModelChatMessage);
           }
         }}
-      >${title}</devtools-button>
+      >
+        ${title}<devtools-icon class="chevron" .name=${'chevron-right'}></devtools-icon>
+      </devtools-button>
     </div>
   `;
   // clang-format on
@@ -656,6 +686,8 @@ interface WidgetMakerResponse {
   renderedWidget: Lit.LitTemplate|null;
   revealable: unknown;
   customRevealTitle?: Platform.UIString.LocalizedString;
+  // Can be null if the widget is only used to add the Reveal CTA.
+  title: Lit.LitTemplate|Platform.UIString.LocalizedString|null;
 }
 
 const nodeCache = new Map<Protocol.DOM.BackendNodeId, SDK.DOMModel.DOMNode>();
@@ -694,11 +726,20 @@ 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: new RegExp(widgetData.data.properties.join('|'), 'i'),
+        enableNarrowViewResizing: false,
       })}></devtools-widget>`;
   // clang-format on
 
-  return {renderedWidget, revealable: new Elements.ElementsPanel.NodeComputedStyles(domNodeForId)};
+  return {
+    renderedWidget,
+    revealable: new Elements.ElementsPanel.NodeComputedStyles(domNodeForId),
+    title: html`<devtools-widget
+      ${widget(PanelsCommon.DOMLinkifier.DOMNodeLink, {
+      node: domNodeForId,
+    })}
+    ></devtools-widget>`,
+  };
 }
 
 async function makeCoreVitalsWidget(widgetData: CoreVitalsAiWidget): Promise<WidgetMakerResponse|null> {
@@ -708,7 +749,11 @@ async function makeCoreVitalsWidget(widgetData: CoreVitalsAiWidget): Promise<Wid
   </devtools-widget>`;
   // clang-format on
 
-  return {renderedWidget, revealable: new TimelineUtils.Helpers.RevealableCoreVitals(widgetData.data.insightSetKey)};
+  return {
+    renderedWidget,
+    revealable: new TimelineUtils.Helpers.RevealableCoreVitals(widgetData.data.insightSetKey),
+    title: lockedString(UIStringsNotTranslate.coreVitals),
+  };
 }
 
 async function makeStylePropertiesWidget(widgetData: StylePropertiesAiWidget): Promise<WidgetMakerResponse|null> {
@@ -727,7 +772,15 @@ async function makeStylePropertiesWidget(widgetData: StylePropertiesAiWidget): P
   </devtools-widget>`;
   // clang-format on
 
-  return {renderedWidget, revealable: domNodeForId};
+  return {
+    renderedWidget,
+    revealable: domNodeForId,
+    title: html`<devtools-widget
+      ${widget(PanelsCommon.DOMLinkifier.DOMNodeLink, {
+      node: domNodeForId,
+    })}
+    ></devtools-widget>`,
+  };
 }
 
 async function makeLcpBreakdownWidget(widgetData: LcpBreakdownAiWidget): Promise<WidgetMakerResponse|null> {
@@ -745,7 +798,11 @@ async function makeLcpBreakdownWidget(widgetData: LcpBreakdownAiWidget): Promise
     })}></devtools-widget>`;
   // clang-format on
 
-  return {renderedWidget, revealable: new TimelineUtils.Helpers.RevealableInsight(insight)};
+  return {
+    renderedWidget,
+    revealable: new TimelineUtils.Helpers.RevealableInsight(insight),
+    title: lockedString(UIStringsNotTranslate.lcpBreakdown),
+  };
 }
 
 function renderWidgetResponse(response: WidgetMakerResponse|null): Lit.LitTemplate {
@@ -764,21 +821,38 @@ function renderWidgetResponse(response: WidgetMakerResponse|null): Lit.LitTempla
     'widget-and-revealer-container': true,
     'revealer-only': response.renderedWidget === null,
   });
+
+  const revealButton = html`
+    <devtools-button class="widget-reveal-button"
+      .variant=${Buttons.Button.Variant.TEXT}
+      @click=${onReveal}
+    >
+      ${response.customRevealTitle ?? lockedString(UIStringsNotTranslate.reveal)}
+      <devtools-icon name='tab-move'></devtools-icon>
+    </devtools-button>
+  `;
+
   // clang-format off
   return html`
     <div class=${classes}>
+      ${response.title ? html`
+        <div class="widget-header">
+          <div class="widget-name">${response.title}</div>
+          <div class="widget-reveal-container">
+            ${revealButton}
+          </div>
+        </div>
+      ` : Lit.nothing}
       ${response.renderedWidget ? html`
         <div class="widget-content-container">
           ${response.renderedWidget}
         </div>` : Lit.nothing
       }
-      <div class="widget-reveal-container">
-        <devtools-button class="widget-reveal"
-          .iconName=${'tab-move'}
-          .variant=${Buttons.Button.Variant.TEXT}
-          @click=${onReveal}
-        >${response.customRevealTitle ?? lockedString(UIStringsNotTranslate.reveal)}</devtools-button>
-      </div>
+      ${!response.title ? html`
+        <div class="widget-reveal-container">
+          ${revealButton}
+        </div>
+      ` : Lit.nothing}
     </div>
     `;
   // clang-format on
@@ -787,6 +861,7 @@ function renderWidgetResponse(response: WidgetMakerResponse|null): Lit.LitTempla
 async function makePerformanceTraceWidget(widgetData: PerformanceTraceAiWidget): Promise<WidgetMakerResponse|null> {
   return {
     renderedWidget: null,
+    title: null,
     revealable: new Timeline.TimelinePanel.ParsedTraceRevealable(widgetData.data.parsedTrace),
     customRevealTitle: lockedString(UIStringsNotTranslate.revealTrace),
   };
@@ -846,6 +921,7 @@ async function makeDomTreeWidget(widgetData: DomTreeAiWidget): Promise<WidgetMak
   return {
     renderedWidget,
     revealable: new SDK.DOMModel.DeferredDOMNode(root.domModel().target(), root.backendNodeId()),
+    title: lockedString(UIStringsNotTranslate.lcpElement),
   };
 }
 
@@ -892,6 +968,9 @@ async function renderWidgets(
       case 'LCP_BREAKDOWN':
         response = await makeLcpBreakdownWidget(widgetData);
         break;
+      case 'TIMELINE_RANGE_SUMMARY':
+        response = await makeTimelineRangeSummaryWidget(widgetData);
+        break;
       default:
         Platform.assertNever(widgetData, 'Unknown AiWidget name');
     }
@@ -1318,3 +1397,49 @@ export class ChatMessage extends UI.Widget.Widget {
     void this.performUpdate();
   }
 }
+
+async function makeTimelineRangeSummaryWidget(widgetData: TimelineRangeSummaryAiWidget):
+    Promise<WidgetMakerResponse|null> {
+  const {bounds, parsedTrace, track} = widgetData.data;
+  let events: readonly Trace.Types.Events.Event[] = [];
+  if (track === 'main') {
+    const flameChartView = Timeline.TimelinePanel.TimelinePanel.instance().getFlameChart();
+    const mainDataProvider = flameChartView.getMainDataProvider();
+    const mainTrack =
+        mainDataProvider.timelineData().groups.find((group: {name: string}) => group.name.startsWith('Main \u2014 '));
+    if (mainTrack) {
+      events = mainDataProvider.groupTreeEvents(mainTrack) ?? [];
+    }
+  }
+  const eventsArray = Array.from(events);
+  eventsArray.sort((a, b) => a.ts - b.ts);
+
+  const thirdPartyTree = new Timeline.ThirdPartyTreeView.ThirdPartyTreeViewWidget();
+  const mapper = new Trace.EntityMapper.EntityMapper(parsedTrace);
+  thirdPartyTree.setModelWithEvents(eventsArray, parsedTrace, mapper);
+  thirdPartyTree.updateContents(Timeline.TimelineSelection.selectionFromRangeMicroSeconds(bounds.min, bounds.max));
+  thirdPartyTree.refreshTree(true);
+
+  // clang-format off
+  const template = html`
+    <devtools-widget
+      ${widget(TimelineComponents.TimelineRangeSummaryView.TimelineRangeSummaryView, {
+        data: {
+          parsedTrace,
+          events,
+          startTime: Trace.Helpers.Timing.microToMilli(bounds.min),
+          endTime: Trace.Helpers.Timing.microToMilli(bounds.max),
+          thirdPartyTreeTemplate: html`<devtools-performance-third-party-tree-view
+            max-rows="10"
+            .treeView=${thirdPartyTree}></devtools-performance-third-party-tree-view>`,
+        } as TimelineComponents.TimelineRangeSummaryView.TimelineRangeSummaryViewData,
+      })}
+    ></devtools-widget>`;
+  // clang-format on
+
+  return {
+    renderedWidget: template,
+    revealable: new TimelineUtils.Helpers.RevealableTimeRange(bounds),
+    title: lockedString(UIStringsNotTranslate.performanceSummary),
+  };
+}

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

@@ -90,10 +90,10 @@ function renderInlineWalkthrough(input: ViewInput, stepsOutput: Lit.LitTemplate,
   // clang-format off
   return html`
     <details class="walkthrough-inline" ?open=${input.isExpanded} @toggle=${onToggle}>
-      <summary>
+      <summary ?data-has-widgets=${!input.isLoading && hasWidgets}>
         ${input.isLoading ? html`<devtools-spinner></devtools-spinner>` : Lit.nothing}
         ${walkthroughTitle({isLoading: input.isLoading, lastStep, hasWidgets})}
-        <devtools-icon name="chevron-down"></devtools-icon>
+        <devtools-icon name="chevron-right"></devtools-icon>
       </summary>
       ${stepsOutput}
     </details>
@@ -182,8 +182,6 @@ export class WalkthroughView extends UI.Widget.Widget {
   #view: View;
 
   #message: ModelChatMessage|null = null;
-  // TODO(b/487921187): fix loading state - also unsure if we need this vs
-  // looking at the loading state in the message's steps.
   #isLoading = false;
   #markdownRenderer: MarkdownLitRenderer|null = null;
   #onToggle: (isOpen: boolean) => void = () => {};
@@ -196,6 +194,7 @@ export class WalkthroughView extends UI.Widget.Widget {
 
   #output: ViewOutput = {};
   #stepsContainerResizeObserver = new ResizeObserver(() => this.#handleStepsContainerResize());
+  #lastStepsContainerWidth = 0;
 
   constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element);
@@ -218,12 +217,27 @@ export class WalkthroughView extends UI.Widget.Widget {
     }
   }
 
-  override onResize(): void {
-    this.#handleStepsContainerResize();
-  }
-
   #handleStepsContainerResize(): void {
-    if (!this.#pinScrollToBottom) {
+    const width = this.#output.stepsContainer?.offsetWidth ?? 0;
+    /**
+     * If the width has changed, it's likely due to a manual resize (e.g., the
+     * user dragging the sidebar). In these cases, we want to avoid jumping the
+     * scroll position to the bottom, as it can be jarring for the user. We
+     * only auto-scroll if the width remains the same, meaning only the height
+     * has changed (likely due to new content being added).
+     */
+    if (width !== this.#lastStepsContainerWidth) {
+      this.#lastStepsContainerWidth = width;
+      return;
+    }
+
+    /**
+     * We only want to auto-scroll if the walkthrough is "live", which means it's
+     * currently loading. If it's not loading, it's a walkthrough for a previous
+     * message, and we don't want to jump the user to the bottom if they've
+     * scrolled away.
+     */
+    if (!this.#pinScrollToBottom || !this.#isLoading) {
       return;
     }
 
@@ -338,7 +352,13 @@ export class WalkthroughView extends UI.Widget.Widget {
 
     this.#registerResizeObservers();
 
-    if (this.#pinScrollToBottom) {
+    /**
+     * We only want to auto-scroll if the walkthrough is "live", which means it's
+     * currently loading. If it's not loading, it's a walkthrough for a previous
+     * message, and we don't want to jump the user to the bottom if they've
+     * scrolled away.
+     */
+    if (this.#pinScrollToBottom && this.#isLoading) {
       this.scrollToBottom();
     }
   }

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

@@ -346,6 +346,13 @@
     display: flex;
     gap: var(--sys-size-4);
     align-items: center;
+
+    .chevron {
+      color: var(--sys-color-primary);
+      width: var(--sys-size-8);
+      height: var(--sys-size-8);
+      margin-left: var(--sys-size-2);
+    }
   }
 
 
@@ -372,14 +379,50 @@
     gap: var(--sys-size-5);
   }
 
+  .widget-header {
+    display: flex;
+    justify-content: space-between;
+    height: var(--sys-size-11);
+    align-items: center;
+    background: var(--sys-color-surface5);
+    padding: var(--sys-size-2) var(--sys-size-4);
+    border-top-left-radius: var(--sys-shape-corner-small);
+    border-top-right-radius: var(--sys-shape-corner-small);
+
+    .widget-name {
+      font: var(--sys-typescale-body4-regular);
+    }
+
+    .widget-reveal-container {
+      padding: 0;
+      background: none;
+      border-radius: 0;
+    }
+  }
+
+  .widget-reveal-button {
+    display: flex;
+    align-items: center;
+
+    devtools-icon {
+      margin-left: var(--sys-size-3);
+      color: var(--sys-color-primary);
+      width: var(--sys-size-8);
+      height: var(--sys-size-8);
+    }
+
+  }
+
   .widget-and-revealer-container {
     width: 100%;
+    min-width: var(--sys-size-30);
+    max-width: var(--sys-size-33);
   }
 
   .widget-reveal-container {
     background: var(--sys-color-surface5);
-    border-bottom-right-radius: var(--sys-shape-corner-medium);
-    border-bottom-left-radius: var(--sys-shape-corner-medium);
+    border-bottom-right-radius: var(--sys-shape-corner-small);
+    border-bottom-left-radius: var(--sys-shape-corner-small);
     padding: 0 var(--sys-size-4) var(--sys-size-4) 0;
   }
 
@@ -389,13 +432,25 @@
   }
 
   .widget-content-container {
-    padding: var(--sys-size-4);
+    padding: var(--sys-size-4) var(--sys-size-5);
     border-top-left-radius: var(--sys-shape-corner-medium);
     border-top-right-radius: var(--sys-shape-corner-medium);
     overflow-x: auto;
     background-color: var(--sys-color-surface3);
 
     --override-computed-style-property-white-space: normal;
+
+    /* When header is present, content follows it and shouldn't have top radii */
+    .widget-header+& {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+
+    /* When header is present, content is the last child and needs bottom radii */
+    .widget-header+&:last-child {
+      border-bottom-left-radius: var(--sys-shape-corner-medium);
+      border-bottom-right-radius: var(--sys-shape-corner-medium);
+    }
   }
 
   .network-request-preview {

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

@@ -100,25 +100,45 @@
   .walkthrough-inline {
     border-radius: var(--sys-size-5);
     overflow: hidden;
-    background-color: var(--sys-color-surface1);
+    background-color: var(--sys-color-surface2);
     width: fit-content;
 
     &[open] {
       width: auto;
+      background-color: var(--sys-color-surface1);
     }
   }
 
   .walkthrough-inline > summary {
     display: flex;
     align-items: center;
-    padding: var(--sys-size-4) var(--sys-size-6);
+    padding: 0 var(--sys-size-6);
     cursor: pointer;
     background-color: transparent;
+    /* The same height as a DevTools Button */
+    height: var(--sys-size-11);
     font: var(--sys-typescale-body4-regular);
+    font-weight:var(--ref-typeface-weight-medium);
     user-select: none;
     list-style: none; /* Hide default triangle */
     justify-content: flex-start;
     gap: var(--sys-size-4);
+    color: var(--sys-color-primary);
+
+    devtools-icon {
+      color: var(--sys-color-primary);
+    }
+
+    /* Align the summary to look like the tonal button */
+    &[data-has-widgets] {
+      background: var(--sys-color-tonal-container);
+      color: var(--sys-color-on-tonal-container);
+      border-radius: var(--sys-shape-corner-full);
+
+      devtools-icon {
+        color: var(--sys-color-on-tonal-container);
+      }
+    }
   }
 
   .walkthrough-inline > summary::-webkit-details-marker {
@@ -131,8 +151,6 @@
 
   .walkthrough-inline .steps-container {
     padding: var(--sys-size-6);
-    max-height: 300px; /* Limit height for inline view */
-    overflow-y: auto;
     border-top: 1px solid var(--sys-color-divider);
     background-color: transparent;
   }
@@ -141,9 +159,21 @@
     width: var(--sys-size-8);
     height: var(--sys-size-8);
     transition: transform 0.2s;
+    margin-left: auto;
+  }
+
+  .walkthrough-inline[open] > summary {
+    border-radius: var(--sys-shape-corner-medium-small);
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    background: var(--sys-color-surface5);
+  }
+
+  .walkthrough-inline .step {
+    background-color: var(--sys-color-surface5);
   }
 
   .walkthrough-inline[open] > summary > devtools-icon {
-    transform: rotate(180deg);
+    transform: rotate(270deg);
   }
 }

package/front_end/panels/application/AppManifestView.ts

@@ -1106,8 +1106,8 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
       ${identityData && onCopyId ? renderIdentity(identityData, onCopyId, output) : nothing}
       ${presentationData ? renderPresentation(presentationData, output) : nothing}
       ${protocolHandlersData ? renderProtocolHandlers(protocolHandlersData, output) : nothing}
-      ${iconsData && onToggleIconMasked && maskedIcons ?
-          renderIcons(iconsData, maskedIcons, onToggleIconMasked, output) : nothing}
+      ${iconsData && onToggleIconMasked ?
+          renderIcons(iconsData, Boolean(maskedIcons), onToggleIconMasked, output) : nothing}
       ${windowControlsData && output ? renderWindowControlsSection(
           windowControlsData, selectedPlatform, onSelectOs, onToggleWcoToolbar, output) : nothing}
       ${shortcutsData ? renderShortcuts(shortcutsData) : nothing}