Add CSS Houdini squircle support and polyfill for enhanced styling

src/browser/base/content/ZenStartup.mjs

@@ -33,11 +33,15 @@
 
         this._initSidebarScrolling();
 
+        gZenUIMigration.init();
+
         gZenCompactModeManager.init();
         ZenWorkspaces.init();
         gZenVerticalTabsManager.init();
         gZenUIManager.init();
 
+        this._initSquircles();
+
         document.l10n.setAttributes(document.getElementById('tabs-newtab-button'), 'tabs-toolbar-new-tab');
       } catch (e) {
         console.error('ZenThemeModifier: Error initializing browser layout', e);
@@ -119,6 +123,12 @@
       gURLBar._initPasteAndGo();
       gURLBar._initStripOnShare();
     },
+
+    _initSquircles() {
+      CSS.paintWorklet.addModule(
+        `chrome://browser/content/zen-vendor/css-houdini-squircle.min.mjs`
+      );
+    }
   };
 
   ZenStartup.init();

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..22b79b021ff0baab4dac602447a124308208c828 100644
+index 63100defacf66c6b3232b9e0a783a5fd14e3a46a..eb7ed966628a595847b850f981418d425b78f14b 100644
 --- a/browser/base/content/browser-init.js
 +++ b/browser/base/content/browser-init.js
 @@ -162,13 +162,15 @@ var gBrowserInit = {
@@ -19,11 +19,12 @@ index 63100defacf66c6b3232b9e0a783a5fd14e3a46a..22b79b021ff0baab4dac602447a12430
      if (isVerticalTabs) {
        // Show the vertical tabs toolbar
        setToolbarVisibility(
-@@ -287,6 +289,10 @@ var gBrowserInit = {
+@@ -287,6 +289,11 @@ 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);
 +

src/browser/base/content/zen-assets.inc.xhtml

@@ -40,6 +40,7 @@
 <script src="chrome://browser/content/zen-components/ZenViewSplitter.mjs"/>
 <script src="chrome://browser/content/zen-components/ZenProfileDialogUI.mjs" />
 <script src="chrome://browser/content/zen-components/ZenGlanceManager.mjs" />
+<script src="chrome://browser/content/zen-vendor/css-paint-polyfill.min.mjs" />
 
 # Unimportant scripts
 <script src="chrome://browser/content/zen-components/ZenRices.mjs" />

src/browser/base/content/zen-assets.jar.inc.mn

@@ -75,4 +75,6 @@
 
         # JS Vendor
         content/browser/zen-vendor/tsparticles.confetti.bundle.min.js (content/zen-vendor/tsparticles.confetti.bundle.min.js)
-        content/browser/zen-vendor/motion.min.mjs                      (content/zen-vendor/motion.min.mjs)
+        content/browser/zen-vendor/motion.min.mjs                     (content/zen-vendor/motion.min.mjs)
+        content/browser/zen-vendor/css-houdini-squircle.min.mjs       (content/zen-vendor/css-houdini-squircle.min.mjs)
+        content/browser/zen-vendor/css-paint-polyfill.min.mjs         (content/zen-vendor/css-paint-polyfill.min.mjs)

src/browser/base/content/zen-styles/zen-compact-mode.css

@@ -42,13 +42,11 @@
         position: absolute;
         z-index: 10;
         transition:
-          left 0.15s ease,
-          right 0.15s ease,
-          opacity 1.5s ease;
+          left 0.25s ease,
+          right 0.25s 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);
@@ -114,11 +112,7 @@
 
       & #urlbar[open][zen-floating-urlbar='true'] {
         --zen-urlbar-offset: var(--zen-sidebar-width);
-        transition: left 0.05s ease;
-
-        #navigator-toolbox:has(&) {
-          opacity: 1;
-        }
+        transition: left 0.1s ease;
       }
     }
 
@@ -239,7 +233,6 @@
         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'] & {

src/browser/base/content/zen-styles/zen-urlbar.css

@@ -10,7 +10,7 @@
 }
 
 #urlbar {
-  --toolbarbutton-border-radius: 8px;
+  --toolbarbutton-border-radius: 10px;
   --urlbarView-separator-color: var(--zen-colors-border);
   --urlbarView-hover-background: var(--toolbarbutton-hover-background);
   --urlbarView-highlight-background: var(--toolbarbutton-hover-background);

