chrome-devtools-frontend 1.0.1537860 → 1.0.1538523

package/front_end/core/host/AidaClient.ts

@@ -342,6 +342,7 @@ export interface AidaRegisterClientEvent {
   disable_user_content_logging: boolean;
   do_conversation_client_event?: DoConversationClientEvent;
   complete_code_client_event?: {user_acceptance: UserAcceptance}|{user_impression: UserImpression};
+  generate_code_client_event?: {user_acceptance: UserAcceptance}|{user_impression: UserImpression};
 }
 /* eslint-enable @typescript-eslint/naming-convention */
 

package/front_end/core/host/UserMetrics.ts

@@ -527,7 +527,9 @@ export enum Action {
   InsightTeaserGenerationCompleted = 192,
   InsightTeaserGenerationAborted = 193,
   InsightTeaserGenerationErrored = 194,
-  MAX_VALUE = 195,
+  AiCodeGenerationSuggestionDisplayed = 195,
+  AiCodeGenerationSuggestionAccepted = 196,
+  MAX_VALUE = 197,
   /* eslint-enable @typescript-eslint/naming-convention */
 }
 

package/front_end/core/root/Runtime.ts

@@ -422,6 +422,13 @@ export interface HostConfigAiCodeCompletion {
   userTier: string;
 }
 
+export interface HostConfigAiCodeGeneration {
+  modelId: string;
+  temperature: number;
+  enabled: boolean;
+  userTier: string;
+}
+
 export interface HostConfigDeepLinksViaExtensibilityApi {
   enabled: boolean;
 }
