chrome-devtools-frontend 1.0.1611099 → 1.0.1611825

package/front_end/core/host/AidaClientTypes.ts

@@ -384,10 +384,15 @@ export interface FactualityMetadata {
   facts: FactualityFact[];
 }
 
+export interface InferenceOptionMetadata {
+  modelId: string;
+}
+
 export interface ResponseMetadata {
   rpcGlobalId?: RpcGlobalId;
   attributionMetadata?: AttributionMetadata;
   factualityMetadata?: FactualityMetadata;
+  inferenceOptionMetadata?: InferenceOptionMetadata;
 }
 
 export interface DoConversationResponse {

package/front_end/core/host/AidaGcaTranslation.ts

@@ -360,7 +360,7 @@ function gcaCandidateToAidaGenerationSample(candidate: GCA.Candidate): AIDA.Gene
 
 function convertAidaFactsToGcaContent(facts: AIDA.RequestFact[]): GCA.Content {
   return {
-    role: 'model',
+    role: 'user',
     parts: facts.map(fact => {
       return {text: `[source: ${fact.metadata.source}] ${fact.text}`};
     }),
@@ -454,6 +454,7 @@ export function gcaChunkResponseToAidaChunkResponse(response: GCA.GenerateConten
     const parts = candidate?.content?.parts || [];
     const metadata: AIDA.ResponseMetadata = {
       rpcGlobalId: response.responseId,
+      inferenceOptionMetadata: {modelId: response.modelVersion}
     };
 
     if (candidate?.citationMetadata?.citations) {

package/front_end/core/sdk/ResourceTreeModel.ts

@@ -858,7 +858,8 @@ export class ResourceTreeFrame {
    * https://chromium.googlesource.com/chromium/src/+/HEAD/docs/frame_trees.md
    */
   isPrimaryFrame(): boolean {
-    return !this.#sameTargetParentFrame && this.#model.target() === TargetManager.instance().primaryPageTarget();
+    return !this.#sameTargetParentFrame &&
+        this.#model.target() === this.#model.target().targetManager().primaryPageTarget();
   }
 
   removeChildFrame(frame: ResourceTreeFrame, isSwap: boolean): void {

package/front_end/core/sdk/Target.ts

@@ -70,9 +70,7 @@ export class Target extends ProtocolClient.InspectorBackend.TargetBase {
         this.#capabilitiesMask = Capability.JS | Capability.LOG | Capability.NETWORK | Capability.TARGET |
             Capability.INSPECTOR | Capability.IO | Capability.EVENT_BREAKPOINTS;
         if (parentTarget?.type() !== Type.FRAME) {
-          // TODO(crbug.com/406991275): This should also grant the `STORAGE` capability, but first the
-          // crashers in https://crbug.com/466134219 have to be resolved.
-          this.#capabilitiesMask |= Capability.BROWSER;
+          this.#capabilitiesMask |= Capability.BROWSER | Capability.STORAGE;
         }
         break;
       case Type.SHARED_WORKER:

package/front_end/generated/InspectorBackendCommands.ts

@@ -895,7 +895,7 @@ inspectorBackend.registerCommand("Network.enableReportingApi", [{"name": "enable
 inspectorBackend.registerCommand("Network.enableDeviceBoundSessions", [{"name": "enable", "type": "boolean", "optional": false, "description": "Whether to enable or disable events.", "typeRef": null}], [], "Sets up tracking device bound sessions and fetching of initial set of sessions.");
 inspectorBackend.registerCommand("Network.fetchSchemefulSite", [{"name": "origin", "type": "string", "optional": false, "description": "The URL origin.", "typeRef": null}], ["schemefulSite"], "Fetches the schemeful site for a specific origin.");
 inspectorBackend.registerCommand("Network.loadNetworkResource", [{"name": "frameId", "type": "string", "optional": true, "description": "Frame id to get the resource for. Mandatory for frame targets, and should be omitted for worker targets.", "typeRef": "Page.FrameId"}, {"name": "url", "type": "string", "optional": false, "description": "URL of the resource to get content for.", "typeRef": null}, {"name": "options", "type": "object", "optional": false, "description": "Options for the request.", "typeRef": "Network.LoadNetworkResourceOptions"}], ["resource"], "Fetches the resource and returns the content.");
-inspectorBackend.registerCommand("Network.setCookieControls", [{"name": "enableThirdPartyCookieRestriction", "type": "boolean", "optional": false, "description": "Whether 3pc restriction is enabled.", "typeRef": null}, {"name": "disableThirdPartyCookieMetadata", "type": "boolean", "optional": false, "description": "Whether 3pc grace period exception should be enabled; false by default.", "typeRef": null}, {"name": "disableThirdPartyCookieHeuristics", "type": "boolean", "optional": false, "description": "Whether 3pc heuristics exceptions should be enabled; false by default.", "typeRef": null}], [], "Sets Controls for third-party cookie access Page reload is required before the new cookie behavior will be observed");
+inspectorBackend.registerCommand("Network.setCookieControls", [{"name": "enableThirdPartyCookieRestriction", "type": "boolean", "optional": false, "description": "Whether 3pc restriction is enabled.", "typeRef": null}], [], "Sets Controls for third-party cookie access Page reload is required before the new cookie behavior will be observed");
 inspectorBackend.registerType("Network.ResourceTiming", [{"name": "requestTime", "type": "number", "optional": false, "description": "Timing's requestTime is a baseline in seconds, while the other numbers are ticks in milliseconds relatively to this requestTime.", "typeRef": null}, {"name": "proxyStart", "type": "number", "optional": false, "description": "Started resolving proxy.", "typeRef": null}, {"name": "proxyEnd", "type": "number", "optional": false, "description": "Finished resolving proxy.", "typeRef": null}, {"name": "dnsStart", "type": "number", "optional": false, "description": "Started DNS address resolve.", "typeRef": null}, {"name": "dnsEnd", "type": "number", "optional": false, "description": "Finished DNS address resolve.", "typeRef": null}, {"name": "connectStart", "type": "number", "optional": false, "description": "Started connecting to the remote host.", "typeRef": null}, {"name": "connectEnd", "type": "number", "optional": false, "description": "Connected to the remote host.", "typeRef": null}, {"name": "sslStart", "type": "number", "optional": false, "description": "Started SSL handshake.", "typeRef": null}, {"name": "sslEnd", "type": "number", "optional": false, "description": "Finished SSL handshake.", "typeRef": null}, {"name": "workerStart", "type": "number", "optional": false, "description": "Started running ServiceWorker.", "typeRef": null}, {"name": "workerReady", "type": "number", "optional": false, "description": "Finished Starting ServiceWorker.", "typeRef": null}, {"name": "workerFetchStart", "type": "number", "optional": false, "description": "Started fetch event.", "typeRef": null}, {"name": "workerRespondWithSettled", "type": "number", "optional": false, "description": "Settled fetch event respondWith promise.", "typeRef": null}, {"name": "workerRouterEvaluationStart", "type": "number", "optional": true, "description": "Started ServiceWorker static routing source evaluation.", "typeRef": null}, {"name": "workerCacheLookupStart", "type": "number", "optional": true, "description": "Started cache lookup when the source was evaluated to `cache`.", "typeRef": null}, {"name": "sendStart", "type": "number", "optional": false, "description": "Started sending request.", "typeRef": null}, {"name": "sendEnd", "type": "number", "optional": false, "description": "Finished sending request.", "typeRef": null}, {"name": "pushStart", "type": "number", "optional": false, "description": "Time the server started pushing request.", "typeRef": null}, {"name": "pushEnd", "type": "number", "optional": false, "description": "Time the server finished pushing request.", "typeRef": null}, {"name": "receiveHeadersStart", "type": "number", "optional": false, "description": "Started receiving response headers.", "typeRef": null}, {"name": "receiveHeadersEnd", "type": "number", "optional": false, "description": "Finished receiving response headers.", "typeRef": null}]);
 inspectorBackend.registerType("Network.PostDataEntry", [{"name": "bytes", "type": "string", "optional": true, "description": "", "typeRef": null}]);
 inspectorBackend.registerType("Network.Request", [{"name": "url", "type": "string", "optional": false, "description": "Request URL (without fragment).", "typeRef": null}, {"name": "urlFragment", "type": "string", "optional": true, "description": "Fragment of the requested URL starting with hash, if present.", "typeRef": null}, {"name": "method", "type": "string", "optional": false, "description": "HTTP request method.", "typeRef": null}, {"name": "headers", "type": "object", "optional": false, "description": "HTTP request headers.", "typeRef": "Network.Headers"}, {"name": "postData", "type": "string", "optional": true, "description": "HTTP POST request data. Use postDataEntries instead.", "typeRef": null}, {"name": "hasPostData", "type": "boolean", "optional": true, "description": "True when the request has POST data. Note that postData might still be omitted when this flag is true when the data is too long.", "typeRef": null}, {"name": "postDataEntries", "type": "array", "optional": true, "description": "Request body elements (post data broken into individual entries).", "typeRef": "Network.PostDataEntry"}, {"name": "mixedContentType", "type": "string", "optional": true, "description": "The mixed content type of the request.", "typeRef": "Security.MixedContentType"}, {"name": "initialPriority", "type": "string", "optional": false, "description": "Priority of the resource request at the time request is sent.", "typeRef": "Network.ResourcePriority"}, {"name": "referrerPolicy", "type": "string", "optional": false, "description": "The referrer policy of the request, as defined in https://www.w3.org/TR/referrer-policy/", "typeRef": null}, {"name": "isLinkPreload", "type": "boolean", "optional": true, "description": "Whether is loaded via link preload.", "typeRef": null}, {"name": "trustTokenParams", "type": "object", "optional": true, "description": "Set for requests when the TrustToken API is used. Contains the parameters passed by the developer (e.g. via \\\"fetch\\\") as understood by the backend.", "typeRef": "Network.TrustTokenParams"}, {"name": "isSameSite", "type": "boolean", "optional": true, "description": "True if this resource request is considered to be the 'same site' as the request corresponding to the main frame.", "typeRef": null}, {"name": "isAdRelated", "type": "boolean", "optional": true, "description": "True when the resource request is ad-related.", "typeRef": null}]);

package/front_end/generated/SupportedCSSProperties.js

@@ -3493,6 +3493,7 @@ export const generatedProperties = [
  {
   "keywords": [
    "auto",
+   "chain",
    "contain",
    "none"
   ],
@@ -3501,6 +3502,7 @@ export const generatedProperties = [
  {
   "keywords": [
    "auto",
+   "chain",
    "contain",
    "none"
   ],
@@ -6635,6 +6637,7 @@ export const generatedPropertyValues = {
  "overscroll-behavior-x": {
   "values": [
    "auto",
+   "chain",
    "contain",
    "none"
   ]
@@ -6642,6 +6645,7 @@ export const generatedPropertyValues = {
  "overscroll-behavior-y": {
   "values": [
    "auto",
+   "chain",
    "contain",
    "none"
   ]

package/front_end/generated/protocol.ts

@@ -12584,14 +12584,6 @@ export namespace Network {
      * Whether 3pc restriction is enabled.
      */
     enableThirdPartyCookieRestriction: boolean;
-    /**
-     * Whether 3pc grace period exception should be enabled; false by default.
-     */
-    disableThirdPartyCookieMetadata: boolean;
-    /**
-     * Whether 3pc heuristics exceptions should be enabled; false by default.
-     */
-    disableThirdPartyCookieHeuristics: boolean;
   }
 
   /**

package/front_end/models/web_mcp/WebMCPModel.ts

@@ -7,7 +7,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as Bindings from '../bindings/bindings.js';
-import type * as StackTrace from '../stack_trace/stack_trace.js';
+import * as StackTrace from '../stack_trace/stack_trace.js';
 
 export const enum Events {
   TOOLS_ADDED = 'ToolsAdded',
@@ -16,16 +16,78 @@ export const enum Events {
   TOOL_RESPONDED = 'ToolResponded',
 }
 
+export interface ExceptionDetails {
+  readonly error: SDK.RemoteObject.RemoteObject;
+  readonly description: string;
+  readonly frames: StackTrace.ErrorStackParser.ParsedErrorFrame[];
+  readonly cause?: ExceptionDetails;
+}
+
+export class Result {
+  readonly status: Protocol.WebMCP.InvocationStatus;
+  readonly output?: unknown;
+  readonly errorText?: string;
+  // TODO(crbug.com/494516094) Clean this up if the target disappears?
+  readonly #exception?: SDK.RemoteObject.RemoteObject;
+  #exceptionDetails?: Promise<ExceptionDetails|undefined>;
+
+  constructor(
+      status: Protocol.WebMCP.InvocationStatus, output: unknown|undefined, errorText: string|undefined,
+      exception: SDK.RemoteObject.RemoteObject|undefined) {
+    this.status = status;
+    this.errorText = errorText;
+    this.#exception = exception;
+    this.output = output;
+  }
+
+  get exceptionDetails(): Promise<ExceptionDetails|undefined>|undefined {
+    if (!this.#exceptionDetails) {
+      this.#exceptionDetails = this.#resolveExceptionDetails(this.#exception);
+    }
+    return this.#exceptionDetails;
+  }
+
+  async #resolveExceptionDetails(errorObj: SDK.RemoteObject.RemoteObject|undefined):
+      Promise<ExceptionDetails|undefined> {
+    if (!errorObj) {
+      return undefined;
+    }
+    const error = SDK.RemoteObject.RemoteError.objectAsError(errorObj);
+    const [details, cause] = await Promise.all([error.exceptionDetails(), error.cause()]);
+    const description = error.errorStack;
+
+    const frames =
+        StackTrace.ErrorStackParser.parseSourcePositionsFromErrorStack(errorObj.runtimeModel(), error.errorStack) || [];
+    if (details?.stackTrace) {
+      StackTrace.ErrorStackParser.augmentErrorStackWithScriptIds(frames, details.stackTrace);
+    }
+
+    if (cause?.subtype === 'error') {
+      return {error: errorObj, description, frames, cause: await this.#resolveExceptionDetails(cause)};
+    }
+
+    if (cause?.type === 'string') {
+      return {
+        error: errorObj,
+        description,
+        frames,
+        cause: {
+          error: cause,
+          description: cause.value as string,
+          frames: [],
+        }
+      };
+    }
+
+    return {error: errorObj, description, frames};
+  }
+}
+
 export interface Call {
   invocationId: string;
   tool: Tool;
   input: string;
-  result?: {
-    status: Protocol.WebMCP.InvocationStatus,
-    output?: unknown,
-    errorText?: string,
-    exception?: Protocol.Runtime.RemoteObject,
-  };
+  result?: Result;
 }
 
 export class Tool {
@@ -160,11 +222,7 @@ export class WebMCPModel extends SDK.SDKModel.SDKModel<EventTypes> implements Pr
     if (!tool) {
       return;
     }
-    const call: Call = {
-      invocationId: params.invocationId,
-      input: params.input,
-      tool,
-    };
+    const call: Call = {tool, input: params.input, invocationId: params.invocationId};
     this.#calls.set(params.invocationId, call);
     this.dispatchEventToListeners(Events.TOOL_INVOKED, call);
   }
@@ -174,12 +232,9 @@ export class WebMCPModel extends SDK.SDKModel.SDKModel<EventTypes> implements Pr
     if (!call) {
       return;
     }
-    call.result = {
-      status: params.status,
-      output: params.output,
-      errorText: params.errorText,
-      exception: params.exception,
-    };
+    const exception =
+        params.exception && this.target().model(SDK.RuntimeModel.RuntimeModel)?.createRemoteObject(params.exception);
+    call.result = new Result(params.status, params.output, params.errorText, exception);
     this.dispatchEventToListeners(Events.TOOL_RESPONDED, call);
   }
 }

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -306,9 +306,8 @@ async function getEmptyStateSuggestions(conversation?: AiAssistanceModel.AiConve
       ];
     case AiAssistanceModel.AiHistoryStorage.ConversationType.ACCESSIBILITY:
       return [
-        {title: 'What are the accessibility issues on this page?', jslogContext: 'accessibility-default'},
-        {title: 'How can I fix these accessibility issues?', jslogContext: 'accessibility-default'},
-        {title: 'What does this Lighthouse report say about accessibility?', jslogContext: 'accessibility-default'},
+        {title: 'How can I fix accessibility issues on my page?', jslogContext: 'accessibility-default'},
+        {title: 'What accessibility issues exist on my page?', jslogContext: 'accessibility-default'},
       ];
     case AiAssistanceModel.AiHistoryStorage.ConversationType.NETWORK:
 

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

@@ -157,9 +157,13 @@ const UIStringsNotTranslate = {
    */
   completed: 'Completed',
   /**
-   * @description Aria label for the cancel icon to be read by screen reader
+   * @description Aria label for the spinner to be read by screen reader when a step is in progress.
    */
-  canceled: 'Canceled',
+  inProgress: 'In progress',
+  /**
+   * @description Aria label for the aborted icon to be read by screen reader
+   */
+  aborted: 'Aborted',
   /**
    * @description Alt text for the image input (displayed in the chat messages) that has been sent to the model.
    */
@@ -204,6 +208,14 @@ const UIStringsNotTranslate = {
    * @description Title for the bottom up thread activity widget.
    */
   bottomUpTree: 'Bottom-up thread activity',
+  /**
+   * @description Accessilility label for the button that shows the walkthrough when there are no widgets in the walkthrough.
+   */
+  showThinking: 'Show thinking',
+  /**
+   * @description Accessilility label for the button that hides the walkthrough when there are no widgets in the walkthrough.
+   */
+  hideThinking: 'Hide thinking',
 } as const;
 
 export interface Step {
@@ -463,7 +475,7 @@ function renderTitle(step: Step): Lit.LitTemplate {
       html`<span class="paused">${lockedString(UIStringsNotTranslate.paused)}: </span>` :
       Lit.nothing;
 
-  return html`<span class="title">${paused}${titleForStep(step)}</span>`;
+  return html`<span class="title" aria-label=${titleForStep(step)}>${paused}${titleForStep(step)}</span>`;
 }
 
 function renderStepCode(step: Step): Lit.LitTemplate {
@@ -571,6 +583,14 @@ function renderWalkthroughSidebarButton(
     // We only apply the widget styling when loading is complete
     'has-widgets': hasOneStepWithWidget && !input.isLoading,
   });
+
+  let accessibleLabel = title;
+  // If the agent is still thinking we want the accessibility label to include the current step title followed by Show/Hide thinking.
+  if (input.isLoading) {
+    const suffix = isExpanded ? UIStringsNotTranslate.hideThinking : UIStringsNotTranslate.showThinking;
+    accessibleLabel = `${titleForStep(lastStep)} ${i18n.i18n.lockedString(suffix)}`;
+  }
+
   // clang-format off
   return html`
     <div class=${toggleContainerClasses}>
@@ -581,6 +601,7 @@ function renderWalkthroughSidebarButton(
         .variant=${variant}
         .size=${Buttons.Button.Size.SMALL}
         .title=${lastStep.isLoading ? titleForStep(lastStep) : title}
+        .accessibleLabel=${accessibleLabel}
         .jslogContext=${walkthrough.isExpanded ? 'ai-hide-walkthrough-sidebar' : 'ai-show-walkthrough-sidebar'}
         data-show-walkthrough
         @click=${() => {
@@ -670,7 +691,7 @@ function renderStepBadge({step, isLoading, isLast}: {
   isLast: boolean,
 }): Lit.LitTemplate {
   if (isLoading && isLast && !step.requestApproval) {
-    return html`<devtools-spinner></devtools-spinner>`;
+    return html`<devtools-spinner aria-label=${lockedString(UIStringsNotTranslate.inProgress)}></devtools-spinner>`;
   }
 
   let iconName = 'checkmark';
@@ -678,10 +699,10 @@ function renderStepBadge({step, isLoading, isLast}: {
   let role: 'button'|undefined = 'button';
   if (isLast && step.requestApproval) {
     role = undefined;
-    ariaLabel = undefined;
+    ariaLabel = lockedString(UIStringsNotTranslate.paused);
     iconName = 'pause-circle';
   } else if (step.canceled) {
-    ariaLabel = lockedString(UIStringsNotTranslate.canceled);
+    ariaLabel = lockedString(UIStringsNotTranslate.aborted);
     iconName = 'cross';
   }
 
@@ -925,6 +946,7 @@ function renderWidgetResponse(response: WidgetMakerResponse|null): Lit.LitTempla
   const revealButton = html`
     <devtools-button class="widget-reveal-button"
       .variant=${Buttons.Button.Variant.TEXT}
+      .accessibleLabel=${lockedString(UIStringsNotTranslate.reveal)}
       @click=${onReveal}
     >
       ${response.customRevealTitle ?? lockedString(UIStringsNotTranslate.reveal)}
@@ -937,7 +959,7 @@ function renderWidgetResponse(response: WidgetMakerResponse|null): Lit.LitTempla
     <div class=${classes}>
       ${response.title ? html`
         <div class="widget-header">
-          <div class="widget-name">${response.title}</div>
+          <h3 class="widget-name">${response.title}</h3>
           <div class="widget-reveal-container">
             ${revealButton}
           </div>
@@ -1242,6 +1264,7 @@ function renderActions(input: ChatMessageViewInput, output: ViewOutput): Lit.Lit
             .jslogContext=${'ai-export-for-agents'}
             .variant=${Buttons.Button.Variant.OUTLINED}
             .iconName=${'copy'}
+            aria-label=${lockedString(UIStringsNotTranslate.exportForAgents)}
             @click=${input.onExportClick}
           >${lockedString(UIStringsNotTranslate.exportForAgents)}</devtools-button>
           ${input.suggestions ? html`<div class="vertical-separator"></div>` : Lit.nothing}

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

@@ -87,17 +87,18 @@ export const DEFAULT_VIEW: View = (input, _output, target): void => {
     <style>${styles}</style>
     <div class="export-for-agents-dialog">
       <header>
-        <h2 tabindex="-1">
+        <h1 id="export-for-agents-dialog-title" tabindex="-1">
           ${i18nString(UIStrings.exportForAgents)}
-        </h2>
+        </h1>
       </header>
-      <div class="state-selection">
+      <div class="state-selection" role="radiogroup" aria-labelledby="export-for-agents-dialog-title">
         <label>
           <input
             type="radio"
             value="prompt"
             name="export-state"
             .checked=${isPrompt}
+            aria-label=${i18nString(UIStrings.asPrompt)}
             @change=${() => input.onStateChange(StateType.PROMPT)}
           >
           ${i18nString(UIStrings.asPrompt)}
@@ -108,6 +109,7 @@ export const DEFAULT_VIEW: View = (input, _output, target): void => {
             value="conversation"
             name="export-state"
             .checked=${!isPrompt}
+            aria-label=${i18nString(UIStrings.asMarkdown)}
             @change=${() => input.onStateChange(StateType.CONVERSATION)}
           >
           ${i18nString(UIStrings.asMarkdown)}
@@ -130,6 +132,7 @@ export const DEFAULT_VIEW: View = (input, _output, target): void => {
             .jslogContext=${input.jslogContext}
             .variant=${Buttons.Button.Variant.PRIMARY}
             .disabled=${isPrompt && input.state.isPromptLoading}
+            .accessibleLabel=${buttonText}
           >
             ${buttonText}
           </devtools-button>
@@ -191,9 +194,10 @@ export class ExportForAgentsDialog extends UI.Widget.VBox {
         onButtonClick = (event: Event): void => {
           event.preventDefault();
           Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(this.#state.promptText);
-          Snackbars.Snackbar.Snackbar.show({
+          const snackbar = Snackbars.Snackbar.Snackbar.show({
             message: i18nString(UIStrings.copiedToClipboard),
           });
+          snackbar.setAttribute('aria-label', i18nString(UIStrings.copiedToClipboard));
           this.#dialog.hide();
         };
         break;

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

@@ -45,6 +45,10 @@ const UIStrings = {
    * @description Title for the button that hides the walkthrough when there are widgets in the walkthrough.
    */
   hideAgentWalkthrough: 'Hide agent walkthrough',
+  /**
+   * @description Aria label for the spinner to be read by screen reader when a step is in progress.
+   */
+  inProgress: 'In progress',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/ai_assistance/components/WalkthroughView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -118,7 +122,7 @@ function renderInlineWalkthrough(input: ViewInput, stepsOutput: Lit.LitTemplate,
     <div class="inline-wrapper" ?data-open=${input.isExpanded}>
       <span class="inline-icon">
         ${input.isLoading ?
-            html`<devtools-spinner></devtools-spinner>` :
+            html`<devtools-spinner aria-label=${lockedString(UIStrings.inProgress)}></devtools-spinner>` :
             html`<devtools-icon name=${icon}></devtools-icon>`
         }
       </span>
@@ -149,7 +153,7 @@ function renderSidebarWalkthrough(input: ViewInput, stepsOutput: Lit.LitTemplate
   return html`
     <div class="walkthrough-view">
       <div class="walkthrough-header">
-         <div class="walkthrough-title">${i18nString(UIStrings.title)}</div>
+         <h2 class="walkthrough-title">${i18nString(UIStrings.title)}</h2>
          <devtools-button
           .data=${{
             variant: Buttons.Button.Variant.TOOLBAR,

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

@@ -21,7 +21,7 @@
   .export-for-agents-dialog header {
     margin-bottom: var(--sys-size-6);
 
-    h2 {
+    h1 {
       font: var(--sys-typescale-headline5);
       margin: 0;
       color: var(--sys-color-on-surface);

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

@@ -118,21 +118,9 @@
     &[open] {
       border-radius: var(--sys-size-5);
       width: auto;
-      background-color: var(--sys-color-surface1);
+      background-color: var(--sys-color-surface2);
       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;
-        }
-      }
     }
   }
 
@@ -177,6 +165,23 @@
     }
   }
 
+  .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);
+    color: var(--sys-color-on-surface);
+
+    &[data-has-widgets] {
+      margin-left: 0;
+    }
+
+    > devtools-icon[name='chevron-right'] {
+      transform: rotate(270deg);
+    }
+
+  }
+
   .walkthrough-inline > summary::-webkit-details-marker {
     display: none;
   }
@@ -201,8 +206,4 @@
   .walkthrough-inline .step {
     background-color: var(--sys-color-surface5);
   }
-
-  .walkthrough-inline[open] > summary > devtools-icon[name='chevron-right'] {
-    transform: rotate(270deg);
-  }
 }