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

src/browser/base/content/ZenStartup.mjs

@@ -33,15 +33,11 @@
 
         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);
@@ -105,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);
@@ -123,12 +120,6 @@
       gURLBar._initPasteAndGo();
       gURLBar._initStripOnShare();
     },
-
-    _initSquircles() {
-      CSS.paintWorklet.addModule(
-        `chrome://browser/content/zen-vendor/css-houdini-squircle.min.mjs`
-      );
-    }
   };
 
   ZenStartup.init();

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

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);
 +

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>

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;
+ 

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

@@ -40,7 +40,6 @@
 <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,6 +75,4 @@
 
         # 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/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)
+        content/browser/zen-vendor/motion.min.mjs                      (content/zen-vendor/motion.min.mjs)

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;
+          }
         }
       }
     }

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

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 */

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

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

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

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');
           }
@@ -644,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');
 
@@ -713,6 +717,7 @@
     removeTabContainersDragoverClass() {
       this.dragIndicator.remove();
       this._dragIndicator = null;
+      document.getElementById('zen-current-workspace-indicator').removeAttribute('open');
     }
 
     get dragIndicator() {
@@ -733,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) {

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

@@ -1,60 +1,63 @@
-{
-  const PREF_NAME = 'zen.migration.version';
-  const MIGRATION_VERSION = 1;
+const lazy = {};
 
-  class ZenUIMigration {
-    init() {
-      if (Services.prefs.prefHasUserValue(PREF_NAME)) {
-        this._migrate();
-      }
-      this.clearVariables();
+ChromeUtils.defineESModuleGetters(lazy, {
+  BrowserWindowTracker: 'resource:///modules/BrowserWindowTracker.sys.mjs',
+});
+
+class ZenUIMigration {
+  PREF_NAME = 'zen.migration.version';
+  MIGRATION_VERSION = 1;
+
+  init(isNewProfile, win) {
+    if (!isNewProfile) {
+      this._migrate(win);
     }
+    this.clearVariables();
+  }
 
-    get _migrationVersion() {
-      return Services.prefs.getIntPref(PREF_NAME, 0);
-    }
+  get _migrationVersion() {
+    return Services.prefs.getIntPref(this.PREF_NAME, 0);
+  }
 
-    set _migrationVersion(value) {
-      Services.prefs.setIntPref(PREF_NAME, value);
-    }
+  set _migrationVersion(value) {
+    Services.prefs.setIntPref(this.PREF_NAME, value);
+  }
 
-    _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',
-        {
-          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;
+  _migrate(win) {
+    if (this._migrationVersion < 1) {
+      this._migrateV1(win);
     }
   }
 
-  window.gZenUIMigration = new ZenUIMigration();
+  clearVariables() {
+    this._migrationVersion = this.MIGRATION_VERSION;
+  }
+
+  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,
+      },
+      [
+        {
+          '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;
+  }
 }
+
+export var gZenUIMigration = new ZenUIMigration();

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

@@ -1,8 +1,24 @@
 diff --git a/browser/components/BrowserGlue.sys.mjs b/browser/components/BrowserGlue.sys.mjs
-index 2de73e75bf98b21dde9ec05213a66f9e9039200f..04ab3ea4c47d674778e8965654867c4cf0f99161 100644
+index b888a753a7f23a9800fe04da51a4e6b898314ff2..35eea774e1ea4b1807ec65ebc767f423d81602bd 100644
 --- a/browser/components/BrowserGlue.sys.mjs
 +++ b/browser/components/BrowserGlue.sys.mjs
-@@ -4643,6 +4643,7 @@ BrowserGlue.prototype = {
+@@ -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 = {
    },
  
    async _maybeShowDefaultBrowserPrompt() {
@@ -10,7 +26,7 @@ index 2de73e75bf98b21dde9ec05213a66f9e9039200f..04ab3ea4c47d674778e8965654867c4c
      // 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.
-@@ -5169,6 +5170,16 @@ BrowserGlue.prototype = {
+@@ -5302,6 +5305,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..0846ab4b3750a556617ff8d4546d9131cda35296 100644
+index 1937a01b9940c79782cc2ad002b09ea5938b89e0..a702e8c520fad651a98615215f94657b7e1c58eb 100644
 --- a/browser/components/sidebar/browser-sidebar.js
 +++ b/browser/components/sidebar/browser-sidebar.js
 @@ -671,7 +671,7 @@ var SidebarController = {
@@ -11,3 +11,12 @@ index 1937a01b9940c79782cc2ad002b09ea5938b89e0..0846ab4b3750a556617ff8d4546d9131
      [...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..ad28d73fe7cc6eadc4b4724c75d54857a82ff94c 100644
+index 8aeb244ffca9f48661805f5b7d860b5896055562..bffa5e0be62e73f380adf558c5df3441bde7b604 100644
 --- a/browser/components/tabbrowser/content/tabs.js
 +++ b/browser/components/tabbrowser/content/tabs.js
 @@ -94,7 +94,7 @@
@@ -101,7 +101,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..ad28d73fe7cc6eadc4b4724c75d54857
        ) {
          delete draggedTab._dragData;
          return;
-@@ -1512,9 +1525,18 @@
+@@ -1512,9 +1525,19 @@
        }
  
        this.#allTabs = [
@@ -109,19 +109,20 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..ad28d73fe7cc6eadc4b4724c75d54857
 +        ...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 = [
@@ -129,7 +130,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..ad28d73fe7cc6eadc4b4724c75d54857
          ...verticalPinnedTabsContainer.children,
          ...focusableItems,
        ];
-@@ -1617,8 +1640,8 @@
+@@ -1617,8 +1641,8 @@
      #isContainerVerticalPinnedExpanded(tab) {
        return (
          this.verticalMode &&
@@ -140,7 +141,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..ad28d73fe7cc6eadc4b4724c75d54857
        );
      }
  
-@@ -1816,7 +1839,7 @@
+@@ -1816,7 +1840,7 @@
            let rect = ele => {
              return window.windowUtils.getBoundsWithoutFlushing(ele);
            };
@@ -149,7 +150,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..ad28d73fe7cc6eadc4b4724c75d54857
            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);
        }
  
@@ -157,7 +158,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..ad28d73fe7cc6eadc4b4724c75d54857
        selectedTab._notselectedsinceload = false;
      }
  
-@@ -1843,7 +1867,7 @@
+@@ -1843,7 +1868,7 @@
          return;
        }
  
@@ -166,7 +167,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..ad28d73fe7cc6eadc4b4724c75d54857
        if (!tabs.length) {
          return;
        }
-@@ -1879,7 +1903,7 @@
+@@ -1879,7 +1904,7 @@
          if (isEndTab && !this._hasTabTempMaxWidth) {
            return;
          }
@@ -175,7 +176,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..ad28d73fe7cc6eadc4b4724c75d54857
          // 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];
@@ -184,17 +185,14 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..ad28d73fe7cc6eadc4b4724c75d54857
            if (!isEndTab) {
              // keep tabs the same width
              tab.style.transition = "none";
-@@ -1963,13 +1987,13 @@
-       let verticalTabsContainer = document.getElementById(
-         "vertical-pinned-tabs-container"
+@@ -1965,11 +1990,11 @@
        );
--      let numPinned = gBrowser.pinnedTabCount;
-+      let numPinned = gBrowser._numVisiblePinTabs;
+       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]);
@@ -202,7 +200,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..ad28d73fe7cc6eadc4b4724c75d54857
          }
        }
  
-@@ -1992,8 +2016,8 @@
+@@ -1992,8 +2017,8 @@
      }
  
      _positionPinnedTabs() {
@@ -213,7 +211,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..ad28d73fe7cc6eadc4b4724c75d54857
        let absPositionHorizontalTabs =
          this.overflowing && tabs.length > numPinned && numPinned > 0;
  
-@@ -2074,7 +2098,7 @@
+@@ -2074,7 +2099,7 @@
          return;
        }
  