@@ -556,6 +563,7 @@ export type HostConfig = Platform.TypeScriptUtilities.RecursivePartial<{
   devToolsAiAssistanceFileAgent: HostConfigAiAssistanceFileAgent,
   devToolsAiAssistancePerformanceAgent: HostConfigAiAssistancePerformanceAgent,
   devToolsAiCodeCompletion: HostConfigAiCodeCompletion,
+  devToolsAiCodeGeneration: HostConfigAiCodeGeneration,
   devToolsVeLogging: HostConfigVeLogging,
   devToolsWellKnown: HostConfigWellKnown,
   devToolsPrivacyUI: HostConfigPrivacyUI,

package/front_end/models/ai_code_generation/AiCodeGeneration.ts

@@ -0,0 +1,151 @@
+// Copyright 2025 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 Host from '../../core/host/host.js';
+import * as Root from '../../core/root/root.js';
+
+import {debugLog} from './debug.js';
+
+export const basePreamble =
+    `You are a highly skilled senior software engineer with deep expertise across multiple web technologies and programming languages, including JavaScript, TypeScript, HTML, and CSS.
+Your role is to act as an expert pair programmer within the Chrome DevTools environment.
+
+**Core Directives (Adhere to these strictly):**
+
+1.  **Language and Quality:**
+    *   Generate code that is modern, efficient, and idiomatic for the inferred language (e.g., modern JavaScript/ES6+, semantic HTML5, efficient CSS).
+    *   Where appropriate, include basic error handling (e.g., for API calls).
+`;
+
+export const additionalContextForConsole = `
+You are operating within the execution environment of the Chrome DevTools Console.
+The console has direct access to the inspected page's \`window\` and \`document\`.
+
+*   **Utilize Console Utilities:** You have access to the Console Utilities API. You **should** use these helper functions and variables when they are the most direct way to accomplish the user's goal.
+`;
+
+interface Options {
+  aidaClient: Host.AidaClient.AidaClient;
+  serverSideLoggingEnabled?: boolean;
+  confirmSideEffectForTest?: typeof Promise.withResolvers;
+}
+
+interface RequestOptions {
+  temperature?: number;
+  modelId?: string;
+}
+
+/**
+ * The AiCodeGeneration class is responsible for fetching generated code suggestions
+ * from the AIDA backend.
+ */
+export class AiCodeGeneration {
+  readonly #sessionId: string = crypto.randomUUID();
+  readonly #aidaClient: Host.AidaClient.AidaClient;
+  readonly #serverSideLoggingEnabled: boolean;
+
+  constructor(opts: Options) {
+    this.#aidaClient = opts.aidaClient;
+    this.#serverSideLoggingEnabled = opts.serverSideLoggingEnabled ?? false;
+  }
+
+  #buildRequest(
+      prompt: string,
+      preamble: string,
+      inferenceLanguage: Host.AidaClient.AidaInferenceLanguage = Host.AidaClient.AidaInferenceLanguage.JAVASCRIPT,
+      ): Host.AidaClient.GenerateCodeRequest {
+    const userTier = Host.AidaClient.convertToUserTierEnum(this.#userTier);
+    function validTemperature(temperature: number|undefined): number|undefined {
+      return typeof temperature === 'number' && temperature >= 0 ? temperature : undefined;
+    }
+    return {
+      client: Host.AidaClient.CLIENT_NAME,
+      preamble,
+      current_message: {
+        parts: [{
+          text: prompt,
+        }],
+        role: Host.AidaClient.Role.USER,
+      },
+      use_case: Host.AidaClient.UseCase.CODE_GENERATION,
+      options: {
+        inference_language: inferenceLanguage,
+        temperature: validTemperature(this.#options.temperature),
+        model_id: this.#options.modelId || undefined,
+      },
+      metadata: {
+        disable_user_content_logging: !(this.#serverSideLoggingEnabled ?? false),
+        string_session_id: this.#sessionId,
+        user_tier: userTier,
+        client_version: Root.Runtime.getChromeVersion(),
+      },
+    };
+  }
+
+  get #userTier(): string|undefined {
+    return Root.Runtime.hostConfig.devToolsAiCodeGeneration?.userTier;
+  }
+
+  get #options(): RequestOptions {
+    const temperature = Root.Runtime.hostConfig.devToolsAiCodeGeneration?.temperature;
+    const modelId = Root.Runtime.hostConfig.devToolsAiCodeGeneration?.modelId;
+
+    return {
+      temperature,
+      modelId,
+    };
+  }
+
+  registerUserImpression(rpcGlobalId: Host.AidaClient.RpcGlobalId, latency: number, sampleId?: number): void {
+    const seconds = Math.floor(latency / 1_000);
+    const remainingMs = latency % 1_000;
+    const nanos = Math.floor(remainingMs * 1_000_000);
+
+    void this.#aidaClient.registerClientEvent({
+      corresponding_aida_rpc_global_id: rpcGlobalId,
+      disable_user_content_logging: true,
+      generate_code_client_event: {
+        user_impression: {
+          sample: {
+            sample_id: sampleId,
+          },
+          latency: {
+            duration: {
+              seconds,
+              nanos,
+            },
+          }
+        },
+      },
+    });
+    debugLog('Registered user impression with latency {seconds:', seconds, ', nanos:', nanos, '}');
+    Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiCodeGenerationSuggestionDisplayed);
+  }
+
+  registerUserAcceptance(rpcGlobalId: Host.AidaClient.RpcGlobalId, sampleId?: number): void {
+    void this.#aidaClient.registerClientEvent({
+      corresponding_aida_rpc_global_id: rpcGlobalId,
+      disable_user_content_logging: true,
+      generate_code_client_event: {
+        user_acceptance: {
+          sample: {
+            sample_id: sampleId,
+          }
+        },
+      },
+    });
+    debugLog('Registered user acceptance');
+    Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiCodeGenerationSuggestionAccepted);
+  }
+
+  async generateCode(prompt: string, preamble: string, inferenceLanguage?: Host.AidaClient.AidaInferenceLanguage):
+      Promise<Host.AidaClient.GenerateCodeResponse|null> {
+    const request = this.#buildRequest(prompt, preamble, inferenceLanguage);
+    const response = await this.#aidaClient.generateCode(request);
+
+    debugLog({request, response});
+
+    return response;
+  }
+}

package/front_end/models/ai_code_generation/ai_code_generation.ts

@@ -0,0 +1,6 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+export * from './debug.js';
+export * as AiCodeGeneration from './AiCodeGeneration.js';

package/front_end/models/ai_code_generation/debug.ts

@@ -0,0 +1,30 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @file Local debugging utilities.
+ */
+
+export function isDebugMode(): boolean {
+  return Boolean(localStorage.getItem('debugAiCodeGenerationEnabled'));
+}
+
+export function debugLog(...log: unknown[]): void {
+  if (!isDebugMode()) {
+    return;
+  }
+
+  // eslint-disable-next-line no-console
+  console.log(...log);
+}
+
+function setDebugAiCodeGenerationEnabled(enabled: boolean): void {
+  if (enabled) {
+    localStorage.setItem('debugAiCodeGenerationEnabled', 'true');
+  } else {
+    localStorage.removeItem('debugAiCodeGenerationEnabled');
+  }
+}
+// @ts-expect-error
+globalThis.setDebugAiCodeGenerationEnabled = setDebugAiCodeGenerationEnabled;

