diff --git a/README.md b/README.md index 77663fb75..8021ba5a4 100644 --- a/README.md +++ b/README.md @@ -30,7 +30,7 @@ Zen is a firefox-based browser with the aim of pushing your productivity to a ne ### Firefox Versions - [`Release`](https://zen-browser.app/download) - Is currently built using Firefox version `139.0.4`! 🚀 -- [`Twilight`](https://zen-browser.app/download?twilight) - Is currently built using Firefox version `RC 139.0.1`! +- [`Twilight`](https://zen-browser.app/download?twilight) - Is currently built using Firefox version `RC 139.0.4`! ### Contributing diff --git a/l10n b/l10n index 751793cd1..a98bf7979 160000 --- a/l10n +++ b/l10n @@ -1 +1 @@ -Subproject commit 751793cd1fc91d73757dea6cf704dcbf70b23f1b +Subproject commit a98bf797971ff06742aa4179400e18e0fd465946 diff --git a/src/browser/base/content/zen-assets.inc.xhtml b/src/browser/base/content/zen-assets.inc.xhtml index 71c51bee6..ef85595fb 100644 --- a/src/browser/base/content/zen-assets.inc.xhtml +++ b/src/browser/base/content/zen-assets.inc.xhtml @@ -56,3 +56,4 @@ + diff --git a/src/browser/base/content/zen-assets.jar.inc.mn b/src/browser/base/content/zen-assets.jar.inc.mn index 230fcde04..c0b5488de 100644 --- a/src/browser/base/content/zen-assets.jar.inc.mn +++ b/src/browser/base/content/zen-assets.jar.inc.mn @@ -44,6 +44,7 @@ content/browser/zen-components/ZenWorkspaceIcons.mjs (../../zen/workspaces/ZenWorkspaceIcons.mjs) content/browser/zen-components/ZenWorkspace.mjs (../../zen/workspaces/ZenWorkspace.mjs) content/browser/zen-components/ZenWorkspaces.mjs (../../zen/workspaces/ZenWorkspaces.mjs) + content/browser/zen-components/ZenWorkspaceCreation.mjs (../../zen/workspaces/ZenWorkspaceCreation.mjs) content/browser/zen-components/ZenWorkspacesStorage.mjs (../../zen/workspaces/ZenWorkspacesStorage.mjs) content/browser/zen-components/ZenWorkspacesSync.mjs (../../zen/workspaces/ZenWorkspacesSync.mjs) content/browser/zen-components/ZenGradientGenerator.mjs (../../zen/workspaces/ZenGradientGenerator.mjs) diff --git a/src/browser/base/content/zen-keysets.inc.xhtml b/src/browser/base/content/zen-keysets.inc.xhtml index 826330ac1..4babb0fb0 100644 --- a/src/browser/base/content/zen-keysets.inc.xhtml +++ b/src/browser/base/content/zen-keysets.inc.xhtml @@ -40,6 +40,7 @@ + diff --git a/src/browser/base/content/zen-popupset.inc.xhtml b/src/browser/base/content/zen-popupset.inc.xhtml index a459923cf..9b9c03e08 100644 --- a/src/browser/base/content/zen-popupset.inc.xhtml +++ b/src/browser/base/content/zen-popupset.inc.xhtml @@ -66,7 +66,7 @@ - + @@ -85,11 +85,17 @@ + + + + + + - + + diff --git a/src/browser/themes/shared/tabbrowser/tabs-css.patch b/src/browser/themes/shared/tabbrowser/tabs-css.patch index 3cc083b47..9449422ab 100644 --- a/src/browser/themes/shared/tabbrowser/tabs-css.patch +++ b/src/browser/themes/shared/tabbrowser/tabs-css.patch @@ -1,7 +1,16 @@ diff --git a/browser/themes/shared/tabbrowser/tabs.css b/browser/themes/shared/tabbrowser/tabs.css -index 5b9ad123d819c6ef068acd427416957a1d0939fe..311caa27ee268c95215d459be02a93d20e129f8b 100644 +index 5b9ad123d819c6ef068acd427416957a1d0939fe..543d42dab2d84593f491a5652fcfe272ede59857 100644 --- a/browser/themes/shared/tabbrowser/tabs.css +++ b/browser/themes/shared/tabbrowser/tabs.css +@@ -19,7 +19,7 @@ + --tab-group-line-thickness: 2px; + --tab-group-line-toolbar-border-distance: 1px; + /* Collapsed tabs should be square, so set width to match the min height */ +- --tab-collapsed-background-width: var(--tab-min-height); ++ --tab-collapsed-background-width: 48px; + --tab-collapsed-width: calc(var(--tab-collapsed-background-width) + 2 * var(--tab-inner-inline-margin)); + --tab-inner-inline-margin: var(--space-medium); + --tab-inline-padding: 8px; @@ -33,7 +33,7 @@ --tab-block-margin: 4px; --tab-icon-end-margin: 5.5px; diff --git a/src/browser/themes/shared/zen-icons/icons.css b/src/browser/themes/shared/zen-icons/icons.css index 1fc4b4f4b..b48c96564 100644 --- a/src/browser/themes/shared/zen-icons/icons.css +++ b/src/browser/themes/shared/zen-icons/icons.css @@ -180,6 +180,7 @@ #zoom-in-button, #tabs-newtab-button, +#zen-create-new-button, #new-tab-button, #appMenu-zoomEnlarge-button2, #PanelUI-zen-profiles-newProfile, @@ -767,3 +768,20 @@ #zen-media-pip-button { list-style-image: url('chrome://global/skin/media/picture-in-picture-open.svg'); } + +#zenCreateNewPopup > menuitem image { + -moz-context-properties: fill; + fill: currentColor; +} + +#zen-create-new-button { + border-radius: var(--tab-border-radius); + + &:hover { + background: var(--toolbarbutton-active-background); + } + + & image { + background: transparent !important; + } +} diff --git a/src/zen/common/ZenCustomizableUI.sys.mjs b/src/zen/common/ZenCustomizableUI.sys.mjs index 4c331b488..cd30306f6 100644 --- a/src/zen/common/ZenCustomizableUI.sys.mjs +++ b/src/zen/common/ZenCustomizableUI.sys.mjs @@ -6,7 +6,7 @@ export var ZenCustomizableUI = new (class { constructor() {} TYPE_TOOLBAR = 'toolbar'; - defaultSidebarIcons = ['preferences-button', 'zen-workspaces-button', 'downloads-button']; + defaultSidebarIcons = ['downloads-button', 'zen-workspaces-button', 'zen-create-new-button']; startup(CustomizableUIInternal) { CustomizableUIInternal.registerArea( @@ -100,9 +100,34 @@ export var ZenCustomizableUI = new (class { elem.setAttribute('removable', 'true'); } + this._initCreateNewButton(window); this._moveWindowButtons(window); } + _initCreateNewButton(window) { + const button = window.document.getElementById('zen-create-new-button'); + button.addEventListener('command', () => { + const image = button.querySelector('image'); + const popup = window.document.getElementById('zenCreateNewPopup'); + button.setAttribute('open', 'true'); + const handlePopupHidden = () => { + button.removeAttribute('open'); + 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 } + ); + }); + } + _moveWindowButtons(window) { const windowControls = window.document.getElementsByClassName('titlebar-buttonbox-container'); const toolboxIcons = window.document.getElementById( diff --git a/src/zen/common/ZenStartup.mjs b/src/zen/common/ZenStartup.mjs index 0c4ed723f..a4e230893 100644 --- a/src/zen/common/ZenStartup.mjs +++ b/src/zen/common/ZenStartup.mjs @@ -3,7 +3,7 @@ // file, You can obtain one at http://mozilla.org/MPL/2.0/. { var ZenStartup = { - _watermarkIgnoreElements: ['zen-browser-background', 'zen-toast-container'], + _watermarkIgnoreElements: ['zen-toast-container'], async init() { this.openWatermark(); diff --git a/src/zen/common/ZenUIMigration.mjs b/src/zen/common/ZenUIMigration.mjs index 9b92518ed..2af8f5331 100644 --- a/src/zen/common/ZenUIMigration.mjs +++ b/src/zen/common/ZenUIMigration.mjs @@ -11,7 +11,7 @@ ChromeUtils.defineESModuleGetters(lazy, { class ZenUIMigration { PREF_NAME = 'zen.migration.version'; - MIGRATION_VERSION = 4; + MIGRATION_VERSION = 5; init(isNewProfile, win) { if (!isNewProfile) { diff --git a/src/zen/common/zen-sets.js b/src/zen/common/zen-sets.js index bbd08558a..11e24556a 100644 --- a/src/zen/common/zen-sets.js +++ b/src/zen/common/zen-sets.js @@ -104,6 +104,9 @@ document.addEventListener( case 'cmd_zenOpenWorkspacePanel': gZenWorkspaces.openWorkspacesDialog(event); break; + case 'cmd_zenOpenWorkspaceCreation': + gZenWorkspaces.openWorkspaceCreation(event); + break; default: if (event.target.id.startsWith('cmd_zenWorkspaceSwitch')) { const index = parseInt(event.target.id.replace('cmd_zenWorkspaceSwitch', ''), 10) - 1; diff --git a/src/zen/compact-mode/ZenCompactMode.mjs b/src/zen/compact-mode/ZenCompactMode.mjs index 3cebb42c4..624e60c03 100644 --- a/src/zen/compact-mode/ZenCompactMode.mjs +++ b/src/zen/compact-mode/ZenCompactMode.mjs @@ -211,8 +211,10 @@ var gZenCompactModeManager = { return; } let sidebarWidth = this.sidebar.getBoundingClientRect().width; + const shouldRecalculate = + this.preference || document.documentElement.hasAttribute('zen-creating-workspace'); if (sidebarWidth > 1) { - if (this.preference && gZenVerticalTabsManager._prefsSidebarExpanded) { + if (shouldRecalculate && gZenVerticalTabsManager._prefsSidebarExpanded) { sidebarWidth = Math.max(sidebarWidth, 150); } // Second variable to get the genuine width of the sidebar @@ -220,7 +222,7 @@ var gZenCompactModeManager = { window.dispatchEvent(new window.Event('resize')); // To recalculate the layout if ( event && - this.preference && + shouldRecalculate && gZenVerticalTabsManager._prefsSidebarExpanded && !gZenVerticalTabsManager._hadSidebarCollapse ) { diff --git a/src/zen/compact-mode/zen-compact-mode.css b/src/zen/compact-mode/zen-compact-mode.css index ec45eb77d..e4e3107e2 100644 --- a/src/zen/compact-mode/zen-compact-mode.css +++ b/src/zen/compact-mode/zen-compact-mode.css @@ -48,7 +48,7 @@ } #navigator-toolbox { - --zen-toolbox-max-width: 66px !important; + --zen-toolbox-max-width: 74px !important; --zen-compact-float: var(--zen-element-separation); /* Initial padding for when we are animating */ diff --git a/src/zen/tabs/zen-tabs/vertical-tabs.css b/src/zen/tabs/zen-tabs/vertical-tabs.css index 25f20bd19..bde63e034 100644 --- a/src/zen/tabs/zen-tabs/vertical-tabs.css +++ b/src/zen/tabs/zen-tabs/vertical-tabs.css @@ -718,9 +718,15 @@ /* Define fixed width and padding for collapsed state */ :root:not([zen-sidebar-expanded='true']) { - --tab-min-width: 36px !important; + --tab-min-width: 48px !important; --zen-toolbox-padding: 6px !important; --zen-toolbox-max-width: calc(var(--tab-min-width) + var(--zen-toolbox-padding) * 2); + + /* We can't show the rename input properly in collapsed state, + so hide the workspace edit input */ + #context_zenEditWorkspace { + display: none; + } } #navigator-toolbox:not([zen-sidebar-expanded='true']) { @@ -735,14 +741,22 @@ display: none !important; } - /* Center and dim workspace indicator */ & .zen-current-workspace-indicator { - padding-left: 0; - padding-right: 0; + padding: 0; display: flex; align-items: center; justify-content: center; opacity: 0.4; + + & .zen-workspaces-actions { + position: absolute; + width: 100%; + height: 100%; + } + + &:is([open='true'], :hover) .zen-current-workspace-indicator-icon { + display: none; + } } /* Center items in essentials container */ @@ -801,8 +815,12 @@ /* Style new tab button area */ & #tabbrowser-arrowscrollbox-periphery { & > toolbarbutton { - margin: 0 auto !important; /* Center the button */ - padding: 0 !important; /* Remove padding */ + margin-left: auto !important; /* Center the button */ + margin-right: auto !important; /* Center the button */ + + & image { + width: 100%; + } } /* Adjust separator */ &::before { diff --git a/src/zen/workspaces/ZenGradientGenerator.mjs b/src/zen/workspaces/ZenGradientGenerator.mjs index 02318f6fd..39d52b2b7 100644 --- a/src/zen/workspaces/ZenGradientGenerator.mjs +++ b/src/zen/workspaces/ZenGradientGenerator.mjs @@ -69,15 +69,20 @@ initContextMenu() { const menu = window.MozXULElement.parseXULToFragment(` `); document.getElementById('toolbar-context-customize').before(menu); } openThemePicker(event) { - PanelMultiView.openPopup(this.panel, this.toolbox, { - position: 'topright topleft', + const target = event.explicitOriginalTarget?.classList?.contains( + 'zen-workspace-creation-edit-theme-button' + ) + ? event.explicitOriginalTarget + : this.toolbox; + PanelMultiView.openPopup(this.panel, target, { + position: 'bottomright topright', triggerEvent: event, }); } diff --git a/src/zen/workspaces/ZenWorkspace.mjs b/src/zen/workspaces/ZenWorkspace.mjs index 5b7411b19..c366649fb 100644 --- a/src/zen/workspaces/ZenWorkspace.mjs +++ b/src/zen/workspaces/ZenWorkspace.mjs @@ -5,7 +5,7 @@ class ZenWorkspace extends MozXULElement { static get markup() { return ` - + @@ -199,16 +199,16 @@ onActionsCommand(event) { event.stopPropagation(); const popup = document.getElementById('zenWorkspaceMoreActions'); - event.target.setAttribute('open', 'true'); + const target = event.target; + target.setAttribute('open', 'true'); this.indicator.setAttribute('open', 'true'); - popup.addEventListener( - 'popuphidden', - () => { - event.target.removeAttribute('open'); - this.indicator.removeAttribute('open'); - }, - { once: true } - ); + const handlePopupHidden = (event) => { + if (event.target !== popup) return; + target.removeAttribute('open'); + this.indicator.removeAttribute('open'); + popup.removeEventListener('popuphidden', handlePopupHidden); + }; + popup.addEventListener('popuphidden', handlePopupHidden); popup.openPopup(event.target, 'after_start'); } } diff --git a/src/zen/workspaces/ZenWorkspaceCreation.mjs b/src/zen/workspaces/ZenWorkspaceCreation.mjs new file mode 100644 index 000000000..7ab314654 --- /dev/null +++ b/src/zen/workspaces/ZenWorkspaceCreation.mjs @@ -0,0 +1,246 @@ +{ + class ZenWorkspaceCreation extends MozXULElement { + #wasInCollapsedMode = false; + + promiseInitialized = new Promise((resolve) => { + this.resolveInitialized = resolve; + }); + + #hiddenElements = []; + + static get elementsToDisable() { + return [ + 'cmd_zenOpenWorkspacePanel', + 'cmd_zenOpenWorkspaceCreation', + 'cmd_zenToggleSidebar', + 'cmd_newNavigatorTab', + 'cmd_newNavigatorTabNoEvent', + ]; + } + + static get markup() { + return ` + +
+ + + + + + + + + +