mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-10-05 09:26:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

New welcome page and logo

Browse Source
This commit is contained in:
mr. M
2024-12-07 21:12:01 +01:00
parent acdca8320b
commit 5f512db55f
54 changed files with 299 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/browser/components/BrowserGlue-sys-mjs.patch
View File

@@ -1,8 +1,8 @@
diff --git a/browser/components/BrowserGlue.sys.mjs b/browser/components/BrowserGlue.sys.mjs
index f4ea0c87a35a19c09f811576201a7adb865ed74c..89e44ab4d3b6f0ce0ecf89c4b8b484b7da5fa2ea 100644
index 2de73e75bf98b21dde9ec05213a66f9e9039200f..04ab3ea4c47d674778e8965654867c4cf0f99161 100644
--- a/browser/components/BrowserGlue.sys.mjs
+++ b/browser/components/BrowserGlue.sys.mjs
@@ -4436,6 +4436,7 @@ BrowserGlue.prototype = {
@@ -4643,6 +4643,7 @@ BrowserGlue.prototype = {
},
async _maybeShowDefaultBrowserPrompt() {
@@ -10,14 +10,14 @@ index f4ea0c87a35a19c09f811576201a7adb865ed74c..89e44ab4d3b6f0ce0ecf89c4b8b484b7
// 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.
@@ -4894,6 +4895,16 @@ BrowserGlue.prototype = {
@@ -5169,6 +5170,16 @@ BrowserGlue.prototype = {
"nsIObserver",
"nsISupportsWeakReference",
]),
+
+ _ZenMaybeShowWelcomeScreen() {
+ const welcomeEnabled = Services.prefs.getBoolPref("zen.welcomeScreen.enabled", true)
+ const welcomeSeen = Services.prefs.getBoolPref("zen.welcomeScreen.seen", false)
+ 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"

48
src/browser/components/preferences/zen-settings.js
View File

@@ -485,6 +485,9 @@ var gZenMarketplaceManager = {
},
};
const kZenExtendedSidebar = 'zen.view.sidebar-expanded';
const kZenSingleToolbar = 'zen.view.use-single-toolbar';
var gZenLooksAndFeel = {
init() {
if (this.__hasInitialized) return;
@@ -495,12 +498,57 @@ var gZenLooksAndFeel = {
gZenMarketplaceManager.init();
var onPreferColorSchemeChange = this.onPreferColorSchemeChange.bind(this);
window.matchMedia('(prefers-color-scheme: dark)').addListener(onPreferColorSchemeChange);
for (const pref of [kZenExtendedSidebar, kZenSingleToolbar]) {
Services.prefs.addObserver(pref, this);
}
this.onPreferColorSchemeChange();
window.addEventListener('unload', () => {
window.matchMedia('(prefers-color-scheme: dark)').removeListener(onPreferColorSchemeChange);
for (const pref of [kZenExtendedSidebar, kZenSingleToolbar]) {
Services.prefs.removeObserver(pref, this);
}
});
this.setDarkThemeListener();
this.setCompactModeStyle();
this.applySidebarLayout();
},
observe(subject, topic, data) {
this.applySidebarLayout();
},
applySidebarLayout() {
const isSingleToolbar = Services.prefs.getBoolPref(kZenSingleToolbar);
const isExtendedSidebar = Services.prefs.getBoolPref(kZenExtendedSidebar);
for (const layout of document.getElementById('zenLayoutList').children) {
layout.classList.remove('selected');
if (layout.getAttribute('layout') == 'single' && isSingleToolbar) {
layout.classList.add('selected');
} else if (layout.getAttribute('layout') == 'multiple' && !isSingleToolbar && isExtendedSidebar) {
layout.classList.add('selected');
} else if (layout.getAttribute('layout') == 'collapsed' && !isExtendedSidebar) {
layout.classList.add('selected');
}
}
if (this.__hasInitializedLayout) return;
this.__hasInitializedLayout = true;
for (const layout of document.getElementById('zenLayoutList').children) {
layout.addEventListener('click', () => {
if (layout.hasAttribute('disabled')) {
return;
}
for (const el of document.getElementById('zenLayoutList').children) {
el.classList.remove('selected');
}
layout.classList.add('selected');
Services.prefs.setBoolPref(kZenExtendedSidebar, layout.getAttribute('layout') != 'collapsed');
Services.prefs.setBoolPref(kZenSingleToolbar, layout.getAttribute('layout') == 'single');
});
}
},
onPreferColorSchemeChange(event) {

71
src/browser/components/preferences/zenLooksAndFeel.inc.xhtml
View File

@@ -1,6 +1,50 @@
<script src="chrome://browser/content/zen-components/ZenThemeBuilder.mjs" defer=""/>
<script src="chrome://browser/content/preferences/zen-settings.js"/>
<html:template id="template-paneZenLooks">
<hbox id="zenVerticalTabsCategory"
class="subcategory"
hidden="true"
data-category="paneZenLooks">
<html:h1 data-l10n-id="zen-vertical-tabs-title"/>
</hbox>
<groupbox id="zenVerticalTabsGroup" data-category="paneZenLooks" hidden="true" class="highlighting-group">
<label><html:h2 data-l10n-id="zen-vertical-tabs-layout-header"/></label>
<description class="description-deemphasized" data-l10n-id="zen-vertical-tabs-layout-description" />
<hbox id="zenLayoutList">
<hbox layout="single">
<html:img src="chrome://browser/content/zen-images/layouts/single-toolbar.png" />
<label data-l10n-id="zen-layout-single-toolbar"></label>
</hbox>
<hbox layout="multiple">
<html:img src="chrome://browser/content/zen-images/layouts/multiple-toolbar.png" />
<label data-l10n-id="zen-layout-multiple-toolbar"></label>
</hbox>
<hbox layout="collapsed">
<html:img src="chrome://browser/content/zen-images/layouts/collapsed.png" />
<label data-l10n-id="zen-layout-collapsed-toolbar"></label>
</hbox>
</hbox>
<label><html:h2 data-l10n-id="zen-vertical-tabs-header"/></label>
<description class="description-deemphasized" data-l10n-id="zen-vertical-tabs-description" />
<checkbox id="zenLooksAndFeelNewtabUnderLastTab"
data-l10n-id="zen-vertical-tabs-newtab-on-tab-list"
preference="zen.tabs.show-newtab-vertical"/>
<vbox class="indent">
<checkbox id="zenLooksAndFeelShowTopNewtabBorder"
data-l10n-id="zen-vertical-tabs-newtab-top-button-border"
preference="zen.view.show-newtab-button-border-top"/>
<checkbox id="zenLooksAndFeelMoveNewtabToTop"
data-l10n-id="zen-vertical-tabs-newtab-top-button-up"
preference="zen.view.show-newtab-button-top"/>
<checkbox id="zenLooksAndFeelShowBottomBorder"
data-l10n-id="zen-vertical-tabs-show-bottom-border"
preference="zen.view.show-bottom-border"/>
</vbox>
</groupbox>
<hbox id="zenLooksCategory"
class="subcategory"
hidden="true"
@@ -312,31 +356,4 @@
preference="zen.splitView.change-on-hover"/>
</groupbox>
<hbox id="zenVerticalTabsCategory"
class="subcategory"
hidden="true"
data-category="paneZenLooks">
<html:h1 data-l10n-id="zen-vertical-tabs-title"/>
</hbox>
<groupbox id="zenVerticalTabsGroup" data-category="paneZenLooks" hidden="true" class="highlighting-group">
<label><html:h2 data-l10n-id="zen-vertical-tabs-header"/></label>
<description class="description-deemphasized" data-l10n-id="zen-vertical-tabs-description" />
<checkbox id="zenLooksAndFeelNewtabUnderLastTab"
data-l10n-id="zen-vertical-tabs-newtab-on-tab-list"
preference="zen.tabs.show-newtab-vertical"/>
<vbox class="indent">
<checkbox id="zenLooksAndFeelShowTopNewtabBorder"
data-l10n-id="zen-vertical-tabs-newtab-top-button-border"
preference="zen.view.show-newtab-button-border-top"/>
<checkbox id="zenLooksAndFeelMoveNewtabToTop"
data-l10n-id="zen-vertical-tabs-newtab-top-button-up"
preference="zen.view.show-newtab-button-top"/>
<checkbox id="zenLooksAndFeelShowBottomBorder"
data-l10n-id="zen-vertical-tabs-show-bottom-border"
preference="zen.view.show-bottom-border"/>
</vbox>
</groupbox>
</html:template>

80
src/browser/components/zen-welcome/welcome.css
View File

@@ -32,19 +32,19 @@ body {
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
width: 50%;
width: fit-content;
margin: auto;
}
#welcome .zen-branding-title {
#welcome .zen-branding-title,
#thanks .zen-branding-title {
text-align: center;
font-size: 11rem;
}
#buttons-footer {
margin-top: auto;
padding: 10px;
padding: 20px 0;
width: 100%;
display: flex;
justify-content: space-between;
@@ -52,24 +52,28 @@ body {
z-index: 2;
}
body:has(#welcome:not([hidden='true'])) {
body:has(:is(#welcome, #thanks):not([hidden='true'])) {
background: var(--zen-branding-coral);
color: var(--zen-branding-paper);
& #buttons-footer {
justify-content: center;
position: fixed;
bottom: 22px;
bottom: 40px;
margin: 0 auto;
& button {
background: var(--zen-branding-paper);
color: var(--zen-branding-dark);
background: var(--zen-branding-paper) !important;
color: var(--zen-branding-dark) !important;
}
}
}
#main-view:has(#welcome:not([hidden='true'])) {
:is(#theme, #search) > div:nth-child(2) {
width: 100%;
}
#main-view:has(:is(#welcome, #thanks):not([hidden='true'])) {
width: 100%;
& #back {
@@ -80,11 +84,17 @@ body:has(#welcome:not([hidden='true'])) {
button {
padding: 8px;
border-radius: 999px;
font-size: 16px;
font-weight: 600;
}
button.primary {
background: var(--zen-branding-bg-reverse);
color: var(--zen-branding-bg);
&:hover {
background: var(--zen-branding-bg-reverse);
}
}
.page {
@@ -109,7 +119,7 @@ h2 {
justify-content: start;
}
.page-split > div:first-child {
.page-split:not(#import) > div:first-child {
margin-bottom: 20px;
}
@@ -178,7 +188,7 @@ p {
height: 42px;
width: 42px;
position: absolute;
top: 22px;
top: 40px;
left: 50%;
transform: translateX(-50%);
}
@@ -229,6 +239,46 @@ input[type='checkbox'] {
animation: fadeInRight 0.3s 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;
}
#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 fadeInRight {
from {
opacity: 0;
@@ -244,10 +294,12 @@ input[type='checkbox'] {
}
/* There should be no more than 5 elements in a page */
.page:not([hidden='true']) > *:nth-child(2) {
.page:not([hidden='true']) > *:nth-child(2),
#layoutList [layout]:nth-child(2) {
animation-delay: 0.1s;
}
.page:not([hidden='true']) > *:nth-child(3) {
.page:not([hidden='true']) > *:nth-child(3),
#layoutList [layout]:nth-child(3) {
animation-delay: 0.2s;
}
.page:not([hidden='true']) > *:nth-child(4) {
@@ -313,7 +365,7 @@ input[type='checkbox'] {
border: 3px solid light-dark(#000, #fff);
}
#welcome {
#welcome, #thanks {
justify-content: center;
}

39
src/browser/components/zen-welcome/welcome.html
View File

@@ -45,15 +45,11 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
<h1 data-l10n-id="welcome-dialog-import"></h1>
<p data-l10n-id="welcome-dialog-import-subtext"></p>
</div>
<div>
<hbox>
<button
class="primary"
id="importBrowser"
data-l10n-id="welcome-dialog-import-action"
></button>
</hbox>
</div>
<button
class="primary"
id="importBrowser"
data-l10n-id="welcome-dialog-import-action"
></button>
</div>
<div class="page page-split" id="theme">
@@ -129,6 +125,27 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
</div>
</div>
<div class="page page-split" id="layout">
<div>
<h1 data-l10n-id="welcome-dialog-layout"></h1>
<p data-l10n-id="welcome-dialog-layout-subtext"></p>
</div>
<div id="layoutList" class="cardGroup">
<hbox layout="single" class="selected">
<img src="chrome://browser/content/zen-images/layouts/single-toolbar.png" />
<p data-l10n-id="welcome-dialog-layout-single-toolbar"></p>
</hbox>
<hbox layout="multiple">
<img src="chrome://browser/content/zen-images/layouts/multiple-toolbar.png" />
<p data-l10n-id="welcome-dialog-layout-multiple-toolbar"></p>
</hbox>
<hbox layout="collapsed">
<img src="chrome://browser/content/zen-images/layouts/collapsed.png" />
<p data-l10n-id="welcome-dialog-layout-collapsed-toolbar"></p>
</hbox>
</div>
</div>
<div class="page page-split" id="search">
<div>
<h1 data-l10n-id="welcome-dialog-search"></h1>
@@ -140,8 +157,8 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
</div>
<div class="page" id="thanks">
<h1 data-l10n-id="welcome-dialog-thanks"></h1>
<p data-l10n-id="welcome-dialog-thanks-subtext"></p>
<h1 class="zen-branding-title" data-l10n-id="welcome-dialog-thanks-title-part-1"></h1>
<h1 class="zen-branding-title" data-l10n-id="welcome-dialog-thanks-title-part-2"></h1>
</div>
<div id="buttons-footer">
<button

33
src/browser/components/zen-welcome/welcome.js
View File

@@ -12,7 +12,7 @@ ChromeUtils.defineModuleGetter(this, 'ExtensionSettingsStore', 'resource://gre/m
Services.scriptloader.loadSubScript('chrome://browser/content/ZenUIManager.mjs');
const kWelcomeSeenPref = 'zen.welcomeScreen.seen';
const kWelcomeSeenPref = 'zen.welcome-screen.seen';
// =============================================================================
// Util stuff copied from browser/components/preferences/search.js
@@ -158,6 +158,36 @@ class Themes extends Page {
}
}
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);
@@ -300,6 +330,7 @@ class Pages {
const pages = new Pages([
new Page('welcome'),
new Themes('theme'),
new Layout('layout'),
new Import('import'),
new Search('search'),
new Thanks('thanks'),