Merge pull request #3154 from zen-browser/new-layout

New layout

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

@@ -123,6 +123,10 @@ pref('zen.view.sidebar-expanded.max-width', 400);
 pref('zen.view.show-bottom-border', false);
 pref('zen.view.use-single-toolbar', false);
 
+#ifndef XP_MACOSX
+pref('zen.view.hide-window-controls', true);
+#endif
+
 pref('zen.tabs.dim-pending', true);
 pref('zen.tabs.newtab-on-middle-click', true);
 

src/browser/base/content/ZenUIManager.mjs

@@ -117,9 +117,27 @@ var gZenUIManager = {
 
 var gZenVerticalTabsManager = {
   init() {
+
+    const lazy = {};
+
+    ChromeUtils.defineESModuleGetters(lazy, {
+      AddonManager: "resource://gre/modules/AddonManager.sys.mjs",
+      AddonManagerPrivate: "resource://gre/modules/AddonManager.sys.mjs",
+      BrowserUsageTelemetry: "resource:///modules/BrowserUsageTelemetry.sys.mjs",
+      CustomizableWidgets: "resource:///modules/CustomizableWidgets.sys.mjs",
+      ZenCustomizableUI: "chrome://browser/content/ZenCustomizableUI.sys.mjs",
+      HomePage: "resource:///modules/HomePage.sys.mjs",
+      PanelMultiView: "resource:///modules/PanelMultiView.sys.mjs",
+      PrivateBrowsingUtils: "resource://gre/modules/PrivateBrowsingUtils.sys.mjs",
+      ShortcutUtils: "resource://gre/modules/ShortcutUtils.sys.mjs",
+    });
+
     var updateEvent = this._updateEvent.bind(this);
+    Services.prefs.addObserver('zen.tabs.vertical', updateEvent);
     Services.prefs.addObserver('zen.tabs.vertical.right-side', updateEvent);
     Services.prefs.addObserver('zen.view.sidebar-expanded.max-width', updateEvent);
+    Services.prefs.addObserver('zen.view.compact', updateEvent);
+    Services.prefs.addObserver('zen.view.use-single-toolbar', updateEvent);
 
     gZenCompactModeManager.addEventListener(updateEvent);
     this._updateEvent();
@@ -167,12 +185,28 @@ var gZenVerticalTabsManager = {
     return !(window.AppConstants.platform === 'macosx'|| window.matchMedia('(-moz-gtk-csd-reversed-placement)').matches);
   },
 
+  get _topButtonsSeparatorElement() {
+    if (this.__topButtonsSeparatorElement) {
+      return this.__topButtonsSeparatorElement;
+    }
+    this.__topButtonsSeparatorElement = document.createElement('div');
+    this.__topButtonsSeparatorElement.id = 'zen-sidebar-top-buttons-separator';
+    this.__topButtonsSeparatorElement.setAttribute('skipintoolbarset', 'true');
+    return this.__topButtonsSeparatorElement;
+  },
+
   _updateEvent() {
     this._updateMaxWidth();
     const topButtons = document.getElementById('zen-sidebar-top-buttons');
     const customizationTarget = document.getElementById('nav-bar-customization-target');
+    const isCompactMode = Services.prefs.getBoolPref('zen.view.compact');
+    const isVerticalTabs = Services.prefs.getBoolPref('zen.tabs.vertical');
 
-    if (Services.prefs.getBoolPref('zen.tabs.vertical.right-side')) {
+    gBrowser.tabContainer.setAttribute('orient', isVerticalTabs ? 'vertical' : 'horizontal');
+    gBrowser.tabContainer.arrowScrollbox.setAttribute('orient', isVerticalTabs ? 'vertical' : 'horizontal');
+
+    const buttonsTarget = document.getElementById('zen-sidebar-top-buttons-customization-target');
+    if (Services.prefs.getBoolPref('zen.tabs.vertical.right-side') && isVerticalTabs) {
       this.navigatorToolbox.setAttribute('zen-right-side', 'true');
     } else {
       this.navigatorToolbox.removeAttribute('zen-right-side');
@@ -181,31 +215,78 @@ var gZenVerticalTabsManager = {
     // Check if the sidebar is in hover mode
     if (
       !this.navigatorToolbox.hasAttribute('zen-right-side') &&
-      !Services.prefs.getBoolPref('zen.view.compact')
+      !isCompactMode
     ) {
       this.navigatorToolbox.prepend(topButtons);
     //  browser.prepend(this.navigatorToolbox);
     } else {
-      customizationTarget.prepend(topButtons);
+    //  customizationTarget.prepend(topButtons);
     //  tabboxWrapper.prepend(this.navigatorToolbox);
     }
 
-    if (Services.prefs.getBoolPref('zen.view.use-single-toolbar')) {
-      if (!topButtons.contains(document.getElementById('nav-bar'))) {
-        topButtons.after(document.getElementById('nav-bar'));
-      }
+    if (!isVerticalTabs) {
+      const navbarContainer = document.getElementById('zen-appcontent-navbar-container');
+      document.getElementById("urlbar-container").after(document.getElementById('navigator-toolbox'));
+    }
+
+    if (Services.prefs.getBoolPref('zen.view.use-single-toolbar') && isVerticalTabs) {
+      const navBar = document.getElementById('nav-bar');
+      this._navbarParent = navBar.parentElement;
       let elements = document.querySelectorAll('#nav-bar-customization-target > *:is(toolbarbutton, #stop-reload-button)');
       elements = Array.from(elements);
-      const buttonsTarget = document.getElementById('zen-sidebar-top-buttons-customization-target');
+      // Add separator if it doesn't exist
+      if (!buttonsTarget.contains(this._topButtonsSeparatorElement)) {
+        buttonsTarget.append(this._topButtonsSeparatorElement);
+      }
       for (const button of elements) {
+        button.setAttribute('zen-single-toolbar', 'true');
         buttonsTarget.append(button);
       }
-      topButtons.appendChild(document.getElementById('PanelUI-button'));
+      buttonsTarget.prepend(document.getElementById('unified-extensions-button'));
+      buttonsTarget.prepend(document.getElementById('PanelUI-button'));
       if (this.isWindowsStyledButtons) {
-        document.getElementById('zen-appcontent-navbar-container').append(
-          document.querySelector('#nav-bar > .titlebar-buttonbox-container')
-        );
+        const windowButtons = document.querySelector('#nav-bar > .titlebar-buttonbox-container');
+        if (windowButtons) {
+          document.getElementById('zen-appcontent-navbar-container').append(windowButtons);
+        }
       }
+      document.documentElement.setAttribute("zen-single-toolbar", true);
+      if (isCompactMode) {
+        const titlebar = document.getElementById('titlebar');
+        titlebar.prepend(navBar);
+        titlebar.prepend(topButtons);
+      } else {
+        const titlebar = document.getElementById('titlebar');
+        titlebar.before(topButtons);
+        titlebar.before(navBar);
+      }
+      document.documentElement.setAttribute("zen-has-set-single-toolbar", true);
+    } else if (document.documentElement.hasAttribute("zen-has-set-single-toolbar")) {
+      // Do the opposite
+      const navBar = document.getElementById('nav-bar');
+      this._navbarParent.prepend(navBar);
+      const elements = document.querySelectorAll('#zen-sidebar-top-buttons-customization-target > *:is(toolbarbutton, #stop-reload-button)');
+      for (const button of elements) {
+        if (button.hasAttribute('zen-single-toolbar')) {
+          button.removeAttribute('zen-single-toolbar');
+          document.getElementById('nav-bar-customization-target').append(button);
+        }
+      }
+      document.documentElement.removeAttribute("zen-single-toolbar");
+      document.documentElement.removeAttribute("zen-has-set-single-toolbar");
+      navBar.appendChild(document.getElementById('PanelUI-button'));
+      if (this.isWindowsStyledButtons) {
+        const windowButtons = document.querySelector('#zen-appcontent-navbar-container > .titlebar-buttonbox-container');
+        if (windowButtons) {
+          document.getElementById('nav-bar').append(windowButtons);
+        }
+      } else {
+        const windowButtons = document.querySelector('#zen-appcontent-navbar-container > .titlebar-buttonbox-container');
+        if (windowButtons) {
+          document.getElementById('nav-bar').prepend(windowButtons);
+        }
+      }
+      CustomizableUI.zenInternalCU._rebuildRegisteredAreas();
     }
     
     // Always move the splitter next to the sidebar

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 12fa0cf79aade28581016adf96df85386dabdcef..846add9b040abf0f7378ebaaadef007013f5a1ec 100644
+index 12fa0cf79aade28581016adf96df85386dabdcef..85859842c85f5c131900ce49d69b117237ffc592 100644
 --- a/browser/base/content/navigator-toolbox.inc.xhtml
 +++ b/browser/base/content/navigator-toolbox.inc.xhtml
 @@ -2,7 +2,7 @@
@@ -27,15 +27,7 @@ index 12fa0cf79aade28581016adf96df85386dabdcef..846add9b040abf0f7378ebaaadef0070
                           aria-pressed="false"
                           oncommand="FirefoxViewHandler.openTab();"
                           onmousedown="FirefoxViewHandler.openToolbarMouseEvent(event);"
-@@ -50,16 +51,21 @@
-                 aria-multiselectable="true"
-                 setfocus="false"
-                 tooltip="tabbrowser-tab-tooltip"
--                orient="horizontal"
-+                orient="vertical"
-                 stopwatchid="FX_TAB_CLICK_MS">
-             <hbox class="tab-drop-indicator" hidden="true"/>
- # If the name (tabbrowser-arrowscrollbox) or structure of this changes
+@@ -57,9 +58,14 @@
  # significantly, there is an optimization in
  # DisplayPortUtils::MaybeCreateDisplayPortInFirstScrollFrameEncountered based
  # the current structure that we may want to revisit.

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

@@ -7,6 +7,7 @@
     box-shadow: 0 0 1px 1px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));
     border-radius: var(--zen-border-radius);
     overflow: hidden;
+    margin: 1px;
     
     #browser:has(#navigator-toolbox[zen-right-side='true']) & {
       margin-right: 0;

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

@@ -84,9 +84,8 @@
     margin-top: 0;
   }
 
-  #browser:has(#navigator-toolbox[zen-right-side='true']) & #zen-appcontent-wrapper {
+  & #browser:has(#navigator-toolbox[zen-right-side='true']) #zen-appcontent-wrapper {
     margin-right: 0;
-    margin-left: var(--zen-element-separation);
   }
 }
 

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

@@ -26,20 +26,27 @@
         z-index: 9;
         transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
         right: calc(100% - var(--zen-element-separation));
-        top: 0;
+        top: var(--zen-element-separation);
         bottom: var(--zen-element-separation);
         opacity: 0;
         padding-left: var(--zen-compact-float) !important;
         padding-bottom: 0 !important;
         padding-top: 0 !important;
+      }
 
-        #browser:has(#navigator-toolbox[zen-right-side='true']) & {
+      & #browser:has(#navigator-toolbox[zen-right-side='true']) {
+        & #navigator-toolbox {
           --zen-compact-float: calc(var(--zen-element-separation) + 1px);
           padding-left: unset !important;
           padding-right: var(--zen-compact-float) !important;
           left: calc(100% - var(--zen-element-separation));
           right: unset;
         }
+
+        & .browserSidebarContainer {
+          margin-left: 0 !important;
+          margin-right: var(--zen-element-separation) !important;
+        }
       }
 
       #titlebar {
