feat: Update new tab button preferences and improve workspace indicator styles

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

@@ -81,8 +81,8 @@ pref('zen.theme.pill-button', false);
 pref('zen.theme.gradient', true);
 
 pref('zen.tabs.show-newtab-vertical', true);
-pref('zen.view.show-newtab-button-border-top', false);
+pref('zen.view.show-newtab-button-border-top', true);
-pref('zen.view.show-newtab-button-top', true);
+pref('zen.view.show-newtab-button-top', false);
 
 #ifdef XP_MACOSX
 // Disable for macos in the meantime until @HarryHeres finds a solution for hight DPI screens

src/browser/base/content/navigator-toolbox-inc-xhtml.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/base/content/navigator-toolbox.inc.xhtml b/browser/base/content/navigator-toolbox.inc.xhtml
-index 12fa0cf79aade28581016adf96df85386dabdcef..846add9b040abf0f7378ebaaadef007013f5a1ec 100644
+index 12fa0cf79aade28581016adf96df85386dabdcef..52f15cd79388cefa1e07644602df93dce5d6fa74 100644
 --- a/browser/base/content/navigator-toolbox.inc.xhtml
 +++ b/browser/base/content/navigator-toolbox.inc.xhtml
 @@ -2,7 +2,7 @@
@@ -51,7 +51,15 @@ index 12fa0cf79aade28581016adf96df85386dabdcef..846add9b040abf0f7378ebaaadef0070
                <tab is="tabbrowser-tab" class="tabbrowser-tab" selected="true" visuallyselected="" fadein=""/>
                <hbox id="tabbrowser-arrowscrollbox-periphery">
                  <toolbartabstop/>
-@@ -113,9 +119,10 @@
+@@ -90,7 +96,6 @@
+                          ondrop="newTabButtonObserver.onDrop(event)"
+                          ondragover="newTabButtonObserver.onDragOver(event)"
+                          ondragenter="newTabButtonObserver.onDragOver(event)"
+-                         cui-areatype="toolbar"
+                          removable="true"/>
+ 
+           <toolbarbutton id="alltabs-button"
+@@ -113,9 +118,10 @@
        <toolbarbutton id="content-analysis-indicator"
                       oncommand="ContentAnalysis.showPanel(this, PanelUI);"
                       class="toolbarbutton-1 content-analysis-indicator-icon"/>
@@ -64,7 +72,7 @@ index 12fa0cf79aade28581016adf96df85386dabdcef..846add9b040abf0f7378ebaaadef0070
      </toolbar>
  
    </vbox>
-@@ -531,6 +538,7 @@
+@@ -531,6 +537,7 @@
                       consumeanchor="PanelUI-button"
                       data-l10n-id="appmenu-menu-button-closed2"/>
      </toolbaritem>

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

@@ -4,7 +4,7 @@
     border-radius: var(--zen-webview-border-radius, var(--zen-border-radius));
     position: relative;
 
-    box-shadow: 0 0 1px 1px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7));
+    box-shadow: 0 0 1px 1px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));
     
     & .browserContainer {
       overflow: hidden;

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

@@ -21,14 +21,15 @@
   }
 
   & #zen-profile-button-icon {
-    width: 16px;
+    width: 20px;
-    height: 16px;
+    height: 20px;
     list-style-image: var(--avatar-image-url);
     border-radius: 50%;
     pointer-events: none;
     list-style-image: var(--avatar-image-url);
     -moz-context-properties: fill;
     fill: currentColor;
+    border: 1px solid var(--zen-colors-border);
   }
 }
 

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

@@ -74,7 +74,7 @@
 
     @media (-moz-bool-pref: 'zen.view.show-bottom-border') {
       &::after {
-        background: color-mix(in srgb, var(--zen-colors-border) 70%, transparent 30%);
+        background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.1));
       }
     }
 
@@ -733,10 +733,6 @@
   @media (-moz-bool-pref: 'zen.tabs.show-newtab-vertical') {
     #tabs-newtab-button {
       display: flex !important;
-
-      @media (-moz-bool-pref: 'zen.view.show-newtab-button-top') {
-        order: -1;
-      }
     }
 
     #tabbrowser-arrowscrollbox-periphery {
@@ -744,6 +740,10 @@
         --zen-colors-border: var(--zen-colors-tertiary);
       }
 
+      @media (-moz-bool-pref: 'zen.view.show-newtab-button-top') {
+        order: -1;
+      }
+
       @media (-moz-bool-pref: 'zen.view.show-newtab-button-border-top') and (not (-moz-bool-pref: 'zen.view.show-newtab-button-top')) {
         margin-top: 15px;
         position: relative;

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

@@ -7,6 +7,12 @@
 
   position: relative;
 
+  &[dont-show='true'] {
+    /* We need to keep the button visible to keep the toolbar layout */
+    opacity: 0;
+    pointer-events: none;
+  }
+
   &:not([as-button='true']) {
     --toolbarbutton-hover-background: transparent !important;
     border-radius: var(--zen-button-border-radius) !important;
@@ -27,10 +33,6 @@
       align-items: center;
       position: relative;
 
-      & > * {
-        opacity: 0.6;
-      }
-
       @media (-moz-bool-pref: 'zen.workspaces.hide-deactivated-workspaces') {
         &:not([active='true']):not(:hover) {
           &::after {
@@ -410,7 +412,7 @@
 
 /* Mark workspaces indicator */
 #zen-current-workspace-indicator {
-  margin: 20px calc(4px + var(--tab-inline-padding)) 15px;
+  margin: 15px calc(4px + var(--tab-inline-padding));
   font-weight: 600;
   align-items: center;
   position: relative;
@@ -433,7 +435,7 @@
   }
 
   & #zen-current-workspace-indicator-icon:not([hidden]) + #zen-current-workspace-indicator-name  {
-    margin-left: 27px;
+    margin-left: 25px;
   }
 }
 

src/browser/base/zen-components/ZenPinnedTabManager.mjs

@@ -36,7 +36,7 @@
     }
   }
 
