Rename workspaces button to workspace select button and adjust related styles for consistency

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

@@ -4,7 +4,7 @@ export var ZenCustomizableUI = new (class {
   constructor() {}
 
   TYPE_TOOLBAR = 'toolbar';
-  defaultSidebarIcons = ['zen-profile-button', 'zen-workspaces-button', 'downloads-button'];
+  defaultSidebarIcons = ['zen-profile-button', 'zen-workspace-select-button', 'downloads-button'];
 
   startup(CustomizableUIInternal) {
     CustomizableUIInternal.registerArea(
@@ -83,10 +83,6 @@ 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);
-
     for (let id of this.defaultSidebarIcons) {
       const elem = window.document.getElementById(id);
       if (!elem) continue;

src/browser/base/content/zen-sidebar-icons.inc.xhtml

@@ -9,7 +9,7 @@
   mode="icons">
   <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>
-  <toolbarbutton removable="true" id="zen-workspaces-button"></toolbarbutton>
+  <toolbarbutton removable="false" id="zen-workspace-select-button"></toolbarbutton>
   <toolbarbutton id="zen-profile-button"
     class="zen-sidebar-action-button toolbarbutton-1 chromeclass-toolbar-additional"
     delegatesanchor="true"

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

@@ -219,16 +219,6 @@
   }
 }
 
-@keyframes zen-workspaces-button-active {
-  from {
-    bottom: -20px;
-  }
-
-  to {
-    bottom: -2px;
-  }
-}
-
 /* Mark: Zen Glance */
 @keyframes zen-glance-overlay-animation {
   from {

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

@@ -20,7 +20,7 @@ xul|button {
   border: 1px solid var(--zen-colors-border);
 }
 
-button:not(#zen-workspaces-button):active {
+button:not(#zen-workspace-select-button):active {
   transform: scale(0.98);
 }
 

src/browser/base/content/zen-styles/zen-single-components.css

@@ -40,7 +40,7 @@
   pointer-events: none;
 }
 
-#zen-workspaces-button .zen-workspace-sidebar-name {
+#zen-workspace-select-button .zen-workspace-sidebar-name {
   margin-left: 10px;
   display: none;
   overflow: hidden;

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

@@ -228,7 +228,7 @@
   border-bottom: 0px solid transparent !important;
 
   --tab-block-margin: 2px;
-  --tab-selected-bgcolor: light-dark(rgba(255, 255, 255, 0.75), rgba(0, 0, 0, 0.11));
+  --tab-selected-bgcolor: light-dark(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.11));
   grid-gap: 0 !important;
 
   &[overflow]::after,
@@ -321,7 +321,7 @@
 
   padding-top: var(--zen-element-separation);
 
-  & > toolbarbutton:not(#zen-workspaces-button) {
+  & > toolbarbutton:not(#zen-workspace-select-button) {
     padding: 0 !important;
   }
 }
@@ -398,7 +398,7 @@
     margin-top: 0;
   }
 
-  & #zen-workspaces-button[as-button='true'] {
+  & #zen-workspace-select-button[as-button='true'] {
     width: calc(100% - 10px) !important;
   }
 
@@ -406,7 +406,7 @@
     display: none;
   }
 
-  & #zen-workspaces-button {
+  & #zen-workspace-select-button {
     margin-left: 2px;
     margin-right: 2px;
 
@@ -453,7 +453,7 @@
       bottom: calc(-0.5 * var(--zen-toolbox-padding));
     }
 
-    & > *:not(tabs):not(#search-container):not(#zen-workspaces-button),
+    & > *:not(tabs):not(#search-container):not(#zen-workspace-select-button),
     & #tabbrowser-arrowscrollbox-periphery > toolbarbutton {
       width: 100% !important;
       border-radius: var(--tab-border-radius) !important;
@@ -656,7 +656,7 @@
       margin-inline-end: 0 !important;
     }
   }
