refactor: remove unused workspace icon strip preference and related styles

l10n

@@ -1 +1 @@
-Subproject commit 0bc81a3d4fc7f2fdcd99b7a2168db0c4f19bdaa9
+Subproject commit fdf67a1fe692e0af842dde2113bfefb9363e7893

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

@@ -201,7 +201,6 @@ pref('zen.startup.smooth-scroll-in-tabs', true);
 pref('zen.workspaces.disabled_for_testing', false);
 pref('zen.workspaces.hide-deactivated-workspaces', false);
 pref('zen.workspaces.hide-default-container-indicator', true);
-pref('zen.workspaces.show-icon-strip', true);
 pref('zen.workspaces.force-container-workspace', false);
 pref('zen.workspaces.open-new-tab-if-last-unpinned-tab-is-closed', false);
 pref('zen.workspaces.show-workspace-indicator', true);

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

@@ -293,18 +293,18 @@
 
 @keyframes zen-back-and-forth-text {
   0%,
-  20% {
+  10% {
     transform: translateX(0);
     left: 0;
   }
 
-  50%,
-  60% {
+  45%,
+  65% {
     transform: translateX(calc(-100% - 5px));
     left: 100%;
   }
 
-  80%,
+  90%,
   100% {
     transform: translateX(0);
     left: 0;

src/browser/base/content/zen-styles/zen-media-controls.css

@@ -71,6 +71,12 @@
       height: calc(var(--progress-height) * 2);
       border-radius: 50%;
       cursor: pointer;
+      transform: scale(0);
+      transition: transform 0.15s ease-out;
+    }
+
+    &:hover::-moz-range-thumb {
+      transform: scale(1);
     }
   }
 
@@ -121,8 +127,8 @@
     }
   }
 
-  toolbaritem {
-    --zen-media-control-bg: light-dark(rgb(255, 255, 255), rgb(10, 10, 10)) !important;
+  & > toolbaritem {
+    --zen-media-control-bg: light-dark(rgba(255, 255, 255, 0.87), rgba(0, 0, 0, 0.87));
     flex-grow: 1;
     padding: 0;
     transition: padding 0.3s ease-out;
@@ -131,9 +137,11 @@
     bottom: 0;
     padding: 4px 6px;
     border-radius: var(--border-radius-medium);
-    background: var(--zen-media-control-bg) !important;
+    box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
+    background-color: var(--zen-media-control-bg);
+    backdrop-filter: saturate(3) contrast(2) blur(10px);
     width: 100%;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
+    will-change: transform;
   }
 
   .show-on-hover {
@@ -227,7 +235,7 @@
     position: relative; /* For the animation */
 
     &[overflow] {
-      animation: zen-back-and-forth-text 8s infinite ease-in-out;
+      animation: zen-back-and-forth-text 10s infinite ease-in-out;
     }
   }
 }

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

@@ -360,9 +360,9 @@ menuitem {
   & .zen-toast {
     padding: 0.9rem 0.8rem;
     border-radius: 12px;
-    background-color: var(--button-primary-bgcolor);
+    background: linear-gradient(170deg, light-dark(rgb(187, 187, 187), rgb(240, 240, 240)) -40%, var(--zen-primary-color) 140%);
     color: var(--button-primary-color);
-    box-shadow: var(--zen-big-shadow);
+    box-shadow: 0 0 16px 3px rgba(0,0,0,.1);
     display: flex;
     font-weight: 500;
     gap: 5px;

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

@@ -255,13 +255,20 @@
   }
 
   & .tabbrowser-tab {
+    &,
+    & .tab-content > image {
       transition: scale 0.07s ease;
+    }
 
     &[zen-empty-tab] {
       display: none;
     }
 
-    #tabbrowser-tabs:not([movingtab]) &:active {
+    #tabbrowser-tabs:not([movingtab]) &:active:not(:has(.tab-content > image:active)) {
+      scale: var(--zen-active-tab-scale);
+    }
+
+    #tabbrowser-tabs:not([movingtab]) & .tab-content > image:active {
       scale: var(--zen-active-tab-scale);
     }
 
@@ -462,10 +469,6 @@
     margin-top: 0;
   }
 
-  & #zen-workspaces-button[as-button='true'] {
-    width: calc(100% - 10px) !important;
-  }
-
   & .zen-current-workspace-indicator-icon[no-icon='true'] {
     display: none;
   }
@@ -762,14 +765,6 @@
   }
   & #zen-workspaces-button {
     flex-direction: column;