@@ -57,16 +64,6 @@
           backdrop-filter: blur(5px) !important;
         }
       }
-      /* Mark: toolbox as collapsed */
-      #zen-tabbox-wrapper > #navigator-toolbox:not(#navigator-toolbox:is(#navigator-toolbox[zen-expanded='true'])) {
-        max-width: calc(var(--zen-toolbox-max-width) + var(--zen-compact-float)) !important;
-        min-width: calc(var(--zen-toolbox-max-width) + var(--zen-compact-float)) !important;
-
-        & #titlebar {
-          padding-left: 0 !important;
-          padding-right: 0 !important;
-        }
-      }
 
       @media (-moz-bool-pref: 'zen.view.compact.hide-toolbar') {
         #navigator-toolbox {

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

@@ -1,2 +1,20 @@
 @media not (-moz-bool-pref: 'zen.tabs.vertical') {
+  #browser,
+  #navigator-toolbox {
+    flex-direction: row;
+
+    max-width: unset !important;
+    width: 100% !important;
+  }
+
+  #zen-sidebar-splitter {
+    display: none !important;
+  }
+
+  #tabbrowser-arrowscrollbox {
+    max-height: unset !important;
+  }
+
+  #titlebar {
+  }
 }

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

@@ -7,6 +7,24 @@
     height: 100%;
   }
 