src/browser/base/content/zen-vendor/css-houdini-squircle.min.mjs

@@ -0,0 +1 @@
+const drawSquircle=(ctx,geom,radii,smooth,lineWidth,color)=>{const defaultFill=color;const lineWidthOffset=lineWidth/2;ctx.beginPath();ctx.lineTo(radii[0],lineWidthOffset);ctx.lineTo(geom.width-radii[1],lineWidthOffset);ctx.bezierCurveTo(geom.width-radii[1]/smooth,lineWidthOffset,geom.width-lineWidthOffset,radii[1]/smooth,geom.width-lineWidthOffset,radii[1]);ctx.lineTo(geom.width-lineWidthOffset,geom.height-radii[2]);ctx.bezierCurveTo(geom.width-lineWidthOffset,geom.height-radii[2]/smooth,geom.width-radii[2]/smooth,geom.height-lineWidthOffset,geom.width-radii[2],geom.height-lineWidthOffset);ctx.lineTo(radii[3],geom.height-lineWidthOffset);ctx.bezierCurveTo(radii[3]/smooth,geom.height-lineWidthOffset,lineWidthOffset,geom.height-radii[3]/smooth,lineWidthOffset,geom.height-radii[3]);ctx.lineTo(lineWidthOffset,radii[0]);ctx.bezierCurveTo(lineWidthOffset,radii[0]/smooth,radii[0]/smooth,lineWidthOffset,radii[0],lineWidthOffset);ctx.closePath();if(lineWidth){ctx.strokeStyle=defaultFill;ctx.lineWidth=lineWidth;ctx.stroke()}else{ctx.fillStyle=defaultFill;ctx.fill()}};class SquircleClass{static get contextOptions(){return{alpha:true}}static get inputProperties(){return["--squircle-radius","--squircle-radius-top-left","--squircle-radius-top-right","--squircle-radius-bottom-right","--squircle-radius-bottom-left","--squircle-smooth","--squircle-outline","--squircle-fill"]}paint(ctx,geom,properties){const smoothRatio=10;const distanceRatio=1.8;const squircleSmooth=parseFloat(properties.get("--squircle-smooth")*smoothRatio);const individualRadiiProps=SquircleClass.inputProperties.slice(1,5);let squircleRadii=individualRadiiProps.map(prop=>{const value=properties.get(prop);return value?parseInt(value,10)*distanceRatio:NaN});let shorthand_R;if(squircleRadii.some(isNaN)){const radiusRegex=/([0-9]+[a-z%]*)/g;const radius_shorthand=properties.get("--squircle-radius").toString();const matches=radius_shorthand.match(radiusRegex);if(matches){shorthand_R=matches.map(val=>parseInt(val,10)*distanceRatio);while(shorthand_R.length<4){if(shorthand_R.length===1){shorthand_R.push(shorthand_R[0])}else if(shorthand_R.length===2){shorthand_R=[shorthand_R[0],shorthand_R[1],shorthand_R[0],shorthand_R[1]]}else if(shorthand_R.length===3){shorthand_R=[shorthand_R[0],shorthand_R[1],shorthand_R[2],shorthand_R[1]]}}}else{const defaultRadius=squircleRadii.every(isNaN)?8*distanceRatio:0;shorthand_R=[defaultRadius,defaultRadius,defaultRadius,defaultRadius]}}squircleRadii=squircleRadii.map((val,i)=>isNaN(val)?shorthand_R[i]:val);const squrcleOutline=parseFloat(properties.get("--squircle-outline"),10);const squrcleColor=properties.get("--squircle-fill").toString();const isSmooth=()=>{if(typeof properties.get("--squircle-smooth")[0]!=="undefined"){if(squircleSmooth===0){return 1}return squircleSmooth}else{return 10}};const isOutline=()=>{if(squrcleOutline){return squrcleOutline}else{return 0}};const isColor=()=>{if(squrcleColor){return squrcleColor}else{return"#f45"}};const maxRadius=Math.max(...squircleRadii);if(maxRadius<geom.width/2&&maxRadius<geom.height/2){drawSquircle(ctx,geom,squircleRadii,isSmooth(),isOutline(),isColor())}else{const minRadius=Math.min(geom.width/2,geom.height/2);drawSquircle(ctx,geom,squircleRadii.map(()=>minRadius),isSmooth(),isOutline(),isColor())}}}if(typeof registerPaint!=="undefined"){registerPaint("squircle",SquircleClass)}

