chore: prepare for vertical tabs sidebar, update attributes after toggleTabstrip

Author: onemen

addon/chrome/content/click/click.js

@@ -51,8 +51,9 @@ var TabmixTabClickOptions = {
       return;
     }
 
-    const clickOutTabs = aEvent.target.localName == "arrowscrollbox";
-    const tab = clickOutTabs ? gBrowser._selectedTab : aEvent.target.closest("tab.tabbrowser-tab");
+    const targetTab = aEvent.target.closest("tab.tabbrowser-tab");
+    const clickOutTabs = !targetTab;
+    const tab = targetTab ?? gBrowser.selectedTab;
 
     // we replace click handler from tab binding with this to make sure that we
     // always call onMouseCommand (if we need to) before we call tab flip.

addon/chrome/content/extensions/extensions.js

@@ -410,10 +410,11 @@ var TMP_extensionsCompatibility = {
     // https://addons.mozilla.org/en-US/firefox/addon/tabkit-2nd-edition/
     let isVertical = typeof VerticalTabs == "object" ||
         typeof VerticalTabsReloaded == "object" ||
-        typeof gBrowser.tabContainer._verticalTabs == "boolean" ||
+        !Tabmix.isVersion(1300) && typeof gBrowser.tabContainer._verticalTabs == "boolean" ||
         typeof sidetabs == "object" ||
         typeof tabkit == "object" ||
-        typeof tabkitGlobal == "object";
+        typeof tabkitGlobal == "object" ||
+        Tabmix.tabsUtils.isVerticalTabs;
     let treeStyleTab = typeof TreeStyleTabService == "object";
     Tabmix.extensions.verticalTabBar = isVertical || treeStyleTab;
     Tabmix.extensions.verticalTabs = isVertical && !treeStyleTab;

addon/chrome/content/overlay/multirow.css

@@ -37,6 +37,7 @@
 
 #tabmix-scrollbox:not([overflowing="true"]),
 #tabmix-scrollbox[flowing="singlebar"],
+#tabmix-scrollbox[verticalTabs],
 #tabmix-scrollbox[defaultScrollButtons] {
   visibility: collapse;
 }

addon/chrome/content/preferences/appearance.js