+  :root[zen-single-toolbar='true'] {
+    & #zen-appcontent-navbar-container,
+    & #zen-sidebar-top-buttons {
+      --zen-toolbar-height: 32px;
+      height: var(--zen-toolbar-height);
+    } 
+    
+    & #zen-sidebar-top-buttons .toolbarbutton-1 {
+      & > .toolbarbutton-icon {
+        padding: 5px;
+      }
+    }
+
+    & #zen-sidebar-top-buttons-separator {
+      width: 100%;
+    }
+  }
+
   #TabsToolbar > * {
     justify-content: center;
   }
@@ -17,12 +35,53 @@
 
   #browser {
     --zen-toolbox-padding: calc(var(--zen-element-separation) / 1.5);
-
     :root[zen-no-padding='true'] & {
       --zen-toolbox-padding: 4px;
     }
   }
 
+  :root[zen-single-toolbar='true'] {
+    #urlbar-container {
+      width: -moz-available !important;
+    }
+
+    .sharing-icon,
+    #identity-icon,
+    .urlbar-icon,
+    #permissions-granted-icon,
+    #tracking-protection-icon,
+    #tracking-protection-icon-box,
+    #blocked-permissions-container > .blocked-permission-icon {
+      width: 12px;
+      height: 12px;
+    }
+
+    #identity-icon-box,
+    #identity-permission-box {
+      margin-top: auto;
+      margin-bottom: auto;
+      padding: 6px;
+    }
+
+    & #urlbar-container,
+    & #urlbar {
+      --urlbar-container-height: 40px !important;
+      --urlbar-height: 38px !important;
+    }
+
+    & #nav-bar {
+      margin-bottom: 8px;
+    }
+
+    & #zen-sidebar-top-buttons {
+      margin: 4px 0;
+    }
+
+    & #PanelUI-menu-button {
+      padding: 0 !important;
+    }
+  }
+
   #vertical-pinned-tabs-container-separator {
     background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.1));
     margin: 8px auto;
