Refactor ZenStartup to update default placements for sidebar buttons

zen-browser · Sep 20, 2024 · 1d22062 · 1d22062
1 parent 3219722
commit 1d22062
Show file tree

Hide file tree

Showing 10 changed files with 82 additions and 49 deletions.
diff --git a/src/browser/app/profile/zen-browser.js b/src/browser/app/profile/zen-browser.js
@@ -74,7 +74,7 @@ pref('zen.tabs.vertical', true);
 pref('zen.tabs.vertical.right-side', false);
 pref('zen.theme.accent-color', "#aac7ff");
 pref('zen.theme.border-radius', 5); // In pixels
-pref('zen.theme.content-element-separation', 4); // In pixels
+pref('zen.theme.content-element-separation', 8); // In pixels
 pref('zen.theme.toolbar-themed', true);
 pref('zen.theme.pill-button', false);
 pref('zen.view.compact', false);

diff --git a/src/browser/base/content/ZenStartup.mjs b/src/browser/base/content/ZenStartup.mjs
@@ -177,10 +177,6 @@
 
       const newTab = document.getElementById('vertical-tabs-newtab-button');
       newTab.classList.add('zen-sidebar-action-button');
-      newTab.setAttribute('cui-areatype', 'toolbar');
-
-      const iconsWrapper = document.getElementById('zen-sidebar-icons-wrapper');
-      iconsWrapper.appendChild(newTab);
 
       setTimeout(() => {
         CustomizableUI.registerArea(

diff --git a/src/browser/base/content/zen-components b/src/browser/base/content/zen-components
diff --git a/src/browser/base/content/zen-sidebar-panel.inc.xhtml b/src/browser/base/content/zen-sidebar-panel.inc.xhtml
@@ -1,4 +1,4 @@
-<box id="zen-sidebar-web-panel-wrapper">
+<hbox flex="1" id="zen-sidebar-web-panel-wrapper">
   <box id="zen-sidebar-web-panel" class="chromeclass-extrachrome" hidden="true" persist="pinned style hidden">
     <toolbar mode="icons" flex="1" id="zen-sidebar-web-header">
       <hbox>
@@ -29,4 +29,4 @@
     <html:span id="zen-sidebar-web-panel-splitter"></html:span>
     <html:span id="zen-sidebar-web-panel-hsplitter"></html:span>
   </box>
-</box>
+</hbox>
diff --git a/src/browser/base/content/zen-styles/zen-browser-container.css b/src/browser/base/content/zen-styles/zen-browser-container.css
@@ -1,27 +1,10 @@
 :root:not([inDOMFullscreen='true']):not([chromehidden~='location']):not([chromehidden~='toolbar']) {
-  #tabbrowser-tabbox {
-    --zen-webview-correction-margin: 2px;
-
-    & > *:not(#tabbrowser-tabpanels) {
-      margin-top: var(--zen-webview-correction-margin);
-    }
-  }
-
   & #tabbrowser-tabbox #tabbrowser-tabpanels .browserSidebarContainer {
     width: -moz-available;
     border-radius: var(--zen-webview-border-radius, var(--zen-border-radius));
     transform: translate3d(0, 0, 0);
     position: relative;
 
-    /* This fixes an issue with the left border */
-    margin-left: var(--zen-webview-correction-margin);
-    margin-top: var(--zen-webview-correction-margin);
-
-    #browser:has(#navigator-toolbox[zen-right-side="true"]) & {
-      margin-left: 0;
-      margin-right: var(--zen-webview-correction-margin);
-    }
-
     --uc-tweak-rounded-corners-shadow-color: var(--zen-colors-border);
 
     --uc-tweak-rounded-corners-shadow:

diff --git a/src/browser/base/content/zen-styles/zen-sidebar-panels.css b/src/browser/base/content/zen-styles/zen-sidebar-panels.css
@@ -68,12 +68,16 @@
 }
 
 #zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned='true']) {
-  margin: var(--zen-appcontent-separator-from-window);
   position: absolute;
   z-index: 1;
   width: -moz-available;
-  padding: var(--zen-sidebar-web-panel-spacing);
-  height: calc(100% - var(--zen-element-separation));
+  margin: var(--zen-sidebar-web-panel-spacing);
+  /* Why times 3? 
+   *  + 1 for the top margin, making the element overflow the view.
+   *  + 1 for the margin we want to add at the bottom
+   *  + 1 so that the panel can be correctly spaced from the border of the webview
+   */ 
+  height: calc(100% - var(--zen-sidebar-web-panel-spacing) * 3);
 }
 
 #zen-sidebar-web-panel {
@@ -147,6 +151,7 @@
   position: absolute;
   z-index: 1;
   animation: zen-sidebar-panel-animation-2 0.15s ease-in-out forwards;
+  max-height: 100%;
 }
 
 #zen-sidebar-web-panel[hidden='true'][pinned='true'] {

diff --git a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
@@ -8,6 +8,11 @@
     height: 100%;
   }
 
+  #TabsToolbar > * {
+    justify-content: center;
+
+  }
+
   #private-browsing-indicator-with-label {
     display: none !important;
   }
@@ -29,14 +34,14 @@
     padding-top: var(--zen-toolbox-top-align);
     padding-bottom: var(--zen-element-separation);
 
-    margin-top: 0 !important;
+    margin-top: -4px !important;
     display: flex;
   }
 
 
   #TabsToolbar-customization-target {
     position: relative;
-    gap: var(--zen-toolbox-padding);
+    gap: 0;
     &::after {
       content: '';
       display: block;
@@ -49,6 +54,10 @@
       position: absolute;
       bottom: calc(-1 * var(--zen-toolbox-padding));
     }