-  & #zen-workspaces-button {
+  & #zen-workspace-select-button {
     flex-direction: column;
     &:not([as-button='true']) {
       & toolbarbutton {

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

@@ -106,7 +106,7 @@
 
   --zen-toolbar-element-filter: brightness(0.95);
   @media (prefers-color-scheme: dark) {
-    --zen-toolbar-element-filter: brightness(1.2);
+    --zen-toolbar-element-filter: brightness(1.25);
   }
 
   /* Toolbar */

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

@@ -5,7 +5,7 @@
  */
 @namespace html 'http://www.w3.org/1999/xhtml';
 
-#zen-workspaces-button {
+#zen-workspace-select-button {
   justify-content: center;
   align-items: center;
   display: flex;
@@ -63,7 +63,7 @@
         & {
           opacity: 0.4;
           filter: grayscale(1);
-          transition: opacity 0.2s;
+          transition: opacity 0.2s, filter 0.2s;
         }
 
         &[active='true'] {
@@ -105,7 +105,7 @@
   }
 }
 
-#zen-workspaces-button .zen-workspace-sidebar-wrapper {
+#zen-workspace-select-button .zen-workspace-sidebar-wrapper {
   position: absolute;
   width: 100%;
   display: flex;
@@ -114,7 +114,7 @@
   pointer-events: none;
 }
 
-#zen-workspaces-button .zen-workspace-sidebar-name {
+#zen-workspace-select-button .zen-workspace-sidebar-name {
   margin-left: 0.2rem;
   display: none;
   overflow: hidden;
@@ -125,18 +125,18 @@
 
 /** Keep these selectors in sync with the ones in vertical-tabs.css */
 #navigator-toolbox {
-  & #zen-workspaces-button[as-button='true'] {
+  & #zen-workspace-select-button[as-button='true'] {
     width: calc(100% - var(--toolbarbutton-outer-padding));
     margin: 2px;
     min-width: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
     height: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
   }
 
-  & #zen-workspaces-button .zen-workspace-sidebar-name {
+  & #zen-workspace-select-button .zen-workspace-sidebar-name {
     display: block;
   }
 
-  & #zen-workspaces-button .zen-workspace-sidebar-icon {
+  & #zen-workspace-select-button .zen-workspace-sidebar-icon {
     margin-inline-end: 5px;
 
     & [no-icon='true'] {
@@ -144,11 +144,11 @@
     }
   }
 
-  & #zen-workspaces-button .zen-workspace-sidebar-icon[no-icon='true'] + .zen-workspace-sidebar-name {
+  & #zen-workspace-select-button .zen-workspace-sidebar-icon[no-icon='true'] + .zen-workspace-sidebar-name {
     margin-left: 0;
   }
 
-  & #zen-workspaces-button {
+  & #zen-workspace-select-button {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;

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

@@ -14,16 +14,17 @@ XPCOMUtils.defineLazyPreferenceGetter(
   true
 );
 
