Refactor tab management logic to improve visibility of pinned tabs and enhance tab filtering

Update sidebar and menu icons for improved visual consistency
Enhance tab management by allowing drag-and-drop functionality with the workspace indicator and adjust URL bar primary adjustment timing
2025-02-08 00:11:06 +01:00 · 2025-02-07 23:40:31 +01:00 · 2025-02-07 23:36:07 +01:00 · 2025-02-07 23:00:06 +01:00 · 2025-02-07 22:46:53 +01:00 · 2025-02-07 22:23:06 +01:00
18 changed files with 137 additions and 186 deletions
--- a/src/browser/base/content/ZenStartup.mjs
+++ b/src/browser/base/content/ZenStartup.mjs
@@ -101,7 +101,8 @@
        // to how Gecko internally rounds in those cases, we allow for some
        // minor differences (the internal Gecko layout size is 1/60th of a
        // pixel, so 0.02 should cover it).
-        let overflowing = contentSize - tabContainer.arrowScrollbox.scrollClientSize > 0.02;
+        //let overflowing = contentSize - tabContainer.arrowScrollbox.scrollClientSize > 0.02;
+        let overflowing = true; // cheatign the system, because we want to always show make the element overflowing

        window.requestAnimationFrame(() => {
          tabContainer.arrowScrollbox.toggleAttribute('overflowing', overflowing);
--- a/src/browser/base/content/ZenUIManager.mjs
+++ b/src/browser/base/content/ZenUIManager.mjs
@@ -29,6 +29,7 @@ var gZenUIManager = {
    });

    window.addEventListener('TabClose', this.onTabClose.bind(this));
+    this.tabsWrapper.addEventListener('scroll', this.saveScrollbarState.bind(this));
  },

  updateTabsToolbar() {
@@ -68,10 +69,13 @@ var gZenUIManager = {
    this._scrollbarState = this.tabsWrapper.scrollTop;
  },

+  restoreScrollbarState() {
+    this.tabsWrapper.scrollTop = this._scrollbarState;
+  },
+
  onTabClose(event) {
    this.updateTabsToolbar();
-    this.tabsWrapper.scrollTop = this._scrollbarState;
-    this._scrollbarState = 0;
+    this.restoreScrollbarState();
  },

  openAndChangeToTab(url, options) {
--- a/src/browser/base/content/navigator-toolbox-inc-xhtml.patch
+++ b/src/browser/base/content/navigator-toolbox-inc-xhtml.patch
@@ -1,5 +1,5 @@
 diff --git a/browser/base/content/navigator-toolbox.inc.xhtml b/browser/base/content/navigator-toolbox.inc.xhtml
-index 00391af141d9015fe5839534e5e6b22a91ba65d9..b68767d0fef6cea2756376bbcfe00603d5d1a655 100644
+index a0a382643a2f74b6d789f3641ef300eed202d5e9..8b7b2ae3e7764d5dd77cd344f0cf67aea54a6f47 100644
 --- a/browser/base/content/navigator-toolbox.inc.xhtml
 +++ b/browser/base/content/navigator-toolbox.inc.xhtml
@@ -2,7 +2,7 @@
@@ -86,7 +86,7 @@ index 00391af141d9015fe5839534e5e6b22a91ba65d9..b68767d0fef6cea2756376bbcfe00603
   <toolbar id="nav-bar"
            class="browser-toolbar chromeclass-location"
            data-l10n-id="navbar-accessible"
-@@ -487,10 +495,12 @@
+@@ -490,10 +498,12 @@
                      consumeanchor="PanelUI-button"
                      data-l10n-id="appmenu-menu-button-closed2"/>
     </toolbaritem>
--- a/src/browser/base/content/navigator-toolbox-js.patch
+++ b/src/browser/base/content/navigator-toolbox-js.patch
@@ -1,5 +1,5 @@
 diff --git a/browser/base/content/navigator-toolbox.js b/browser/base/content/navigator-toolbox.js
-index 64ded8fb2c08f1dbfec8fe08ab427a24b53f1169..69009d53d7242c26f777ac2e0bb1897ff27ad916 100644
+index 64ded8fb2c08f1dbfec8fe08ab427a24b53f1169..3434a833c4d1220554b4df6eeeed83f500c6f812 100644
 --- a/browser/base/content/navigator-toolbox.js
 +++ b/browser/base/content/navigator-toolbox.js
@@ -8,7 +8,7 @@
@@ -11,3 +11,19 @@ index 64ded8fb2c08f1dbfec8fe08ab427a24b53f1169..69009d53d7242c26f777ac2e0bb1897f
     const widgetOverflow = document.getElementById("widget-overflow");
 
     function onPopupShowing(event) {
+@@ -187,6 +187,7 @@ document.addEventListener(
+         #reload-button ,
+         #urlbar-go-button,
+         #reader-mode-button,
+        #zen-browser-tabs-wrapper,
+         #picture-in-picture-button,
+         #shopping-sidebar-button,
+         #urlbar-zoom-button,
+@@ -208,6 +209,7 @@ document.addEventListener(
+         case "vertical-tabs-newtab-button":
+         case "tabs-newtab-button":
+         case "new-tab-button":
+        case "zen-browser-tabs-wrapper":
+           gBrowser.handleNewTabMiddleClick(element, event);
+           break;
+ 
--- a/src/browser/base/content/zen-styles/zen-compact-mode.css
+++ b/src/browser/base/content/zen-styles/zen-compact-mode.css
@@ -241,14 +241,16 @@
          right 0.3s var(--zen-compact-mode-func);
        opacity: 1;

-        left: -1px;
-        :root[zen-right-side='true'] & {
-          right: -1px;
-          left: auto;
-        }
+        &:not([supress-primary-adjustment='true']) {
+          left: -1px;
+          :root[zen-right-side='true'] & {
+            right: -1px;
+            left: auto;
+          }

-        & #urlbar[open][zen-floating-urlbar='true'] {
-          --zen-urlbar-offset: 0px;
+          & #urlbar[open][zen-floating-urlbar='true'] {
+            --zen-urlbar-offset: 0px;
+          }
        }
      }
    }
--- a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
+++ b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
@@ -94,8 +94,8 @@
  #tracking-protection-icon,
  #tracking-protection-icon-box,
  #blocked-permissions-container > .blocked-permission-icon {
-    width: 12px;
-    height: 12px;
+    width: 14px;
+    height: 14px;
  }

  #identity-icon-box,
@@ -999,7 +999,7 @@
  }

  @media (-moz-bool-pref: 'zen.theme.essentials-favicon-bg') {
-    &[selected] .tab-background {
+    &[visuallyselected] .tab-background {
      &::after {
        content: "";
        inset: -50%;
@@ -1027,7 +1027,7 @@
      }
    }

-    &[selected]:hover .tab-background::before {
+    &[visuallyselected]:hover .tab-background::before {
      background: light-dark(rgba(255, 255, 255, 0.80), rgba(68, 64, 64, 0.80));
    }
  }
--- a/src/browser/base/content/zen-styles/zen-urlbar.css
+++ b/src/browser/base/content/zen-styles/zen-urlbar.css
@@ -129,7 +129,7 @@
 :root[zen-single-toolbar='true'] {
  .urlbar-page-action:not([open]),
  #tracking-protection-icon-container {
-    margin-inline-end: calc(-16px - 2 * var(--urlbar-icon-padding)) !important;
+    margin-inline-end: calc(-14px - 2 * var(--urlbar-icon-padding)) !important;
    opacity: 0;
    transition: all 0.1s ease;
  }
@@ -243,7 +243,7 @@ button.popup-notification-dropmarker {
  }

  #userContext-indicator {
-    margin-inline-end: 2px;
+    margin-inline-end: 4px;
  }

  #urlbar:hover:not([breakout-extend='true']) #userContext-icons {
@@ -288,7 +288,7 @@ button.popup-notification-dropmarker {
 #urlbar .urlbar-page-action,
 #urlbar #tracking-protection-icon-container,
 #urlbar:not([breakout-extend='true']) #identity-box:is(:not(.chromeUI), [pageproxystate='invalid']) #identity-icon-box {
-  border-radius: 10px !important;
+  border-radius: 8px !important;
 }

 /* Extensions or similar */
--- a/src/browser/base/zen-components/ZenCompactMode.mjs
+++ b/src/browser/base/zen-components/ZenCompactMode.mjs
@@ -144,6 +144,7 @@ var gZenCompactModeManager = {
  getAndApplySidebarWidth() {
    let sidebarWidth = this.sidebar.getBoundingClientRect().width;
    if (sidebarWidth > 1) {
+      gZenUIManager.restoreScrollbarState();
      this.sidebar.style.setProperty('--zen-sidebar-width', `${sidebarWidth}px`);
    }
    return sidebarWidth;
--- a/src/browser/base/zen-components/ZenPinnedTabManager.mjs
+++ b/src/browser/base/zen-components/ZenPinnedTabManager.mjs
@@ -647,7 +647,8 @@
    }

    moveToAnotherTabContainerIfNecessary(event, draggedTab) {
-      const pinnedTabsTarget = event.target.closest('#vertical-pinned-tabs-container');
+      const pinnedTabsTarget =
+        event.target.closest('#vertical-pinned-tabs-container') || event.target.closest('#zen-current-workspace-indicator');
      const essentialTabsTarget = event.target.closest('#zen-essentials-container');
      const tabsTarget = event.target.closest('#tabbrowser-arrowscrollbox');

@@ -716,6 +717,7 @@
    removeTabContainersDragoverClass() {
      this.dragIndicator.remove();
      this._dragIndicator = null;
+      document.getElementById('zen-current-workspace-indicator').removeAttribute('open');
    }

    get dragIndicator() {
@@ -736,6 +738,12 @@
      const essentialTabsTarget = event.target.closest('#zen-essentials-container');
      const tabsTarget = event.target.closest('#tabbrowser-arrowscrollbox');
      const targetTab = event.target.closest('.tabbrowser-tab');
+      if (event.target.closest('#zen-current-workspace-indicator')) {
+        this.removeTabContainersDragoverClass();
+        event.target.setAttribute('open', true);
+      } else {
+        document.getElementById('zen-current-workspace-indicator').removeAttribute('open');
+      }

      // If there's no valid target tab, nothing to do
      if (!targetTab) {
--- a/src/browser/base/zen-components/ZenUIMigration.mjs
+++ b/src/browser/base/zen-components/ZenUIMigration.mjs
@@ -9,7 +9,6 @@ class ZenUIMigration {
  MIGRATION_VERSION = 1;

  init(isNewProfile, win) {
-    console.log(isNewProfile, win);
    if (!isNewProfile) {
      this._migrate(win);
    }
--- a/src/browser/components/tabbrowser/content/tabs-js.patch
+++ b/src/browser/components/tabbrowser/content/tabs-js.patch
@@ -1,5 +1,5 @@
 diff --git a/browser/components/tabbrowser/content/tabs.js b/browser/components/tabbrowser/content/tabs.js
-index 8aeb244ffca9f48661805f5b7d860b5896055562..d5ac2cf891ec928bec4f95fd5ff0ee8d91294f78 100644
+index 8aeb244ffca9f48661805f5b7d860b5896055562..bffa5e0be62e73f380adf558c5df3441bde7b604 100644
 --- a/browser/components/tabbrowser/content/tabs.js
 +++ b/browser/components/tabbrowser/content/tabs.js
@@ -94,7 +94,7 @@
@@ -28,17 +28,6 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..d5ac2cf891ec928bec4f95fd5ff0ee8d
         }
 
         /* Protects from close-tab-button errant doubleclick:
-@@ -455,8 +456,8 @@
-           let winUtils = window.windowUtils;
-           let endOfTab =
-             winUtils.getBoundsWithoutFlushing(lastTab)[
-              (this.verticalMode && "bottom") ||
-                (this.#rtlMode ? "left" : "right")
-+            (this.verticalMode && "bottom") ||
-+            (this.#rtlMode ? "left" : "right")
-             ];
-           if (
-             (this.verticalMode && event.clientY > endOfTab) ||
@@ -659,7 +660,7 @@
       if (this.#isContainerVerticalPinnedExpanded(tab)) {
         // In expanded vertical mode, the max number of pinned tabs per row is dynamic
@@ -89,7 +78,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..d5ac2cf891ec928bec4f95fd5ff0ee8d
                 tab.removeAttribute("tabdrop-samewindow");
 
 -                this._finishAnimateTabMove();
-+                this._finishAnimateTabMove(true);
+              this._finishAnimateTabMove(true);
                 if (dropIndex !== false) {
                   gBrowser.moveTabTo(tab, dropIndex);
                   if (!directionForward) {
@@ -98,19 +87,10 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..d5ac2cf891ec928bec4f95fd5ff0ee8d
                 gBrowser.syncThrobberAnimations(tab);
               };
 -              if (gReduceMotion) {
-+              if (gReduceMotion || true) {
+            if (gReduceMotion || true) {
                 postTransitionCleanup();
               } else {
                 let onTransitionEnd = transitionendEvent => {
-@@ -1191,7 +1203,7 @@
-         let links;
-         try {
-           links = browserDragAndDrop.dropLinks(event, true);
-        } catch (ex) {}
-+        } catch (ex) { }
- 
-         if (!links || links.length === 0) {
-           return;
@@ -1263,7 +1275,8 @@
       if (
         dt.mozUserCancelled ||
@@ -121,34 +101,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..d5ac2cf891ec928bec4f95fd5ff0ee8d
       ) {
         delete draggedTab._dragData;
         return;
-@@ -1346,7 +1359,7 @@
-       var left = Math.min(
-         Math.max(
-           event.screenX * ourCssToDesktopScale -
-            draggedTab._dragData.offsetX * screenCssToDesktopScale,
-+          draggedTab._dragData.offsetX * screenCssToDesktopScale,
-           availX
-         ),
-         availX + availWidth - winWidth
-@@ -1354,7 +1367,7 @@
-       var top = Math.min(
-         Math.max(
-           event.screenY * ourCssToDesktopScale -
-            draggedTab._dragData.offsetY * screenCssToDesktopScale,
-+          draggedTab._dragData.offsetY * screenCssToDesktopScale,
-           availY
-         ),
-         availY + availHeight - winHeight
-@@ -1467,7 +1480,7 @@
-       // Normal tab title is used also in the permanent private browsing mode.
-       const l10nId =
-         PrivateBrowsingUtils.isWindowPrivate(window) &&
-        !Services.prefs.getBoolPref("browser.privatebrowsing.autostart")
-+          !Services.prefs.getBoolPref("browser.privatebrowsing.autostart")
-           ? "tabbrowser-empty-private-tab-title"
-           : "tabbrowser-empty-tab-title";
-       return gBrowser.tabLocalization.formatValueSync(l10nId);
-@@ -1512,9 +1525,18 @@
+@@ -1512,9 +1525,19 @@
       }
 
       this.#allTabs = [
@@ -156,19 +109,20 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..d5ac2cf891ec928bec4f95fd5ff0ee8d
 +        ...document.getElementById("zen-essentials-container").children, ...this.verticalPinnedTabsContainer.children,
         ...children,
       ];
+      const lastPinnedTabIdx = gBrowser.pinnedTabCount;
 +      for (let i = 0; i < this.#allTabs.length; i++) {
 +        // add glance tabs (tabs inside tabs) to the list
 +        const glanceTab = this.#allTabs[i].querySelector("tab[zen-glance-tab]");
 +        if (glanceTab) {
 +          // insert right after the parent tab
-+          this.#allTabs.splice(i + 1, 0, glanceTab);
+          this.#allTabs.splice(Math.min(i + 1, lastPinnedTabIdx), 0, glanceTab);
 +          i++;
 +        }
 +      }
       return this.#allTabs;
     }
 
-@@ -1593,6 +1615,7 @@
+@@ -1593,6 +1616,7 @@
       }
 
       this.#focusableItems = [
@@ -176,7 +130,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..d5ac2cf891ec928bec4f95fd5ff0ee8d
         ...verticalPinnedTabsContainer.children,
         ...focusableItems,
       ];
-@@ -1617,8 +1640,8 @@
+@@ -1617,8 +1641,8 @@
     #isContainerVerticalPinnedExpanded(tab) {
       return (
         this.verticalMode &&
@@ -187,16 +141,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..d5ac2cf891ec928bec4f95fd5ff0ee8d
       );
     }
 
-@@ -1684,7 +1707,7 @@
-       // The height we got may be incorrect if a flush is pending so re-check it after
-       // a flush completes.
-       window
-        .promiseDocumentFlushed(() => {})
-+        .promiseDocumentFlushed(() => { })
-         .then(
-           () => {
-             height =
-@@ -1816,7 +1839,7 @@
+@@ -1816,7 +1840,7 @@
           let rect = ele => {
             return window.windowUtils.getBoundsWithoutFlushing(ele);
           };
@@ -205,7 +150,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..d5ac2cf891ec928bec4f95fd5ff0ee8d
           if (tab && rect(tab).width <= this._tabClipWidth) {
             this.setAttribute("closebuttons", "activetab");
           } else {
-@@ -1832,6 +1855,7 @@
+@@ -1832,6 +1856,7 @@
         this.arrowScrollbox.ensureElementIsVisible(selectedTab, aInstant);
       }
 
@@ -213,7 +158,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..d5ac2cf891ec928bec4f95fd5ff0ee8d
       selectedTab._notselectedsinceload = false;
     }
 
-@@ -1843,7 +1867,7 @@
+@@ -1843,7 +1868,7 @@
         return;
       }
 
@@ -222,7 +167,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..d5ac2cf891ec928bec4f95fd5ff0ee8d
       if (!tabs.length) {
         return;
       }
-@@ -1879,7 +1903,7 @@
+@@ -1879,7 +1904,7 @@
         if (isEndTab && !this._hasTabTempMaxWidth) {
           return;
         }
@@ -231,7 +176,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..d5ac2cf891ec928bec4f95fd5ff0ee8d
         // Force tabs to stay the same width, unless we're closing the last tab,
         // which case we need to let them expand just enough so that the overall
         // tabbar width is the same.
-@@ -1894,7 +1918,7 @@
+@@ -1894,7 +1919,7 @@
         let tabsToReset = [];
         for (let i = numPinned; i < tabs.length; i++) {
           let tab = tabs[i];
@@ -240,23 +185,14 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..d5ac2cf891ec928bec4f95fd5ff0ee8d
           if (!isEndTab) {
             // keep tabs the same width
             tab.style.transition = "none";
-@@ -1904,7 +1928,7 @@
- 
-         if (tabsToReset.length) {
-           window
-            .promiseDocumentFlushed(() => {})
-+            .promiseDocumentFlushed(() => { })
-             .then(() => {
-               window.requestAnimationFrame(() => {
-                 for (let tab of tabsToReset) {
-@@ -1965,11 +1989,11 @@
+@@ -1965,11 +1990,11 @@
       );
       let numPinned = gBrowser.pinnedTabCount;
 
 -      if (gBrowser.pinnedTabCount !== verticalTabsContainer.children.length) {
 -        let tabs = this.visibleTabs;
 +      if (gBrowser.pinnedTabCount !== (verticalTabsContainer.children.length + document.getElementById("zen-essentials-container").children.length)) {
-+        let tabs = this.visibleTabs.filter(tab => !tab.hasAttribute("zen-glance-tab"));
+        let tabs = this.allTabs.filter(tab => !tab.hasAttribute("zen-glance-tab"));
         for (let i = 0; i < numPinned; i++) {
           tabs[i].style.marginInlineStart = "";
 -          verticalTabsContainer.appendChild(tabs[i]);
@@ -264,7 +200,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..d5ac2cf891ec928bec4f95fd5ff0ee8d
         }
       }
 
-@@ -1992,8 +2016,8 @@
+@@ -1992,8 +2017,8 @@
     }
 
     _positionPinnedTabs() {
@@ -275,7 +211,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..d5ac2cf891ec928bec4f95fd5ff0ee8d
       let absPositionHorizontalTabs =
         this.overflowing && tabs.length > numPinned && numPinned > 0;
 
-@@ -2074,7 +2098,7 @@
+@@ -2074,7 +2099,7 @@
         return;
       }
 
@@ -284,7 +220,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..d5ac2cf891ec928bec4f95fd5ff0ee8d
 
       let directionX = screenX > dragData.animLastScreenX;
       let directionY = screenY > dragData.animLastScreenY;
-@@ -2257,9 +2281,9 @@
+@@ -2257,9 +2282,9 @@
       }
 
       let pinned = draggedTab.pinned;
@@ -297,27 +233,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..d5ac2cf891ec928bec4f95fd5ff0ee8d
         pinned ? numPinned : undefined
       );
 
-@@ -2367,8 +2391,8 @@
-       };
-       let moveOverThreshold = gBrowser._tabGroupsEnabled
-         ? Services.prefs.getIntPref(
-            "browser.tabs.dragdrop.moveOverThresholdPercent"
-          ) / 100
-+          "browser.tabs.dragdrop.moveOverThresholdPercent"
-+        ) / 100
-         : 0.5;
-       moveOverThreshold = Math.min(1, Math.max(0, moveOverThreshold));
-       let newIndex = getDragOverIndex(moveOverThreshold);
-@@ -2420,7 +2444,7 @@
-         if (
-           groupDropIndex in this.allTabs &&
-           this.allTabs[groupDropIndex] ==
-            this.allTabs[groupDropIndex].group?.tabs.at(-1)
-+          this.allTabs[groupDropIndex].group?.tabs.at(-1)
-         ) {
-           dragData.groupDropIndex = groupDropIndex;
-           dragData.groupDropAction = GROUP_DROP_ACTION_APPEND;
-@@ -2502,8 +2526,9 @@
+@@ -2502,8 +2527,9 @@
       );
     }
 
@@ -329,27 +245,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..d5ac2cf891ec928bec4f95fd5ff0ee8d
         return;
       }
 
-@@ -2552,7 +2577,7 @@
- 
-         let movingTabSize =
-           movingTab.getBoundingClientRect()[
-            this.verticalMode ? "height" : "width"
-+          this.verticalMode ? "height" : "width"
-           ];
-         let shift = (movingTabNewIndex - movingTabOldIndex) * movingTabSize;
- 
-@@ -2659,18 +2684,17 @@
-           let translatePos =
-             (this.#rtlMode ? -1 : 1) *
-             t._moveTogetherSelectedTabsData.translatePos;
-          t.style.transform = `translate${
-            this.verticalMode ? "Y" : "X"
-          }(${translatePos}px)`;
-+          t.style.transform = `translate${this.verticalMode ? "Y" : "X"
-+            }(${translatePos}px)`;
-         }
-       }
- 
+@@ -2668,9 +2694,9 @@
       function newIndex(aTab, index) {
         // Don't allow mixing pinned and unpinned tabs.
         if (aTab.pinned) {
@@ -361,7 +257,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..d5ac2cf891ec928bec4f95fd5ff0ee8d
       }
     }
 
-@@ -2754,7 +2778,7 @@
+@@ -2754,7 +2780,7 @@
     }
 
     _notifyBackgroundTab(aTab) {
@@ -370,7 +266,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..d5ac2cf891ec928bec4f95fd5ff0ee8d
         return;
       }
 
-@@ -2772,12 +2796,14 @@
+@@ -2772,12 +2798,14 @@
               selectedTab = {
                 left: selectedTab.left,
                 right: selectedTab.right,
@@ -386,7 +282,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..d5ac2cf891ec928bec4f95fd5ff0ee8d
               selectedTab,
             ];
           })
-@@ -2794,8 +2820,11 @@
+@@ -2794,8 +2822,11 @@
             delete this._lastTabToScrollIntoView;
             // Is the new tab already completely visible?
             if (
@@ -394,13 +290,13 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..d5ac2cf891ec928bec4f95fd5ff0ee8d
 -              tabRect.right <= scrollRect.right
 +              this.verticalMode
 +                ? scrollRect.top <= tabRect.top &&
-+                tabRect.bottom <= scrollRect.bottom
+                  tabRect.bottom <= scrollRect.bottom
 +                : scrollRect.left <= tabRect.left &&
-+                tabRect.right <= scrollRect.right
+                  tabRect.right <= scrollRect.right
             ) {
               return;
             }
-@@ -2803,21 +2832,29 @@
+@@ -2803,21 +2834,29 @@
             if (this.arrowScrollbox.smoothScroll) {
               // Can we make both the new tab and the selected tab completely visible?
               if (
@@ -411,13 +307,13 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..d5ac2cf891ec928bec4f95fd5ff0ee8d
 -                ) <= scrollRect.width
 +                !selectedRect || (this.verticalMode
 +                  ? Math.max(
-+                    tabRect.bottom - selectedRect.top,
-+                    selectedRect.bottom - tabRect.top
-+                  ) <= scrollRect.height
+                      tabRect.bottom - selectedRect.top,
+                      selectedRect.bottom - tabRect.top
+                    ) <= scrollRect.height
 +                  : Math.max(
-+                    tabRect.right - selectedRect.left,
-+                    selectedRect.right - tabRect.left
-+                  ) <= scrollRect.width)
+                      tabRect.right - selectedRect.left,
+                      selectedRect.right - tabRect.left
+                    ) <= scrollRect.width)
               ) {
                 this.arrowScrollbox.ensureElementIsVisible(tabToScrollIntoView);
                 return;
@@ -440,12 +336,3 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..d5ac2cf891ec928bec4f95fd5ff0ee8d
             }
 
             if (!this._animateElement.hasAttribute("highlight")) {
-@@ -2904,7 +2941,7 @@
-           sourceNode.localName == "tab" &&
-           sourceNode.ownerGlobal.isChromeWindow &&
-           sourceNode.ownerDocument.documentElement.getAttribute("windowtype") ==
-            "navigator:browser" &&
-+          "navigator:browser" &&
-           sourceNode.ownerGlobal.gBrowser.tabContainer == sourceNode.container
-         ) {
-           // Do not allow transfering a private tab to a non-private window
--- a/src/browser/components/urlbar/UrlbarInput-sys-mjs.patch
+++ b/src/browser/components/urlbar/UrlbarInput-sys-mjs.patch
@@ -1,5 +1,5 @@
 diff --git a/browser/components/urlbar/UrlbarInput.sys.mjs b/browser/components/urlbar/UrlbarInput.sys.mjs
-index 50968dc04b527438acf30151f0c2e92f8b45097c..f8e8e9c06613c5d5f33333fd9e128a726c67e873 100644
+index 50968dc04b527438acf30151f0c2e92f8b45097c..2948efd18fb1ee609695acd5b5b0211ce209ff1a 100644
 --- a/browser/components/urlbar/UrlbarInput.sys.mjs
 +++ b/browser/components/urlbar/UrlbarInput.sys.mjs
@@ -67,6 +67,13 @@ XPCOMUtils.defineLazyPreferenceGetter(
@@ -16,7 +16,19 @@ index 50968dc04b527438acf30151f0c2e92f8b45097c..f8e8e9c06613c5d5f33333fd9e128a72
 const DEFAULT_FORM_HISTORY_NAME = "searchbar-history";
 const SEARCH_BUTTON_CLASS = "urlbar-search-button";
 
-@@ -424,6 +431,10 @@ export class UrlbarInput {
+@@ -348,7 +355,11 @@ export class UrlbarInput {
+     // See _on_select().  HTMLInputElement.select() dispatches a "select"
+     // event but does not set the primary selection.
+     this._suppressPrimaryAdjustment = true;
+    this.document.getElementById("navigator-toolbox").setAttribute("supress-primary-adjustment", true);
+     this.inputField.select();
+    this.document.ownerGlobal.setTimeout(() => {
+      this.document.getElementById("navigator-toolbox").removeAttribute("supress-primary-adjustment");
+    }, 100);
+     this._suppressPrimaryAdjustment = false;
+   }
+ 
+@@ -424,6 +435,10 @@ export class UrlbarInput {
     hideSearchTerms = false,
     isSameDocument = false
   ) {
@@ -27,7 +39,20 @@ index 50968dc04b527438acf30151f0c2e92f8b45097c..f8e8e9c06613c5d5f33333fd9e128a72
     // We only need to update the searchModeUI on tab switch conditionally
     // as we only persist searchMode with ScotchBonnet enabled.
     if (
-@@ -1087,7 +1098,11 @@ export class UrlbarInput {
+@@ -697,8 +712,11 @@ export class UrlbarInput {
+         return;
+       }
+     }
+-
+    this.document.getElementById("navigator-toolbox").setAttribute("supress-primary-adjustment", true);
+     this.handleNavigation({ event });
+    this.document.ownerGlobal.setTimeout(() => {
+      this.document.getElementById("navigator-toolbox").removeAttribute("supress-primary-adjustment");
+    }, 200);
+   }
+ 
+   /**
+@@ -1087,11 +1105,14 @@ export class UrlbarInput {
     }
 
     if (!result.payload.providesSearchMode) {
@@ -40,7 +65,11 @@ index 50968dc04b527438acf30151f0c2e92f8b45097c..f8e8e9c06613c5d5f33333fd9e128a72
     }
 
     this.controller.recordSelectedResult(event, result);
-@@ -2144,6 +2159,11 @@ export class UrlbarInput {
+-
+     if (isCanonized) {
+       this.controller.engagementEvent.record(event, {
+         result,
+@@ -2144,6 +2165,11 @@ export class UrlbarInput {
 
     this.setAttribute("breakout-extend", "true");
 
@@ -52,7 +81,7 @@ index 50968dc04b527438acf30151f0c2e92f8b45097c..f8e8e9c06613c5d5f33333fd9e128a72
     // Enable the animation only after the first extend call to ensure it
     // doesn't run when opening a new window.
     if (!this.hasAttribute("breakout-extend-animate")) {
-@@ -2163,6 +2183,11 @@ export class UrlbarInput {
+@@ -2163,6 +2189,11 @@ export class UrlbarInput {
       return;
     }
 
@@ -64,7 +93,7 @@ index 50968dc04b527438acf30151f0c2e92f8b45097c..f8e8e9c06613c5d5f33333fd9e128a72
     this.removeAttribute("breakout-extend");
     this.#updateTextboxPosition();
   }
-@@ -3305,7 +3330,7 @@ export class UrlbarInput {
+@@ -3305,7 +3336,7 @@ export class UrlbarInput {
     } else {
       where = lazy.BrowserUtils.whereToOpenLink(event, false, false);
     }
@@ -73,7 +102,7 @@ index 50968dc04b527438acf30151f0c2e92f8b45097c..f8e8e9c06613c5d5f33333fd9e128a72
       if (where == "current") {
         where = "tab";
       } else if (where == "tab") {
-@@ -3859,6 +3884,11 @@ export class UrlbarInput {
+@@ -3859,6 +3890,11 @@ export class UrlbarInput {
   }
 
   _on_click(event) {
@@ -85,7 +114,7 @@ index 50968dc04b527438acf30151f0c2e92f8b45097c..f8e8e9c06613c5d5f33333fd9e128a72
     if (
       event.target == this.inputField ||
       event.target == this._inputContainer ||
-@@ -3930,7 +3960,7 @@ export class UrlbarInput {
+@@ -3930,7 +3966,7 @@ export class UrlbarInput {
       }
     }
 
@@ -94,7 +123,7 @@ index 50968dc04b527438acf30151f0c2e92f8b45097c..f8e8e9c06613c5d5f33333fd9e128a72
       this.view.autoOpen({ event });
     } else {
       if (this._untrimOnFocusAfterKeydown) {
-@@ -3970,9 +4000,12 @@ export class UrlbarInput {
+@@ -3970,9 +4006,12 @@ export class UrlbarInput {
   }
 
   _on_mousedown(event) {
@@ -108,7 +137,7 @@ index 50968dc04b527438acf30151f0c2e92f8b45097c..f8e8e9c06613c5d5f33333fd9e128a72
 
         if (
           event.target != this.inputField &&
-@@ -3982,8 +4015,8 @@ export class UrlbarInput {
+@@ -3982,8 +4021,8 @@ export class UrlbarInput {
           break;
         }
 
--- a/src/browser/themes/shared/zen-icons/expand-sidebar.svg
+++ b/src/browser/themes/shared/zen-icons/expand-sidebar.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><line x1="6.25" y1="12.5" x2="6.25" y2="15.25" data-color="color-2"></line><line x1="6.25" y1="2.75" x2="6.25" y2="5.5" data-color="color-2"></line><polyline points="8.75 6.5 6.25 9 8.75 11.5" data-color="color-2"></polyline><line x1="6.25" y1="9" x2="12.75" y2="9" data-color="color-2"></line><rect x="1.75" y="2.75" width="14.5" height="12.5" rx="2" ry="2" transform="translate(18 18) rotate(180)"></rect></g></svg>
--- a/src/browser/themes/shared/zen-icons/icons.css
+++ b/src/browser/themes/shared/zen-icons/icons.css
@@ -68,11 +68,14 @@
 }

 #sidebar-button:-moz-locale-dir(ltr):not([positionend]),
-#sidebar-button:-moz-locale-dir(rtl)[positionend],
-#zen-sidepanel-button {
+#sidebar-button:-moz-locale-dir(rtl)[positionend] {
  list-style-image: url('chrome://browser/skin/sidebars.svg') !important;
 }

+#zen-sidepanel-button {
+  list-style-image: url('sidebar.svg');
+}
+
 #downloads-button,
 #downloads-indicator-anchor,
 #appMenu-downloads-button,
@@ -390,7 +393,7 @@
 }

 #zen-expand-sidebar-button {
-  list-style-image: url('sidebar.svg') !important;
+  list-style-image: url('expand-sidebar.svg') !important;
 }

 .panel-header > .subviewbutton-back {
@@ -931,7 +934,7 @@ menuitem[contexttype='fullscreen'][label*='Exit'] {
 }

 #zen-context-menu-compact-mode {
-  --menu-image: url('chrome://browser/skin/sidebars.svg');
+  --menu-image: url('sidebar.svg');
 }

 #context_bookmarkTab,
--- a/src/browser/themes/shared/zen-icons/jar.inc.mn
+++ b/src/browser/themes/shared/zen-icons/jar.inc.mn
@@ -39,6 +39,7 @@
  skin/classic/browser/zen-icons/edit.svg                      (../shared/zen-icons/edit.svg) 
  skin/classic/browser/zen-icons/essential-add.svg                      (../shared/zen-icons/essential-add.svg) 
  skin/classic/browser/zen-icons/essential-remove.svg                      (../shared/zen-icons/essential-remove.svg) 
+  skin/classic/browser/zen-icons/expand-sidebar.svg                      (../shared/zen-icons/expand-sidebar.svg) 
  skin/classic/browser/zen-icons/ext-link.svg                      (../shared/zen-icons/ext-link.svg) 
  skin/classic/browser/zen-icons/extension-blocked.svg                      (../shared/zen-icons/extension-blocked.svg) 
  skin/classic/browser/zen-icons/extension.svg                      (../shared/zen-icons/extension.svg) 
--- a/src/browser/themes/shared/zen-icons/mail.svg
+++ b/src/browser/themes/shared/zen-icons/mail.svg
@@ -6,4 +6,3 @@
 <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-opacity="context-fill-opacity">
  <path d="M2.5 1A2.5 2.5 0 0 0 0 3.5v8A2.5 2.5 0 0 0 2.5 14h11a2.5 2.5 0 0 0 2.5-2.5v-8A2.5 2.5 0 0 0 13.5 1h-11zm0 1h11A1.5 1.5 0 0 1 15 3.5v.3L8 7.92 1 3.803V3.5A1.5 1.5 0 0 1 2.5 2zM15 4.961V11.5a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 1 11.5V4.963l6.746 3.969.082.037a.5.5 0 0 0 .426-.037L15 4.961z"/>
 </svg>
-a<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M1.75,5.75l6.767,3.733c.301,.166,.665,.166,.966,0l6.767-3.733" data-color="color-2"></path><rect x="1.75" y="3.25" width="14.5" height="11.5" rx="2" ry="2" transform="translate(18 18) rotate(180)"></rect></g></svg>
--- a/src/browser/themes/shared/zen-icons/sidebar.svg
+++ b/src/browser/themes/shared/zen-icons/sidebar.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><line x1="8.25" y1="2.75" x2="8.25" y2="15.25" data-color="color-2"></line><rect x="1.75" y="2.75" width="14.5" height="12.5" rx="2" ry="2" transform="translate(18 18) rotate(180)"></rect><line x1="4.25" y1="6.25" x2="5.75" y2="6.25" data-color="color-2"></line><line x1="4.25" y1="9" x2="5.75" y2="9" data-color="color-2"></line><line x1="4.25" y1="11.75" x2="5.75" y2="11.75" data-color="color-2"></line></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><rect x="1.75" y="3.25" width="14.5" height="11.5" rx="2" ry="2"></rect><rect x="4.75" y="6.25" width="2" height="5.5" fill="currentColor" data-color="color-2"></rect></g></svg>
--- a/surfer.json
+++ b/surfer.json
@@ -19,7 +19,7 @@
      "brandShortName": "Zen",
      "brandFullName": "Zen Browser",
      "release": {
-        "displayVersion": "1.7.5b",
+        "displayVersion": "1.7.6b",
        "github": {
          "repo": "zen-browser/desktop"
        },
@@ -39,7 +39,7 @@
      "brandShortName": "Zen",
      "brandFullName": "Zen Twilight",
      "release": {
-        "displayVersion": "1.7.6t",
+        "displayVersion": "1.7.7t",
        "github": {
          "repo": "zen-browser/desktop"
        }
@@ -53,4 +53,4 @@
    "licenseType": "MPL-2.0"
  },
  "updateHostname": "updates.zen-browser.app"
-}
+}
Author	SHA1	Message	Date
mr. M	06a03cd4ca	Refactor tab management logic to improve visibility of pinned tabs and enhance tab filtering	2025-02-08 00:11:06 +01:00
mr. M	bf6f0b19fd	Update sidebar and menu icons for improved visual consistency	2025-02-07 23:40:31 +01:00
mr. M	da04a7a629	Enhance tab management by allowing drag-and-drop functionality with the workspace indicator and adjust URL bar primary adjustment timing	2025-02-07 23:36:07 +01:00
mr. M	d16ae38b28	Update URL bar behavior and version numbers in surfer.json	2025-02-07 23:00:06 +01:00
mr. M	f0976bc582	Implement scrollbar state management and adjust overflowing behavior in Zen UI components	2025-02-07 22:46:53 +01:00
mr. M	527b8a39f8	Enhance URL bar behavior by adjusting primary selection suppression and refining CSS styles for compact mode	2025-02-07 22:23:06 +01:00
mr. M	64cadfe37a	Adjust margin styles for URL bar elements to improve layout consistency	2025-02-07 22:13:37 +01:00
mr. M	5527aaebe9	Refactor tab selection styles and remove debug log from ZenUIMigration	2025-02-07 21:08:44 +01:00
mr. M	8dfffc6ac0	Merge branch 'dev' of https://github.com/zen-browser/desktop into dev	2025-02-07 19:51:05 +01:00
mr. M	302331bc7d	Fixed tabs appearing on the pinned tab container	2025-02-07 19:48:45 +01:00
mr. M	d2477b5f8a	Fixed middle clicks on the sidebar not opening a new tab	2025-02-07 19:30:51 +01:00
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><line x1="6.25" y1="12.5" x2="6.25" y2="15.25" data-color="color-2"></line><line x1="6.25" y1="2.75" x2="6.25" y2="5.5" data-color="color-2"></line><polyline points="8.75 6.5 6.25 9 8.75 11.5" data-color="color-2"></polyline><line x1="6.25" y1="9" x2="12.75" y2="9" data-color="color-2"></line><rect x="1.75" y="2.75" width="14.5" height="12.5" rx="2" ry="2" transform="translate(18 18) rotate(180)"></rect></g></svg>