Started working on new workspaec layout

src/browser/base/content/ZenStartup.mjs

@@ -85,7 +85,6 @@
     _initSidebarScrolling() {
       // Disable smooth scroll
       const canSmoothScroll = Services.prefs.getBoolPref('zen.startup.smooth-scroll-in-tabs', false);
-      const workspaceIndicator = document.getElementById('zen-current-workspace-indicator');
       const tabsWrapper = document.getElementById('zen-browser-tabs-wrapper');
       gBrowser.tabContainer.addEventListener('wheel', (event) => {
         if (canSmoothScroll) return;

src/browser/base/content/ZenUIManager.mjs

@@ -149,11 +149,7 @@ var gZenUIManager = {
   },
 
   get newtabButton() {
-    if (this._newtabButton) {
-      return this._newtabButton;
-    }
-    this._newtabButton = document.getElementById('tabs-newtab-button');
-    return this._newtabButton;
+    return ZenWorkspaces.activeWorkspaceStrip.querySelector('#tabs-newtab-button');
   },
 
   _prevUrlbarLabel: null,
@@ -417,6 +413,8 @@ var gZenVerticalTabsManager = {
 
       gBrowser.tabContainer.setAttribute('orient', isVerticalTabs ? 'vertical' : 'horizontal');
       gBrowser.tabContainer.arrowScrollbox.setAttribute('orient', isVerticalTabs ? 'vertical' : 'horizontal');
+      // on purpose, we set the orient to horizontal, because the arrowScrollbox is vertical
+      gBrowser.tabContainer.arrowScrollbox.scrollbox.setAttribute('orient', isVerticalTabs ? 'horizontal' : 'vertical');
 
       const buttonsTarget = document.getElementById('zen-sidebar-top-buttons-customization-target');
       if (isRightSide) {

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 a0a382643a2f74b6d789f3641ef300eed202d5e9..8b7b2ae3e7764d5dd77cd344f0cf67aea54a6f47 100644
+index a0a382643a2f74b6d789f3641ef300eed202d5e9..340475da315e67b2dd4f93567547cde703a90ee8 100644
 --- a/browser/base/content/navigator-toolbox.inc.xhtml
 +++ b/browser/base/content/navigator-toolbox.inc.xhtml
 @@ -2,7 +2,7 @@
@@ -40,20 +40,17 @@ index a0a382643a2f74b6d789f3641ef300eed202d5e9..8b7b2ae3e7764d5dd77cd344f0cf67ae
          <tabs id="tabbrowser-tabs"
                is="tabbrowser-tabs"
                aria-multiselectable="true"
-@@ -50,6 +50,12 @@
+@@ -50,6 +50,9 @@
                tooltip="tabbrowser-tab-tooltip"
                orient="horizontal"
                stopwatchid="FX_TAB_CLICK_MS">
 +<html:div id="zen-essentials-container" skipintoolbarset="true"></html:div>
-+<hbox id="zen-current-workspace-indicator" skipintoolbarset="true">
-+  <hbox id="zen-current-workspace-indicator-icon"></hbox>
-+  <hbox id="zen-current-workspace-indicator-name"></hbox>
-+</hbox>
++<hbox id="zen-current-workspace-indicator-container"></hbox>
 +<html:div id="zen-browser-tabs-wrapper">
            <hbox class="tab-drop-indicator" hidden="true"/>
  # If the name (tabbrowser-arrowscrollbox) or structure of this changes
  # significantly, there is an optimization in
-@@ -57,7 +63,7 @@
+@@ -57,7 +60,7 @@
  # the current structure that we may want to revisit.
            <html:div id="vertical-pinned-tabs-container" tabindex="-1"></html:div>
            <html:div id="vertical-pinned-tabs-container-separator"></html:div>
@@ -62,15 +59,15 @@ index a0a382643a2f74b6d789f3641ef300eed202d5e9..8b7b2ae3e7764d5dd77cd344f0cf67ae
              <tab is="tabbrowser-tab" class="tabbrowser-tab" selected="true" visuallyselected="" fadein=""/>
              <hbox id="tabbrowser-arrowscrollbox-periphery">
                <toolbartabstop/>
-@@ -75,6 +81,7 @@
+@@ -75,6 +78,7 @@
                                tooltip="dynamic-shortcut-tooltip"
                                data-l10n-id="tabs-toolbar-new-tab"/>
            <html:span id="tabbrowser-tab-a11y-desc" hidden="true"/>
 +</html:div>
          </tabs>
 
          <toolbarbutton id="new-tab-button"
-@@ -100,11 +107,12 @@
+@@ -100,11 +104,12 @@
  #include private-browsing-indicator.inc.xhtml
      <toolbarbutton id="content-analysis-indicator"
                     class="toolbarbutton-1 content-analysis-indicator-icon"/>
@@ -86,7 +83,7 @@ index a0a382643a2f74b6d789f3641ef300eed202d5e9..8b7b2ae3e7764d5dd77cd344f0cf67ae
    <toolbar id="nav-bar"
             class="browser-toolbar chromeclass-location"
             data-l10n-id="navbar-accessible"
-@@ -490,10 +498,12 @@
+@@ -490,10 +495,12 @@
                       consumeanchor="PanelUI-button"
                       data-l10n-id="appmenu-menu-button-closed2"/>
      </toolbaritem>

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

@@ -28,7 +28,7 @@
     --tab-min-height: 10px !important;
   }
 
-  #vertical-pinned-tabs-container-separator {
+  .vertical-pinned-tabs-container-separator {
     display: none !important;
   }
 
@@ -214,7 +214,7 @@
   }
 
   /* Other UI Elements */
-  #zen-current-workspace-indicator {
+  .zen-current-workspace-indicator {
     display: none !important;
   }
 

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

@@ -117,7 +117,7 @@
   }
 }
 
-#vertical-pinned-tabs-container-separator {
+.vertical-pinned-tabs-container-separator {
   background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.1));
   margin: 8px auto;
   border: none;
