From 8aacfcdfeeb1805663ea5bd378d050564e9bf420 Mon Sep 17 00:00:00 2001
From: Shubham Padia <shubham@zulip.com>
Date: Mon, 2 Sep 2024 07:52:14 +0000
Subject: [PATCH] css: Use a class for spoiler header text.

Having the :not() rule there affected the performance, see
https://chat.zulip.org/#narrow/stream/6-frontend/topic/CSS.20selector.20performance/near/1920156
for more details.

(cherry picked from commit 4a7983fad30d7e3fa669a700a7aa9e3a35346938)
---
 web/src/rendered_markdown.ts        | 2 ++
 web/styles/rendered_markdown.css    | 2 +-
 web/tests/rendered_markdown.test.js | 2 ++
 3 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/web/src/rendered_markdown.ts b/web/src/rendered_markdown.ts
index e45d73ab8c..87704dabbd 100644
--- a/web/src/rendered_markdown.ts
+++ b/web/src/rendered_markdown.ts
@@ -267,6 +267,8 @@ export const update_elements = ($content: JQuery): void => {
             $(this).append($("<p>").text($t({defaultMessage: "Spoiler"})));
         }
 
+        $(this).find("p").addClass("spoiler-header-text");
+
         // Add the expand/collapse button to spoiler blocks
         const toggle_button_html =
             '<span class="spoiler-button" aria-expanded="false"><span class="spoiler-arrow"></span></span>';
diff --git a/web/styles/rendered_markdown.css b/web/styles/rendered_markdown.css
index 0adebd1a14..c43ecc0d78 100644
--- a/web/styles/rendered_markdown.css
+++ b/web/styles/rendered_markdown.css
@@ -258,7 +258,7 @@
             padding: 8px 5px;
             font-weight: bold;
 
-            > :not(.spoiler-button) {
+            .spoiler-header-text {
                 /* Disallow margin from ordinary rendered-markdown
                    elements. The header's vertical space is handled
                    independently by padding on .spoiler-header. */
diff --git a/web/tests/rendered_markdown.test.js b/web/tests/rendered_markdown.test.js
index 307cdf87f8..6ebef6bbde 100644
--- a/web/tests/rendered_markdown.test.js
+++ b/web/tests/rendered_markdown.test.js
@@ -504,6 +504,7 @@ run_test("spoiler-header", () => {
     const toggle_button_html =
         '<span class="spoiler-button" aria-expanded="false"><span class="spoiler-arrow"></span></span>';
     $header.html(label);
+    $header.set_find_results("p", $.create("p"));
     rm.update_elements($content);
     assert.equal(label, $header.html());
     assert.equal($appended.selector, toggle_button_html);
@@ -523,6 +524,7 @@ run_test("spoiler-header-empty-fill", () => {
     const toggle_button_html =
         '<span class="spoiler-button" aria-expanded="false"><span class="spoiler-arrow"></span></span>';
     $header.empty();
+    $header.set_find_results("p", $.create("p"));
     rm.update_elements($content);
     assert.equal($appended[0].selector, "<p>");
     assert.equal($appended[0].text(), $t({defaultMessage: "Spoiler"}));