mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-10-06 01:46:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Formatted the entire project

Browse Source
This commit is contained in:
mauro-balades
2024-09-09 19:36:14 +02:00
parent b0e7e8cb0d
commit 80136189b1
56 changed files with 1246 additions and 1230 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/browser/components/newtab/README.md
View File

@@ -1,9 +1,8 @@
# Checkout this documentation to build new tab assets
* [New Tab Documentation](https://firefox-source-docs.mozilla.org/browser/components/newtab/docs/index.html)
* You also need `meow@9.0.0` (that's the one I tested) because other versions might not work.
* To bundle the new tab, execute the following:
- [New Tab Documentation](https://firefox-source-docs.mozilla.org/browser/components/newtab/docs/index.html)
- You also need `meow@9.0.0` (that's the one I tested) because other versions might not work.
- To bundle the new tab, execute the following:
```
./mach npm run bundle --prefix=browser/components/newtab

3
src/browser/components/newtab/content-src/components/CustomizeMenu/_zenNewTabGlobals.scss
View File

@@ -1,5 +1,4 @@
.customize-menu[role="dialog"] {
.customize-menu[role='dialog'] {
margin: 10px;
border-radius: 7px;
height: -moz-fit-content;

20
src/browser/components/places/content/zenNewWebPanel.js
View File

@@ -3,11 +3,11 @@
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
var gZenNewWebPanel = {
init: function() {
document.addEventListener("dialogaccept", this.handleDialogAccept.bind(this));
init: function () {
document.addEventListener('dialogaccept', this.handleDialogAccept.bind(this));
},
handleURLChange: async function(aURL) {
handleURLChange: async function (aURL) {
try {
let url = new URL(aURL.value);
} catch (_) {
@@ -31,10 +31,10 @@ var gZenNewWebPanel = {
return url;
},
handleDialogAccept: async function(aEvent) {
handleDialogAccept: async function (aEvent) {
document.commandDispatcher.focusedElement?.blur();
let url = document.getElementById("zenNWP_url");
let ua = document.getElementById("zenNWP_userAgent");
let url = document.getElementById('zenNWP_url');
let ua = document.getElementById('zenNWP_userAgent');
if (!url || !ua) {
return;
}
@@ -51,12 +51,12 @@ var gZenNewWebPanel = {
url: urlValue,
ua: ua.value,
};
let currentData = JSON.parse(Services.prefs.getStringPref("zen.sidebar.data"));
let newName = "p" + new Date().getTime();
let currentData = JSON.parse(Services.prefs.getStringPref('zen.sidebar.data'));
let newName = 'p' + new Date().getTime();
currentData.index.push(newName);
currentData.data[newName] = newSite;
Services.prefs.setStringPref("zen.sidebar.data", JSON.stringify(currentData));
Services.prefs.setStringPref('zen.sidebar.data', JSON.stringify(currentData));
},
};
gZenNewWebPanel.init();
gZenNewWebPanel.init();

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

@@ -3,43 +3,43 @@
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
const kZenColors = [
"#aac7ff",
"#74d7cb",
"#a0d490",
"#dec663",
"#ffb787",
"#dec1b1",
"#ffb1c0",
"#ddbfc3",
"#f6b0ea",
"#d4bbff",
'#aac7ff',
'#74d7cb',
'#a0d490',
'#dec663',
'#ffb787',
'#dec1b1',
'#ffb1c0',
'#ddbfc3',
'#f6b0ea',
'#d4bbff',
];
const kZenOSToSmallName = {
WINNT: "windows",
Darwin: "macos",
Linux: "linux",
WINNT: 'windows',
Darwin: 'macos',
Linux: 'linux',
};
var gZenMarketplaceManager = {
var gZenMarketplaceManager = {
init() {
const checkForUpdates = document.getElementById("zenThemeMarketplaceCheckForUpdates");
const checkForUpdates = document.getElementById('zenThemeMarketplaceCheckForUpdates');
if (!checkForUpdates) return; // We havent entered the settings page yet.
if (this.__hasInitializedEvents) return;
this._buildThemesList();
this.__hasInitializedEvents = true;
Services.prefs.addObserver(this.updatePref, this);
checkForUpdates.addEventListener("click", (event) => {
checkForUpdates.addEventListener('click', (event) => {
if (event.target === checkForUpdates) {
event.preventDefault();
this._checkForThemeUpdates(event);
}
});
document.addEventListener("ZenThemeMarketplace:CheckForUpdatesFinished", (event) => {
document.addEventListener('ZenThemeMarketplace:CheckForUpdatesFinished', (event) => {
checkForUpdates.disabled = false;
const updates = event.detail.updates;
const success = document.getElementById("zenThemeMarketplaceUpdatesSuccess");
const error = document.getElementById("zenThemeMarketplaceUpdatesFailure");
const success = document.getElementById('zenThemeMarketplaceUpdatesSuccess');
const error = document.getElementById('zenThemeMarketplaceUpdatesFailure');
if (updates) {
success.hidden = false;
error.hidden = true;
@@ -48,7 +48,7 @@ var gZenMarketplaceManager = {
error.hidden = false;
}
});
window.addEventListener("unload", this.uninit.bind(this));
window.addEventListener('unload', this.uninit.bind(this));
},
uninit() {
@@ -64,11 +64,11 @@ var gZenMarketplaceManager = {
// Send a message to the child to check for theme updates.
event.target.disabled = true;
// send an event that will be listened by the child process.
document.dispatchEvent(new CustomEvent("ZenCheckForThemeUpdates"));
document.dispatchEvent(new CustomEvent('ZenCheckForThemeUpdates'));
},
get updatePref() {
return "zen.themes.updated-value-observer";
return 'zen.themes.updated-value-observer';
},
triggerThemeUpdate() {
@@ -76,27 +76,20 @@ var gZenMarketplaceManager = {
},
get themesList() {
return document.getElementById("zenThemeMarketplaceList");
return document.getElementById('zenThemeMarketplaceList');
},
get themesDataFile() {
return PathUtils.join(
PathUtils.profileDir,
"zen-themes.json"
);
return PathUtils.join(PathUtils.profileDir, 'zen-themes.json');
},
get themesRootPath() {
return PathUtils.join(
PathUtils.profileDir,
"chrome",
"zen-themes"
);
return PathUtils.join(PathUtils.profileDir, 'chrome', 'zen-themes');
},
async removeTheme(themeId) {
const themePath = PathUtils.join(this.themesRootPath, themeId);
console.info("ZenThemeMarketplaceParent(settings): Removing theme ", themePath);
console.info('ZenThemeMarketplaceParent(settings): Removing theme ', themePath);
await IOUtils.remove(themePath, { recursive: true, ignoreAbsent: true });
let themes = await this._getThemes();
@@ -126,13 +119,13 @@ var gZenMarketplaceManager = {
// [!][os:]key
let restOfPreferences = key;
let isNegation = false;
if (key.startsWith("!")) {
if (key.startsWith('!')) {
isNegation = true;
restOfPreferences = key.slice(1);
}
let os = "";
if (restOfPreferences.includes(":")) {
[os, restOfPreferences] = restOfPreferences.split(":");
let os = '';
if (restOfPreferences.includes(':')) {
[os, restOfPreferences] = restOfPreferences.split(':');
}
if (isNegation && os === this.currentOperatingSystem) {
delete preferences[key];
@@ -150,7 +143,7 @@ var gZenMarketplaceManager = {
},
async _getThemePreferences(theme) {
const themePath = PathUtils.join(this.themesRootPath, theme.id, "preferences.json");
const themePath = PathUtils.join(this.themesRootPath, theme.id, 'preferences.json');
if (!(await IOUtils.exists(themePath)) || !theme.preferences) {
return {};
}
@@ -159,9 +152,9 @@ var gZenMarketplaceManager = {
async _buildThemesList() {
if (!this.themesList) return;
console.log("ZenThemeMarketplaceParent(settings): Building themes list");
console.log('ZenThemeMarketplaceParent(settings): Building themes list');
let themes = await this._getThemes();
this.themesList.innerHTML = "";
this.themesList.innerHTML = '';
for (let theme of Object.values(themes)) {
const fragment = window.MozXULElement.parseXULToFragment(`
<hbox class="zenThemeMarketplaceItem" align="center">
@@ -172,22 +165,22 @@ var gZenMarketplaceManager = {
<button class="zenThemeMarketplaceItemUninstallButton" data-l10n-id="zen-theme-marketplace-remove-button" zen-theme-id="${theme.id}"></button>
</hbox>
`);
fragment.querySelector(".zenThemeMarketplaceItemTitle").textContent = `${theme.name} (v${theme.version || "1.0.0"})`;
fragment.querySelector(".zenThemeMarketplaceItemDescription").textContent = theme.description;
fragment.querySelector(".zenThemeMarketplaceItemUninstallButton").addEventListener("click", async (event) => {
if (!confirm("Are you sure you want to remove this theme?")) {
fragment.querySelector('.zenThemeMarketplaceItemTitle').textContent = `${theme.name} (v${theme.version || '1.0.0'})`;
fragment.querySelector('.zenThemeMarketplaceItemDescription').textContent = theme.description;
fragment.querySelector('.zenThemeMarketplaceItemUninstallButton').addEventListener('click', async (event) => {
if (!confirm('Are you sure you want to remove this theme?')) {
return;
}
const target = event.target;
const themeId = target.getAttribute("zen-theme-id");
const themeId = target.getAttribute('zen-theme-id');
await this.removeTheme(themeId);
});
this.themesList.appendChild(fragment);
const preferences = await this._getThemePreferences(theme);
if (Object.keys(preferences).length > 0) {
let preferencesWrapper = document.createXULElement("vbox");
preferencesWrapper.classList.add("indent");
preferencesWrapper.classList.add("zenThemeMarketplaceItemPreferences");
let preferencesWrapper = document.createXULElement('vbox');
preferencesWrapper.classList.add('indent');
preferencesWrapper.classList.add('zenThemeMarketplaceItemPreferences');
for (let [key, value] of Object.entries(preferences)) {
const fragment = window.MozXULElement.parseXULToFragment(`
<hbox class="zenThemeMarketplaceItemPreference">
@@ -200,16 +193,16 @@ var gZenMarketplaceManager = {
`);
// Checkbox only works with "true" and "false" values, it's not like HTML checkboxes.
if (Services.prefs.getBoolPref(key, false)) {
fragment.querySelector(".zenThemeMarketplaceItemPreferenceCheckbox").setAttribute("checked", "true");
fragment.querySelector('.zenThemeMarketplaceItemPreferenceCheckbox').setAttribute('checked', 'true');
}
fragment.querySelector(".zenThemeMarketplaceItemPreferenceCheckbox").addEventListener("click", (event) => {
let target = event.target.closest(".zenThemeMarketplaceItemPreferenceCheckbox");
let key = target.getAttribute("zen-pref");
let checked = target.hasAttribute("checked");
fragment.querySelector('.zenThemeMarketplaceItemPreferenceCheckbox').addEventListener('click', (event) => {
let target = event.target.closest('.zenThemeMarketplaceItemPreferenceCheckbox');
let key = target.getAttribute('zen-pref');
let checked = target.hasAttribute('checked');
if (!checked) {
target.removeAttribute("checked");
target.removeAttribute('checked');
} else {
target.setAttribute("checked", "true");
target.setAttribute('checked', 'true');
}
Services.prefs.setBoolPref(key, !checked);
});
@@ -218,7 +211,7 @@ var gZenMarketplaceManager = {
this.themesList.appendChild(preferencesWrapper);
}
}
}
},
};
var gZenLooksAndFeel = {
@@ -229,51 +222,44 @@ var gZenLooksAndFeel = {
gZenThemeBuilder.init();
gZenMarketplaceManager.init();
var onLegacyToolbarChange = this.onLegacyToolbarChange.bind(this);
Services.prefs.addObserver("zen.themes.tabs.legacy-location", onLegacyToolbarChange);
window.addEventListener("unload", () => {
Services.prefs.removeObserver("zen.themes.tabs.legacy-location", onLegacyToolbarChange);
Services.prefs.addObserver('zen.themes.tabs.legacy-location', onLegacyToolbarChange);
window.addEventListener('unload', () => {
Services.prefs.removeObserver('zen.themes.tabs.legacy-location', onLegacyToolbarChange);
});
},
async onLegacyToolbarChange(event) {
let buttonIndex = await confirmRestartPrompt(
true,
1,
true,
false
);
let buttonIndex = await confirmRestartPrompt(true, 1, true, false);
if (buttonIndex == CONFIRM_RESTART_PROMPT_RESTART_NOW) {
Services.startup.quit(
Ci.nsIAppStartup.eAttemptQuit | Ci.nsIAppStartup.eRestart
);
Services.startup.quit(Ci.nsIAppStartup.eAttemptQuit | Ci.nsIAppStartup.eRestart);
return;
}
},
_initializeTabbarExpandForm() {
const form = document.getElementById("zen-expand-tabbar-strat");
const radios = form.querySelectorAll("input[type=radio]");
const onHoverPref = "zen.view.sidebar-expanded.on-hover";
const defaultExpandPref = "zen.view.sidebar-expanded";
const form = document.getElementById('zen-expand-tabbar-strat');
const radios = form.querySelectorAll('input[type=radio]');
const onHoverPref = 'zen.view.sidebar-expanded.on-hover';
const defaultExpandPref = 'zen.view.sidebar-expanded';
if (Services.prefs.getBoolPref(onHoverPref)) {
form.querySelector("input[value=\"hover\"]").checked = true;
form.querySelector('input[value="hover"]').checked = true;
} else if (Services.prefs.getBoolPref(defaultExpandPref)) {
form.querySelector("input[value=\"expand\"]").checked = true;
form.querySelector('input[value="expand"]').checked = true;
} else {
form.querySelector("input[value=\"none\"]").checked = true;
form.querySelector('input[value="none"]').checked = true;
}
for (let radio of radios) {
radio.addEventListener("change", e => {
radio.addEventListener('change', (e) => {
switch (e.target.value) {
case "expand":
case 'expand':
Services.prefs.setBoolPref(onHoverPref, false);
Services.prefs.setBoolPref(defaultExpandPref, true);
break;
case "none":
case 'none':
Services.prefs.setBoolPref(onHoverPref, false);
Services.prefs.setBoolPref(defaultExpandPref, false);
break;
case "hover":
case 'hover':
Services.prefs.setBoolPref(onHoverPref, true);
Services.prefs.setBoolPref(defaultExpandPref, true);
break;
@@ -283,19 +269,19 @@ var gZenLooksAndFeel = {
},
_initializeColorPicker(accentColor) {
let elem = document.getElementById("zenLooksAndFeelColorOptions");
elem.innerHTML = "";
let elem = document.getElementById('zenLooksAndFeelColorOptions');
elem.innerHTML = '';
for (let color of kZenColors) {
let colorElemParen = document.createElement("div");
let colorElem = document.createElement("div");
colorElemParen.classList.add("zenLooksAndFeelColorOptionParen");
colorElem.classList.add("zenLooksAndFeelColorOption");
colorElem.style.setProperty("--zen-primary-color", color, "important");
let colorElemParen = document.createElement('div');
let colorElem = document.createElement('div');
colorElemParen.classList.add('zenLooksAndFeelColorOptionParen');
colorElem.classList.add('zenLooksAndFeelColorOption');
colorElem.style.setProperty('--zen-primary-color', color, 'important');
if (accentColor === color) {
colorElemParen.setAttribute("selected", "true");
colorElemParen.setAttribute('selected', 'true');
}
colorElemParen.addEventListener("click", () => {
Services.prefs.setStringPref("zen.theme.accent-color", color);
colorElemParen.addEventListener('click', () => {
Services.prefs.setStringPref('zen.theme.accent-color', color);
});
colorElemParen.appendChild(colorElem);
elem.appendChild(colorElemParen);
@@ -308,38 +294,31 @@ var gZenLooksAndFeel = {
},
_getInitialAccentColor() {
return Services.prefs.getStringPref("zen.theme.accent-color", kZenColors[0]);
return Services.prefs.getStringPref('zen.theme.accent-color', kZenColors[0]);
},
};
var gZenWorkspacesSettings = {
init() {
Services.prefs.addObserver("zen.workspaces.enabled", this);
window.addEventListener("unload", () => {
Services.prefs.removeObserver("zen.workspaces.enabled", this);
Services.prefs.addObserver('zen.workspaces.enabled', this);
window.addEventListener('unload', () => {
Services.prefs.removeObserver('zen.workspaces.enabled', this);
});
},
async observe(subject, topic, data) {
await this.onWorkspaceChange(Services.prefs.getBoolPref("zen.workspaces.enabled"));
await this.onWorkspaceChange(Services.prefs.getBoolPref('zen.workspaces.enabled'));
},
async onWorkspaceChange(checked) {
if (checked) {
let buttonIndex = await confirmRestartPrompt(
true,
1,
true,
false
);
let buttonIndex = await confirmRestartPrompt(true, 1, true, false);
if (buttonIndex == CONFIRM_RESTART_PROMPT_RESTART_NOW) {
Services.startup.quit(
Ci.nsIAppStartup.eAttemptQuit | Ci.nsIAppStartup.eRestart
);
Services.startup.quit(Ci.nsIAppStartup.eAttemptQuit | Ci.nsIAppStartup.eRestart);
return;
}
}
}
},
};
var gZenCKSSettings = {
@@ -348,13 +327,13 @@ var gZenCKSSettings = {
this._initializeEvents();
this._initializeCKS();
this._addPrefObservers();
window.addEventListener("unload", () => {
Services.prefs.removeObserver("zen.keyboard.shortcuts.disable-firefox", this);
window.addEventListener('unload', () => {
Services.prefs.removeObserver('zen.keyboard.shortcuts.disable-firefox', this);
});
},
_addPrefObservers() {
Services.prefs.addObserver("zen.keyboard.shortcuts.disable-firefox", this);
Services.prefs.addObserver('zen.keyboard.shortcuts.disable-firefox', this);
},
observe(subject, topic, data) {
@@ -362,32 +341,25 @@ var gZenCKSSettings = {
},
async onDisableFirefoxShortcutsChange(event) {
let checked = Services.prefs.getBoolPref("zen.keyboard.shortcuts.disable-firefox");
let checked = Services.prefs.getBoolPref('zen.keyboard.shortcuts.disable-firefox');
if (checked) return;
let buttonIndex = await confirmRestartPrompt(
true,
1,
true,
false
);
let buttonIndex = await confirmRestartPrompt(true, 1, true, false);
if (buttonIndex == CONFIRM_RESTART_PROMPT_RESTART_NOW) {
Services.startup.quit(
Ci.nsIAppStartup.eAttemptQuit | Ci.nsIAppStartup.eRestart
);
Services.startup.quit(Ci.nsIAppStartup.eAttemptQuit | Ci.nsIAppStartup.eRestart);
return;
}
},
_initializeCKS() {
let wrapepr = document.getElementById("zenCKSOptions-wrapper");
let wrapepr = document.getElementById('zenCKSOptions-wrapper');
// Create the groups first.
for (let key in kZKSActions) {
const data = kZKSActions[key];
const group = data[2];
if (!wrapepr.querySelector(`[data-group="${group}"]`)) {
let groupElem = document.createElement("h2");
groupElem.setAttribute("data-group", group);
let groupElem = document.createElement('h2');
groupElem.setAttribute('data-group', group);
document.l10n.setAttributes(groupElem, `zen-cks-group-${group}`);
wrapepr.appendChild(groupElem);
}
@@ -405,9 +377,9 @@ var gZenCKSSettings = {
<html:input readonly="1" class="zenCKSOption-input" id="zenCKSOption-${key}" />
</hbox>
`);
document.l10n.setAttributes(fragment.querySelector(".zenCKSOption-label"), l10nId);
document.l10n.setAttributes(fragment.querySelector('.zenCKSOption-label'), l10nId);
let input = fragment.querySelector(".zenCKSOption-input");
let input = fragment.querySelector('.zenCKSOption-input');
let shortcut = gZenKeyboardShortcuts.getShortcut(key);
if (shortcut) {
input.value = gZenKeyboardShortcuts.shortCutToString(shortcut);
@@ -415,16 +387,16 @@ var gZenCKSSettings = {
this._resetCKS(input, key);
}
input.setAttribute("data-key", key);
input.addEventListener("focus", (event) => {
const key = event.target.getAttribute("data-key");
input.setAttribute('data-key', key);
input.addEventListener('focus', (event) => {
const key = event.target.getAttribute('data-key');
this._currentAction = key;
event.target.classList.add("zenCKSOption-input-editing");
event.target.classList.add('zenCKSOption-input-editing');
});
input.addEventListener("blur", (event) => {
input.addEventListener('blur', (event) => {
this._currentAction = null;
event.target.classList.remove("zenCKSOption-input-editing");
event.target.classList.remove('zenCKSOption-input-editing');
});
const groupElem = wrapepr.querySelector(`[data-group="${group}"]`);
@@ -433,14 +405,14 @@ var gZenCKSSettings = {
},
_resetCKS(input, key) {
input.value = "Not set";
input.classList.add("zenCKSOption-input-not-set");
input.classList.remove("zenCKSOption-input-invalid");
input.value = 'Not set';
input.classList.add('zenCKSOption-input-not-set');
input.classList.remove('zenCKSOption-input-invalid');
gZenKeyboardShortcuts.setShortcut(key, null);
},
_initializeEvents() {
window.addEventListener("keydown", this._handleKeyDown.bind(this));
window.addEventListener('keydown', this._handleKeyDown.bind(this));
},
_handleKeyDown(event) {
@@ -453,18 +425,18 @@ var gZenCKSSettings = {
ctrl: event.ctrlKey,
alt: event.altKey,
shift: event.shiftKey,
meta: event.metaKey
meta: event.metaKey,
};
const shortcutWithoutModifiers = !shortcut.ctrl && !shortcut.alt && !shortcut.shift && !shortcut.meta;
if (event.key === "Tab" && shortcutWithoutModifiers) {
if (event.key === 'Tab' && shortcutWithoutModifiers) {
return;
} else if (event.key === "Escape" && shortcutWithoutModifiers) {
} else if (event.key === 'Escape' && shortcutWithoutModifiers) {
this._currentAction = null;
input.blur();
return;
} else if (event.key === "Backspace" && shortcutWithoutModifiers) {
} else if (event.key === 'Backspace' && shortcutWithoutModifiers) {
this._resetCKS(input, this._currentAction);
return;
}
@@ -474,7 +446,7 @@ var gZenCKSSettings = {
return; // No modifiers, ignore.
}
if (!(["Control", "Alt", "Meta", "Shift"].includes(event.key))) {
if (!['Control', 'Alt', 'Meta', 'Shift'].includes(event.key)) {
if (event.keycode) {
shortcut.keycode = event.keycode;
} else {
@@ -486,75 +458,75 @@ var gZenCKSSettings = {
gZenKeyboardShortcuts.setShortcut(this._currentAction, shortcut);
input.value = gZenKeyboardShortcuts.shortCutToString(shortcut);
input.classList.remove("zenCKSOption-input-not-set");
input.classList.remove('zenCKSOption-input-not-set');
if (gZenKeyboardShortcuts.isValidShortcut(shortcut)) {
input.classList.remove("zenCKSOption-input-invalid");
input.classList.remove('zenCKSOption-input-invalid');
} else {
input.classList.add("zenCKSOption-input-invalid");
input.classList.add('zenCKSOption-input-invalid');
}
},
};
Preferences.addAll([
{
id: "zen.theme.toolbar-themed",
type: "bool",
id: 'zen.theme.toolbar-themed',
type: 'bool',
default: true,
},
{
id: "zen.sidebar.enabled",
type: "bool",
id: 'zen.sidebar.enabled',
type: 'bool',
default: true,
},
{
id: "zen.sidebar.close-on-blur",
type: "bool",
id: 'zen.sidebar.close-on-blur',
type: 'bool',
default: true,
},
{
id: "zen.view.compact",
type: "bool",
id: 'zen.view.compact',
type: 'bool',
default: false,
},
{
id: "zen.view.compact.hide-toolbar",
type: "bool",
id: 'zen.view.compact.hide-toolbar',
type: 'bool',
default: false,
},
{
id: "zen.view.compact.toolbar-flash-popup",
type: "bool",
id: 'zen.view.compact.toolbar-flash-popup',
type: 'bool',
default: true,
},
{
id: "zen.workspaces.enabled",
type: "bool",
id: 'zen.workspaces.enabled',
type: 'bool',
default: true,
},
{
id: "zen.view.sidebar-expanded.show-button",
type: "bool",
id: 'zen.view.sidebar-expanded.show-button',
type: 'bool',
default: true,
},
{
id: "zen.view.sidebar-expanded",
type: "bool",
id: 'zen.view.sidebar-expanded',
type: 'bool',
default: true,
},
{
id: "zen.theme.pill-button",
type: "bool",
id: 'zen.theme.pill-button',
type: 'bool',
default: true,
},
{
id: "zen.keyboard.shortcuts.disable-firefox",
type: "bool",
id: 'zen.keyboard.shortcuts.disable-firefox',
type: 'bool',
default: false,
},
{
id: "zen.themes.tabs.legacy-location",
type: "bool",
id: 'zen.themes.tabs.legacy-location',
type: 'bool',
default: false,
}
},
]);

1
src/browser/components/zen-welcome/IMPORTANT.md
View File

@@ -1,4 +1,3 @@
# Important notes!
Inside browser.js, we hardcoded-ly detect the path name for `zen-welcome` so we can add special attributes to the welcom page. If this path name changes, the welcome page will not work properly.

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

@@ -14,7 +14,6 @@ html {
}
body {
display: flex;
position: relative;
width: 100%;
@@ -30,24 +29,32 @@ body {
--zen-gradient-background: var(--zen-colors-tertiary);
--zen-gradient-border: #fbffbe;
&::before, &::after {
content: "";
&::before,
&::after {
content: '';
position: absolute;
top: 0; left: 0;
top: 0;
left: 0;
z-index: -1;
display: block;
width: 100%;
height: 100%;
}
&::before {
background: radial-gradient(circle at 50%, var(--zen-gradient-background) 20%, var(--zen-gradient-color) 60%);
mask: var(--noise), radial-gradient(circle at 50%, transparent 20%, light-dark(#000, #fff) (60% + 10%));
}
&::after {
mask-image: var(--noise), linear-gradient(45deg, #000 0%, transparent 25%, transparent 75%, #000 100%);
background: linear-gradient(45deg, #6d6dff 10%, var(--zen-gradient-background) 25%, var(--zen-gradient-background) 75%, var(--zen-gradient-border) 90%);
background: linear-gradient(
45deg,
#6d6dff 10%,
var(--zen-gradient-background) 25%,
var(--zen-gradient-background) 75%,
var(--zen-gradient-border) 90%
);
}
}
@@ -112,7 +119,7 @@ h2 {
line-height: 1;
}
.page-split:not([hidden="true"]) {
.page-split:not([hidden='true']) {
flex-direction: column;
margin: auto;
justify-content: start;
@@ -127,7 +134,7 @@ h2 {
text-align: center;
}
#theme .card[disabled="true"] {
#theme .card[disabled='true'] {
opacity: 0.7;
cursor: not-allowed;
}
@@ -147,7 +154,7 @@ h2 {
align-items: center;
align-content: space-between;
border: 2px solid var(--arrowpanel-border-color) !important;
transition: all .1s ease-in-out !important;
transition: all 0.1s ease-in-out !important;
margin: 0 10px;
border-radius: 7px;
outline: none !important;
@@ -222,15 +229,15 @@ input[type='checkbox'] {
margin-top: 20px;
}
.page[hidden="true"] {
.page[hidden='true'] {
display: none;
}
.page:not([hidden="true"]) {
.page:not([hidden='true']) {
display: flex;
}
.page:not([hidden="true"]) > * {
.page:not([hidden='true']) > * {
opacity: 0;
animation: fadeInRight 0.3s ease-in-out forwards;
}
@@ -250,10 +257,18 @@ input[type='checkbox'] {
}
/* There should be no more than 5 elements in a page */
.page:not([hidden="true"]) > *:nth-child(2) { animation-delay: 0.1s; }
.page:not([hidden="true"]) > *:nth-child(3) { animation-delay: 0.2s; }
.page:not([hidden="true"]) > *:nth-child(4) { animation-delay: 0.3s; }
.page:not([hidden="true"]) > *:nth-child(5) { animation-delay: 0.4s; }
.page:not([hidden='true']) > *:nth-child(2) {
animation-delay: 0.1s;
}
.page:not([hidden='true']) > *:nth-child(3) {
animation-delay: 0.2s;
}
.page:not([hidden='true']) > *:nth-child(4) {
animation-delay: 0.3s;
}
.page:not([hidden='true']) > *:nth-child(5) {
animation-delay: 0.4s;
}
.card h3 {
margin-top: 10px;

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

@@ -1,86 +1,76 @@
// 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'
)
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'
);
ChromeUtils.defineModuleGetter(this, 'ExtensionSettingsStore', 'resource://gre/modules/ExtensionSettingsStore.jsm');
Services.scriptloader.loadSubScript("chrome://browser/content/ZenUIManager.mjs");
Services.scriptloader.loadSubScript('chrome://browser/content/ZenUIManager.mjs');
const kWelcomeSeenPref = 'zen.welcomeScreen.seen'
const kWelcomeSeenPref = 'zen.welcomeScreen.seen';
// =============================================================================
// Util stuff copied from browser/components/preferences/search.js
class EngineStore {
constructor() {
this._engines = []
this._engines = [];
}
async init() {
const visibleEngines = await Services.search.getVisibleEngines()
this.initSpecificEngine(visibleEngines)
const visibleEngines = await Services.search.getVisibleEngines();
this.initSpecificEngine(visibleEngines);
}
getEngine() {
return this._engines
return this._engines;
}
initSpecificEngine(engines) {
for (const engine of engines) {
try {
this._engines.push(this._cloneEngine(engine))
this._engines.push(this._cloneEngine(engine));
} catch (e) {
// Ignore engines that throw an exception when cloning.
console.error(e)
console.error(e);
}
}
}
getEngineByName(name) {
return this._engines.find((engine) => engine.name == name)
return this._engines.find((engine) => engine.name == name);
}
_cloneEngine(aEngine) {
const clonedObj = {}
const clonedObj = {};
for (const i of ['name', 'alias', '_iconURI', 'hidden']) {
clonedObj[i] = aEngine[i]
clonedObj[i] = aEngine[i];
}
clonedObj.originalEngine = aEngine
clonedObj.originalEngine = aEngine;
return clonedObj
return clonedObj;
}
async getDefaultEngine() {
let engineName = await Services.search.getDefault()
return this.getEngineByName(engineName._name)
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
)
await Services.search.setDefault(engine.originalEngine, Ci.nsISearchService.CHANGE_REASON_USER);
}
}
// =============================================================================
const sleep = (duration) =>
new Promise((resolve) => setTimeout(resolve, duration))
const sleep = (duration) => new Promise((resolve) => setTimeout(resolve, duration));
class Page {
/**
@@ -88,7 +78,7 @@ class Page {
* @param {string} id The id of the element that represents this page.
*/
constructor(id) {
this.element = document.getElementById(id)
this.element = document.getElementById(id);
}
/**
@@ -96,78 +86,81 @@ class Page {
* @param {Pages} pages The pages wrapper
*/
setPages(pages) {
this.pages = pages
this.pages = pages;
}
hide() {
this.element.setAttribute('hidden', 'true')
this.element.setAttribute('hidden', 'true');
}
show() {
this.element.removeAttribute('hidden')
this.element.removeAttribute('hidden');
}
}
class Themes extends Page {
constructor(id) {
super(id)
this.loadThemes()
super(id);
this.loadThemes();
}
async loadThemes() {
window.addEventListener('DOMContentLoaded', this.setColorBar);
await sleep(1000)
await sleep(1000);
const themes = (await AddonManager.getAddonsByTypes(['theme'])).filter(
(theme) => theme.id !== "default-theme@mozilla.org"
)
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"];
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));
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')
container.classList.add('selected');
}
})
});
}
setColorBar() {
const colorList = document.getElementById('colorListWrapper');
const colors = ['#aac7ff', '#74d7cb', '#a0d490', '#dec663', '#ffb787',
'#ffb1c0', '#ddbfc3', '#f6b0ea', '#d4bbff']
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))
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)
colorList.appendChild(container);
});
}
}
class Thanks extends Page {
constructor(id) {
super(id)
super(id);
// Thanks :)
}
@@ -175,28 +168,28 @@ class Thanks extends Page {
class Search extends Page {
constructor(id) {
super(id)
super(id);
this.store = new EngineStore()
this.searchList = []
this.store = new EngineStore();
this.searchList = [];
this.loadSearch()
this.loadSearch();
}
async loadSearch() {
await sleep(1100)
await this.store.init()
await sleep(1100);
await this.store.init();
const defaultEngine = await Services.search.getDefault()
const defaultEngine = await Services.search.getDefault();
const searchElements = document.getElementById('searchList')
const searchElements = document.getElementById('searchList');
this.store.getEngine().forEach(async (search) => {
const container = await this.loadSpecificSearch(search, defaultEngine)
const container = await this.loadSpecificSearch(search, defaultEngine);
searchElements.appendChild(container)
this.searchList.push(container)
})
searchElements.appendChild(container);
this.searchList.push(container);
});
}
/**
@@ -204,42 +197,42 @@ class Search extends Page {
*/
async loadSpecificSearch(search, defaultSearch) {
const container = document.createElement('div');
container.classList.add('card')
container.classList.add('card-no-hover')
container.classList.add('card');
container.classList.add('card-no-hover');
if (search.name == defaultSearch._name) {
container.classList.add('selected')
container.classList.add('selected');
}
container.addEventListener('click', () => {
this.searchList.forEach((el) => el.classList.remove('selected'))
container.classList.add('selected')
this.store.setDefaultEngine(search)
})
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
const name = document.createElement('h3');
name.textContent = search.name;
container.appendChild(img)
container.appendChild(name)
container.appendChild(img);
container.appendChild(name);
return container
return container;
}
}
class Import extends Page {
constructor(id) {
super(id)
super(id);
const importButton = document.getElementById('importBrowser')
const importButton = document.getElementById('importBrowser');
importButton.addEventListener('click', async () => {
MigrationUtils.showMigrationWizard(window, {
zenBlocking: true,
});
})
});
}
}
@@ -249,62 +242,62 @@ class Pages {
* @param {Page[]} pages The pages
*/
constructor(pages) {
console.info("Initializing welcome pages...");
this.pages = pages
console.info('Initializing welcome pages...');
this.pages = pages;
this.currentPage = 0;
window.maximize();
window.maximize();
this.pages.forEach((page) => page.setPages(this))
this.pages.forEach((page) => page.setPages(this));
this._displayCurrentPage();
console.info("Welcome pages initialized.")
console.info('Welcome pages initialized.');
this.nextEl = document.getElementById(`next`)
this.prevEl = document.getElementById(`back`)
this.nextEl = document.getElementById(`next`);
this.prevEl = document.getElementById(`back`);
this.nextEl.addEventListener('click', () => {
this.next()
this.prevEl.removeAttribute('disabled')
})
this.next();
this.prevEl.removeAttribute('disabled');
});
this.prevEl.addEventListener('click', () => {
this.currentPage--
this._displayCurrentPage()
this.currentPage--;
this._displayCurrentPage();
if (this.pages.currentPage === 1) {
this.prevEl.setAttribute('disabled', 'true')
this.prevEl.setAttribute('disabled', 'true');
}
});
}
next() {
this.currentPage++
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)
Services.prefs.setBoolPref(kWelcomeSeenPref, true);
close();
return
return;
}
this._displayCurrentPage()
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()
page.hide();
}
if (this.currentPage >= 1) {
document.body.classList.remove('gradient-background')
document.body.classList.remove('gradient-background');
} else {
document.body.classList.add('gradient-background')
document.body.classList.add('gradient-background');
}
this.pages[this.currentPage].show()
this.pages[this.currentPage].show();
}
}
@@ -314,4 +307,4 @@ const pages = new Pages([
new Import('import'),
new Search('search'),
new Thanks('thanks'),
])
]);