diff --git a/src/browser/base/content/contentTheme-js.patch b/src/browser/base/content/contentTheme-js.patch index e67df583..ef441f3b 100644 --- a/src/browser/base/content/contentTheme-js.patch +++ b/src/browser/base/content/contentTheme-js.patch @@ -1,8 +1,8 @@ diff --git a/browser/base/content/contentTheme.js b/browser/base/content/contentTheme.js -index d634a17c2633dc2ead40082c71622fe1b7a491a2..042c8120729f6c35ad0b49b91443a88ec6ed4fe8 100644 +index d634a17c2633dc2ead40082c71622fe1b7a491a2..73b2dedad1ccd3db43aca773f2e8bdcaa2737bda 100644 --- a/browser/base/content/contentTheme.js +++ b/browser/base/content/contentTheme.js -@@ -135,6 +135,105 @@ +@@ -135,6 +135,119 @@ lwtProperty: "sidebar_highlight_text", }, ], @@ -60,6 +60,13 @@ index d634a17c2633dc2ead40082c71622fe1b7a491a2..042c8120729f6c35ad0b49b91443a88e + lwtProperty: "button_primary_color", + } + ], ++ [ ++ "--in-content-link-color", ++ { ++ lwtProperty: "button_primary_color", ++ } ++ ], ++ + + [ + "--in-content-primary-button-text-color-hover", @@ -79,6 +86,13 @@ index d634a17c2633dc2ead40082c71622fe1b7a491a2..042c8120729f6c35ad0b49b91443a88e + lwtProperty: "button_primary_color", + } + ], ++ [ ++ "--in-content-link-color-hover", ++ { ++ lwtProperty: "button_primary_color", ++ } ++ ], ++ + + [ + "--in-content-page-background", diff --git a/src/browser/components/welcome/jar.mn b/src/browser/components/welcome/jar.mn index 599c8e77..07f410ba 100644 --- a/src/browser/components/welcome/jar.mn +++ b/src/browser/components/welcome/jar.mn @@ -9,3 +9,5 @@ browser.jar: content/browser/welcome/welcome.js (welcome.js) content/browser/welcome/migrate.light.svg (migrate.light.svg) content/browser/welcome/migrate.dark.svg (migrate.dark.svg) + content/browser/welcome/sidebar.vis.svg (sidebar.vis.svg) + content/browser/welcome/vertical.vis.svg (vertical.vis.svg) diff --git a/src/browser/components/welcome/sidebar.vis.svg b/src/browser/components/welcome/sidebar.vis.svg new file mode 100644 index 00000000..37eb9dc2 --- /dev/null +++ b/src/browser/components/welcome/sidebar.vis.svg @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/browser/components/welcome/vertical.vis.svg b/src/browser/components/welcome/vertical.vis.svg new file mode 100644 index 00000000..323d3347 --- /dev/null +++ b/src/browser/components/welcome/vertical.vis.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/browser/components/welcome/welcome.css b/src/browser/components/welcome/welcome.css index 79af1ce5..ed015793 100644 --- a/src/browser/components/welcome/welcome.css +++ b/src/browser/components/welcome/welcome.css @@ -3,6 +3,7 @@ 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/. */ + body { width: 670px; height: 504px; @@ -25,20 +26,25 @@ body { align-content: center; width: 100%; - margin: 64px; + margin: 32px; +} + +#enableFeatures .card { + width: auto; } .card h3 { - font-size: 0.75rem; - /* margin: 0; */ + margin: auto; + text-align: center; } .cardGroup { display: flex; flex-wrap: wrap; - align-items: flex-start; + align-items: stretch; gap: 8px; margin-bottom: 8px; + justify-content: center; } .cardGroup .card { @@ -46,13 +52,15 @@ body { display: flex; flex-direction: column; align-items: center; + align-content: space-between; border: 2px solid transparent; transition: all 250ms ease-in-out; margin: 0; + border-radius: 16px; } .cardGroup .card.selected { - border: 2px solid var(--in-content-item-selected); + border: 2px solid var(--in-content-primary-button-background-hover); } h2, @@ -85,7 +93,7 @@ p { } } -input[type="checkbox"] { +input[type='checkbox'] { display: inline-block; vertical-align: middle; -} \ No newline at end of file +} diff --git a/src/browser/components/welcome/welcome.html b/src/browser/components/welcome/welcome.html index d695cfce..89c56dfd 100644 --- a/src/browser/components/welcome/welcome.html +++ b/src/browser/components/welcome/welcome.html @@ -88,20 +88,19 @@

> -
-

-

- -
- - +
+

+ +
+
+ diff --git a/src/browser/components/welcome/welcome.js b/src/browser/components/welcome/welcome.js index f6cdacd5..2edf13a6 100644 --- a/src/browser/components/welcome/welcome.js +++ b/src/browser/components/welcome/welcome.js @@ -65,7 +65,10 @@ class EngineStore { } async setDefaultEngine(engine) { - await Services.search.setDefault(engine.originalEngine, Ci.nsISearchService.CHANGE_REASON_USER) + await Services.search.setDefault( + engine.originalEngine, + Ci.nsISearchService.CHANGE_REASON_USER + ) } } @@ -151,29 +154,52 @@ class Themes extends Page { } } -class Sidebar extends Page { +class Features extends Page { constructor(id) { super(id) - this.loadSidebar() - } + /** @type {HTMLDivElement} */ + this.enableFeatures = document.getElementById('enableFeatures') + + /** @type {{ l10nId: string; image: string; pref: string; }[]} */ + this.features = [ + { + l10nId: 'welcome-dialog-feature-vertical-tabs', + image: 'vertical.vis.svg', + pref: 'pulse.tabs.vertical', + }, + { + l10nId: 'welcome-dialog-feature-sidebar-tabs', + image: 'sidebar.vis.svg', + pref: 'pulse.sidebar.enabled', + }, + ] + + for (const feature of this.features) { + const container = document.createElement('div') + container.classList.add('card') + if (Services.prefs.getBoolPref(feature.pref, false)) + container.classList.add('selected') - async loadSidebar() { - this.enabled = document.getElementById('sidebarEnabled') - this.keepTabsActive = document.getElementById('sidebarKeepTabsActive') + container.addEventListener('click', () => { + const newValue = !Services.prefs.getBoolPref(feature.pref, false) + Services.prefs.setBoolPref(feature.pref, newValue) - this.enabled.addEventListener('change', () => { - //change browser preference pulse.sidebar.enabled - Services.prefs.setBoolPref('pulse.sidebar.enabled', this.enabled.checked) - }) + if (newValue) container.classList.add('selected') + else container.classList.remove('selected') + }) - this.keepTabsActive.addEventListener('change', () => { - //change browser preference pulse.sidebar.keeptabsactive.enabled - Services.prefs.setBoolPref( - 'pulse.sidebar.keeptabsactive.enabled', - this.keepTabsActive.checked - ) - }) + const img = document.createElement('img') + img.src = feature.image + + const name = document.createElement('h3') + name.setAttribute('data-l10n-id', feature.l10nId) + + container.appendChild(img) + container.appendChild(name) + + this.enableFeatures.appendChild(container) + } } } @@ -292,5 +318,5 @@ const pages = new Pages([ new Import('import'), new Themes('theme'), new Search('search'), - new Sidebar('sidebar'), + new Features('features'), ]) diff --git a/src/browser/locales/en-US/browser/welcome.ftl b/src/browser/locales/en-US/browser/welcome.ftl index b25d9a20..7cc562d9 100644 --- a/src/browser/locales/en-US/browser/welcome.ftl +++ b/src/browser/locales/en-US/browser/welcome.ftl @@ -18,11 +18,10 @@ welcome-dialog-theme-action = Continue welcome-dialog-search = Choose a search engine welcome-dialog-search-action = Next -welcome-dialog-sidebar = Choose your Sidebar Settings -welcome-dialog-sidebar-subtext = Some users like to have a sidebar, others don't. It's all up to you. -welcome-dialog-sidebar-checkbox = Enable Sidebar -welcome-dialog-sidebar-keeptabsenabled-checkbox = Keep sidebar tabs active even when closed -welcome-dialog-sidebar-action = Done +welcome-dialog-features = Enable some features +welcome-dialog-feature-vertical-tabs = Vertical Tabs +welcome-dialog-feature-sidebar-tabs = Sidebar Tabs +welcome-dialog-features-action = Finish # About Welcome Page welcome-page-description = An experimental Firefox fork that enhances focus and increases work productivity due to its hyper minimalistic UI and built-in tools