Added label pansion for "expand on hover" prefs

src/browser/base/content/zen-sidebar-icons.inc.xhtml

@@ -1,7 +1,5 @@
-<toolbar id="zen-sidebar-icons-wrapper" class="zen-dont-hide-on-fullscreen">
+<toolbar brighttext="true" id="zen-sidebar-icons-wrapper" class="zen-dont-hide-on-fullscreen">
   <toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button chromeclass-toolbar-additional subviewbutton-nav" badge="true" closemenu="none" removable="true" delegatesanchor="true" cui-areatype="toolbar" id="zen-profile-button" data-l10n-id="toolbar-button-account" onclick="ZenProfileDialogUI.showSubView(this, event)">
-    <html:div class="zen-side-bar-profiles-button-panel-correction"></html:div>
-    <html:div></html:div>
   </toolbarbutton>
   <toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button" id="zen-expand-sidebar-button" data-l10n-id="sidebar-zen-expand" oncommand="gZenVerticalTabsManager.toggleExpand();"></toolbarbutton>
   <toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button" id="zen-sidepanel-button" data-l10n-id="sidebar-zen-sidepanel" onclick="gZenBrowserManagerSidebar.toggle();"></toolbarbutton>

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

@@ -72,7 +72,14 @@
   @media not (-moz-bool-pref: "zen.view.compact.hide-toolbar") {
     #navigator-toolbox {
       /* Remove the top margin */
-      --zen-compact-toolbox-margin: calc(var(--zen-compact-toolbox-margin-single) / 2) var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single);
+      /* The toolbox isn't relative to the webview anymore, meaning we can't just add a static value and call it a day... 
+       * The top margin is calculated by taking the following factors into account:
+       *  1. Element separation
+       *  2. Extra margin to separate from the webview
+       *  3. Add element separation variable, to avoid overlaping with the toolbar
+       *  4. Calculate toolbar height, taken from zen-urlbar.css
+       */
+      --zen-compact-toolbox-margin: calc(var(--zen-compact-toolbox-margin-single) + .15rem + var(--zen-element-separation) + (18px + (var(--toolbarbutton-inner-padding) * 2))) var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single);
     }
 
     #zen-sidebar-web-panel-wrapper,

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

@@ -48,6 +48,7 @@
 }
 
 .zen-sidebar-action-button {
+  --toolbarbutton-active-background: var(--zen-colors-secondary);
   width: var(--zen-sidebar-action-button-width);
   height: var(--zen-sidebar-action-button-width);
   padding: 0;
@@ -81,10 +82,6 @@
   background: transparent !important;
 }
 
-.zen-sidebar-action-button label {
-  display: none !important;
-}
-
 #sidebar-box[hidden="true"] .zen-sidebar-action-button,
 .zen-sidebar-panel-button[animate] {
   opacity: 0;
@@ -120,10 +117,11 @@
 #zen-profile-button {
   display: flex;
   justify-content: center;
+  position: relative;
   align-items: center;
 }
 
-#zen-profile-button > div:last-child {
+#zen-profile-button::before {
   background-image: var(--avatar-image-url);
   border-radius: 50%;
   background-size: cover;
@@ -131,6 +129,11 @@
   width: 20px;
   height: 20px;
   border: 2px solid var(--zen-colors-border);
+  content: '';
+  top: 50%;
+  left: var(--toolbar-start-end-padding);
+  transform: translateY(-50%);
+  position: absolute;
 }
 
 /* Ugly code */
@@ -146,12 +149,6 @@
 #TabsToolbar .zen-sidebar-action-button:nth-child(9),  .zen-sidebar-panel-button:nth-child(9) { animation-delay: 0.9s; }
 #TabsToolbar .zen-sidebar-action-button:nth-child(10), .zen-sidebar-panel-button:nth-child(10) { animation-delay: 1s; }
 
-#TabsToolbar .zen-side-bar-profiles-button-panel-correction {
-  position: absolute;
-  bottom: -2px;
-  right: -2px;
-}
-
 #zen-sidebar-icons-wrapper toolbarbutton {
   position: relative;
 }

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

@@ -432,7 +432,7 @@
     #navigator-toolbox:focus-within,
     #mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox,
     #navigator-toolbox:has(*[open="true"]:not(tab):not(#zen-sidepanel-button)) {
-      --zen-navigation-toolbar-min-width: 3.7rem !important;
+      --zen-navigation-toolbar-min-width: 3.3rem !important;
 
       & #TabsToolbar {
         z-index: 100 !important;
@@ -448,6 +448,24 @@
         display: none !important;
         visibility: hidden !important;
       }
+
+      & #zen-sidebar-icons-wrapper {
+        display: block !important;
+      }
+
+      & .zen-sidebar-action-button {
+        width: 100%;
+
+        & > * {
+          --toolbarbutton-active-background: transparent;
+        }
+
+        & label {
+          --toolbarbutton-hover-background: transparent;
+          display: block !important;
+          text-align: start;
+        }
+      }
     }
 
     @media (-moz-bool-pref: "zen.tabs.vertical.right-side") {