chore: followup bug 1926359 - Add tab group line to dragged tabs when…

… dragging into a group
onemen · Oct 24, 2024 · aad451f · aad451f
1 parent c8aad1d
commit aad451f
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 18 deletions.
diff --git a/addon/chrome/content/minit/minit.js b/addon/chrome/content/minit/minit.js
@@ -44,6 +44,7 @@ var TMP_tabDNDObserver = {
         enumerable: true,
       });
     }
+
     if (Tabmix.isVersion(1320)) {
       // create none private method in gBrowser.tabContainer
       // we will use instead of #isContainerVerticalPinnedExpanded in:
@@ -63,6 +64,26 @@ var TMP_tabDNDObserver = {
       });
     }
 
+    if (Tabmix.isVersion(1330)) {
+      /** @type {MockedGeckoTypes.TabContainer} */ // @ts-expect-error
+      const tabbrowserTabs = customElements.get("tabbrowser-tabs");
+      const code = tabbrowserTabs
+          .toString()
+          .split(" #setDragOverGroupColor")[1] // function to extract from source code
+          ?.split(" _finishAnimateTabMove")[0] // next function in the source code
+          ?.trim();
+      if (code) {
+        gBrowser.tabContainer._setDragOverGroupColor = eval(
+          `(function _setDragOverGroupColor${code})`
+        );
+      } else {
+        console.error(
+          "tabmix Error: can't find gBrowser.tabContainer.#setDragOverGroupColor function"
+        );
+        gBrowser.tabContainer._setDragOverGroupColor = function() {};
+      }
+    }
+
     function tabmixHandleMoveString() {
       const baseTest = 'this.getAttribute("orient") === "horizontal" && TabmixTabbar.widthFitTitle';
       if (Tabmix.isVersion(1300)) {
@@ -90,8 +111,8 @@ var TMP_tabDNDObserver = {
       'if (Tabmix.prefs.getBoolPref("selectTabOnMouseDown"))\n\
             $&\n\
           else if (!draggedTab.selected) {\n\
-            this.setAttribute("movingBackgroundTab", true);\n\
-            draggedTab.setAttribute("dragged", true);\n\
+            this.setAttribute("tabmix-movingBackgroundTab", true);\n\
+            draggedTab.setAttribute("tabmix-dragged", true);\n\
           }'
     )._replace(
       `if (${Tabmix.isVersion(1300) ? "screen" : "screenX"} > ${Tabmix.isVersion(1330) ? "point" : "tabCenter"}) {`,
@@ -148,7 +169,7 @@ var TMP_tabDNDObserver = {
         /let lastTabCenter =.*;/,
         `let lastTabCenter = firstMovingTabScreen + translate + (this.verticalMode ? tabSize / 2 : rightTabWidth / 2);`,
       )._replace(
-        "this.#rtlMode", "this._rtlMode", {check: Tabmix.isVersion(1310), flags: "g"}
+        /this\.#(\w*)/g, "this._$1", {check: Tabmix.isVersion(1310)}
       ).toCode();
     } else {
       // helper function to get floorp strings for width in vertical mode
@@ -297,14 +318,13 @@ var TMP_tabDNDObserver = {
     Tabmix.originalFunctions._getDropIndex = gBrowser.tabContainer._getDropIndex;
     gBrowser.tabContainer._getDropIndex = this._getDropIndex.bind(this);
 
-    Tabmix.changeCode(tabBar, "gBrowser.tabContainer._finishAnimateTabMove")._replace(
-      /(})(\)?)$/,
-      '\n\
-        this.removeAttribute("movingBackgroundTab");\n\
-        let tabs = this.getElementsByAttribute("dragged", "*");\n\
-        Array.prototype.slice.call(tabs).forEach(tab => tab.removeAttribute("dragged"));\n\
-      $1$2'
-    ).toCode();
+    Tabmix.originalFunctions._finishAnimateTabMove = gBrowser.tabContainer._finishAnimateTabMove;
+    gBrowser.tabContainer._finishAnimateTabMove = function(...args) {
+      Tabmix.originalFunctions._finishAnimateTabMove.apply(this, args);
+      this.removeAttribute("tabmix-movingBackgroundTab");
+      const tabs = this.querySelectorAll("[tabmix-dragged]");
+      tabs.forEach(tab => tab?.removeAttribute("tabmix-dragged"));
+    };
 
     this._dragOverDelay = tabBar._dragOverDelay;
     this.draglink = `Hold ${TabmixSvc.isMac ? "⌘" : "Ctrl"} to replace locked tab with link Url`;

diff --git a/addon/chrome/content/overlay/browser.css b/addon/chrome/content/overlay/browser.css
@@ -270,18 +270,18 @@ so display: none !important; does not hide the button */
 }
 
 /* for the case user drag background tab when selectTabOnMouseDown is false */
-#tabbrowser-tabs[movingBackgroundTab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[dragged] {
+#tabbrowser-tabs[tabmix-movingBackgroundTab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[tabmix-dragged] {
   position: relative;
   z-index: 3;
   pointer-events: none; /* avoid blocking dragover events on scroll buttons */
 }
 
