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

refactor: update styling and structure of Zen UI components; remove d…

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

@@ -118,12 +118,10 @@ pref('zen.glance.activation-method', 'ctrl'); // ctrl, alt, shift, none, hold
 #endif
 
 pref('zen.view.sidebar-height-throttle', 200); // in ms
-pref('zen.view.sidebar-expanded', true);
-pref('zen.view.sidebar-expanded.on-hover', false);
 pref('zen.view.sidebar-expanded.max-width', 400);
 
 pref('zen.view.show-bottom-border', false);
-pref('zen.view.sidebar-collapsed.hide-mute-button', true);
+pref('zen.view.use-single-toolbar', true);
 
 pref('zen.tabs.dim-pending', true);
 pref('zen.tabs.newtab-on-middle-click', true);

src/browser/base/content/ZenCustomizableUI.sys.mjs

@@ -9,7 +9,7 @@ export var ZenCustomizableUI = new (class {
       'zen-sidebar-top-buttons',
       {
         type: this.TYPE_TOOLBAR,
-        defaultPlacements: ['preferences-button', 'zen-expand-sidebar-button', 'zen-sidepanel-button'],
+        defaultPlacements: ['zen-sidepanel-button'],
         defaultCollapsed: null,
       },
       true
@@ -45,7 +45,6 @@ export var ZenCustomizableUI = new (class {
         customizationtarget="zen-sidebar-top-buttons-customization-target"
         mode="icons">
         <hbox id="zen-sidebar-top-buttons-customization-target" class="customization-target" flex="1">
-          <toolbarbutton removable="true" class="chromeclass-toolbar-additional toolbarbutton-1 zen-sidebar-action-button" id="zen-expand-sidebar-button" data-l10n-id="sidebar-zen-expand" cui-areatype="toolbar" oncommand="gZenVerticalTabsManager.toggleExpand();"></toolbarbutton>
           <toolbarbutton removable="true" class="toolbarbutton-1 zen-sidebar-action-button zen-compact-mode-ignore" id="zen-sidepanel-button" data-l10n-id="sidebar-zen-sidepanel" onclick="gZenBrowserManagerSidebar.toggle();"></toolbarbutton>
         </hbox>
       </toolbar>

src/browser/base/content/ZenUIManager.mjs

@@ -118,10 +118,8 @@ var gZenUIManager = {
 var gZenVerticalTabsManager = {
   init() {
     var updateEvent = this._updateEvent.bind(this);
-    Services.prefs.addObserver('zen.view.sidebar-expanded', 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.sidebar-expanded.on-hover', updateEvent);
 
     gZenCompactModeManager.addEventListener(updateEvent);
     this._updateEvent();
@@ -152,31 +150,6 @@ var gZenVerticalTabsManager = {
     return this._navigatorToolbox;
   },
 
-  _updateOnHoverVerticalTabs() {
-    const onHover = Services.prefs.getBoolPref('zen.view.sidebar-expanded.on-hover');
-    const expanded = Services.prefs.getBoolPref('zen.view.sidebar-expanded');
-    const sidebar = this.navigatorToolbox;
-
-    if (onHover) {
-      // if the sidebar is not expanded, and hover detection is enabled, show the sidebar
-      sidebar.removeAttribute('zen-expanded');
-      sidebar.setAttribute('zen-user-hover', 'true');
-
-      sidebar.removeAttribute('zen-has-hover');
-    } 
-    else if (expanded) {
-      // if the sidebar is expanded, close, and remove hover detection
-      sidebar.setAttribute('zen-expanded', 'true');
-      sidebar.removeAttribute('zen-user-hover');
-      sidebar.removeAttribute('zen-has-hover');
-    } else {
-      // if the sidebar is not expanded, and hover detection is disabled, hide the sidebar
-      sidebar.removeAttribute('zen-expanded');
-      sidebar.removeAttribute('zen-user-show');
-      sidebar.removeAttribute('zen-user-hover');
-    }
-  },
-
   initRightSideOrderContextMenu() {
     const kConfigKey = 'zen.tabs.vertical.right-side';
     const fragment = window.MozXULElement.parseXULToFragment(`
@@ -190,13 +163,14 @@ var gZenVerticalTabsManager = {
     document.getElementById('viewToolbarsMenuSeparator').before(fragment);
   },
 
+  get isWindowsStyledButtons() {
+    return !(window.AppConstants.platform === 'macosx'|| window.matchMedia('(-moz-gtk-csd-reversed-placement)').matches);
+  },
+
   _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');
-    const sidebarExpanded = Services.prefs.getBoolPref('zen.view.sidebar-expanded');
 
     if (Services.prefs.getBoolPref('zen.tabs.vertical.right-side')) {
       this.navigatorToolbox.setAttribute('zen-right-side', 'true');
@@ -206,10 +180,8 @@ var gZenVerticalTabsManager = {
 
     // Check if the sidebar is in hover mode
     if (
-      sidebarExpanded &&
       !this.navigatorToolbox.hasAttribute('zen-right-side') &&
-      !Services.prefs.getBoolPref('zen.view.compact') &&
-      !Services.prefs.getBoolPref('zen.view.sidebar-expanded.on-hover')
+      !Services.prefs.getBoolPref('zen.view.compact')
     ) {
       this.navigatorToolbox.prepend(topButtons);
     //  browser.prepend(this.navigatorToolbox);
@@ -218,28 +190,39 @@ var gZenVerticalTabsManager = {
     //  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'));
+      }
+      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');
+      for (const button of elements) {
+        buttonsTarget.append(button);
+      }
+      topButtons.appendChild(document.getElementById('PanelUI-button'));
+      if (this.isWindowsStyledButtons) {
+        document.getElementById('zen-appcontent-navbar-container').append(
+          document.querySelector('#nav-bar > .titlebar-buttonbox-container')
+        );
+      }
+    }
+
     // Always move the splitter next to the sidebar
     this.navigatorToolbox.after(document.getElementById('zen-sidebar-splitter'));
-
-    this._updateOnHoverVerticalTabs();
   },
 
   _updateMaxWidth() {
     const isCompactMode = Services.prefs.getBoolPref('zen.view.compact');
-    const expanded = this.expanded;
     const maxWidth = Services.prefs.getIntPref('zen.view.sidebar-expanded.max-width');
     const toolbox = document.getElementById('navigator-toolbox');
-    if (expanded && !isCompactMode) {
+    if (!isCompactMode) {
       toolbox.style.maxWidth = `${maxWidth}px`;
     } else {
       toolbox.style.removeProperty('maxWidth');
     }
   },
 
-  get expanded() {
-    return Services.prefs.getBoolPref('zen.view.sidebar-expanded');
-  },
-
   get expandButton() {
     if (this._expandButton) {
       return this._expandButton;
@@ -248,30 +231,6 @@ var gZenVerticalTabsManager = {
     return this._expandButton;
   },
 
-  toggleExpand() {
-    const pausedForExpand = this._hoverPausedForExpand;
-    const onHover = Services.prefs.getBoolPref('zen.view.sidebar-expanded.on-hover');
-    const expanded = Services.prefs.getBoolPref('zen.view.sidebar-expanded');
-
-
-    if (onHover && !expanded) {
-      // Expand sidebar and disable hover detection
-      Services.prefs.setBoolPref('zen.view.sidebar-expanded.on-hover', false);
-      this._hoverPausedForExpand = true;
-      Services.prefs.setBoolPref('zen.view.sidebar-expanded', true);
-    } else if (pausedForExpand && expanded) {
-      // Re-enable hover detection when closing
-      this._hoverPausedForExpand = false;
-      Services.prefs.setBoolPref('zen.view.sidebar-expanded', false);
-      Services.prefs.setBoolPref('zen.view.sidebar-expanded.on-hover', true); // Re-enable hover detection when closing
-    }
-    else {
-      // Toggle sidebar
-      Services.prefs.setBoolPref('zen.view.sidebar-expanded.on-hover', false);
-      Services.prefs.setBoolPref('zen.view.sidebar-expanded', !expanded);
-    }
-  },
-
   toggleTabsOnRight() {
     const newVal = !Services.prefs.getBoolPref('zen.tabs.vertical.right-side');
     Services.prefs.setBoolPref('zen.tabs.vertical.right-side', newVal);

src/browser/base/content/zen-assets.inc.xhtml

@@ -20,7 +20,6 @@
 <link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-profile-dialog.css" />
 <link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-sidebar-panels.css" />
 <link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-popup.css" />
-<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-cool-toolbar.css" />
 
 <link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-compact-mode.css" />
 <link rel="stylesheet" type="text/css" href="chrome://browser/skin/zen-icons/icons.css" />

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

@@ -43,7 +43,6 @@
         content/browser/zen-styles/zen-popup.css                (content/zen-styles/zen-popup.css)
         content/browser/zen-styles/zen-sidebar-panels.css       (content/zen-styles/zen-sidebar-panels.css)
         content/browser/zen-styles/zen-gradient-generator.css   (content/zen-styles/zen-gradient-generator.css)
-        content/browser/zen-styles/zen-cool-toolbar.css         (content/zen-styles/zen-cool-toolbar.css)
 
         content/browser/zen-styles/zen-panels/bookmarks.css     (content/zen-styles/zen-panels/bookmarks.css)
         content/browser/zen-styles/zen-panels/extensions.css    (content/zen-styles/zen-panels/extensions.css)

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

@@ -4,9 +4,17 @@
     border-radius: var(--zen-webview-border-radius, var(--zen-border-radius));
     position: relative;
 
-    &:not([zen-split="true"]) {
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
+    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;
+
+    #browser:has(#navigator-toolbox[zen-right-side='true']) & {
+      margin-right: 0;
+      margin-left: var(--zen-element-separation);
+    }
+
+    :root[zen-no-padding='true'] &:not([zen-split="true"]) {
+      border-radius: 0 !important;
     }
   }
 }

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

@@ -77,6 +77,19 @@
   overflow-x: hidden;
 }
 
+:root:not([inDOMFullscreen='true']):not([chromehidden~='location']):not([chromehidden~='toolbar']) {
+  & #zen-appcontent-wrapper {
+    margin: var(--zen-element-separation);
+    margin-left: 0;
+    margin-top: 0;
+  }
+
+  #browser:has(#navigator-toolbox[zen-right-side='true']) & #zen-appcontent-wrapper {
+    margin-right: 0;
+    margin-left: var(--zen-element-separation);
+  }
+}
+
 #tabbrowser-tabbox {
   display: flex;
   flex-direction: row;

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

@@ -4,11 +4,11 @@
   visibility: inherit;
 }
 
-#zen-appcontent-wrapper {
+#tabbrowser-tabpanels {
   transition: transform 0.1s ease-in-out;
 }
 
-#zen-appcontent-wrapper:has(.zen-glance-background) {
+#tabbrowser-tabpanels:has(.zen-glance-background) {
   transform: scale(0.98);
   backdrop-filter: blur(5px);