@@ -55,22 +114,54 @@
     & toolbarspring { display: none; }
   }
 
-  @media (-moz-bool-pref: 'zen.view.use-single-toolbar') { 
-    & #zen-appcontent-navbar-container > .titlebar-buttonbox-container {
-      margin-left: auto;
-      width: fit-content;
-    }
-
-    & #urlbar-container {
-      width: -moz-available !important;
-    }
-  }
-
   .titlebar-spacer[type='pre-tabs'],
   .titlebar-spacer[type='post-tabs'] {
     display: none;
   }
 
+  :root[zen-single-toolbar='true'] {
+    #zen-appcontent-navbar-container {
+      display: flex;
+      -moz-window-dragging: drag;
+
+      & #PersonalToolbar {
+        width: -moz-available;
+      }
+      
+      :root:not([customizing]) & {
+        @media (not (-moz-platform: macos)) and (not (-moz-gtk-csd-reversed-placement)) {
+          @media (-moz-bool-pref: 'zen.view.hide-window-controls') { 
+            & {
+              transition: height 0.2s ease-out, opacity 0.2s ease-out;
+              transition-delay: 0.05s;
+            }
+
+            &:not([zen-has-hover='true']):not([has-popup-menu]):not(:focus-within) {
+              transition-delay: 0.2s;
+              height: var(--zen-element-separation);
+              overflow: hidden;
+              opacity: 0;
+              & > * {
+                pointer-events: none;
+              }
+            }
+          }
+          
+          & .titlebar-buttonbox-container {
+            margin-left: auto;
+            width: fit-content;
+          }
+        }
+      }
+
+      @media (-moz-platform: macos) and (-moz-gtk-csd-reversed-placement) {
+        &:has(#PersonalToolbar[collapsed="true"]) {
+          display: none;
+        }
+      }
+    }
+  }
+
   #TabsToolbar-customization-target {
     position: relative;
     max-width: 100%;