-    &:not([as-button='true']) {
-      & toolbarbutton {
-        &[active='true']::after {
-          bottom: 50% !important;
-          transform: translateY(50%) !important;
-        }
-      }
-    }
   }
 }
 

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

@@ -155,8 +155,8 @@
 
   --input-bgcolor: var(--zen-colors-tertiary) !important;
   --input-border-color: var(--zen-input-border-color) !important;
-  --zen-themed-toolbar-bg: light-dark(rgb(240, 240, 244), #161616);
-  --zen-themed-toolbar-bg-transparent: light-dark(var(--zen-branding-bg), #161616);
+  --zen-themed-toolbar-bg: light-dark(rgb(240, 240, 244), #171717);
+  --zen-themed-toolbar-bg-transparent: light-dark(var(--zen-branding-bg), #171717);
 
   --zen-workspace-indicator-height: 45px;
 

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

@@ -17,7 +17,6 @@
     display: none !important;
   }
 
-  &:not([as-button='true']) {
   --toolbarbutton-hover-background: transparent !important;
   border-radius: var(--zen-button-border-radius) !important;
   background: transparent;
@@ -60,6 +59,13 @@
       }
     }
 
+    & .zen-workspace-icon[no-icon='true'] {
+      width: 6px;
+      height: 6px;
+      background: light-dark(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.4));
+      border-radius: 50%;
+    }
+
     @media not (-moz-bool-pref: 'zen.workspaces.hide-deactivated-workspaces') {
       & {
         filter: grayscale(1);
@@ -80,37 +86,6 @@
       }
     }
   }
-  }
-
-  &[as-button='true'] {
-    border-radius: var(--tab-border-radius);
-
-    &:hover {
-      background: var(--toolbarbutton-hover-background);
-    }
-  }
-
-  &[as-button='true'] {
-    margin: auto;
-    padding: var(--toolbarbutton-inner-padding) !important;
-    width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
-    height: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
-    border-radius: var(--tab-border-radius) !important;
-
-    :root:not([zen-sidebar-expanded='true']) #navigator-toolbox & {
-      & .zen-workspace-sidebar-name {
-        display: none;
-      }
-
-      & .zen-workspace-sidebar-icon {
-        margin-inline-end: 0 !important;
-      }
-    }
-
-    &:hover {
-      background: var(--toolbarbutton-hover-background) !important;
-    }
-  }
 }
 
 #zen-workspaces-button .zen-workspace-sidebar-wrapper {
@@ -133,13 +108,6 @@
 
 /** Keep these selectors in sync with the ones in vertical-tabs.css */
 #navigator-toolbox {
-  & #zen-workspaces-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 {
     display: block;
   }

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