@@ -222,7 +220,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..ad28d73fe7cc6eadc4b4724c75d54857
  
        let directionX = screenX > dragData.animLastScreenX;
        let directionY = screenY > dragData.animLastScreenY;
-@@ -2257,9 +2281,9 @@
+@@ -2257,9 +2282,9 @@
        }
  
        let pinned = draggedTab.pinned;
@@ -235,7 +233,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..ad28d73fe7cc6eadc4b4724c75d54857
          pinned ? numPinned : undefined
        );
  
-@@ -2502,8 +2526,9 @@
+@@ -2502,8 +2527,9 @@
        );
      }
  
@@ -247,7 +245,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..ad28d73fe7cc6eadc4b4724c75d54857
          return;
        }
  
-@@ -2668,9 +2693,9 @@
+@@ -2668,9 +2694,9 @@
        function newIndex(aTab, index) {
          // Don't allow mixing pinned and unpinned tabs.
          if (aTab.pinned) {
@@ -259,7 +257,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..ad28d73fe7cc6eadc4b4724c75d54857
        }
      }
  
-@@ -2754,7 +2779,7 @@
+@@ -2754,7 +2780,7 @@
      }
  
      _notifyBackgroundTab(aTab) {
@@ -268,7 +266,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..ad28d73fe7cc6eadc4b4724c75d54857
          return;
        }
  
-@@ -2772,12 +2797,14 @@
+@@ -2772,12 +2798,14 @@
                selectedTab = {
                  left: selectedTab.left,
                  right: selectedTab.right,
@@ -284,7 +282,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..ad28d73fe7cc6eadc4b4724c75d54857
                selectedTab,
              ];
            })
-@@ -2794,8 +2821,11 @@
+@@ -2794,8 +2822,11 @@
              delete this._lastTabToScrollIntoView;
              // Is the new tab already completely visible?
              if (
@@ -298,7 +296,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..ad28d73fe7cc6eadc4b4724c75d54857
              ) {
                return;
              }
-@@ -2803,21 +2833,29 @@
+@@ -2803,21 +2834,29 @@
              if (this.arrowScrollbox.smoothScroll) {
                // Can we make both the new tab and the selected tab completely visible?
                if (

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;
          }
  

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="black" fill-opacity="context-fill-opacity">
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="currentColor" 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/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>

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="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>
+<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>

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('move-tab.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,

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) 
@@ -78,6 +79,7 @@
   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) 
@@ -108,6 +110,7 @@
   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,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="black" fill-opacity="context-fill-opacity">
+<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>

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="black" fill-opacity="context-fill-opacity">
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="currentColor" 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="black" fill-opacity="context-fill-opacity">
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="currentColor" 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

@@ -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"><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>

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"
         }