Refactor ZenCustomizableUI and update keyboard shortcuts preferences

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

@@ -76,6 +76,10 @@ export var ZenCustomizableUI = new class {
     const newTab = window.document.getElementById('vertical-tabs-newtab-button');
     newTab.classList.add('zen-sidebar-action-button');
 
+    const wrapper = window.document.createXULElement('toolbarbutton');
+    wrapper.id = 'zen-workspaces-button';
+    window.document.getElementById('zen-sidebar-icons-wrapper').prepend(wrapper);
+
     window.CustomizableUI.registerToolbarNode(
       window.document.getElementById('zen-sidebar-top-buttons')
     );
@@ -88,7 +92,7 @@ export var ZenCustomizableUI = new class {
 
     for (let id of this.defaultSidebarIcons) {
       const elem = window.document.getElementById(id);
-      if (id === 'zen-workspaces-button' || !elem) continue;
+      if (!elem) continue;
       elem.setAttribute('removable', 'true');
     }
 

src/browser/base/content/zen-components

@@ -1 +1 @@
-Subproject commit a97e7e65ed826e05c62f858c8100c2bb2b1da05a
+Subproject commit 72f6b8d513e69cd8c936b1d124761c9f7dd59c1a

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

@@ -52,6 +52,10 @@
   flex-direction: row;
 }
 
+#titlebar-buttonbox-container {
+  height: 100%;
+}
+
 :root:not([inDOMFullscreen='true']) #tabbrowser-tabbox {
   padding: 1px; /* To allow the web view's shadow to be visible */
 }

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

@@ -109,6 +109,9 @@
         transition: all 0.2s ease-in-out;
         width: 100%;
         opacity: 0;
+
+        border-top-left-radius: env(-moz-gtk-csd-titlebar-radius);
+        border-top-right-radius: env(-moz-gtk-csd-titlebar-radius);
       }
 
       #zen-appcontent-navbar-container:hover,

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

@@ -13,6 +13,18 @@ toolbar {
     display: none !important;
   }
 
+  & stack {
+    width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
+    height: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  
+    & > image {
+      width: 0;
+    }
+  }
+
   & #zen-profile-button-icon {
     width: 16px;
     height: 16px;

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

@@ -6,9 +6,12 @@
   position: relative;
 
   &:not([as-button='true']) {
-    border-radius: var(--zen-button-border-radius);
+    --zen-workspaces-strip-background-color: color-mix(in srgb, var(--zen-colors-border) 50%, transparent 50%);
-    background: color-mix(in srgb, var(--zen-colors-border) 50%, transparent 50%);
+    --toolbarbutton-hover-background: var(--toolbarbutton-hover-background) !important;
+    border-radius: var(--zen-button-border-radius) !important;
+    background: var(--zen-workspaces-strip-background-color) !important;
     padding: 5px;
+    appearance: unset !important;
     height: fit-content;
     gap: 3px;
 

src/browser/components/tabbrowser/content/tabbrowser-js.patch

@@ -1,8 +1,8 @@
 diff --git a/browser/components/tabbrowser/content/tabbrowser.js b/browser/components/tabbrowser/content/tabbrowser.js
-index ef857bd81f2cd7c163ecc74ac1cf81a0b63ce838..c776348e776c1f9efc9b9f2ca479b1050f0a750b 100644
+index ef857bd81f2cd7c163ecc74ac1cf81a0b63ce838..215fd93aff26ee8a8dabac2fbf55285fcf8d15e2 100644
 --- a/browser/components/tabbrowser/content/tabbrowser.js
 +++ b/browser/components/tabbrowser/content/tabbrowser.js
-@@ -453,10 +453,12 @@
+@@ -453,10 +453,14 @@
      },
  
      get _numPinnedTabs() {
@@ -13,11 +13,13 @@ index ef857bd81f2cd7c163ecc74ac1cf81a0b63ce838..c776348e776c1f9efc9b9f2ca479b105
 +        if (!tab.pinned) {
            break;
          }
-+        i++;
++        if (!tab.hidden) {
++          i++;
++        }
        }
        return i;
      },
