Enable hardware acceleration and web rendering for improved performance and rendering quality.

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

@@ -143,6 +143,9 @@ pref('gfx.font_rendering.cleartype_params.gamma', 1750);
 #endif
 #endif
 
+pref('gfx.webrender.all', true);
+pref('layers.acceleration.force-enabled', true);
+
 #include better-fox.js
 
 // Betterfox overrides (Stay below the include directive)

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

@@ -25,7 +25,6 @@ html#main-window > body {
 :not([inDOMFullscreen="true"]) #appcontent,
 #sidebar-box {
   /** Sidebar is already hidden in full screen mode */
-  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
   border: none;
 }
 

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

@@ -168,22 +168,10 @@
   }
 
   @media (-moz-bool-pref: "zen.tabs.vertical.right-side") {
-    #navigator-toolbox {
-      right: 0 !important;
+    /* TODO: future contributor, i've tried insane hours to do right side compact mode but failed, good luck debugging this! */
+    /*#navigator-toolbox {
+      left: 100% !important;
       transform: translateX(calc(100% - (var(--zen-compact-toolbox-margin-single) / 2))) !important;;
-    }
-
-    #navigator-toolbox:hover,
-    #navigator-toolbox:focus-within,
-    #navigator-toolbox[zen-user-show],
-    #mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox,
-    #navigator-toolbox:has(*[open="true"]:not(tab):not(#zen-sidepanel-button)) {
-      transform: none !important;
-      opacity: 1;
-  
-      & > * {
-        pointer-events: all;  
-      }
-    }
+    }*/
   }
 }

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

@@ -40,7 +40,7 @@
   background: transparent !important;  
   border-color: transparent !important;
   width: 1px !important;
-  margin-right: 5px !important;
+  margin-right: 5px;
 }
 
 #sidebar-box[positionend] {

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

@@ -7,6 +7,11 @@
   #navigator-toolbox {
     --zen-tabbrowser-padding: 5px;
     margin-top: 0; /* Issue #156 */
+    order: 0 !important;
+  }
+
+  #zen-sidebar-splitter {
+    order: 0 !important;
   }
   
   #navigator-toolbox {
@@ -381,20 +386,17 @@
   /* Display the vertical tabs on the right side */
   @media (-moz-bool-pref: "zen.tabs.vertical.right-side") and (not (-moz-bool-pref: "zen.view.compact")) {
     #navigator-toolbox {
-      order: 6;
-      padding-left: 0;
+      order: 6 !important;
+      padding-left: 0 !important;
+      padding: calc(var(--zen-tabbrowser-padding) * 1.5);
     }
 
     #zen-sidebar-splitter {
-      order: 5;
-    }
-
-    #tabbrowser-tabbox {
-      padding-left: var(--zen-element-separation);
+      order: 5 !important;
     }
 
     #tabbrowser-tabpanels .browserSidebarContainer {
-      margin-right: 0 !important;
+      margin-left: var(--zen-element-separation) !important;
     }
   }
 

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

@@ -1,12 +1,36 @@
 diff --git a/browser/components/sidebar/browser-sidebar.js b/browser/components/sidebar/browser-sidebar.js
-index d05d561b6d01b11a36c762fc39dc13e14181bce7..cbb85d7019a68f283e38c45172eda605c7b90144 100644
+index d05d561b6d01b11a36c762fc39dc13e14181bce7..b3aaf776c1fdeb1c02f88f2e8d5f424215b2cc26 100644
 --- a/browser/components/sidebar/browser-sidebar.js
 +++ b/browser/components/sidebar/browser-sidebar.js
-@@ -471,6 +471,7 @@ var SidebarController = {
+@@ -446,7 +446,7 @@ var SidebarController = {
+    */
+   setPosition() {
+     // First reset all ordinals to match DOM ordering.
+-    let browser = document.getElementById("browser");
++    let browser = document.getElementById("zen-tabbox-wrapper");
+     [...browser.children].forEach((node, i) => {
+       node.style.order = i + 1;
+     });
+@@ -460,9 +460,11 @@ var SidebarController = {
+       let boxOrdinal = this._box.style.order;
+       this._box.style.order = appcontent.style.order;
+ 
+-      appcontent.style.order = boxOrdinal;
++      // appcontent.style.order = boxOrdinal;
+       // the launcher should be on the right of the sidebar-box
+-      sidebarContainer.style.order = parseInt(this._box.style.order) + 1;
++      this._box.style.order = browser.children.length + 2;
++      this._splitter.style.order = browser.children.length + 1;
++      this._splitter.style.marginRight = 0;
+       // Indicate we've switched ordering to the box
+       this._box.setAttribute("positionend", true);
+       sidebarMain.setAttribute("positionend", true);
+@@ -471,6 +473,8 @@ var SidebarController = {
        this._box.removeAttribute("positionend");
        sidebarMain.removeAttribute("positionend");
        sidebarContainer.removeAttribute("positionend");
 +      this._box.style.order = 0;
++      this._splitter.style.removeProperty("margin-right");
      }
  
      this.hideSwitcherPanel();