-  class ZenPinnedTabManager extends ZenDOMOperatedFeature {
+  class ZenPinnedTabManager extends ZenPreloadedFeature {
 
     init() {
       this.observer = new ZenPinnedTabsObserver();

src/browser/base/zen-components/ZenWorkspaces.mjs

@@ -157,7 +157,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
       await SessionStore.promiseInitialized;
       let workspaces = await this._workspaces();
       if (workspaces.workspaces.length === 0) {
-        await this.createAndSaveWorkspace('Default Workspace', true);
+        await this.createAndSaveWorkspace('Default Workspace', true, '🏠');
       } else {
         let activeWorkspace = await this.getActiveWorkspace();
         if (!activeWorkspace) {
@@ -176,6 +176,16 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
         console.error('ZenWorkspaces: Error initializing theme picker', e);
       }
     }
+    this.initIndicatorContextMenu();
+  }
+
+  initIndicatorContextMenu() {
+    const indicator = document.getElementById('zen-current-workspace-indicator');
+    indicator.addEventListener('contextmenu', (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      this.openWorkspacesDialog(event);
+    });
   }
 
   handleTabBeforeClose(tab) {
@@ -640,7 +650,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     if (!this.workspaceEnabled) {
       return;
     }
-    let target = document.getElementById('zen-workspaces-button');
+    let target = event.target.closest("#zen-current-workspace-indicator") ? event.target : document.getElementById('zen-workspaces-button');
     let panel = document.getElementById('PanelUI-zen-workspaces');
     await this._propagateWorkspaceData({
       ignoreStrip: true,
@@ -734,6 +744,12 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
         button.appendChild(workspaceButton);
       }
 
+      if (workspaces.workspaces.length <= 1) {
+        button.setAttribute('dont-show', true);
+      } else {
+        button.removeAttribute('dont-show');
+      }
+
       this._workspaceButtonContextMenuListener = (event) => {
         event.preventDefault();
         event.stopPropagation();
@@ -948,6 +964,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
   async updateWorkspaceIndicator() {
     // Update current workspace indicator
     const currentWorkspace = await this.getActiveWorkspace();
+    if (!currentWorkspace) return;
     const indicatorName = document.getElementById('zen-current-workspace-indicator-name');
     const indicatorIcon = document.getElementById('zen-current-workspace-indicator-icon');
 

src/browser/components/preferences/zen-settings.js

@@ -1101,8 +1101,23 @@ Preferences.addAll([
     default: true,
   },
   {
-  id: "zen.essentials.enabled",
+    id: "zen.essentials.enabled",
-  type: "bool",
+    type: "bool",
-  default: true,
+    default: true,
-  }
+  },
+  {
+    id: "zen.tabs.show-newtab-vertical",
+    type: "bool",
+    default: true,
+  },
+  {
+    id: "zen.view.show-newtab-button-border-top",
+    type: "bool",
+    default: false,
+  },
+  {
+    id: "zen.view.show-newtab-button-top",
+    type: "bool",
+    default: true,
+  },
 ]);

src/browser/components/preferences/zenLooksAndFeel.inc.xhtml

@@ -324,13 +324,19 @@
       <description class="description-deemphasized" data-l10n-id="zen-vertical-tabs-description" />
 
       <checkbox id="zenLooksAndFeelNewtabUnderLastTab"
-            data-l10n-id="zen-vertical-tabs-newtab-under-last-tab"
+            data-l10n-id="zen-vertical-tabs-newtab-on-tab-list"
-            preference="zen.tabs.show-newtab-under"/>
+            preference="zen.tabs.show-newtab-vertical"/>
-    <hbox class="indent">
+    <vbox class="indent">
+        <checkbox id="zenLooksAndFeelShowTopNewtabBorder"
+                data-l10n-id="zen-vertical-tabs-newtab-top-button-border"
+                preference="zen.view.show-newtab-button-border-top"/>
+        <checkbox id="zenLooksAndFeelMoveNewtabToTop"
+                data-l10n-id="zen-vertical-tabs-newtab-top-button-up"
+                preference="zen.view.show-newtab-button-top"/>
         <checkbox id="zenLooksAndFeelShowBottomBorder"
                 data-l10n-id="zen-vertical-tabs-show-bottom-border"
                 preference="zen.view.show-bottom-border"/>
-    </hbox>
+    </vbox>
     
       <label><html:h2 data-l10n-id="zen-vertical-tabs-expand-tabs-header"/></label>
       <description class="description-deemphasized" data-l10n-id="zen-vertical-tabs-expand-tabs-description" />