@@ -126,8 +126,8 @@
   width: 98%;
   transition: margin 0.2s ease-in-out, background 0.2s ease-in-out, max-height 0.2s ease-in-out;
 
-  #vertical-pinned-tabs-container:not(:has(tab:not([hidden]))) + &,
-  #tabbrowser-tabs:not(:has(#tabbrowser-arrowscrollbox tab:not([hidden]))) & {
+  #vertical-pinned-tabs-container .zen-workspace-tabs-section[active]:not(:has(tab:not([hidden]))) &,
+  #tabbrowser-tabs:not(:has(#tabbrowser-arrowscrollbox .zen-workspace-tabs-section[active] tab:not([hidden]))) & {
     max-height: 0;
     margin: 0 auto;
   }
@@ -254,18 +254,14 @@
   grid-gap: 0 !important;
 
   &[overflow]::after,
-  #vertical-tabs-newtab-button {
+  #vertical-tabs-newtab-button,
+  #vertical-pinned-tabs-container-separator { /* notice #vertical-pinned-tabs-container-separator is an ID */
     /* Hide separator they give us, eww */
     display: none !important;
   }
 
   & .tabbrowser-tab {
     transition: scale 0.07s ease;
-    #tabbrowser-tabs &:not([zen-essential='true']) {
-      #tabbrowser-tabs[dont-animate-tabs] & {
-        opacity: 0;
-      }
-    }
 
     &:active {
       scale: 0.98;
@@ -441,7 +437,7 @@
     width: calc(100% - 10px) !important;
   }
 
-  & #zen-current-workspace-indicator-icon[no-icon='true'] {
+  & .zen-current-workspace-indicator-icon[no-icon='true'] {
     display: none;
   }
 
@@ -572,11 +568,11 @@
 #navigator-toolbox:not([zen-sidebar-expanded='true']) {
   max-width: var(--zen-toolbox-max-width) !important;
   min-width: var(--zen-toolbox-max-width) !important;
-  & #zen-current-workspace-indicator-name,
+  & .zen-current-workspace-indicator-name,
   & .toolbarbutton-text {
     display: none !important;
   }
-  & #zen-current-workspace-indicator {
+  & .zen-current-workspace-indicator {
     padding-left: 0;
     padding-right: 0;
     display: flex;
@@ -893,7 +889,7 @@
       align-items: center;
       padding-top: 0;
     }
-    
+
     &:active,
     &[open] {
       scale: 0.98;
@@ -966,7 +962,7 @@
 
   --tab-selected-bgcolor: light-dark(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.2));
 
-  &:not([selected], [multiselected="true"]) .tab-background {
+  &:not([visuallyselected], [multiselected="true"]) .tab-background {
     background: var(--zen-toolbar-element-bg);
     border: none;
   }
@@ -1137,3 +1133,10 @@
 #zen-essentials-container .tabbrowser-tab.drag-over-after {
   box-shadow: -3px 0 6px -2px var(--toolbarbutton-active-background, rgba(0, 255, 0, 0.2));
 }
+
+/* Section: tab workspaces stylings */
+.zen-workspace-tabs-section {
+  position: absolute;
+  transform: translateX(-100%);
+  min-width: 100%;
+}

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

