From 8b96aa277a9d6abfe60672174e0bc0f8ebe29c24 Mon Sep 17 00:00:00 2001
From: Shubham Padia <shubham@zulip.com>
Date: Thu, 1 Aug 2024 04:59:15 +0000
Subject: [PATCH] css: Use classname instead of `div` selector for .blocks.

Having the `div` selector there affects the performance. See
https://chat.zulip.org/#narrow/stream/6-frontend/topic/CSS.20selector.20performance/near/1845719
for more details.
---
 web/styles/portico/markdown.css        |  4 ++--
 zerver/lib/markdown/tabbed_sections.py |  2 +-
 zerver/tests/test_templates.py         | 10 +++++-----
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/web/styles/portico/markdown.css b/web/styles/portico/markdown.css
index ccf9950dab..ff9ba9202b 100644
--- a/web/styles/portico/markdown.css
+++ b/web/styles/portico/markdown.css
@@ -454,7 +454,7 @@
             margin-bottom: 10px;
             border: 1px solid hsl(0deg 0% 87%);
 
-            & > div {
+            .tab-content {
                 display: none;
             }
         }
@@ -467,7 +467,7 @@
             border-radius: 6px;
         }
 
-        &.no-tabs .blocks > div,
+        &.no-tabs .blocks > .tab-content,
         &.has-tabs .blocks > .active {
             display: block;
         }
diff --git a/zerver/lib/markdown/tabbed_sections.py b/zerver/lib/markdown/tabbed_sections.py
index 9a1bfb9225..87922d3e02 100644
--- a/zerver/lib/markdown/tabbed_sections.py
+++ b/zerver/lib/markdown/tabbed_sections.py
@@ -33,7 +33,7 @@ NAV_LIST_ITEM_TEMPLATE = """
 """.strip()
 
 DIV_TAB_CONTENT_TEMPLATE = """
-<div data-tab-key="{data_tab_key}" markdown="1">
+<div class="tab-content" data-tab-key="{data_tab_key}" markdown="1">
 {content}
 </div>
 """.strip()
diff --git a/zerver/tests/test_templates.py b/zerver/tests/test_templates.py
index 65fe457ea6..e5305e3a7e 100644
--- a/zerver/tests/test_templates.py
+++ b/zerver/tests/test_templates.py
@@ -42,10 +42,10 @@ header
       <li data-tab-key="desktop-web" tabindex="0">Desktop/Web</li>
     </ul>
     <div class="blocks">
-      <div data-tab-key="ios" markdown="1"></p>
+      <div class="tab-content" data-tab-key="ios" markdown="1"></p>
         <p>iOS instructions</p>
       <p></div>
-      <div data-tab-key="desktop-web" markdown="1"></p>
+      <div class="tab-content" data-tab-key="desktop-web" markdown="1"></p>
         <p>Desktop/browser instructions</p>
       <p></div>
     </div>
@@ -60,10 +60,10 @@ header
       <li data-tab-key="android" tabindex="0">Android</li>
     </ul>
     <div class="blocks">
-      <div data-tab-key="desktop-web" markdown="1"></p>
+      <div class="tab-content" data-tab-key="desktop-web" markdown="1"></p>
         <p>Desktop/browser instructions</p>
       <p></div>
-      <div data-tab-key="android" markdown="1"></p>
+      <div class="tab-content" data-tab-key="android" markdown="1"></p>
         <p>Android instructions</p>
       <p></div>
     </div>
@@ -77,7 +77,7 @@ header
       <li data-tab-key="instructions-for-all-platforms" tabindex="0">Instructions for all platforms</li>
     </ul>
     <div class="blocks">
-      <div data-tab-key="instructions-for-all-platforms" markdown="1"></p>
+      <div class="tab-content" data-tab-key="instructions-for-all-platforms" markdown="1"></p>
         <p>Instructions for all platforms</p>
       <p></div>
     </div>