src/browser/base/zen-components/ZenCompactMode.mjs

@@ -41,15 +41,9 @@ var gZenCompactModeManager = {
 
   get preference() {
     if (!document.documentElement.hasAttribute('zen-compact-mode')) {
-      window.addEventListener(
-        'MozAfterPaint',
-        () => {
-          document.documentElement.setAttribute(
-            'zen-compact-mode',
-            lazyCompactMode.mainAppWrapper.getAttribute('zen-compact-mode')
-          );
-        },
-        { once: true }
+      document.documentElement.setAttribute(
+        'zen-compact-mode',
+        lazyCompactMode.mainAppWrapper.getAttribute('zen-compact-mode')
       );
     }
     return lazyCompactMode.mainAppWrapper.getAttribute('zen-compact-mode') === 'true';
@@ -161,9 +155,6 @@ 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) {
@@ -196,10 +187,10 @@ var gZenCompactModeManager = {
             setTimeout(() => {
               this._animating = false;
               this.sidebar.style.removeProperty('transition');
-            });
+            }, 100);
           });
       } else if (canHideSidebar && !isCompactMode) {
-        document.getElementById('browser').style.overflow = 'clip';
+        document.getElementById('browser').style.overflow = 'hidden';
         if (this.sidebarIsOnRight) {
           this.sidebar.style.marginRight = `-${sidebarWidth}px`;
         } else {
@@ -210,7 +201,7 @@ var gZenCompactModeManager = {
             this.sidebar,
             this.sidebarIsOnRight
               ? {
-                  marginRight: [`-${sidebarWidth}px`, 0],
+                  marginRight: 0,
                   transform: ['translateX(100%)', 'translateX(0)'],
                 }
               : { marginLeft: 0 },

src/browser/base/zen-components/ZenGlanceManager.mjs

@@ -67,7 +67,7 @@
     }
 
     getTabPosition(tab) {
-      return Math.max(gBrowser.pinnedTabCount, tab._tPos) + 1;
+      return Math.max(gBrowser._numVisiblePinTabs, tab._tPos) + 1;
     }
 
     createBrowserElement(url, currentTab, existingTab = null) {

src/browser/base/zen-components/ZenPinnedTabManager.mjs

@@ -472,9 +472,6 @@
             this._resetTabToStoredState(selectedTab);
           }
           if (behavior.includes('unload')) {
-            if (selectedTab.hasAttribute('glance-id')) {
-              break;
-            }
             gBrowser.explicitUnloadTabs([selectedTab]);
             selectedTab.removeAttribute('linkedpanel');
           }

src/browser/base/zen-components/ZenUIMigration.mjs

@@ -1,64 +1,60 @@
-const lazy = {};
+{
+  const PREF_NAME = 'zen.migration.version';
+  const MIGRATION_VERSION = 1;
 
-ChromeUtils.defineESModuleGetters(lazy, {
-  BrowserWindowTracker: 'resource:///modules/BrowserWindowTracker.sys.mjs',
-});
-
-class ZenUIMigration {
-  PREF_NAME = 'zen.migration.version';
-  MIGRATION_VERSION = 1;
-
-  init(isNewProfile, win) {
-    console.log(isNewProfile, win);
-    if (!isNewProfile) {
-      this._migrate(win);
+  class ZenUIMigration {
+    init() {
+      if (Services.prefs.prefHasUserValue(PREF_NAME)) {
+        this._migrate();
+      }
+      this.clearVariables();
     }
-    this.clearVariables();
-  }
 
-  get _migrationVersion() {
-    return Services.prefs.getIntPref(this.PREF_NAME, 0);
-  }
-
-  set _migrationVersion(value) {
-    Services.prefs.setIntPref(this.PREF_NAME, value);
-  }
-
-  _migrate(win) {
-    if (this._migrationVersion < 1) {
-      this._migrateV1(win);
+    get _migrationVersion() {
+      return Services.prefs.getIntPref(PREF_NAME, 0);
     }
-  }
 
-  clearVariables() {
-    this._migrationVersion = this.MIGRATION_VERSION;
-  }
+    set _migrationVersion(value) {
+      Services.prefs.setIntPref(PREF_NAME, value);
+    }
 
-  async _migrateV1(win) {
-    // Introduction of the new URL bar, show a message to the user
-    const notification = win.gNotificationBox.appendNotification(
-      'zen-new-urlbar-notification',
-      {
-        label: { 'l10n-id': 'zen-new-urlbar-notification' },
-        image: 'chrome://browser/skin/notification-icons/persistent-storage-blocked.svg',
-        priority: win.gNotificationBox.PRIORITY_WARNING_HIGH,
-      },
-      [
+    _migrate() {
+      if (this._migrationVersion < 1) {
+        this._migrateV1();
+      }
+    }
+
+    clearVariables() {
+      this._migrationVersion = MIGRATION_VERSION;
+      window.gZenUIMigration = null;
+    }
+
+    async _migrateV1() {
+      // Introduction of the new URL bar, show a message to the user
+      const notification = gNotificationBox.appendNotification(
+        'zen-new-urlbar-notification',
         {
-          'l10n-id': 'zen-disable',
-          accessKey: 'D',
-          callback: () => {
-            Services.prefs.setBoolPref('zen.urlbar.replace-newtab', false);
+          label: { 'l10n-id': 'zen-new-urlbar-notification' },
+          image: 'chrome://browser/skin/notification-icons/persistent-storage-blocked.svg',
+          priority: gNotificationBox.PRIORITY_WARNING_HIGH,
+        },
+        [
+          {
+            'l10n-id': 'zen-disable',
+            accessKey: 'D',
+            callback: () => {
+              Services.prefs.setBoolPref('zen.urlbar.replace-newtab', false);
+            },
           },
-        },
-        {
-          link: 'https://docs.zen-browser.app/user-manual/urlbar/',
-          'l10n-id': 'zen-learn-more-text',
-        },
-      ]
-    );
-    notification.persistence = -1;
+          {
+            link: 'https://docs.zen-browser.app/user-manual/urlbar/',
+            'l10n-id': 'zen-learn-more-text',
+          },
+        ]
+      );
+      notification.persistence = -1;
+    }
   }
-}
 
-export var gZenUIMigration = new ZenUIMigration();
+  window.gZenUIMigration = new ZenUIMigration();
+}

src/browser/components/BrowserGlue-sys-mjs.patch

@@ -1,24 +1,8 @@
 diff --git a/browser/components/BrowserGlue.sys.mjs b/browser/components/BrowserGlue.sys.mjs
-index b888a753a7f23a9800fe04da51a4e6b898314ff2..35eea774e1ea4b1807ec65ebc767f423d81602bd 100644
+index 2de73e75bf98b21dde9ec05213a66f9e9039200f..04ab3ea4c47d674778e8965654867c4cf0f99161 100644
 --- a/browser/components/BrowserGlue.sys.mjs
 +++ b/browser/components/BrowserGlue.sys.mjs
-@@ -121,6 +121,7 @@ ChromeUtils.defineESModuleGetters(lazy, {
-   WindowsGPOParser: "resource://gre/modules/policies/WindowsGPOParser.sys.mjs",
-   clearTimeout: "resource://gre/modules/Timer.sys.mjs",
-   setTimeout: "resource://gre/modules/Timer.sys.mjs",
-+  gZenUIMigration: "chrome://browser/content/zen-components/ZenUIMigration.mjs",
- });
- 
- if (AppConstants.MOZ_UPDATER) {
-@@ -1951,6 +1952,7 @@ BrowserGlue.prototype = {
- 
-     lazy.UrlbarPrefs.updateFirefoxSuggestScenario();
- 
-+    lazy.gZenUIMigration.init(this._isNewProfile, aWindow);
-     // A channel for "remote troubleshooting" code...
-     let channel = new lazy.WebChannel(
-       "remote-troubleshooting",
-@@ -4761,6 +4763,7 @@ BrowserGlue.prototype = {
+@@ -4643,6 +4643,7 @@ BrowserGlue.prototype = {
    },
  
    async _maybeShowDefaultBrowserPrompt() {
@@ -26,7 +10,7 @@ index b888a753a7f23a9800fe04da51a4e6b898314ff2..35eea774e1ea4b1807ec65ebc767f423
      // Highest priority is about:welcome window modal experiment
      // Second highest priority is the upgrade dialog, which can include a "primary
      // browser" request and is limited in various ways, e.g., major upgrades.
-@@ -5302,6 +5305,16 @@ BrowserGlue.prototype = {
+@@ -5169,6 +5170,16 @@ BrowserGlue.prototype = {
      "nsIObserver",
      "nsISupportsWeakReference",
    ]),

src/browser/components/sidebar/browser-sidebar-js.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/components/sidebar/browser-sidebar.js b/browser/components/sidebar/browser-sidebar.js
-index 1937a01b9940c79782cc2ad002b09ea5938b89e0..a702e8c520fad651a98615215f94657b7e1c58eb 100644
+index 1937a01b9940c79782cc2ad002b09ea5938b89e0..0846ab4b3750a556617ff8d4546d9131cda35296 100644
 --- a/browser/components/sidebar/browser-sidebar.js
 +++ b/browser/components/sidebar/browser-sidebar.js
 @@ -671,7 +671,7 @@ var SidebarController = {
@@ -11,12 +11,3 @@ index 1937a01b9940c79782cc2ad002b09ea5938b89e0..a702e8c520fad651a98615215f94657b
      [...browser.children].forEach((node, i) => {
        node.style.order = i + 1;
      });
-@@ -681,7 +681,7 @@ var SidebarController = {
-       // DOM ordering is:     sidebar-main |  launcher-splitter | sidebar-box  | splitter | tabbrowser-tabbox |
-       // Want to display as:  |   tabbrowser-tabbox  | splitter |  sidebar-box  | launcher-splitter | sidebar-main
-       // So we just swap box and tabbrowser-tabbox ordering and move sidebar-main to the end
--      let tabbox = document.getElementById("tabbrowser-tabbox");
-+      let tabbox = document.getElementById("tabbrowser-tabpanels");
-       let boxOrdinal = this._box.style.order;
-       this._box.style.order = tabbox.style.order;
- 

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..ad28d73fe7cc6eadc4b4724c75d54857a82ff94c 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,33 +101,6 @@ 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 @@
        }
  
@@ -187,15 +140,6 @@ 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 @@
            let rect = ele => {
              return window.windowUtils.getBoundsWithoutFlushing(ele);
@@ -240,18 +184,12 @@ 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 @@
+@@ -1963,13 +1987,13 @@
+       let verticalTabsContainer = document.getElementById(
+         "vertical-pinned-tabs-container"
        );
-       let numPinned = gBrowser.pinnedTabCount;
+-      let numPinned = gBrowser.pinnedTabCount;
++      let numPinned = gBrowser._numVisiblePinTabs;
  
 -      if (gBrowser.pinnedTabCount !== verticalTabsContainer.children.length) {
 -        let tabs = this.visibleTabs;
@@ -297,26 +235,6 @@ 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 @@
        );
      }
@@ -329,27 +247,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 +2693,9 @@
        function newIndex(aTab, index) {
          // Don't allow mixing pinned and unpinned tabs.
          if (aTab.pinned) {
@@ -361,7 +259,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..d5ac2cf891ec928bec4f95fd5ff0ee8d
        }
      }
  
-@@ -2754,7 +2778,7 @@
+@@ -2754,7 +2779,7 @@
      }
  
      _notifyBackgroundTab(aTab) {
@@ -370,7 +268,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..d5ac2cf891ec928bec4f95fd5ff0ee8d
          return;
        }
  
-@@ -2772,12 +2796,14 @@
+@@ -2772,12 +2797,14 @@
                selectedTab = {
                  left: selectedTab.left,
                  right: selectedTab.right,
@@ -386,7 +284,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..d5ac2cf891ec928bec4f95fd5ff0ee8d
                selectedTab,
              ];
            })
-@@ -2794,8 +2820,11 @@
+@@ -2794,8 +2821,11 @@
              delete this._lastTabToScrollIntoView;
              // Is the new tab already completely visible?
              if (
@@ -394,13 +292,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 +2833,29 @@
              if (this.arrowScrollbox.smoothScroll) {
                // Can we make both the new tab and the selected tab completely visible?
                if (
@@ -411,13 +309,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 +338,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

src/browser/themes/shared/zen-icons/canvas-blocked.svg

@@ -3,7 +3,7 @@
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/.
    -->
-<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-opacity="context-fill-opacity">
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="black" fill-opacity="context-fill-opacity">
   <defs><clipPath id="a"><path d="M2.1 0 16 13.9V0zM0 .7V16h15.3z"/></clipPath></defs>
   <path clip-path="url(#a)" d="M4 1a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V4a3 3 0 0 0-3-3H4zm0 1h8a2 2 0 0 1 2 2v8c0 .373-.102.72-.28 1.02L9.05 8.432a1.5 1.5 0 0 0-2.101 0l-4.67 4.588a1.988 1.988 0 0 1-.28-1.02V4a2 2 0 0 1 2-2zm6.5 2a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm0 1a.5.5 0 1 1 0 1 .5.5 0 0 1 0-1zM8 9.002c.127 0 .252.047.35.143l4.662 4.582A1.99 1.99 0 0 1 12 14H4c-.37 0-.715-.099-1.012-.273L7.65 9.145A.496.496 0 0 1 8 9.002z"/>
   <path d="M.5 0a.5.5 0 0 0-.354.146.5.5 0 0 0 0 .707l15 15a.5.5 0 0 0 .707 0 .5.5 0 0 0 0-.707l-15-15A.5.5 0 0 0 .499 0z"/>

src/browser/themes/shared/zen-icons/firefox.svg

@@ -3,4 +3,4 @@
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/.
    -->
-<svg id="a" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" fill-opacity="context-fill-opacity"><path d="M14.7498,13.0913c-.0154.9253-.7896,1.6587-1.715,1.6587h-6.956c-.2705,0-.4541-.275-.3505-.5248l.0024-.0057c.4574-1.1044,1.1996-2.0362,2.1473-2.7161.1179-.0846.2601-.1284.4052-.1284h4.7793c.9416,0,1.703.7711,1.6873,1.7163Z"/><path d="M9.9212,1.25c.2705,0,.4541.275.3505.5248l-.0024.0057c-.4574,1.1044-1.1996,2.0362-2.1473,2.7161-.1179.0846-.2601.1284-.4052.1284H2.9653c-.9254,0-1.6996-.7334-1.715-1.6587-.0158-.9452.7457-1.7163,1.6873-1.7163h6.9837Z"/><path d="M2.9372,14.75c-.2152,0-.4339-.0414-.6451-.1289-.861-.3566-1.2699-1.3437-.9132-2.2047.5485-1.3241,1.3346-2.5112,2.3367-3.5283,1.0381-1.0537,2.2623-1.877,3.6387-2.4471,1.8919-.7837,3.3654-2.2571,4.149-4.149.3566-.861,1.3437-1.2698,2.2047-.9132.861.3566,1.2699,1.3437.9132,2.2047-.5485,1.3241-1.3346,2.5112-2.3367,3.5283-1.0381,1.0537-2.2623,1.877-3.6387,2.4471-1.8919.7837-3.3654,2.2571-4.149,4.149-.2691.6498-.8975,1.0421-1.5596,1.0421Z"/></svg>
+<svg id="a" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="black" fill-opacity="context-fill-opacity"><path d="M14.7498,13.0913c-.0154.9253-.7896,1.6587-1.715,1.6587h-6.956c-.2705,0-.4541-.275-.3505-.5248l.0024-.0057c.4574-1.1044,1.1996-2.0362,2.1473-2.7161.1179-.0846.2601-.1284.4052-.1284h4.7793c.9416,0,1.703.7711,1.6873,1.7163Z"/><path d="M9.9212,1.25c.2705,0,.4541.275.3505.5248l-.0024.0057c-.4574,1.1044-1.1996,2.0362-2.1473,2.7161-.1179.0846-.2601.1284-.4052.1284H2.9653c-.9254,0-1.6996-.7334-1.715-1.6587-.0158-.9452.7457-1.7163,1.6873-1.7163h6.9837Z"/><path d="M2.9372,14.75c-.2152,0-.4339-.0414-.6451-.1289-.861-.3566-1.2699-1.3437-.9132-2.2047.5485-1.3241,1.3346-2.5112,2.3367-3.5283,1.0381-1.0537,2.2623-1.877,3.6387-2.4471,1.8919-.7837,3.3654-2.2571,4.149-4.149.3566-.861,1.3437-1.2698,2.2047-.9132.861.3566,1.2699,1.3437.9132,2.2047-.5485,1.3241-1.3346,2.5112-2.3367,3.5283-1.0381,1.0537-2.2623,1.877-3.6387,2.4471-1.8919.7837-3.3654,2.2571-4.149,4.149-.2691.6498-.8975,1.0421-1.5596,1.0421Z"/></svg>

src/browser/themes/shared/zen-icons/icons.css

@@ -390,7 +390,7 @@
 }
 
 #zen-expand-sidebar-button {
-  list-style-image: url('sidebar.svg') !important;
+  list-style-image: url('move-tab.svg') !important;
 }
 
 .panel-header > .subviewbutton-back {

src/browser/themes/shared/zen-icons/jar.inc.mn

@@ -78,7 +78,6 @@
   skin/classic/browser/zen-icons/midi.svg                      (../shared/zen-icons/midi.svg) 
   skin/classic/browser/zen-icons/move-tab.svg                      (../shared/zen-icons/move-tab.svg) 
   skin/classic/browser/zen-icons/new-tab-image.svg                      (../shared/zen-icons/new-tab-image.svg) 
-  skin/classic/browser/zen-icons/nucleo-copyright-notice.html                      (../shared/zen-icons/nucleo-copyright-notice.html) 
   skin/classic/browser/zen-icons/open.svg                      (../shared/zen-icons/open.svg) 
   skin/classic/browser/zen-icons/page-portrait.svg                      (../shared/zen-icons/page-portrait.svg) 
   skin/classic/browser/zen-icons/passwords.svg                      (../shared/zen-icons/passwords.svg) 
@@ -109,7 +108,6 @@
   skin/classic/browser/zen-icons/send-to-device.svg                      (../shared/zen-icons/send-to-device.svg) 
   skin/classic/browser/zen-icons/settings.svg                      (../shared/zen-icons/settings.svg) 
   skin/classic/browser/zen-icons/share.svg                      (../shared/zen-icons/share.svg) 
-  skin/classic/browser/zen-icons/sidebar.svg                      (../shared/zen-icons/sidebar.svg) 
   skin/classic/browser/zen-icons/sidebars-right.svg                      (../shared/zen-icons/sidebars-right.svg) 
   skin/classic/browser/zen-icons/source-code.svg                      (../shared/zen-icons/source-code.svg) 
   skin/classic/browser/zen-icons/spell-check.svg                      (../shared/zen-icons/spell-check.svg) 

src/browser/themes/shared/zen-icons/mail.svg

@@ -3,7 +3,7 @@
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/.
    -->
-<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-opacity="context-fill-opacity">
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="black" 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>

src/browser/themes/shared/zen-icons/midi.svg

@@ -3,6 +3,6 @@
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/.
    -->
-<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-opacity="context-fill-opacity">
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="black" fill-opacity="context-fill-opacity">
   <path d="M.5 2a.5.5 0 0 0-.5.5v11a.5.5 0 0 0 .5.5h15a.5.5 0 0 0 .5-.5v-11a.5.5 0 0 0-.5-.5H.5zM1 3h14v4H1V3zm2.711 1a.75.75 0 1 0 .04 0h-.04zM10.5 4a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2zm-4.289.002a.75.75 0 1 0 .04 0h-.04zM1 8h2v3.5a.5.5 0 0 0 1 0V8h2v3.5a.5.5 0 0 0 1 0V8h2v3.5a.5.5 0 0 0 1 0V8h2v3.5a.5.5 0 0 0 1 0V8h2v5H1V8z"/>
 </svg>

src/browser/themes/shared/zen-icons/pocket-outline.svg

@@ -3,6 +3,6 @@
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/.
    -->
-<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-opacity="context-fill-opacity">
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="black" fill-opacity="context-fill-opacity">
   <path d="M2.5 2A2.507 2.507 0 0 0 0 4.5V7c0 4.412 3.588 8 8 8s8-3.588 8-8V4.5C16 3.125 14.875 2 13.5 2h-11zm0 1h11c.834 0 1.5.666 1.5 1.5V7c0 3.872-3.128 7-7 7s-7-3.128-7-7V4.5C1 3.666 1.666 3 2.5 3zm2 3a.5.5 0 0 0-.353.146.5.5 0 0 0 0 .707l3.5 3.5a.5.5 0 0 0 .706 0l3.5-3.5a.5.5 0 0 0 0-.706.5.5 0 0 0-.706 0L8 9.293 4.854 6.147A.5.5 0 0 0 4.501 6z"/>
 </svg>

src/browser/themes/shared/zen-icons/sidebar.svg

@@ -1 +0,0 @@
-<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>

surfer.json

@@ -53,4 +53,4 @@
     "licenseType": "MPL-2.0"
   },
   "updateHostname": "updates.zen-browser.app"
-}
+}