-#tabbrowser-tabs[movingBackgroundTab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([tabdrop-samewindow])[dragged] {
+#tabbrowser-tabs[tabmix-movingBackgroundTab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([tabdrop-samewindow])[tabmix-dragged] {
   transition: none !important;
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  #tabbrowser-tabs[movingBackgroundTab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[fadein]:not([dragged]) {
+  #tabbrowser-tabs[tabmix-movingBackgroundTab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[fadein]:not([tabmix-dragged]) {
     transition: transform 200ms var(--animation-easing-function, ease-out);
   }
 }

diff --git a/addon/chrome/content/overlay/browser_before_119.css b/addon/chrome/content/overlay/browser_before_119.css
@@ -269,18 +269,18 @@ so display: none !important; does not hide the button */
 }
 
 /* for the case user drag background tab when selectTabOnMouseDown is false */
-#tabbrowser-tabs[movingBackgroundTab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[dragged] {
+#tabbrowser-tabs[tabmix-movingBackgroundTab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[tabmix-dragged] {
   position: relative;
   z-index: 3;
   pointer-events: none; /* avoid blocking dragover events on scroll buttons */
 }
 
-#tabbrowser-tabs[movingBackgroundTab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([tabdrop-samewindow])[dragged] {
+#tabbrowser-tabs[tabmix-movingBackgroundTab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([tabdrop-samewindow])[tabmix-dragged] {
   transition: none !important;
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  #tabbrowser-tabs[movingBackgroundTab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[fadein]:not([dragged]) {
+  #tabbrowser-tabs[tabmix-movingBackgroundTab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[fadein]:not([tabmix-dragged]) {
     transition: transform 200ms var(--animation-easing-function, ease-out);
   }
 }

diff --git a/addon/chrome/content/tab/tabBindings.js b/addon/chrome/content/tab/tabBindings.js
@@ -202,7 +202,7 @@
         return;
 
       if (aTab.mIsHover && aTab.getAttribute("showbutton") != "on" &&
-        !aTab.hasAttribute("dragged")) {
+        !aTab.hasAttribute("tabmix-dragged")) {
         if (TabmixTabbar.widthFitTitle)
           aTab.style.setProperty("width", Tabmix.getBoundsWithoutFlushing(aTab).width + "px", "important");
         aTab.setAttribute("showbutton", "on");

diff --git a/types/general.d.ts b/types/general.d.ts
@@ -263,6 +263,8 @@ declare namespace MockedGeckoTypes {
     // Tabmix
     __showbuttonTab?: BrowserTab;
     tabmix_updateCloseButtons: TabContainer["_updateCloseButtons"];
+    // using insteadof private method #setDragOverGroupColor since Firefox 133
+    _setDragOverGroupColor: (groupColorCode: string) => void;
 
     /** @deprecated removed by bug 1923635 in firefox 133 */
     _getVisibleTabs: () => Tabs;

diff --git a/types/tabmix.d.ts b/types/tabmix.d.ts
@@ -224,6 +224,7 @@ interface OriginalFunctions {
   openInverseLink: nsContextMenu["openLinkInTab"];
 
   _getDropIndex: MockedGeckoTypes.TabContainer["_getDropIndex"];
+  _finishAnimateTabMove: MockedGeckoTypes.TabContainer["_finishAnimateTabMove"];
   _groupSelectedTabs: MockedGeckoTypes.TabContainer["_groupSelectedTabs"];
   on_dragstart: MockedGeckoTypes.TabContainer["on_dragstart"];
   on_dragover: MockedGeckoTypes.TabContainer["on_dragover"];