From c8e58ad5259e44513376e7b400a0c00aa5683641 Mon Sep 17 00:00:00 2001 From: "mr. m" Date: Fri, 15 Aug 2025 20:13:29 +0200 Subject: [PATCH] fix: Fixed flashing on essential tabs when switching workspaces, b=no-bug, c=configs, common, folders, workspaces --- configs/macos/mozconfig | 10 +- src/zen/common/ZenCustomizableUI.sys.mjs | 18 ---- src/zen/common/ZenUIManager.mjs | 29 +++++ src/zen/folders/zen-folders.css | 14 ++- src/zen/workspaces/ZenWorkspaces.mjs | 129 +++++++++++------------ 5 files changed, 108 insertions(+), 92 deletions(-) diff --git a/configs/macos/mozconfig b/configs/macos/mozconfig index 16a6a176a3..0df4c6858b 100644 --- a/configs/macos/mozconfig +++ b/configs/macos/mozconfig @@ -7,10 +7,12 @@ unset MOZ_STDCXX_COMPAT ac_add_options --disable-dmd ac_add_options --enable-eme=widevine -# override LTO settings -# TODO: Dont use LTO for now, it's causing a lot of issues -export MOZ_LTO=cross,thin -ac_add_options --enable-lto=cross,thin +if test "$ZEN_RELEASE"; then + # override LTO settings + # TODO: Dont use LTO for now, it's causing a lot of issues + export MOZ_LTO=cross,thin + ac_add_options --enable-lto=cross,thin +fi if test "$ZEN_RELEASE"; then if test "$ZEN_GA_DISABLE_PGO"; then diff --git a/src/zen/common/ZenCustomizableUI.sys.mjs b/src/zen/common/ZenCustomizableUI.sys.mjs index 9de7458f99..2279b4074a 100644 --- a/src/zen/common/ZenCustomizableUI.sys.mjs +++ b/src/zen/common/ZenCustomizableUI.sys.mjs @@ -110,26 +110,8 @@ export var ZenCustomizableUI = new (class { if (button.hasAttribute('open')) { return; } - const image = button.querySelector('image'); const popup = window.document.getElementById('zenCreateNewPopup'); - button.setAttribute('open', 'true'); - const handlePopupHidden = () => { - window.setTimeout(() => { - button.removeAttribute('open'); - }, 500); - window.gZenUIManager.motion.animate( - image, - { transform: ['rotate(45deg)', 'rotate(0deg)'] }, - { duration: 0.2 } - ); - }; - popup.addEventListener('popuphidden', handlePopupHidden, { once: true }); popup.openPopup(button, 'after_start'); - window.gZenUIManager.motion.animate( - image, - { transform: ['rotate(0deg)', 'rotate(45deg)'] }, - { duration: 0.2 } - ); }); } diff --git a/src/zen/common/ZenUIManager.mjs b/src/zen/common/ZenUIManager.mjs index 6457e34f4e..fa5363966e 100644 --- a/src/zen/common/ZenUIManager.mjs +++ b/src/zen/common/ZenUIManager.mjs @@ -72,6 +72,35 @@ var gZenUIManager = { gZenMediaController.init(); gZenVerticalTabsManager.init(); + + this._initCreateNewPopup(); + }, + + _initCreateNewPopup() { + const popup = document.getElementById('zenCreateNewPopup'); + const button = document.getElementById('zen-create-new-button'); + + popup.addEventListener('popupshowing', () => { + const image = button.querySelector('image'); + button.setAttribute('open', 'true'); + gZenUIManager.motion.animate( + image, + { transform: ['rotate(0deg)', 'rotate(45deg)'] }, + { duration: 0.2 } + ); + popup.addEventListener( + 'popuphidden', + () => { + button.removeAttribute('open'); + gZenUIManager.motion.animate( + image, + { transform: ['rotate(45deg)', 'rotate(0deg)'] }, + { duration: 0.2 } + ); + }, + { once: true } + ); + }); }, handleMouseDown(event) { diff --git a/src/zen/folders/zen-folders.css b/src/zen/folders/zen-folders.css index 2d5436e20b..ead7f1f51b 100644 --- a/src/zen/folders/zen-folders.css +++ b/src/zen/folders/zen-folders.css @@ -367,7 +367,6 @@ zen-folder { flex-direction: row; padding: 6px; border-bottom: 1px solid color-mix(in srgb, currentColor, transparent 90%); - margin-bottom: 2px; } #zen-folder-tabs-popup #zen-folder-tabs-list-search { @@ -441,16 +440,21 @@ zen-folder { align-items: center; direction: ltr; padding: 0 var(--tab-inline-padding); - border-radius: 4px; - margin: 2px 0; + border-radius: 6px; + margin: 4px 0; .folders-tabs-list-item[selected] & { background-color: color-mix(in srgb, currentColor, transparent 90%); } &:last-child { - border-bottom-left-radius: max(calc(var(--panel-border-radius) - 4px), 4px); - border-bottom-right-radius: max(calc(var(--panel-border-radius) - 4px), 4px); + border-bottom-left-radius: max(calc(var(--panel-border-radius) - 6px), 4px); + border-bottom-right-radius: max(calc(var(--panel-border-radius) - 6px), 4px); + } + + &:first-child { + border-top-left-radius: max(calc(var(--panel-border-radius) - 6px), 4px); + border-top-right-radius: max(calc(var(--panel-border-radius) - 6px), 4px); } } diff --git a/src/zen/workspaces/ZenWorkspaces.mjs b/src/zen/workspaces/ZenWorkspaces.mjs index baadaac4ea..146646468b 100644 --- a/src/zen/workspaces/ZenWorkspaces.mjs +++ b/src/zen/workspaces/ZenWorkspaces.mjs @@ -301,7 +301,12 @@ var gZenWorkspaces = new (class extends nsZenMultiWindowFeature { if (!this.workspaceEnabled) { return; } - this._pinnedTabsResizeObserver = new ResizeObserver(this.onPinnedTabsResize.bind(this)); + const onResize = (...args) => { + requestAnimationFrame(() => { + this.onPinnedTabsResize(...args); + }); + }; + this._pinnedTabsResizeObserver = new ResizeObserver(onResize); await this._createDefaultWorkspaceIfNeeded(); } @@ -2402,73 +2407,67 @@ var gZenWorkspaces = new (class extends nsZenMultiWindowFeature { } async onPinnedTabsResize(entries, forAnimation = false, animateContainer = false) { - await new Promise((resolve) => { - requestAnimationFrame(async () => { - if ( - !this._hasInitializedTabsStrip || - (this._organizingWorkspaceStrip && !forAnimation) || - document.documentElement.hasAttribute('zen-creating-workspace') || - document.documentElement.hasAttribute('customizing') - ) { - resolve(); - return; + if ( + !this._hasInitializedTabsStrip || + (this._organizingWorkspaceStrip && !forAnimation) || + document.documentElement.hasAttribute('zen-creating-workspace') || + document.documentElement.hasAttribute('customizing') + ) { + return; + } + // forAnimation may be of type "ResizeObserver" if it's not a boolean, just ignore it + if (typeof forAnimation !== 'boolean') { + forAnimation = false; + } + for (const entry of entries) { + let originalWorkspaceId = entry.target.getAttribute('zen-workspace-id'); + if (!originalWorkspaceId) { + originalWorkspaceId = entry.target.closest('zen-workspace')?.id; + } + const workspacesIds = []; + if (entry.target.closest('#zen-essentials')) { + // Get all workspaces that have the same userContextId + const activeWorkspace = await this.getActiveWorkspace(); + const userContextId = activeWorkspace.containerTabId; + const workspaces = this._workspaceCache.workspaces.filter( + (w) => w.containerTabId === userContextId && w.uuid !== originalWorkspaceId + ); + workspacesIds.push(...workspaces.map((w) => w.uuid)); + } else { + workspacesIds.push(originalWorkspaceId); + } + for (const workspaceId of workspacesIds) { + const workspaceElement = this.workspaceElement(workspaceId); + if (!workspaceElement) { + continue; } - // forAnimation may be of type "ResizeObserver" if it's not a boolean, just ignore it - if (typeof forAnimation !== 'boolean') { - forAnimation = false; + const arrowScrollbox = workspaceElement.tabsContainer; + const pinnedContainer = workspaceElement.pinnedTabsContainer; + const workspaceObject = this.getWorkspaceFromId(workspaceId); + const essentialContainer = this.getEssentialsSection(workspaceObject.containerTabId); + const essentialNumChildren = essentialContainer.children.length; + let essentialHackType = 0; + if (essentialNumChildren === 6 || essentialNumChildren === 9) { + essentialHackType = 1; + } else if (essentialNumChildren % 2 === 0 && essentialNumChildren < 8) { + essentialHackType = 2; + } else if (essentialNumChildren === 5) { + essentialHackType = 3; } - for (const entry of entries) { - let originalWorkspaceId = entry.target.getAttribute('zen-workspace-id'); - if (!originalWorkspaceId) { - originalWorkspaceId = entry.target.closest('zen-workspace')?.id; - } - const workspacesIds = []; - if (entry.target.closest('#zen-essentials')) { - // Get all workspaces that have the same userContextId - const activeWorkspace = await this.getActiveWorkspace(); - const userContextId = activeWorkspace.containerTabId; - const workspaces = this._workspaceCache.workspaces.filter( - (w) => w.containerTabId === userContextId && w.uuid !== originalWorkspaceId - ); - workspacesIds.push(...workspaces.map((w) => w.uuid)); - } else { - workspacesIds.push(originalWorkspaceId); - } - for (const workspaceId of workspacesIds) { - const workspaceElement = this.workspaceElement(workspaceId); - if (!workspaceElement) { - continue; - } - const arrowScrollbox = workspaceElement.tabsContainer; - const pinnedContainer = workspaceElement.pinnedTabsContainer; - const workspaceObject = this.getWorkspaceFromId(workspaceId); - const essentialContainer = this.getEssentialsSection(workspaceObject.containerTabId); - const essentialNumChildren = essentialContainer.children.length; - let essentialHackType = 0; - if (essentialNumChildren === 6 || essentialNumChildren === 9) { - essentialHackType = 1; - } else if (essentialNumChildren % 2 === 0 && essentialNumChildren < 8) { - essentialHackType = 2; - } else if (essentialNumChildren === 5) { - essentialHackType = 3; - } - if (essentialHackType > 0) { - essentialContainer.setAttribute('data-hack-type', essentialHackType); - } else { - essentialContainer.removeAttribute('data-hack-type'); - } - this._updatePaddingTopOnTabs( - workspaceElement, - essentialContainer, - forAnimation, - animateContainer - ); - this.updateShouldHideSeparator(arrowScrollbox, pinnedContainer); - } - resolve(); + if (essentialHackType > 0) { + essentialContainer.setAttribute('data-hack-type', essentialHackType); + } else { + essentialContainer.removeAttribute('data-hack-type'); } - }); - }); + this._updatePaddingTopOnTabs( + workspaceElement, + essentialContainer, + forAnimation, + animateContainer + ); + this.updateShouldHideSeparator(arrowScrollbox, pinnedContainer); + } + } } async onTabBrowserInserted(event) {