Merge branch 'main' into fix/keep-sidebar-visable-on-right-click

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

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

@@ -100,12 +100,6 @@ pref('zen.keyboard.shortcuts.disable-firefox', false);
 pref('zen.tabs.dim-pending', true);
 pref('zen.themes.updated-value-observer', false);
 
-#ifdef XP_MACOSX
-pref('zen.themes.tabs.legacy-location', true);
-#else
-pref('zen.themes.tabs.legacy-location', false);
-#endif
-
 // Pref to enable the new profiles (TODO: Check this out!)
 //pref("browser.profiles.enabled", true);
 

src/browser/base/content/ZenStartup.mjs

@@ -76,14 +76,6 @@
       }
       tabs.style.maxHeight = totalHeight + 'px';
       //console.info('ZenThemeModifier: set tabs max-height to', totalHeight + 'px');
-
-      const allTabs = document.getElementById('alltabs-button');
-      allTabs.removeAttribute('hidden');
-      allTabs.removeAttribute('badged');
-      allTabs.setAttribute('class', 'toolbarbutton-1 zen-sidebar-action-button');
-      document.getElementById('zen-sidebar-icons-wrapper').prepend(
-        allTabs
-      );
     },
 
     openWatermark() {
@@ -108,10 +100,6 @@
     _changeSidebarLocation() {
       const legacyLocation = Services.prefs.getBoolPref('zen.themes.tabs.legacy-location', false);
       const kElementsToAppend = ['sidebar-splitter', 'sidebar-box'];
-      if (legacyLocation) {
-        kElementsToAppend.push('navigator-toolbox');
-        window.document.documentElement.setAttribute('zen-sidebar-legacy', 'true');
-      }
       const wrapper = document.getElementById('zen-tabbox-wrapper');
       const appWrapepr = document.getElementById('zen-sidebar-box-container');
       for (let id of kElementsToAppend) {
@@ -124,9 +112,7 @@
 
       const browser = document.getElementById('browser');
       const toolbox = document.getElementById('navigator-toolbox');
-      if (!legacyLocation) {
-        browser.prepend(toolbox);
-      }
+      browser.prepend(toolbox);
 
       // remove all styles except for the width, since we are xulstoring the complet style list
       const width = toolbox.style.width;
@@ -140,6 +126,34 @@
       splitter.setAttribute('resizebefore', 'sibling');
       splitter.setAttribute('resizeafter', 'none');
       toolbox.insertAdjacentElement('afterend', splitter);
+
+      this._moveWindowButtons();
+      this._addSidebarButtons();
+    },
+
+    _moveWindowButtons() {
+      const windowControls = document.getElementById('titlebar-buttonbox-container');
+      const toolboxIcons = document.getElementById('zen-sidebar-top-buttons');
+      if (AppConstants.platform == "macosx") {
+        toolboxIcons.prepend(windowControls);
+      }
+    },
+
+    _addSidebarButtons() {
+      const sidebarBox = window.MozXULElement.parseXULToFragment(`
+        <toolbar id="zen-sidebar-top-buttons" fullscreentoolbar="true" brighttext="true">
+          <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 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)"></toolbarbutton>
+        </toolbar>
+      `);
+      document.getElementById('navigator-toolbox').prepend(sidebarBox);
+      const sideBarTopButtons = document.getElementById('zen-sidebar-top-buttons');
+
+      const panelMenu = document.getElementById('PanelUI-menu-button');
+      panelMenu.classList.add('zen-sidebar-action-button');
+      panelMenu.setAttribute('cui-areatype', 'toolbar');
+
+      sideBarTopButtons.prepend(panelMenu);
     },
 
     _focusSearchBar() {

src/browser/base/content/ZenUIManager.mjs

@@ -72,10 +72,18 @@ var gZenVerticalTabsManager = {
 
   _updateEvent() {
     this._updateMaxWidth();
+    const topButtons = document.getElementById('zen-sidebar-top-buttons');
+    const customizationTarget = document.getElementById('nav-bar-customization-target');
+    const tabboxWrapper = document.getElementById('zen-tabbox-wrapper');
+    const browser = document.getElementById('browser');
     if (Services.prefs.getBoolPref('zen.view.sidebar-expanded')) {
       this.navigatorToolbox.setAttribute('zen-expanded', 'true');
+      this.navigatorToolbox.prepend(topButtons);
+      browser.prepend(this.navigatorToolbox);
     } else {
       this.navigatorToolbox.removeAttribute('zen-expanded');
+      customizationTarget.prepend(topButtons);
+      tabboxWrapper.prepend(this.navigatorToolbox);
     }
     if (Services.prefs.getBoolPref('zen.tabs.vertical.right-side')) {
       this.navigatorToolbox.setAttribute('zen-right-side', 'true');

src/browser/base/content/zen-assets.jar.inc.mn

@@ -4,6 +4,7 @@
         content/browser/ZenStartup.mjs                          (content/ZenStartup.mjs)
         content/browser/ZenUIManager.mjs                        (content/ZenUIManager.mjs)
         content/browser/zen-components/ZenViewSplitter.mjs      (content/zen-components/src/ZenViewSplitter.mjs)
+        content/browser/zen-components/ZenThemesCommon.mjs      (content/zen-components/src/ZenThemesCommon.mjs)
         content/browser/zen-components/ZenWorkspaces.mjs        (content/zen-components/src/ZenWorkspaces.mjs)
         content/browser/zen-components/ZenSidebarManager.mjs    (content/zen-components/src/ZenSidebarManager.mjs)
         content/browser/zen-components/ZenProfileDialogUI.mjs   (content/zen-components/src/ZenProfileDialogUI.mjs)

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

@@ -1,9 +1,4 @@
 <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)">
-  </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>
-  <toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button" id="zen-bookmark-button" data-l10n-id="sidebar-menu-bookmarks" onclick="gZenUIManager.toogleBookmarksSidebar();"></toolbarbutton>
-  <toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button" id="zen-history-button" data-l10n-id="sidebar-menu-history" oncommand="PanelUI.showSubView('PanelUI-history', this);"></toolbarbutton>
   <toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button" id="zen-preferences-button" data-l10n-id="toolbar-settings-button" onclick="event.target.ownerGlobal.openPreferences(undefined);"></toolbarbutton>
+  <toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button" id="zen-sidepanel-button" data-l10n-id="sidebar-zen-sidepanel" onclick="gZenBrowserManagerSidebar.toggle();"></toolbarbutton>
 </toolbar>

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

@@ -1,12 +1,19 @@
 :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 */
-    --zen-webview-correction-margin: 2px;
     margin-left: var(--zen-webview-correction-margin);
     margin-top: var(--zen-webview-correction-margin);
 

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

@@ -14,8 +14,8 @@
 
   #navigator-toolbox {
     --zen-compact-toolbox-margin-single: calc(var(--zen-element-separation) * 2);
-    --zen-compact-toolbox-margin:
-      calc(var(--zen-compact-toolbox-margin-single) / 2) var(--zen-compact-toolbox-margin-single)
+    --zen-compact-toolbox-margin: 
+      calc(var(--zen-compact-toolbox-margin-single) / 2) var(--zen-compact-toolbox-margin-single) 
       calc(var(--zen-compact-toolbox-margin-single) + var(--zen-element-separation)) var(--zen-compact-toolbox-margin-single);
     position: absolute !important;
     display: block;
@@ -86,24 +86,11 @@
   @media not (-moz-bool-pref: 'zen.view.compact.hide-toolbar') {
     #navigator-toolbox {
       /* Remove the top margin */
-      /* 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-element-separation) + 0.8rem +
-        (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-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);
 
       margin-top: 0 !important;
-      :root[zen-sidebar-legacy='true'] & {
-        --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);
-      }
     }
 
     #zen-sidebar-web-panel-wrapper,

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

@@ -14,10 +14,6 @@
 
   #browser {
     --zen-toolbox-padding: 5px;
-
-    :root:not([zen-sidebar-legacy='true']) & {
-      --zen-toolbox-top-align: var(--zen-toolbox-padding);
-    }
   }
 
   #navigator-toolbox {
@@ -70,8 +66,6 @@
       max-width: unset !important;
       padding: 0 !important;
 
-      font-size: var(--urlbarView-small-font-size);
-
       position: relative;
 
       height: calc(var(--tab-min-height) + var(--tab-block-margin) * 2) !important;
@@ -99,7 +93,7 @@
   #zen-sidebar-icons-wrapper {
     background: transparent;
 
-    & toolbarbutton {
+    & toolbarbutton:not(#zen-workspaces-button) {
       width: fit-content;
       padding: 0 !important;
     }
@@ -109,7 +103,6 @@
     margin-inline-end: 0 !important;
     padding-top: 0 !important;
     border-top: solid transparent 0px !important;
-    margin: 0 2px !important;
 
     &[showborder] {
       padding-top: 4px !important;
@@ -162,18 +155,17 @@
     --zen-toolbox-min-width: 150px;
 
     & #zen-sidebar-icons-wrapper {
-      display: grid;
+      display: flex;
       /* Make sure the icons take most of the space, smartly */
-      grid-template-columns: repeat(auto-fit, minmax(34px, auto));
-      gap: 4px;
+      flex-direction: row;
       justify-content: space-between;
 
       padding-top: calc(var(--zen-toolbox-padding) * 2);
 
       width: 100%;
       position: relative;
 
-      --toolbarbutton-inner-padding: 9px !important;
+      --toolbarbutton-inner-padding: var(--zen-toolbar-button-inner-padding) !important;
 
       justify-content: space-between;
     }
@@ -242,10 +234,6 @@
     }
 
     @media (-moz-bool-pref: 'zen.view.sidebar-expanded.on-hover') {
-      :root:not([zen-sidebar-legacy='true']) #navigator-toolbox:is([zen-user-hover='true']:hover, :not([zen-user-hover='true'])) {
-        padding-right: 47px !important;
-      }
-
       & #zen-profile-button {
         width: 100% !important;
         padding: var(--toolbarbutton-inner-padding) !important;
@@ -475,5 +463,20 @@
     margin-right: var(--zen-element-separation);
     padding: 0 !important;
     opacity: 0;
+    display: none;
+  }
+
+  /* Mark: Sidebar top buttons */
+  #zen-sidebar-top-buttons {
+    --toolbarbutton-inner-padding: var(--zen-toolbar-button-inner-padding) !important;
+
+    gap: 5px;
+    & .zen-sidebar-action-button {
+      padding: 0 !important;
+
+      & label {
+        display: none !important;
+      }
+    }
   }
 }

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

@@ -74,6 +74,10 @@
   --zen-button-border-radius: 7px;
   --zen-button-padding: 0.6rem 1.2rem;
 
+  /* Toolbar */
+  --zen-toolbar-height: 39px;
+  --zen-toolbar-button-inner-padding: 6px;
+
   /* Other colors */
   --urlbar-box-bgcolor: var(--zen-urlbar-background) !important;
   --toolbar-field-focus-background-color: var(--urlbar-box-bgcolor) !important;

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

@@ -1,4 +1,5 @@
-#nav-bar {
+#nav-bar,
+#zen-sidebar-top-buttons {
   background: transparent;
 }