@@ -77,7 +77,7 @@ var gZenCompactModeManager = {
   },
 
   get sidebarIsOnRight() {
-    if (this._sidebarIsOnRight) {
+    if (typeof this._sidebarIsOnRight !== 'undefined') {
       return this._sidebarIsOnRight;
     }
     this._sidebarIsOnRight = Services.prefs.getBoolPref('zen.tabs.vertical.right-side');
@@ -342,9 +342,9 @@ var gZenCompactModeManager = {
   },
 
   flashElement(element, duration, id, attrName = 'flash-popup') {
-    if (element.matches(':hover')) {
-      return;
-    }
+    //if (element.matches(':hover')) {
+    //  return;
+    //}
     if (this._flashTimeouts[id]) {
       clearTimeout(this._flashTimeouts[id]);
     } else {

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

@@ -146,6 +146,10 @@ class ZenMediaController {
     if (!this.mediaControlBar.hasAttribute('hidden')) return;
 
     this.updatePipButton();
+    const mediaInfoElements = [this.mediaTitle, this.mediaArtist];
+    for (const element of mediaInfoElements) {
+      element.removeAttribute('overflow'); // So we can properly recalculate the overflow
+    }
 
     this.mediaControlBar.removeAttribute('hidden');
     window.requestAnimationFrame(() => {
@@ -161,12 +165,11 @@ class ZenMediaController {
         },
         {}
       );
-      this.addLabelOverflows();
+      this.addLabelOverflows(mediaInfoElements);
     });
   }
 
-  addLabelOverflows() {
-    const elements = [this.mediaTitle, this.mediaArtist];
+  addLabelOverflows(elements) {
     for (const element of elements) {
       const parent = element.parentElement;
       if (element.scrollWidth > parent.clientWidth) {

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

@@ -57,13 +57,6 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     XPCOMUtils.defineLazyPreferenceGetter(this, 'activationMethod', 'zen.workspaces.scroll-modifier-key', 'ctrl');
     XPCOMUtils.defineLazyPreferenceGetter(this, 'naturalScroll', 'zen.workspaces.natural-scroll', true);
     XPCOMUtils.defineLazyPreferenceGetter(this, 'shouldWrapAroundNavigation', 'zen.workspaces.wrap-around-navigation', true);
-    XPCOMUtils.defineLazyPreferenceGetter(
-      this,
-      'shouldShowIconStrip',
-      'zen.workspaces.show-icon-strip',
-      true,
-      this._expandWorkspacesStrip.bind(this)
-    );
     XPCOMUtils.defineLazyPreferenceGetter(
       this,
       'shouldForceContainerTabsToWorkspace',
@@ -139,7 +132,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
   async _createDefaultWorkspaceIfNeeded() {
     const workspaces = await this._workspaces();
     if (!workspaces.workspaces.length) {
-      await this.createAndSaveWorkspace('Default Workspace', true, '🏠', true);
+      await this.createAndSaveWorkspace('Default', true, null, true);
       this._workspaceCache = null;
     }
   }
@@ -1323,7 +1316,6 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
 
     button.setAttribute('showInPrivateBrowsing', 'false');
     button.setAttribute('tooltiptext', 'Workspaces');
-    if (this.shouldShowIconStrip) {
     let workspaces = await this._workspaces();
 
     for (let workspace of workspaces.workspaces) {
@@ -1352,7 +1344,11 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
 
       let icon = browser.document.createXULElement('div');
       icon.className = 'zen-workspace-icon';
+      if (this.workspaceHasIcon(workspace)) {
         icon.textContent = this.getWorkspaceIcon(workspace);
+      } else {
+        icon.setAttribute('no-icon', 'true');
+      }
       workspaceButton.appendChild(icon);
       button.appendChild(workspaceButton);
     }
@@ -1369,36 +1365,6 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
       this.openWorkspacesDialog(event);
     };
     button.addEventListener('contextmenu', this._workspaceButtonContextMenuListener.bind(browser.ZenWorkspaces));
-    } else {
-      let activeWorkspace = await this.getActiveWorkspace();
-      if (activeWorkspace) {
-        button.setAttribute('as-button', 'true');
-        button.classList.add('toolbarbutton-1', 'zen-sidebar-action-button');
-
-        this._workspacesButtonClickListener = browser.ZenWorkspaces.openWorkspacesDialog.bind(browser.ZenWorkspaces);
-        button.addEventListener('click', this._workspacesButtonClickListener);
-
-        const wrapper = browser.document.createXULElement('hbox');
-        wrapper.className = 'zen-workspace-sidebar-wrapper';
-
-        const icon = browser.document.createXULElement('div');
-        icon.className = 'zen-workspace-sidebar-icon';
-        icon.textContent = this.getWorkspaceIcon(activeWorkspace);
-
-        const name = browser.document.createXULElement('div');
-        name.className = 'zen-workspace-sidebar-name';
-        name.textContent = activeWorkspace.name;
-
-        if (!this.workspaceHasIcon(activeWorkspace)) {
-          icon.setAttribute('no-icon', 'true');
-        }
-
-        wrapper.appendChild(icon);
-        wrapper.appendChild(name);
-
-        button.appendChild(wrapper);
-      }
-    }
   }
 
   closeWorkspacesSubView() {

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

@@ -944,11 +944,6 @@ Preferences.addAll([
     type: 'bool',
     default: true,
   },
-  {
-    id: 'zen.workspaces.show-icon-strip',
-    type: 'bool',
-    default: true,
-  },
   {
     id: 'zen.tab-unloader.enabled',
     type: 'bool',

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

@@ -20,9 +20,6 @@
       <checkbox id="zenWorkspacesHideDefaultContainer"
             data-l10n-id="zen-settings-workspaces-hide-default-container-indicator"
             preference="zen.workspaces.hide-default-container-indicator"/>
-      <checkbox id="zenWorkspacesDisplayAsIconStrip"
-            data-l10n-id="zen-settings-workspaces-display-as-icon-strip"
-            preference="zen.workspaces.show-icon-strip"/>
       <checkbox id="zenWorkspacesForceContainerTabsToWorkspace"
             data-l10n-id="zen-settings-workspaces-force-container-tabs-to-workspace"
             preference="zen.workspaces.force-container-workspace"/>