From 7ec93b920cfdd068c9b560c6de2f635adac0c5bd Mon Sep 17 00:00:00 2001
From: Shubham Padia <shubham@zulip.com>
Date: Mon, 29 Jul 2024 09:31:10 +0000
Subject: [PATCH] css: Use class_name for .client-logos div.

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.
We've introduced a new class called `.client-logos-div`.
In `hello.ts` we just manually append the name of this new class for the
logo changing logic since that felt more readable than adding the class
programmatically.

(cherry picked from commit 996a091bd91c2327693d8e9c5d0813d3be5d7b18)
---
 templates/corporate/hello.html | 12 ++++++------
 web/src/portico/hello.ts       | 32 +++++++++++++++++---------------
 web/styles/portico/hello.css   |  4 ++--
 3 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/templates/corporate/hello.html b/templates/corporate/hello.html
index acbf9f41fe..db527d2875 100644
--- a/templates/corporate/hello.html
+++ b/templates/corporate/hello.html
@@ -68,12 +68,12 @@
                 </div>
             </div>
             <div class="client-logos">
-                <div class='client-logos__logo_akamai'></div>
-                <div class='client-logos__logo_tum'></div>
-                <div class='client-logos__logo_wikimedia'></div>
-                <div class='client-logos__logo_rust'></div>
-                <div class='client-logos__logo_dr_on_demand'></div>
-                <div class='client-logos__logo_maria'></div>
+                <div class='client-logos-div client-logos__logo_akamai'></div>
+                <div class='client-logos-div client-logos__logo_tum'></div>
+                <div class='client-logos-div client-logos__logo_wikimedia'></div>
+                <div class='client-logos-div client-logos__logo_rust'></div>
+                <div class='client-logos-div client-logos__logo_dr_on_demand'></div>
+                <div class='client-logos-div client-logos__logo_maria'></div>
             </div>
         </div>
         <div class="screen-2">
diff --git a/web/src/portico/hello.ts b/web/src/portico/hello.ts
index 994a1cb90f..3a622f6ad4 100644
--- a/web/src/portico/hello.ts
+++ b/web/src/portico/hello.ts
@@ -12,30 +12,32 @@ function get_random_item_from_array<T>(array: T[]): T {
 }
 
 const current_client_logo_class_names = new Set([
-    "client-logos__logo_akamai",
-    "client-logos__logo_tum",
-    "client-logos__logo_wikimedia",
-    "client-logos__logo_rust",
-    "client-logos__logo_dr_on_demand",
-    "client-logos__logo_maria",
+    "client-logos-div client-logos__logo_akamai",
+    "client-logos-div client-logos__logo_tum",
+    "client-logos-div client-logos__logo_wikimedia",
+    "client-logos-div client-logos__logo_rust",
+    "client-logos-div client-logos__logo_dr_on_demand",
+    "client-logos-div client-logos__logo_maria",
 ]);
 const future_client_logo_class_names = new Set([
-    "client-logos__logo_pilot",
-    "client-logos__logo_recurse",
-    "client-logos__logo_level_up",
+    "client-logos-div client-logos__logo_pilot",
+    "client-logos-div client-logos__logo_recurse",
+    "client-logos-div client-logos__logo_level_up",
 
-    "client-logos__logo_layershift",
-    "client-logos__logo_julia",
-    "client-logos__logo_ucsd",
-    "client-logos__logo_lean",
-    "client-logos__logo_asciidoc",
+    "client-logos-div client-logos__logo_layershift",
+    "client-logos-div client-logos__logo_julia",
+    "client-logos-div client-logos__logo_ucsd",
+    "client-logos-div client-logos__logo_lean",
+    "client-logos-div client-logos__logo_asciidoc",
 ]);
 let current_client_logo_class_names_index = 0;
 function update_client_logo(): void {
     if (document.hidden) {
         return;
     }
-    const client_logos = [...document.querySelectorAll("[class^='client-logos__']")];
+    const client_logos = [
+        ...document.querySelectorAll("[class^='client-logos-div client-logos__']"),
+    ];
     current_client_logo_class_names_index = get_new_rand(
         current_client_logo_class_names_index,
         client_logos.length,
diff --git a/web/styles/portico/hello.css b/web/styles/portico/hello.css
index 44e3289975..792d4f910a 100644
--- a/web/styles/portico/hello.css
+++ b/web/styles/portico/hello.css
@@ -197,7 +197,7 @@ ul {
         place-items: center;
     }
 
-    .client-logos div {
+    .client-logos-div {
         transition: all 0.7s ease-out;
         background-position: center;
     }
@@ -679,7 +679,7 @@ ul {
             background: hsl(238deg 28% 21%);
         }
 
-        .client-logos div {
+        .client-logos-div {
             opacity: 0.7;
         }
     }