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

Added huge UI changes

Browse Source
This commit is contained in:
Mauro Balades
2024-04-21 02:23:18 +02:00
parent 89810a0be9
commit f02af579bd
20 changed files with 264 additions and 566 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@@ -4,3 +4,5 @@ engine/
firefox-*/
node_modules/
.gluon/
__pycache__/

7
init-browser.py
View File

@@ -1,16 +1,13 @@
import os
from update_newtab import update_newtab
def initialize_avatars():
os.system("cd src/browser/base/content/zen-avatars && python3 fetch-all-avatars.py")
def recompile_new_tab():
os.system("(cd ./engine/browser/components/newtab && ../../../mach npm install && ../../../mach npm install meow@9.0.0)")
os.system("cd ./engine && ./mach npm run bundle --prefix=browser/components/newtab")
def main():
initialize_avatars()
recompile_new_tab()
update_newtab()
if __name__ == "__main__":
main()

3
package.json
View File

@@ -7,7 +7,8 @@
"start": "cd engine && ./mach run --noprofile",
"import": "gluon import",
"export": "gluon export",
"init": "python3 init-browser.py"
"init": "python3 init-browser.py",
"update-newtab": "python3 update_newtab.py"
},
"repository": {
"type": "git",

2
src/browser/app/profile/zen-browser.js
View File

@@ -27,6 +27,7 @@ pref(
pref('browser.preferences.moreFromMozilla', false);
pref('browser.aboutwelcome.enabled', true);
pref("browser.aboutwelcome.showModal", false);
pref('browser.translations.select.enable', true);
// Theme
pref('toolkit.legacyUserProfileCustomizations.stylesheets', true);
@@ -102,6 +103,7 @@ pref('zen.welcomeScreen.enabled', true);
pref('zen.welcomeScreen.seen', false);
pref('zen.tabs.vertical', true);
pref('zen.theme.accent-color', "#aac7ff");
pref('zen.theme.panel-separation', 7);
// From: https://github.com/yokoffing/Betterfox

16
src/browser/base/content/browser-box-inc-xhtml.patch
View File

@@ -1,8 +1,8 @@
diff --git a/browser/base/content/browser-box.inc.xhtml b/browser/base/content/browser-box.inc.xhtml
index d445abe7e743b2ec5d46d42f8f149c000e3c7997..c45459f1ae13190c5a508def867159d52cc6c1e1 100644
index d445abe7e743b2ec5d46d42f8f149c000e3c7997..9ef4a0be1dbfc8fd50b57118b59304ef34597364 100644
--- a/browser/base/content/browser-box.inc.xhtml
+++ b/browser/base/content/browser-box.inc.xhtml
@@ -2,22 +2,11 @@
@@ -2,27 +2,18 @@
# 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/.
@@ -24,14 +24,18 @@ index d445abe7e743b2ec5d46d42f8f149c000e3c7997..c45459f1ae13190c5a508def867159d5
+<vbox id="browser">
<vbox id="appcontent" flex="1">
+
+#include zen-browser-box-ui.inc.xhtml
+ <html:div id="zen-appcontent-navbar-container"></html:div>
+
<!-- gNotificationBox will be added here lazily. -->
<tabbox id="tabbrowser-tabbox"
- <tabbox id="tabbrowser-tabbox"
+ <hbox id="zen-tabbox-wrapper" flex="1">
+ <tabbox id="tabbrowser-tabbox"
flex="1" tabcontainer="tabbrowser-tabs">
@@ -25,4 +14,4 @@
<tabpanels id="tabbrowser-tabpanels"
flex="1" selectedIndex="0"/>
</tabbox>
- </tabbox>
+ </tabbox>
+ </hbox>
</vbox>
-</hbox>
+</vbox>

18
src/browser/base/content/browser-js.patch
View File

@@ -1,5 +1,5 @@
diff --git a/browser/base/content/browser.js b/browser/base/content/browser.js
index 4f145c494973374e87f3a3ed5eb6b33a43c518c8..01ebb483e6d9632588578b8b05195250ca26968a 100644
index c91a5d4db29a9691e9b43ef4d5d5e9a4db945ac8..00107b54e09137ee1af1c56b8c9e853a4ffe7264 100644
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@@ -13,6 +13,15 @@ ChromeUtils.importESModule("resource://gre/modules/NotificationDB.sys.mjs");
@@ -18,7 +18,15 @@ index 4f145c494973374e87f3a3ed5eb6b33a43c518c8..01ebb483e6d9632588578b8b05195250
ChromeUtils.defineESModuleGetters(this, {
AMTelemetry: "resource://gre/modules/AddonManager.sys.mjs",
AboutNewTab: "resource:///modules/AboutNewTab.sys.mjs",
@@ -1735,6 +1744,11 @@ var gBrowserInit = {
@@ -1664,6 +1673,7 @@ var gBrowserInit = {
});
updateFxaToolbarMenu(gFxaToolbarEnabled, true);
+ Services.scriptloader.loadSubScript("chrome://browser/content/zenThemeModifier.js", this);
updatePrintCommands(gPrintEnabled);
@@ -1727,6 +1737,11 @@ var gBrowserInit = {
}
// Misc. inits.
@@ -30,7 +38,7 @@ index 4f145c494973374e87f3a3ed5eb6b33a43c518c8..01ebb483e6d9632588578b8b05195250
gUIDensity.init();
TabletModeUpdater.init();
CombinedStopReload.ensureInitialized();
@@ -6660,7 +6674,7 @@ function setToolbarVisibility(
@@ -6669,7 +6684,7 @@ function setToolbarVisibility(
);
}
@@ -39,7 +47,7 @@ index 4f145c494973374e87f3a3ed5eb6b33a43c518c8..01ebb483e6d9632588578b8b05195250
switch (isVisible) {
case true:
case "always":
@@ -9780,6 +9794,13 @@ var gDialogBox = {
@@ -9789,6 +9804,13 @@ var gDialogBox = {
parentElement.style.removeProperty("width");
parentElement.style.removeProperty("height");
document.documentElement.setAttribute("window-modal-open", true);
@@ -53,7 +61,7 @@ index 4f145c494973374e87f3a3ed5eb6b33a43c518c8..01ebb483e6d9632588578b8b05195250
// Call this first so the contents show up and get layout, which is
// required for SubDialog to work.
parentElement.showModal();
@@ -10157,3 +10178,15 @@ var FirefoxViewHandler = {
@@ -10166,3 +10188,15 @@ var FirefoxViewHandler = {
this.button?.toggleAttribute("attention", shouldShow);
},
};

19
src/browser/base/content/browser-xhtml.patch
View File

@@ -1,28 +1,23 @@
diff --git a/browser/base/content/browser.xhtml b/browser/base/content/browser.xhtml
index b4886fb5f74568b4c09eb620be9efb74e39c599c..534e40c8f65d1b626c11aa3cfea308cc6176be02 100644
index 1dcdd02cd1bfe24c9f32304511f3dd675fc9265c..739b42cc6c832ccfe270a50d7d46fe2842a38f45 100644
--- a/browser/base/content/browser.xhtml
+++ b/browser/base/content/browser.xhtml
@@ -127,6 +127,7 @@
Services.scriptloader.loadSubScript("chrome://browser/content/search/autocomplete-popup.js", this);
Services.scriptloader.loadSubScript("chrome://browser/content/search/searchbar.js", this);
Services.scriptloader.loadSubScript("chrome://browser/content/shopping/shopping-sidebar.js", this);
+ Services.scriptloader.loadSubScript("chrome://browser/content/zenThemeModifier.js", this);
window.onload = gBrowserInit.onLoad.bind(gBrowserInit);
window.onunload = gBrowserInit.onUnload.bind(gBrowserInit);
@@ -163,9 +164,15 @@
@@ -165,9 +165,17 @@
</vbox>
</html:template>
-#include navigator-toolbox.inc.xhtml
-
-#include browser-box.inc.xhtml
+ <hbox id="zen-titlebar-items-container">
+#include titlebar-items.inc.xhtml
+ </hbox>
-#include browser-box.inc.xhtml
+
+ <hbox id="zen-main-app-wrapper" flex="1">
+ #include navigator-toolbox.inc.xhtml
+ <html:span id="zen-sidebar-box-container">
+ #include zen-sidebar-box.inc.xhtml
+ </html:span>
+ #include browser-box.inc.xhtml
+ </hbox>

17
src/browser/base/content/navigator-toolbox-inc-xhtml.patch
View File

@@ -1,5 +1,5 @@
diff --git a/browser/base/content/navigator-toolbox.inc.xhtml b/browser/base/content/navigator-toolbox.inc.xhtml
index dce7bacdb3678a95dc97085390a7e6102090ffb2..adc160df554e19b5d7cc874cedf2fae6e98a1e60 100644
index fc19910726f2925505f6e71add034c82af36b63e..046f6fc8084403096be2730f7f892d9ea70d7de2 100644
--- a/browser/base/content/navigator-toolbox.inc.xhtml
+++ b/browser/base/content/navigator-toolbox.inc.xhtml
@@ -50,21 +50,24 @@
@@ -28,7 +28,7 @@ index dce7bacdb3678a95dc97085390a7e6102090ffb2..adc160df554e19b5d7cc874cedf2fae6
<spacer class="closing-tabs-spacer" style="width: 0;"/>
</hbox>
</arrowscrollbox>
@@ -101,12 +104,16 @@
@@ -101,7 +104,10 @@
<label data-l10n-id="private-browsing-indicator-label"></label>
</hbox>
@@ -39,18 +39,11 @@ index dce7bacdb3678a95dc97085390a7e6102090ffb2..adc160df554e19b5d7cc874cedf2fae6
</toolbar>
</vbox>
+#if 0
<toolbar id="nav-bar"
class="browser-toolbar"
data-l10n-id="navbar-accessible"
@@ -575,7 +582,7 @@
<html:template id="tab-notification-deck-template">
@@ -576,7 +582,6 @@
<html:named-deck id="tab-notification-deck"></html:named-deck>
</html:template>
-
+#endif
-
<html:template id="BrowserToolbarPalette">
<toolbarbutton id="import-button"
class="toolbarbutton-1 chromeclass-toolbar-additional"

470
src/browser/base/content/zen-browser-box-ui.inc.xhtml
View File

@@ -1,470 +0,0 @@
<toolbar id="nav-bar"
class="browser-toolbar"
data-l10n-id="navbar-accessible"
fullscreentoolbar="true" mode="icons" customizable="true"
customizationtarget="nav-bar-customization-target"
overflowable="true"
default-overflowbutton="nav-bar-overflow-button"
default-overflowtarget="widget-overflow-list"
default-overflowpanel="widget-overflow"
addon-webext-overflowbutton="unified-extensions-button"
addon-webext-overflowtarget="overflowed-extensions-list"
context="toolbar-context-menu">
<toolbartabstop/>
<hbox id="nav-bar-customization-target" flex="1">
<toolbarbutton id="back-button" class="toolbarbutton-1 chromeclass-toolbar-additional"
data-l10n-id="toolbar-button-back-2"
removable="false" overflows="false"
keepbroadcastattributeswhencustomizing="true"
command="Browser:BackOrBackDuplicate"
onclick="checkForMiddleClick(this, event);"
tooltip="back-button-tooltip"
context="backForwardMenu"/>
<toolbarbutton id="forward-button" class="toolbarbutton-1 chromeclass-toolbar-additional"
data-l10n-id="toolbar-button-forward-2"
removable="false" overflows="false"
keepbroadcastattributeswhencustomizing="true"
command="Browser:ForwardOrForwardDuplicate"
onclick="checkForMiddleClick(this, event);"
tooltip="forward-button-tooltip"
context="backForwardMenu"/>
<toolbaritem id="stop-reload-button" class="chromeclass-toolbar-additional"
data-l10n-id="toolbar-button-stop-reload"
removable="true" overflows="false">
<toolbarbutton id="reload-button" class="toolbarbutton-1"
data-l10n-id="toolbar-button-reload"
command="Browser:ReloadOrDuplicate"
onclick="checkForMiddleClick(this, event);"
tooltip="dynamic-shortcut-tooltip">
<box class="toolbarbutton-animatable-box">
<image class="toolbarbutton-animatable-image"/>
</box>
</toolbarbutton>
<toolbarbutton id="stop-button" class="toolbarbutton-1"
data-l10n-id="toolbar-button-stop"
command="Browser:Stop"
tooltip="dynamic-shortcut-tooltip">
<box class="toolbarbutton-animatable-box">
<image class="toolbarbutton-animatable-image"/>
</box>
</toolbarbutton>
</toolbaritem>
<toolbarspring cui-areatype="toolbar" class="chromeclass-toolbar-additional"/>
<toolbaritem id="urlbar-container"
removable="false"
class="chromeclass-location" overflows="false">
<toolbartabstop/>
<hbox id="urlbar" flex="1"
context=""
focused="true"
pageproxystate="invalid">
<hbox id="urlbar-background"/>
<hbox id="urlbar-input-container"
flex="1"
pageproxystate="invalid">
<box id="remote-control-box"
align="center"
collapsed="true">
<image id="remote-control-icon"/>
</box>
<box id="urlbar-search-button"
class="chromeclass-toolbar-additional"/>
<!-- Use onclick instead of normal popup= syntax since the popup
code fires onmousedown, and hence eats our favicon drag events. -->
<box id="identity-box"
pageproxystate="invalid"
ondragstart="gIdentityHandler.onDragStart(event);">
<box id="identity-icon-box"
role="button"
align="center"
data-l10n-id="urlbar-identity-button"
class="identity-box-button"
onclick="gIdentityHandler.handleIdentityButtonEvent(event); PageProxyClickHandler(event);"
onkeypress="gIdentityHandler.handleIdentityButtonEvent(event);">
<image id="identity-icon"/>
<label id="identity-icon-label" class="plain" crop="center" flex="1"/>
</box>
<box id="identity-permission-box"
data-l10n-id="urlbar-permissions-granted"
role="button"
align="center"
class="identity-box-button"
onclick="gPermissionPanel.handleIdentityButtonEvent(event); PageProxyClickHandler(event);"
onkeypress="gPermissionPanel.handleIdentityButtonEvent(event);">
<image id="permissions-granted-icon"/>
<box style="pointer-events: none;">
<image class="sharing-icon" id="webrtc-sharing-icon"/>
<image class="sharing-icon geo-icon" id="geo-sharing-icon"/>
<image class="sharing-icon xr-icon" id="xr-sharing-icon"/>
</box>
<box id="blocked-permissions-container" align="center">
<image data-permission-id="geo" class="blocked-permission-icon geo-icon" role="button"
data-l10n-id="urlbar-geolocation-blocked"/>
<image data-permission-id="xr" class="blocked-permission-icon xr-icon" role="button"
data-l10n-id="urlbar-xr-blocked"/>
<image data-permission-id="desktop-notification" class="blocked-permission-icon desktop-notification-icon" role="button"
data-l10n-id="urlbar-web-notifications-blocked"/>
<image data-permission-id="camera" class="blocked-permission-icon camera-icon" role="button"
data-l10n-id="urlbar-camera-blocked"/>
<image data-permission-id="microphone" class="blocked-permission-icon microphone-icon" role="button"
data-l10n-id="urlbar-microphone-blocked"/>
<image data-permission-id="screen" class="blocked-permission-icon screen-icon" role="button"
data-l10n-id="urlbar-screen-blocked"/>
<image data-permission-id="persistent-storage" class="blocked-permission-icon persistent-storage-icon" role="button"
data-l10n-id="urlbar-persistent-storage-blocked"/>
<image data-permission-id="popup" class="blocked-permission-icon popup-icon" role="button"
data-l10n-id="urlbar-popup-blocked"/>
<image data-permission-id="autoplay-media" class="blocked-permission-icon autoplay-media-icon" role="button"
data-l10n-id="urlbar-autoplay-media-blocked"/>
<image data-permission-id="canvas" class="blocked-permission-icon canvas-icon" role="button"
data-l10n-id="urlbar-canvas-blocked"/>
<image data-permission-id="midi" class="blocked-permission-icon midi-icon" role="button"
data-l10n-id="urlbar-midi-blocked"/>
<image data-permission-id="install" class="blocked-permission-icon install-icon" role="button"
data-l10n-id="urlbar-install-blocked"/>
<!-- A speaker icon for blocked speaker selection is not
shown because, without text, this may be interpreted as
active or blocked audio. -->
</box>
</box>
<box id="notification-popup-box"
class="anchor-root"
hidden="true"
align="center">
<image id="default-notification-icon" class="notification-anchor-icon" role="button"
data-l10n-id="urlbar-default-notification-anchor"/>
<image id="geo-notification-icon" class="notification-anchor-icon geo-icon" role="button"
data-l10n-id="urlbar-geolocation-notification-anchor"/>
<image id="xr-notification-icon" class="notification-anchor-icon xr-icon" role="button"
data-l10n-id="urlbar-xr-notification-anchor"/>
<image id="autoplay-media-notification-icon" class="notification-anchor-icon autoplay-media-icon" role="button"
data-l10n-id="urlbar-autoplay-notification-anchor"/>
<image id="addons-notification-icon" class="notification-anchor-icon install-icon" role="button"
data-l10n-id="urlbar-addons-notification-anchor"/>
<image id="canvas-notification-icon" class="notification-anchor-icon" role="button"
data-l10n-id="urlbar-canvas-notification-anchor"/>
<image id="indexedDB-notification-icon" class="notification-anchor-icon indexedDB-icon" role="button"
data-l10n-id="urlbar-indexed-db-notification-anchor"/>
<image id="password-notification-icon" class="notification-anchor-icon" role="button"
data-l10n-id="urlbar-password-notification-anchor"/>
<image id="web-notifications-notification-icon" class="notification-anchor-icon desktop-notification-icon" role="button"
data-l10n-id="urlbar-web-notification-anchor"/>
<image id="webRTC-shareDevices-notification-icon" class="notification-anchor-icon camera-icon" role="button"
data-l10n-id="urlbar-web-rtc-share-devices-notification-anchor"/>
<image id="webRTC-shareMicrophone-notification-icon" class="notification-anchor-icon microphone-icon" role="button"
data-l10n-id="urlbar-web-rtc-share-microphone-notification-anchor"/>
<image id="webRTC-shareScreen-notification-icon" class="notification-anchor-icon screen-icon" role="button"
data-l10n-id="urlbar-web-rtc-share-screen-notification-anchor"/>
<image id="webRTC-shareSpeaker-notification-icon" class="notification-anchor-icon speaker-icon" role="button"
data-l10n-id="urlbar-web-rtc-share-speaker-notification-anchor"/>
<image id="servicesInstall-notification-icon" class="notification-anchor-icon service-icon" role="button"
data-l10n-id="urlbar-services-notification-anchor"/>
<image id="eme-notification-icon" class="notification-anchor-icon drm-icon" role="button"
data-l10n-id="urlbar-eme-notification-anchor"/>
<image id="persistent-storage-notification-icon" class="notification-anchor-icon persistent-storage-icon" role="button"
data-l10n-id="urlbar-persistent-storage-notification-anchor"/>
<image id="midi-notification-icon" class="notification-anchor-icon midi-icon" role="button"
data-l10n-id="urlbar-midi-notification-anchor"/>
<image id="webauthn-notification-icon" class="notification-anchor-icon" role="button"
data-l10n-id="urlbar-web-authn-anchor"/>
<image id="identity-credential-notification-icon" class="notification-anchor-icon" role="button"
data-l10n-id="identity-credential-urlbar-anchor"/>
<image id="storage-access-notification-icon" class="notification-anchor-icon storage-access-icon" role="button"
data-l10n-id="urlbar-storage-access-anchor"/>
</box>
</box>
<box id="urlbar-label-box" align="center">
<label id="urlbar-label-switchtab" class="urlbar-label" data-l10n-id="urlbar-switch-to-tab"/>
<label id="urlbar-label-extension" class="urlbar-label" data-l10n-id="urlbar-extension"/>
<label id="urlbar-label-search-mode" class="urlbar-label"/>
</box>
<html:div id="urlbar-search-mode-indicator">
<html:span id="urlbar-search-mode-indicator-title"/>
<html:div id="urlbar-search-mode-indicator-close"
class="close-button"
role="button"
aria-labelledby="urlbar-search-mode-indicator-close urlbar-search-mode-indicator-title"
data-l10n-id="urlbar-search-mode-indicator-close"/>
</html:div>
<moz-input-box tooltip="aHTMLTooltip"
class="urlbar-input-box"
flex="1"
role="combobox"
aria-owns="urlbar-results">
<html:input id="urlbar-scheme"
required="required"/>
<html:input id="urlbar-input"
anonid="input"
aria-controls="urlbar-results"
aria-autocomplete="both"
inputmode="mozAwesomebar"
data-l10n-id="urlbar-placeholder"
data-l10n-attrs="placeholder"/>
</moz-input-box>
<image id="urlbar-go-button"
class="urlbar-icon"
role="button"
keyNav="false"
onclick="gURLBar.handleCommand(event);"
data-l10n-id="urlbar-go-button"/>
<box id="tracking-protection-icon-container" align="center"
role="button"
onclick="gProtectionsHandler.handleProtectionsButtonEvent(event);"
onkeypress="gProtectionsHandler.handleProtectionsButtonEvent(event);"
onmouseover="gProtectionsHandler.onTrackingProtectionIconHoveredOrFocused();"
onfocus="gProtectionsHandler.onTrackingProtectionIconHoveredOrFocused();"
tooltip="tracking-protection-icon-tooltip">
<box id="tracking-protection-icon-box">
<image id="tracking-protection-icon"/>
</box>
<tooltip id="tracking-protection-icon-tooltip">
<description id="tracking-protection-icon-tooltip-label" class="tooltip-label"/>
</tooltip>
</box>
<hbox id="page-action-buttons" context="pageActionContextMenu" align="center">
<toolbartabstop/>
<hbox id="contextual-feature-recommendation" role="button" hidden="true">
<hbox id="cfr-label-container">
<label id="cfr-label"/>
</hbox>
<hbox id="cfr-button"
role="presentation"
class="urlbar-page-action">
<image class="urlbar-icon"/>
</hbox>
</hbox>
<hbox id="userContext-icons" hidden="true">
<label id="userContext-label"/>
<image id="userContext-indicator"/>
</hbox>
<hbox id="reader-mode-button"
class="urlbar-page-action"
role="button"
data-l10n-id="reader-view-enter-button"
hidden="true"
tooltip="dynamic-shortcut-tooltip"
onclick="AboutReaderParent.buttonClick(event);">
<image id="reader-mode-button-icon"
class="urlbar-icon"/>
</hbox>
<hbox id="picture-in-picture-button"
class="urlbar-page-action"
role="button"
hidden="true"
onclick="PictureInPicture.toggleUrlbar(event)">
<image id="picture-in-picture-button-icon"
class="urlbar-icon"/>
</hbox>
<hbox id="translations-button"
class="urlbar-page-action"
role="button"
data-l10n-id="urlbar-translations-button2"
hidden="true"
onclick="TranslationsPanel.open(event);"
onkeypress="TranslationsPanel.open(event);">
<image class="urlbar-icon" id="translations-button-icon" />
<image class="urlbar-icon" id="translations-button-circle-arrows" />
<html:span id="translations-button-locale" aria-hidden="true" />
</hbox>
<hbox id="shopping-sidebar-button"
class="urlbar-page-action"
role="button"
data-l10n-id="shopping-sidebar-open-button2"
hidden="true"
onclick="ShoppingSidebarParent.urlbarButtonClick(event);">
<image id="shopping-sidebar-button-icon"
class="urlbar-icon"/>
</hbox>
<toolbarbutton id="urlbar-zoom-button"
onclick="FullZoom.resetFromURLBar(event);"
tooltip="dynamic-shortcut-tooltip"
hidden="true"/>
<hbox id="pageActionButton"
class="urlbar-page-action"
role="button"
data-l10n-id="urlbar-page-action-button"
onmousedown="BrowserPageActions.mainButtonClicked(event);"
onkeypress="BrowserPageActions.mainButtonClicked(event);">
<image class="urlbar-icon"/>
</hbox>
<hbox id="star-button-box"
hidden="true"
role="button"
class="urlbar-page-action"
onclick="BrowserPageActions.doCommandForAction(PageActions.actionForID('bookmark'), event, this);">
<image id="star-button"
class="urlbar-icon"/>
</hbox>
</hbox>
</hbox>
</hbox>
<toolbartabstop/>
</toolbaritem>
<toolbarspring cui-areatype="toolbar" class="chromeclass-toolbar-additional"/>
<toolbarbutton id="downloads-button"
class="toolbarbutton-1 chromeclass-toolbar-additional"
delegatesanchor="true"
badged="true"
key="key_openDownloads"
onmousedown="DownloadsIndicatorView.onCommand(event);"
onkeypress="DownloadsIndicatorView.onCommand(event);"
ondrop="DownloadsIndicatorView.onDrop(event);"
ondragover="DownloadsIndicatorView.onDragOver(event);"
ondragenter="DownloadsIndicatorView.onDragOver(event);"
data-l10n-id="navbar-downloads"
removable="true"
overflows="false"
cui-areatype="toolbar"
hidden="true"
tooltip="dynamic-shortcut-tooltip">
<box id="downloads-indicator-anchor"
consumeanchor="downloads-button">
<image id="downloads-indicator-icon"/>
</box>
<box class="toolbarbutton-animatable-box" id="downloads-indicator-progress-outer">
<box id="downloads-indicator-progress-inner"/>
</box>
<box class="toolbarbutton-animatable-box" id="downloads-indicator-start-box">
<image class="toolbarbutton-animatable-image" id="downloads-indicator-start-image"/>
</box>
<box class="toolbarbutton-animatable-box" id="downloads-indicator-finish-box">
<image class="toolbarbutton-animatable-image" id="downloads-indicator-finish-image"/>
</box>
</toolbarbutton>
<toolbarbutton id="fxa-toolbar-menu-button" class="toolbarbutton-1 chromeclass-toolbar-additional subviewbutton-nav"
badged="true"
delegatesanchor="true"
onmousedown="ZenProfileDialogUI.showSubView(this, event)"
onkeypress="gSync.toggleAccountPanel(this, event)"
consumeanchor="fxa-toolbar-menu-button"
closemenu="none"
data-l10n-id="toolbar-button-account"
cui-areatype="toolbar"
removable="true">
<vbox>
<image id="fxa-avatar-image"/>
</vbox>
</toolbarbutton>
<toolbarbutton id="unified-extensions-button"
class="toolbarbutton-1 chromeclass-toolbar-additional"
delegatesanchor="true"
data-l10n-id="unified-extensions-button"
hidden="true"
onkeypress="gUnifiedExtensions.togglePanel(event)"
onmousedown="gUnifiedExtensions.togglePanel(event)"
overflows="false"
removable="false"/>
</hbox>
<toolbarbutton id="nav-bar-overflow-button"
class="toolbarbutton-1 chromeclass-toolbar-additional overflow-button"
delegatesanchor="true"
skipintoolbarset="true"
data-l10n-id="navbar-overflow">
<box class="toolbarbutton-animatable-box">
<image class="toolbarbutton-animatable-image"/>
</box>
</toolbarbutton>
<toolbaritem id="PanelUI-button"
removable="false">
<toolbarbutton id="ion-button"
class="toolbarbutton-1"
delegatesanchor="true"
hidden="true"
badged="true"
tooltiptext="Ion"
onmousedown="switchToTabHavingURI('about:ion', true);"
onkeypress="switchToTabHavingURI('about:ion', true);"/>
<toolbarbutton id="whats-new-menu-button"
class="toolbarbutton-1"
delegatesanchor="true"
hidden="true"
badged="true"
onmousedown="PanelUI.showSubView('PanelUI-whatsNew', this, event);"
onkeypress="PanelUI.showSubView('PanelUI-whatsNew', this, event);"/>
<toolbarbutton id="PanelUI-menu-button"
class="toolbarbutton-1"
delegatesanchor="true"
badged="true"
consumeanchor="PanelUI-button"
data-l10n-id="appmenu-menu-button-closed2"/>
</toolbaritem>
</toolbar>
<toolbar id="PersonalToolbar"
mode="icons"
class="browser-toolbar chromeclass-directories"
context="toolbar-context-menu"
data-l10n-id="bookmarks-toolbar"
data-l10n-attrs="toolbarname"
customizable="true">
<toolbartabstop skipintoolbarset="true"/>
<hbox id="personal-toolbar-empty" skipintoolbarset="true" removable="false" hidden="true">
<description id="personal-toolbar-empty-description"
data-l10n-id="bookmarks-toolbar-empty-message"
onclick="BookmarkingUI.openLibraryIfLinkClicked(event);"
onkeydown="BookmarkingUI.openLibraryIfLinkClicked(event);">
<html:a data-l10n-name="manage-bookmarks" class="text-link" tabindex="0"/>
</description>
</hbox>
<toolbaritem id="personal-bookmarks"
data-l10n-id="bookmarks-toolbar-placeholder"
cui-areatype="toolbar"
removable="true">
<toolbarbutton id="bookmarks-toolbar-placeholder"
class="bookmark-item"
data-l10n-id="bookmarks-toolbar-placeholder-button"/>
<toolbarbutton id="bookmarks-toolbar-button"
class="toolbarbutton-1"
delegatesanchor="true"
flex="1"
data-l10n-id="bookmarks-toolbar-placeholder-button"
oncommand="PlacesToolbarHelper.onPlaceholderCommand();"/>
<hbox flex="1"
id="PlacesToolbar"
context="placesContext"
onmouseup="BookmarksEventHandler.onMouseUp(event);"
onclick="BookmarksEventHandler.onClick(event, this._placesView);"
oncommand="BookmarksEventHandler.onCommand(event);"
tooltip="bhTooltip"
popupsinherittooltip="true">
<hbox id="PlacesToolbarDropIndicatorHolder" align="center" collapsed="true">
<image id="PlacesToolbarDropIndicator"
collapsed="true"/>
</hbox>
<scrollbox orient="horizontal"
id="PlacesToolbarItems"
flex="1"/>
<toolbarbutton type="menu"
id="PlacesChevron"
class="toolbarbutton-1"
delegatesanchor="true"
collapsed="true"
data-l10n-id="bookmarks-toolbar-chevron">
<menupopup id="PlacesChevronPopup"
is="places-popup"
placespopup="true"
class="toolbar-menupopup"
tooltip="bhTooltip" popupsinherittooltip="true"
context="placesContext"
onpopupshowing="document.getElementById('PlacesToolbar')
._placesView._onChevronPopupShowing(event);"/>
</toolbarbutton>
</hbox>
</toolbaritem>
</toolbar>
<html:template id="tab-notification-deck-template">
<html:named-deck id="tab-notification-deck"></html:named-deck>
</html:template>
<html:span id="zen-website-and-native-separator"></html:span>

79
src/browser/base/content/zenThemeModifier.js
View File

@@ -11,8 +11,9 @@
* FOR ANY WEBSITE THAT WOULD NEED TO USE THE ACCENT COLOR, ETC
*/
{
{
const kZenThemeAccentColorPref = "zen.theme.accent-color";
const kZenThemePanelSeparationPref = "zen.theme.panel-separation";
/**
* ZenThemeModifier controls the application of theme data to the browser,
@@ -24,14 +25,25 @@
* and services.
*/
const ZenThemeModifier = {
_inMainBrowserWindow: false,
/**
* Listen for theming updates from the LightweightThemeChild actor, and
* begin listening to changes in preferred color scheme.
*/
init() {
this._inMainBrowserWindow = window.location.href == "chrome://browser/content/browser.xhtml";
this.listenForEvents();
this.updateAllThemeBasics();
this._zenInitBrowserLayout();
},
listenForEvents() {
addEventListener("LightweightTheme:Set", this);
Services.prefs.addObserver(kZenThemeAccentColorPref, this.handleEvent.bind(this));
this.updateAllThemeBasics();
if (this._inMainBrowserWindow) {
Services.prefs.addObserver(kZenThemePanelSeparationPref, this.handleEvent.bind(this));
}
},
handleEvent(event) {
@@ -44,6 +56,7 @@
*/
updateAllThemeBasics() {
this.updateAccentColor();
this.updateExtraBrowserStyles();
},
/**
@@ -59,7 +72,65 @@
}
},
};
ZenThemeModifier.init();
updateExtraBrowserStyles() {
// If we are in the main browser window, we can add some extra styles.
if (!this._inMainBrowserWindow) return;
const panelSeparation = Services.prefs.getIntPref(kZenThemePanelSeparationPref, 7);
document.documentElement.style.setProperty("--zen-appcontent-separator-from-window-single", panelSeparation + "px");
if (panelSeparation <= 0) {
document.documentElement.style.setProperty("--zen-appcontent-border-radius", "0px");
} else {
document.documentElement.style.setProperty("--zen-appcontent-border-radius", "var(--zen-panel-radius)");
}
this._changeSidebarLocation(panelSeparation);
},
_changeSidebarLocation(value) {
const sidebar = document.getElementById("sidebar-box");
const toolbox = document.getElementById("navigator-toolbox");
const wrapper = document.getElementById("zen-tabbox-wrapper");
const appWrapepr = document.getElementById("zen-sidebar-box-container");
if (value <= 0) {
wrapper.prepend(sidebar);
wrapper.prepend(toolbox);
appWrapepr.setAttribute("hidden", "true");
sidebar.setAttribute("inlinedwithtoolbox", "true");
toolbox.setAttribute("inlinedwithsidebar", "true");
} else {
appWrapepr.appendChild(toolbox);
appWrapepr.appendChild(sidebar);
appWrapepr.removeAttribute("hidden");
sidebar.removeAttribute("inlinedwithtoolbox");
toolbox.removeAttribute("inlinedwithsidebar");
}
},
_zenInitBrowserLayout() {
const kNavbarItems = [
"nav-bar",
"PersonalToolbar",
"tab-notification-deck-template"
];
const kSeparatorId = "zen-website-and-native-separator";
const kNewContainerId = "zen-appcontent-navbar-container";
let newContainer = document.getElementById(kNewContainerId);
for (let id of kNavbarItems) {
const node = document.getElementById(id);
console.assert(node, "Could not find node with id: " + id);
if (!node) continue;
newContainer.appendChild(node);
}
// Add the separator
const separator = document.createElement("span");
separator.id = kSeparatorId;
newContainer.appendChild(separator);
// move the security button to the right
const securityButton = document.getElementById("tracking-protection-icon-container");
document.getElementById("urlbar-input-container").insertBefore(securityButton, document.getElementById("page-action-buttons"));
},
};
if (typeof Services !== "undefined")
ZenThemeModifier.init();
}

36
src/browser/components/customizableui/CustomizeMode-sys-mjs.patch
View File

@@ -1,8 +1,16 @@
diff --git a/browser/components/customizableui/CustomizeMode.sys.mjs b/browser/components/customizableui/CustomizeMode.sys.mjs
index 5f6d01d8337efc515cc2687782a07af893ea85d8..3a1af9f3969e283a5eb5b225ba8389fd82e22184 100644
index 5f6d01d8337efc515cc2687782a07af893ea85d8..b008373667b629ff6d230bea0114a28f9847ace9 100644
--- a/browser/components/customizableui/CustomizeMode.sys.mjs
+++ b/browser/components/customizableui/CustomizeMode.sys.mjs
@@ -356,7 +356,7 @@ CustomizeMode.prototype = {
@@ -138,6 +138,7 @@ export function CustomizeMode(aWindow) {
Services.prefs.addObserver(kBookmarksToolbarPref, this);
this.window.addEventListener("unload", this);
+ this._zenUpdateWindowSeparator();
}
CustomizeMode.prototype = {
@@ -356,7 +357,7 @@ CustomizeMode.prototype = {
this._transitioning = true;
let customizer = document.getElementById("customization-container");
@@ -11,7 +19,7 @@ index 5f6d01d8337efc515cc2687782a07af893ea85d8..3a1af9f3969e283a5eb5b225ba8389fd
browser.hidden = true;
customizer.hidden = false;
@@ -487,7 +487,7 @@ CustomizeMode.prototype = {
@@ -487,7 +488,7 @@ CustomizeMode.prototype = {
}
let customizer = document.getElementById("customization-container");
@@ -20,7 +28,7 @@ index 5f6d01d8337efc515cc2687782a07af893ea85d8..3a1af9f3969e283a5eb5b225ba8389fd
customizer.hidden = true;
browser.hidden = false;
@@ -2278,6 +2278,20 @@ CustomizeMode.prototype = {
@@ -2278,6 +2279,20 @@ CustomizeMode.prototype = {
if (makeSpaceImmediately) {
aItem.setAttribute("notransition", "true");
}
@@ -41,3 +49,23 @@ index 5f6d01d8337efc515cc2687782a07af893ea85d8..3a1af9f3969e283a5eb5b225ba8389fd
aItem.style[prop] = borderWidth + "px";
aItem.style.removeProperty(otherProp);
if (makeSpaceImmediately) {
@@ -2931,6 +2946,19 @@ CustomizeMode.prototype = {
return uninit;
},
+
+ _zenUpdateWindowSeparator() {
+ let range = this.$("customization-zen-browser-space");
+ const kZenThemePanelSeparationPref = "zen.theme.panel-separation";
+ range.value = Services.prefs.getIntPref(kZenThemePanelSeparationPref);
+ range.addEventListener("input", () => {
+ let value = range.value;
+ Services.prefs.setIntPref(kZenThemePanelSeparationPref, value);
+ });
+ Services.prefs.addObserver(kZenThemePanelSeparationPref, () => {
+ range.value = Services.prefs.getIntPref(kZenThemePanelSeparationPref);
+ });
+ },
};
function __dumpDragData(aEvent, caller) {

13
src/browser/components/customizableui/content/customizeMode-inc-xhtml.patch Normal file
View File

@@ -0,0 +1,13 @@
diff --git a/browser/components/customizableui/content/customizeMode.inc.xhtml b/browser/components/customizableui/content/customizeMode.inc.xhtml
index 2788cc6a8fb42b7b968eb45aafc02f8d6fcf771d..5142e65576aebaac0e31677b707a5e05f88dae76 100644
--- a/browser/components/customizableui/content/customizeMode.inc.xhtml
+++ b/browser/components/customizableui/content/customizeMode.inc.xhtml
@@ -94,7 +94,7 @@
class="footer-button"
oncommand="gCustomizeMode.togglePong(this.checked);"
hidden="true"/>
-
+#include zenCustomizationMode.inc.xhtml
<spacer id="customization-footer-spacer"/>
#ifdef XP_MACOSX
<button id="customization-touchbar-button"

4
src/browser/components/customizableui/content/zenCustomizationMode.inc.xhtml Normal file
View File

@@ -0,0 +1,4 @@
<toolbarseparator id="zen-customization-uidensity-separator"/>
<html:input type="range" id="customization-zen-browser-space" min="0" max="16" step="4"></html:input>
<label data-l10n-id="customization-zen-browser-space" for="customization-zen-browser-space"/>

2
src/browser/components/newtab/lib/ActivityStream-sys-mjs.patch
View File

@@ -1,5 +1,5 @@
diff --git a/browser/components/newtab/lib/ActivityStream.sys.mjs b/browser/components/newtab/lib/ActivityStream.sys.mjs
index f2287fe45edbf4f1e792e3fdcd6886a17c1bb9d2..07437d4fb426919bf8754c01776b00ab06401370 100644
index f46e8aadf053c1a567642cda5f728534c81c8223..9ba13e5988a1fbcbc0502bba46fe6cfa3c647d85 100644
--- a/browser/components/newtab/lib/ActivityStream.sys.mjs
+++ b/browser/components/newtab/lib/ActivityStream.sys.mjs
@@ -127,7 +127,7 @@ export const PREFS_CONFIG = new Map([

11
src/browser/locales/en-US/browser/customizeMode-ftl.patch Normal file
View File

@@ -0,0 +1,11 @@
diff --git a/browser/locales/en-US/browser/customizeMode.ftl b/browser/locales/en-US/browser/customizeMode.ftl
index e5f54b231738fc8fee505c8c8dcccde820995cfc..ec81ef8e451faa25878830b7d4796708e15fe395 100644
--- a/browser/locales/en-US/browser/customizeMode.ftl
+++ b/browser/locales/en-US/browser/customizeMode.ftl
@@ -36,3 +36,5 @@ customize-mode-touchbar-cmd =
.label = Customize Touch Bar…
customize-mode-downloads-button-autohide =
.label = Hide button when empty
+
+customization-zen-browser-space = Content Space
\ No newline at end of file

20
src/browser/themes/shared/customizableui/customizeMode-css.patch Normal file
View File

@@ -0,0 +1,20 @@
diff --git a/browser/themes/shared/customizableui/customizeMode.css b/browser/themes/shared/customizableui/customizeMode.css
index b3ee1ada6cbaef46ade98323d43bf72d84db3b88..a87a7511ba19d02849d1ccab487684156f7d8698 100644
--- a/browser/themes/shared/customizableui/customizeMode.css
+++ b/browser/themes/shared/customizableui/customizeMode.css
@@ -547,3 +547,15 @@ toolbarpaletteitem > #search-container > #searchbar > .searchbar-textbox {
80% { border-color: rgb(20,155,249); color: rgb(20,155,249); }
100% { border-color: rgb(195,17,206); color: rgb(195,17,206); }
}
+
+#customization-zen-browser-space {
+ width: 200px;
+ height: 5px;
+}
+
+#zen-customization-uidensity-separator {
+ height: 100%;
+ width: 1px;
+ margin: 0 5px;
+ border-left: 1px solid rgba(0,0,0,.15);
+}

12
src/browser/themes/shared/zen-browser-shared.css
View File

@@ -24,7 +24,7 @@
--input-border-color: var(--zen-input-border-color) !important;
}
#PersonalToolbar {
#PersonalToolbar:not([collapsed="true"]) {
/*border-top: 1px solid light-dark(#ddd, #4a4a4a);*/
padding: 5px 0;
padding-inline: 15px !important;
@@ -183,12 +183,20 @@ button.popup-notification-dropmarker {
min-width: 55px;
}
#zen-sidebar-box-container {
display: flex;
}
#zen-sidebar-box-container[hidden="true"] {
display: none;
}
#navigator-toolbox toolbar#TabsToolbar {
margin: var(--zen-appcontent-separator-from-window);
background: var(--sidebar-background-color);
overflow: hidden;
transition: .2s;
border-radius: 15px !important;
border-radius: var(--zen-appcontent-border-radius) !important;
flex-direction: column !important;
padding: 5px 0;
margin-right: 0 !important;

3
src/browser/themes/shared/zen-sidebar.css
View File

@@ -4,7 +4,7 @@
}
#sidebar-box {
--zen-sidebar-box-border-radius: var(--zen-panel-radius);
--zen-sidebar-box-border-radius: var(--zen-appcontent-border-radius);
margin: var(--zen-appcontent-separator-from-window) !important;
border-radius: var(--zen-sidebar-box-border-radius) !important;
overflow: hidden;
@@ -29,6 +29,7 @@
border-bottom-right-radius: 0 !important;
margin-right: 0 !important;
box-shadow: none !important;
border-right: 1px solid light-dark(#ddd, #4a4a4a) !important;
}
#sidebar-splitter {

3
src/toolkit/content/zen-xul.css
View File

@@ -5,6 +5,7 @@
--zen-main-browser-background: var(--zen-colors-secondary);
--zen-appcontent-separator-from-window-single: 7px;
--zen-appcontent-separator-from-window: 0 var(--zen-appcontent-separator-from-window-single) var(--zen-appcontent-separator-from-window-single);
--zen-appcontent-border-radius: var(--zen-panel-radius);
}
toolbox#navigator-toolbox,
@@ -21,7 +22,7 @@ html#main-window > body {
}
:not([inDOMFullscreen="true"]) #appcontent {
border-radius: var(--zen-panel-radius);
border-radius: var(--zen-appcontent-border-radius);
overflow: hidden;
margin: var(--zen-appcontent-separator-from-window);
}

9
update_newtab.py Normal file
View File

@@ -0,0 +1,9 @@
import os
def update_newtab(init: bool = True):
if init:
os.system("(cd ./engine/browser/components/newtab && ../../../mach npm install && ../../../mach npm install meow@9.0.0)")
os.system("cd ./engine && ./mach npm run bundle --prefix=browser/components/newtab")
if __name__ == "__main__":
update_newtab(False)