package/front_end/panels/application/PreloadingTreeElement.ts

@@ -8,7 +8,7 @@ import type * as SDK from '../../core/sdk/sdk.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 
 import {ApplicationPanelTreeElement, ExpandableApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
-import type * as PreloadingHelper from './preloading/helper/helper.js';
+import * as PreloadingHelper from './preloading/helper/helper.js';
 import {PreloadingAttemptView, PreloadingRuleSetView, PreloadingSummaryView} from './preloading/PreloadingView.js';
 import type {ResourcesPanel} from './ResourcesPanel.js';
 
@@ -125,7 +125,15 @@ export class PreloadingSummaryTreeElement extends ExpandableApplicationPanelTree
     this.#attempt.initialize(model);
 
     // Show the view if the model was initialized after selection.
-    if (this.#selected && !this.#view) {
+    // However, if the user last viewed this page and clicked into Rules or
+    // Speculations, we ensure that we instead show those pages.
+    if (this.#attempt.selected) {
+      const filter = new PreloadingHelper.PreloadingForward.AttemptViewWithFilter(null);
+      this.expandAndRevealAttempts(filter);
+    } else if (this.#ruleSet.selected) {
+      const filter = new PreloadingHelper.PreloadingForward.RuleSetView(null);
+      this.expandAndRevealRuleSet(filter);
+    } else if (this.#selected && !this.#view) {
       this.onselect(false);
     }
   }

package/front_end/panels/application/components/OriginTrialTreeView.ts

@@ -1,24 +1,22 @@
 // Copyright 2021 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-imperative-dom-api */
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import '../../../ui/components/icon_button/icon_button.js';
 import '../../../ui/legacy/legacy.js';
+import '../../../ui/components/adorners/adorners.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Protocol from '../../../generated/protocol.js';
-import * as Adorners from '../../../ui/components/adorners/adorners.js';
 import type * as TreeOutline from '../../../ui/components/tree_outline/tree_outline.js';
 import * as UI from '../../../ui/legacy/legacy.js';
-import * as Lit from '../../../ui/lit/lit.js';
+import {Directives, html, type LitTemplate, nothing, render, type TemplateResult} from '../../../ui/lit/lit.js';
 
-import badgeStyles from './badge.css.js';
 import originTrialTokenRowsStyles from './originTrialTokenRows.css.js';
 import originTrialTreeViewStyles from './originTrialTreeView.css.js';
 
-const {html, Directives: {ifDefined}} = Lit;
+const {classMap} = Directives;
+const {widgetConfig} = UI.Widget;
 
 const UIStrings = {
   /**
@@ -75,27 +73,6 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/OriginTrialTreeView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export interface BadgeData {
-  badgeContent: string;
-  style: 'error'|'success'|'secondary';
-  additionalClass?: string;
-}
-
-function createBadge(data: BadgeData): Adorners.Adorner.Adorner {
-  const adorner = new Adorners.Adorner.Adorner();
-  const adornerContent = document.createElement('span');
-  adornerContent.textContent = data.badgeContent;
-  adorner.data = {
-    name: 'badge',
-    content: adornerContent,
-  };
-  adorner.classList.add(`badge-${data.style}`);
-  if (data.additionalClass) {
-    adorner.classList.add(data.additionalClass);
-  }
-  return adorner;
-}
-
 type TreeNode<DataType> = TreeOutline.TreeOutlineUtils.TreeNode<DataType>;
 
 /**
@@ -107,72 +84,69 @@ type TreeNode<DataType> = TreeOutline.TreeOutlineUtils.TreeNode<DataType>;
  **/
 export type OriginTrialTreeNodeData = Protocol.Page.OriginTrial|Protocol.Page.OriginTrialTokenWithStatus|string;
 
-function constructOriginTrialTree(originTrial: Protocol.Page.OriginTrial): Lit.LitTemplate {
-  const tokenCountBadge = createBadge({
-    badgeContent: i18nString(UIStrings.tokens, {PH1: originTrial.tokensWithStatus.length}),
-    style: 'secondary',
-  });
-
+function renderOriginTrialTree(originTrial: Protocol.Page.OriginTrial): LitTemplate {
+  const success = originTrial.status === Protocol.Page.OriginTrialStatus.Enabled;
   // clang-format off
   return html`
     <li role="treeitem">
       ${originTrial.trialName}
-      <style>${badgeStyles}</style>
-      ${createBadge({
-        badgeContent: originTrial.status,
-        style: originTrial.status === Protocol.Page.OriginTrialStatus.Enabled ? 'success' : 'error',
-      })}
-      ${originTrial.tokensWithStatus.length > 1 ? tokenCountBadge : Lit.nothing}
+      <devtools-adorner class="badge-${success ? 'success' : 'error'}">
+        ${originTrial.status}
+      </devtools-adorner>
+      ${originTrial.tokensWithStatus.length > 1 ?  html`
+        <devtools-adorner class="badge-secondary">
+          ${i18nString(UIStrings.tokens, {PH1: originTrial.tokensWithStatus.length})}
+        </devtools-adorner>`
+        : nothing}
       <ul role="group" hidden>
         ${originTrial.tokensWithStatus.length > 1 ?
-          originTrial.tokensWithStatus.map(constructTokenNode) :
-          constructTokenDetailsNodes(originTrial.tokensWithStatus[0])}
+          originTrial.tokensWithStatus.map(renderTokenNode) :
+          renderTokenDetailsNodes(originTrial.tokensWithStatus[0])}
       </ul>
     </li>`;
   // clang-format on
 }
 
-function constructTokenNode(token: Protocol.Page.OriginTrialTokenWithStatus): Lit.LitTemplate {
-  const statusBadge = createBadge({
-    badgeContent: token.status,
-    style: token.status === Protocol.Page.OriginTrialTokenStatus.Success ? 'success' : 'error',
-    additionalClass: 'token-status-badge',
-  });
+function renderTokenNode(token: Protocol.Page.OriginTrialTokenWithStatus): LitTemplate {
+  const success = token.status === Protocol.Page.OriginTrialTokenStatus.Success;
   // Only display token status for convenience when the node is not expanded.
   // clang-format off
   return html`
     <li role="treeitem">
-      ${i18nString(UIStrings.token)} ${statusBadge}
+      ${i18nString(UIStrings.token)}
+      <devtools-adorner class="token-status-badge badge-${success ? 'success' : 'error'}">
+        ${token.status}
+      </devtools-adorner>
       <ul role="group" hidden>
-        ${constructTokenDetailsNodes(token)}
+        ${renderTokenDetailsNodes(token)}
       </ul>
     </li>`;
 }
 
 interface TokenField {
   name: string;
-  value: Lit.TemplateResult;
+  value: {text: string, hasError?: boolean};
 }
 
-function renderTokenDetails(token: Protocol.Page.OriginTrialTokenWithStatus): Lit.TemplateResult {
+function renderTokenDetails(token: Protocol.Page.OriginTrialTokenWithStatus): TemplateResult {
   return html`
     <li role="treeitem">
-      <devtools-resources-origin-trial-token-rows .data=${token}>
-      </devtools-resources-origin-trial-token-rows>
+      <devtools-widget .widgetConfig=${widgetConfig(OriginTrialTokenRows, {data: token})}>
+      </devtools-widget>
     </li>`;
 }
 
-function constructTokenDetailsNodes(token: Protocol.Page.OriginTrialTokenWithStatus):
-    Lit.LitTemplate {
+function renderTokenDetailsNodes(token: Protocol.Page.OriginTrialTokenWithStatus):
+    TemplateResult {
   // clang-format off
   return html`
     ${renderTokenDetails(token)}
-    ${constructRawTokenTextNode(token.rawTokenText)}
+    ${renderRawTokenTextNode(token.rawTokenText)}
   `;
   // clang-format on
 }
 
-function constructRawTokenTextNode(tokenText: string): Lit.LitTemplate {
+function renderRawTokenTextNode(tokenText: string): LitTemplate {
   // clang-format off
   return html`
     <li role="treeitem">
@@ -192,8 +166,42 @@ export interface OriginTrialTokenRowsData {
   node: TreeNode<OriginTrialTreeNodeData>;
 }
 
-export class OriginTrialTokenRows extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
+interface RowsViewInput {
+  tokenWithStatus: Protocol.Page.OriginTrialTokenWithStatus;
+  parsedTokenDetails: TokenField[];
+}
+
+type RowsView = (input: RowsViewInput, output: undefined, target: HTMLElement) => void;
+
+const ROWS_DEFAULT_VIEW: RowsView = (input, _output, target) => {
+  const success = input.tokenWithStatus.status === Protocol.Page.OriginTrialTokenStatus.Success;
+  // clang-format off
+  render(html`
+    <style>
+      ${originTrialTokenRowsStyles}
+      ${originTrialTreeViewStyles}
+    </style>
+    <div class="content">
+      <div class="key">${i18nString(UIStrings.status)}</div>
+      <div class="value">
+        <devtools-adorner class="badge-${success ? 'success' : 'error'}">
+          ${input.tokenWithStatus.status}
+        </devtools-adorner>
+      </div>
+      ${input.parsedTokenDetails.map((field: TokenField) => html`
+        <div class="key">${field.name}</div>
+        <div class="value">
+          <div class=${classMap({'error-text': Boolean(field.value.hasError)})}>
+            ${field.value.text}
+          </div>
+        </div>
+      `)}
+    </div>`, target);
+  // clang-format on
+};
+
+export class OriginTrialTokenRows extends UI.Widget.Widget {
+  #view: RowsView;
   #tokenWithStatus: Protocol.Page.OriginTrialTokenWithStatus|null = null;
   #parsedTokenDetails: TokenField[] = [];
   #dateFormatter: Intl.DateTimeFormat = new Intl.DateTimeFormat(
@@ -201,28 +209,20 @@ export class OriginTrialTokenRows extends HTMLElement {
       {dateStyle: 'long', timeStyle: 'long'},
   );
 
+  constructor(element?: HTMLElement, view: RowsView = ROWS_DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#view = view;
+  }
+
   set data(data: Protocol.Page.OriginTrialTokenWithStatus) {
     this.#tokenWithStatus = data;
     this.#setTokenFields();
   }
 
   connectedCallback(): void {
-    this.#render();
-  }
-
-  override cloneNode(): HTMLElement {
-    const clone = UI.UIUtils.cloneCustomElement(this);
-    if (this.#tokenWithStatus) {
-      clone.data = this.#tokenWithStatus;
-    }
-    return clone;
+    this.requestUpdate();
   }
 
-  #renderTokenField = (fieldValue: string, hasError?: boolean): Lit.TemplateResult => html`
-        <div class=${ifDefined(hasError ? 'error-text' : undefined)}>
-          ${fieldValue}
-        </div>`;
-
   #setTokenFields(): void {
     if (!this.#tokenWithStatus?.parsedToken) {
       return;
@@ -230,27 +230,29 @@ export class OriginTrialTokenRows extends HTMLElement {
     this.#parsedTokenDetails = [
       {
         name: i18nString(UIStrings.origin),
-        value: this.#renderTokenField(
-            this.#tokenWithStatus.parsedToken.origin,
-            this.#tokenWithStatus.status === Protocol.Page.OriginTrialTokenStatus.WrongOrigin),
+        value: {
+          text: this.#tokenWithStatus.parsedToken.origin,
+          hasError: this.#tokenWithStatus.status === Protocol.Page.OriginTrialTokenStatus.WrongOrigin,
+        },
       },
       {
         name: i18nString(UIStrings.expiryTime),
-        value: this.#renderTokenField(
-            this.#dateFormatter.format(this.#tokenWithStatus.parsedToken.expiryTime * 1000),
-            this.#tokenWithStatus.status === Protocol.Page.OriginTrialTokenStatus.Expired),
+        value: {
+          text: this.#dateFormatter.format(this.#tokenWithStatus.parsedToken.expiryTime * 1000),
+          hasError: this.#tokenWithStatus.status === Protocol.Page.OriginTrialTokenStatus.Expired
+        },
       },
       {
         name: i18nString(UIStrings.usageRestriction),
-        value: this.#renderTokenField(this.#tokenWithStatus.parsedToken.usageRestriction),
+        value: {text: this.#tokenWithStatus.parsedToken.usageRestriction},
       },
       {
         name: i18nString(UIStrings.isThirdParty),
-        value: this.#renderTokenField(this.#tokenWithStatus.parsedToken.isThirdParty.toString()),
+        value: {text: this.#tokenWithStatus.parsedToken.isThirdParty.toString()},
       },
       {
         name: i18nString(UIStrings.matchSubDomains),
-        value: this.#renderTokenField(this.#tokenWithStatus.parsedToken.matchSubDomains.toString()),
+        value: {text: this.#tokenWithStatus.parsedToken.matchSubDomains.toString()},
       },
     ];
 
@@ -258,53 +260,27 @@ export class OriginTrialTokenRows extends HTMLElement {
       this.#parsedTokenDetails = [
         {
           name: i18nString(UIStrings.trialName),
-          value: this.#renderTokenField(this.#tokenWithStatus.parsedToken.trialName),
+          value: {text: this.#tokenWithStatus.parsedToken.trialName},
         },
         ...this.#parsedTokenDetails,
       ];
     }
+    this.requestUpdate();
   }
 
-  #render(): void {
+  override performUpdate(): void {
     if (!this.#tokenWithStatus) {
       return;
     }
 
-    const tokenDetails: TokenField[] = [
-      {
-        name: i18nString(UIStrings.status),
-        value: html`
-          <style>${badgeStyles}</style>
-          ${createBadge({
-          badgeContent: this.#tokenWithStatus.status,
-          style: this.#tokenWithStatus.status === Protocol.Page.OriginTrialTokenStatus.Success ? 'success' : 'error',
-        })}`,
-      },
-      ...this.#parsedTokenDetails,
-    ];
-
-    const tokenDetailRows = tokenDetails.map((field: TokenField) => {
-      return html`
-          <div class="key">${field.name}</div>
-          <div class="value">${field.value}</div>
-          `;
-    });
-
-    Lit.render(
-        html`
-      <style>
-        ${originTrialTokenRowsStyles}
-      </style>
-      <div class="content">
-        ${tokenDetailRows}
-      </div>
-    `,
-        this.#shadow, {host: this});
+    const viewInput: RowsViewInput = {
+      tokenWithStatus: this.#tokenWithStatus,
+      parsedTokenDetails: this.#parsedTokenDetails,
+    };
+    this.#view(viewInput, undefined, this.contentElement);
   }
 }
 
-customElements.define('devtools-resources-origin-trial-token-rows', OriginTrialTokenRows);
-
 export interface OriginTrialTreeViewData {
   trials: Protocol.Page.OriginTrial[];
 }
@@ -314,8 +290,7 @@ type View = (input: OriginTrialTreeViewData, output: undefined, target: HTMLElem
 const DEFAULT_VIEW: View = (input, _output, target) => {
   if (!input.trials.length) {
     // clang-format off
-    Lit.render(html`
-      <style>${originTrialTreeViewStyles}</style>
+    render(html`
       <span class="status-badge">
         <devtools-icon class="medium" name="clear"></devtools-icon>
         <span>${i18nString(UIStrings.noTrialTokens)}</span>
@@ -325,13 +300,12 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
   }
 
   // clang-format off
-  Lit.render(html`
-    <style>
-      ${originTrialTreeViewStyles}
-    </style>
+  render(html`
+    <style>${originTrialTreeViewStyles}</style>
     <devtools-tree .template=${html`
+      <style>${originTrialTreeViewStyles}</style>
       <ul role="tree">
-        ${input.trials.map(constructOriginTrialTree)}
+        ${input.trials.map(renderOriginTrialTree)}
       </ul>
     `}>
     </devtools-tree>
@@ -357,9 +331,3 @@ export class OriginTrialTreeView extends UI.Widget.Widget {
     this.#view(this.#data, undefined, this.contentElement);
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-resources-origin-trial-token-rows': OriginTrialTokenRows;
-  }
-}

package/front_end/panels/application/components/originTrialTreeView.css

@@ -4,12 +4,42 @@
  * found in the LICENSE file.
  */
 
-.status-badge {
-  border-radius: 4px;
-  padding: 4px;
-  background: var(--sys-color-neutral-container);
+:host {
+  .status-badge {
+    border-radius: 4px;
+    padding: 4px;
+    background: var(--sys-color-neutral-container);
 
-  & > devtools-icon {
-    vertical-align: sub;
+    & > devtools-icon {
+      vertical-align: sub;
+    }
   }
-}
+
+  .badge-error {
+    --override-adorner-text-color: var(--sys-color-error-bright);
+    --override-adorner-border-color: var(--sys-color-error-bright);
+  }
+
+  .badge-success {
+    --override-adorner-text-color: var(--sys-color-tertiary);
+    --override-adorner-border-color: var(--sys-color-tertiary);
+  }
+
+  .badge-secondary {
+    --override-adorner-text-color: var(--sys-color-token-subtle);
+    --override-adorner-border-color: var(--sys-color-token-subtle);
+  }
+
+  /* Use mono-space source code font to assist reading of adorner content */
+  devtools-adorner {
+    font-family: var(--source-code-font-family);
+  }
+
+  .token-status-badge {
+    display: none;
+  }
+
+  [aria-expanded='false'] .token-status-badge {
+    display: inline-flex;
+  }
+}