firefox: Add private browsing indicator + move passthru indicator

3 files changed, 47 insertions, 27 deletions

diff --git a/modules/firefox.home/chrome/globalKeybindings.uc.js b/modules/firefox.home/chrome/globalKeybindings.uc.js
index 1ff868c..4ad35da 100644
--- a/modules/firefox.home/chrome/globalKeybindings.uc.js
+++ b/modules/firefox.home/chrome/globalKeybindings.uc.js
@@ -41,10 +41,21 @@
   const togglePassthrough = () => () => UC.globalKeybindings.updateMode(m => m !== MODE_PASSTHRU ? MODE_PASSTHRU : MODE_NORMAL)
 
   const sidetabs = {
-    getExtensionId: () => [...SidebarController.sidebars].find(([_, p]) => p.label?.match(/sidetabs/i))?.[0],
-    ensureOpen: () => !SidebarController.isOpen && SidebarController.show(sidetabs.getExtensionId() ?? undefined),
-    toggle: () => () => {
-      sidetabs.ensureOpen();
+    getExtensionId: () => {
+      return [...SidebarController.sidebars].find(([_, p]) => p.label?.match(/sidetabs/i))?.[0];
+    },
+    ensureReady: async () => {
+      for (let i = 0; i < 3; i++) {
+        if (sidetabs.getExtensionId()) {
+          return !SidebarController.isOpen && SidebarController.show(sidetabs.getExtensionId() ?? undefined)
+        } else {
+          console.log('sidebar retry...');
+          await new Promise(res => setTimeout(res), 100);
+        }
+      }
+    },
+    toggle: () => async () => {
+      await sidetabs.ensureReady();
       const sidebar = document.getElementById('sidebar-box');
       sidebar?.classList.toggle('open');
     },
@@ -97,17 +108,18 @@
 
     updateMode: f => {
       module.mode = f(module.mode);
-      gBrowser.tabContainer.dataset.keyMode = module.mode
+      if (gNavToolbox) gNavToolbox.dataset.keyMode = module.mode;
+      Services.obs.notifyObservers(null, 'uc:globalKeybindings:modeChanged', module.mode);
     },
 
     handleKeyUpEvent: e => module.evaluateKeybindings(module.keybindings.RELEASE, e),
     handleKeyDownEvent: e => module.evaluateKeybindings(module.keybindings.PRESS, e),
 
-    onWindowReady: (win) => {
+    onWindowReady: async (win) => {
       win.addEventListener('keyup', module.handleKeyUpEvent, true);
       win.addEventListener('keydown', module.handleKeyDownEvent, true);
 
-      sidetabs.ensureOpen();
+      await sidetabs.ensureReady();
     },
 
     init(win) {
diff --git a/modules/firefox.home/chrome/styles/variables.css b/modules/firefox.home/chrome/styles/variables.css
index f002f1f..54ccb2b 100644
--- a/modules/firefox.home/chrome/styles/variables.css
+++ b/modules/firefox.home/chrome/styles/variables.css
@@ -4,6 +4,7 @@
   --ff-bg-color: #0f0c19;
   --ff-bg-color-1: #16121f;
   --ff-bg-color-2: #26222f;
+  --ff-bg-private: hsl(247,36%,15%);
   --ff-urlbar-height: 28px;
 }
 
diff --git a/modules/firefox.home/chrome/userChrome.css b/modules/firefox.home/chrome/userChrome.css
index 4133251..7b647f6 100644
--- a/modules/firefox.home/chrome/userChrome.css
+++ b/modules/firefox.home/chrome/userChrome.css
@@ -16,7 +16,7 @@ toolbarbutton {
 }
 
 #TabsToolbar {
-  background-color: var(--ff-bg-color) !important;
+  background-color: var(--toolbar-bgcolor) !important;
 }
 
 .browser-toolbar {
@@ -94,31 +94,13 @@ toolbarbutton#alltabs-button {
   display: none !important;
 }
 
-/* Show a label to display the current mode for global keybindings */
-#tabbrowser-tabs[data-key-mode=""]::after {
-  display: none;
-}
-#tabbrowser-tabs[data-key-mode]::after {
-  content: attr(data-key-mode);
-  vertical-align: middle;
-  font-size: 0.73rem;
-  background-color: var(--ff-accent-color);
-  color: #ddd;
-  padding: 2px 5px;
-  top: 50%;
-  position: absolute;
-  right: 8px;
-  transform: translateY(-50%);
-}
-
-
 
 
 /* Nav bar with url */
 
 #nav-bar {
   border-top: none !important;
-  background-color: var(--ff-bg-color) !important;
+  background-color: var(--toolbar-bgcolor) !important;
   padding: 4px 2px !important;
 }
 
@@ -222,3 +204,28 @@ toolbarbutton#alltabs-button {
 }
 
 
+/* Key mode indicator */
+#navigator-toolbox[data-key-mode=""]::after {
+  display: none;
+}
+#navigator-toolbox[data-key-mode]::after {
+  content: attr(data-key-mode);
+  vertical-align: middle;
+  font-size: 0.73rem;
+  background-color: var(--ff-accent-color);
+  color: #ddd;
+  padding: 2px 5px;
+  top: 0;
+  position: absolute;
+  right: 0;
+  /* transform: translateY(-50%); */
+}
+
+/* Private browsing indicator */
+#main-window[privatebrowsingmode="temporary"] #navigator-toolbox {
+  --toolbar-bgcolor: var(--ff-bg-private) !important;
+}
+#main-window[privatebrowsingmode="temporary"] #browser {
+  background-color: var(--ff-bg-private) !important;
+}
+