chrome-devtools-frontend 1.0.1595925 → 1.0.1596260

package/.stylelintrc.json

@@ -2,11 +2,13 @@
   "extends": "stylelint-config-standard",
   "plugins": [
     "./scripts/stylelint_rules/lib/use_theme_colors.mjs",
-    "./scripts/stylelint_rules/lib/check_highlight_scope.mjs"
+    "./scripts/stylelint_rules/lib/check_highlight_scope.mjs",
+    "./scripts/stylelint_rules/lib/use_monospace_font.mjs"
   ],
   "rules": {
     "plugin/use_theme_colors": true,
     "plugin/check_highlight_scope": true,
+    "plugin/use_monospace_font": true,
     "alpha-value-notation": "percentage",
     "color-function-notation": "modern",
     "hue-degree-notation": "angle",

package/docs/ui_engineering.md

@@ -1183,42 +1183,6 @@ export const DEFAULT_VIEW = (input, _output, target) => {
 };
 ```
 
-## Migrating `UI.Fragment`
-
-Replace `UI.Fragment.Fragment.build` with a standard lit-html template. To get a reference to an element, use the `ref` directive.
-
-**Before:**
-```typescript
-
-class SomeWidget extends UI.Widget.Widget {
-  constructor() {
-    super();
-    const contrastFragment = UI.Fragment.Fragment.build`
-      <div class="contrast-container-in-grid" $="contrast-container-element">
-        <span class="contrast-preview">Aa</span>
-        <span>${contrastRatioString}</span>
-      </div>`;
-    this.contentElement.appendChild(contrastFragment.element());
-  }
-}
-```
-
-**After:**
-```typescript
-
-
-export const DEFAULT_VIEW = (input, output, target) => {
-  render(html`
-    <div>
-      <div class="contrast-container-in-grid" ${ref(e => { output.contrastContainerElement = e; })}>
-        <span class="contrast-preview">Aa</span>
-        <span>${contrastRatioString}</span>
-      </div>
-    </div>`,
-    target, {host: input});
-};
-```
-
 ## Migrating `UI.ARIAUtils` helpers
 
 Replace calls to `UI.ARIAUtils` helper functions with the corresponding ARIA attributes directly in the lit-html template.

package/front_end/core/host/UserMetrics.ts

@@ -822,7 +822,6 @@ export enum DevtoolsExperiments {
   'authored-deployed-grouping' = 63,
   'just-my-code' = 65,
   'use-source-map-scopes' = 76,
-  'timeline-show-postmessage-events' = 86,
   'timeline-debug-mode' = 93,
   'durable-messages' = 110,
   'jpeg-xl' = 111,

package/front_end/core/root/ExperimentNames.ts

@@ -20,7 +20,6 @@ export enum ExperimentName {
   AUTHORED_DEPLOYED_GROUPING = 'authored-deployed-grouping',
   JUST_MY_CODE = 'just-my-code',
   USE_SOURCE_MAP_SCOPES = 'use-source-map-scopes',
-  TIMELINE_SHOW_POST_MESSAGE_EVENTS = 'timeline-show-postmessage-events',
   TIMELINE_DEBUG_MODE = 'timeline-debug-mode',
   DURABLE_MESSAGES = 'durable-messages',
   JPEG_XL = 'jpeg-xl',

package/front_end/core/sdk/DOMModel.ts

@@ -1223,6 +1223,122 @@ export class DOMNode extends Common.ObjectWrapper.ObjectWrapper<DOMNodeEventType
     return this.domModel().nodeForId(response.nodeId);
   }
 
+  async takeSnapshot(ownerDocumentSnapshot?: DOMDocument): Promise<DOMNode> {
+    const snapshot = (this instanceof DOMDocument) ? new DOMDocumentSnapshot(this.domModel(), {
+      nodeId: this.id,
+      backendNodeId: this.backendNodeId(),
+      nodeType: this.nodeType(),
+      nodeName: this.nodeName(),
+      localName: this.localName(),
+      nodeValue: this.nodeValueInternal,
+    } as Protocol.DOM.Node) :
+                                                     new DOMNodeSnapshot(this.domModel());
+    snapshot.id = this.id;
+    snapshot.#backendNodeId = this.#backendNodeId;
+    snapshot.#frameOwnerFrameId = this.#frameOwnerFrameId;
+    snapshot.#nodeType = this.#nodeType;
+    snapshot.#nodeName = this.#nodeName;
+    snapshot.#localName = this.#localName;
+    snapshot.nodeValueInternal = this.nodeValueInternal;
+    snapshot.#pseudoType = this.#pseudoType;
+    snapshot.#pseudoIdentifier = this.#pseudoIdentifier;
+    snapshot.#shadowRootType = this.#shadowRootType;
+    snapshot.#xmlVersion = this.#xmlVersion;
+    snapshot.#isSVGNode = this.#isSVGNode;
+    snapshot.#isScrollable = this.#isScrollable;
+    snapshot.#affectedByStartingStyles = this.#affectedByStartingStyles;
+    snapshot.ownerDocument =
+        ownerDocumentSnapshot || ((snapshot instanceof DOMDocument) ? snapshot : this.ownerDocument);
+    snapshot.#isInShadowTree = this.#isInShadowTree;
+    snapshot.childNodeCountInternal = this.childNodeCountInternal;
+
+    if (snapshot instanceof DOMDocument && this instanceof DOMDocument) {
+      snapshot.documentURL = this.documentURL;
+      snapshot.baseURL = this.baseURL;
+    }
+
+    if (!this.childrenInternal && this.childNodeCountInternal > 0) {
+      await this.getSubtree(1, false);
+    }
+
+    for (const [name, attr] of this.#attributes) {
+      snapshot.#attributes.set(name, {name: attr.name, value: attr.value, _node: snapshot});
+    }
+
+    if (this.childrenInternal) {
+      snapshot.childrenInternal = [];
+      for (const child of this.childrenInternal) {
+        const childSnapshot = await child.takeSnapshot(snapshot.ownerDocument || undefined);
+        childSnapshot.parentNode = snapshot;
+        childSnapshot.ownerDocument = (snapshot instanceof DOMDocument) ? snapshot : snapshot.ownerDocument;
+        snapshot.childrenInternal.push(childSnapshot);
+        if (childSnapshot.ownerDocument instanceof DOMDocument) {
+          if (childSnapshot.nodeName() === 'HTML' && !childSnapshot.ownerDocument.documentElement) {
+            childSnapshot.ownerDocument.documentElement = childSnapshot;
+          }
+          if (childSnapshot.nodeName() === 'BODY' && !childSnapshot.ownerDocument.body) {
+            childSnapshot.ownerDocument.body = childSnapshot;
+          }
+        }
+      }
+    }
+
+    for (const root of this.shadowRootsInternal) {
+      const rootSnapshot = await root.takeSnapshot(snapshot.ownerDocument || undefined);
+      rootSnapshot.parentNode = snapshot;
+      rootSnapshot.ownerDocument = snapshot.ownerDocument;
+      snapshot.shadowRootsInternal.push(rootSnapshot);
+    }
+
+    if (this.templateContentInternal) {
+      const templateSnapshot = await this.templateContentInternal.takeSnapshot(snapshot.ownerDocument || undefined);
+      templateSnapshot.parentNode = snapshot;
+      templateSnapshot.ownerDocument = snapshot.ownerDocument;
+      snapshot.templateContentInternal = templateSnapshot;
+    }
+
+    if (this.contentDocumentInternal) {
+      const contentDocSnapshot = await this.contentDocumentInternal.takeSnapshot();
+      contentDocSnapshot.parentNode = snapshot;
+      snapshot.contentDocumentInternal = contentDocSnapshot as DOMDocumentSnapshot;
+    }
+
+    if (this.#importedDocument) {
+      const importedDocSnapshot = await this.#importedDocument.takeSnapshot(snapshot.ownerDocument || undefined);
+      importedDocSnapshot.parentNode = snapshot;
+      importedDocSnapshot.ownerDocument = snapshot.ownerDocument;
+      snapshot.#importedDocument = importedDocSnapshot;
+    }
+
+    for (const [pseudoType, nodes] of this.#pseudoElements) {
+      const snapshots = [];
+      for (const node of nodes) {
+        const pseudoSnapshot = await node.takeSnapshot(snapshot.ownerDocument || undefined);
+        pseudoSnapshot.parentNode = snapshot;
+        pseudoSnapshot.ownerDocument = snapshot.ownerDocument;
+        snapshots.push(pseudoSnapshot);
+      }
+      snapshot.#pseudoElements.set(pseudoType, snapshots);
+    }
+
+    // We intentionally preserve references to live nodes for assignedSlot and distributedNodes.
+    // This allows slot adorners in the Elements panel to remain functional within the snapshot,
+    // enabling users to resolve and jump to the actual nodes in the live DOM tree.
+    if (this.#distributedNodes) {
+      snapshot.#distributedNodes = [...this.#distributedNodes];
+    }
+
+    snapshot.assignedSlot = this.assignedSlot;
+
+    snapshot.#retainedNodes = this.#retainedNodes;
+
+    if (this.#adoptedStyleSheets.length) {
+      snapshot.setAdoptedStyleSheets(this.#adoptedStyleSheets.map(sheet => sheet.id));
+    }
+
+    return snapshot;
+  }
+
   classNames(): string[] {
     const classes = this.getAttribute('class');
     return classes ? classes.split(/\s+/) : [];
@@ -2176,6 +2292,96 @@ export class DOMModelUndoStack {
 }
 
 SDKModel.register(DOMModel, {capabilities: Capability.DOM, autostart: true});
+export class DOMNodeSnapshot extends DOMNode {
+  override init(
+      _doc: DOMDocument|null, _isInShadowTree: boolean, _payload: Protocol.DOM.Node,
+      _retainedNodes?: Set<Protocol.DOM.BackendNodeId>|undefined): void {
+  }
+
+  override setNodeName(_name: string, _callback?: ((arg0: string|null, arg1: DOMNode|null) => void)|undefined): void {
+  }
+
+  override setNodeValue(_value: string, _callback?: ((arg0: string|null) => void)|undefined): void {
+  }
+
+  override setAttribute(_name: string, _text: string, _callback?: ((arg0: string|null) => void)|undefined): void {
+  }
+
+  override setAttributeValue(_name: string, _value: string, _callback?: ((arg0: string|null) => void)|undefined): void {
+  }
+
+  override removeAttribute(_name: string): Promise<void> {
+    return Promise.resolve();
+  }
+
+  override setOuterHTML(_html: string, _callback?: ((arg0: string|null) => void)|undefined): void {
+  }
+
+  override removeNode(_callback?: ((arg0: string|null, arg1?: Protocol.DOM.NodeId|undefined) => void)|undefined):
+      Promise<void> {
+    return Promise.resolve();
+  }
+
+  override copyTo(
+      _targetNode: DOMNode, _anchorNode: DOMNode|null,
+      _callback?: ((arg0: string|null, arg1: DOMNode|null) => void)|undefined): void {
+  }
+
+  override moveTo(
+      _targetNode: DOMNode, _anchorNode: DOMNode|null,
+      _callback?: ((arg0: string|null, arg1: DOMNode|null) => void)|undefined): void {
+  }
+
+  override setAsInspectedNode(): Promise<void> {
+    return Promise.resolve();
+  }
+}
+
+export class DOMDocumentSnapshot extends DOMDocument {
+  override init(
+      _doc: DOMDocument|null, _isInShadowTree: boolean, _payload: Protocol.DOM.Node,
+      _retainedNodes?: Set<Protocol.DOM.BackendNodeId>|undefined): void {
+  }
+
+  override setNodeName(_name: string, _callback?: ((arg0: string|null, arg1: DOMNode|null) => void)|undefined): void {
+  }
+
+  override setNodeValue(_value: string, _callback?: ((arg0: string|null) => void)|undefined): void {
+  }
+
+  override setAttribute(_name: string, _text: string, _callback?: ((arg0: string|null) => void)|undefined): void {
+  }
+
+  override setAttributeValue(_name: string, _value: string, _callback?: ((arg0: string|null) => void)|undefined): void {
+  }
+
+  override removeAttribute(_name: string): Promise<void> {
+    return Promise.resolve();
+  }
+
+  override setOuterHTML(_html: string, _callback?: ((arg0: string|null) => void)|undefined): void {
+  }
+
+  override removeNode(_callback?: ((arg0: string|null, arg1?: Protocol.DOM.NodeId|undefined) => void)|undefined):
+      Promise<void> {
+    return Promise.resolve();
+  }
+
+  override copyTo(
+      _targetNode: DOMNode, _anchorNode: DOMNode|null,
+      _callback?: ((arg0: string|null, arg1: DOMNode|null) => void)|undefined): void {
+  }
+
+  override moveTo(
+      _targetNode: DOMNode, _anchorNode: DOMNode|null,
+      _callback?: ((arg0: string|null, arg1: DOMNode|null) => void)|undefined): void {
+  }
+
+  override setAsInspectedNode(): Promise<void> {
+    return Promise.resolve();
+  }
+}
+
 export interface Attribute {
   name: string;
   value: string;

package/front_end/core/sdk/SourceMapScopesInfo.ts

@@ -418,7 +418,7 @@ export class SourceMapScopesInfo {
    * Returns the authored function name of the function containing the provided generated position.
    */
   findOriginalFunctionName(position: ScopesCodec.Position): string|null {
-    const originalInnerMostScope = this.findOriginalFunctionScope(position)?.scope ?? undefined;
+    const originalInnerMostScope = this.findOriginalFunctionScope(position)?.scope;
     return this.#findFunctionNameInOriginalScopeChain(originalInnerMostScope);
   }
 

package/front_end/entrypoints/greendev_floaty/floaty.css

@@ -134,7 +134,7 @@ html, body {
   margin-top: 8px;
   padding-top: 8px;
   border-top: 1px solid #eee;
-  font-family: monospace;
+  font-family: var(--monospace-font-family);
 }
 
 .thought, .action {
@@ -186,7 +186,7 @@ html, body {
 
 .green-dev-floaty-dialog-node-description {
   font-size: 11px;
-  font-family: monospace;
+  font-family: var(--monospace-font-family);
   color: #0b57d0;
   background-color: #d3e3fd;
   padding: 2px 8px;

package/front_end/entrypoints/main/MainImpl.ts

@@ -413,11 +413,6 @@ export class MainImpl {
     Root.Runtime.experiments.register(
         Root.ExperimentNames.ExperimentName.JUST_MY_CODE, 'Hide ignore-listed code in Sources tree view');
 
-    Root.Runtime.experiments.register(
-        Root.ExperimentNames.ExperimentName.TIMELINE_SHOW_POST_MESSAGE_EVENTS,
-        'Performance panel: show postMessage dispatch and handling flows',
-    );
-
     Root.Runtime.experiments.registerHostExperiment({
       name: Root.ExperimentNames.ExperimentName.DURABLE_MESSAGES,
       title: 'Durable Messages',

package/front_end/models/ai_assistance/ConversationHandler.ts

@@ -129,7 +129,7 @@ export class ConversationHandler extends Common.ObjectWrapper.ObjectWrapper<Even
   }): ConversationHandler {
     if (opts?.forceNew || conversationHandlerInstance === undefined) {
       const aidaClient = opts?.aidaClient ?? new Host.AidaClient.AidaClient();
-      conversationHandlerInstance = new ConversationHandler(aidaClient, opts?.aidaAvailability ?? undefined);
+      conversationHandlerInstance = new ConversationHandler(aidaClient, opts?.aidaAvailability);
     }
     return conversationHandlerInstance;
   }

package/front_end/models/ai_code_completion/AiCodeCompletion.ts

@@ -169,7 +169,7 @@ export class AiCodeCompletion {
     // As a temporary fix for b/441221870 we are prepending a newline for each prefix.
     prefix = '\n' + prefix;
 
-    let additionalContextFiles = additionalFiles ?? undefined;
+    let additionalContextFiles = additionalFiles;
     if (!additionalContextFiles) {
       additionalContextFiles = this.#panel === ContextFlavor.CONSOLE ? [{
         path: 'devtools-console-context.js',

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -761,6 +761,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     if (isNarrow === this.#walkthrough.isInlined) {
       return;
     }
+    // If the UI changed, we reset the visibility of the AI Walkthrough.
+    this.#clearWalkthrough();
     this.#walkthrough.isInlined = isNarrow;
     this.requestUpdate();
   }

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

@@ -11,6 +11,7 @@ import * as i18n from '../../../core/i18n/i18n.js';
 import type * as Platform from '../../../core/platform/platform.js';
 import * as Root from '../../../core/root/root.js';
 import * as SDK from '../../../core/sdk/sdk.js';
+import type * as Protocol from '../../../generated/protocol.js';
 import type {AiWidget, ComputedStyleAiWidget} 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';
@@ -278,6 +279,7 @@ export interface MessageInput {
     isExpanded: boolean,
     onToggle: (isOpen: boolean) => void,
     isInlined: boolean,
+    activeMessage: ModelChatMessage|null,
   };
 }
 
@@ -483,14 +485,18 @@ function renderStepDetails({
 
 function renderWalkthroughSidebarButton(
     input: ChatMessageViewInput,
-    lastStep: Step,
+    steps: Step[],
     ): Lit.LitTemplate {
   const {message, walkthrough} = input;
-  if (walkthrough.isInlined) {
+  const lastStep = steps.at(-1);
+  if (walkthrough.isInlined || !lastStep) {
     return Lit.nothing;
   }
+
+  const hasOneStepWithWidget = steps.some(step => step.widgets?.length);
   const title = walkthroughTitle({
     isLoading: input.isLoading,
+    hasWidgets: hasOneStepWithWidget,
     lastStep,
   });
 
@@ -505,7 +511,7 @@ function renderWalkthroughSidebarButton(
         .jslogContext=${walkthrough.isExpanded ? 'ai-hide-walkthrough-sidebar' : 'ai-show-walkthrough-sidebar'}
         data-show-walkthrough
         @click=${() => {
-          if(walkthrough.isExpanded) {
+          if(walkthrough.activeMessage === input.message && walkthrough.isExpanded) {
             walkthrough.onToggle(false);
           } else {
             // Can't just toggle the visibility here; we need to ensure we
@@ -535,7 +541,7 @@ function renderWalkthroughUI(input: ChatMessageViewInput, steps: Step[]): Lit.Li
   // If the walkthrough is in the sidebar, we render a button into the
   // ChatView to open it.
   const openWalkThroughSidebarButton =
-      !input.walkthrough.isInlined ? renderWalkthroughSidebarButton(input, lastStep) : Lit.nothing;
+      !input.walkthrough.isInlined ? renderWalkthroughSidebarButton(input, steps) : Lit.nothing;
 
   // If there are side-effect steps, and the walkthrough is not open, we render
   // those inline so that the user can see them and approve them.
@@ -554,6 +560,9 @@ function renderWalkthroughUI(input: ChatMessageViewInput, steps: Step[]): Lit.Li
 
   // If the walkthrough is inlined (narrow width screens), render it here.
   // Note that we force it open if there is a side-effect.
+
+  const isExpanded = (input.walkthrough.isExpanded && input.walkthrough.activeMessage === input.message) ||
+      steps.some(s => s.requestApproval);
   // clang-format off
   const walkthroughInline = input.walkthrough.isInlined ? html`
     <div class="walkthrough-container">
@@ -562,9 +571,9 @@ function renderWalkthroughUI(input: ChatMessageViewInput, steps: Step[]): Lit.Li
         isLoading: input.isLoading && input.isLastMessage,
         markdownRenderer: input.markdownRenderer,
         isInlined: true,
-        isExpanded: input.isLastMessage &&
-            (input.walkthrough.isExpanded || steps.some(step => Boolean(step.requestApproval))),
+        isExpanded,
         onToggle: input.walkthrough.onToggle,
+        onOpen: input.walkthrough.onOpen,
       })}></devtools-widget>
     </div>
   ` : Lit.nothing;
@@ -649,37 +658,42 @@ interface WidgetMakerResponse {
   revealable: unknown;
 }
 
+const computedStyleNodeCache = new Map<Protocol.DOM.BackendNodeId, SDK.DOMModel.DOMNode>();
+
 async function makeComputedStyleWidget(widgetData: ComputedStyleAiWidget): Promise<WidgetMakerResponse|null> {
-  const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
-  if (!target) {
-    return null;
-  }
-  const node = new SDK.DOMModel.DeferredDOMNode(
-      target,
-      widgetData.data.backendNodeId,
-  );
-  const resolved = await node.resolvePromise();
-  if (!resolved) {
-    return null;
+  let domNodeForId = computedStyleNodeCache.get(widgetData.data.backendNodeId);
+  if (!domNodeForId) {
+    const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    if (!target) {
+      return null;
+    }
+    const node = new SDK.DOMModel.DeferredDOMNode(
+        target,
+        widgetData.data.backendNodeId,
+    );
+    const resolved = await node.resolvePromise();
+    if (!resolved) {
+      return null;
+    }
+    domNodeForId = resolved;
+    computedStyleNodeCache.set(widgetData.data.backendNodeId, resolved);
   }
-  const model = new ComputedStyle.ComputedStyleModel.ComputedStyleModel(resolved);
-  const styles = new ComputedStyle.ComputedStyleModel.ComputedStyle(resolved, widgetData.data.computedStyles);
+  const styles = new ComputedStyle.ComputedStyleModel.ComputedStyle(domNodeForId, widgetData.data.computedStyles);
 
   const widgetConfig = UI.Widget.widgetConfig(Elements.ComputedStyleWidget.ComputedStyleWidget, {
     nodeStyle: styles,
     matchedStyles: widgetData.data.matchedCascade,
     // This disables showing the nested traces and detailed information in the widget.
     propertyTraces: null,
-    computedStyleModel: model,
     allowUserControl: false,
     filterText: new RegExp(widgetData.data.properties.join('|'), 'i')
   });
 
   // clang-format off
-    const widget = html`<devtools-widget class="computed-styles-widget" .widgetConfig=${widgetConfig}></devtools-widget>`;
+  const widget = html`<devtools-widget class="computed-styles-widget" .widgetConfig=${widgetConfig}></devtools-widget>`;
   // clang-format on
 
-  return {renderedWidget: widget, revealable: new Elements.ElementsPanel.NodeComputedStyles(resolved)};
+  return {renderedWidget: widget, revealable: new Elements.ElementsPanel.NodeComputedStyles(domNodeForId)};
 }
 
 function renderWidgetResponse(response: WidgetMakerResponse|null): Lit.LitTemplate {
@@ -696,15 +710,17 @@ function renderWidgetResponse(response: WidgetMakerResponse|null): Lit.LitTempla
 
   // clang-format off
   return html`
