From 573406694220956756279176ab515038653e8fa8 Mon Sep 17 00:00:00 2001
From: Jarek Radosz <jradosz@gmail.com>
Date: Thu, 25 Jan 2024 12:50:33 +0100
Subject: [PATCH] DEV: Use `document.body` directly (#25417)

No need to fire up those query parsing engines :P
---
 .../discourse/app/controllers/application.js  |  4 ++--
 .../instance-initializers/narrow-desktop.js   |  5 +----
 .../javascripts/discourse/app/lib/lock-on.js  | 10 ++++------
 .../acceptance/sidebar-narrow-desktop-test.js | 20 +++++++++----------
 4 files changed, 17 insertions(+), 22 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/controllers/application.js b/app/assets/javascripts/discourse/app/controllers/application.js
index 3eaa48b8914..140b3bab9b0 100644
--- a/app/assets/javascripts/discourse/app/controllers/application.js
+++ b/app/assets/javascripts/discourse/app/controllers/application.js
@@ -60,7 +60,7 @@ export default Controller.extend({
   },
 
   _mainOutletAnimate() {
-    document.querySelector("body").classList.remove("sidebar-animate");
+    document.body.classList.remove("sidebar-animate");
   },
 
   @discourseComputed(
@@ -110,7 +110,7 @@ export default Controller.extend({
   @action
   toggleSidebar() {
     // enables CSS transitions, but not on did-insert
-    document.querySelector("body").classList.add("sidebar-animate");
+    document.body.classList.add("sidebar-animate");
 
     discourseDebounce(this, this._mainOutletAnimate, 250);
 
diff --git a/app/assets/javascripts/discourse/app/instance-initializers/narrow-desktop.js b/app/assets/javascripts/discourse/app/instance-initializers/narrow-desktop.js
index bd638881964..7bfe1fb54c1 100644
--- a/app/assets/javascripts/discourse/app/instance-initializers/narrow-desktop.js
+++ b/app/assets/javascripts/discourse/app/instance-initializers/narrow-desktop.js
@@ -35,10 +35,7 @@ export default {
         }
       });
 
-      const bodyElement = document.querySelector("body");
-      if (bodyElement) {
-        this._resizeObserver.observe(bodyElement);
-      }
+      this._resizeObserver.observe(document.body);
     }
   },
 };
diff --git a/app/assets/javascripts/discourse/app/lib/lock-on.js b/app/assets/javascripts/discourse/app/lib/lock-on.js
index a89817b086e..4269ece56ee 100644
--- a/app/assets/javascripts/discourse/app/lib/lock-on.js
+++ b/app/assets/javascripts/discourse/app/lib/lock-on.js
@@ -84,18 +84,16 @@ export default class LockOn {
   }
 
   _addListener() {
-    const body = document.querySelector("body");
-
     SCROLL_EVENTS.forEach((event) => {
-      body.addEventListener(event, this._scrollListener, { passive: true });
+      document.body.addEventListener(event, this._scrollListener, {
+        passive: true,
+      });
     });
   }
 
   _removeListener() {
-    const body = document.querySelector("body");
-
     SCROLL_EVENTS.forEach((event) => {
-      body.removeEventListener(event, this._scrollListener);
+      document.body.removeEventListener(event, this._scrollListener);
     });
   }
 
diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-narrow-desktop-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-narrow-desktop-test.js
index 83904d83fca..f13964f74a8 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-narrow-desktop-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-narrow-desktop-test.js
@@ -10,6 +10,10 @@ acceptance("Sidebar - Narrow Desktop", function (needs) {
     navigation_menu: "sidebar",
   });
 
+  needs.hooks.afterEach(function () {
+    document.body.style.width = null;
+  });
+
   test("wide sidebar is changed to cloak when resize to narrow screen", async function (assert) {
     await visit("/");
     assert.ok(exists("#d-sidebar"), "wide sidebar is displayed");
@@ -22,8 +26,7 @@ acceptance("Sidebar - Narrow Desktop", function (needs) {
 
     assert.ok(exists("#d-sidebar"), "wide sidebar is displayed");
 
-    const bodyElement = document.querySelector("body");
-    bodyElement.style.width = "767px";
+    document.body.style.width = "767px";
 
     await waitFor(".btn-sidebar-toggle.narrow-desktop", {
       timeout: 5000,
@@ -41,34 +44,31 @@ acceptance("Sidebar - Narrow Desktop", function (needs) {
       "cloak sidebar is collapsed"
     );
 
-    bodyElement.style.width = "1200px";
+    document.body.style.width = "1200px";
     await waitFor("#d-sidebar", {
       timeout: 5000,
     });
     assert.ok(exists("#d-sidebar"), "wide sidebar is displayed");
-
-    bodyElement.style.width = null;
   });
 
   test("transition from narrow screen to wide screen", async function (assert) {
     await visit("/");
 
-    const bodyElement = document.querySelector("body");
-    bodyElement.style.width = "767px";
+    document.body.style.width = "767px";
 
     await waitFor(".btn-sidebar-toggle.narrow-desktop", {
       timeout: 5000,
     });
     await click(".btn-sidebar-toggle");
 
-    bodyElement.style.width = "1200px";
+    document.body.style.width = "1200px";
     await waitFor("#d-sidebar", {
       timeout: 5000,
     });
+
     await click(".header-dropdown-toggle.current-user");
     $(".header-dropdown-toggle.current-user").click();
-    assert.ok(exists(".quick-access-panel"));
 
-    bodyElement.style.width = null;
+    assert.ok(exists(".quick-access-panel"));
   });
 });