[FB] Nora | Fix statusbar doesn't follow preferences

Floorp-Projects · Jun 1, 2024 · 1ebce20 · 1ebce20
1 parent aa78a81
commit 1ebce20
Showing 1 changed file with 29 additions and 34 deletions.
diff --git a/nora/src/content/statusbar/browser-statusbar.tsx b/nora/src/content/statusbar/browser-statusbar.tsx
@@ -10,46 +10,19 @@ export const [showStatusbar, setShowStatusbar] = createSignal(
   Services.prefs.getBoolPref("browser.display.statusbar", false),
 );
 
-createEffect(() => {
-  const statuspanel_label = document.getElementById(
-    "statuspanel-label",
-  ) as XULElement;
-  const statuspanel = document.getElementById("statuspanel") as XULElement;
-  const statusText = document.getElementById("status-text") as XULElement;
-
-  Services.prefs.setBoolPref("browser.display.statusbar", showStatusbar());
-
-  if (showStatusbar()) {
-    document.getElementById("status-text")?.appendChild(statuspanel_label!);
-  } else {
-    document.getElementById("statuspanel")?.appendChild(statuspanel_label!);
-  }
-
-  const observer = new MutationObserver(() => {
-    if (statuspanel.getAttribute("inactive") === "true" && statusText) {
-      statusText.setAttribute("hidden", "true");
-    } else {
-      statusText?.removeAttribute("hidden");
-    }
-  });
-
-  observer?.disconnect();
-
-  if (showStatusbar()) {
-    observer.observe(statuspanel, { attributes: true });
-  }
-});
-
 class gFloorpStatusBarServices {
   private static instance: gFloorpStatusBarServices;
-
   public static getInstance() {
     if (!gFloorpStatusBarServices.instance) {
       gFloorpStatusBarServices.instance = new gFloorpStatusBarServices();
     }
     return gFloorpStatusBarServices.instance;
   }
 
+  private get statusbarEnabled() {
+    return Services.prefs.getBoolPref("browser.display.statusbar", false);
+  }
+
   public init() {
     window.CustomizableUI.registerArea("statusBar", {
       type: window.CustomizableUI.TYPE_TOOLBAR,
@@ -59,16 +32,38 @@ class gFloorpStatusBarServices {
       document.getElementById("statusBar"),
     );
 
+    createEffect(() => {
+      const statuspanel_label = document.getElementById(
+        "statuspanel-label",
+      ) as XULElement;
+      const statuspanel = document.getElementById("statuspanel") as XULElement;
+      const statusText = document.getElementById("status-text") as XULElement;
+      const observer = new MutationObserver(() => {
+        if (statuspanel.getAttribute("inactive") === "true" && statusText) {
+          statusText.setAttribute("hidden", "true");
+        } else {
+          statusText?.removeAttribute("hidden");
+        }
+      });
+
+      Services.prefs.setBoolPref("browser.display.statusbar", showStatusbar());
+      if (showStatusbar()) {
+        statusText?.appendChild(statuspanel_label!);
+        observer.observe(statuspanel, { attributes: true });
+      } else {
+        statuspanel?.appendChild(statuspanel_label!);
+        observer?.disconnect();
+      }
+    });
+
     //move elem to bottom of window
     document.body?.appendChild(document.getElementById("statusBar")!);
     this.observeStatusbar();
   }
 
   private observeStatusbar() {
     Services.prefs.addObserver("browser.display.statusbar", () =>
-      setShowStatusbar(() =>
-        Services.prefs.getBoolPref("browser.display.statusbar", false),
-      ),
+      setShowStatusbar(() => this.statusbarEnabled),
     );
   }
 }