-    <div class="widget-content-container">
-      ${response.renderedWidget}
-    </div>
-    <div class="widget-reveal-container">
-      <devtools-button class="widget-reveal"
-        .iconName=${'tab-move'}
-        .variant=${Buttons.Button.Variant.TEXT}
-        @click=${onReveal}
-      >${lockedString(UIStringsNotTranslate.reveal)}</devtools-button>
+    <div class="widget-and-revealer-container">
+      <div class="widget-content-container">
+        ${response.renderedWidget}
+      </div>
+      <div class="widget-reveal-container">
+        <devtools-button class="widget-reveal"
+          .iconName=${'tab-move'}
+          .variant=${Buttons.Button.Variant.TEXT}
+          @click=${onReveal}
+        >${lockedString(UIStringsNotTranslate.reveal)}</devtools-button>
+      </div>
     </div>
     `;
   // clang-format on
@@ -994,6 +1010,7 @@ export class ChatMessage extends UI.Widget.Widget {
     onToggle: () => {},
     isInlined: false,
     isExpanded: false,
+    activeMessage: null,
   };
 
   #suggestionsResizeObserver = new ResizeObserver(() => this.#handleSuggestionsScrollOrResize());

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

@@ -27,9 +27,13 @@ const UIStrings = {
    */
   title: 'Investigation steps',
   /**
-   * @description Title for the button that shows the thinking process (walkthrough).
+   * @description Title for the button that shows the walkthrough when there are no widgets in the walkthrough.
    */
   showThinking: 'Show thinking',
+  /**
+   * @description Title for the button that shows the walkthrough when there are widgets in the walkthrough.
+   */
+  showAgentWalkthrough: 'Show agent walkthrough',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/ai_assistance/components/WalkthroughView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -41,14 +45,21 @@ export interface ViewInput {
   isInlined: boolean;
   isExpanded: boolean;
   onToggle: (isOpen: boolean) => void;
+  onOpen: (message: ModelChatMessage) => void;
 }
 
 export function walkthroughTitle(input: {
   isLoading: boolean,
+  hasWidgets: boolean,
   lastStep: Step,
 }): string {
-  const title = input.isLoading ? titleForStep(input.lastStep) : lockedString(UIStrings.showThinking);
-  return title;
+  if (input.isLoading) {
+    return titleForStep(input.lastStep);
+  }
+  if (input.hasWidgets) {
+    return lockedString(UIStrings.showAgentWalkthrough);
+  }
+  return lockedString(UIStrings.showThinking);
 }
 
 function renderInlineWalkthrough(input: ViewInput, stepsOutput: Lit.LitTemplate, steps: Step[]): Lit.LitTemplate {
@@ -61,12 +72,14 @@ function renderInlineWalkthrough(input: ViewInput, stepsOutput: Lit.LitTemplate,
     input.onToggle((event.target as HTMLDetailsElement).open);
   }
 
+  const hasWidgets = steps.some(s => s.widgets?.length);
+
   // clang-format off
   return html`
     <details class="walkthrough-inline" ?open=${input.isExpanded} @toggle=${onToggle}>
       <summary>
         ${input.isLoading ? html`<devtools-spinner></devtools-spinner>` : Lit.nothing}