@@ -6,7 +6,12 @@ var gAppearancePane = {
     var browserWindow = Tabmix.getTopWin();
     // disable options for position the tabbar and scroll mode if TreeStyleTab extension installed
     if (browserWindow.Tabmix.extensions.verticalTabBar) {
-      Tabmix.setItem("treeStyleTab.msg", "hidden", null);
+      const description = document.getElementById("treeStyleTab.msg");
+      Tabmix.setItem(description, "hidden", null);
+      if (browserWindow.gBrowser.tabContainer._verticalTabs) {
+        description.innerHTML = "These preferences are not in use for vertical tabs.";
+        description.style.width = "25em";
+      }
       Tabmix.setItem("tabBarDisplay", "tstInstalled", true);
       Tabmix.setItem("tabBarPosition", "disabled", true);
       Tabmix.setItem("tabsScroll", "disabled", true);

addon/chrome/content/tab/tab.js

@@ -158,7 +158,9 @@ var TabmixTabbar = {
       allTabsButton.collapsed = !Services.prefs.getBoolPref("browser.tabs.tabmanager.enabled");
       Tabmix.setItem("tabbrowser-tabs", "showalltabsbutton", !allTabsButton.collapsed || null);
     }
-    Tabmix.setItem("TabsToolbar", "tabBarSpace", Tabmix.prefs.getBoolPref("tabBarSpace") || null);
+    const tabBarSpace = Tabmix.prefs.getBoolPref("tabBarSpace") || null;
+    Tabmix.setItem(tabBar.arrowScrollbox, "tabBarSpace", tabBarSpace);
+    Tabmix.setItem("TabsToolbar", "tabBarSpace", tabBarSpace);
     this.setShowNewTabButtonAttr();
 
     if (start)
@@ -395,6 +397,13 @@ Tabmix.tabsUtils = {
     return !this.getCollapsedState.collapsed;
   },
 
+  get isVerticalTabs() {
+    return (
+      this.tabBar.getAttribute("orient") === "vertical" &&
+      this.tabBar.arrowScrollbox.getAttribute("orient") === "vertical"
+    );
+  },
+
   get getCollapsedState() {
     const toolbar = document.getElementById("TabsToolbar");
     const tabBar = gBrowser.tabContainer;
@@ -416,6 +425,43 @@ Tabmix.tabsUtils = {
 
   init() {
     TMP_eventListener.toggleEventListener(this.tabBar, this.events, true, this);
+    if (Tabmix.isVersion(1300) && window.SidebarController.sidebarRevampEnabled) {
+      // handle click/dblclick event on the empty space below the tabs,
+      // clicking on this area should be tarted as a click on the tabbar
+      // and sent to event TabmixTabClickOptions
+      let timeoutId, observer;
+      const addSidbarListeners = () => {
+        const sidbarHtml = document.getElementById("sidebar-main")?.firstElementChild;
+        const sidebar = sidbarHtml?.shadowRoot?.querySelector("button-group");
+        if (sidebar) {
+          if (this.tabBar._verticalTabs) {
+            Tabmix.tabsUtils.initializeTabmixUI();
+          }
+          TMP_eventListener.toggleEventListener(sidebar, this.events, true, event => {
+            const isSidebarButton = event.originalTarget.closest("button");
+            if (this.tabBar._verticalTabs && !isSidebarButton) {
+              this.handleEvent(event);
+            }
+          });
+          clearTimeout(timeoutId);
+          observer.disconnect();
+        }
+      };
+
+      observer = new MutationObserver(addSidbarListeners);
+      observer.observe(document, {childList: true, subtree: true});
+
+      // throw an error if we can't find the sidebar after 1000ms
+      timeoutId = setTimeout(() => {
+        const message = `Error:\nTabmix can't find the sidebar DOM element to add click/dblclick listeners to it.
+          \n\nTry Tabmix latest development version from https://bitbucket.org/onemen/tabmixplus-for-firefox/downloads/
+          \nReport about this to Tabmix developer at https://github.com/onemen/TabMixPlus/issues`;
+        console.error(message);
+        observer.disconnect();
+      }, 1000);
+
+      addSidbarListeners();
+    }
 
     if (this.initialized) {
       Tabmix.log("initializeTabmixUI - some extension initialize tabbrowser-tabs binding again");
@@ -505,15 +551,8 @@ Tabmix.tabsUtils = {
 
   handleEvent(aEvent) {
     switch (aEvent.type) {
-      case "MozMouseHittest":
-        if (Tabmix.keyModifierDown && !document.hasFocus()) {
-          Tabmix.keyModifierDown = false;
-        }
-        if (aEvent.button === 0 && (Tabmix.keyModifierDown || aEvent.detail > 0))
-          aEvent.stopPropagation();
-        break;
       case "dblclick":
-        if (Tabmix.prefs.getBoolPref("tabbar.click_dragwindow") &&
+        if (!this.tabBar._verticalTabs && Tabmix.prefs.getBoolPref("tabbar.click_dragwindow") &&
             Tabmix.prefs.getBoolPref("tabbar.dblclick_changesize") &&
             !TabmixSvc.isMac && aEvent.target.localName === "arrowscrollbox") {
           let displayAppButton = !document.getElementById("titlebar").hidden;
@@ -956,7 +995,7 @@ Tabmix.tabsUtils = {
     // and add the difference to #tabbrowser-arrowscrollbox margin top/bottom
     // with --tabmix-multirow-margin
     const reduceMargin = this.protonValues.enabled &&
-      gBrowser.tabContainer.attributes.orient.value === "horizontal" &&
+      gBrowser.tabContainer.attributes.orient?.value !== "vertical" &&
       TabmixTabbar.visibleRows > 1;
     const margin = reduceMargin ? "1px" : "";
     document.documentElement.style.setProperty(this.protonValues.name, margin);

addon/chrome/content/tabmix.js

@@ -1005,8 +1005,14 @@ var TMP_eventListener = {
       if ((Tabmix.isVersion(1170) ? aEvent?.inputSource : aEvent?.mozInputSource) == MouseEvent.MOZ_SOURCE_MOUSE) {
         direction = direction > 0 ? 1 : -1;
         tabBar.advanceSelectedTab(direction, true);
+        if (Tabmix.isVersion(1270) && Tabmix.tabsUtils.isVerticalTabs) {
+          gBrowser.selectedTab.scrollIntoView({
+            block: "nearest",
+            behavior: "smooth",
+          });
+        }
       }
-    } else if (direction !== 0 && !Tabmix.extensions.treeStyleTab) {
+    } else if (direction !== 0 && !Tabmix.tabsUtils.isVerticalTabs && !Tabmix.extensions.treeStyleTab) {
       // this code is based on arrowscrollbox.js on_wheel event handler
       let scrollByDelta = function(delta, useInstant) {
         let instant;

addon/chrome/skin/general.css

@@ -32,13 +32,17 @@
 }
 
 /* :::: Space on tab bar :::: */
-#TabsToolbar[tabBarSpace] #tabbrowser-arrowscrollbox {
+#tabbrowser-arrowscrollbox[orient="horizontal"][tabBarSpace] {
   -moz-margin-start: 0;
   -moz-margin-end: 0;
   -moz-padding-end: 15px;
   -moz-padding-start: 15px;
 }
 
+#tabbrowser-arrowscrollbox[orient="vertical"][tabBarSpace] {
+  padding-block: 15px;
+}
+
 #TabsToolbar[tabBarSpace] .titlebar-spacer[type="pre-tabs"],
 #TabsToolbar[tabBarSpace] .titlebar-spacer[type="post-tabs"] {
   width: 25px;

addon/chrome/skin/tabmix-preferences.css

@@ -248,8 +248,8 @@ tabbox > tabs {
   display: none !important;
 }
 
-groupbox[tstInstalled] label[TSTdisabled="true"] {
-  color: GrayText;
+#tabBarDisplay[tstInstalled] label[TSTdisabled="true"] {
+  opacity: 50%;
 }
 
 /* rules to make the new option window look the same as the old one */

addon/modules/DynamicRules.jsm

@@ -46,7 +46,7 @@ const DynamicRules = {
       return;
     this._initialized = true;
 
-    this.orient = aWindow.document.getElementById("tabbrowser-tabs").attributes.orient.value;
+    this.orient = aWindow.document.getElementById("tabbrowser-tabs").attributes.orient?.value ?? "horizontal";
     this.windows10 = aWindow.navigator.oscpu.startsWith("Windows NT 10.0");
 
     lazy.Prefs.addObserver("", this);
@@ -77,7 +77,7 @@ const DynamicRules = {
     const tabsMutate = aMutations => {
       for (let mutation of aMutations) {
         if (mutation.attributeName == "orient") {
-          this.orient = mutation.target.orient || mutation.target.attributes.orient.value;
+          this.orient = mutation.target.orient || mutation.target.attributes.orient?.value || "horizontal";
           this.updateStyleType();
           return;
         }
@@ -142,24 +142,24 @@ const DynamicRules = {
 
     // add more selectors to increase specificity of our rule in order to
     // override rules from Firefox and Waterfox
-    let selector = '#TabsToolbar #TabsToolbar-customization-target #tabbrowser-tabs';
+    let selector = '#tabbrowser-tabs';
 
     let styleRules = {
       currentTab: {
-        text: `${selector}[tabmix_currentStyle~="text"] .tabbrowser-tab${tabState.current}${tabTextRule}`,
-        bg: `${selector}[tabmix_currentStyle~="bg"] .tabbrowser-tab${tabState.current}${backgroundRule}`
+        text: `${selector}[tabmix_currentStyle~="text"] #tabbrowser-arrowscrollbox > .tabbrowser-tab${tabState.current}${tabTextRule}`,
+        bg: `${selector}[tabmix_currentStyle~="bg"] #tabbrowser-arrowscrollbox > .tabbrowser-tab${tabState.current}${backgroundRule}`
       },
       unloadedTab: {
-        text: `${selector}[tabmix_unloadedStyle~="text"] .tabbrowser-tab${tabState.unloaded}${tabTextRule}`,
-        bg: `${selector}[tabmix_unloadedStyle~="bg"] .tabbrowser-tab${tabState.unloaded}${backgroundRule}`
+        text: `${selector}[tabmix_unloadedStyle~="text"] #tabbrowser-arrowscrollbox > .tabbrowser-tab${tabState.unloaded}${tabTextRule}`,
+        bg: `${selector}[tabmix_unloadedStyle~="bg"] #tabbrowser-arrowscrollbox > .tabbrowser-tab${tabState.unloaded}${backgroundRule}`
       },
       unreadTab: {
-        text: `${selector}[tabmix_unreadStyle~="text"] .tabbrowser-tab${tabState.unread}${tabTextRule}`,
-        bg: `${selector}[tabmix_unreadStyle~="bg"] .tabbrowser-tab${tabState.unread}${backgroundRule}`
+        text: `${selector}[tabmix_unreadStyle~="text"] #tabbrowser-arrowscrollbox > .tabbrowser-tab${tabState.unread}${tabTextRule}`,
+        bg: `${selector}[tabmix_unreadStyle~="bg"] #tabbrowser-arrowscrollbox > .tabbrowser-tab${tabState.unread}${backgroundRule}`
       },
       otherTab: {
-        text: `${selector}[tabmix_otherStyle~="text"] .tabbrowser-tab${tabState.other}${tabTextRule}`,
-        bg: `${selector}[tabmix_otherStyle~="bg"] .tabbrowser-tab${tabState.other}${backgroundRule}`
+        text: `${selector}[tabmix_otherStyle~="text"] #tabbrowser-arrowscrollbox > .tabbrowser-tab${tabState.other}${tabTextRule}`,
+        bg: `${selector}[tabmix_otherStyle~="bg"] #tabbrowser-arrowscrollbox > .tabbrowser-tab${tabState.other}${backgroundRule}`
       },
     };
 

addon/modules/TabmixSvc.jsm

@@ -270,6 +270,10 @@ TabmixSvc = {
 
       ChromeUtils.import("chrome://tabmix-resource/content/TabRestoreQueue.jsm");
 
+      if (isVersion(1300)) {
+        ChromeUtils.import("chrome://tabmix-resource/content/VerticalTabs.jsm");
+      }
+
       if (TabmixSvc.isG3Waterfox) {
         // Waterfox use build-in preference - browser.tabBar.position
         Services.prefs.clearUserPref("extensions.tabmix.tabBarPosition");

addon/modules/VerticalTabs.jsm

@@ -0,0 +1,98 @@
+"use strict";
+
+const EXPORTED_SYMBOLS = ["VerticalTabs"];
+
+const Services = globalThis.Services || ChromeUtils.import("resource://gre/modules/Services.jsm").Services;
+
+const lazy = {};
+
+ChromeUtils.defineModuleGetter(lazy, "TabmixSvc",
+  "chrome://tabmix-resource/content/TabmixSvc.jsm");
+
+var VerticalTabs = {
+  init() {
+    if (this._initialized)
+      return;
+    this._initialized = true;
+
+    Services.prefs.addObserver("sidebar.revamp", this);
+    Services.prefs.addObserver("sidebar.verticalTabs", this);
+    Services.obs.addObserver(this, "quit-application");
+  },
+
+  observe(subject, topic, data) {
+    switch (topic) {
+      case "nsPref:changed":
+        this.onPrefChange(data);
+        break;
+      case "quit-application":
+        this.onQuitApplication();
+        break;
+    }
+  },
+
+  onPrefChange(data) {
+    this._counter++;
+    if (data !== "sidebar.verticalTabs" && data !== "sidebar.revamp") {
+      return;
+    }
+
+    const revamp = Services.prefs.getBoolPref("sidebar.revamp");
+    const verticalTabs = Services.prefs.getBoolPref("sidebar.verticalTabs");
+
+    // save current pref value as a backup
+    const pref = "extensions.tabmix.tabBarMode";
+    const backupPref = `${pref}._backup`;
+    if (data === "sidebar.verticalTabs" && verticalTabs) {
+      Services.prefs.setIntPref(backupPref, Services.prefs.getIntPref(pref));
+    }
+
+    // this is workaround until SidebarController.toggleTabstrip prevent it
+    if (!revamp && verticalTabs) {
+      // verticalTabs set without revamp - set it back to false
+      Services.prefs.setBoolPref("sidebar.verticalTabs", false);
+      return;
+    }
+
+    if (data !== "sidebar.verticalTabs") {
+      return;
+    }
+
+    lazy.TabmixSvc.forEachBrowserWindow(window => {
+      const {document, gBrowser, SidebarController, Tabmix, TabmixTabbar} = window;
+
+      const tabmixScrollBox = document.getElementById("tabmix-scrollbox");
+      if (SidebarController?.sidebarVerticalTabsEnabled) {
+        tabmixScrollBox.setAttribute("verticalTabs", true);
+      } else {
+        tabmixScrollBox.removeAttribute("verticalTabs", true);
+
+        const tabBar = gBrowser.tabContainer;
+        tabBar.setAttribute("orient", "horizontal");
+
+        const toolbar = document.getElementById("TabsToolbar-customization-target");
+        if (toolbar === tabBar.parentNode && tabmixScrollBox !== tabBar.nextSibling) {
+          toolbar.insertBefore(tabBar, tabmixScrollBox);
+        }
+
+        const useTabmixButtons = TabmixTabbar.scrollButtonsMode > TabmixTabbar.SCROLL_BUTTONS_LEFT_RIGHT;
+        Tabmix.tabsUtils.updateScrollButtons(useTabmixButtons);
+      }
+      Tabmix.tabsUtils.initializeTabmixUI();
+    });
+
+    // restore tabBar mode after we set orient back to horizontal
+    if (!verticalTabs) {
+      Services.prefs.setIntPref(pref, Services.prefs.getIntPref(backupPref, 1));
+      Services.prefs.clearUserPref(backupPref);
+    }
+  },
+
+  onQuitApplication() {
+    Services.prefs.removeObserver("sidebar.revamp", this);
+    Services.prefs.removeObserver("sidebar.verticalTabs", this);
+    Services.obs.removeObserver(this, "quit-application");
+  },
+};
+
+VerticalTabs.init();