chrome-devtools-frontend 1.0.1613465 → 1.0.1614363

package/front_end/models/stack_trace/DetailedErrorStackParser.ts

@@ -0,0 +1,142 @@
+// 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.
+
+import * as Common from '../../core/common/common.js';
+import type * as Platform from '../../core/platform/platform.js';
+
+import type {RawFrame} from './Trie.js';
+
+/**
+ * Takes a V8 Error#stack string and extracts structured information.
+ */
+export function parseRawFramesFromErrorStack(stack: string): RawFrame[] {
+  const lines = stack.split('\n');
+  const rawFrames: RawFrame[] = [];
+  for (const line of lines) {
+    const match = /^\s*at\s+(.*)/.exec(line);
+    if (!match) {
+      continue;
+    }
+
+    let lineContent = match[1];
+    let isAsync = false;
+    if (lineContent.startsWith('async ')) {
+      isAsync = true;
+      lineContent = lineContent.substring(6);
+    }
+
+    let isConstructor = false;
+    if (lineContent.startsWith('new ')) {
+      isConstructor = true;
+      lineContent = lineContent.substring(4);
+    }
+
+    let functionName = '';
+    let url = '';
+    let lineNumber = -1;
+    let columnNumber = -1;
+    let typeName: string|undefined;
+    let methodName: string|undefined;
+    let isEval = false;
+    let isWasm = false;
+    let wasmModuleName: string|undefined;
+    let wasmFunctionIndex: number|undefined;
+    let promiseIndex: number|undefined;
+    let evalOrigin: RawFrame|undefined;
+
+    const openParenIndex = lineContent.indexOf(' (');
+    if (lineContent.endsWith(')') && openParenIndex !== -1) {
+      functionName = lineContent.substring(0, openParenIndex).trim();
+      let location = lineContent.substring(openParenIndex + 2, lineContent.length - 1);
+
+      if (location.startsWith('eval at ')) {
+        isEval = true;
+        const commaIndex = location.lastIndexOf(', ');
+        let evalOriginStr = location;
+        if (commaIndex !== -1) {
+          evalOriginStr = location.substring(0, commaIndex);
+          location = location.substring(commaIndex + 2);
+        } else {
+          location = '';
+        }
+
+        if (evalOriginStr.startsWith('eval at ')) {
+          evalOriginStr = evalOriginStr.substring(8);
+        }
+        const innerOpenParen = evalOriginStr.indexOf(' (');
+        let evalFunctionName = evalOriginStr;
+        let evalLocation = '';
+        if (innerOpenParen !== -1) {
+          evalFunctionName = evalOriginStr.substring(0, innerOpenParen).trim();
+          evalLocation = evalOriginStr.substring(innerOpenParen + 2, evalOriginStr.length - 1);
+          evalOrigin = parseRawFramesFromErrorStack(`    at ${evalFunctionName} (${evalLocation})`)[0];
+        } else {
+          evalOrigin = parseRawFramesFromErrorStack(`    at ${evalFunctionName}`)[0];
+        }
+      }
+
+      if (location.startsWith('index ')) {
+        promiseIndex = parseInt(location.substring(6), 10);
+        url = '';
+      } else if (location.includes(':wasm-function[')) {
+        isWasm = true;
+        const wasmMatch = /^(.*):wasm-function\[(\d+)\]:(0x[0-9a-fA-F]+)$/.exec(location);
+        if (wasmMatch) {
+          url = wasmMatch[1];
+          wasmFunctionIndex = parseInt(wasmMatch[2], 10);
+          columnNumber = parseInt(wasmMatch[3], 16);
+        }
+      } else {
+        const splitResult = Common.ParsedURL.ParsedURL.splitLineAndColumn(location);
+        url = splitResult.url;
+        lineNumber = splitResult.lineNumber ?? -1;
+        columnNumber = splitResult.columnNumber ?? -1;
+      }
+    } else {
+      const splitResult = Common.ParsedURL.ParsedURL.splitLineAndColumn(lineContent);
+      url = splitResult.url;
+      lineNumber = splitResult.lineNumber ?? -1;
+      columnNumber = splitResult.columnNumber ?? -1;
+    }
+
+    // Handle "typeName.methodName [as alias]"
+    if (functionName) {
+      const aliasMatch = /(.*)\s+\[as\s+(.*)\]/.exec(functionName);
+      if (aliasMatch) {
+        methodName = aliasMatch[2];
+        functionName = aliasMatch[1];
+      }
+
+      const dotIndex = functionName.indexOf('.');
+      if (dotIndex !== -1) {
+        typeName = functionName.substring(0, dotIndex);
+        methodName = methodName ?? functionName.substring(dotIndex + 1);
+      }
+
+      if (isWasm && typeName) {
+        wasmModuleName = typeName;
+      }
+    }
+
+    rawFrames.push({
+      url: url as Platform.DevToolsPath.UrlString,
+      functionName,
+      lineNumber,
+      columnNumber,
+      parsedFrameInfo: {
+        isAsync,
+        isConstructor,
+        isEval,
+        evalOrigin,
+        isWasm,
+        wasmModuleName,
+        wasmFunctionIndex,
+        typeName,
+        methodName,
+        promiseIndex,
+      },
+    });
+  }
+  return rawFrames;
+}

