From 4ce8973e562aa97478b04af9965114964730a740 Mon Sep 17 00:00:00 2001
From: David Taylor <david@taylorhq.com>
Date: Fri, 30 May 2025 21:47:30 +0100
Subject: [PATCH] PERF: Optimize `.ai-debug-modal__tokens` selector (#1390)

This is showing as the most expensive CSS selector in Discourse at the moment. Adding specific classes and dropping the general `span` selector will make this much cheaper.
---
 .../javascripts/discourse/components/modal/debug-ai-modal.gjs | 4 ++--
 assets/stylesheets/modules/ai-bot/common/bot-replies.scss     | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/assets/javascripts/discourse/components/modal/debug-ai-modal.gjs b/assets/javascripts/discourse/components/modal/debug-ai-modal.gjs
index abf24dfe..135218d3 100644
--- a/assets/javascripts/discourse/components/modal/debug-ai-modal.gjs
+++ b/assets/javascripts/discourse/components/modal/debug-ai-modal.gjs
@@ -144,11 +144,11 @@ export default class DebugAiModal extends Component {
             >{{i18n "discourse_ai.ai_bot.debug_ai_modal.response"}}</a></li>
         </ul>
         <div class="ai-debug-modal__tokens">
-          <span>
+          <span class="ai-debug-modal__tokens__count">
             {{i18n "discourse_ai.ai_bot.debug_ai_modal.request_tokens"}}
             {{this.info.request_tokens}}
           </span>
-          <span>
+          <span class="ai-debug-modal__tokens__count">
             {{i18n "discourse_ai.ai_bot.debug_ai_modal.response_tokens"}}
             {{this.info.response_tokens}}
           </span>
diff --git a/assets/stylesheets/modules/ai-bot/common/bot-replies.scss b/assets/stylesheets/modules/ai-bot/common/bot-replies.scss
index 07d0cc2c..9579b7bd 100644
--- a/assets/stylesheets/modules/ai-bot/common/bot-replies.scss
+++ b/assets/stylesheets/modules/ai-bot/common/bot-replies.scss
@@ -139,7 +139,7 @@ span.onebox-ai-llm-title {
   }
 }
 
-.ai-debug-modal__tokens span {
+.ai-debug-modal__tokens__count {
   display: block;
 }