fix: compatibility with Firefox Color extension (closes #400)

onemen · Feb 11, 2025 · ddada1e · ddada1e
1 parent 64a1e34
commit ddada1e
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 8 deletions.
diff --git a/addon/chrome/content/preferences/appearance.xhtml b/addon/chrome/content/preferences/appearance.xhtml
@@ -165,6 +165,7 @@
                 <radiogroup id="theme-background" preference="pref_theme_background" style="flex-direction: row;">
                   <radio value="0" label="Repeat"/>
                   <radio value="1" label="Cover"/>
+                  <radio value="2" label="Theme Default"/>
                 </radiogroup>
               </hbox>
             </vbox>

diff --git a/addon/chrome/content/tab/tab.js b/addon/chrome/content/tab/tab.js
@@ -1061,8 +1061,20 @@ Tabmix.bottomToolbarUtils = {
         document.getElementById("customization-container")?.nextSibling ??
         document.getElementById("browser-bottombox");
     referenceNode?.parentNode?.insertBefore(fragment, referenceNode);
+    const toolbox = document.getElementById("tabmix-bottom-toolbox");
+    // for theme style
+    const value = Tabmix.prefs.getIntPref("theme_background") !== 2 || null;
+    Tabmix.setItem(toolbox, "tabmix_lwt_background", value);
+    const navigatorToolboxStyle = getComputedStyle(document.getElementById("navigator-toolbox"));
+    if (navigatorToolboxStyle) {
+      const backgroundColor = navigatorToolboxStyle.getPropertyValue("background-color");
+      toolbox.style.setProperty("--tabmix-bottom-toolbox-color", backgroundColor);
+      if (backgroundColor === "rgba(0, 0, 0, 0)") {
+        toolbox.firstElementChild?.style.setProperty("--tabmix-bottom-toolbox-color", backgroundColor);
+      }
+    }
     Object.defineProperty(this, "toolbox", {
-      value: document.getElementById("tabmix-bottom-toolbox"),
+      value: toolbox,
       configurable: true,
       enumerable: true
     });
@@ -1604,14 +1616,18 @@ window.gTMPprefObserver = {
       case "extensions.tabmix.pinnedTabScroll":
         gBrowser.tabContainer._positionPinnedTabs();
         break;
-      case "extensions.tabmix.theme_background":
+      case "extensions.tabmix.theme_background": {
+        const value = prefValue !== 2 || null;
+        Tabmix.setItem("navigator-toolbox", "tabmix_lwt_background", value);
+        Tabmix.setItem("tabmix-bottom-toolbox", "tabmix_lwt_background", value);
         this.dynamicRules.themeBackground.style.cssText = "";
         if (prefValue === 0) {
           this.dynamicRules.themeBackground.style.setProperty("background-repeat", "repeat-y");
         } else {
           this.dynamicRules.themeBackground.style.setProperty("background-size", "cover");
         }
         break;
+      }
       case "browser.tabs.onTop":
         if (TabmixTabbar.position == 1 && Services.prefs.getBoolPref(prefName)) {
           Services.prefs.setBoolPref(prefName, false);
@@ -1938,8 +1954,8 @@ window.gTMPprefObserver = {
     const lwtheme = Tabmix.isVersion(1260) ? "is([lwtheme], [lwtheme-image])" : "-moz-lwtheme";
     // theme background style for multi-row
     this.insertRule(
-      `:root[tabmix_lwt]:${lwtheme} #navigator-toolbox,
-       :root[tabmix_lwt]:${lwtheme} #tabmix-bottom-toolbox > toolbox {
+      `:root[tabmix_lwt]:${lwtheme} #navigator-toolbox[tabmix_lwt_background],
+       :root[tabmix_lwt]:${lwtheme} #tabmix-bottom-toolbox[tabmix_lwt_background] > toolbox {
          ${Tabmix.prefs.getIntPref("theme_background") === 0 ?
               "background-repeat: repeat-y;" : "background-size: cover;"
           }

diff --git a/addon/chrome/content/tabmix.js b/addon/chrome/content/tabmix.js
@@ -499,8 +499,12 @@ var TMP_eventListener = {
       gTMPprefObserver.tabBarPositionChanged(1);
 
     // for light weight themes
-    if (TabmixTabbar.isMultiRow || TabmixTabbar.position == 1)
+    if (TabmixTabbar.isMultiRow || TabmixTabbar.position == 1) {
       Tabmix.setItem("main-window", "tabmix_lwt", true);
+      const value = Tabmix.prefs.getIntPref("theme_background") !== 2 || null;
+      Tabmix.setItem("navigator-toolbox", "tabmix_lwt_background", value);
+      Tabmix.setItem("tabmix-bottom-toolbox", "tabmix_lwt_background", value);
+    }
 
     // make sure "extensions.tabmix.undoClose" is true if "browser.sessionstore.max_tabs_undo" is not zero
     var sessionstoreUndoClose = Services.prefs.getIntPref("browser.sessionstore.max_tabs_undo") > 0;

diff --git a/addon/chrome/skin/app_version/all/themeStyles.css b/addon/chrome/skin/app_version/all/themeStyles.css
@@ -13,7 +13,7 @@
 }
 
 :root[lwtheme] #tabmix-bottom-toolbox {
-  background-color: var(--lwt-accent-color);
+  background-color: var(--tabmix-bottom-toolbox-color, var(--lwt-accent-color));
 }
 
 :root[lwtheme-image] #tabmix-bottom-toolbox > toolbox {
@@ -23,7 +23,7 @@
 }
 
 :root[lwtheme] #tabmix-bottom-toolbox > toolbox:-moz-window-inactive {
-  background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color));
+  background-color: var(--tabmix-bottom-toolbox-color, var(--lwt-accent-color-inactive, var(--lwt-accent-color)));
 }
 
 @media (-moz-platform: windows) {

diff --git a/addon/defaults/preferences/tabmix.js b/addon/defaults/preferences/tabmix.js
@@ -68,7 +68,7 @@ pref("extensions.tabmix.keepLastTab", false);
 pref("extensions.tabmix.tabBarMode", 1);
 pref("extensions.tabmix.tabBarMaxRow", 3);
 pref("extensions.tabmix.pinnedTabScroll", false);
-pref("extensions.tabmix.theme_background", 0);
+pref("extensions.tabmix.theme_background", 2);
 pref("extensions.tabmix.tabBarSpace", false);
 pref("extensions.tabmix.hideTabBarButton", true);
 // form 2021-01-22 we replaced this pref

diff --git a/types/custom.gecko.dom.d.ts b/types/custom.gecko.dom.d.ts
@@ -71,6 +71,7 @@ interface GetByMap {
   "scrollbutton-down": HTMLButtonElement;
   "tab-close-button": HTMLButtonElement;
   "fullscr-bottom-toggler": HTMLElement & {initialized: boolean};
+  "navigator-toolbox": HTMLElement;
   "tabmix-bottom-toolbox": HTMLElement;
   "nav-bar-overflow-button": HTMLButtonElement;
 }