chrome-devtools-frontend 1.0.1606789 → 1.0.1608868

package/front_end/{panels/profiler → models/heap_snapshot_model}/HeapSnapshotProxy.ts

@@ -3,22 +3,12 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
-import * as i18n from '../../core/i18n/i18n.js';
 import type * as PlatformApi from '../../core/platform/api/api.js';
 import * as Platform from '../../core/platform/platform.js';
-import type * as HeapSnapshotModel from '../../models/heap_snapshot_model/heap_snapshot_model.js';
 
 import type {ChildrenProvider} from './ChildrenProvider.js';
+import type * as HeapSnapshotModel from './HeapSnapshotModel.js';
 
-const UIStrings = {
-  /**
-   * @description Text in Heap Snapshot Proxy of a profiler tool
-   * @example {functionName} PH1
-   */
-  anErrorOccurredWhenACallToMethod: 'An error occurred when a call to method \'\'{PH1}\'\' was requested',
-} as const;
-const str_ = i18n.i18n.registerUIStrings('panels/profiler/HeapSnapshotProxy.ts', UIStrings);
-const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class HeapSnapshotWorkerProxy extends Common.ObjectWrapper.ObjectWrapper<HeapSnapshotWorkerProxy.EventTypes> {
   readonly eventHandler: (arg0: string, arg1: string) => void;
   nextObjectId = 1;
@@ -167,10 +157,8 @@ export class HeapSnapshotWorkerProxy extends Common.ObjectWrapper.ObjectWrapper<
       return;
     }
     if (data.error) {
-      if (data.errorMethodName) {
-        Common.Console.Console.instance().error(
-            i18nString(UIStrings.anErrorOccurredWhenACallToMethod, {PH1: data.errorMethodName}));
-      }
+      Common.Console.Console.instance().error(
+          `An error occurred when a call to method '${data.errorMethodName}' was requested`);
       Common.Console.Console.instance().error(data['errorCallStack']);
       this.callbacks.delete(data.callId);
       return;
@@ -263,7 +251,7 @@ export class HeapSnapshotLoaderProxy extends HeapSnapshotProxyObject implements
 }
 
 export class HeapSnapshotProxy extends HeapSnapshotProxyObject {
-  staticData: HeapSnapshotModel.HeapSnapshotModel.StaticData|null;
+  staticData: HeapSnapshotModel.StaticData|null;
   profileUid?: string;
 
   constructor(worker: HeapSnapshotWorkerProxy, objectId: number) {
@@ -271,9 +259,7 @@ export class HeapSnapshotProxy extends HeapSnapshotProxyObject {
     this.staticData = null;
   }
 
-  search(
-      searchConfig: HeapSnapshotModel.HeapSnapshotModel.SearchConfig,
-      filter: HeapSnapshotModel.HeapSnapshotModel.NodeFilter): Promise<number[]> {
+  search(searchConfig: HeapSnapshotModel.SearchConfig, filter: HeapSnapshotModel.NodeFilter): Promise<number[]> {
     return this.callMethodPromise('search', searchConfig, filter);
   }
 
@@ -281,20 +267,19 @@ export class HeapSnapshotProxy extends HeapSnapshotProxyObject {
     return this.callMethodPromise('interfaceDefinitions');
   }
 
-  aggregatesWithFilter(filter: HeapSnapshotModel.HeapSnapshotModel.NodeFilter):
-      Promise<Record<string, HeapSnapshotModel.HeapSnapshotModel.AggregatedInfo>> {
+  aggregatesWithFilter(filter: HeapSnapshotModel.NodeFilter):
+      Promise<Record<string, HeapSnapshotModel.AggregatedInfo>> {
     return this.callMethodPromise('aggregatesWithFilter', filter);
   }
 
-  aggregatesForDiff(interfaceDefinitions: string):
-      Promise<Record<string, HeapSnapshotModel.HeapSnapshotModel.AggregateForDiff>> {
+  aggregatesForDiff(interfaceDefinitions: string): Promise<Record<string, HeapSnapshotModel.AggregateForDiff>> {
     return this.callMethodPromise('aggregatesForDiff', interfaceDefinitions);
   }
 
   calculateSnapshotDiff(
       baseSnapshotId: string,
-      baseSnapshotAggregates: Record<string, HeapSnapshotModel.HeapSnapshotModel.AggregateForDiff>,
-      ): Promise<Record<string, HeapSnapshotModel.HeapSnapshotModel.Diff>> {
+      baseSnapshotAggregates: Record<string, HeapSnapshotModel.AggregateForDiff>,
+      ): Promise<Record<string, HeapSnapshotModel.Diff>> {
     return this.callMethodPromise('calculateSnapshotDiff', baseSnapshotId, baseSnapshotAggregates);
   }
 
@@ -322,20 +307,19 @@ export class HeapSnapshotProxy extends HeapSnapshotProxyObject {
     return this.callFactoryMethod('createNodesProvider', HeapSnapshotProviderProxy, filter);
   }
 
-  createNodesProviderForClass(classKey: string, nodeFilter: HeapSnapshotModel.HeapSnapshotModel.NodeFilter):
-      HeapSnapshotProviderProxy {
+  createNodesProviderForClass(classKey: string, nodeFilter: HeapSnapshotModel.NodeFilter): HeapSnapshotProviderProxy {
     return this.callFactoryMethod('createNodesProviderForClass', HeapSnapshotProviderProxy, classKey, nodeFilter);
   }
 
-  allocationTracesTops(): Promise<HeapSnapshotModel.HeapSnapshotModel.SerializedAllocationNode[]> {
+  allocationTracesTops(): Promise<HeapSnapshotModel.SerializedAllocationNode[]> {
     return this.callMethodPromise('allocationTracesTops');
   }
 
-  allocationNodeCallers(nodeId: number): Promise<HeapSnapshotModel.HeapSnapshotModel.AllocationNodeCallers> {
+  allocationNodeCallers(nodeId: number): Promise<HeapSnapshotModel.AllocationNodeCallers> {
     return this.callMethodPromise('allocationNodeCallers', nodeId);
   }
 
-  allocationStack(nodeIndex: number): Promise<HeapSnapshotModel.HeapSnapshotModel.AllocationStackFrame[]|null> {
+  allocationStack(nodeIndex: number): Promise<HeapSnapshotModel.AllocationStackFrame[]|null> {
     return this.callMethodPromise('allocationStack', nodeIndex);
   }
 
@@ -361,15 +345,15 @@ export class HeapSnapshotProxy extends HeapSnapshotProxyObject {
     this.staticData = await this.callMethodPromise('updateStaticData');
   }
 
-  getStatistics(): Promise<HeapSnapshotModel.HeapSnapshotModel.Statistics> {
+  getStatistics(): Promise<HeapSnapshotModel.Statistics> {
     return this.callMethodPromise('getStatistics');
   }
 
-  getLocation(nodeIndex: number): Promise<HeapSnapshotModel.HeapSnapshotModel.Location|null> {
+  getLocation(nodeIndex: number): Promise<HeapSnapshotModel.Location|null> {
     return this.callMethodPromise('getLocation', nodeIndex);
   }
 
-  getSamples(): Promise<HeapSnapshotModel.HeapSnapshotModel.Samples|null> {
+  getSamples(): Promise<HeapSnapshotModel.Samples|null> {
     return this.callMethodPromise('getSamples');
   }
 
@@ -421,12 +405,11 @@ export class HeapSnapshotProviderProxy extends HeapSnapshotProxyObject implement
     return this.callMethodPromise('isEmpty');
   }
 
-  serializeItemsRange(startPosition: number, endPosition: number):
-      Promise<HeapSnapshotModel.HeapSnapshotModel.ItemsRange> {
+  serializeItemsRange(startPosition: number, endPosition: number): Promise<HeapSnapshotModel.ItemsRange> {
     return this.callMethodPromise('serializeItemsRange', startPosition, endPosition);
   }
 
-  async sortAndRewind(comparator: HeapSnapshotModel.HeapSnapshotModel.ComparatorConfig): Promise<void> {
+  async sortAndRewind(comparator: HeapSnapshotModel.ComparatorConfig): Promise<void> {
     await this.callMethodPromise('sortAndRewind', comparator);
   }
 }

package/front_end/models/heap_snapshot_model/heap_snapshot_model.ts

@@ -2,8 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as ChildrenProvider from './ChildrenProvider.js';
 import * as HeapSnapshotModel from './HeapSnapshotModel.js';
+import * as HeapSnapshotProxy from './HeapSnapshotProxy.js';
 
 export {
+  ChildrenProvider,
   HeapSnapshotModel,
+  HeapSnapshotProxy,
 };

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -6908,10 +6908,6 @@ export const NativeFunctions = [
     name: "MouseEvent",
     signatures: [["type","?eventInitDict"]]
   },
-  {
-    name: "PageHideEvent",
-    signatures: [["type","?eventInitDict"]]
-  },
   {
     name: "PageTransitionEvent",
     signatures: [["type","?eventInitDict"]]

package/front_end/panels/accessibility/AccessibilitySidebarView.ts

@@ -3,16 +3,30 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-imperative-dom-api */
 
+import '../../ui/components/switch/switch.js';
+
 import type * as Common from '../../core/common/common.js';
-import * as Root from '../../core/root/root.js';
+import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as Lit from '../../ui/lit/lit.js';
 
 import {AXNodeSubPane} from './AccessibilityNodeView.js';
+import accessibilitySidebarViewStyles from './accessibilitySidebarView.css.js';
 import {ARIAAttributesPane} from './ARIAAttributesView.js';
-import {AXBreadcrumbsPane} from './AXBreadcrumbsPane.js';
 import {SourceOrderPane} from './SourceOrderView.js';
 
+const {html, render} = Lit;
+
+const UIStrings = {
+  /**
+   * @description Text for a toggle to turn on the accessibility tree view.
+   */
+  showAccessibilityTree: 'Show accessibility tree',
+} as const;
+const str_ = i18n.i18n.registerUIStrings('panels/accessibility/AccessibilitySidebarView.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
 let accessibilitySidebarViewInstance: AccessibilitySidebarView;
 
 export class AccessibilitySidebarView extends UI.Widget.VBox {
@@ -20,19 +34,29 @@ export class AccessibilitySidebarView extends UI.Widget.VBox {
   #axNode: SDK.AccessibilityModel.AccessibilityNode|null;
   private skipNextPullNode: boolean;
   private readonly sidebarPaneStack: UI.View.ViewLocation;
-  private readonly breadcrumbsSubPane: AXBreadcrumbsPane;
   private readonly ariaSubPane: ARIAAttributesPane;
   private readonly axNodeSubPane: AXNodeSubPane;
   private readonly sourceOrderSubPane: SourceOrderPane;
+  private readonly toggleContainer: HTMLElement;
+  private readonly toggleAction: UI.ActionRegistration.Action;
+
   private constructor() {
     super();
+    this.registerRequiredCSS(accessibilitySidebarViewStyles);
     this.element.classList.add('accessibility-sidebar-view');
     this.#node = null;
     this.#axNode = null;
     this.skipNextPullNode = false;
     this.sidebarPaneStack = UI.ViewManager.ViewManager.instance().createStackLocation();
-    this.breadcrumbsSubPane = new AXBreadcrumbsPane(this);
-    void this.sidebarPaneStack.showView(this.breadcrumbsSubPane);
+
+    this.toggleContainer = document.createElement('div');
+    this.toggleContainer.classList.add('accessibility-toggle-container');
+    this.element.appendChild(this.toggleContainer);
+
+    this.toggleAction = UI.ActionRegistry.ActionRegistry.instance().getAction('elements.toggle-a11y-tree');
+    this.toggleAction.addEventListener(UI.ActionRegistration.Events.TOGGLED, this.updateToggle, this);
+    this.updateToggle();
+
     this.ariaSubPane = new ARIAAttributesPane();
     void this.sidebarPaneStack.showView(this.ariaSubPane);
     this.axNodeSubPane = new AXNodeSubPane();
@@ -79,14 +103,12 @@ export class AccessibilitySidebarView extends UI.Widget.VBox {
     }
 
     this.axNodeSubPane.setAXNode(axNode);
-    this.breadcrumbsSubPane.setAXNode(axNode);
   }
 
   override async performUpdate(): Promise<void> {
     const node = this.node();
     this.axNodeSubPane.setNode(node);
     this.ariaSubPane.setNode(node);
-    this.breadcrumbsSubPane.setNode(node);
     void this.sourceOrderSubPane.setNodeAsync(node);
     if (!node) {
       return;
@@ -95,9 +117,6 @@ export class AccessibilitySidebarView extends UI.Widget.VBox {
     if (!accessibilityModel) {
       return;
     }
-    if (!Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.FULL_ACCESSIBILITY_TREE)) {
-      accessibilityModel.clear();
-    }
     await accessibilityModel.requestPartialAXTree(node);
     this.accessibilityNodeCallback(accessibilityModel.axNodeForDOMNode(node));
   }
@@ -138,6 +157,30 @@ export class AccessibilitySidebarView extends UI.Widget.VBox {
     this.setNode(UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode));
   }
 
+  private updateToggle(): void {
+    const isToggled = this.toggleAction.toggled();
+    // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+    render(
+        html`
+      <div style="display: flex; align-items: center; gap: 8px;">
+        <devtools-switch
+          role="switch"
+          aria-label=${i18nString(UIStrings.showAccessibilityTree)}
+          .checked=${isToggled}
+          .label=${i18nString(UIStrings.showAccessibilityTree)}
+          .jslogContext=${'elements.toggle-a11y-tree'}
+          @switchchange=${this.onToggleChange}
+        ></devtools-switch>
+        <span style="color: var(--sys-color-on-surface);">${i18nString(UIStrings.showAccessibilityTree)}</span>
+      </div>
+    `,
+        this.toggleContainer, {host: this});
+  }
+
+  private onToggleChange(_event: Event): void {
+    void this.toggleAction.execute();
+  }
+
   private onNodeChange(
       event: Common.EventTarget.EventTargetEvent<{node: SDK.DOMModel.DOMNode, name: string}|SDK.DOMModel.DOMNode>):
       void {

package/front_end/panels/accessibility/accessibility.ts

@@ -8,7 +8,6 @@ import * as AccessibilityStrings from './AccessibilityStrings.js';
 import * as AccessibilitySubPane from './AccessibilitySubPane.js';
 import * as ARIAAttributesView from './ARIAAttributesView.js';
 import * as ARIAMetadata from './ARIAMetadata.js';
-import * as AXBreadcrumbsPane from './AXBreadcrumbsPane.js';
 
 export {
   AccessibilityNodeView,
@@ -17,5 +16,4 @@ export {
   AccessibilitySubPane,
   ARIAAttributesView,
   ARIAMetadata,
-  AXBreadcrumbsPane,
 };

package/front_end/panels/accessibility/accessibilitySidebarView.css

@@ -0,0 +1,10 @@
+/*
+ * Copyright 2026 The Chromium Authors
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+.accessibility-toggle-container {
+  padding: 12px 18px;
+  border-bottom: 1px solid var(--sys-color-divider);
+}

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

@@ -622,12 +622,12 @@ 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, it's shown in the main chat UI if the
-  // walkthrough is closed, allowing the user to approve it without opening
-  // the walkthrough. If the walkthrough is already open, the side-effect
-  // step is displayed within the walkthrough instead.
+  // 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 = !isExpanded && sideEffectSteps.length > 0 ? sideEffectSteps.map(step => html`
+  const sideEffectStepsUI = sideEffectSteps.length > 0 ? sideEffectSteps.map(step => html`
     <div class="side-effect-container">
       ${renderStep({
          step,
@@ -866,6 +866,7 @@ async function makeBottomUpTimelineTreeWidget(widgetData: BottomUpTreeAiWidget):
     endTime,
     compactMode: true,
     maxLinkLength: 15,
+    maxRows: 10,
   })}></devtools-widget>`;
 
   return {

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

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../../core/i18n/i18n.js';
+import * as AiAssistanceModel from '../../../models/ai_assistance/ai_assistance.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as Input from '../../../ui/components/input/input.js';
 import type {MarkdownLitRenderer} from '../../../ui/components/markdown_view/MarkdownView.js';
@@ -91,8 +92,8 @@ export function walkthroughCloseTitle(input: {
   return lockedString(UIStrings.hideThinking);
 }
 
-function renderInlineWalkthrough(input: ViewInput, stepsOutput: Lit.LitTemplate, steps: Step[]): Lit.LitTemplate {
-  const lastStep = steps.at(-1);
+function renderInlineWalkthrough(input: ViewInput, stepsOutput: Lit.LitTemplate, allSteps: Step[]): Lit.LitTemplate {
+  const lastStep = allSteps.at(-1);
   if (!input.isInlined || !lastStep) {
     return Lit.nothing;
   }
@@ -109,18 +110,32 @@ function renderInlineWalkthrough(input: ViewInput, stepsOutput: Lit.LitTemplate,
     }
   }
 
-  const hasWidgets = steps.some(s => s.widgets?.length);
+  const hasWidgets = allSteps.some(s => s.widgets?.length);
+  const icon = AiAssistanceModel.AiUtils.getIconName();
 
   // clang-format off
   return html`
-    <details class="walkthrough-inline" ?open=${input.isExpanded} @toggle=${onToggle}>
-      <summary ?data-has-widgets=${!input.isLoading && hasWidgets}>
-        ${input.isLoading ? html`<devtools-spinner></devtools-spinner>` : Lit.nothing}
-        ${input.isExpanded ? walkthroughCloseTitle({hasWidgets, isInlined: true}) : walkthroughTitle({isLoading: input.isLoading, lastStep, hasWidgets})}
-        <devtools-icon name="chevron-right"></devtools-icon>
-      </summary>
-      ${stepsOutput}
-    </details>
+    <div class="inline-wrapper" ?data-open=${input.isExpanded}>
+      <span class="inline-icon">
+        ${input.isLoading ?
+            html`<devtools-spinner></devtools-spinner>` :
+            html`<devtools-icon name=${icon}></devtools-icon>`
+        }
+      </span>
+      <details class="walkthrough-inline" ?open=${input.isExpanded} @toggle=${onToggle}>
+        <summary ?data-has-widgets=${!input.isLoading && hasWidgets}>
+          <span class="walkthrough-inline-title">
+            ${input.isExpanded ?
+              walkthroughCloseTitle({hasWidgets, isInlined: true}) :
+              walkthroughTitle({isLoading: input.isLoading, lastStep, hasWidgets})
+            }
+          </span>
+          <devtools-icon name="chevron-right"></devtools-icon>
+        </summary>
+
+        ${stepsOutput}
+      </details>
+    </div>
   `;
   // clang-format on
 }
@@ -165,17 +180,21 @@ export const DEFAULT_VIEW = (
     output: ViewOutput,
     target: HTMLElement|DocumentFragment,
     ): void => {
-  const steps = input.message?.parts.filter(t => t.type === 'step')?.map(p => p.step) ?? [];
+  const allSteps = input.message?.parts.filter(t => t.type === 'step')?.map(p => p.step) ?? [];
+  // Ensure that we render steps but not ones that need approval; a
+  // step that needs approval is always rendered into the main chat
+  // view regardless of if the walkthrough is open or not.
+  const renderableSteps = allSteps.filter(s => !s.requestApproval);
 
   // clang-format off
-  const stepsOutput = steps.length > 0 ? html`
+  const stepsOutput = renderableSteps.length > 0 ? html`
     <div class="steps-container" @scroll=${input.handleScroll} ${ref(el => {
       output.scrollContainer = el as HTMLElement;
     })}>
       <div class="steps-scroll-content" ${ref(el => {
         output.stepsContainer = el as HTMLElement;
     })}>
-        ${steps.map((step, index) => html`
+        ${renderableSteps.map((step, index) => html`
           <div class="walkthrough-step">
             <span class="step-number">${index + 1}</span>
             <div class="step-wrapper">
@@ -183,7 +202,7 @@ export const DEFAULT_VIEW = (
                 step,
                 isLoading: input.isLoading,
                 markdownRenderer: input.markdownRenderer,
-                isLast: index === steps.length - 1
+                isLast: index === renderableSteps.length - 1
               })}
             </div>
           </div>
@@ -198,8 +217,8 @@ export const DEFAULT_VIEW = (
       ${chatMessageStyles}
       ${walkthroughViewStyles}
     </style>
-    ${input.isInlined ? renderInlineWalkthrough(input, stepsOutput, steps)
-                     : renderSidebarWalkthrough(input, stepsOutput, steps.length)
+    ${input.isInlined ? renderInlineWalkthrough(input, stepsOutput, allSteps)
+                     : renderSidebarWalkthrough(input, stepsOutput, renderableSteps.length)
     }`, target);
   // clang-format on
 };

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

@@ -171,6 +171,13 @@
       margin: var(--sys-size-6) 0;
     }
 
+    &:not(.ai-v2) .answer-body-wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: var(--sys-size-5);
+      width: 100%;
+    }
+
     &.ai-v2 .answer-body-wrapper {
       @container(min-width: 700px) {
         /* Purposefully not using design system variables, this is a

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

@@ -97,22 +97,47 @@
     font-size: 11px;
   }
 
+  .inline-wrapper {
+    display: flex;
+    /* Note: no gap here; the gap is dealt with in padding on the text */
+    align-items: flex-start;
+    justify-content: flex-start;
+
+    .inline-icon {
+      display: block;
+      margin-top: var(--sys-size-2);
+    }
+  }
+
   .walkthrough-inline {
     border-radius: var(--sys-size-5);
     overflow: hidden;
-    background-color: var(--sys-color-surface2);
     width: fit-content;
+    max-width: 100%;
 
     &[open] {
       width: auto;
       background-color: var(--sys-color-surface1);
+      margin-left: calc(var(--sys-size-6) / 2);
+      flex-grow: 1;
+
+      > summary {
+        border-radius: var(--sys-shape-corner-medium-small);
+        border-bottom-right-radius: 0;
+        border-bottom-left-radius: 0;
+        background: var(--sys-color-surface5);
+        color: var(--sys-color-on-surface);
+
+        &[data-has-widgets] {
+          margin-left: 0;
+        }
+      }
     }
   }
 
   .walkthrough-inline > summary {
     display: flex;
     align-items: center;
-    padding: 0 var(--sys-size-6);
     cursor: pointer;
     background-color: transparent;
     /* The same height as a DevTools Button */
@@ -124,6 +149,8 @@
     justify-content: flex-start;
     gap: var(--sys-size-4);
     color: var(--sys-color-primary);
+    padding: 0 var(--sys-size-6);
+    overflow: hidden;
 
     devtools-icon {
       color: var(--sys-color-primary);
@@ -134,11 +161,19 @@
       background: var(--sys-color-tonal-container);
       color: var(--sys-color-on-tonal-container);
       border-radius: var(--sys-shape-corner-full);
+      margin-left: var(--sys-size-6);
 
       devtools-icon {
         color: var(--sys-color-on-tonal-container);
       }
     }
+
+    > .walkthrough-inline-title {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      min-width: 0;
+    }
   }
 
   .walkthrough-inline > summary::-webkit-details-marker {
@@ -155,25 +190,18 @@
     background-color: transparent;
   }
 
-  .walkthrough-inline > summary > devtools-icon {
+  .walkthrough-inline > summary > devtools-icon[name='chevron-right'] {
     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 {
+  .walkthrough-inline[open] > summary > devtools-icon[name='chevron-right'] {
     transform: rotate(270deg);
   }
 }