[breaking] changed default layout of the customizable UI

src/browser/app/profile/zen-browser.js

@@ -75,7 +75,7 @@ pref('zen.welcomeScreen.enabled', true);
 pref('zen.welcomeScreen.seen', false);
 pref('zen.tabs.vertical', true);
 pref('zen.tabs.vertical.right-side', false);
-pref('zen.tabs.show-newtab-under', false);
+pref('zen.tabs.show-newtab-under', true);
 pref('zen.theme.accent-color', "#aac7ff");
 pref('zen.theme.border-radius', 8); // In pixels
 pref('zen.theme.content-element-separation', 6); // In pixels
@@ -247,3 +247,5 @@ pref("network.fetchpriority.enabled", true);
 // No Proxy should be default, Use system proxy allows antivirus, virus or system proxy to MITM or slowing down Zen
 pref("network.proxy.type", 0);
 
+// for the new layout:
+pref('browser.download.autohideButton', false);

src/browser/base/content/ZenCustomizableUI.sys.mjs

@@ -2,7 +2,7 @@ export var ZenCustomizableUI = new (class {
   constructor() {}
 
   TYPE_TOOLBAR = 'toolbar';
-  defaultSidebarIcons = ['zen-sidepanel-button', 'zen-workspaces-button', 'new-tab-button'];
+  defaultSidebarIcons = ['zen-sidepanel-button', 'zen-workspaces-button', 'downloads-button'];
 
   startup(CustomizableUIInternal) {
     CustomizableUIInternal.registerArea(

src/browser/base/content/ZenStartup.mjs

@@ -73,7 +73,7 @@
       tabs.style.maxHeight = '0px'; // reset to 0
       const toolbarRect = toolbarItems.getBoundingClientRect();
       // -5 for the controls padding
-      let totalHeight = toolbarRect.height - (this.contentElementSeparation * 2) - 5;
+      let totalHeight = toolbarRect.height - (this.contentElementSeparation) - 5;
       // remove the height from other elements that aren't hidden
       const otherElements = document.querySelectorAll('#tabbrowser-tabs > *:not([hidden="true"])');
       for (let tab of otherElements) {

src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css

@@ -95,6 +95,12 @@
     --tab-selected-bgcolor: light-dark(rgba(255,255,255,.7), color-mix(in srgb, var(--zen-colors-secondary) 50%, transparent 50%));
     grid-gap: 0 !important;
 
+    &[overflow]::after,
+    #vertical-tabs-newtab-button {
+      /* Hide separator they give us, eww */
+      display: none !important;
+    }
+
     & .tabbrowser-tab {
       animation: zen-slide-in 0.2s ease-in-out;
 
@@ -354,12 +360,24 @@
           #navigator-toolbox[zen-expanded='true']:not([zen-user-hover='true'])
         )
     ) {
+    --tab-min-width: 36px !important;
+
     /* Important: When changin this value, make sure expand on hover doesn't break! */
-    --zen-toolbox-max-width: 49px; /* 1px more because the browser view has one pixel of padding to avoid the border being cut off */
+    --zen-toolbox-padding: 6px;
-    --zen-toolbox-padding: 8px;
+    --zen-toolbox-max-width: calc(var(--tab-min-width) + var(--zen-toolbox-padding) * 2);
     max-width: var(--zen-toolbox-max-width) !important;
     min-width: var(--zen-toolbox-max-width) !important;
 
+    --zen-tabbar-offset: 1px; /* Fix the tabbar offset, because there's a shadow */
+    &[zen-right-side='true'] {
+      margin-left: var(--zen-tabbar-offset);
+    }
+
+    &:not([zen-right-side='true']) {
+      margin-right: var(--zen-tabbar-offset);
+    }
+
+
     & #vertical-tabs-newtab-button {
       padding: 0 !important;
       background: transparent !important;
@@ -422,7 +440,6 @@
 
     & #tabbrowser-tabs {
       margin-top: -2px;
-      --tab-min-width: 36px !important;
 
       & .tabbrowser-tab {
         margin: 0 auto;

src/browser/components/customizableui/CustomizableUI-sys-mjs.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/components/customizableui/CustomizableUI.sys.mjs b/browser/components/customizableui/CustomizableUI.sys.mjs
-index 289c3df7dcd6fa6b35681ce61c1e920b6a2651d7..a31dc07c8b756e09f43cd5f81bad8d4a3c5f7fce 100644
+index 989e69245aeb1185125752db6b9c58e462d554e4..c297a47dc7685c2dd6ca9a9a832b204ca1da22e2 100644
 --- a/browser/components/customizableui/CustomizableUI.sys.mjs
 +++ b/browser/components/customizableui/CustomizableUI.sys.mjs
 @@ -13,6 +13,7 @@ ChromeUtils.defineESModuleGetters(lazy, {
@@ -19,12 +19,13 @@ index 289c3df7dcd6fa6b35681ce61c1e920b6a2651d7..a31dc07c8b756e09f43cd5f81bad8d4a
  
  const kSpecialWidgetPfx = "customizableui-special-";
  
-@@ -253,13 +254,14 @@ var CustomizableUIInternal = {
+@@ -323,13 +324,14 @@ var CustomizableUIInternal = {
        "spring",
        "urlbar-container",
        "spring",
 -      "save-to-pocket-button",
-       "downloads-button",
+-      "downloads-button",
++//      "downloads-button",
        AppConstants.MOZ_DEV_EDITION ? "developer-button" : null,
 -      "fxa-toolbar-menu-button",
 +      "wrapper-sidebar-button",
@@ -36,7 +37,7 @@ index 289c3df7dcd6fa6b35681ce61c1e920b6a2651d7..a31dc07c8b756e09f43cd5f81bad8d4a
      this.registerArea(
        CustomizableUI.AREA_NAVBAR,
        {
-@@ -288,10 +290,10 @@ var CustomizableUIInternal = {
+@@ -363,10 +365,10 @@ var CustomizableUIInternal = {
        {
          type: CustomizableUI.TYPE_TOOLBAR,
          defaultPlacements: [
@@ -50,7 +51,7 @@ index 289c3df7dcd6fa6b35681ce61c1e920b6a2651d7..a31dc07c8b756e09f43cd5f81bad8d4a
          ],
          verticalTabsDefaultPlacements: [],
          defaultCollapsed: null,
-@@ -331,6 +333,7 @@ var CustomizableUIInternal = {
+@@ -429,6 +431,7 @@ var CustomizableUIInternal = {
        CustomizableUI.AREA_NAVBAR,
        CustomizableUI.AREA_BOOKMARKS,
        CustomizableUI.AREA_TABSTRIP,
@@ -58,7 +59,7 @@ index 289c3df7dcd6fa6b35681ce61c1e920b6a2651d7..a31dc07c8b756e09f43cd5f81bad8d4a
      ]);
      if (AppConstants.platform != "macosx") {
        toolbars.add(CustomizableUI.AREA_MENUBAR);
-@@ -1033,6 +1036,9 @@ var CustomizableUIInternal = {
+@@ -1144,6 +1147,9 @@ var CustomizableUIInternal = {
          placements = gPlacements.get(area);
        }
  
@@ -68,7 +69,7 @@ index 289c3df7dcd6fa6b35681ce61c1e920b6a2651d7..a31dc07c8b756e09f43cd5f81bad8d4a
        // For toolbars that need it, mark as dirty.
        let defaultPlacements = areaProperties.get("defaultPlacements");
        if (
-@@ -3289,6 +3295,9 @@ var CustomizableUIInternal = {
+@@ -3521,6 +3527,9 @@ var CustomizableUIInternal = {
          gSeenWidgets.add(widgetId);
        }
      }