@@ -247,6 +338,27 @@
       margin-inline: var(--tab-block-margin);
     }
 
+    & #nav-bar {
+      padding-right: 0;
+
+      :root[zen-single-toolbar='true'] & {
+        margin-left: var(--zen-toolbox-padding);
+        width: calc(100% - var(--zen-toolbox-padding));
+        & .urlbar-input-container {
+          padding-left: 2px;
+        }
+        
+        #browser:has(#navigator-toolbox[zen-right-side='true']) & {
+          padding-left: 0;
+          margin-right: var(--zen-toolbox-padding);
+  
+          & .urlbar-input-container {
+            padding-right: 2px;
+            padding-left: 0;
+          }
+        }
+      }
+    }
 
     & #nav-bar {
       margin-top: 0;
@@ -388,6 +500,13 @@
     opacity: 0;
     width: var(--zen-toolbox-padding);
     height: 100%;
+    transition: opacity 0.2s ease-in-out;
+    background: var(--zen-colors-border);
+    appearance: none;
+
+    &:hover {
+      opacity: 1;
+    }
   }
 
   /* Mark: Move sidebar to the right */
@@ -494,18 +613,20 @@
     order: -1;
 
     min-width: unset !important;
-    --toolbarbutton-inner-padding: var(--zen-toolbar-button-inner-padding) !important;
+    --toolbarbutton-inner-padding: calc(var(--zen-toolbar-button-inner-padding) - 2px) !important;
 
     & #zen-sidebar-top-buttons-customization-target {
       height: 100%;
       align-items: center;
+      padding-inline-start: var(--zen-toolbox-padding);
 
       #nav-bar:has(&) & {
         padding-inline-start: var(--toolbarbutton-outer-padding);
       }
 
       #browser:has(#navigator-toolbox[zen-right-side='true']) & {
-        padding-inline-start: calc(var(--zen-toolbox-padding) - var(--toolbarbutton-outer-padding)) !important;
+        padding-inline-start: 0;
+        padding-inline-end: var(--zen-toolbox-padding);
       }
 
       & toolbarbutton {

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

@@ -9,7 +9,6 @@
   --urlbarView-separator-color: var(--zen-colors-border);
   --urlbarView-hover-background: var(--toolbarbutton-hover-background);
   --urlbarView-highlight-background: var(--toolbarbutton-hover-background);
-  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
   border-radius: var(--toolbarbutton-border-radius);
   overflow: hidden;
   padding: 1px;
@@ -36,12 +35,14 @@
 }
 
 #urlbar:not([focused='true']):not([breakout-extend="true"]) > #urlbar-background {