+ChromeUtils.defineLazyGetter(lazyCompactMode, 'mainAppWrapper', () => document.getElementById('zen-main-app-wrapper'));
+
 var gZenCompactModeManager = {
   _flashTimeouts: {},
   _evenListeners: [],
   _removeHoverFrames: {},
+  _animating: false,
 
   init() {
     Services.prefs.addObserver('zen.tabs.vertical.right-side', this._updateSidebarIsOnRight.bind(this));
 
-    ChromeUtils.defineLazyGetter(this, 'mainAppWrapper', () => document.getElementById('zen-main-app-wrapper'));
-
     this._canAnimateSidebar = Services.prefs.getBoolPref('zen.view.compact.animate-sidebar', true);
 
     gZenUIManager.addPopupTrackingAttribute(this.sidebar);
@@ -35,18 +36,19 @@ var gZenCompactModeManager = {
 
   get preference() {
     if (!document.documentElement.hasAttribute('zen-compact-mode')) {
-      document.documentElement.setAttribute('zen-compact-mode', this.mainAppWrapper.getAttribute('zen-compact-mode'));
+      document.documentElement.setAttribute('zen-compact-mode', lazyCompactMode.mainAppWrapper.getAttribute('zen-compact-mode'));
     }
-    return this.mainAppWrapper.getAttribute('zen-compact-mode') === 'true';
+    return lazyCompactMode.mainAppWrapper.getAttribute('zen-compact-mode') === 'true';
   },
 
   set preference(value) {
-    if (this.preference === value) {
+    if (this.preference === value || this._animating) {
+      // We dont want the user to be able to spam the button
       return value;
     }
     // We use this element in order to make it persis across restarts, by using the XULStore.
     // main-window can't store attributes other than window sizes, so we use this instead
-    this.mainAppWrapper.setAttribute('zen-compact-mode', value);
+    lazyCompactMode.mainAppWrapper.setAttribute('zen-compact-mode', value);
     document.documentElement.setAttribute('zen-compact-mode', value);
     this._updateEvent();
     return value;
@@ -69,11 +71,7 @@ var gZenCompactModeManager = {
 
   flashSidebarIfNecessary(aInstant = false) {
     if (!aInstant && this.preference && lazyCompactMode.COMPACT_MODE_FLASH_ENABLED && !gZenGlanceManager._animating) {
-      try {
+      this.flashSidebar();
-        this.flashSidebar();
-      } catch (e) {
-        // Ignore errors
-      }
     }
   },
 
@@ -140,6 +138,7 @@ var gZenCompactModeManager = {
   },
 
   animateCompactMode() {
+    this._animating = true;
     const isCompactMode = this.preference;
     const canHideSidebar = Services.prefs.getBoolPref('zen.view.compact.hide-tabbar');
     // Do this so we can get the correct width ONCE compact mode styled have been applied
@@ -175,6 +174,7 @@ var gZenCompactModeManager = {
             this.sidebar.style.removeProperty('margin-right');
             this.sidebar.style.removeProperty('margin-left');
             this.sidebar.style.removeProperty('transform');
+            this._animating = false;
             setTimeout(() => {
               this.sidebar.style.removeProperty('transition');
             });
@@ -210,6 +210,7 @@ var gZenCompactModeManager = {
             this.sidebar.style.removeProperty('margin-right');
             this.sidebar.style.removeProperty('margin-left');
             this.sidebar.style.removeProperty('transform');
+            this._animating = false;
             setTimeout(() => {
               this.sidebar.style.removeProperty('transition');
             });

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

@@ -879,7 +879,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
           await this.changeWorkspace(workspace);
           let panel = this.ownerWindow.document.getElementById('PanelUI-zen-workspaces');
           PanelMultiView.hidePopup(panel);
-          this.ownerWindow.document.getElementById('zen-workspaces-button').removeAttribute('open');
+          this.ownerWindow.document.getElementById('zen-workspace-select-button').removeAttribute('open');
         }).bind(browser.ZenWorkspaces);
         return element;
       };
@@ -1025,7 +1025,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     if (!this.workspaceEnabled) {
       return;
     }
-    let target = event.target.closest('#zen-current-workspace-indicator') || document.getElementById('zen-workspaces-button');
+    let target = event.target.closest('#zen-current-workspace-indicator') || document.getElementById('zen-workspace-select-button');
     let panel = document.getElementById('PanelUI-zen-workspaces');
     await this._propagateWorkspaceData({
       ignoreStrip: true,
@@ -1040,8 +1040,8 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
   async initializeWorkspacesButton() {
     if (!this.workspaceEnabled) {
       return;
-    } else if (document.getElementById('zen-workspaces-button')) {
+    } else if (document.getElementById('zen-workspace-select-button')) {
-      let button = document.getElementById('zen-workspaces-button');
+      let button = document.getElementById('zen-workspace-select-button');
       button.removeAttribute('hidden');
       return;
     }
@@ -1052,7 +1052,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     if (typeof browser.ZenWorkspaces === 'undefined') {
       browser = window;
     }
-    let button = browser.document.getElementById('zen-workspaces-button');
+    let button = browser.document.getElementById('zen-workspace-select-button');
 
     while (button.firstChild) {
       button.firstChild.remove();