Merge branch 'dev' into feature/tab-rename

zen-browser · Feb 7, 2025 · 5230665 · 5230665
2 parents 8f1b772 + d16ae38
commit 5230665
Show file tree

Hide file tree

Showing 26 changed files with 2,144 additions and 127 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/browser/base/content/ZenStartup.mjs b/src/browser/base/content/ZenStartup.mjs
@@ -33,8 +33,6 @@
 
         this._initSidebarScrolling();
 
-        gZenUIMigration.init();
-
         gZenCompactModeManager.init();
         ZenWorkspaces.init();
         gZenVerticalTabsManager.init();
@@ -103,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);

diff --git 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) {

diff --git a/src/browser/base/content/browser-init-js.patch b/src/browser/base/content/browser-init-js.patch
@@ -1,5 +1,5 @@
 diff --git a/browser/base/content/browser-init.js b/browser/base/content/browser-init.js
-index 63100defacf66c6b3232b9e0a783a5fd14e3a46a..eb7ed966628a595847b850f981418d425b78f14b 100644
+index 63100defacf66c6b3232b9e0a783a5fd14e3a46a..22b79b021ff0baab4dac602447a124308208c828 100644
 --- a/browser/base/content/browser-init.js
 +++ b/browser/base/content/browser-init.js
 @@ -162,13 +162,15 @@ var gBrowserInit = {
@@ -19,12 +19,11 @@ index 63100defacf66c6b3232b9e0a783a5fd14e3a46a..eb7ed966628a595847b850f981418d42
      if (isVerticalTabs) {
        // Show the vertical tabs toolbar
        setToolbarVisibility(
-@@ -287,6 +289,11 @@ var gBrowserInit = {
+@@ -287,6 +289,10 @@ var gBrowserInit = {
      gPrivateBrowsingUI.init();
      BrowserSearch.init();
      BrowserPageActions.init();
 +
-+Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenUIMigration.mjs", window);
 +Services.scriptloader.loadSubScript("chrome://browser/content/ZenStartup.mjs", window);
 +Services.scriptloader.loadSubScript("chrome://browser/content/zenThemeModifier.js", window);
 +

diff --git 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>

diff --git 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;
+
diff --git a/src/browser/base/content/zen-styles/zen-compact-mode.css b/src/browser/base/content/zen-styles/zen-compact-mode.css
@@ -42,11 +42,13 @@
         position: absolute;
         z-index: 10;
         transition:
-          left 0.25s ease,
-          right 0.25s ease;
+          left 0.15s ease,
+          right 0.15s ease,
+          opacity 1.5s ease;
         top: 0;
         bottom: var(--zen-element-separation);
         padding: 0 var(--zen-compact-float) !important;
+        opacity: 0;
 
         :root[zen-single-toolbar='true'] & {
           top: var(--zen-element-separation);
@@ -112,7 +114,11 @@
 
       & #urlbar[open][zen-floating-urlbar='true'] {
         --zen-urlbar-offset: var(--zen-sidebar-width);
-        transition: left 0.1s ease;
+        transition: left 0.05s ease;
+
+        #navigator-toolbox:has(&) {
+          opacity: 1;
+        }
       }
     }
 
@@ -233,15 +239,18 @@
         transition:
           left 0.3s var(--zen-compact-mode-func),
           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;
+          }
         }
       }
     }

diff --git 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));
     }
   }

diff --git a/src/browser/base/content/zen-styles/zen-urlbar.css b/src/browser/base/content/zen-styles/zen-urlbar.css
@@ -10,7 +10,7 @@
 }
 
 #urlbar {
-  --toolbarbutton-border-radius: 10px;
+  --toolbarbutton-border-radius: 8px;
   --urlbarView-separator-color: var(--zen-colors-border);
   --urlbarView-hover-background: var(--toolbarbutton-hover-background);
   --urlbarView-highlight-background: var(--toolbarbutton-hover-background);
@@ -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 */

diff --git a/src/browser/base/zen-components/ZenCompactMode.mjs b/src/browser/base/zen-components/ZenCompactMode.mjs
@@ -41,9 +41,15 @@ var gZenCompactModeManager = {
 
   get preference() {
     if (!document.documentElement.hasAttribute('zen-compact-mode')) {
-      document.documentElement.setAttribute(
-        'zen-compact-mode',
-        lazyCompactMode.mainAppWrapper.getAttribute('zen-compact-mode')
+      window.addEventListener(
+        'MozAfterPaint',
+        () => {
+          document.documentElement.setAttribute(
+            'zen-compact-mode',
+            lazyCompactMode.mainAppWrapper.getAttribute('zen-compact-mode')
+          );
+        },
+        { once: true }
       );
     }
     return lazyCompactMode.mainAppWrapper.getAttribute('zen-compact-mode') === 'true';
@@ -138,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;
@@ -155,6 +162,9 @@ var gZenCompactModeManager = {
     if (canAnimate) {
       this.sidebar.setAttribute('animate', 'true');
     }
+    this.sidebar.style.removeProperty('margin-right');
+    this.sidebar.style.removeProperty('margin-left');
+    this.sidebar.style.removeProperty('transform');
     window.requestAnimationFrame(() => {
       let sidebarWidth = this.getAndApplySidebarWidth();
       if (!canAnimate) {
@@ -187,10 +197,10 @@ var gZenCompactModeManager = {
             setTimeout(() => {
               this._animating = false;
               this.sidebar.style.removeProperty('transition');
-            }, 100);
+            });
           });
       } else if (canHideSidebar && !isCompactMode) {
-        document.getElementById('browser').style.overflow = 'hidden';
+        document.getElementById('browser').style.overflow = 'clip';
         if (this.sidebarIsOnRight) {
           this.sidebar.style.marginRight = `-${sidebarWidth}px`;
         } else {
@@ -201,7 +211,7 @@ var gZenCompactModeManager = {
             this.sidebar,
             this.sidebarIsOnRight
               ? {
-                  marginRight: 0,
+                  marginRight: [`-${sidebarWidth}px`, 0],
                   transform: ['translateX(100%)', 'translateX(0)'],
                 }
               : { marginLeft: 0 },

diff --git a/src/browser/base/zen-components/ZenGlanceManager.mjs b/src/browser/base/zen-components/ZenGlanceManager.mjs
@@ -67,7 +67,7 @@
     }
 
     getTabPosition(tab) {
-      return Math.max(gBrowser._numVisiblePinTabs, tab._tPos) + 1;
+      return Math.max(gBrowser.pinnedTabCount, tab._tPos) + 1;
     }
 
     createBrowserElement(url, currentTab, existingTab = null) {

diff --git a/src/browser/base/zen-components/ZenPinnedTabManager.mjs b/src/browser/base/zen-components/ZenPinnedTabManager.mjs
@@ -472,6 +472,9 @@
             this._resetTabToStoredState(selectedTab);
           }
           if (behavior.includes('unload')) {
+            if (selectedTab.hasAttribute('glance-id')) {
+              break;
+            }
             gBrowser.explicitUnloadTabs([selectedTab]);
             selectedTab.removeAttribute('linkedpanel');
           }