-  background: color-mix(in srgb, light-dark(#fff, var(--zen-colors-tertiary)) 60%, transparent 40%) !important;
+  background: light-dark(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1)) !important;
   backdrop-filter: blur(10px);
 }
 
 #urlbar-background {
   border: transparent !important;
+  margin: 1px 0;
+  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
 }
 
 #urlbar[focused='true']:not([suppress-focus-border]) > #urlbar-background,
@@ -51,15 +52,13 @@
   outline-color: none !important;
 }
 
-#identity-icon-box,
-#identity-permission-box {
-  background: color-mix(in srgb, var(--zen-colors-secondary) 50%, transparent 50%) !important;
-  margin: 0 8px 0 0 !important;
+#identity-icon-box {
+  background: light-dark(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1)) !important;
 }
 
-#identity-permission-box {
-  background: var(--zen-colors-border) !important;
-}
+#identity-permission-box:not(:hover):not(:focus-within) {
+  background: transparent !important;
+} 
 
 #urlbar:is([focused], [open]) > #urlbar-background,
 #searchbar:focus-within {
@@ -95,6 +94,10 @@
   padding: 0 !important;
   justify-content: center !important;
   align-items: center !important;
+  margin: 0;
+}
+
+#tracking-protection-icon-container {
   margin: 0 0 0 2px !important;
 }
 
@@ -102,11 +105,8 @@
 #tracking-protection-icon-container {
   width: calc(var(--urlbar-min-height) - 4 * var(--urlbar-container-padding)) !important;
   height: calc(var(--urlbar-min-height) - 4 * var(--urlbar-container-padding)) !important;
-}
-
-#identity-permission-box {
-  border-top-left-radius: 0 !important;
-  border-bottom-left-radius: 0 !important;
+  margin-top: auto !important;
+  margin-bottom: auto !important;
 }
 
 #identity-box:has(#notification-popup-box:not([hidden='true'])) #identity-icon-box,
@@ -205,15 +205,6 @@ button.popup-notification-dropmarker {
   border-radius: 10px !important;
 }
 
-/* Border radius of boxes on the left */
-#identity-box:has(#identity-permission-box:is([hasPermissions], [hasSharingIcon])):not([pageproxystate='invalid'])
-  #identity-icon-box {
-  border-top-left-radius: 10px !important;
-  border-bottom-left-radius: 10px !important;
-  border-top-right-radius: 0 !important;
-  border-bottom-right-radius: 0 !important;
-}
-
 /* Extensions or similar */
 #urlbar:not([breakout-extend='true']) #identity-box.chromeUI:not([pageproxystate='invalid']) #identity-icon-box {
   border-radius: 10px !important;
@@ -275,6 +266,5 @@ button.popup-notification-dropmarker {
 }*/
 
 #PersonalToolbar:not([collapsed='true']) {
-  padding-bottom: 10px;
   padding-left: 0 !important;
 }

src/browser/base/content/zenThemeModifier.js