-@@ -2704,6 +2706,11 @@
+@@ -2704,6 +2708,11 @@
          );
        }
  
@@ -29,7 +31,7 @@ index ef857bd81f2cd7c163ecc74ac1cf81a0b63ce838..c776348e776c1f9efc9b9f2ca479b105
        if (!UserInteraction.running("browser.tabs.opening", window)) {
          UserInteraction.start("browser.tabs.opening", "initting", window);
        }
-@@ -2771,6 +2778,9 @@
+@@ -2771,6 +2780,9 @@
            noInitialLabel,
            skipBackgroundNotify,
          });
@@ -39,7 +41,7 @@ index ef857bd81f2cd7c163ecc74ac1cf81a0b63ce838..c776348e776c1f9efc9b9f2ca479b105
          if (insertTab) {
            // insert the tab into the tab container in the correct position
            this._insertTabAtIndex(t, {
-@@ -3248,6 +3258,14 @@
+@@ -3248,6 +3260,14 @@
          ) {
            tabWasReused = true;
            tab = this.selectedTab;
@@ -54,7 +56,7 @@ index ef857bd81f2cd7c163ecc74ac1cf81a0b63ce838..c776348e776c1f9efc9b9f2ca479b105
            if (!tabData.pinned) {
              this.unpinTab(tab);
            } else {
-@@ -3297,6 +3315,13 @@
+@@ -3297,6 +3317,13 @@
              preferredRemoteType,
            });
  
@@ -68,7 +70,7 @@ index ef857bd81f2cd7c163ecc74ac1cf81a0b63ce838..c776348e776c1f9efc9b9f2ca479b105
            if (select) {
              tabToSelect = tab;
            }
-@@ -4184,6 +4209,7 @@
+@@ -4184,6 +4211,7 @@
          isLastTab ||
          aTab.pinned ||
          aTab.hidden ||
@@ -76,7 +78,7 @@ index ef857bd81f2cd7c163ecc74ac1cf81a0b63ce838..c776348e776c1f9efc9b9f2ca479b105
          this._removingTabs.size >
            3 /* don't want lots of concurrent animations */ ||
          !aTab.hasAttribute(
-@@ -5117,10 +5143,10 @@
+@@ -5117,10 +5145,10 @@
        SessionStore.deleteCustomTabValue(aTab, "hiddenBy");
      },
  

src/browser/themes/shared/tabbrowser/tabs-css.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/themes/shared/tabbrowser/tabs.css b/browser/themes/shared/tabbrowser/tabs.css
-index 1ef4874d6e7f3b43f4c82db6a679883cf34ab493..33837e5f56e4fbefa2a2d2ee68ee51750357db59 100644
+index 1ef4874d6e7f3b43f4c82db6a679883cf34ab493..12eef770f5ae48b83cadd10a4ed21b8fab508bfe 100644
 --- a/browser/themes/shared/tabbrowser/tabs.css
 +++ b/browser/themes/shared/tabbrowser/tabs.css
 @@ -17,7 +17,7 @@
@@ -53,3 +53,11 @@ index 1ef4874d6e7f3b43f4c82db6a679883cf34ab493..33837e5f56e4fbefa2a2d2ee68ee5175
    padding-inline-start: calc(var(--tab-overflow-pinned-tabs-width) + 2px);
    margin-inline-start: 2px;
  }
+@@ -962,7 +961,6 @@ toolbar:not(#TabsToolbar) #firefox-view-button {
+   list-style-image: url(chrome://global/skin/icons/plus.svg);
+ }
+ 
+-#tabbrowser-tabs[hasadjacentnewtabbutton]:not([overflow]) ~ #new-tab-button,
+ #tabbrowser-tabs[orient="vertical"] > #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button,
+ #tabbrowser-tabs[overflow] > #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button,
+ #tabbrowser-tabs:not([hasadjacentnewtabbutton]) > #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button,