+
+    & > * {
+      border-top-width: 0 !important;
+    }
   }
 
   #vertical-tabs-newtab-button {
@@ -101,6 +110,7 @@
     background: transparent;
     padding: 0;
     gap: 5px;
+    align-items: center;
 
     & > toolbarbutton:not(#zen-workspaces-button) {
       padding: 0 !important;
@@ -182,6 +192,41 @@
         width: 100%;
         bottom: calc(-0.5 * var(--zen-toolbox-padding));
       }
+
+      & > *:not(tabs):not(#search-container) {
+        width: 100%;
+        border-radius: var(--tab-border-radius);
+
+        padding-left: var(--toolbarbutton-inner-padding);
+        padding-right: var(--toolbarbutton-inner-padding);
+
+        & label {
+          display: flex;
+          width: 0;
+        }
+
+        & image {
+          height: 16px;
+          width: 16px;
+          padding: 0 !important;
+        }
+
+        &:is([open], [checked]) {
+          background: var(--toolbarbutton-active-background) !important;
+
+          & image, label {
+            background: transparent !important;
+          }
+        }
+
+        &:hover {
+          background: var(--toolbarbutton-hover-background) !important;
+
+          & image, label {
+            background: transparent !important;
+          }
+        }
+      }
     }
 
     & #tabbrowser-tabs {
@@ -285,8 +330,12 @@
       border-bottom-right-radius: 0;
     }
 
-    & #TabsToolbar-customization-target::after {
-      bottom: 0 !important;
+    & #TabsToolbar-customization-target {
+      padding-bottom: var(--zen-toolbox-padding);
+
+      &::after {
+        bottom: -1px !important;
+      }
     }
 
     & #tabbrowser-tabs {
@@ -348,12 +397,6 @@
           &[active='true']::after {
             bottom: 50% !important;
             transform: translateY(50%) !important;
-
-            :root:has(#navigator-toolbox[zen-right-side='true']) & {
-              left: unset !important;
-              right: -2px !important;
-              animation: zen-workspaces-button-active-collapsed-right 0.1s ease-in-out !important;
-            }
           }
 
           :root:has(#navigator-toolbox:not([zen-right-side='true'])) &[active='true']::after {
@@ -363,7 +406,7 @@
 
           :root:has(#navigator-toolbox[zen-right-side='true']) &[active='true']::after {
             left: unset !important;
-            right: -2px !important;
+            right: -2px;
             animation: zen-workspaces-button-active-collapsed-right 0.1s ease-in-out !important;
           }
         }
@@ -478,13 +521,17 @@
   }
 
   /* Customization mode */
-  :root[customizing] #TabsToolbar > *:not(#zen-sidebar-icons-wrapper) {
+  /*:root[customizing] #TabsToolbar > *:not(#zen-sidebar-icons-wrapper) {
     overflow: hidden;
     max-width: 0 !important;
     margin-right: var(--zen-element-separation);
     padding: 0 !important;
     opacity: 0;
     display: none;
+  }*/
+
+  :root[customizing] #TabsToolbar > * {
+    min-width: unset !important;
   }
 
   /* Mark: Sidebar top buttons */
@@ -497,7 +544,7 @@
       align-items: center;
 
       #nav-bar:has(&) & {
-        padding-inline-start: calc(var(--zen-toolbox-padding) * 1.5) !important;
+        padding-inline-start: calc(var(--zen-toolbox-padding) + var(--toolbarbutton-outer-padding)) !important;
       }
 
       & toolbarbutton {
@@ -514,9 +561,4 @@
       }
     }
   }
-
-  /** Add transition delays */
-  #navigator-toolbox, #navigator-toolbox > * {
-    transition-delay: 2s !important;
-  }
 }
diff --git a/src/browser/base/content/zen-styles/zen-urlbar.css b/src/browser/base/content/zen-styles/zen-urlbar.css
@@ -1,5 +1,10 @@
 /* URL and tool bars */
 
+#urlbar-container {
+  padding-block: 0 !important;
+  padding-bottom: 2px !important;
+}
+
 #urlbar {
   --toolbarbutton-border-radius: 10px;
   --urlbarView-separator-color: var(--zen-colors-border);

diff --git a/src/browser/base/content/zen-styles/zen-workspaces.css b/src/browser/base/content/zen-styles/zen-workspaces.css
@@ -8,7 +8,8 @@
   &:not([as-button='true']) {
     border-radius: var(--zen-button-border-radius);
     background: color-mix(in srgb, var(--zen-colors-border) 50%, transparent 50%);
-    padding: 7px;
+    padding: 5px;
+    height: fit-content;
     gap: 3px;
 
     & toolbarbutton {

diff --git a/src/browser/components/customizableui/CustomizableUI-sys-mjs.patch b/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..10967d5e2e1c5f3804ea367caf7b1e075a5680d0 100644
+index 289c3df7dcd6fa6b35681ce61c1e920b6a2651d7..07ecece92643203d376378818facfc55774c63e9 100644
 --- a/browser/components/customizableui/CustomizableUI.sys.mjs
 +++ b/browser/components/customizableui/CustomizableUI.sys.mjs
 @@ -25,7 +25,7 @@ ChromeUtils.defineLazyGetter(lazy, "gWidgetsBundle", function () {
@@ -30,8 +30,9 @@ index 289c3df7dcd6fa6b35681ce61c1e920b6a2651d7..10967d5e2e1c5f3804ea367caf7b1e07
 -          "firefox-view-button",
 +//          "firefox-view-button",
            "tabbrowser-tabs",
-           "new-tab-button",
+-          "new-tab-button",
 -          "alltabs-button",
++//          "new-tab-button",
 +//          "alltabs-button",
          ],
          defaultCollapsed: null,