@@ -36,7 +36,9 @@ var ZenThemeModifier = {
   },
 
   listenForEvents() {
-    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', this._onPrefersColorSchemeChange.bind(this));
+    if (this._inMainBrowserWindow) {
+      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', this._onPrefersColorSchemeChange.bind(this));
+    }
 
     var handleEvent = this.handleEvent.bind(this);
     // Listen for changes in the accent color and border radius

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 989e69245aeb1185125752db6b9c58e462d554e4..7f03aa20386ace32a340131a84c484865883905f 100644
+index 989e69245aeb1185125752db6b9c58e462d554e4..3eef114cc711505c647e21e35a063fb7bc9a0477 100644
 --- a/browser/components/customizableui/CustomizableUI.sys.mjs
 +++ b/browser/components/customizableui/CustomizableUI.sys.mjs
 @@ -13,6 +13,7 @@ ChromeUtils.defineESModuleGetters(lazy, {
@@ -86,3 +86,11 @@ index 989e69245aeb1185125752db6b9c58e462d554e4..7f03aa20386ace32a340131a84c48486
            if (defaultCollapsed !== null) {
              win.setToolbarVisibility(
                areaNode,
+@@ -4558,6 +4565,7 @@ export var CustomizableUI = {
+   unregisterArea(aName, aDestroyPlacements) {
+     CustomizableUIInternal.unregisterArea(aName, aDestroyPlacements);
+   },
++  get zenInternalCU() { return CustomizableUIInternal; },
+   /**
+    * Add a widget to an area.
+    * If the area to which you try to add is not known to CustomizableUI,

src/browser/themes/shared/toolbarbuttons-css.patch

@@ -0,0 +1,13 @@
+diff --git a/browser/themes/shared/toolbarbuttons.css b/browser/themes/shared/toolbarbuttons.css
+index ef04ef4eedb984f14ee1196a3f89b026b2d6d587..734985e86b2ee2987461766593ac6902a510e7b6 100644
+--- a/browser/themes/shared/toolbarbuttons.css
++++ b/browser/themes/shared/toolbarbuttons.css
+@@ -426,7 +426,7 @@ toolbarbutton.bookmark-item:not(.subviewbutton) {
+      */
+     align-items: stretch;
+     > .toolbarbutton-icon {
+-      height: auto;
++      margin-top: auto; margin-bottom: auto;
+     }
+     > .toolbarbutton-badge-stack {
+       align-items: center;

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

@@ -74,7 +74,7 @@
 #sidebar-button:-moz-locale-dir(ltr):not([positionend]),
 #sidebar-button:-moz-locale-dir(rtl)[positionend],
 #zen-sidepanel-button {
-  list-style-image: url('sidebars.svg') !important;
+  list-style-image: url('chrome://browser/skin/sidebars.svg') !important;
 }
 
 #downloads-button,
@@ -934,7 +934,7 @@ menuitem[contexttype='fullscreen'][label*='Exit'] {
 }
 
 #zen-context-menu-compact-mode {
-  --menu-image: url('sidebars.svg');
+  --menu-image: url('chrome://browser/skin/sidebars.svg');
 }
 
 #context_bookmarkTab,
@@ -961,7 +961,7 @@ menuitem[id='placesContext_showAllBookmarks'],
 }
 
 #BMB_viewBookmarksSidebar {
-  --menu-image: url('sidebars.svg');
+  --menu-image: url('chrome://browser/skin/sidebars.svg');
 }
 
 #BMB_searchBookmarks {

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

@@ -113,7 +113,6 @@
   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/sidebars-right.svg                      (../shared/zen-icons/sidebars-right.svg) 
-  skin/classic/browser/zen-icons/sidebars.svg                      (../shared/zen-icons/sidebars.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) 
   skin/classic/browser/zen-icons/split.svg                      (../shared/zen-icons/split.svg) 

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

@@ -1,3 +0,0 @@
-<svg width="15" height="13" viewBox="0 0 15 11" fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6.13525 1.5824H12.7046C13.2569 1.5824 13.7046 2.03011 13.7046 2.5824V8.5824C13.7046 9.13468 13.2569 9.5824 12.7046 9.5824H6.13525V1.5824ZM5.13525 0.582397H6.13525H12.7046C13.8092 0.582397 14.7046 1.47783 14.7046 2.5824V8.5824C14.7046 9.68697 13.8092 10.5824 12.7046 10.5824L6.13525 10.5824H5.13525L2.70459 10.5824C1.60002 10.5824 0.70459 9.68697 0.70459 8.5824V2.5824C0.70459 1.47783 1.60002 0.582397 2.70459 0.582397H5.13525ZM5.13525 9.5824H2.70459C2.15231 9.5824 1.70459 9.13468 1.70459 8.5824V2.5824C1.70459 2.03011 2.15231 1.5824 2.70459 1.5824H5.13525V9.5824Z"/>
-</svg>