package/front_end/models/stack_trace/StackTrace.ts

@@ -8,6 +8,7 @@ import type * as Workspace from '../workspace/workspace.js';
 
 export type StackTrace = BaseStackTrace<Fragment>;
 export type DebuggableStackTrace = BaseStackTrace<DebuggableFragment>;
+export type ParsedErrorStackTrace = BaseStackTrace<ParsedErrorStackFragment>;
 
 export interface BaseStackTrace<SyncFragmentT extends Fragment> extends Common.EventTarget.EventTarget<EventTypes> {
   readonly syncFragment: SyncFragmentT;
@@ -26,6 +27,10 @@ export interface DebuggableFragment {
   readonly frames: readonly DebuggableFrame[];
 }
 
+export interface ParsedErrorStackFragment {
+  readonly frames: readonly ParsedErrorStackFrame[];
+}
+
 export interface Frame {
   readonly url?: string;
   readonly uiSourceCode?: Workspace.UISourceCode.UISourceCode;
@@ -41,6 +46,19 @@ export interface Frame {
   readonly rawName?: string;
 }
 
+export interface ParsedErrorStackFrame extends Frame {
+  readonly isAsync?: boolean;
+  readonly isConstructor?: boolean;
+  readonly isEval?: boolean;
+  readonly evalOrigin?: ParsedErrorStackFrame;
+  readonly isWasm?: boolean;
+  readonly wasmModuleName?: string;
+  readonly wasmFunctionIndex?: number;
+  readonly typeName?: string;
+  readonly methodName?: string;
+  readonly promiseIndex?: number;
+}
+
 export interface DebuggableFrame extends Frame {
   readonly sdkFrame: SDK.DebuggerModel.CallFrame;
 }

package/front_end/models/stack_trace/StackTraceImpl.ts

@@ -7,11 +7,12 @@ import type * as SDK from '../../core/sdk/sdk.js';
 import type * as Workspace from '../workspace/workspace.js';
 
 import type * as StackTrace from './stack_trace.js';
-import type {FrameNode} from './Trie.js';
+import type {FrameNode, ParsedFrameInfo} from './Trie.js';
 
-export type AnyStackTraceImpl = StackTraceImpl<FragmentImpl|DebuggableFragmentImpl>;
+export type AnyStackTraceImpl = StackTraceImpl<FragmentImpl|DebuggableFragmentImpl|ParsedErrorStackFragmentImpl>;
 
-export class StackTraceImpl<SyncFragmentT extends FragmentImpl|DebuggableFragmentImpl = FragmentImpl> extends
+export class StackTraceImpl<SyncFragmentT extends FragmentImpl|DebuggableFragmentImpl|ParsedErrorStackFragmentImpl =
+                                                      FragmentImpl> extends
     Common.ObjectWrapper.ObjectWrapper<StackTrace.StackTrace.EventTypes> implements
         StackTrace.StackTrace.BaseStackTrace<SyncFragmentT> {
   readonly syncFragment: SyncFragmentT;
@@ -23,7 +24,9 @@ export class StackTraceImpl<SyncFragmentT extends FragmentImpl|DebuggableFragmen
     this.asyncFragments = asyncFragments;
 
     const fragment =
-        syncFragment instanceof DebuggableFragmentImpl ? syncFragment.fragment : syncFragment as FragmentImpl;
+        (syncFragment instanceof DebuggableFragmentImpl || syncFragment instanceof ParsedErrorStackFragmentImpl) ?
+        syncFragment.fragment :
+        syncFragment as FragmentImpl;
     fragment.stackTraces.add(this);
 
     this.asyncFragments.forEach(asyncFragment => asyncFragment.fragment.stackTraces.add(this));
@@ -99,6 +102,95 @@ export class FrameImpl implements StackTrace.StackTrace.Frame {
   }
 }
 
+export class ParsedErrorStackFragmentImpl implements StackTrace.StackTrace.ParsedErrorStackFragment {
+  constructor(readonly fragment: FragmentImpl) {
+  }
+
+  get frames(): ParsedErrorStackFrameImpl[] {
+    if (!this.fragment.node) {
+      return [];
+    }
+
+    const frames: ParsedErrorStackFrameImpl[] = [];
+
+    for (const node of this.fragment.node.getCallStack()) {
+      for (const frame of node.frames) {
+        frames.push(new ParsedErrorStackFrameImpl(frame, node.parsedFrameInfo, node.evalOriginFrames));
+      }
+    }
+
+    return frames;
+  }
+}
+
+export class ParsedErrorStackFrameImpl implements StackTrace.StackTrace.ParsedErrorStackFrame {
+  readonly #frame: FrameImpl;
+  readonly #parsedFrameInfo?: ParsedFrameInfo;
+  readonly #evalOriginFrames?: FrameImpl[];
+
+  constructor(frame: FrameImpl, parsedFrameInfo?: ParsedFrameInfo, evalOriginFrames?: FrameImpl[]) {
+    this.#frame = frame;
+    this.#parsedFrameInfo = parsedFrameInfo;
+    this.#evalOriginFrames = evalOriginFrames;
+  }
+
+  get url(): string|undefined {
+    return this.#frame.url;
+  }
+  get uiSourceCode(): Workspace.UISourceCode.UISourceCode|undefined {
+    return this.#frame.uiSourceCode;
+  }
+  get name(): string|undefined {
+    return this.#frame.name;
+  }
+  get line(): number {
+    return this.#frame.line;
+  }
+  get column(): number {
+    return this.#frame.column;
+  }
+  get missingDebugInfo(): StackTrace.StackTrace.MissingDebugInfo|undefined {
+    return this.#frame.missingDebugInfo;
+  }
+  get rawName(): string|undefined {
+    return this.#frame.rawName;
+  }
+
+  get isAsync(): boolean|undefined {
+    return this.#parsedFrameInfo?.isAsync;
+  }
+  get isConstructor(): boolean|undefined {
+    return this.#parsedFrameInfo?.isConstructor;
+  }
+  get isEval(): boolean|undefined {
+    return this.#parsedFrameInfo?.isEval;
+  }
+  get evalOrigin(): ParsedErrorStackFrameImpl|undefined {
+    if (!this.#evalOriginFrames || this.#evalOriginFrames.length === 0) {
+      return undefined;
+    }
+    return new ParsedErrorStackFrameImpl(this.#evalOriginFrames[0], this.#parsedFrameInfo?.evalOrigin?.parsedFrameInfo);
+  }
+  get isWasm(): boolean|undefined {
+    return this.#parsedFrameInfo?.isWasm;
+  }
+  get wasmModuleName(): string|undefined {
+    return this.#parsedFrameInfo?.wasmModuleName;
+  }
+  get wasmFunctionIndex(): number|undefined {
+    return this.#parsedFrameInfo?.wasmFunctionIndex;
+  }
+  get typeName(): string|undefined {
+    return this.#parsedFrameInfo?.typeName;
+  }
+  get methodName(): string|undefined {
+    return this.#parsedFrameInfo?.methodName;
+  }
+  get promiseIndex(): number|undefined {
+    return this.#parsedFrameInfo?.promiseIndex;
+  }
+}
+
 /**
  * A DebuggableFragmentImpl wraps an existing FragmentImpl. This is important: We can pause at the
  * same location multiple times and the paused information changes each and everytime while the underlying

package/front_end/models/stack_trace/Trie.ts

@@ -6,6 +6,19 @@ import type * as Protocol from '../../generated/protocol.js';
 
 import type {FragmentImpl, FrameImpl} from './StackTraceImpl.js';
 
+export interface ParsedFrameInfo {
+  readonly isAsync?: boolean;
+  readonly isConstructor?: boolean;
+  readonly isEval?: boolean;
+  readonly evalOrigin?: RawFrame;
+  readonly isWasm?: boolean;
+  readonly wasmModuleName?: string;
+  readonly wasmFunctionIndex?: number;
+  readonly typeName?: string;
+  readonly methodName?: string;
+  readonly promiseIndex?: number;
+}
+
 /**
  * Intentionally very close to a {@link Protocol.Runtime.CallFrame} but with optional `scriptId`.
  */
@@ -15,6 +28,8 @@ export interface RawFrame {
   readonly functionName?: string;
   readonly lineNumber: number;
   readonly columnNumber: number;
+
+  readonly parsedFrameInfo?: ParsedFrameInfo;
 }
 
 /**
@@ -42,10 +57,13 @@ export class FrameNode implements FrameNodeBase<FrameNode, AnyFrameNode> {
   frames: FrameImpl[] = [];
 
   fragment?: FragmentImpl;
+  parsedFrameInfo?: ParsedFrameInfo;
+  evalOriginFrames?: FrameImpl[];
 
   constructor(rawFrame: RawFrame, parent: AnyFrameNode) {
     this.rawFrame = rawFrame;
     this.parent = parent;
+    this.parsedFrameInfo = rawFrame.parsedFrameInfo;
   }
 
   /**
@@ -98,6 +116,9 @@ export class Trie {
 
       const compareResult = compareRawFrames(child.rawFrame, rawFrame);
       if (compareResult === 0) {
+        if (rawFrame.parsedFrameInfo && !child.parsedFrameInfo) {
+          child.parsedFrameInfo = rawFrame.parsedFrameInfo;
+        }
         return child;
       }
       if (compareResult > 0) {

package/front_end/models/stack_trace/stack_trace_impl.ts

@@ -2,11 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as DetailedErrorStackParser from './DetailedErrorStackParser.js';
 import * as StackTraceImpl from './StackTraceImpl.js';
 import * as StackTraceModel from './StackTraceModel.js';
 import * as Trie from './Trie.js';
 
 export {
+  DetailedErrorStackParser,
   StackTraceImpl,
   StackTraceModel,
   Trie,

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

@@ -729,7 +729,7 @@ export function renderStep({step, isLoading, markdownRenderer, isLast}: {
   // clang-format off
   return html`
     <details class=${stepClasses}
-      jslog=${VisualLogging.section('step')}
+      jslog=${VisualLogging.expand('step').track({click: true})}
       .open=${Boolean(step.requestApproval)}>
       <summary>
         <div class="summary">
@@ -755,6 +755,7 @@ interface WidgetMakerResponse {
   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;
+  jslogContext?: string;
 }
 
 const nodeCache = new Map<Protocol.DOM.BackendNodeId, SDK.DOMModel.DOMNode>();
@@ -823,6 +824,7 @@ async function makeComputedStyleWidget(widgetData: ComputedStyleAiWidget): Promi
         </span>
       </span>`,
     // clang-format on
+    jslogContext: 'computed-styles',
   };
 }
 
@@ -836,6 +838,7 @@ async function makeCoreWebVitalsWidget(widgetData: CoreVitalsAiWidget): Promise<
     renderedWidget,
     revealable: new TimelineUtils.Helpers.RevealableCoreVitals(widgetData.data.insightSetKey),
     title: lockedString(UIStringsNotTranslate.coreVitals),
+    jslogContext: 'core-web-vitals',
   };
 }
 
@@ -872,6 +875,7 @@ async function makeStylePropertiesWidget(widgetData: StylePropertiesAiWidget): P
       node: domNodeForId,
     })}
     ></devtools-widget>`,
+    jslogContext: 'standalone-styles',
   };
 }
 
@@ -894,6 +898,7 @@ async function makeLcpBreakdownWidget(widgetData: LcpBreakdownAiWidget): Promise
     renderedWidget,
     revealable: new TimelineUtils.Helpers.RevealableInsight(insight),
     title: lockedString(UIStringsNotTranslate.lcpBreakdown),
+    jslogContext: 'lcp-breakdown',
   };
 }
 
@@ -922,7 +927,8 @@ async function makeBottomUpTimelineTreeWidget(widgetData: BottomUpTreeAiWidget):
   return {
     renderedWidget,
     revealable: new TimelineUtils.Helpers.RevealableBottomUpProfile(widgetData.data.bounds),
-    title: lockedString(UIStringsNotTranslate.bottomUpTree)
+    title: lockedString(UIStringsNotTranslate.bottomUpTree),
+    jslogContext: 'bottom-up',
   };
 }
 
@@ -947,6 +953,7 @@ function renderWidgetResponse(response: WidgetMakerResponse|null): Lit.LitTempla
     <devtools-button class="widget-reveal-button"
       .variant=${Buttons.Button.Variant.TEXT}
       .accessibleLabel=${lockedString(UIStringsNotTranslate.reveal)}
+      .jslogContext=${'reveal'}
       @click=${onReveal}
     >
       ${response.customRevealTitle ?? lockedString(UIStringsNotTranslate.reveal)}
@@ -956,7 +963,7 @@ function renderWidgetResponse(response: WidgetMakerResponse|null): Lit.LitTempla
 
   // clang-format off
   return html`
-    <div class=${classes}>
+    <div class=${classes} jslog=${ifDefined(response.jslogContext ? VisualLogging.section(response.jslogContext) : undefined)}>
       ${response.title ? html`
         <div class="widget-header">
           <h3 class="widget-name">${response.title}</h3>
@@ -986,6 +993,7 @@ async function makePerformanceTraceWidget(widgetData: PerformanceTraceAiWidget):
     title: null,
     revealable: new Timeline.TimelinePanel.ParsedTraceRevealable(widgetData.data.parsedTrace),
     customRevealTitle: lockedString(UIStringsNotTranslate.revealTrace),
+    jslogContext: 'performance-trace',
   };
 }
 
@@ -1045,6 +1053,7 @@ async function makeDomTreeWidget(widgetData: DomTreeAiWidget): Promise<WidgetMak
     renderedWidget,
     revealable: new SDK.DOMModel.DeferredDOMNode(root.domModel().target(), root.backendNodeId()),
     title: lockedString(UIStringsNotTranslate.lcpElement),
+    jslogContext: 'dom-snapshot',
   };
 }
 
@@ -1607,5 +1616,6 @@ async function makeTimelineRangeSummaryWidget(widgetData: TimelineRangeSummaryAi
     renderedWidget: template,
     revealable: new TimelineUtils.Helpers.RevealableTimeRange(bounds),
     title: lockedString(UIStringsNotTranslate.performanceSummary),
+    jslogContext: 'timeline-range-summary',
   };
 }

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

@@ -96,7 +96,7 @@ export interface Props {
   };
 }
 
-interface ChatWidgetInput extends Props {
+export interface ChatWidgetInput extends Props {
   handleScroll: (ev: Event) => void;
   handleSuggestionClick: (title: string) => void;
   handleMessageContainerRef: (el: Element|undefined) => void;
@@ -367,12 +367,13 @@ export class ChatView extends HTMLElement {
   };
 
   async #getSummary(): Promise<string> {
-    if (this.#cachedSummary?.markdown === this.#props.conversationMarkdown) {
+    const cacheKey = this.#props.conversationMarkdown.replace(/\*\*Export Timestamp \(UTC\):\*\* .*\n\n/, '');
+    if (this.#cachedSummary?.markdown === cacheKey) {
       return this.#cachedSummary.summary;
     }
     try {
       const summary = await this.#props.generateConversationSummary(this.#props.conversationMarkdown);
-      this.#cachedSummary = {markdown: this.#props.conversationMarkdown, summary};
+      this.#cachedSummary = {markdown: cacheKey, summary};
       return summary;
     } catch (err) {
       console.error(err);

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

@@ -10,6 +10,7 @@ import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as Snackbars from '../../../ui/components/snackbars/snackbars.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
+import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import styles from './exportForAgentsDialog.css.js';
 
@@ -85,7 +86,7 @@ export const DEFAULT_VIEW: View = (input, _output, target): void => {
 
   render(html`
     <style>${styles}</style>
-    <div class="export-for-agents-dialog">
+    <div class="export-for-agents-dialog" jslog=${VisualLogging.dialog('ai-export-for-agents')}>
       <header>
         <h1 id="export-for-agents-dialog-title" tabindex="-1">
           ${i18nString(UIStrings.exportForAgents)}
@@ -122,7 +123,10 @@ export const DEFAULT_VIEW: View = (input, _output, target): void => {
             ${i18nString(UIStrings.generatingSummary)}
           </span>
           ` : Lit.nothing}
-        <textarea readonly .value=${isPrompt && input.state.isPromptLoading ? '' : exportText}></textarea>
+        ${isPrompt ?
+          html`<textarea class="prompt" readonly .value=${input.state.isPromptLoading ? '' : exportText}></textarea>` :
+          html`<textarea class="conversation" readonly .value=${exportText}></textarea>`
+        }
       </main>
       <div class="disclaimer">${i18nString(UIStrings.disclaimer)}</div>
       <footer>

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

@@ -9,6 +9,7 @@ import * as Input from '../../../ui/components/input/input.js';
 import type {MarkdownLitRenderer} from '../../../ui/components/markdown_view/MarkdownView.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
+import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import chatMessageStyles from './chatMessage.css.js';
 import {type ModelChatMessage, renderStep, type Step, titleForStep} from './ChatMessage.js';
@@ -119,14 +120,14 @@ function renderInlineWalkthrough(input: ViewInput, stepsOutput: Lit.LitTemplate,
 
   // clang-format off
   return html`
-    <div class="inline-wrapper" ?data-open=${input.isExpanded}>
+    <div class="inline-wrapper" ?data-open=${input.isExpanded} jslog=${VisualLogging.section('walkthrough-container')}>
       <span class="inline-icon">
         ${input.isLoading ?
             html`<devtools-spinner aria-label=${lockedString(UIStrings.inProgress)}></devtools-spinner>` :
             html`<devtools-icon name=${icon}></devtools-icon>`
         }
       </span>
-      <details class="walkthrough-inline" ?open=${input.isExpanded} @toggle=${onToggle}>
+      <details class="walkthrough-inline" ?open=${input.isExpanded} @toggle=${onToggle} jslog=${VisualLogging.expand('walkthrough').track({click: true})}>
         <summary ?data-has-widgets=${!input.isLoading && hasWidgets}>
           <span class="walkthrough-inline-title">
             ${input.isExpanded ?
@@ -151,7 +152,7 @@ function renderSidebarWalkthrough(input: ViewInput, stepsOutput: Lit.LitTemplate
 
   // clang-format off
   return html`
-    <div class="walkthrough-view">
+    <div class="walkthrough-view" jslog=${VisualLogging.section('walkthrough-container')}>
       <div class="walkthrough-header">
          <h2 class="walkthrough-title">${i18nString(UIStrings.title)}</h2>
          <devtools-button

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

@@ -25,7 +25,7 @@
     gap: var(--sys-size-8);
     margin-bottom: var(--sys-size-8);
 
-    h2 {
+    h1 {
       margin: 0;
       color: var(--sys-color-on-surface);
       font: var(--sys-typescale-headline5);
@@ -47,7 +47,6 @@
       devtools-icon {
         width: var(--sys-size-9);
         height: var(--sys-size-9);
-        color: var(--sys-color-on-primary);
       }
     }
   }