-        ${walkthroughTitle({isLoading: input.isLoading, lastStep,})}
+        ${walkthroughTitle({isLoading: input.isLoading, lastStep, hasWidgets})}
         <devtools-icon name="chevron-down"></devtools-icon>
       </summary>
       ${stepsOutput}
@@ -155,6 +168,7 @@ export class WalkthroughView extends UI.Widget.Widget {
   #isLoading = false;
   #markdownRenderer: MarkdownLitRenderer|null = null;
   #onToggle: (isOpen: boolean) => void = () => {};
+  #onOpen: (message: ModelChatMessage) => void = () => {};
   #isInlined = false;
   #isExpanded = false;
 
@@ -185,6 +199,15 @@ export class WalkthroughView extends UI.Widget.Widget {
     return this.#message;
   }
 
+  get onOpen(): (message: ModelChatMessage) => void {
+    return this.#onOpen;
+  }
+
+  set onOpen(onOpen: (message: ModelChatMessage) => void) {
+    this.#onOpen = onOpen;
+    this.requestUpdate();
+  }
+
   set message(message: ModelChatMessage|null) {
     this.#message = message;
     this.requestUpdate();
@@ -214,6 +237,7 @@ export class WalkthroughView extends UI.Widget.Widget {
           isLoading: this.#isLoading,
           markdownRenderer: this.#markdownRenderer,
           onToggle: this.#onToggle,
+          onOpen: this.#onOpen,
           isInlined: this.#isInlined,
           isExpanded: this.#isExpanded,
           message: this.#message,

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

@@ -364,10 +364,13 @@
 
   .step-widgets-wrapper {
     width: fit-content;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--sys-size-5);
   }
 
   .widget-reveal-container {
-    width: 100%;
     background: var(--sys-color-surface5);
     border-bottom-right-radius: var(--sys-shape-corner-medium);
     border-bottom-left-radius: var(--sys-shape-corner-medium);
@@ -378,7 +381,6 @@
     padding: var(--sys-size-4);
     border-top-left-radius: var(--sys-shape-corner-medium);
     border-top-right-radius: var(--sys-shape-corner-medium);
-    width: 100%;
     overflow-x: auto;
     background-color: var(--sys-color-surface3);
 

package/front_end/panels/application/IndexedDBModel.ts

@@ -143,8 +143,7 @@ export class IndexedDBModel extends SDK.SDKModel.SDKModel<EventTypes> implements
     }
 
     for (const [storageBucketName] of this.databaseNamesByStorageKeyAndBucket.get(storageKey) || []) {
-      const storageBucket =
-          this.storageBucketModel?.getBucketByName(storageKey, storageBucketName ?? undefined)?.bucket;
+      const storageBucket = this.storageBucketModel?.getBucketByName(storageKey, storageBucketName)?.bucket;
       if (storageBucket) {
         this.removeStorageBucket(storageBucket);
       }
@@ -169,8 +168,7 @@ export class IndexedDBModel extends SDK.SDKModel.SDKModel<EventTypes> implements
     for (const [storageKey] of this.databaseNamesByStorageKeyAndBucket) {
       const storageBucketNames = this.databaseNamesByStorageKeyAndBucket.get(storageKey)?.keys() || [];
       for (const storageBucketName of storageBucketNames) {
-        const storageBucket =
-            this.storageBucketModel?.getBucketByName(storageKey, storageBucketName ?? undefined)?.bucket;
+        const storageBucket = this.storageBucketModel?.getBucketByName(storageKey, storageBucketName)?.bucket;
         if (storageBucket) {
           await this.loadDatabaseNamesByStorageBucket(storageBucket);
         }