diff --git a/l10n b/l10n index 7c14b58a2..778cb128c 160000 --- a/l10n +++ b/l10n @@ -1 +1 @@ -Subproject commit 7c14b58a28845a131a00153eb11c8ca5395bf26b +Subproject commit 778cb128c659c7b8f57080e99fbc04f8d93c30a2 diff --git a/src/browser/app/profile/zen-browser.js b/src/browser/app/profile/zen-browser.js index 84fe71202..e6408b985 100644 --- a/src/browser/app/profile/zen-browser.js +++ b/src/browser/app/profile/zen-browser.js @@ -199,7 +199,6 @@ pref('zen.startup.smooth-scroll-in-tabs', true); // Zen Workspaces 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.force-container-workspace', false); pref('zen.workspaces.open-new-tab-if-last-unpinned-tab-is-closed', false); diff --git a/src/browser/base/content/zen-styles/zen-gradient-generator.css b/src/browser/base/content/zen-styles/zen-gradient-generator.css index 09971dd3d..998fa95b8 100644 --- a/src/browser/base/content/zen-styles/zen-gradient-generator.css +++ b/src/browser/base/content/zen-styles/zen-gradient-generator.css @@ -5,7 +5,7 @@ */ #PanelUI-zen-gradient-generator { - --panel-width: 300px; + --panel-width: 320px; --panel-padding: 10px; min-width: var(--panel-width); } diff --git a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css index a5fcf745e..65473b89e 100644 --- a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css +++ b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css @@ -474,9 +474,6 @@ } & #zen-workspaces-button { - margin-left: 2px; - margin-right: 2px; - & .zen-workspace-sidebar-icon[no-icon='true'] { display: none; } diff --git a/src/browser/base/content/zen-styles/zen-workspaces.css b/src/browser/base/content/zen-styles/zen-workspaces.css index dc3ff6c85..d69e930d3 100644 --- a/src/browser/base/content/zen-styles/zen-workspaces.css +++ b/src/browser/base/content/zen-styles/zen-workspaces.css @@ -20,11 +20,13 @@ --toolbarbutton-hover-background: transparent !important; border-radius: var(--zen-button-border-radius) !important; background: transparent; - padding: 2px; appearance: unset !important; height: fit-content; gap: 3px; + container-type: inline-size; + width: 100%; + & toolbarbutton { margin: auto; width: 25px; @@ -34,8 +36,44 @@ align-items: center; position: relative; - @media (-moz-bool-pref: 'zen.workspaces.hide-deactivated-workspaces') { - &:not([active='true']):not(:hover) { + & .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%; + } + + filter: grayscale(1); + opacity: 0.5; + transition: + filter 0.2s, + opacity 0.2s, + width 0.1s; + + &[active='true'], + &:hover { + filter: grayscale(0); + opacity: 1; + } + + &:hover { + background-color: var(--zen-toolbar-element-bg); + } + } + + &[overflow] { + gap: 0 !important; + + & toolbarbutton { + margin: 0; + } + + & toolbarbutton:not([active='true']), + &:has(toolbarbutton:hover) toolbarbutton[active='true'] { + &:not(:hover) { + width: min(var(--zen-overflowed-workspace-button-width), 25px); + min-width: 10px; + &::after { content: ''; position: absolute; @@ -58,33 +96,6 @@ } } } - - & .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); - opacity: 0.5; - transition: - filter 0.2s, - opacity 0.2s; - } - - &[active='true'], - &:hover { - filter: grayscale(0); - opacity: 1; - } - - &:hover { - background-color: var(--zen-toolbar-element-bg); - } - } } } @@ -118,8 +129,6 @@ & #zen-workspaces-button { overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; display: flex; gap: 0.5ch; } diff --git a/src/browser/base/zen-components/ZenGradientGenerator.mjs b/src/browser/base/zen-components/ZenGradientGenerator.mjs index 1dd3a8e7e..97dce58c9 100644 --- a/src/browser/base/zen-components/ZenGradientGenerator.mjs +++ b/src/browser/base/zen-components/ZenGradientGenerator.mjs @@ -500,9 +500,8 @@ const centerPosition = { x: rect.width / 2, y: rect.height / 2 }; const harmonyAngles = getColorHarmonyType(dots.length + (action === 'add' ? 1 : action === 'remove' ? -1 : 0), this.dots); - if (!harmonyAngles || harmonyAngles.angles.length === 0) return dots; - this.useAlgo = harmonyAngles.type; + if (!harmonyAngles || harmonyAngles.angles.length === 0) return dots; let primaryDot = dots.find((dot) => dot.ID === 0); if (!primaryDot) return []; @@ -638,7 +637,7 @@ } }); - let colorPositions = this.calculateCompliments(this.dots, 'remove', this.useAlgo); + let colorPositions = this.calculateCompliments(this.dots, 'remove'); this.handleColorPositions(colorPositions); this.updateCurrentWorkspace(); return; @@ -780,7 +779,7 @@ } }); - let colorPositions = this.calculateCompliments(this.dots, 'remove', this.useAlgo); + let colorPositions = this.calculateCompliments(this.dots, 'remove'); this.handleColorPositions(colorPositions); this.updateCurrentWorkspace(); diff --git a/src/browser/base/zen-components/ZenMediaController.mjs b/src/browser/base/zen-components/ZenMediaController.mjs index e6c7e9542..e21c99882 100644 --- a/src/browser/base/zen-components/ZenMediaController.mjs +++ b/src/browser/base/zen-components/ZenMediaController.mjs @@ -58,16 +58,8 @@ class ZenMediaController { } }); - window.addEventListener('TabClose', (event) => { - const linkedBrowser = event.target.linkedBrowser; - if (!linkedBrowser?.browsingContext?.mediaController) return; - this.deinitMediaController( - linkedBrowser.browsingContext.mediaController, - true, - linkedBrowser.browserId === this._currentBrowser?.browserId, - true - ); - }); + const onTabDiscardedOrClosed = this.onTabDiscardedOrClosed.bind(this); + window.addEventListener('TabClose', onTabDiscardedOrClosed); window.addEventListener('DOMAudioPlaybackStarted', (event) => { setTimeout(() => { @@ -89,6 +81,17 @@ class ZenMediaController { window.addEventListener('DOMAudioPlaybackStopped', () => this.updateMuteState()); } + onTabDiscardedOrClosed(event) { + const linkedBrowser = event.target.linkedBrowser; + if (!linkedBrowser?.browsingContext?.mediaController) return; + this.deinitMediaController( + linkedBrowser.browsingContext.mediaController, + true, + linkedBrowser.browserId === this._currentBrowser?.browserId, + true + ); + } + async deinitMediaController(mediaController, shouldForget = true, shouldOverride = true, shouldHide = true) { if (!mediaController) return; diff --git a/src/browser/base/zen-components/ZenTabUnloader.mjs b/src/browser/base/zen-components/ZenTabUnloader.mjs index a3479e412..07ea6a373 100644 --- a/src/browser/base/zen-components/ZenTabUnloader.mjs +++ b/src/browser/base/zen-components/ZenTabUnloader.mjs @@ -22,8 +22,6 @@ 'TabAttrModified', 'TabPinned', 'TabUnpinned', - 'TabBrowserInserted', - 'TabBrowserDiscarded', 'TabShow', 'TabHide', 'TabOpen', @@ -150,8 +148,6 @@ switch (action) { case 'TabPinned': case 'TabUnpinned': - case 'TabBrowserInserted': - case 'TabBrowserDiscarded': case 'TabShow': case 'TabHide': break; @@ -265,9 +261,9 @@ tab.selected || (tab.multiselected && !ignoreTimestamp) || (tab.hasAttribute('busy') && !ignoreTimestamp) || - tab.hasAttribute('pending') || !tab.linkedPanel || tab.splitView || + tab.group?.hasAttribute('split-view-group') || tab.attention || tab.hasAttribute('glance-id') || tab.linkedBrowser?.zenModeActive || @@ -293,8 +289,8 @@ _tabPermitsUnload(tab, extraArgs) { return typeof extraArgs.permitUnload === 'undefined' - ? !tab.linkedBrowser?.permitUnload()?.permitUnload - : !extraArgs.permitUnload; + ? tab.linkedBrowser?.permitUnload()?.permitUnload + : extraArgs.permitUnload; } } diff --git a/src/browser/base/zen-components/ZenWorkspaces.mjs b/src/browser/base/zen-components/ZenWorkspaces.mjs index 01c436c58..f1c37c2be 100644 --- a/src/browser/base/zen-components/ZenWorkspaces.mjs +++ b/src/browser/base/zen-components/ZenWorkspaces.mjs @@ -77,6 +77,8 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature { ); ChromeUtils.defineLazyGetter(this, 'tabContainer', () => document.getElementById('tabbrowser-tabs')); this._activeWorkspace = Services.prefs.getStringPref('zen.workspaces.active', ''); + + window.addEventListener('resize', this.onWindowResize.bind(this)); } async afterLoadInit() { @@ -599,6 +601,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature { } catch (e) { console.error('ZenWorkspaces: Error initializing theme picker', e); } + this.onWindowResize(); await this._selectStartPage(); this._fixTabPositions(); this._resolveInitialized(); @@ -2368,4 +2371,21 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature { const workspace = workspaces.workspaces.find((workspace) => workspace.uuid === activeWorkspace); return workspace.containerTabId; } + + onWindowResize() { + // Check if workspace icons overflow the parent container + const parent = document.getElementById('zen-workspaces-button'); + if (!parent) { + return; + } + // Once we are overflowing, we align the buttons to always stay inside the container, + // meaning we need to remove the overflow attribute to reset the width + parent.removeAttribute('overflow'); + const overflow = parent.scrollWidth > parent.clientWidth; + parent.toggleAttribute('overflow', overflow); + // The maximum width a button has when it overflows based on the number of buttons + const numButtons = parent.children.length + 1; // +1 to exclude the active button + const maxWidth = 100 / numButtons; + parent.style.setProperty('--zen-overflowed-workspace-button-width', `${maxWidth}%`); + } })(); diff --git a/src/browser/components/preferences/zen-settings.js b/src/browser/components/preferences/zen-settings.js index 6383e9b3f..1c9f283ec 100644 --- a/src/browser/components/preferences/zen-settings.js +++ b/src/browser/components/preferences/zen-settings.js @@ -959,11 +959,6 @@ Preferences.addAll([ type: 'int', default: 10, }, - { - id: 'zen.workspaces.hide-deactivated-workspaces', - type: 'bool', - default: true, - }, { id: 'zen.pinned-tab-manager.restore-pinned-tabs-to-pinned-url', type: 'bool', diff --git a/src/browser/components/preferences/zenTabsManagement.inc.xhtml b/src/browser/components/preferences/zenTabsManagement.inc.xhtml index 7e148a9b6..47236d364 100644 --- a/src/browser/components/preferences/zenTabsManagement.inc.xhtml +++ b/src/browser/components/preferences/zenTabsManagement.inc.xhtml @@ -23,9 +23,6 @@ -