@@ -157,6 +157,8 @@
   --zen-themed-toolbar-bg: light-dark(var(--zen-branding-bg), #161616);
   --zen-themed-toolbar-bg-transparent: light-dark(var(--zen-branding-bg), #161616);
 
+  --zen-workspace-indicator-height: 45px;
+
   @media (-moz-windows-mica) or (-moz-platform: macos) {
     background: transparent;
     --zen-themed-toolbar-bg-transparency: 0;

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

@@ -414,7 +414,10 @@ button.popup-notification-dropmarker {
   --urlbar-margin-inline: 10px !important;
   position: absolute;
 
-  font-size: 1.5em !important;
+  font-size: 1.15em !important;
+  @media (-moz-platform: macos) {
+    font-size: 1.5em !important;
+  }
   top: calc(var(--zen-toolbar-height) * 2) !important;
 
   --zen-urlbar-center: calc(var(--zen-urlbar-offset, 0px) + 28vw);

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

@@ -446,11 +446,20 @@
 }
 
 /* Mark workspaces indicator */
-#zen-current-workspace-indicator {
+#zen-current-workspace-indicator-container {
+  margin-bottom: var(--zen-workspace-indicator-height);
+}
+
+.zen-current-workspace-indicator {
   padding: 15px calc(4px + var(--tab-inline-padding));
   font-weight: 600;
-  align-items: center;
-  position: relative;
+  position: absolute;
+  max-height: var(--zen-workspace-indicator-height);
+  min-height: var(--zen-workspace-indicator-height);
+  gap: 5px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex-direction: row !important;
 
   &::before {
     border-radius: var(--border-radius-medium);
@@ -459,11 +468,11 @@
     pointer-events: none;
     content: '';
     position: absolute;
-    top: 6px;
+    top: 4px;
     left: 2px;
     z-index: -1;
     width: calc(100% - 4px);
-    height: calc(100% - 12px);
+    height: calc(100% - 10px);
   }
 
   &:hover,
@@ -473,38 +482,23 @@
     }
   }
 
-  & #zen-current-workspace-indicator-icon {
-    font-size: 14px;
+  & .zen-current-workspace-indicator-icon {
+    font-size: 12px;
   }
 
-  #zen-current-workspace-indicator-name {
+  .zen-current-workspace-indicator-name {
     font-size: 13px;
     opacity: 0.5;
-
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
     display: block;
-
-    position: absolute;
-    max-width: calc(100% - var(--zen-toolbox-padding) * 4);
-  }
-
-  & #zen-current-workspace-indicator-icon {
-    min-height: 16px;
-  }
-
-  & #zen-current-workspace-indicator-icon:not([hidden]) + #zen-current-workspace-indicator-name {
-    padding-left: 24px;
   }
 }
 
 @media not (-moz-bool-pref: 'zen.workspaces.show-workspace-indicator') {
-  #zen-current-workspace-indicator {
+  #zen-current-workspace-indicator-container {
     display: none !important;
   }
 }
 
-#zen-current-workspace-indicator[hidden='true'] {
+#zen-current-workspace-indicator-container[hidden='true'] {
   display: none !important;
 }

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

@@ -614,7 +614,7 @@
                 // Reactivate the transition after the animation
                 appWrapper.removeAttribute('post-animating');
               }, 100);
-            }, 500);
+            }, 200);
           });
         }
 

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

@@ -648,7 +648,7 @@
 
     moveToAnotherTabContainerIfNecessary(event, draggedTab) {
       const pinnedTabsTarget =
-        event.target.closest('#vertical-pinned-tabs-container') || event.target.closest('#zen-current-workspace-indicator');
+        event.target.closest('#vertical-pinned-tabs-container') || event.target.closest('.zen-current-workspace-indicator');
       const essentialTabsTarget = event.target.closest('#zen-essentials-container');
       const tabsTarget = event.target.closest('#tabbrowser-arrowscrollbox');
 
@@ -717,7 +717,7 @@
     removeTabContainersDragoverClass() {
       this.dragIndicator.remove();
       this._dragIndicator = null;
-      document.getElementById('zen-current-workspace-indicator').removeAttribute('open');
+      ZenWorkspaces.activeWorkspaceIndicator.removeAttribute('open');
     }
 
     get dragIndicator() {
@@ -738,11 +738,11 @@
       const essentialTabsTarget = event.target.closest('#zen-essentials-container');
       const tabsTarget = event.target.closest('#tabbrowser-arrowscrollbox');
       const targetTab = event.target.closest('.tabbrowser-tab');
-      if (event.target.closest('#zen-current-workspace-indicator')) {
+      if (event.target.closest('.zen-current-workspace-indicator')) {
         this.removeTabContainersDragoverClass();
-        event.target.setAttribute('open', true);
+        ZenWorkspaces.activeWorkspaceIndicator.setAttribute('open', true);
       } else {
-        document.getElementById('zen-current-workspace-indicator').removeAttribute('open');
+        ZenWorkspaces.activeWorkspaceIndicator.removeAttribute('open');
       }
 
       // If there's no valid target tab, nothing to do