From 9712ced2bf8a680190d1e5d8c40602867ced8d92 Mon Sep 17 00:00:00 2001 From: "mr. M" Date: Thu, 20 Feb 2025 20:34:55 +0100 Subject: [PATCH] Refactor tab management and styling for improved workspace organization and UI consistency --- src/browser/base/content/ZenUIManager.mjs | 3 +++ src/browser/base/content/zen-styles/zen-compact-mode.css | 3 ++- src/browser/base/content/zen-styles/zen-theme.css | 1 + src/browser/base/content/zen-styles/zen-urlbar.css | 3 ++- src/browser/base/content/zen-styles/zen-workspaces.css | 7 ++++--- src/browser/base/zen-components/ZenWorkspaces.mjs | 7 +++++-- 6 files changed, 17 insertions(+), 7 deletions(-) diff --git a/src/browser/base/content/ZenUIManager.mjs b/src/browser/base/content/ZenUIManager.mjs index c895c0109..b14a2edc6 100644 --- a/src/browser/base/content/ZenUIManager.mjs +++ b/src/browser/base/content/ZenUIManager.mjs @@ -685,6 +685,7 @@ var gZenVerticalTabsManager = { // Update pin title in storage await gZenPinnedTabManager.updatePinTitle(this._tabEdited, this._tabEdited.label, !!newName); } + document.documentElement.removeAttribute('zen-renaming-tab'); // Maybe add some confetti here?!? gZenUIManager.motion.animate( @@ -714,6 +715,7 @@ var gZenVerticalTabsManager = { !gZenVerticalTabsManager._prefsSidebarExpanded ) return; + document.documentElement.setAttribute('zen-renaming-tab', 'true'); this._tabEdited = event.target.closest('.tabbrowser-tab'); if (!this._tabEdited || !this._tabEdited.pinned || this._tabEdited.hasAttribute('zen-essential')) { this._tabEdited = null; @@ -743,6 +745,7 @@ var gZenVerticalTabsManager = { if (document.activeElement === event.target || !this._tabEdited) { return; } + document.documentElement.removeAttribute('zen-renaming-tab'); this._tabEdited.querySelector('.tab-editor-container').remove(); const label = this._tabEdited.querySelector('.tab-label-container-editing'); label.classList.remove('tab-label-container-editing'); diff --git a/src/browser/base/content/zen-styles/zen-compact-mode.css b/src/browser/base/content/zen-styles/zen-compact-mode.css index 41cb6af7b..10e2cfe34 100644 --- a/src/browser/base/content/zen-styles/zen-compact-mode.css +++ b/src/browser/base/content/zen-styles/zen-compact-mode.css @@ -106,7 +106,7 @@ background-attachment: fixed !important; background-size: 2000px !important; /* Dont ask me why */ /* NOTE: We MUST not add a backdrop-filter if we want the URL - * bar to be floating correctly: + * bar to be floating correctly: * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/Containing_block#identifying_the_containing_block */ } @@ -139,6 +139,7 @@ #navigator-toolbox[has-popup-menu], #navigator-toolbox[movingtab], #navigator-toolbox:has(.tabbrowser-tab:active), + &[zen-renaming-tab='true'] #navigator-toolbox, #navigator-toolbox:has( *:is([panelopen='true'], [open='true'], #urlbar:not([zen-floating-urlbar='true']):focus-within):not(tab):not(.zen-compact-mode-ignore) ) { diff --git a/src/browser/base/content/zen-styles/zen-theme.css b/src/browser/base/content/zen-styles/zen-theme.css index fb90fcaaa..5b7631680 100644 --- a/src/browser/base/content/zen-styles/zen-theme.css +++ b/src/browser/base/content/zen-styles/zen-theme.css @@ -125,6 +125,7 @@ --zen-main-browser-background-toolbar: var(--zen-main-browser-background); --browser-area-z-index-toolbox: 2 !important; + --attention-dot-color: transparent !important; --zen-appcontent-border: 1px solid var(--zen-colors-border); diff --git a/src/browser/base/content/zen-styles/zen-urlbar.css b/src/browser/base/content/zen-styles/zen-urlbar.css index f84b81e28..7243c7171 100644 --- a/src/browser/base/content/zen-styles/zen-urlbar.css +++ b/src/browser/base/content/zen-styles/zen-urlbar.css @@ -31,7 +31,7 @@ border-radius: var(--border-radius-medium); outline: none !important; - border: 1px solid hsla(0, 0%, 100%, 0.1) !important; + border: none !important; margin: 1px; box-shadow: none !important; @@ -114,6 +114,7 @@ #urlbar[breakout-extend='true'] #urlbar-background { box-shadow: 0px 0px 90px -10px rgba(0, 0, 0, 0.6) !important; + border: 1px solid hsla(0, 0%, 100%, 0.1) !important; backdrop-filter: none !important; } diff --git a/src/browser/base/content/zen-styles/zen-workspaces.css b/src/browser/base/content/zen-styles/zen-workspaces.css index ac79432ca..c728bd70e 100644 --- a/src/browser/base/content/zen-styles/zen-workspaces.css +++ b/src/browser/base/content/zen-styles/zen-workspaces.css @@ -461,11 +461,9 @@ max-height: var(--zen-workspace-indicator-height); min-height: var(--zen-workspace-indicator-height); gap: 12px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; align-items: center; flex-direction: row !important; + max-width: 100%; &::before { border-radius: var(--border-radius-medium); @@ -495,6 +493,9 @@ .zen-current-workspace-indicator-name { opacity: 0.5; display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } } diff --git a/src/browser/base/zen-components/ZenWorkspaces.mjs b/src/browser/base/zen-components/ZenWorkspaces.mjs index c529a145b..6c3e9829a 100644 --- a/src/browser/base/zen-components/ZenWorkspaces.mjs +++ b/src/browser/base/zen-components/ZenWorkspaces.mjs @@ -200,13 +200,17 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature { const defaultSelectedContainer = document.querySelector( `#tabbrowser-arrowscrollbox .zen-workspace-tabs-section[zen-workspace-id="${this.activeWorkspace}"]` ); + const essentialsContaienr = document.getElementById('zen-essentials-container'); // New profile with no workspaces does not have a default selected container if (defaultSelectedContainer) { const pinnedContainer = document.querySelector( `#vertical-pinned-tabs-container .zen-workspace-tabs-section[zen-workspace-id="${this.activeWorkspace}"]` ); for (const tab of tabs) { - if (tab.pinned) { + if (tab.hasAttribute('zen-essential')) { + essentialsContaienr.appendChild(tab); + continue + } else if (tab.pinned) { pinnedContainer.insertBefore(tab, pinnedContainer.lastChild); continue; } @@ -1923,7 +1927,6 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature { const contaienr = document.querySelector( `#vertical-pinned-tabs-container .zen-workspace-tabs-section[zen-workspace-id="${workspaceId}"]` ); - console.log(tab); contaienr.insertBefore(tab, contaienr.firstChild); changed = true; }