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

2025-10-06 01:46:35 +00:00 · 2024-11-08 19:34:51 +01:00
parent f3e054d15e
commit f093228f71
11 changed files with 80 additions and 31 deletions
--- a/2
+++ b/2
--- a/src/browser/app/profile/zen-browser.js
+++ b/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-top', true);
+pref('zen.view.show-newtab-button-border-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
--- a/src/browser/base/content/navigator-toolbox-inc-xhtml.patch
+++ b/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>
--- a/src/browser/base/content/zen-styles/zen-browser-container.css
+++ b/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;
--- a/src/browser/base/content/zen-styles/zen-sidebar.css
+++ b/src/browser/base/content/zen-styles/zen-sidebar.css
@@ -21,14 +21,15 @@
  }

  & #zen-profile-button-icon {
-    width: 16px;
-    height: 16px;
+    width: 20px;
+    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);
  }
 }

--- a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
+++ b/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;
--- a/src/browser/base/content/zen-styles/zen-workspaces.css
+++ b/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;
  }
 }

--- a/src/browser/base/zen-components/ZenPinnedTabManager.mjs
+++ b/src/browser/base/zen-components/ZenPinnedTabManager.mjs
@@ -36,7 +36,7 @@
    }
  }

-  class ZenPinnedTabManager extends ZenDOMOperatedFeature {
+  class ZenPinnedTabManager extends ZenPreloadedFeature {

    init() {
      this.observer = new ZenPinnedTabsObserver();
--- a/src/browser/base/zen-components/ZenWorkspaces.mjs
+++ b/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');

--- a/src/browser/components/preferences/zen-settings.js
+++ b/src/browser/components/preferences/zen-settings.js
@@ -1104,5 +1104,20 @@ Preferences.addAll([
    id: "zen.essentials.enabled",
    type: "bool",
    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,
+  },
 ]);
--- a/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml
+++ b/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"
-            preference="zen.tabs.show-newtab-under"/>
-    <hbox class="indent">
+            data-l10n-id="zen-vertical-tabs-newtab-on-tab-list"
+            preference="zen.tabs.show-newtab-vertical"/>
+    <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" />