From e4e92a463fd49bdffa9198e8c1d811266b46ebe8 Mon Sep 17 00:00:00 2001 From: "mr. M" Date: Mon, 24 Mar 2025 18:36:05 +0100 Subject: [PATCH 1/3] feat(workspaces): rename method to openCreateForm and update workspace creation logic --- .../base/content/zen-popupset.inc.xhtml | 2 +- .../base/content/zen-styles/zen-popup.css | 2 +- .../base/zen-components/ZenWorkspaces.mjs | 49 ++++++++++++++++++- 3 files changed, 50 insertions(+), 3 deletions(-) diff --git a/src/browser/base/content/zen-popupset.inc.xhtml b/src/browser/base/content/zen-popupset.inc.xhtml index 3550803c..ce93e8b1 100644 --- a/src/browser/base/content/zen-popupset.inc.xhtml +++ b/src/browser/base/content/zen-popupset.inc.xhtml @@ -149,7 +149,7 @@ - + diff --git a/src/browser/base/content/zen-styles/zen-popup.css b/src/browser/base/content/zen-styles/zen-popup.css index 8cb65147..49fd937d 100644 --- a/src/browser/base/content/zen-styles/zen-popup.css +++ b/src/browser/base/content/zen-styles/zen-popup.css @@ -365,7 +365,7 @@ menuitem { } & .zen-toast { - padding: 0.9rem 0.8rem; + padding: 0.5rem 0.6rem; border-radius: 12px; background: linear-gradient( 170deg, diff --git a/src/browser/base/zen-components/ZenWorkspaces.mjs b/src/browser/base/zen-components/ZenWorkspaces.mjs index cc2d497a..3bf3a84e 100644 --- a/src/browser/base/zen-components/ZenWorkspaces.mjs +++ b/src/browser/base/zen-components/ZenWorkspaces.mjs @@ -1913,7 +1913,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature { return window; } - async createAndSaveWorkspace(name = 'New Workspace', isDefault = false, icon = undefined, dontChange = false) { + async createAndSaveWorkspace(name = 'Space', isDefault = false, icon = undefined, dontChange = false) { if (!this.workspaceEnabled) { return; } @@ -2395,4 +2395,51 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature { this._processingResize = false; }); } + + async openCreateForm() { + window.docShell.treeOwner + .QueryInterface(Ci.nsIInterfaceRequestor) + .getInterface(Ci.nsIAppWindow) + .rollupAllPopups(); + this.selectEmptyTab(); + const sidebarWidth = gNavToolbox.style.getPropertyValue('--actual-zen-sidebar-width'); + let elementsToAnimate = [gNavToolbox]; + if (gZenVerticalTabsManager._hasSetSingleToolbar) { + elementsToAnimate.push(gURLBar.textbox); + } + this._creatingNewWorkspace = true; + gNavToolbox.style.zIndex = -1; + await Promise.all([ + gZenUIManager.motion.animate(elementsToAnimate, { + transform: ['scale(1)', 'scale(0.8)'], + opacity: [1, 0], + }), + gZenUIManager.motion.animate( + gBrowser.tabpanels, + { + marginLeft: ['0px', '-' + sidebarWidth], + }, + { + delay: 0.2, + } + ), + this.createAndSaveWorkspace() + ]); + const form = window.MozXULElement.parseXULToFragment(` + + + + + + + + + + + + + `); + } })(); From 56a703de46cb7ccef977bbb622e17787158b632f Mon Sep 17 00:00:00 2001 From: "mr. m" Date: Mon, 24 Mar 2025 18:58:03 +0100 Subject: [PATCH 2/3] feat(workspaces): add styling for workspace creation form and append it to tabpanels --- .../base/content/zen-styles/zen-workspaces.css | 11 +++++++++++ src/browser/base/zen-components/ZenWorkspaces.mjs | 4 +++- 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/src/browser/base/content/zen-styles/zen-workspaces.css b/src/browser/base/content/zen-styles/zen-workspaces.css index ab55b1a5..c85531e1 100644 --- a/src/browser/base/content/zen-styles/zen-workspaces.css +++ b/src/browser/base/content/zen-styles/zen-workspaces.css @@ -489,3 +489,14 @@ #zen-current-workspace-indicator-container[hidden='true'] { display: none !important; } + +#zen-workspace-create-form-wrapper { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} diff --git a/src/browser/base/zen-components/ZenWorkspaces.mjs b/src/browser/base/zen-components/ZenWorkspaces.mjs index 3bf3a84e..e7b777f3 100644 --- a/src/browser/base/zen-components/ZenWorkspaces.mjs +++ b/src/browser/base/zen-components/ZenWorkspaces.mjs @@ -2409,6 +2409,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature { } this._creatingNewWorkspace = true; gNavToolbox.style.zIndex = -1; + document.getElementById('zen-sidebar-splitter').style.setProperty('min-width', 'var(--zen-element-separation)', 'important'); await Promise.all([ gZenUIManager.motion.animate(elementsToAnimate, { transform: ['scale(1)', 'scale(0.8)'], @@ -2425,7 +2426,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature { ), this.createAndSaveWorkspace() ]); - const form = window.MozXULElement.parseXULToFragment(` + this._createWorkspcaeForm = window.MozXULElement.parseXULToFragment(` @@ -2441,5 +2442,6 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature { `); + gBrowser.tabpanels.appendChild(form); } })(); From 8fcdddab56b667f987477ecdbf5871ffbb9fdab4 Mon Sep 17 00:00:00 2001 From: "mr. m" Date: Mon, 24 Mar 2025 19:21:12 +0100 Subject: [PATCH 3/3] feat(workspaces): enhance workspace creation form styling and update tabpanel integration --- .../content/zen-styles/zen-workspaces.css | 24 +++++++++++++++++++ .../base/zen-components/ZenWorkspaces.mjs | 13 +++++----- 2 files changed, 30 insertions(+), 7 deletions(-) diff --git a/src/browser/base/content/zen-styles/zen-workspaces.css b/src/browser/base/content/zen-styles/zen-workspaces.css index c85531e1..8b0030f0 100644 --- a/src/browser/base/content/zen-styles/zen-workspaces.css +++ b/src/browser/base/content/zen-styles/zen-workspaces.css @@ -499,4 +499,28 @@ display: flex; justify-content: center; align-items: center; + + & .PanelUI-zen-workspaces-creation-wraper { + border-radius: 5px; + border: 1px solid var(--zen-colors-border); + + margin-top: 10px; + background: var(--input-bgcolor, Field); + + & .PanelUI-zen-workspaces-icons-container { + padding: 10px 0; + min-width: 40px; + display: flex; + align-items: center; + justify-content: center; + border-right: 1px solid var(--zen-colors-border); + margin-right: 2px; + } + + & html|input { + border: none; + outline: none !important; + width: 100%; + } + } } diff --git a/src/browser/base/zen-components/ZenWorkspaces.mjs b/src/browser/base/zen-components/ZenWorkspaces.mjs index e7b777f3..d6009eb4 100644 --- a/src/browser/base/zen-components/ZenWorkspaces.mjs +++ b/src/browser/base/zen-components/ZenWorkspaces.mjs @@ -2397,10 +2397,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature { } async openCreateForm() { - window.docShell.treeOwner - .QueryInterface(Ci.nsIInterfaceRequestor) - .getInterface(Ci.nsIAppWindow) - .rollupAllPopups(); + window.docShell.treeOwner.QueryInterface(Ci.nsIInterfaceRequestor).getInterface(Ci.nsIAppWindow).rollupAllPopups(); this.selectEmptyTab(); const sidebarWidth = gNavToolbox.style.getPropertyValue('--actual-zen-sidebar-width'); let elementsToAnimate = [gNavToolbox]; @@ -2409,7 +2406,9 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature { } this._creatingNewWorkspace = true; gNavToolbox.style.zIndex = -1; - document.getElementById('zen-sidebar-splitter').style.setProperty('min-width', 'var(--zen-element-separation)', 'important'); + document + .getElementById('zen-sidebar-splitter') + .style.setProperty('min-width', 'var(--zen-element-separation)', 'important'); await Promise.all([ gZenUIManager.motion.animate(elementsToAnimate, { transform: ['scale(1)', 'scale(0.8)'], @@ -2424,7 +2423,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature { delay: 0.2, } ), - this.createAndSaveWorkspace() + this.createAndSaveWorkspace(), ]); this._createWorkspcaeForm = window.MozXULElement.parseXULToFragment(` @@ -2442,6 +2441,6 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature { `); - gBrowser.tabpanels.appendChild(form); + gBrowser.tabpanels.appendChild(this._createWorkspcaeForm); } })();