From 425d0ea95151fba24eba03bc04276276df5de021 Mon Sep 17 00:00:00 2001 From: "mr. M" Date: Fri, 14 Feb 2025 00:42:18 +0100 Subject: [PATCH 01/48] Implement Zen Welcome page with initial animation and styling; remove deprecated files --- l10n | 2 +- src/browser/base/content/ZenStartup.mjs | 13 + src/browser/base/content/browser-js.patch | 37 +- src/browser/base/content/zen-assets.inc.xhtml | 2 + .../base/content/zen-assets.jar.inc.mn | 4 +- .../content/zen-styles/zen-panels/dialog.css | 11 + .../content/zen-styles/zen-panels/welcome.css | 33 -- .../base/content/zen-styles/zen-popup.css | 2 +- .../base/content/zen-styles/zen-welcome.css | 33 ++ .../base/zen-components/ZenWelcome.mjs | 57 +++ .../components/BrowserGlue-sys-mjs.patch | 27 +- src/browser/components/moz-build.patch | 12 - .../components/zen-welcome/IMPORTANT.md | 7 - src/browser/components/zen-welcome/jar.mn | 9 - src/browser/components/zen-welcome/moz.build | 4 - .../components/zen-welcome/welcome.css | 451 ------------------ .../components/zen-welcome/welcome.html | 186 -------- src/browser/components/zen-welcome/welcome.js | 354 -------------- 18 files changed, 126 insertions(+), 1118 deletions(-) create mode 100644 src/browser/base/content/zen-styles/zen-panels/dialog.css delete mode 100644 src/browser/base/content/zen-styles/zen-panels/welcome.css create mode 100644 src/browser/base/content/zen-styles/zen-welcome.css create mode 100644 src/browser/base/zen-components/ZenWelcome.mjs delete mode 100644 src/browser/components/moz-build.patch delete mode 100644 src/browser/components/zen-welcome/IMPORTANT.md delete mode 100644 src/browser/components/zen-welcome/jar.mn delete mode 100644 src/browser/components/zen-welcome/moz.build delete mode 100644 src/browser/components/zen-welcome/welcome.css delete mode 100644 src/browser/components/zen-welcome/welcome.html delete mode 100644 src/browser/components/zen-welcome/welcome.js diff --git a/l10n b/l10n index 19e2af33c..91d6c42ee 160000 --- a/l10n +++ b/l10n @@ -1 +1 @@ -Subproject commit 19e2af33c4d901a4edece2b95c4372b40d50a942 +Subproject commit 91d6c42eebc1fb9ba6411419eb4830334808f7f1 diff --git a/src/browser/base/content/ZenStartup.mjs b/src/browser/base/content/ZenStartup.mjs index e25539c50..c4c1ed945 100644 --- a/src/browser/base/content/ZenStartup.mjs +++ b/src/browser/base/content/ZenStartup.mjs @@ -38,6 +38,8 @@ gZenVerticalTabsManager.init(); gZenUIManager.init(); + this._checkForWelcomePage(); + document.l10n.setAttributes(document.getElementById('tabs-newtab-button'), 'tabs-toolbar-new-tab'); } catch (e) { console.error('ZenThemeModifier: Error initializing browser layout', e); @@ -119,6 +121,17 @@ gURLBar._initPasteAndGo(); gURLBar._initStripOnShare(); }, + + _checkForWelcomePage() { + if (!Services.prefs.getBoolPref('zen.welcome-screen.seen', false) && Services.prefs.getBoolPref('zen.welcome-screen.enabled', true)) { + //Services.prefs.setBoolPref('zen.welcome-screen.seen', true); + console.log('ZenStartup: Show welcome page'); + Services.scriptloader.loadSubScript( + "chrome://browser/content/zen-components/ZenWelcome.mjs", + window + ); + } + } }; ZenStartup.init(); diff --git a/src/browser/base/content/browser-js.patch b/src/browser/base/content/browser-js.patch index db2f39965..db842f9ea 100644 --- a/src/browser/base/content/browser-js.patch +++ b/src/browser/base/content/browser-js.patch @@ -1,5 +1,5 @@ diff --git a/browser/base/content/browser.js b/browser/base/content/browser.js -index 019b168c1aeae7e1c97a3ae58c99a48a27f54134..1f051e8a1e8a58e8bb721196deecfa36f4089dd6 100644 +index 019b168c1aeae7e1c97a3ae58c99a48a27f54134..5225d0539aa7dabf81a8fd60af3e839f203d296c 100644 --- a/browser/base/content/browser.js +++ b/browser/base/content/browser.js @@ -32,6 +32,7 @@ ChromeUtils.defineESModuleGetters(this, { @@ -10,23 +10,7 @@ index 019b168c1aeae7e1c97a3ae58c99a48a27f54134..1f051e8a1e8a58e8bb721196deecfa36 DevToolsSocketStatus: "resource://devtools/shared/security/DevToolsSocketStatus.sys.mjs", DownloadUtils: "resource://gre/modules/DownloadUtils.sys.mjs", -@@ -632,6 +633,15 @@ XPCOMUtils.defineLazyPreferenceGetter( - false - ); - -+const ZEN_WELCOME_PATH = "zen-welcome"; -+const ZEN_WELCOME_ELEMENT_ATTR = "zen-dialog-welcome-element"; -+XPCOMUtils.defineLazyServiceGetter( -+ this, -+ "ProfileService", -+ "@mozilla.org/toolkit/profile-service;1", -+ "nsIToolkitProfileService" -+); -+ - customElements.setElementCreationCallback("screenshots-buttons", () => { - Services.scriptloader.loadSubScript( - "chrome://browser/content/screenshots/screenshots-buttons.js", -@@ -3440,6 +3450,10 @@ var XULBrowserWindow = { +@@ -3440,6 +3441,10 @@ var XULBrowserWindow = { AboutReaderParent.updateReaderButton(gBrowser.selectedBrowser); TranslationsParent.onLocationChange(gBrowser.selectedBrowser); @@ -37,7 +21,7 @@ index 019b168c1aeae7e1c97a3ae58c99a48a27f54134..1f051e8a1e8a58e8bb721196deecfa36 PictureInPicture.updateUrlbarToggle(gBrowser.selectedBrowser); if (!gMultiProcessBrowser) { -@@ -4435,7 +4449,7 @@ nsBrowserAccess.prototype = { +@@ -4435,7 +4440,7 @@ nsBrowserAccess.prototype = { // Passing a null-URI to only create the content window, // and pass true for aSkipLoad to prevent loading of // about:blank @@ -46,7 +30,7 @@ index 019b168c1aeae7e1c97a3ae58c99a48a27f54134..1f051e8a1e8a58e8bb721196deecfa36 null, aParams, aWhere, -@@ -4443,6 +4457,10 @@ nsBrowserAccess.prototype = { +@@ -4443,6 +4448,10 @@ nsBrowserAccess.prototype = { aName, true ); @@ -57,16 +41,3 @@ index 019b168c1aeae7e1c97a3ae58c99a48a27f54134..1f051e8a1e8a58e8bb721196deecfa36 }, openURIInFrame: function browser_openURIInFrame( -@@ -7285,6 +7303,12 @@ var gDialogBox = { - parentElement.showModal(); - this._didOpenHTMLDialog = true; - -+ if (uri.includes(ZEN_WELCOME_PATH)) { -+ parentElement.setAttribute(ZEN_WELCOME_ELEMENT_ATTR, true); -+ } else if (parentElement.hasAttribute(ZEN_WELCOME_ELEMENT_ATTR)) { -+ parentElement.removeAttribute(ZEN_WELCOME_ELEMENT_ATTR); -+ } -+ - // Disable menus and shortcuts. - this._updateMenuAndCommandState(false /* to disable */); - diff --git a/src/browser/base/content/zen-assets.inc.xhtml b/src/browser/base/content/zen-assets.inc.xhtml index eefa0a5dd..ae919c76a 100644 --- a/src/browser/base/content/zen-assets.inc.xhtml +++ b/src/browser/base/content/zen-assets.inc.xhtml @@ -24,6 +24,8 @@ + + # Scripts used all over the browser diff --git a/src/browser/base/content/zen-assets.jar.inc.mn b/src/browser/base/content/zen-assets.jar.inc.mn index 563908e14..3c0aadb23 100644 --- a/src/browser/base/content/zen-assets.jar.inc.mn +++ b/src/browser/base/content/zen-assets.jar.inc.mn @@ -24,6 +24,7 @@ content/browser/zen-components/ZenActorsManager.mjs (zen-components/ZenActorsManager.mjs) content/browser/zen-components/ZenRices.mjs (zen-components/ZenRices.mjs) content/browser/zen-components/ZenEmojies.mjs (zen-components/ZenEmojies.mjs) + content/browser/zen-components/ZenWelcome.mjs (zen-components/ZenWelcome.mjs) content/browser/zen-styles/zen-theme.css (content/zen-styles/zen-theme.css) content/browser/zen-styles/zen-buttons.css (content/zen-styles/zen-buttons.css) @@ -47,11 +48,12 @@ content/browser/zen-styles/zen-gradient-generator.css (content/zen-styles/zen-gradient-generator.css) content/browser/zen-styles/zen-rices.css (content/zen-styles/zen-rices.css) content/browser/zen-styles/zen-branding.css (content/zen-styles/zen-branding.css) + content/browser/zen-styles/zen-welcome.css (content/zen-styles/zen-welcome.css) content/browser/zen-styles/zen-panels/bookmarks.css (content/zen-styles/zen-panels/bookmarks.css) content/browser/zen-styles/zen-panels/extensions.css (content/zen-styles/zen-panels/extensions.css) content/browser/zen-styles/zen-panels/print.css (content/zen-styles/zen-panels/print.css) - content/browser/zen-styles/zen-panels/welcome.css (content/zen-styles/zen-panels/welcome.css) + content/browser/zen-styles/zen-panels/dialog.css (content/zen-styles/zen-panels/dialog.css) * content/browser/zen-styles/zen-compact-mode.css (content/zen-styles/zen-compact-mode.css) diff --git a/src/browser/base/content/zen-styles/zen-panels/dialog.css b/src/browser/base/content/zen-styles/zen-panels/dialog.css new file mode 100644 index 000000000..3c8799ee9 --- /dev/null +++ b/src/browser/base/content/zen-styles/zen-panels/dialog.css @@ -0,0 +1,11 @@ +/* + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. + */ +/* Zen Welcome idalog override */ +@media (prefers-color-scheme: dark) { + .dialogBox:not(.spotlightBox) { + border: 1px solid var(--zen-colors-border); + } +} diff --git a/src/browser/base/content/zen-styles/zen-panels/welcome.css b/src/browser/base/content/zen-styles/zen-panels/welcome.css deleted file mode 100644 index ea933a9bf..000000000 --- a/src/browser/base/content/zen-styles/zen-panels/welcome.css +++ /dev/null @@ -1,33 +0,0 @@ -/* - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at http://mozilla.org/MPL/2.0/. - */ -/* Zen Welcome idalog override */ -@media (prefers-color-scheme: dark) { - .dialogBox:not(.spotlightBox) { - border: 1px solid var(--zen-colors-border); - } -} - -#window-modal-dialog[zen-dialog-welcome-element='true'] .dialogBox:not(.spotlightBox) { - margin: 0 !important; -} - -#window-modal-dialog[zen-dialog-welcome-element='true'], -#window-modal-dialog[zen-dialog-welcome-element='true'] .dialogOverlay, -#window-modal-dialog[zen-dialog-welcome-element='true'] .dialogFrame, -#window-modal-dialog[zen-dialog-welcome-element='true'] .dialogBox { - width: 100% !important; - height: 100% !important; - max-height: none !important; - max-width: none !important; -} - -#window-modal-dialog[zen-dialog-welcome-element='true'] { - --zen-welcome-dialog-space: 7px; - margin: 0 auto !important; - max-width: calc(100% - calc(var(--zen-welcome-dialog-space) * 2)) !important; - max-height: calc(100% - calc(var(--zen-welcome-dialog-space) * 2)) !important; - margin-top: var(--zen-welcome-dialog-space) !important; -} diff --git a/src/browser/base/content/zen-styles/zen-popup.css b/src/browser/base/content/zen-styles/zen-popup.css index adc2fb884..0fe1dc861 100644 --- a/src/browser/base/content/zen-styles/zen-popup.css +++ b/src/browser/base/content/zen-styles/zen-popup.css @@ -6,7 +6,7 @@ @import url('chrome://browser/content/zen-styles/zen-panels/bookmarks.css'); @import url('chrome://browser/content/zen-styles/zen-panels/extensions.css'); @import url('chrome://browser/content/zen-styles/zen-panels/print.css'); -@import url('chrome://browser/content/zen-styles/zen-panels/welcome.css'); +@import url('chrome://browser/content/zen-styles/zen-panels/dialog.css'); :root { --panel-subview-body-padding: 2px 0; diff --git a/src/browser/base/content/zen-styles/zen-welcome.css b/src/browser/base/content/zen-styles/zen-welcome.css new file mode 100644 index 000000000..4e7849250 --- /dev/null +++ b/src/browser/base/content/zen-styles/zen-welcome.css @@ -0,0 +1,33 @@ + +#zen-welcome, +#zen-welcome-start { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} + +#zen-welcome-start { + flex-direction: column; + + #zen-welcome-start-button { + opacity: 0; + list-style-image: url(chrome://browser/skin/zen-icons/forward.svg); + position: absolute; + bottom: 10%; + } + + #zen-welcome-title { + text-align: center; + font-size: 5rem; + line-height: 1.1; + max-width: 50%; + font-weight: 500; + + & > span { + display: block; + opacity: 0; + } + } +} diff --git a/src/browser/base/zen-components/ZenWelcome.mjs b/src/browser/base/zen-components/ZenWelcome.mjs new file mode 100644 index 000000000..139a891d7 --- /dev/null +++ b/src/browser/base/zen-components/ZenWelcome.mjs @@ -0,0 +1,57 @@ + +{ + function clearBrowserElements() { + for (const element of document.getElementById('browser').children) { + element.style.display = 'none'; + } + } + + function getMotion() { + return gZenUIManager.motion; + } + + async function animate(...args) { + return getMotion().animate(...args); + } + + function initializeZenWelcome() { + const XUL = ` + + + + + + + `; + const fragment = window.MozXULElement.parseXULToFragment(XUL); + document.getElementById('browser').appendChild(fragment); + window.MozXULElement.insertFTLIfNeeded("browser/zen-welcome.ftl"); + } + + async function animateInitialStage() { + const [title1, title2] = await document.l10n.formatValues([{id:'zen-welcome-title-line1'}, {id:'zen-welcome-title-line2'}]); + const titleElement = document.getElementById('zen-welcome-title'); + titleElement.innerHTML = `${title1}${title2}`; + await animate("#zen-welcome-title span", { opacity: [0, 1], y: [100, 0] }, { + delay: getMotion().stagger(0.6), + type: 'spring', + ease: 'ease-out', + bounce: 0, + }); + await animate("#zen-welcome-start-button", { opacity: [0, 1], y: [100, 0] }, { + delay: 0.5, + type: 'spring', + ease: 'ease-in-out', + bounce: 0.4, + }); + } + + function startZenWelcome() { + clearBrowserElements(); + initializeZenWelcome(); + animateInitialStage(); + } + + startZenWelcome(); +} diff --git a/src/browser/components/BrowserGlue-sys-mjs.patch b/src/browser/components/BrowserGlue-sys-mjs.patch index cc19b6ee6..f2a09f011 100644 --- a/src/browser/components/BrowserGlue-sys-mjs.patch +++ b/src/browser/components/BrowserGlue-sys-mjs.patch @@ -1,5 +1,5 @@ diff --git a/browser/components/BrowserGlue.sys.mjs b/browser/components/BrowserGlue.sys.mjs -index b888a753a7f23a9800fe04da51a4e6b898314ff2..35eea774e1ea4b1807ec65ebc767f423d81602bd 100644 +index b888a753a7f23a9800fe04da51a4e6b898314ff2..a6a01cf035253b05ea7b20b434cf2002ff115d96 100644 --- a/browser/components/BrowserGlue.sys.mjs +++ b/browser/components/BrowserGlue.sys.mjs @@ -121,6 +121,7 @@ ChromeUtils.defineESModuleGetters(lazy, { @@ -18,28 +18,3 @@ index b888a753a7f23a9800fe04da51a4e6b898314ff2..35eea774e1ea4b1807ec65ebc767f423 // A channel for "remote troubleshooting" code... let channel = new lazy.WebChannel( "remote-troubleshooting", -@@ -4761,6 +4763,7 @@ BrowserGlue.prototype = { - }, - - async _maybeShowDefaultBrowserPrompt() { -+ this._ZenMaybeShowWelcomeScreen(); - // Highest priority is about:welcome window modal experiment - // Second highest priority is the upgrade dialog, which can include a "primary - // browser" request and is limited in various ways, e.g., major upgrades. -@@ -5302,6 +5305,16 @@ BrowserGlue.prototype = { - "nsIObserver", - "nsISupportsWeakReference", - ]), -+ -+ _ZenMaybeShowWelcomeScreen() { -+ const welcomeEnabled = Services.prefs.getBoolPref("zen.welcome-screen.enabled", true) -+ const welcomeSeen = Services.prefs.getBoolPref("zen.welcome-screen.seen", false) -+ if (welcomeEnabled && !welcomeSeen) { -+ lazy.BrowserWindowTracker.getTopWindow().gDialogBox.open( -+ "chrome://browser/content/zen-welcome/welcome.html" -+ ); -+ } -+ }, - }; - - var ContentBlockingCategoriesPrefs = { diff --git a/src/browser/components/moz-build.patch b/src/browser/components/moz-build.patch deleted file mode 100644 index 59b696168..000000000 --- a/src/browser/components/moz-build.patch +++ /dev/null @@ -1,12 +0,0 @@ -diff --git a/browser/components/moz.build b/browser/components/moz.build -index 6cbb7ce0037c1457eeae5c331a996719691ebd6b..611707852198740c9b4103f5e2a66e8ee4099a21 100644 ---- a/browser/components/moz.build -+++ b/browser/components/moz.build -@@ -27,6 +27,7 @@ with Files("controlcenter/**"): - - - DIRS += [ -+ "zen-welcome", - "about", - "aboutlogins", - "aboutwelcome", diff --git a/src/browser/components/zen-welcome/IMPORTANT.md b/src/browser/components/zen-welcome/IMPORTANT.md deleted file mode 100644 index 8dc6bb9e9..000000000 --- a/src/browser/components/zen-welcome/IMPORTANT.md +++ /dev/null @@ -1,7 +0,0 @@ -# Important notes! - -Inside browser.js, we hardcoded-ly detect the path name for `zen-welcome` so we can add special attributes to the welcome page. If this path name changes, the welcome page will not work properly. - -Make sure to update the path name in browser.js if you change the path name of `zen-welcome`. - -The constant that contains this path name is `ZEN_WELCOME_PATH`. diff --git a/src/browser/components/zen-welcome/jar.mn b/src/browser/components/zen-welcome/jar.mn deleted file mode 100644 index 14633857d..000000000 --- a/src/browser/components/zen-welcome/jar.mn +++ /dev/null @@ -1,9 +0,0 @@ -# This Source Code Form is subject to the terms of the Mozilla Public -# License, v. 2.0. If a copy of the MPL was not distributed with this -# file, You can obtain one at http://mozilla.org/MPL/2.0/. - -browser.jar: -% content browser %content/browser/ contentaccessible=yes - content/browser/zen-welcome/welcome.html (welcome.html) - content/browser/zen-welcome/welcome.css (welcome.css) - content/browser/zen-welcome/welcome.js (welcome.js) diff --git a/src/browser/components/zen-welcome/moz.build b/src/browser/components/zen-welcome/moz.build deleted file mode 100644 index 4f61c47b9..000000000 --- a/src/browser/components/zen-welcome/moz.build +++ /dev/null @@ -1,4 +0,0 @@ -# This Source Code Form is subject to the terms of the Mozilla Public -# License, v. 2.0. If a copy of the MPL was not distributed with this -# file, You can obtain one at http://mozilla.org/MPL/2.0/. -JAR_MANIFESTS += ["jar.mn"] diff --git a/src/browser/components/zen-welcome/welcome.css b/src/browser/components/zen-welcome/welcome.css deleted file mode 100644 index b165780b5..000000000 --- a/src/browser/components/zen-welcome/welcome.css +++ /dev/null @@ -1,451 +0,0 @@ -/* -This Source Code Form is subject to the terms of the Mozilla Public -License, v. 2.0. If a copy of the MPL was not distributed with this -file, You can obtain one at http://mozilla.org/MPL/2.0/. -*/ - -:root { - --noise: url('data:image/png;base64,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'); -} - -html { - width: 100%; - height: 100%; -} - -body { - display: flex; - position: relative; - width: 100%; - height: 100%; - overflow: hidden; - user-select: none; -} - -body { - background: var(--zen-branding-bg); -} - -#main-view { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - position: relative; - width: fit-content; - margin: auto; -} - -#welcome .zen-branding-title, -#thanks .zen-branding-title { - text-align: center; - font-size: 7rem; -} - -#buttons-footer { - margin-top: auto; - padding: 20px 0; - width: 100%; - display: flex; - justify-content: space-between; - align-items: center; - z-index: 2; - - & button { - opacity: 0; - animation: fadeIn 0.5s ease-in-out forwards; - animation-delay: 0.8s; - } - - & button:nth-child(2) { - animation-delay: 1s; - } -} - -body:has(:is(#welcome, #thanks):not([hidden='true'])) { - & #buttons-footer { - justify-content: center; - position: fixed; - bottom: 40px; - margin: 0 auto; - - & button { - background: var(--zen-branding-paper) !important; - color: var(--zen-branding-dark) !important; - } - } -} - -:is(#theme, #search) > div:nth-child(2) { - width: 100%; -} - -#main-view:has(:is(#welcome, #thanks):not([hidden='true'])) { - width: 100%; - - & #back { - display: none; - } -} - -button { - padding: 8px; - border-radius: 999px; - font-size: 16px; - font-weight: 600; - cursor: pointer; -} - -button.primary { - background: var(--zen-branding-bg-reverse) !important; - color: var(--zen-branding-bg) !important; - transition: background 0.2s ease-in-out; - - &:hover { - background: color-mix(in srgb, var(--zen-branding-bg-reverse) 80%, transparent 20%) !important; - } -} - -.page { - display: flex; - flex-direction: column; - justify-content: center; - width: -moz-available; - align-items: center; - margin: 32px; -} - -h2 { - font-size: 17px; - font-weight: 600; - margin: 35px 0 20px 0; - line-height: 1; -} - -.page-split:not([hidden='true']) { - flex-direction: column; - margin: auto; - justify-content: start; -} - -.page-split:not(#import, #theme) > div:first-child { - margin-bottom: 20px; -} - -:not(#theme) .card h3 { - margin: auto; - text-align: center; -} - -#theme { - & > div:first-child p { - margin-bottom: 0 !important; - } -} - -#theme .card[disabled='true'] { - opacity: 0.7; - cursor: not-allowed; -} - -.cardGroup { - display: flex; - flex-wrap: wrap; - align-items: stretch; - gap: 8px; - margin-bottom: 8px; -} - -.cardGroup .card { - width: 140px; - display: flex; - flex-direction: column; - align-items: center; - align-content: space-between; - border: 2px solid transparent !important; - transition: all 0.1s ease-in-out !important; - margin: 0 10px; - border-radius: 7px; - outline: none !important; - cursor: auto; - user-select: none; -} - -.cardGroup .card.selected { - border: 2px solid var(--zen-colors-primary) !important; - transform: scale(1.1); -} - -h1 { - font-size: 32px; - font-weight: 700; - margin: 16px 0 5px 0; - line-height: 1; -} - -.page > div:nth-child(2) h1 { - margin-bottom: 15px; - margin-top: 10px; - font-size: 18px; -} - -p { - font-size: 16px; - opacity: 0.8; - margin: 0; - margin-bottom: 30px; -} - -#zen-logo { - -moz-context-properties: fill; - fill: currentColor; - display: inline-block; - height: 42px; - width: 42px; - position: absolute; - top: 40px; - left: 50%; - transform: translateX(-50%); -} - -.asset { - width: 500px; - padding-bottom: 32px; -} - -@media (prefers-color-scheme: light) { - .dark-only { - display: none; - } -} - -@media (prefers-color-scheme: dark) { - .light-only { - display: none; - } -} - -input[type='checkbox'] { - display: inline-block; - vertical-align: middle; -} - -#importNext { - margin-left: 30px; - color: var(--in-content-primary-button-background); -} - -#themeNext, -#searchNext, -#thanksNext { - margin-top: 20px; -} - -.page[hidden='true'] { - display: none; -} - -.page:not([hidden='true']) { - display: flex; -} - -.page:not([hidden='true']) > *:not(:has(.delay-animation)), -.delay-animation, -.delay-animation-2 { - opacity: 0; - animation: fadeIn 0.5s ease-in-out forwards; -} - -#importBrowser { - width: 100%; - background: transparent !important; - border: 1px solid var(--zen-branding-bg-reverse); - color: var(--zen-branding-bg-reverse); - padding: 16px; - border-radius: 8px; - margin-bottom: 20px; - justify-content: start; - display: flex; -} - -#layout { - text-align: center; -} - -#layoutList { - display: flex; - gap: 20px; - - & > [layout] { - display: flex; - flex-direction: column; - gap: 3px; - font-weight: 600; - cursor: pointer; - - &[disabled='true'] { - opacity: 0.7; - cursor: not-allowed; - } - - & img { - width: 250px; - border-radius: 10px; - border: 4px solid transparent; - } - - &.selected img { - border: 4px solid var(--zen-colors-primary); - } - } -} - -@keyframes fadeIn { - from { - opacity: 0; - transform: translate3d(0, 40px, 0); - filter: blur(15px); - } - - to { - opacity: 1; - filter: blur(0); - transform: translate3d(0, 0, 0); - } -} - -/* There should be no more than 5 elements in a page */ -.page:not([hidden='true']) > *:nth-child(2):not(:has(.delay-animation)) { - animation-delay: 0.2s; -} -.page:not([hidden='true']) > *:nth-child(3), -.delay-animation:nth-child(1) { - animation-delay: 0.4s; -} -.page:not([hidden='true']) > *:nth-child(4), -.delay-animation:nth-child(2) { - animation-delay: 0.6s; -} -.page:not([hidden='true']) > *:nth-child(5), -.delay-animation:nth-child(3), -.delay-animation-2:nth-child(1) { - animation-delay: 0.8s; -} - -.page:not([hidden='true']) > *:nth-child(6), -.delay-animation:nth-child(4), -.delay-animation-2:nth-child(2) { - animation-delay: 1s; -} - -#welcome { - & h1 { - animation-duration: 0.8s !important; - } -} - -.card h3 { - margin-top: 10px; -} - -#circular-progress { - --size: 220px; - --half-size: calc(var(--size) / 2); - --stroke-width: 20px; - --radius: calc((var(--size) - var(--stroke-width)) / 2); - --circumference: calc(var(--radius) * pi * 2); - --dash: calc((var(--progress) * var(--circumference)) / 100); - position: absolute; - top: 15px; - right: 10px; - width: 55px; - height: 40px; -} - -#circular-progress circle { - cx: var(--half-size); - cy: var(--half-size); - r: var(--radius); - stroke-width: var(--stroke-width); - fill: none; - stroke-linecap: round; -} - -#circular-progress circle.bg { - stroke: transparent; -} - -#circular-progress circle.fg { - transform: rotate(-90deg); - transform-origin: var(--half-size) var(--half-size); - stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash)); - transition: stroke-dasharray 0.3s linear 0s; - stroke: var(--zen-branding-coral); -} - -#colorListWrapper { - display: flex; - align-items: center; -} - -#colorListWrapper > div { - border-radius: 999px; - height: 20px; - width: 20px; - border: 3px solid transparent; - margin: 0 5px; -} - -#colorListWrapper > div.selected { - border: 3px solid light-dark(#000, #fff); -} - -#welcome, -#thanks { - justify-content: center; -} - -#themeList { - display: flex; - flex-wrap: nowrap; -} - -#themeList > svg { - border: 3px solid transparent; - border-radius: 15px; - height: -moz-available; -} - -#themeList > svg.selected { - border: 3px solid var(--zen-colors-primary); -} - -#searchList.cardGroup { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 15px; -} - -#searchList .card { - width: -moz-available !important; - margin: 0; - display: flex; - flex-direction: row; - border-radius: 15px; - - & h3 { - text-align: start; - margin: 0; - margin-left: 20px; - } - - &.selected { - transform: scale(1.01); - } - - & img { - width: 30px; - height: 30px; - border-radius: 15px; - } -} diff --git a/src/browser/components/zen-welcome/welcome.html b/src/browser/components/zen-welcome/welcome.html deleted file mode 100644 index 30cb70db8..000000000 --- a/src/browser/components/zen-welcome/welcome.html +++ /dev/null @@ -1,186 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - -
-
-

-

-
- -
-
-

-

-
- -
- -
-
-

-

-
-
-

-
-
-

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- -
-
-

-

-
-
- - -

- - - -

- - - -

- -
-
- -
-
-

-

-
-
-
-
-
- -
-

-

-
- -
- - - - - - - - - diff --git a/src/browser/components/zen-welcome/welcome.js b/src/browser/components/zen-welcome/welcome.js deleted file mode 100644 index f7f869626..000000000 --- a/src/browser/components/zen-welcome/welcome.js +++ /dev/null @@ -1,354 +0,0 @@ -// This Source Code Form is subject to the terms of the Mozilla Public -// License, v. 2.0. If a copy of the MPL was not distributed with this -// file, You can obtain one at http://mozilla.org/MPL/2.0/. -const { XPCOMUtils } = ChromeUtils.import('resource://gre/modules/XPCOMUtils.jsm'); - -XPCOMUtils.defineLazyModuleGetters(this, { - AddonManager: 'resource://gre/modules/AddonManager.jsm', - MigrationUtils: 'resource:///modules/MigrationUtils.jsm', -}); - -ChromeUtils.defineModuleGetter(this, 'ExtensionSettingsStore', 'resource://gre/modules/ExtensionSettingsStore.jsm'); - -Services.scriptloader.loadSubScript('chrome://browser/content/ZenUIManager.mjs'); - -const kWelcomeSeenPref = 'zen.welcome-screen.seen'; - -// ============================================================================= -// Util stuff copied from browser/components/preferences/search.js - -class EngineStore { - constructor() { - this._engines = []; - } - - async init() { - const visibleEngines = await Services.search.getVisibleEngines(); - this.initSpecificEngine(visibleEngines); - } - - getEngine() { - return this._engines; - } - - initSpecificEngine(engines) { - for (const engine of engines) { - try { - this._engines.push(this._cloneEngine(engine)); - } catch (e) { - // Ignore engines that throw an exception when cloning. - console.error(e); - } - } - } - - getEngineByName(name) { - return this._engines.find((engine) => engine.name == name); - } - - _cloneEngine(aEngine) { - const clonedObj = {}; - - for (const i of ['name', 'alias', '_iconURI', 'hidden']) { - clonedObj[i] = aEngine[i]; - } - - clonedObj.originalEngine = aEngine; - - return clonedObj; - } - - async getDefaultEngine() { - let engineName = await Services.search.getDefault(); - return this.getEngineByName(engineName._name); - } - - async setDefaultEngine(engine) { - await Services.search.setDefault(engine.originalEngine, Ci.nsISearchService.CHANGE_REASON_USER); - } -} - -// ============================================================================= - -const sleep = (duration) => new Promise((resolve) => setTimeout(resolve, duration)); - -class Page { - /** - * A basic controller for individual pages - * @param {string} id The id of the element that represents this page. - */ - constructor(id) { - this.element = document.getElementById(id); - } - - /** - * - * @param {Pages} pages The pages wrapper - */ - setPages(pages) { - this.pages = pages; - } - - hide() { - this.element.setAttribute('hidden', 'true'); - } - - show() { - this.element.removeAttribute('hidden'); - } -} - -class Themes extends Page { - constructor(id) { - super(id); - - this.loadThemes(); - } - - async loadThemes() { - window.addEventListener('DOMContentLoaded', this.setColorBar); - await sleep(1000); - - const themes = (await AddonManager.getAddonsByTypes(['theme'])).filter((theme) => theme.id !== 'default-theme@mozilla.org'); - const themeList = document.getElementById('themeList'); - - const themeElements = ['firefox-compact-light@mozilla.org', 'firefox-compact-dark@mozilla.org']; - - themeElements.forEach((theme, i) => { - let container = themeList.children[i]; - container.addEventListener( - 'click', - (() => { - if (container.hasAttribute('disabled')) { - return; - } - for (const el of themeList.children) { - el.classList.remove('selected'); - } - container.classList.add('selected'); - themes.find((t) => t.id === theme).enable(); - }).bind(this, i, container, theme) - ); - if (themes.find((t) => t.id === theme).isActive) { - container.classList.add('selected'); - } - }); - } - - setColorBar() { - const colorList = document.getElementById('colorListWrapper'); - const colors = ['#aac7ff', '#74d7cb', '#a0d490', '#dec663', '#ffb787', '#ffb1c0', '#ddbfc3', '#f6b0ea', '#d4bbff']; - - colors.forEach((color) => { - const container = document.createElement('div'); - container.classList.add('color'); - container.style.backgroundColor = color; - container.setAttribute('data-color', color); - container.addEventListener( - 'click', - (() => { - Services.prefs.setStringPref('zen.theme.accent-color', color); - colorList.querySelectorAll('.selected').forEach((el) => el.classList.remove('selected')); - container.classList.add('selected'); - }).bind(this, color, container) - ); - - colorList.appendChild(container); - }); - } -} - -class Layout extends Page { - constructor(id) { - super(id); - - this.loadLayouts(); - } - - loadLayouts() { - const kExtendedSidebar = 'zen.view.sidebar-expanded'; - const kSingleToolbar = 'zen.view.use-single-toolbar'; - - for (const layout of document.getElementById('layoutList').children) { - layout.addEventListener('click', () => { - if (layout.hasAttribute('disabled')) { - return; - } - - for (const el of document.getElementById('layoutList').children) { - el.classList.remove('selected'); - } - - layout.classList.add('selected'); - - Services.prefs.setBoolPref(kExtendedSidebar, layout.getAttribute('layout') != 'collapsed'); - Services.prefs.setBoolPref(kSingleToolbar, layout.getAttribute('layout') == 'single'); - }); - } - } -} - -class Thanks extends Page { - constructor(id) { - super(id); - - // Thanks :) - } -} - -class Search extends Page { - constructor(id) { - super(id); - - this.store = new EngineStore(); - this.searchList = []; - - this.loadSearch(); - } - - async loadSearch() { - await sleep(1100); - await this.store.init(); - - const defaultEngine = await Services.search.getDefault(); - - const searchElements = document.getElementById('searchList'); - - this.store.getEngine().forEach(async (search) => { - const container = await this.loadSpecificSearch(search, defaultEngine); - - searchElements.appendChild(container); - this.searchList.push(container); - }); - } - - /** - * @returns {HTMLDivElement} - */ - async loadSpecificSearch(search, defaultSearch) { - const container = document.createElement('div'); - container.classList.add('card'); - container.classList.add('card-no-hover'); - - if (search.name == defaultSearch._name) { - container.classList.add('selected'); - } - - container.addEventListener('click', () => { - this.searchList.forEach((el) => el.classList.remove('selected')); - container.classList.add('selected'); - this.store.setDefaultEngine(search); - }); - - const img = document.createElement('img'); - img.src = await search.originalEngine.getIconURL(); - - const name = document.createElement('h3'); - name.textContent = search.name; - - container.appendChild(img); - container.appendChild(name); - - return container; - } -} - -class Import extends Page { - constructor(id) { - super(id); - - const importButton = document.getElementById('importBrowser'); - importButton.addEventListener('click', async () => { - MigrationUtils.showMigrationWizard(window, { - zenBlocking: true, - }); - }); - } -} - -class Pages { - /** - * A wrapper around all pages - * @param {Page[]} pages The pages - */ - constructor(pages) { - this.pages = pages; - this.currentPage = 0; - - this.pages.forEach((page) => page.setPages(this)); - - this._displayCurrentPage(); - - this.nextEl = document.getElementById(`next`); - this.prevEl = document.getElementById(`back`); - - this.nextEl.addEventListener('click', () => { - this.next(); - this.prevEl.removeAttribute('disabled'); - }); - - this.prevEl.addEventListener('click', () => { - this.currentPage--; - this._displayCurrentPage(); - if (this.pages.currentPage === 1) { - this.prevEl.setAttribute('disabled', 'true'); - } - - for (const button of document.getElementById('buttons-footer').children) { - button.style.display = 'none'; - // Re-animate the buttons - setTimeout(() => { - button.style.removeProperty('display'); - }); - } - }); - } - - next() { - this.currentPage++; - document.getElementById('main-view').setAttribute('data-page', this.currentPage); - - if (this.currentPage >= this.pages.length) { - // We can use internal js apis to close the window. We also want to set - // the settings api for welcome seen to false to stop it showing again - - Services.prefs.setBoolPref(kWelcomeSeenPref, true); - - close(); - return; - } - - for (const button of document.getElementById('buttons-footer').children) { - button.style.display = 'none'; - // Re-animate the buttons - setTimeout(() => { - button.style.removeProperty('display'); - }); - } - - this._displayCurrentPage(); - } - - _displayCurrentPage() { - let progress = document.getElementById('circular-progress'); - progress.style.setProperty('--progress', ((this.currentPage + 1) / this.pages.length) * 100); - for (const page of this.pages) { - page.hide(); - } - if (this.currentPage >= 1) { - document.body.classList.remove('gradient-background'); - } else { - document.body.classList.add('gradient-background'); - } - this.pages[this.currentPage].show(); - } -} - -const pages = new Pages([ - new Page('welcome'), - new Themes('theme'), - new Layout('layout'), - new Import('import'), - new Search('search'), - new Thanks('thanks'), -]); From d003a313535257a4401641ba7b4d94cae277fb93 Mon Sep 17 00:00:00 2001 From: "mr. M" Date: Fri, 14 Feb 2025 01:00:45 +0100 Subject: [PATCH 02/48] Update Zen theme styles for improved button color mixing and enhance welcome page button styling --- src/browser/base/content/zen-styles/zen-theme.css | 14 +++++++------- .../base/content/zen-styles/zen-welcome.css | 6 ++++++ src/browser/base/zen-components/ZenWelcome.mjs | 2 +- 3 files changed, 14 insertions(+), 8 deletions(-) diff --git a/src/browser/base/content/zen-styles/zen-theme.css b/src/browser/base/content/zen-styles/zen-theme.css index f5482f7ac..6cbcaddb2 100644 --- a/src/browser/base/content/zen-styles/zen-theme.css +++ b/src/browser/base/content/zen-styles/zen-theme.css @@ -46,20 +46,20 @@ --in-content-primary-button-background: color-mix( in srgb, - var(--zen-primary-color) 10%, - var(--zen-branding-bg) 90% + var(--zen-primary-color) 30%, + var(--zen-branding-bg-reverse) 70% ) !important; --in-content-primary-button-background-hover: color-mix( in srgb, - var(--zen-primary-color) 15%, - var(--zen-branding-bg) 85% + var(--zen-primary-color) 35%, + var(--zen-branding-bg-reverse) 65% ) !important; --in-content-primary-button-background-active: color-mix( in srgb, - var(--zen-primary-color) 20%, - var(--zen-branding-bg) 80% + var(--zen-primary-color) 40%, + var(--zen-branding-bg-reverse) 60% ) !important; - --button-text-color-primary: var(--zen-branding-bg-reverse) !important; + --button-text-color-primary: var(--zen-branding-bg) !important; --in-content-primary-button-text-color: var(--zen-colors-primary-foreground) !important; --in-content-primary-button-border-color: transparent !important; --in-content-primary-button-border-hover: transparent !important; diff --git a/src/browser/base/content/zen-styles/zen-welcome.css b/src/browser/base/content/zen-styles/zen-welcome.css index 4e7849250..7cce779ba 100644 --- a/src/browser/base/content/zen-styles/zen-welcome.css +++ b/src/browser/base/content/zen-styles/zen-welcome.css @@ -11,11 +11,17 @@ #zen-welcome-start { flex-direction: column; + --zen-primary-color: light-dark(black, white); + #zen-welcome-start-button { opacity: 0; list-style-image: url(chrome://browser/skin/zen-icons/forward.svg); position: absolute; bottom: 10%; + + .button-icon { + filter: invert(1); + } } #zen-welcome-title { diff --git a/src/browser/base/zen-components/ZenWelcome.mjs b/src/browser/base/zen-components/ZenWelcome.mjs index 139a891d7..1387e2207 100644 --- a/src/browser/base/zen-components/ZenWelcome.mjs +++ b/src/browser/base/zen-components/ZenWelcome.mjs @@ -19,7 +19,7 @@ - From 76d872cbe5687a7e86907f2850c6c04efbb96a81 Mon Sep 17 00:00:00 2001 From: "mr. M" Date: Fri, 14 Feb 2025 01:02:19 +0100 Subject: [PATCH 03/48] Enable window dragging for Zen Welcome page styling --- src/browser/base/content/zen-styles/zen-welcome.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/browser/base/content/zen-styles/zen-welcome.css b/src/browser/base/content/zen-styles/zen-welcome.css index 7cce779ba..e6108d30e 100644 --- a/src/browser/base/content/zen-styles/zen-welcome.css +++ b/src/browser/base/content/zen-styles/zen-welcome.css @@ -10,6 +10,7 @@ #zen-welcome-start { flex-direction: column; + -moz-window-dragging: drag; --zen-primary-color: light-dark(black, white); From 422bc5baf39b1251ecbbcb9091217643f2521c23 Mon Sep 17 00:00:00 2001 From: "mr. M" Date: Fri, 14 Feb 2025 01:10:17 +0100 Subject: [PATCH 04/48] Update primary button text color in Zen theme for better visibility --- src/browser/base/content/zen-styles/zen-theme.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/browser/base/content/zen-styles/zen-theme.css b/src/browser/base/content/zen-styles/zen-theme.css index 6cbcaddb2..06ba77888 100644 --- a/src/browser/base/content/zen-styles/zen-theme.css +++ b/src/browser/base/content/zen-styles/zen-theme.css @@ -60,7 +60,7 @@ var(--zen-branding-bg-reverse) 60% ) !important; --button-text-color-primary: var(--zen-branding-bg) !important; - --in-content-primary-button-text-color: var(--zen-colors-primary-foreground) !important; + --in-content-primary-button-text-color: var(--zen-branding-bg) !important; --in-content-primary-button-border-color: transparent !important; --in-content-primary-button-border-hover: transparent !important; --in-content-primary-button-border-active: var(--zen-colors-border) !important; From b393979d539febc182422c91ebf96ec6366ca424 Mon Sep 17 00:00:00 2001 From: "mr. M" Date: Fri, 14 Feb 2025 12:45:37 +0100 Subject: [PATCH 05/48] Enhance welcome page functionality and styling in Zen component --- l10n | 2 +- src/browser/base/content/ZenStartup.mjs | 12 +- .../base/content/zen-styles/zen-welcome.css | 30 ++- .../base/zen-components/ZenWelcome.mjs | 200 ++++++++++++++++-- 4 files changed, 222 insertions(+), 22 deletions(-) diff --git a/l10n b/l10n index 91d6c42ee..3405bce73 160000 --- a/l10n +++ b/l10n @@ -1 +1 @@ -Subproject commit 91d6c42eebc1fb9ba6411419eb4830334808f7f1 +Subproject commit 3405bce73e3a15dd0ef5686e90f9a9bb55495a02 diff --git a/src/browser/base/content/ZenStartup.mjs b/src/browser/base/content/ZenStartup.mjs index 2be75d44d..5ce8930be 100644 --- a/src/browser/base/content/ZenStartup.mjs +++ b/src/browser/base/content/ZenStartup.mjs @@ -123,15 +123,15 @@ }, _checkForWelcomePage() { - if (!Services.prefs.getBoolPref('zen.welcome-screen.seen', false) && Services.prefs.getBoolPref('zen.welcome-screen.enabled', true)) { + if ( + !Services.prefs.getBoolPref('zen.welcome-screen.seen', false) && + Services.prefs.getBoolPref('zen.welcome-screen.enabled', true) + ) { //Services.prefs.setBoolPref('zen.welcome-screen.seen', true); console.log('ZenStartup: Show welcome page'); - Services.scriptloader.loadSubScript( - "chrome://browser/content/zen-components/ZenWelcome.mjs", - window - ); + Services.scriptloader.loadSubScript('chrome://browser/content/zen-components/ZenWelcome.mjs', window); } - } + }, }; ZenStartup.init(); diff --git a/src/browser/base/content/zen-styles/zen-welcome.css b/src/browser/base/content/zen-styles/zen-welcome.css index e6108d30e..ced77a45e 100644 --- a/src/browser/base/content/zen-styles/zen-welcome.css +++ b/src/browser/base/content/zen-styles/zen-welcome.css @@ -1,11 +1,15 @@ - #zen-welcome, -#zen-welcome-start { +#zen-welcome-start, +#zen-welcome-pages { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; + + & + #zen-sidebar-splitter { + display: none; + } } #zen-welcome-start { @@ -38,3 +42,25 @@ } } } + +#zen-welcome-pages { + justify-content: start; + align-items: start; + display: none; + + #zen-welcome-page-sidebar { + background: rgba(255, 255, 255, 0.1); + box-shadow: var(--zen-big-shadow); + flex-direction: column; + justify-content: space-between; + padding: 2rem; + width: 33%; + height: 100%; + backdrop-filter: blur(10px); + } + + #zen-welcome-page-sidebar-buttons { + flex-direction: column; + gap: 5px; + } +} diff --git a/src/browser/base/zen-components/ZenWelcome.mjs b/src/browser/base/zen-components/ZenWelcome.mjs index 1387e2207..3a8e1389e 100644 --- a/src/browser/base/zen-components/ZenWelcome.mjs +++ b/src/browser/base/zen-components/ZenWelcome.mjs @@ -22,28 +22,202 @@ + + + + + + + + + + `; const fragment = window.MozXULElement.parseXULToFragment(XUL); document.getElementById('browser').appendChild(fragment); - window.MozXULElement.insertFTLIfNeeded("browser/zen-welcome.ftl"); + window.MozXULElement.insertFTLIfNeeded('browser/zen-welcome.ftl'); + } + + class ZenWelcomePages { + constructor(pages) { + this._currentPage = -1; + this._pages = pages; + this.init(); + this.next(); + } + + init() { + document.getElementById('zen-welcome-pages').style.display = 'flex'; + document.getElementById('zen-welcome-start').style.display = 'none'; + } + + async fadeInTitles(page) { + const [title1, description1] = document.l10n.formatValues(page.content); + const titleElement = document.getElementById('zen-welcome-page-content-title'); + titleElement.innerHTML = `${title1}${description1}`; + await animate( + '#zen-welcome-page-content-title h1, #zen-welcome-page-content-title p', + { opacity: [0, 1], x: [100, 0], filter: ['blur(2px)', 'blur(0px)'] }, + { + delay: getMotion().stagger(0.6, { startDelay: 0.2 }), + type: 'spring', + stiffness: 300, + damping: 20, + mass: 1.7, + } + ); + } + + async fadeInButtons(page) { + const buttons = document.getElementById('zen-welcome-page-sidebar-buttons'); + let i = 0; + for (const button of page.buttons) { + const buttonElement = document.createXULElement('button'); + document.l10n.setAttributes(buttonElement, button.l10n); + if (i++ === 0) { + buttonElement.classList.add('primary'); + } + buttonElement.addEventListener('click', async () => { + const shouldSkip = await button.onclick(); + if (shouldSkip) { + this.next(); + } + }); + buttons.appendChild(buttonElement); + } + await animate( + '#zen-welcome-page-sidebar-buttons button', + { opacity: [0, 1], x: [100, 0], filter: ['blur(2px)', 'blur(0px)'] }, + { + delay: getMotion().stagger(0.6, { startDelay: 0.2 }), + type: 'spring', + stiffness: 300, + damping: 20, + mass: 1.7, + } + ); + } + + async fadeOutButtons() { + await animate( + '#zen-welcome-page-sidebar-buttons button', + { opacity: [1, 0], x: [0, 100], filter: ['blur(0px)', 'blur(2px)'] }, + { + type: 'spring', + stiffness: 300, + damping: 20, + mass: 1.7, + } + ); + document.getElementById('zen-welcome-page-sidebar-buttons').innerHTML = ''; + } + + async fadeOutTitles() { + await animate( + '#zen-welcome-page-content-title h1, #zen-welcome-page-content-title p', + { opacity: [1, 0], x: [0, 100], filter: ['blur(0px)', 'blur(2px)'] }, + { + type: 'spring', + stiffness: 300, + damping: 20, + mass: 1.7, + } + ); + } + + async next() { + if (this._currentPage !== -1) { + const previousPage = this._pages[this._currentPage]; + await this.fadeOutTitles(); + await this.fadeOutButtons(); + previousPage.fadeOut(); + } + this._currentPage++; + const currentPage = this._pages.shift(); + if (!currentPage) { + return; + } + await this.fadeInTitles(currentPage); + await this.fadeInButtons(currentPage); + currentPage.fadeIn(); + } + } + + function getWelcomePages() { + return [ + { + content: [ + { + id: 'zen-welcome-import-title', + }, + { + id: 'zen-welcome-import-description', + }, + ], + buttons: [ + { + l10n: 'zen-welcome-import-button', + onclick: async () => { + // Import bookmarks + return false; + }, + }, + { + l10n: 'zen-welcome-skip-button', + onclick: async () => { + return true; + }, + }, + ], + fadeIn() {}, + fadeOut() {}, + }, + ]; } async function animateInitialStage() { - const [title1, title2] = await document.l10n.formatValues([{id:'zen-welcome-title-line1'}, {id:'zen-welcome-title-line2'}]); + const [title1, title2] = await document.l10n.formatValues([ + { id: 'zen-welcome-title-line1' }, + { id: 'zen-welcome-title-line2' }, + ]); const titleElement = document.getElementById('zen-welcome-title'); titleElement.innerHTML = `${title1}${title2}`; - await animate("#zen-welcome-title span", { opacity: [0, 1], y: [100, 0] }, { - delay: getMotion().stagger(0.6), - type: 'spring', - ease: 'ease-out', - bounce: 0, - }); - await animate("#zen-welcome-start-button", { opacity: [0, 1], y: [100, 0] }, { - delay: 0.5, - type: 'spring', - ease: 'ease-in-out', - bounce: 0.4, + await animate( + '#zen-welcome-title span', + { opacity: [0, 1], y: [30, 0], filter: ['blur(2px)', 'blur(0px)'] }, + { + delay: getMotion().stagger(0.6, { startDelay: 0.2 }), + type: 'spring', + stiffness: 300, + damping: 20, + mass: 1.7, + } + ); + const button = document.getElementById('zen-welcome-start-button'); + await animate( + button, + { opacity: [0, 1], y: [30, 0], filter: ['blur(2px)', 'blur(0px)'] }, + { + delay: 0.4, + type: 'spring', + stiffness: 300, + damping: 20, + mass: 1.7, + } + ); + button.addEventListener('click', async () => { + await animate( + '#zen-welcome-title span, #zen-welcome-start-button', + { opacity: [1, 0], y: [0, -10], filter: ['blur(0px)', 'blur(2px)'] }, + { + type: 'spring', + ease: [0.755, 0.05, 0.855, 0.06], + bounce: 0.4, + delay: getMotion().stagger(0.4, { startDelay: 0.3 }), + } + ); + new ZenWelcomePages(getWelcomePages()); }); } From 1298c67d1be6b09e3188f20cc905167d64bd7ba2 Mon Sep 17 00:00:00 2001 From: "mr. M" Date: Fri, 14 Feb 2025 13:02:04 +0100 Subject: [PATCH 06/48] Enhance Zen welcome component styling and functionality, including improved animations and layout adjustments --- .../base/content/zen-styles/zen-welcome.css | 25 ++++++++++++++++--- .../base/zen-components/ZenWelcome.mjs | 22 ++++++++++------ 2 files changed, 37 insertions(+), 10 deletions(-) diff --git a/src/browser/base/content/zen-styles/zen-welcome.css b/src/browser/base/content/zen-styles/zen-welcome.css index ced77a45e..74d7d22d4 100644 --- a/src/browser/base/content/zen-styles/zen-welcome.css +++ b/src/browser/base/content/zen-styles/zen-welcome.css @@ -6,10 +6,10 @@ display: flex; align-items: center; justify-content: center; +} - & + #zen-sidebar-splitter { - display: none; - } +:root[zen-welcome-stage] #zen-sidebar-splitter { + display: none; } #zen-welcome-start { @@ -44,6 +44,7 @@ } #zen-welcome-pages { + opacity: 0; justify-content: start; align-items: start; display: none; @@ -63,4 +64,22 @@ flex-direction: column; gap: 5px; } + + #zen-welcome-page-sidebar-content { + & h1 { + font-size: 2rem; + font-weight: 600; + margin-bottom: 1rem; + } + + & p { + font-size: 1.2rem; + margin: 0; + opacity: .6; + } + } + + & button { + justify-content: center; + } } diff --git a/src/browser/base/zen-components/ZenWelcome.mjs b/src/browser/base/zen-components/ZenWelcome.mjs index 3a8e1389e..0e70e3688 100644 --- a/src/browser/base/zen-components/ZenWelcome.mjs +++ b/src/browser/base/zen-components/ZenWelcome.mjs @@ -15,6 +15,7 @@ } function initializeZenWelcome() { + document.documentElement.setAttribute('zen-welcome-stage', 'true'); const XUL = ` @@ -49,16 +50,17 @@ init() { document.getElementById('zen-welcome-pages').style.display = 'flex'; - document.getElementById('zen-welcome-start').style.display = 'none'; + document.getElementById('zen-welcome-start').remove(); + animate('#zen-welcome-pages', { opacity: [0, 1] }); } async fadeInTitles(page) { - const [title1, description1] = document.l10n.formatValues(page.content); - const titleElement = document.getElementById('zen-welcome-page-content-title'); + const [title1, description1] = await document.l10n.formatValues(page.content); + const titleElement = document.getElementById('zen-welcome-page-sidebar-content'); titleElement.innerHTML = `${title1}${description1}`; await animate( - '#zen-welcome-page-content-title h1, #zen-welcome-page-content-title p', - { opacity: [0, 1], x: [100, 0], filter: ['blur(2px)', 'blur(0px)'] }, + '#zen-welcome-page-sidebar-content > *', + { opacity: [0, 1], x: [50, 0], filter: ['blur(2px)', 'blur(0px)'] }, { delay: getMotion().stagger(0.6, { startDelay: 0.2 }), type: 'spring', @@ -78,6 +80,7 @@ if (i++ === 0) { buttonElement.classList.add('primary'); } + buttonElement.classList.add('footer-button'); buttonElement.addEventListener('click', async () => { const shouldSkip = await button.onclick(); if (shouldSkip) { @@ -88,9 +91,9 @@ } await animate( '#zen-welcome-page-sidebar-buttons button', - { opacity: [0, 1], x: [100, 0], filter: ['blur(2px)', 'blur(0px)'] }, + { opacity: [0, 1], x: [50, 0], filter: ['blur(2px)', 'blur(0px)'] }, { - delay: getMotion().stagger(0.6, { startDelay: 0.2 }), + delay: getMotion().stagger(0.2), type: 'spring', stiffness: 300, damping: 20, @@ -136,12 +139,17 @@ this._currentPage++; const currentPage = this._pages.shift(); if (!currentPage) { + this.finish(); return; } await this.fadeInTitles(currentPage); await this.fadeInButtons(currentPage); currentPage.fadeIn(); } + + finish() { + document.documentElement.removeAttribute('zen-welcome-stage'); + } } function getWelcomePages() { From 03cd059a6fb7f287dc1259a3015158490b2e3e7a Mon Sep 17 00:00:00 2001 From: "mr. M" Date: Fri, 14 Feb 2025 13:06:47 +0100 Subject: [PATCH 07/48] Adjust padding and overflow properties in zen-welcome.css for improved layout --- src/browser/base/content/zen-styles/zen-welcome.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/browser/base/content/zen-styles/zen-welcome.css b/src/browser/base/content/zen-styles/zen-welcome.css index 74d7d22d4..0fbe9d75c 100644 --- a/src/browser/base/content/zen-styles/zen-welcome.css +++ b/src/browser/base/content/zen-styles/zen-welcome.css @@ -54,10 +54,11 @@ box-shadow: var(--zen-big-shadow); flex-direction: column; justify-content: space-between; - padding: 2rem; + padding: 3%; width: 33%; height: 100%; backdrop-filter: blur(10px); + overflow: hidden; } #zen-welcome-page-sidebar-buttons { From 89bb3a7f2cbf40d607643a241d586b20bf9d6abd Mon Sep 17 00:00:00 2001 From: "mr. M" Date: Fri, 14 Feb 2025 21:22:44 +0100 Subject: [PATCH 08/48] Refactor Zen welcome component: update styles, enhance animations, and improve localization handling --- l10n | 2 +- .../base/content/zen-styles/zen-buttons.css | 7 +++++ .../base/content/zen-styles/zen-welcome.css | 18 +++++++----- .../base/zen-components/ZenWelcome.mjs | 28 ++++++++++--------- 4 files changed, 34 insertions(+), 21 deletions(-) diff --git a/l10n b/l10n index 3405bce73..d753ec021 160000 --- a/l10n +++ b/l10n @@ -1 +1 @@ -Subproject commit 3405bce73e3a15dd0ef5686e90f9a9bb55495a02 +Subproject commit d753ec021b0ff60fdb64a76454898e02eabe7ccb diff --git a/src/browser/base/content/zen-styles/zen-buttons.css b/src/browser/base/content/zen-styles/zen-buttons.css index 986dfcff5..bf811de99 100644 --- a/src/browser/base/content/zen-styles/zen-buttons.css +++ b/src/browser/base/content/zen-styles/zen-buttons.css @@ -31,6 +31,13 @@ xul|button:is(.expander-down) { border-radius: 6px !important; } +.footer-button { + transition: scale 0.2s; + &:active { + scale: scale(0.98); + } +} + @media (-moz-bool-pref: 'zen.theme.pill-button') { :host(:is(.anonymous-content-host, notification-message)), :root { diff --git a/src/browser/base/content/zen-styles/zen-welcome.css b/src/browser/base/content/zen-styles/zen-welcome.css index 0fbe9d75c..ac6323692 100644 --- a/src/browser/base/content/zen-styles/zen-welcome.css +++ b/src/browser/base/content/zen-styles/zen-welcome.css @@ -50,12 +50,11 @@ display: none; #zen-welcome-page-sidebar { - background: rgba(255, 255, 255, 0.1); - box-shadow: var(--zen-big-shadow); + background: rgba(255, 255, 255, 0.07); flex-direction: column; justify-content: space-between; - padding: 3%; - width: 33%; + padding: 3.5rem; + width: 40%; height: 100%; backdrop-filter: blur(10px); overflow: hidden; @@ -68,19 +67,24 @@ #zen-welcome-page-sidebar-content { & h1 { - font-size: 2rem; + font-size: 2.2rem; font-weight: 600; margin-bottom: 1rem; } & p { - font-size: 1.2rem; - margin: 0; + font-size: 1.1rem; + margin: 0 0 1.1rem 0; opacity: .6; } + + & > * { + opacity: 0; + } } & button { justify-content: center; + opacity: 0; } } diff --git a/src/browser/base/zen-components/ZenWelcome.mjs b/src/browser/base/zen-components/ZenWelcome.mjs index 0e70e3688..bb5274bdf 100644 --- a/src/browser/base/zen-components/ZenWelcome.mjs +++ b/src/browser/base/zen-components/ZenWelcome.mjs @@ -55,18 +55,17 @@ } async fadeInTitles(page) { - const [title1, description1] = await document.l10n.formatValues(page.content); + const [title1, description1, description2] = await document.l10n.formatValues(page.content); const titleElement = document.getElementById('zen-welcome-page-sidebar-content'); - titleElement.innerHTML = `${title1}${description1}`; + titleElement.innerHTML = `${title1}${description1}` + + (description2 ? `${description2}` : ''); await animate( '#zen-welcome-page-sidebar-content > *', { opacity: [0, 1], x: [50, 0], filter: ['blur(2px)', 'blur(0px)'] }, { - delay: getMotion().stagger(0.6, { startDelay: 0.2 }), + delay: getMotion().stagger(0.1, { startDelay: 0.3 }), type: 'spring', - stiffness: 300, - damping: 20, - mass: 1.7, + bounce: 0.3, } ); } @@ -93,11 +92,9 @@ '#zen-welcome-page-sidebar-buttons button', { opacity: [0, 1], x: [50, 0], filter: ['blur(2px)', 'blur(0px)'] }, { - delay: getMotion().stagger(0.2), + delay: getMotion().stagger(0.1), type: 'spring', - stiffness: 300, - damping: 20, - mass: 1.7, + bounce: 0.3, } ); } @@ -137,7 +134,7 @@ previousPage.fadeOut(); } this._currentPage++; - const currentPage = this._pages.shift(); + const currentPage = this._pages[this._currentPage]; if (!currentPage) { this.finish(); return; @@ -160,14 +157,19 @@ id: 'zen-welcome-import-title', }, { - id: 'zen-welcome-import-description', + id: 'zen-welcome-import-description-1', }, + { + id: 'zen-welcome-import-description-2', + } ], buttons: [ { l10n: 'zen-welcome-import-button', onclick: async () => { - // Import bookmarks + MigrationUtils.showMigrationWizard(window, { + zenBlocking: true, + }); return false; }, }, From 5884fee7acdd04c2d4fe0da7d5e13641be29c8ab Mon Sep 17 00:00:00 2001 From: "mr. M" Date: Fri, 14 Feb 2025 22:19:27 +0100 Subject: [PATCH 09/48] Enhance Zen welcome styles: improve button scaling, update layout properties, and add background effects --- .../base/content/zen-styles/zen-buttons.css | 2 +- .../base/content/zen-styles/zen-welcome.css | 30 ++++++++++++++----- .../base/zen-components/ZenWelcome.mjs | 1 + 3 files changed, 25 insertions(+), 8 deletions(-) diff --git a/src/browser/base/content/zen-styles/zen-buttons.css b/src/browser/base/content/zen-styles/zen-buttons.css index bf811de99..dbf64de7a 100644 --- a/src/browser/base/content/zen-styles/zen-buttons.css +++ b/src/browser/base/content/zen-styles/zen-buttons.css @@ -34,7 +34,7 @@ xul|button:is(.expander-down) { .footer-button { transition: scale 0.2s; &:active { - scale: scale(0.98); + scale: 0.98; } } diff --git a/src/browser/base/content/zen-styles/zen-welcome.css b/src/browser/base/content/zen-styles/zen-welcome.css index ac6323692..ef673b7f7 100644 --- a/src/browser/base/content/zen-styles/zen-welcome.css +++ b/src/browser/base/content/zen-styles/zen-welcome.css @@ -6,6 +6,7 @@ display: flex; align-items: center; justify-content: center; + -moz-window-dragging: drag; } :root[zen-welcome-stage] #zen-sidebar-splitter { @@ -48,34 +49,39 @@ justify-content: start; align-items: start; display: none; + background: var(--zen-branding-bg); + border-radius: 1em; + overflow: hidden; + position: relative; + width: 60%; + height: 60%; + box-shadow: var(--zen-big-shadow); #zen-welcome-page-sidebar { - background: rgba(255, 255, 255, 0.07); flex-direction: column; justify-content: space-between; - padding: 3.5rem; + padding: 3.8rem; width: 40%; height: 100%; - backdrop-filter: blur(10px); overflow: hidden; } #zen-welcome-page-sidebar-buttons { flex-direction: column; - gap: 5px; + gap: 10px; } #zen-welcome-page-sidebar-content { & h1 { - font-size: 2.2rem; + font-size: xx-large; font-weight: 600; margin-bottom: 1rem; } & p { - font-size: 1.1rem; + font-size: medium; margin: 0 0 1.1rem 0; - opacity: .6; + color: light-dark(rgba(0, 0, 0, 0.6), rgba(255, 255, 255, 0.6)); } & > * { @@ -87,4 +93,14 @@ justify-content: center; opacity: 0; } + + #zen-welcome-page-content { + background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1)); + width: 60%; + height: 100%; + position: relative; + overflow: hidden; + justify-content: center; + align-items: center; + } } diff --git a/src/browser/base/zen-components/ZenWelcome.mjs b/src/browser/base/zen-components/ZenWelcome.mjs index bb5274bdf..50eb8e245 100644 --- a/src/browser/base/zen-components/ZenWelcome.mjs +++ b/src/browser/base/zen-components/ZenWelcome.mjs @@ -51,6 +51,7 @@ init() { document.getElementById('zen-welcome-pages').style.display = 'flex'; document.getElementById('zen-welcome-start').remove(); + window.maximize(); animate('#zen-welcome-pages', { opacity: [0, 1] }); } From e13b78833d6ac800bf9dc8c490b57ebc683389b6 Mon Sep 17 00:00:00 2001 From: "mr. M" Date: Fri, 14 Feb 2025 22:22:03 +0100 Subject: [PATCH 10/48] Adjust animation delay in ZenWelcome component for improved user experience --- src/browser/base/zen-components/ZenWelcome.mjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/browser/base/zen-components/ZenWelcome.mjs b/src/browser/base/zen-components/ZenWelcome.mjs index 50eb8e245..2c0507d9c 100644 --- a/src/browser/base/zen-components/ZenWelcome.mjs +++ b/src/browser/base/zen-components/ZenWelcome.mjs @@ -225,7 +225,7 @@ type: 'spring', ease: [0.755, 0.05, 0.855, 0.06], bounce: 0.4, - delay: getMotion().stagger(0.4, { startDelay: 0.3 }), + delay: getMotion().stagger(0.4, { startDelay: 0.15 }), } ); new ZenWelcomePages(getWelcomePages()); From 5bfb7c63ac86dbb43043c8acfbca30bd2f60058b Mon Sep 17 00:00:00 2001 From: "mr. M" Date: Fri, 14 Feb 2025 22:24:29 +0100 Subject: [PATCH 11/48] Fixed delay durations --- src/browser/base/zen-components/ZenWelcome.mjs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/browser/base/zen-components/ZenWelcome.mjs b/src/browser/base/zen-components/ZenWelcome.mjs index 2c0507d9c..ffccfc0af 100644 --- a/src/browser/base/zen-components/ZenWelcome.mjs +++ b/src/browser/base/zen-components/ZenWelcome.mjs @@ -210,7 +210,7 @@ button, { opacity: [0, 1], y: [30, 0], filter: ['blur(2px)', 'blur(0px)'] }, { - delay: 0.4, + delay: 0.6, type: 'spring', stiffness: 300, damping: 20, @@ -225,7 +225,7 @@ type: 'spring', ease: [0.755, 0.05, 0.855, 0.06], bounce: 0.4, - delay: getMotion().stagger(0.4, { startDelay: 0.15 }), + delay: getMotion().stagger(0.4), } ); new ZenWelcomePages(getWelcomePages()); From 6a92bbcb52ed0b26e9761f9baefe559f316cf7f4 Mon Sep 17 00:00:00 2001 From: "mr. M" Date: Fri, 14 Feb 2025 22:42:49 +0100 Subject: [PATCH 12/48] Refactor animation parameters in ZenWelcome component for smoother transitions --- src/browser/base/zen-components/ZenWelcome.mjs | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/browser/base/zen-components/ZenWelcome.mjs b/src/browser/base/zen-components/ZenWelcome.mjs index ffccfc0af..bc4b68b37 100644 --- a/src/browser/base/zen-components/ZenWelcome.mjs +++ b/src/browser/base/zen-components/ZenWelcome.mjs @@ -64,9 +64,9 @@ '#zen-welcome-page-sidebar-content > *', { opacity: [0, 1], x: [50, 0], filter: ['blur(2px)', 'blur(0px)'] }, { - delay: getMotion().stagger(0.1, { startDelay: 0.3 }), + delay: getMotion().stagger(0.05, { startDelay: 0.3 }), type: 'spring', - bounce: 0.3, + bounce: 0.2, } ); } @@ -95,7 +95,7 @@ { delay: getMotion().stagger(0.1), type: 'spring', - bounce: 0.3, + bounce: 0.2, } ); } @@ -103,12 +103,12 @@ async fadeOutButtons() { await animate( '#zen-welcome-page-sidebar-buttons button', - { opacity: [1, 0], x: [0, 100], filter: ['blur(0px)', 'blur(2px)'] }, + { opacity: [1, 0], x: [0, -60], filter: ['blur(0px)', 'blur(2px)'] }, { type: 'spring', stiffness: 300, damping: 20, - mass: 1.7, + mass: 1.4, } ); document.getElementById('zen-welcome-page-sidebar-buttons').innerHTML = ''; @@ -117,12 +117,12 @@ async fadeOutTitles() { await animate( '#zen-welcome-page-content-title h1, #zen-welcome-page-content-title p', - { opacity: [1, 0], x: [0, 100], filter: ['blur(0px)', 'blur(2px)'] }, + { opacity: [1, 0], x: [0, -60], filter: ['blur(0px)', 'blur(2px)'] }, { type: 'spring', stiffness: 300, damping: 20, - mass: 1.7, + mass: 1.4, } ); } From 7537a13640c2bc4e56af63fb8ccbac66e25a189a Mon Sep 17 00:00:00 2001 From: "mr. m" Date: Fri, 14 Feb 2025 22:43:21 +0100 Subject: [PATCH 13/48] Fixed delay in titles --- src/browser/base/zen-components/ZenWelcome.mjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/browser/base/zen-components/ZenWelcome.mjs b/src/browser/base/zen-components/ZenWelcome.mjs index ffccfc0af..fbabaab8a 100644 --- a/src/browser/base/zen-components/ZenWelcome.mjs +++ b/src/browser/base/zen-components/ZenWelcome.mjs @@ -210,7 +210,7 @@ button, { opacity: [0, 1], y: [30, 0], filter: ['blur(2px)', 'blur(0px)'] }, { - delay: 0.6, + delay: 0.1, type: 'spring', stiffness: 300, damping: 20, From 93e267cb95308abdf2b0d55cb930627eeebb6f8f Mon Sep 17 00:00:00 2001 From: "mr. M" Date: Fri, 14 Feb 2025 23:56:45 +0100 Subject: [PATCH 14/48] Add fadeInContent method and update ZenWelcome component for improved content display --- l10n | 2 +- .../base/content/zen-styles/zen-welcome.css | 1 + .../base/zen-components/ZenWelcome.mjs | 27 +++++++++++++++++-- 3 files changed, 27 insertions(+), 3 deletions(-) diff --git a/l10n b/l10n index d753ec021..146e85615 160000 --- a/l10n +++ b/l10n @@ -1 +1 @@ -Subproject commit d753ec021b0ff60fdb64a76454898e02eabe7ccb +Subproject commit 146e85615a6752039c3e578795ccf457bcda11b2 diff --git a/src/browser/base/content/zen-styles/zen-welcome.css b/src/browser/base/content/zen-styles/zen-welcome.css index ef673b7f7..38217c8ca 100644 --- a/src/browser/base/content/zen-styles/zen-welcome.css +++ b/src/browser/base/content/zen-styles/zen-welcome.css @@ -91,6 +91,7 @@ & button { justify-content: center; + align-items: center; opacity: 0; } diff --git a/src/browser/base/zen-components/ZenWelcome.mjs b/src/browser/base/zen-components/ZenWelcome.mjs index bc4b68b37..30a9c668c 100644 --- a/src/browser/base/zen-components/ZenWelcome.mjs +++ b/src/browser/base/zen-components/ZenWelcome.mjs @@ -56,7 +56,7 @@ } async fadeInTitles(page) { - const [title1, description1, description2] = await document.l10n.formatValues(page.content); + const [title1, description1, description2] = await document.l10n.formatValues(page.text); const titleElement = document.getElementById('zen-welcome-page-sidebar-content'); titleElement.innerHTML = `${title1}${description1}` + (description2 ? `${description2}` : ''); @@ -100,6 +100,20 @@ ); } + async fadeInContent(page) { + const contentElement = document.getElementById('zen-welcome-page-content'); + contentElement.innerHTML = page.content; + await animate( + '#zen-welcome-page-content > *', + { opacity: [0, 1], scale: [0.9, 1], filter: ['blur(2px)', 'blur(0px)'] }, + { + delay: getMotion().stagger(0.05, { startDelay: 0.3 }), + type: 'spring', + bounce: 0.2, + } + ); + } + async fadeOutButtons() { await animate( '#zen-welcome-page-sidebar-buttons button', @@ -112,6 +126,7 @@ } ); document.getElementById('zen-welcome-page-sidebar-buttons').innerHTML = ''; + document.getElementById('zen-welcome-page-sidebar-content').innerHTML = ''; } async fadeOutTitles() { @@ -142,6 +157,7 @@ } await this.fadeInTitles(currentPage); await this.fadeInButtons(currentPage); + await this.fadeInContent(currentPage); currentPage.fadeIn(); } @@ -153,7 +169,7 @@ function getWelcomePages() { return [ { - content: [ + text: [ { id: 'zen-welcome-import-title', }, @@ -181,6 +197,13 @@ }, }, ], + content: ` + + `, fadeIn() {}, fadeOut() {}, }, From ca11631531e7f7d77bb6b3508db332c8aba2d7f3 Mon Sep 17 00:00:00 2001 From: "mr. M" Date: Sat, 15 Feb 2025 00:36:57 +0100 Subject: [PATCH 15/48] Enhance ZenWelcome component with improved layout and animation for radio buttons --- l10n | 2 +- .../base/content/zen-styles/zen-welcome.css | 23 +++++++++++++++ .../base/zen-components/ZenWelcome.mjs | 28 +++++++++++-------- 3 files changed, 40 insertions(+), 13 deletions(-) diff --git a/l10n b/l10n index 146e85615..83464a5d3 160000 --- a/l10n +++ b/l10n @@ -1 +1 @@ -Subproject commit 146e85615a6752039c3e578795ccf457bcda11b2 +Subproject commit 83464a5d3596558a8d15c7fd7f495f61726a0f05 diff --git a/src/browser/base/content/zen-styles/zen-welcome.css b/src/browser/base/content/zen-styles/zen-welcome.css index 38217c8ca..91984e761 100644 --- a/src/browser/base/content/zen-styles/zen-welcome.css +++ b/src/browser/base/content/zen-styles/zen-welcome.css @@ -103,5 +103,28 @@ overflow: hidden; justify-content: center; align-items: center; + display: flex; + flex-direction: column; + gap: 1.1rem; + + & label { + opacity: 0; + transition: scale 0.2s; + padding: 1.1rem 1.3rem; + border-radius: .6rem; + width: 50%; + border: 2px solid var(--zen-colors-border); + box-shadow: var(--zen-big-shadow); + background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1)); + + &:hover { + scale: 1.015; + } + + &:has(:checked) { + border: 2px solid var(--zen-primary-color); + scale: 1.03; + } + } } } diff --git a/src/browser/base/zen-components/ZenWelcome.mjs b/src/browser/base/zen-components/ZenWelcome.mjs index ff51d5da1..8e38ee806 100644 --- a/src/browser/base/zen-components/ZenWelcome.mjs +++ b/src/browser/base/zen-components/ZenWelcome.mjs @@ -100,9 +100,7 @@ ); } - async fadeInContent(page) { - const contentElement = document.getElementById('zen-welcome-page-content'); - contentElement.innerHTML = page.content; + async fadeInContent() { await animate( '#zen-welcome-page-content > *', { opacity: [0, 1], scale: [0.9, 1], filter: ['blur(2px)', 'blur(0px)'] }, @@ -157,8 +155,8 @@ } await this.fadeInTitles(currentPage); await this.fadeInButtons(currentPage); - await this.fadeInContent(currentPage); currentPage.fadeIn(); + await this.fadeInContent(); } finish() { @@ -197,14 +195,20 @@ }, }, ], - content: ` - - `, - fadeIn() {}, + fadeIn() { + const xul = ` + + + + + + + + + `; + const fragment = window.MozXULElement.parseXULToFragment(xul); + document.getElementById('zen-welcome-page-content').appendChild(fragment); + }, fadeOut() {}, }, ]; From 0917cc82e07ce28cc0af407a7a167f6fa512a417 Mon Sep 17 00:00:00 2001 From: "mr. M" Date: Sat, 15 Feb 2025 12:33:47 +0100 Subject: [PATCH 16/48] Update zen-welcome styles and animations for improved UI transitions --- .../base/content/zen-styles/zen-welcome.css | 8 ++- .../base/zen-components/ZenWelcome.mjs | 68 +++++++++++++++---- 2 files changed, 58 insertions(+), 18 deletions(-) diff --git a/src/browser/base/content/zen-styles/zen-welcome.css b/src/browser/base/content/zen-styles/zen-welcome.css index 91984e761..decc012a1 100644 --- a/src/browser/base/content/zen-styles/zen-welcome.css +++ b/src/browser/base/content/zen-styles/zen-welcome.css @@ -105,14 +105,16 @@ align-items: center; display: flex; flex-direction: column; - gap: 1.1rem; + gap: 1.6rem; & label { opacity: 0; - transition: scale 0.2s; - padding: 1.1rem 1.3rem; + transition: scale 0.1s; + padding: 1.5rem 1.1rem; border-radius: .6rem; width: 50%; + gap: 0.8rem; + display: flex; border: 2px solid var(--zen-colors-border); box-shadow: var(--zen-big-shadow); background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1)); diff --git a/src/browser/base/zen-components/ZenWelcome.mjs b/src/browser/base/zen-components/ZenWelcome.mjs index 8e38ee806..3ab6a3a04 100644 --- a/src/browser/base/zen-components/ZenWelcome.mjs +++ b/src/browser/base/zen-components/ZenWelcome.mjs @@ -93,7 +93,7 @@ '#zen-welcome-page-sidebar-buttons button', { opacity: [0, 1], x: [50, 0], filter: ['blur(2px)', 'blur(0px)'] }, { - delay: getMotion().stagger(0.1), + delay: getMotion().stagger(0.1, { startDelay: 0.4 }), type: 'spring', bounce: 0.2, } @@ -105,7 +105,7 @@ '#zen-welcome-page-content > *', { opacity: [0, 1], scale: [0.9, 1], filter: ['blur(2px)', 'blur(0px)'] }, { - delay: getMotion().stagger(0.05, { startDelay: 0.3 }), + delay: getMotion().stagger(0.1, { startDelay: 0.3 }), type: 'spring', bounce: 0.2, } @@ -115,12 +115,11 @@ async fadeOutButtons() { await animate( '#zen-welcome-page-sidebar-buttons button', - { opacity: [1, 0], x: [0, -60], filter: ['blur(0px)', 'blur(2px)'] }, + { opacity: [1, 0], x: [0, -50], filter: ['blur(0px)', 'blur(2px)'] }, { type: 'spring', - stiffness: 300, - damping: 20, - mass: 1.4, + bounce: 0, + delay: getMotion().stagger(0.1, { startDelay: 0.4 }), } ); document.getElementById('zen-welcome-page-sidebar-buttons').innerHTML = ''; @@ -129,13 +128,25 @@ async fadeOutTitles() { await animate( - '#zen-welcome-page-content-title h1, #zen-welcome-page-content-title p', - { opacity: [1, 0], x: [0, -60], filter: ['blur(0px)', 'blur(2px)'] }, + '#zen-welcome-page-sidebar-content > *', + { opacity: [1, 0], x: [0, -50], filter: ['blur(0px)', 'blur(2px)'] }, { + delay: getMotion().stagger(0.05, { startDelay: 0.3 }), type: 'spring', - stiffness: 300, - damping: 20, - mass: 1.4, + bounce: 0, + } + ); + } + + async fadeOutContent() { + await animate( + '#zen-welcome-page-content > *', + { opacity: [1, 0], scale: [1, 0.9], filter: ['blur(0px)', 'blur(2px)'] }, + { + delay: getMotion().stagger(0.05, { startDelay: 0.3 }), + type: 'spring', + bounce: 0, + duration: 0.2 } ); } @@ -143,8 +154,12 @@ async next() { if (this._currentPage !== -1) { const previousPage = this._pages[this._currentPage]; - await this.fadeOutTitles(); - await this.fadeOutButtons(); + await Promise.all([ + this.fadeOutTitles(), + this.fadeOutButtons(), + this.fadeOutContent(), + ]); + document.getElementById('zen-welcome-page-content').innerHTML = ''; previousPage.fadeOut(); } this._currentPage++; @@ -153,8 +168,10 @@ this.finish(); return; } - await this.fadeInTitles(currentPage); - await this.fadeInButtons(currentPage); + await Promise.all([ + this.fadeInTitles(currentPage), + this.fadeInButtons(currentPage), + ]); currentPage.fadeIn(); await this.fadeInContent(); } @@ -211,6 +228,27 @@ }, fadeOut() {}, }, + { + text: [ + { + id: 'zen-welcome-start-browsing-title', + }, + { + id: 'zen-welcome-start-browsing-description-1', + }, + ], + buttons: [ + { + l10n: 'zen-welcome-start-browsing', + onclick: async () => { + return true; + }, + }, + ], + fadeIn() { + }, + fadeOut() {}, + }, ]; } From d5516fae891a0b52af3e8946933822d5e07bf657 Mon Sep 17 00:00:00 2001 From: "mr. M" Date: Sat, 15 Feb 2025 12:34:32 +0100 Subject: [PATCH 17/48] Update subproject reference in l10n to latest commit --- l10n | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/l10n b/l10n index 83464a5d3..5caffd5c4 160000 --- a/l10n +++ b/l10n @@ -1 +1 @@ -Subproject commit 83464a5d3596558a8d15c7fd7f495f61726a0f05 +Subproject commit 5caffd5c49c41336b16d5c95457922cf2522d7ed From a0da6da320242e557455f396426d77c0d08da5a3 Mon Sep 17 00:00:00 2001 From: "mr. M" Date: Sat, 15 Feb 2025 12:51:48 +0100 Subject: [PATCH 18/48] Refactor button hover styles and enhance animation effects in ZenWelcome component for improved UI responsiveness --- src/browser/base/content/zen-styles/zen-theme.css | 4 ++-- src/browser/base/content/zen-styles/zen-welcome.css | 1 + src/browser/base/zen-components/ZenWelcome.mjs | 8 ++++---- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/browser/base/content/zen-styles/zen-theme.css b/src/browser/base/content/zen-styles/zen-theme.css index e325f12d5..c93d10cd3 100644 --- a/src/browser/base/content/zen-styles/zen-theme.css +++ b/src/browser/base/content/zen-styles/zen-theme.css @@ -72,7 +72,7 @@ /* This is like the secondary button */ --in-content-button-background: transparent !important; --in-content-button-text-color: var(--zen-secondary-btn-color) !important; - --in-content-button-background-hover: color-mix(in srgb, var(--zen-primary-color) 5%, var(--zen-branding-bg) 60%) !important; + --in-content-button-background-hover: color-mix(in srgb, currentColor 3%, transparent 97%) !important; --button-bgcolor: var(--in-content-button-background) !important; --button-hover-bgcolor: var(--in-content-button-background-hover) !important; --button-hover-color: var(--in-content-button-text-color-hover) !important; @@ -88,7 +88,7 @@ --button-background-color: var(--in-content-button-background) !important; --button-background-color-hover: var(--in-content-button-background-hover) !important; - --button-background-color-active: var(--in-content-primary-button-background-active) !important; + --button-background-color-active: color-mix(in srgb, currentColor 5%, transparent 95%) !important; --color-accent-primary: var(--button-primary-bgcolor) !important; --color-accent-primary-hover: var(--button-primary-hover-bgcolor) !important; diff --git a/src/browser/base/content/zen-styles/zen-welcome.css b/src/browser/base/content/zen-styles/zen-welcome.css index decc012a1..cb5d7f395 100644 --- a/src/browser/base/content/zen-styles/zen-welcome.css +++ b/src/browser/base/content/zen-styles/zen-welcome.css @@ -118,6 +118,7 @@ border: 2px solid var(--zen-colors-border); box-shadow: var(--zen-big-shadow); background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1)); + align-items: center; &:hover { scale: 1.015; diff --git a/src/browser/base/zen-components/ZenWelcome.mjs b/src/browser/base/zen-components/ZenWelcome.mjs index 3ab6a3a04..c493c8fe8 100644 --- a/src/browser/base/zen-components/ZenWelcome.mjs +++ b/src/browser/base/zen-components/ZenWelcome.mjs @@ -62,7 +62,7 @@ + (description2 ? `${description2}` : ''); await animate( '#zen-welcome-page-sidebar-content > *', - { opacity: [0, 1], x: [50, 0], filter: ['blur(2px)', 'blur(0px)'] }, + { opacity: [0, 1], x: [100, 0], filter: ['blur(2px)', 'blur(0px)'] }, { delay: getMotion().stagger(0.05, { startDelay: 0.3 }), type: 'spring', @@ -91,7 +91,7 @@ } await animate( '#zen-welcome-page-sidebar-buttons button', - { opacity: [0, 1], x: [50, 0], filter: ['blur(2px)', 'blur(0px)'] }, + { opacity: [0, 1], x: [100, 0], filter: ['blur(2px)', 'blur(0px)'] }, { delay: getMotion().stagger(0.1, { startDelay: 0.4 }), type: 'spring', @@ -115,7 +115,7 @@ async fadeOutButtons() { await animate( '#zen-welcome-page-sidebar-buttons button', - { opacity: [1, 0], x: [0, -50], filter: ['blur(0px)', 'blur(2px)'] }, + { opacity: [1, 0], x: [0, -100], filter: ['blur(0px)', 'blur(2px)'] }, { type: 'spring', bounce: 0, @@ -129,7 +129,7 @@ async fadeOutTitles() { await animate( '#zen-welcome-page-sidebar-content > *', - { opacity: [1, 0], x: [0, -50], filter: ['blur(0px)', 'blur(2px)'] }, + { opacity: [1, 0], x: [0, -100], filter: ['blur(0px)', 'blur(2px)'] }, { delay: getMotion().stagger(0.05, { startDelay: 0.3 }), type: 'spring', From f6de1520e2563b252020a6d1cb2a821f6b182d80 Mon Sep 17 00:00:00 2001 From: "mr. M" Date: Sat, 15 Feb 2025 12:55:26 +0100 Subject: [PATCH 19/48] Remove startDelay from stagger effect in ZenWelcome component for improved animation timing --- src/browser/base/zen-components/ZenWelcome.mjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/browser/base/zen-components/ZenWelcome.mjs b/src/browser/base/zen-components/ZenWelcome.mjs index c493c8fe8..e5cbf653d 100644 --- a/src/browser/base/zen-components/ZenWelcome.mjs +++ b/src/browser/base/zen-components/ZenWelcome.mjs @@ -105,7 +105,7 @@ '#zen-welcome-page-content > *', { opacity: [0, 1], scale: [0.9, 1], filter: ['blur(2px)', 'blur(0px)'] }, { - delay: getMotion().stagger(0.1, { startDelay: 0.3 }), + delay: getMotion().stagger(0.1), type: 'spring', bounce: 0.2, } From 73d1ccb257d5bb9fe8c60d240e1a8044b62e2cf5 Mon Sep 17 00:00:00 2001 From: "mr. M" Date: Sat, 15 Feb 2025 13:01:28 +0100 Subject: [PATCH 20/48] Refactor ZenWelcome component for improved code readability and consistency --- .../base/content/zen-styles/zen-welcome.css | 2 +- .../base/zen-components/ZenWelcome.mjs | 24 +++++++------------ 2 files changed, 9 insertions(+), 17 deletions(-) diff --git a/src/browser/base/content/zen-styles/zen-welcome.css b/src/browser/base/content/zen-styles/zen-welcome.css index cb5d7f395..8478bb72b 100644 --- a/src/browser/base/content/zen-styles/zen-welcome.css +++ b/src/browser/base/content/zen-styles/zen-welcome.css @@ -111,7 +111,7 @@ opacity: 0; transition: scale 0.1s; padding: 1.5rem 1.1rem; - border-radius: .6rem; + border-radius: 0.6rem; width: 50%; gap: 0.8rem; display: flex; diff --git a/src/browser/base/zen-components/ZenWelcome.mjs b/src/browser/base/zen-components/ZenWelcome.mjs index e5cbf653d..16a998682 100644 --- a/src/browser/base/zen-components/ZenWelcome.mjs +++ b/src/browser/base/zen-components/ZenWelcome.mjs @@ -1,4 +1,3 @@ - { function clearBrowserElements() { for (const element of document.getElementById('browser').children) { @@ -58,8 +57,9 @@ async fadeInTitles(page) { const [title1, description1, description2] = await document.l10n.formatValues(page.text); const titleElement = document.getElementById('zen-welcome-page-sidebar-content'); - titleElement.innerHTML = `${title1}${description1}` - + (description2 ? `${description2}` : ''); + titleElement.innerHTML = + `${title1}${description1}` + + (description2 ? `${description2}` : ''); await animate( '#zen-welcome-page-sidebar-content > *', { opacity: [0, 1], x: [100, 0], filter: ['blur(2px)', 'blur(0px)'] }, @@ -146,7 +146,7 @@ delay: getMotion().stagger(0.05, { startDelay: 0.3 }), type: 'spring', bounce: 0, - duration: 0.2 + duration: 0.2, } ); } @@ -154,11 +154,7 @@ async next() { if (this._currentPage !== -1) { const previousPage = this._pages[this._currentPage]; - await Promise.all([ - this.fadeOutTitles(), - this.fadeOutButtons(), - this.fadeOutContent(), - ]); + await Promise.all([this.fadeOutTitles(), this.fadeOutButtons(), this.fadeOutContent()]); document.getElementById('zen-welcome-page-content').innerHTML = ''; previousPage.fadeOut(); } @@ -168,10 +164,7 @@ this.finish(); return; } - await Promise.all([ - this.fadeInTitles(currentPage), - this.fadeInButtons(currentPage), - ]); + await Promise.all([this.fadeInTitles(currentPage), this.fadeInButtons(currentPage)]); currentPage.fadeIn(); await this.fadeInContent(); } @@ -193,7 +186,7 @@ }, { id: 'zen-welcome-import-description-2', - } + }, ], buttons: [ { @@ -245,8 +238,7 @@ }, }, ], - fadeIn() { - }, + fadeIn() {}, fadeOut() {}, }, ]; From 852d9288609f39fc8259dea61f276299727ea9d6 Mon Sep 17 00:00:00 2001 From: "mr. M" Date: Sat, 15 Feb 2025 16:28:29 +0100 Subject: [PATCH 21/48] Add heart animation to ZenWelcome component and refine fade-in effects --- .../base/content/zen-styles/zen-welcome.css | 12 ++++++ .../base/zen-components/ZenWelcome.mjs | 37 ++++++++++++++++--- 2 files changed, 43 insertions(+), 6 deletions(-) diff --git a/src/browser/base/content/zen-styles/zen-welcome.css b/src/browser/base/content/zen-styles/zen-welcome.css index 8478bb72b..910662105 100644 --- a/src/browser/base/content/zen-styles/zen-welcome.css +++ b/src/browser/base/content/zen-styles/zen-welcome.css @@ -64,6 +64,18 @@ width: 40%; height: 100%; overflow: hidden; + + & #zen-welcome-heart { + width: 100%; + height: 100%; + opacity: 0; + font-size: 7em; + display: flex; + justify-content: center; + align-items: center; + color: transparent; + text-shadow: 1px 1px var(--zen-primary-color); + } } #zen-welcome-page-sidebar-buttons { diff --git a/src/browser/base/zen-components/ZenWelcome.mjs b/src/browser/base/zen-components/ZenWelcome.mjs index 16a998682..93da6c8b7 100644 --- a/src/browser/base/zen-components/ZenWelcome.mjs +++ b/src/browser/base/zen-components/ZenWelcome.mjs @@ -51,7 +51,7 @@ document.getElementById('zen-welcome-pages').style.display = 'flex'; document.getElementById('zen-welcome-start').remove(); window.maximize(); - animate('#zen-welcome-pages', { opacity: [0, 1] }); + animate('#zen-welcome-pages', { opacity: [0, 1] }, { delay: 0.1 }); } async fadeInTitles(page) { @@ -169,8 +169,33 @@ await this.fadeInContent(); } - finish() { + async finish() { + await animate('#zen-welcome-page-content', { x: [0, '100%'] }, { duration: 0.2 }); + document.getElementById('zen-welcome-page-content').remove(); + await this.animHeart(); + await animate('#zen-welcome-pages', { scale: [1, 1.01, 0], opacity: [1, 0.7, 0] }, { duration: 0.4 }); + document.getElementById('zen-welcome').remove(); document.documentElement.removeAttribute('zen-welcome-stage'); + for (const element of document.getElementById('browser').children) { + element.style.removeProperty('display'); + } + } + + async animHeart() { + const heart = document.createElement('div'); + heart.id = 'zen-welcome-heart'; + heart.textContent = '❤️'; + const sidebar = document.getElementById('zen-welcome-page-sidebar'); + sidebar.style.width = '100%'; + sidebar.appendChild(heart); + await animate( + '#zen-welcome-heart', + { opacity: [0, 1, 1, 1, 0], scale: [0.5, 1, 1.2, 1, 1.2] }, + { + duration: 1.6, + ease: 'cubic-bezier(0.23, 1, 0.32, 1)', + } + ); } } @@ -253,25 +278,25 @@ titleElement.innerHTML = `${title1}${title2}`; await animate( '#zen-welcome-title span', - { opacity: [0, 1], y: [30, 0], filter: ['blur(2px)', 'blur(0px)'] }, + { opacity: [0, 1], y: [20, 0], filter: ['blur(2px)', 'blur(0px)'] }, { delay: getMotion().stagger(0.6, { startDelay: 0.2 }), type: 'spring', stiffness: 300, damping: 20, - mass: 1.7, + mass: 1.8, } ); const button = document.getElementById('zen-welcome-start-button'); await animate( button, - { opacity: [0, 1], y: [30, 0], filter: ['blur(2px)', 'blur(0px)'] }, + { opacity: [0, 1], y: [20, 0], filter: ['blur(2px)', 'blur(0px)'] }, { delay: 0.1, type: 'spring', stiffness: 300, damping: 20, - mass: 1.7, + mass: 1.8, } ); button.addEventListener('click', async () => { From 59c559de14b6cf8f4a7e346a7a35f5ec11514abd Mon Sep 17 00:00:00 2001 From: "mr. M" Date: Sat, 15 Feb 2025 16:44:13 +0100 Subject: [PATCH 22/48] Refactor welcome screen preferences and animations for improved user experience --- src/browser/app/profile/zen-browser.js | 3 +-- src/browser/base/content/ZenStartup.mjs | 3 +-- .../base/content/zen-styles/zen-welcome.css | 18 ++++++------------ .../base/zen-components/ZenWelcome.mjs | 19 ++++++++++--------- 4 files changed, 18 insertions(+), 25 deletions(-) diff --git a/src/browser/app/profile/zen-browser.js b/src/browser/app/profile/zen-browser.js index e0d21b352..ce51f3ac9 100644 --- a/src/browser/app/profile/zen-browser.js +++ b/src/browser/app/profile/zen-browser.js @@ -75,8 +75,7 @@ pref("app.update.checkInstallTime.days", 6); // CUSTOM ZEN PREFS -pref('zen.welcome-screen.enabled', true, sticky); -pref('zen.welcome-screen.seen', false); +pref('zen.welcome-screen.seen', false, sticky); pref('zen.tabs.vertical', true); pref('zen.tabs.vertical.right-side', false); diff --git a/src/browser/base/content/ZenStartup.mjs b/src/browser/base/content/ZenStartup.mjs index 69259844b..9ae3a74cf 100644 --- a/src/browser/base/content/ZenStartup.mjs +++ b/src/browser/base/content/ZenStartup.mjs @@ -122,8 +122,7 @@ _checkForWelcomePage() { if ( - !Services.prefs.getBoolPref('zen.welcome-screen.seen', false) && - Services.prefs.getBoolPref('zen.welcome-screen.enabled', true) + !Services.prefs.getBoolPref('zen.welcome-screen.seen', false) ) { //Services.prefs.setBoolPref('zen.welcome-screen.seen', true); console.log('ZenStartup: Show welcome page'); diff --git a/src/browser/base/content/zen-styles/zen-welcome.css b/src/browser/base/content/zen-styles/zen-welcome.css index 910662105..2107a6954 100644 --- a/src/browser/base/content/zen-styles/zen-welcome.css +++ b/src/browser/base/content/zen-styles/zen-welcome.css @@ -69,12 +69,12 @@ width: 100%; height: 100%; opacity: 0; - font-size: 7em; - display: flex; - justify-content: center; - align-items: center; - color: transparent; - text-shadow: 1px 1px var(--zen-primary-color); + color: var(--zen-primary-color); + fill: var(--zen-primary-color); + background-image: url(chrome://browser/skin/zen-icons/essential-add.svg); + background-size: 15%; + background-repeat: no-repeat; + background-position: center; } } @@ -91,20 +91,14 @@ } & p { - font-size: medium; margin: 0 0 1.1rem 0; color: light-dark(rgba(0, 0, 0, 0.6), rgba(255, 255, 255, 0.6)); } - - & > * { - opacity: 0; - } } & button { justify-content: center; align-items: center; - opacity: 0; } #zen-welcome-page-content { diff --git a/src/browser/base/zen-components/ZenWelcome.mjs b/src/browser/base/zen-components/ZenWelcome.mjs index 93da6c8b7..84cd6b436 100644 --- a/src/browser/base/zen-components/ZenWelcome.mjs +++ b/src/browser/base/zen-components/ZenWelcome.mjs @@ -62,7 +62,7 @@ (description2 ? `${description2}` : ''); await animate( '#zen-welcome-page-sidebar-content > *', - { opacity: [0, 1], x: [100, 0], filter: ['blur(2px)', 'blur(0px)'] }, + { x: ['100%', 0], filter: ['blur(2px)', 'blur(0px)'] }, { delay: getMotion().stagger(0.05, { startDelay: 0.3 }), type: 'spring', @@ -91,7 +91,7 @@ } await animate( '#zen-welcome-page-sidebar-buttons button', - { opacity: [0, 1], x: [100, 0], filter: ['blur(2px)', 'blur(0px)'] }, + { x: ['100%', 0], filter: ['blur(2px)', 'blur(0px)'] }, { delay: getMotion().stagger(0.1, { startDelay: 0.4 }), type: 'spring', @@ -115,7 +115,7 @@ async fadeOutButtons() { await animate( '#zen-welcome-page-sidebar-buttons button', - { opacity: [1, 0], x: [0, -100], filter: ['blur(0px)', 'blur(2px)'] }, + { x: [0, '-100%'], filter: ['blur(0px)', 'blur(2px)'] }, { type: 'spring', bounce: 0, @@ -129,7 +129,7 @@ async fadeOutTitles() { await animate( '#zen-welcome-page-sidebar-content > *', - { opacity: [1, 0], x: [0, -100], filter: ['blur(0px)', 'blur(2px)'] }, + { x: [0, '-100%'], filter: ['blur(0px)', 'blur(2px)'] }, { delay: getMotion().stagger(0.05, { startDelay: 0.3 }), type: 'spring', @@ -170,21 +170,22 @@ } async finish() { - await animate('#zen-welcome-page-content', { x: [0, '100%'] }, { duration: 0.2 }); + await animate('#zen-welcome-page-content', { x: [0, '100%'] }, { bounce: 0 }); document.getElementById('zen-welcome-page-content').remove(); await this.animHeart(); - await animate('#zen-welcome-pages', { scale: [1, 1.01, 0], opacity: [1, 0.7, 0] }, { duration: 0.4 }); + await animate('#zen-welcome-pages', { opacity: [1, 0] }); document.getElementById('zen-welcome').remove(); document.documentElement.removeAttribute('zen-welcome-stage'); for (const element of document.getElementById('browser').children) { + element.style.opacity = 0; element.style.removeProperty('display'); } + await animate('#browser > *', { opacity: [0, 1] }); } async animHeart() { const heart = document.createElement('div'); heart.id = 'zen-welcome-heart'; - heart.textContent = '❤️'; const sidebar = document.getElementById('zen-welcome-page-sidebar'); sidebar.style.width = '100%'; sidebar.appendChild(heart); @@ -192,8 +193,8 @@ '#zen-welcome-heart', { opacity: [0, 1, 1, 1, 0], scale: [0.5, 1, 1.2, 1, 1.2] }, { - duration: 1.6, - ease: 'cubic-bezier(0.23, 1, 0.32, 1)', + duration: 1.8, + delay: 0.2, } ); } From c708d0ccf2f724ba68726433c4de697f3f5e5f0a Mon Sep 17 00:00:00 2001 From: "mr. m" Date: Sun, 16 Feb 2025 18:02:45 +0100 Subject: [PATCH 23/48] Worked more on the welcome screen --- l10n | 2 +- src/browser/base/content/ZenStartup.mjs | 4 +- .../base/content/zen-styles/zen-welcome.css | 5 ++ .../base/zen-components/ZenWelcome.mjs | 61 +++++++++++++++++-- 4 files changed, 64 insertions(+), 8 deletions(-) diff --git a/l10n b/l10n index 5caffd5c4..fc96ddf3c 160000 --- a/l10n +++ b/l10n @@ -1 +1 @@ -Subproject commit 5caffd5c49c41336b16d5c95457922cf2522d7ed +Subproject commit fc96ddf3c60ef104bc52d53d3b4a5623dd8aa0ce diff --git a/src/browser/base/content/ZenStartup.mjs b/src/browser/base/content/ZenStartup.mjs index 9ae3a74cf..adcf48f27 100644 --- a/src/browser/base/content/ZenStartup.mjs +++ b/src/browser/base/content/ZenStartup.mjs @@ -121,9 +121,7 @@ }, _checkForWelcomePage() { - if ( - !Services.prefs.getBoolPref('zen.welcome-screen.seen', false) - ) { + if (!Services.prefs.getBoolPref('zen.welcome-screen.seen', false)) { //Services.prefs.setBoolPref('zen.welcome-screen.seen', true); console.log('ZenStartup: Show welcome page'); Services.scriptloader.loadSubScript('chrome://browser/content/zen-components/ZenWelcome.mjs', window); diff --git a/src/browser/base/content/zen-styles/zen-welcome.css b/src/browser/base/content/zen-styles/zen-welcome.css index 2107a6954..6a0894d8e 100644 --- a/src/browser/base/content/zen-styles/zen-welcome.css +++ b/src/browser/base/content/zen-styles/zen-welcome.css @@ -94,11 +94,16 @@ margin: 0 0 1.1rem 0; color: light-dark(rgba(0, 0, 0, 0.6), rgba(255, 255, 255, 0.6)); } + + & > * { + opacity: 0; + } } & button { justify-content: center; align-items: center; + opacity: 0; } #zen-welcome-page-content { diff --git a/src/browser/base/zen-components/ZenWelcome.mjs b/src/browser/base/zen-components/ZenWelcome.mjs index 84cd6b436..e6a9c8a02 100644 --- a/src/browser/base/zen-components/ZenWelcome.mjs +++ b/src/browser/base/zen-components/ZenWelcome.mjs @@ -62,7 +62,7 @@ (description2 ? `${description2}` : ''); await animate( '#zen-welcome-page-sidebar-content > *', - { x: ['100%', 0], filter: ['blur(2px)', 'blur(0px)'] }, + { x: ['150%', 0], filter: ['blur(2px)', 'blur(0px)'], opacity: [0, 1] }, { delay: getMotion().stagger(0.05, { startDelay: 0.3 }), type: 'spring', @@ -91,7 +91,7 @@ } await animate( '#zen-welcome-page-sidebar-buttons button', - { x: ['100%', 0], filter: ['blur(2px)', 'blur(0px)'] }, + { x: ['150%', 0], filter: ['blur(2px)', 'blur(0px)'], opacity: [0, 1] }, { delay: getMotion().stagger(0.1, { startDelay: 0.4 }), type: 'spring', @@ -115,7 +115,7 @@ async fadeOutButtons() { await animate( '#zen-welcome-page-sidebar-buttons button', - { x: [0, '-100%'], filter: ['blur(0px)', 'blur(2px)'] }, + { x: [0, '-150%'], filter: ['blur(0px)', 'blur(2px)'], opacity: [1, 0] }, { type: 'spring', bounce: 0, @@ -129,7 +129,7 @@ async fadeOutTitles() { await animate( '#zen-welcome-page-sidebar-content > *', - { x: [0, '-100%'], filter: ['blur(0px)', 'blur(2px)'] }, + { x: [0, '-150%'], filter: ['blur(0px)', 'blur(2px)'], opacity: [1, 0] }, { delay: getMotion().stagger(0.05, { startDelay: 0.3 }), type: 'spring', @@ -247,6 +247,49 @@ }, fadeOut() {}, }, + { + text: [ + { + id: 'zen-welcome-initial-essentials-title', + }, + { + id: 'zen-welcome-initial-essentials-description-1', + }, + { + id: 'zen-welcome-initial-essentials-description-2', + }, + ], + buttons: [ + { + l10n: 'zen-welcome-next-action', + onclick: async () => { + return true; + }, + }, + ], + fadeIn() {}, + fadeOut() {}, + }, + { + text: [ + { + id: 'zen-welcome-workspace-colors-title', + }, + { + id: 'zen-welcome-workspace-colors-description', + }, + ], + buttons: [ + { + l10n: 'zen-welcome-next-action', + onclick: async () => { + return true; + }, + }, + ], + fadeIn() {}, + fadeOut() {}, + }, { text: [ { @@ -315,7 +358,17 @@ }); } + function centerWindowOnScreen() { + var xOffset = screen.availWidth / 2 - window.outerWidth / 2; + var yOffset = screen.availHeight / 2 - window.outerHeight / 2; + + xOffset = xOffset > 0 ? xOffset : 0; + yOffset = yOffset > 0 ? yOffset : 0; + window.moveTo(xOffset, yOffset); + } + function startZenWelcome() { + centerWindowOnScreen(); clearBrowserElements(); initializeZenWelcome(); animateInitialStage(); From 06e9a93d5e9703511ac3fef2ea0bc4de8f4735b4 Mon Sep 17 00:00:00 2001 From: "mr. m" Date: Sun, 16 Feb 2025 19:44:08 +0100 Subject: [PATCH 24/48] Glance will now open on any pinned tab, not just essentials --- src/browser/base/content/zen-styles/zen-panel-ui.css | 2 +- src/browser/base/zen-components/ZenGlanceManager.mjs | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/browser/base/content/zen-styles/zen-panel-ui.css b/src/browser/base/content/zen-styles/zen-panel-ui.css index 2aac0b79e..a6ac50c24 100644 --- a/src/browser/base/content/zen-styles/zen-panel-ui.css +++ b/src/browser/base/content/zen-styles/zen-panel-ui.css @@ -7,7 +7,7 @@ panel[type='arrow'][animate][animate='open']::part(content) { animation: zen-jello-animation 0.35s ease; @media (-moz-platform: macos) { - animation: zen-jello-animation-alt 0.35s ease; + animation: zen-jello-animation-alt 0.15s ease; } } diff --git a/src/browser/base/zen-components/ZenGlanceManager.mjs b/src/browser/base/zen-components/ZenGlanceManager.mjs index ba9ecb0ec..399e34690 100644 --- a/src/browser/base/zen-components/ZenGlanceManager.mjs +++ b/src/browser/base/zen-components/ZenGlanceManager.mjs @@ -462,7 +462,7 @@ let owner = tab.owner; return ( owner && - owner.getAttribute('zen-essential') === 'true' && + owner.pinned && this._lazyPref.SHOULD_OPEN_EXTERNAL_TABS_IN_GLANCE && owner.linkedBrowser?.docShellIsActive && owner.linkedBrowser?.browsingContext?.isAppTab && From 0579c7affa1b7b3679ca9e4aeac7ee064825f6c2 Mon Sep 17 00:00:00 2001 From: "mr. m" Date: Sun, 16 Feb 2025 19:45:02 +0100 Subject: [PATCH 25/48] Changed panel UI animation speend and transition function --- src/browser/base/content/zen-styles/zen-panel-ui.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/browser/base/content/zen-styles/zen-panel-ui.css b/src/browser/base/content/zen-styles/zen-panel-ui.css index a6ac50c24..7938194e7 100644 --- a/src/browser/base/content/zen-styles/zen-panel-ui.css +++ b/src/browser/base/content/zen-styles/zen-panel-ui.css @@ -7,7 +7,7 @@ panel[type='arrow'][animate][animate='open']::part(content) { animation: zen-jello-animation 0.35s ease; @media (-moz-platform: macos) { - animation: zen-jello-animation-alt 0.15s ease; + animation: zen-jello-animation-alt 0.2s ease-out; } } From 415031230cb971b58994d721b6437ff6a773cd55 Mon Sep 17 00:00:00 2001 From: "mr. M" Date: Sun, 16 Feb 2025 21:33:09 +0100 Subject: [PATCH 26/48] Refactor CSS styles for URL bar, popups, and compact mode; add grainy background effect and adjust toast animation timing --- src/browser/base/content/ZenUIManager.mjs | 2 +- .../content/navigator-toolbox-inc-xhtml.patch | 24 ++++++++++-------- .../base/content/zen-assets.jar.inc.mn | 1 + .../base/content/zen-images/grain-bg.png | Bin 0 -> 29501 bytes .../content/zen-styles/zen-browser-ui.css | 2 +- .../content/zen-styles/zen-compact-mode.css | 14 ++++++++++ .../base/content/zen-styles/zen-popup.css | 3 +++ .../base/content/zen-styles/zen-urlbar.css | 4 --- 8 files changed, 34 insertions(+), 16 deletions(-) create mode 100644 src/browser/base/content/zen-images/grain-bg.png diff --git a/src/browser/base/content/ZenUIManager.mjs b/src/browser/base/content/ZenUIManager.mjs index 82de90f62..4c6ac5ed4 100644 --- a/src/browser/base/content/ZenUIManager.mjs +++ b/src/browser/base/content/ZenUIManager.mjs @@ -246,7 +246,7 @@ var gZenUIManager = { const toast = this._createToastElement(messageId, options); this._toastContainer.removeAttribute('hidden'); this._toastContainer.appendChild(toast); - await this.motion.animate(toast, { opacity: [0, 1], scale: [0.8, 1] }, { type: 'spring', bounce: 0.4 }); + await this.motion.animate(toast, { opacity: [0, 1], scale: [0.8, 1] }, { type: 'spring', bounce: 0.5, duration: 0.5 }); await new Promise((resolve) => setTimeout(resolve, 3000)); await this.motion.animate(toast, { opacity: [1, 0], scale: [1, 0.9] }, { duration: 0.2, bounce: 0 }); const toastHeight = toast.getBoundingClientRect().height; diff --git a/src/browser/base/content/navigator-toolbox-inc-xhtml.patch b/src/browser/base/content/navigator-toolbox-inc-xhtml.patch index 0f75a3ff5..f2be3c096 100644 --- a/src/browser/base/content/navigator-toolbox-inc-xhtml.patch +++ b/src/browser/base/content/navigator-toolbox-inc-xhtml.patch @@ -1,5 +1,5 @@ diff --git a/browser/base/content/navigator-toolbox.inc.xhtml b/browser/base/content/navigator-toolbox.inc.xhtml -index a0a382643a2f74b6d789f3641ef300eed202d5e9..7a2be5fe6cdecb771ce3326008085ae402a465de 100644 +index a0a382643a2f74b6d789f3641ef300eed202d5e9..a962e155f1452362a2a35df89c8f56e1c0d9968c 100644 --- a/browser/base/content/navigator-toolbox.inc.xhtml +++ b/browser/base/content/navigator-toolbox.inc.xhtml @@ -2,7 +2,7 @@ @@ -11,16 +11,20 @@ index a0a382643a2f74b6d789f3641ef300eed202d5e9..7a2be5fe6cdecb771ce3326008085ae4