mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2026-08-29 18:01:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'zen-browser:dev' into adds-search-to-icons

Browse Source
This commit is contained in:
Studio Movie Girl
2024-12-29 03:15:42 -06:00
committed by GitHub
parent 19be833058 e526cb462f
commit da2f87660f
62 changed files with 1392 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/browser/base/content/ZenUIManager.mjs
View File

@@ -13,19 +13,14 @@ var gZenUIManager = {
0
);
function throttle(f, delay) {
let timer = 0;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => f.apply(this, args), delay);
};
}
new ResizeObserver(throttle(this.updateTabsToolbar.bind(this), this.sidebarHeightThrottle)).observe(
new ResizeObserver(gZenCommonActions.throttle(this.updateTabsToolbar.bind(this), this.sidebarHeightThrottle)).observe(
document.getElementById('tabbrowser-tabs')
);
},
new ResizeObserver(gZenCommonActions.throttle(gZenCompactModeManager.getAndApplySidebarWidth.bind(gZenCompactModeManager), this.sidebarHeightThrottle)).observe(
document.getElementById('navigator-toolbox')
);
},
updateTabsToolbar() {
// Set tabs max-height to the "toolbar-items" height
@@ -280,6 +275,12 @@ var gZenVerticalTabsManager = {
this._isUpdating = true;
try {
this._updateMaxWidth();
window.docShell.treeOwner
.QueryInterface(Ci.nsIInterfaceRequestor)
.getInterface(Ci.nsIAppWindow)
.rollupAllPopups();
const topButtons = document.getElementById('zen-sidebar-top-buttons');
const isCompactMode = this._prefsCompactMode;
const isVerticalTabs = this._prefsVerticalTabs || forceMultipleToolbar;

15
src/browser/base/content/appmenu-viewcache-inc-xhtml.patch Normal file
View File

@@ -0,0 +1,15 @@
diff --git a/browser/base/content/appmenu-viewcache.inc.xhtml b/browser/base/content/appmenu-viewcache.inc.xhtml
index 3c5c4f29b1de25a4ce17089502f2251a27e5c7f5..dfa3260ed3c2bb6067745696fbf103c7e56c639a 100644
--- a/browser/base/content/appmenu-viewcache.inc.xhtml
+++ b/browser/base/content/appmenu-viewcache.inc.xhtml
@@ -421,6 +421,10 @@
class="subviewbutton"
data-l10n-id="appmenu-customizetoolbar"
command="cmd_CustomizeToolbars"/>
+ <toolbarbutton id="appmenu-zen-share-rice"
+ class="subviewbutton"
+ data-l10n-id="appmenu-zen-share-rice"
+ oncommand="gZenThemePicker.shareTheme()" />
<toolbarseparator/>
<html:h2 id="appmenu-developer-tools"
data-l10n-id="appmenu-developer-tools-subheader"

8
src/browser/base/content/zen-assets.inc.xhtml
View File

@@ -1,6 +1,6 @@
#include zen-locales.inc.xhtml
<!-- Styles used all over the browser -->
# Styles used all over the browser
<linkset>
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-theme.css" />
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-animations.css" />
@@ -10,6 +10,7 @@
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-tabs.css" />
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-browser-ui.css" />
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-gradient-generator.css" />
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-rices.css" />
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-panel-ui.css" />
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-single-components.css" />
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-browser-container.css" />
@@ -25,7 +26,7 @@
<link rel="stylesheet" type="text/css" href="chrome://browser/skin/zen-icons/icons.css" />
</linkset>
<!-- Scripts used all over the browser -->
# Scripts used all over the browser
<script src="chrome://browser/content/zen-components/ZenThemesCommon.mjs" />
<script src="chrome://browser/content/zen-components/ZenActorsManager.mjs" />
<script src="chrome://browser/content/zen-components/ZenGlanceManager.mjs" />
@@ -40,3 +41,6 @@
<script src="chrome://browser/content/zen-components/ZenGradientGenerator.mjs" />
<script src="chrome://browser/content/zen-components/ZenViewSplitter.mjs"/>
<script src="chrome://browser/content/zen-components/ZenProfileDialogUI.mjs" />
# Unimportant scripts
<script src="chrome://browser/content/zen-components/ZenRices.mjs" />

6
src/browser/base/content/zen-assets.jar.inc.mn
View File

@@ -22,6 +22,7 @@
content/browser/zen-components/ZenGradientGenerator.mjs (zen-components/ZenGradientGenerator.mjs)
content/browser/zen-components/ZenGlanceManager.mjs (zen-components/ZenGlanceManager.mjs)
content/browser/zen-components/ZenActorsManager.mjs (zen-components/ZenActorsManager.mjs)
content/browser/zen-components/ZenRices.mjs (zen-components/ZenRices.mjs)
content/browser/zen-styles/zen-theme.css (content/zen-styles/zen-theme.css)
content/browser/zen-styles/zen-buttons.css (content/zen-styles/zen-buttons.css)
@@ -43,6 +44,7 @@
content/browser/zen-styles/zen-popup.css (content/zen-styles/zen-popup.css)
content/browser/zen-styles/zen-sidebar-panels.css (content/zen-styles/zen-sidebar-panels.css)
content/browser/zen-styles/zen-gradient-generator.css (content/zen-styles/zen-gradient-generator.css)
content/browser/zen-styles/zen-rices.css (content/zen-styles/zen-rices.css)
content/browser/zen-styles/zen-branding.css (content/zen-styles/zen-branding.css)
content/browser/zen-styles/zen-panels/bookmarks.css (content/zen-styles/zen-panels/bookmarks.css)
@@ -55,6 +57,7 @@
# Images
content/browser/zen-images/gradient.png (content/zen-images/gradient.png)
content/browser/zen-images/gradient-display.png (content/zen-images/gradient-display.png)
content/browser/zen-images/brand-header.svg (content/zen-images/brand-header.svg)
content/browser/zen-images/layouts/collapsed.png (content/zen-images/layouts/collapsed.png)
content/browser/zen-images/layouts/multiple-toolbar.png (content/zen-images/layouts/multiple-toolbar.png)
content/browser/zen-images/layouts/single-toolbar.png (content/zen-images/layouts/single-toolbar.png)
@@ -68,3 +71,6 @@
# Fonts
content/browser/zen-fonts/JunicodeVF-Italic.woff2 (content/zen-fonts/JunicodeVF-Italic.woff2)
content/browser/zen-fonts/JunicodeVF-Roman.woff2 (content/zen-fonts/JunicodeVF-Roman.woff2)
# JS Vendor
content/browser/zen-vendor/tsparticles.confetti.bundle.min.js (content/zen-vendor/tsparticles.confetti.bundle.min.js)

1
src/browser/base/content/zen-images/brand-header.svg Normal file
View File

@@ -0,0 +1 @@
<svg width="1920" height="1080" viewBox="0 0 1920 1080" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_23_113)"><rect width="1920" height="1080" fill="url(#paint0_linear_23_113)"/><circle cx="960" cy="1080" r="740" stroke="#F2F0E3" stroke-width="120"/><circle cx="960" cy="1080" r="558.095" stroke="#F2F0E3" stroke-width="80"/><circle cx="960" cy="1080" r="386.19" stroke="#F2F0E3" stroke-width="60"/><circle cx="960" cy="1080" r="214.286" stroke="#F2F0E3" stroke-width="40"/></g><defs><linearGradient id="paint0_linear_23_113" x1="960" y1="0" x2="960" y2="1080" gradientUnits="userSpaceOnUse"><stop stop-color="#EA6E54"/><stop offset="1" stop-color="#D9664E"/></linearGradient><clipPath id="clip0_23_113"><rect width="1920" height="1080" fill="white"/></clipPath></defs></svg>
Side by Side

After

Width:  |  Height:  |  Size: 803 B

3
src/browser/base/content/zen-popupset.inc.xhtml
View File

@@ -104,7 +104,8 @@
<panel flip="side" type="arrow" orient="vertical" id="PanelUI-zen-gradient-generator" position="bottomright topright" mainview="true" side="left" onpopuphidden="gZenThemePicker.handlePanelClose();">
<panelmultiview id="PanelUI-zen-gradient-generator-multiview" mainViewId="PanelUI-zen-gradient-generator-view">
<panelview id="PanelUI-zen-gradient-generator-view" class="PanelUI-subView zen-theme-picker" role="document" mainview-with-header="true" has-custom-header="true">
<hbox class="zen-theme-picker-gradient"></hbox>
<hbox class="zen-theme-picker-gradient">
</hbox>
<hbox id="PanelUI-zen-gradient-generator-controls">
<vbox id="PanelUI-zen-gradient-generator-options">
<hbox id="PanelUI-zen-gradient-degrees">

4
src/browser/base/content/zen-sidebar-panel.inc.xhtml
View File

@@ -16,8 +16,8 @@
</toolbar>
<vbox id="zen-sidebar-web-panel-browser-containers">
<vbox id="zen-sidebar-introduction-panel" hidden="true">
<html:h1 data-l10n-id="zen-sidebar-introduction-title"/>
<html:p data-l10n-id="zen-sidebar-introduction-description"/>
<html:h1 data-l10n-id="zen-webpanel-introduction-title"/>
<html:p data-l10n-id="zen-webpanel-introduction-description"/>
</vbox>
</vbox>
<toolbar mode="icons" flex="1" id="zen-sidebar-panels-wrapper" fullscreentoolbar="true">

100
src/browser/base/content/zen-styles/zen-animations.css
View File

@@ -1,8 +1,28 @@
/*
* 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/.
*/
@keyframes zen-jello-animation {
0% {
transform: scale3d(0.8, 0.8, 0.8);
}
60% {
transform: scale3d(1.01, 1.01, 1.01);
}
to {
opacity: 1;
transform: scale3d(1, 1, 1);
}
}
@keyframes zen-jello-animation-large {
0% {
transform: scale3d(0.8, 0.8, 0.8);
}
60% {
transform: scale3d(1.02, 1.02, 1.02);
}
@@ -71,7 +91,7 @@
@keyframes zen-slide-in {
from {
transform: translateX(-100%);
transform: translateX(-150%);
opacity: 0;
}
to {
@@ -82,7 +102,7 @@
@keyframes zen-slide-in-reverse {
from {
transform: translateX(100%);
transform: translateX(150%);
opacity: 0;
}
to {
@@ -344,3 +364,79 @@
transform: translateX(-100%) translateY(-50%);
}
}
@keyframes zen-rice-form-out {
0% {
transform: translateX(0);
max-height: 350px;
opacity: 1;
position: relative;
}
50% {
transform: translateX(-100%);
opacity: 0;
position: relative;
}
99% {
transform: translateX(-100%);
opacity: 0;
max-height: 15px;
position: relative;
}
100% {
transform: translateX(-100%);
opacity: 0;
pointer-events: none;
position: absolute;
}
}
@keyframes zen-rice-form-in {
0% {
position: absolute;
transform: translateX(100%);
opacity: 0;
}
99% {
position: absolute;
transform: translateX(0);
opacity: 1;
}
100% {
position: relative;
}
}
@keyframes zen-rice-form-in-2 {
from {
opacity: 0;
transform: translateX(100%);
max-height: 50px;
}
to {
opacity: 1;
transform: translateX(0);
max-height: 450px;
}
}
@keyframes zen-rice-submit-animation {
/* Scale and shake the dialog */
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}

5
src/browser/base/content/zen-styles/zen-branding.css
View File

@@ -1,3 +1,8 @@
/*
* 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/.
*/
@font-face {
font-family: 'Zen-Junicode';

5
src/browser/base/content/zen-styles/zen-browser-container.css
View File

@@ -1,3 +1,8 @@
/*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
:root:not([inDOMFullscreen='true']):not([chromehidden~='location']):not([chromehidden~='toolbar']) {
& #tabbrowser-tabbox #tabbrowser-tabpanels .browserSidebarContainer {
width: -moz-available;

65
src/browser/base/content/zen-styles/zen-browser-ui.css
View File

@@ -1,3 +1,8 @@
/*
* 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/.
*/
#tabbrowser-tabpanels {
background: transparent !important;
@@ -25,6 +30,51 @@
width: 100%;
background: var(--zen-main-browser-background);
will-change: background-color;
&::after {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
pointer-events: none;
transition: backdrop-filter var(--inactive-window-transition);
}
@media (-moz-bool-pref: 'zen.theme.gradient') {
&[animating='true']::after {
background: var(--zen-main-browser-background-old);
backdrop-filter: blur(5px);
animation: zen-main-app-wrapper-animation .6s ease forwards;
transition: 0s;
}
}
@media (-moz-windows-accent-color-in-titlebar) {
background-color: var(--toolbox-non-lwt-bgcolor);
transition: background-color var(--inactive-window-transition);
&:-moz-window-inactive {
background-color: var(--toolbox-non-lwt-bgcolor-inactive);
color: var(--toolbox-non-lwt-textcolor-inactive);
}
&::after {
display: none;
}
}
@media (not (-moz-windows-accent-color-in-titlebar)) and (not (-moz-windows-mica)) {
transition: color var(--inactive-window-transition);
color: var(--toolbox-non-lwt-textcolor-inactive);
&:-moz-window-inactive {
&::after {
backdrop-filter: grayscale(0.8);
}
}
}
&::before {
content: '';
position: fixed;
@@ -64,21 +114,6 @@
& > * {
z-index: 1;
}
@media (-moz-bool-pref: 'zen.theme.gradient') {
&[animating='true']::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--zen-main-browser-background-old);
backdrop-filter: blur(5px);
animation: zen-main-app-wrapper-animation .5s ease-in-out forwards;
border-radius: env(-moz-gtk-csd-titlebar-radius);
}
}
}
#zen-appcontent-wrapper {

9
src/browser/base/content/zen-styles/zen-compact-mode.css
View File

@@ -1,3 +1,8 @@
/*
* 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/.
*/
/* All overrides for compact mode go here */
@media (-moz-bool-pref: 'zen.view.compact') {
@@ -119,7 +124,7 @@
#navigator-toolbox[has-popup-menu],
#navigator-toolbox[movingtab],
#navigator-toolbox:has(.tabbrowser-tab:active),
#navigator-toolbox:has(*:is([open='true'], #nav-bar:focus-within):not(tab):not(.zen-compact-mode-ignore)) {
#navigator-toolbox:has(*:is([panelopen='true'], #nav-bar:focus-within):not(.zen-compact-mode-ignore)) {
&:not([animate='true']) {
transition: left 0.25s ease, right 0.25s ease;
opacity: 1;
@@ -200,7 +205,7 @@
& #zen-appcontent-navbar-container:focus-within,
& #zen-appcontent-navbar-container[zen-user-show],
& #zen-appcontent-navbar-container[has-popup-menu],
& #zen-appcontent-navbar-container:has(*[open='true']) {
& #zen-appcontent-navbar-container:has(*[panelopen='true']) {
opacity: 1;
border-top-width: 1px;

5
src/browser/base/content/zen-styles/zen-glance.css
View File

@@ -1,3 +1,8 @@
/*
* 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/.
*/
.browserSidebarContainer:has([zen-glance-selected]),
.browserSidebarContainer.zen-glance-overlay {

5
src/browser/base/content/zen-styles/zen-gradient-generator.css
View File

@@ -1,3 +1,8 @@
/*
* 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/.
*/
#PanelUI-zen-gradient-generator {
--panel-width: 300px;

7
src/browser/base/content/zen-styles/zen-panel-ui.css
View File

@@ -1,5 +1,10 @@
/*
* 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/.
*/
panel[type='arrow'][animate][animate='open']::part(content) {
animation: zen-jello-animation 0.3s ease-in-out;
animation: zen-jello-animation .35s ease;
}
panel[type='arrow'][animate]:not([animate='open'])::part(content) {

5
src/browser/base/content/zen-styles/zen-panels/bookmarks.css
View File

@@ -1,3 +1,8 @@
/*
* 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/.
*/
#zenEditBookmarkPanelFaviconContainer {
border: 1px solid var(--input-border-color);
width: 100px;

5
src/browser/base/content/zen-styles/zen-panels/extensions.css
View File

@@ -1,3 +1,8 @@
/*
* 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/.
*/
#unified-extensions-manage-extensions {
padding-left: 20px;
}

5
src/browser/base/content/zen-styles/zen-panels/print.css
View File

@@ -1,3 +1,8 @@
/*
* 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/.
*/
.printSettingsBrowser {

5
src/browser/base/content/zen-styles/zen-panels/welcome.css
View File

@@ -1,3 +1,8 @@
/*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
/* Zen Welcome idalog override */
.dialogBox:not(.spotlightBox) {
border: 1px solid var(--zen-dialog-border-color);

5
src/browser/base/content/zen-styles/zen-popup.css
View File

@@ -1,3 +1,8 @@
/*
* 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/.
*/
@import url('chrome://browser/content/zen-styles/zen-panels/bookmarks.css');
@import url('chrome://browser/content/zen-styles/zen-panels/extensions.css');
@import url('chrome://browser/content/zen-styles/zen-panels/print.css');

5
src/browser/base/content/zen-styles/zen-profile-dialog.css
View File

@@ -1,3 +1,8 @@
/*
* 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/.
*/
#PanelUI-zen-profiles {
--menu-panel-width: 19em;
position: relative;

225
src/browser/base/content/zen-styles/zen-rices.css Normal file
View File

@@ -0,0 +1,225 @@
#zen-rice-share-dialog-overlay:not([hidden]) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 3;
display: flex;
justify-content: center;
align-items: center;
}
#zen-rice-share-dialog,
#zen-rice-share-dialog-notice {
color: var(--panel-color);
background: var(--arrowpanel-background);
border-radius: var(--zen-panel-radius);
box-shadow: 0 0 1px 1px hsla(0,0%,0%,.2);;
border: var(--zen-appcontent-border);
overflow: hidden;
animation: zen-jello-animation-large 0.4s ease;
max-width: 400px;
&[animate="true"] {
animation: zen-rice-submit-animation 1s cubic-bezier(.77,0,.18,1);
}
& .zen-rice-share-content {
padding: 10px 0;
border-top: var(--zen-appcontent-border);
background: var(--arrowpanel-background);
position: relative;
align-items: center;
min-height: 50px;
&:has(#zen-rice-share-first-form:not([fade-out])),
&:has(#zen-rice-share-success) {
padding-top: 20px;
}
& > vbox {
width: 100%;
padding: 0 10px;
}
& #zen-rice-share-first-form input[type="text"] {
width: 100%;
padding: 1px 2px;
border: 0;
border-bottom: 1px solid var(--zen-appcontent-border);
background: transparent;
font-style: italic;
font-weight: 600;
}
& #zen-rice-share-name {
font-style: normal !important;
font-size: 24px;
margin-left: 1px;
}
& .indent {
margin-left: 30px;
}
}
& .zen-rice-share-header {
height: 200px;
margin-bottom: -20px;
}
& #zen-rice-share-options {
padding: 10px 0;
max-height: 30px;
overflow: hidden;
transition: max-height 0.3s ease, height 0.3s ease;
&[zen-collapsed="false"] {
max-height: 350px;
}
& > .options-header {
font-weight: 600;
margin-bottom: 5px;
position: relative;
cursor: pointer;
align-items: center;
color: inherit;
-moz-context-properties: fill, fill-opacity;
fill: var(--toolbarbutton-icon-fill);
& label {
width: fit-content;
cursor: pointer;
}
}
& > .options-header image {
transition: transform 0.3s ease;
width: 15px;
height: 15px;
}
&[zen-collapsed="false"] > .options-header image {
transform: rotate(90deg);
}
& > checkbox {
margin-left: 15px;
}
}
& .panel-footer {
margin: 0;
margin-top: 10px;
& button {
justify-content: center;
}
}
#zen-rice-share-error {
border: 1px solid rgba(255, 0, 0, 0.5);
background: rgba(255, 0, 0, 0.1);
padding: 5px;
transition: opacity 0.3s ease;
border-radius: var(--zen-panel-radius);
@starting-style {
opacity: 0;
}
& button {
margin-left: auto;
margin-top: 2px;
}
}
/* Animations */
#zen-rice-share-first-form[fade-out] {
position: absolute;
transform: translateX(-100%);
pointer-events: none;
animation: zen-rice-form-out 0.5s ease;
}
#zen-rice-share-second-form {
animation: zen-rice-form-in 0.5s ease forwards;
justify-content: center;
& > hbox {
width: 100%;
height: 5px;
border-radius: 100px;
border: 1px solid var(--zen-colors-border);
position: relative;
overflow: hidden;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--zen-primary-color);
transition: width 4s cubic-bezier(1, 0, 0, 1);
@starting-style {
width: 0;
}
}
}
&[fade-out] {
position: absolute !important;
animation: zen-rice-form-out 0.5s ease forwards;
}
}
#zen-rice-share-success {
overflow-y: hidden;
max-height: 0px;
animation: zen-rice-form-in-2 0.5s ease forwards;
& > h1 {
margin: 0;
font-size: 20px;
}
& > p {
color: var(--text-color-deemphasized);
}
& label {
margin: 0;
margin-top: 15px;
font-weight: 600;
margin-bottom: 5px;
}
}
}
#zen-rice-share-dialog-notice {
padding: 15px;
& br {
margin-bottom: 10px;
}
& > p {
color: var(--text-color-deemphasized);
margin-top: 10px;
}
.panel-footer {
margin-top: 10px;
align-items: center;
}
}

2
src/browser/base/content/zen-styles/zen-sidebar-panels.css
View File

@@ -243,7 +243,7 @@
font-size: 1.5em;
font-weight: 600;
margin: 0;
margin-bottom: 5px;
margin-bottom: 2px;
}
#zen-sidebar-introduction-panel p {

5
src/browser/base/content/zen-styles/zen-sidebar.css
View File

@@ -1,3 +1,8 @@
/*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
#zen-profile-button {
& stack {

10
src/browser/base/content/zen-styles/zen-single-components.css
View File

@@ -1,3 +1,8 @@
/*
* 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/.
*/
/* Screenshots */
#screenshotsPagePanel {
@@ -60,3 +65,8 @@
.private-browsing-indicator-with-label {
display: none !important;
}
body > #confetti {
z-index: 1;
}

5
src/browser/base/content/zen-styles/zen-tabs.css
View File

@@ -1,3 +1,8 @@
/*
* 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/.
*/
/* Styles for both vertical and horizontal tabs */
@import url('chrome://browser/content/zen-styles/zen-tabs/vertical-tabs.css');
@import url('chrome://browser/content/zen-styles/zen-tabs/horizontal-tabs.css');

5
src/browser/base/content/zen-styles/zen-tabs/horizontal-tabs.css
View File

@@ -1,3 +1,8 @@
/*
* 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/.
*/
@media not (-moz-bool-pref: 'zen.tabs.vertical') {
:root #browser {
display: flex !important;

5
src/browser/base/content/zen-styles/zen-tabs/vertical-tabs-topbuttons-fix.css
View File

@@ -1,3 +1,8 @@
/*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
& #zen-sidebar-top-buttons:has(#zen-sidebar-top-buttons-customization-target:empty) {
max-height: 0 !important;

9
src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
View File

@@ -1,3 +1,8 @@
/*
* 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/.
*/
#tabbrowser-tabs,
#TabsToolbar,
@@ -234,11 +239,11 @@
transition: scale 0.07s ease;
&[fadein='true']:not([zen-essential='true']) {
#tabbrowser-tabs[zen-workspace-animation='previous'] & {
animation: zen-slide-in 0.2s ease;
animation: zen-slide-in 0.3s ease-out;
}
#tabbrowser-tabs[zen-workspace-animation='next'] & {
animation: zen-slide-in-reverse 0.2s ease;
animation: zen-slide-in-reverse 0.3s ease-out;
}
}

5
src/browser/base/content/zen-styles/zen-theme.css
View File

@@ -1,3 +1,8 @@
/*
* 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/.
*/
/* Here, we contain all the theme related variables, for example theme
* colors, border radius, etc.
* We have `--zen-border-radius` and `--zen-primary-color` as variables.

5
src/browser/base/content/zen-styles/zen-toolbar.css
View File

@@ -1,3 +1,8 @@
/*
* 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/.
*/
#nav-bar,
#zen-sidebar-top-buttons {
background: transparent;

5
src/browser/base/content/zen-styles/zen-urlbar.css
View File

@@ -1,3 +1,8 @@
/*
* 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/.
*/
/* URL and tool bars */
#urlbar-container {

5
src/browser/base/content/zen-styles/zen-workspaces.css
View File

@@ -1,3 +1,8 @@
/*
* 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/.
*/
@namespace html 'http://www.w3.org/1999/xhtml';
#zen-workspaces-button {

2
src/browser/base/content/zen-vendor/tsparticles.confetti.bundle.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

8
src/browser/base/zen-components/ZenCommonUtils.mjs
View File

@@ -79,5 +79,13 @@ var gZenCommonActions = {
);
ConfirmationHint.show(document.getElementById("PanelUI-menu-button"), "zen-copy-current-url-confirmation");
}
},
throttle(f, delay) {
let timer = 0;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => f.apply(this, args), delay);
};
}
};

9
src/browser/base/zen-components/ZenCompactMode.mjs
View File

@@ -117,7 +117,9 @@ var gZenCompactModeManager = {
}
this._isAnimating = true;
// Do this so we can get the correct width ONCE compact mode styled have been applied
this.sidebar.setAttribute("animate", "true");
if (this._canAnimateSidebar) {
this.sidebar.setAttribute("animate", "true");
}
window.requestAnimationFrame(() => {
let sidebarWidth = this.getAndApplySidebarWidth();
if (!this._canAnimateSidebar) {
@@ -310,6 +312,11 @@ var gZenCompactModeManager = {
}
}
// If it's a child element but not the target, ignore the event
if (target.contains(event.explicitOriginalTarget) && event.explicitOriginalTarget !== target) {
return;
}
if (this.hoverableElements[i].keepHoverDuration) {
this.flashElement(target, keepHoverDuration, 'has-hover' + target.id, 'zen-has-hover');
} else {

29
src/browser/base/zen-components/ZenGradientGenerator.mjs
View File

@@ -593,7 +593,7 @@
let workspaceTheme = theme || workspace.theme;
await this.foreachWindowAsActive(async (browser) => {
if (!browser.gZenThemePicker._hasInitialized) {
if (!browser.gZenThemePicker?._hasInitialized) {
return;
}
// Do not rebuild if the workspace is not the same as the current one
@@ -612,17 +612,20 @@
}
const appWrapper = browser.document.getElementById('zen-main-app-wrapper');
if (!skipUpdate) {
const appWrapper = browser.document.getElementById('browser');
if (!skipUpdate && !this._animatingBackground) {
this._animatingBackground = true;
appWrapper.removeAttribute('animating');
appWrapper.setAttribute('animating', 'true');
browser.document.body.style.setProperty('--zen-main-browser-background-old',
browser.document.body.style.getPropertyValue('--zen-main-browser-background')
browser.document.documentElement.style.setProperty('--zen-main-browser-background-old',
browser.document.documentElement.style.getPropertyValue('--zen-main-browser-background')
);
browser.window.requestAnimationFrame(() => {
appWrapper.setAttribute('animating', 'true');
setTimeout(() => {
this._animatingBackground = false;
appWrapper.removeAttribute('animating');
}, 500);
browser.document.documentElement.style.removeProperty('--zen-main-browser-background-old');
}, 700);
});
}
@@ -671,6 +674,18 @@
});
}
get riceManager() {
if (!this._riceManager) {
this._riceManager = new window.ZenRiceManager();
}
return this._riceManager;
}
shareTheme() {
const manager = this.riceManager;
manager.openShareDialog();
}
getNativeAccentColor() {
return Services.prefs.getStringPref('zen.theme.accent-color');
}

419
src/browser/base/zen-components/ZenRices.mjs Normal file
View File

@@ -0,0 +1,419 @@
{
const ZEN_RICE_API = Services.prefs.getStringPref("zen.rice.api.url", '');
class ZenRiceCollector {
constructor() {}
clear() {
this._userChrome = null;
this._userContent = null;
this._enabledMods = null;
this._preferences = null;
this._workspaceThemes = null;
}
async gatherAll({
userUserChrome = true, userContent = true,
enabledMods = true, preferences = true,
modPrefs = true, workspaceThemes = true } = {}) {
this.clear();
// Get the mods first, as they may be needed for the preferences
if (enabledMods) {
await this.gatherEnabledMods();
}
await Promise.all([
userUserChrome && this.gatherUserChrome(),
userContent && this.gatherUserContent(),
preferences && this.gatherPreferences({ modPrefs }),
workspaceThemes && this.gatherWorkspaceThemes(),
]);
}
get profileDir() {
return PathUtils.profileDir;
}
async gatherUserChrome() {
try {
const path = PathUtils.join(this.profileDir, 'chrome', 'userChrome.css');
this._userChrome = await IOUtils.readUTF8(path);
} catch (e) {
console.warn("[ZenRiceCollector]: Error reading userChrome.css: ", e);
return null;
}
}
async gatherUserContent() {
try {
const path = PathUtils.join(this.profileDir, 'chrome', 'userContent.css');
this._userContent = await IOUtils.readUTF8(path);
} catch (e) {
console.warn("[ZenRiceCollector]: Error reading userContent.css: ", e);
return null;
}
}
async gatherEnabledMods() {
const activeThemes = await gZenThemesImporter.getEnabledThemes();
if (activeThemes.length === 0) {
return;
}
this._enabledMods = activeThemes;
}
_getThemePrefValue(theme, pref) {
if (pref.type === 'checkbox') {
return Services.prefs.getBoolPref(pref.property);
}
return Services.prefs.getStringPref(pref.property);
}
async gatherPreferences({ modPrefs = true } = {}) {
this._preferences = {};
if (modPrefs && this._enabledMods) {
for (const theme of this._enabledMods) {
const prefs = await ZenThemesCommon.getThemePreferences(theme);
for (const pref of prefs) {
this._preferences[pref.property] = this._getThemePrefValue(theme, pref);
}
}
}
const boolPrefsToCollect = [
'zen.view.use-single-toolbar',
'zen.view.sidebar-expanded',
'zen.tabs.vertical.right-side',
'zen.view.experimental-no-window-controls',
'zen.view.hide-window-controls',
...(gZenOperatingSystemCommonUtils.currentOperatingSystem === "windows"
? ['widget.windows.mica']
: []
),
];
const stringPrefsToCollect = [
'browser.uiCustomization.state'
];
for (const pref of boolPrefsToCollect) {
this._preferences[pref] = Services.prefs.getBoolPref(pref);
}
for (const pref of stringPrefsToCollect) {
this._preferences[pref] = Services.prefs.getStringPref(pref);
}
}
async gatherWorkspaceThemes() {
const workspaces = (await ZenWorkspaces._workspaces()).workspaces;
this._workspaceThemes = workspaces.map(w => w.theme);
}
async packRice(...args) {
await this.gatherAll(...args);
const rice = {
userChrome: this._userChrome,
userContent: this._userContent,
enabledMods: this._enabledMods?.map(t => t.id),
preferences: this._preferences,
workspaceThemes: this._workspaceThemes,
};
return rice;
}
}
class ZenRiceManager {
constructor() {
this._collector = new ZenRiceCollector();
}
init() {
}
get conffettiWrapper() {
if (!this.confetti) {
Services.scriptloader.loadSubScript("chrome://browser/content/zen-vendor/tsparticles.confetti.bundle.min.js", this);
}
return this.confetti;
}
async packRice() {
return await this._collector.packRice();
}
get shareDialog() {
if (this._shareDialog) {
return this._shareDialog;
}
this._shareDialog = window.MozXULElement.parseXULToFragment(`
<vbox id="zen-rice-share-dialog-overlay" hidden="true">
<vbox id="zen-rice-share-dialog-notice">
<h1 data-l10n-id="zen-rice-share-notice" />
<p data-l10n-id="zen-rice-share-notice-description" />
<html:moz-button-group class="panel-footer">
<html:a href="https://docs.zen-browser.app/guides/" target="_blank" data-l10n-id="zen-learn-more-text" onclick="gZenThemePicker.riceManager.openLink(event)" />
<button onclick="gZenThemePicker.riceManager.acceptNotice()" class="footer-button" data-l10n-id="zen-rice-share-accept" slot="primary" default="true" />
</html:moz-button-group>
</vbox>
<vbox id="zen-rice-share-dialog" hidden="true">
<html:img src="chrome://browser/content/zen-images/brand-header.svg" class="zen-rice-share-header" />
<hbox class="zen-rice-share-content">
<vbox id="zen-rice-share-first-form">
<html:input type="text" data-l10n-id="zen-rice-share-name" id="zen-rice-share-name" oninput="gZenThemePicker.riceManager.validateShareDialog()" />
<hbox class="zen-rice-share-author">
<label data-l10n-id="zen-rice-share-author" />
<html:input type="text" data-l10n-id="zen-rice-share-author-input" id="zen-rice-share-author" oninput="gZenThemePicker.riceManager.validateShareDialog();" />
</hbox>
<vbox zen-collapsed="true" id="zen-rice-share-options" onclick="gZenThemePicker.riceManager.toggleOptions(event)">
<hbox class="options-header">
<label data-l10n-id="zen-rice-share-include" />
<image></image>
</hbox>
<checkbox data-l10n-id="zen-rice-share-include-userchrome" id="zen-rice-share-include-userchrome" />
<checkbox data-l10n-id="zen-rice-share-include-usercontent" id="zen-rice-share-include-usercontent" />
<checkbox data-l10n-id="zen-rice-share-include-mods" id="zen-rice-share-include-mods" />
<vbox class="indent">
<checkbox data-l10n-id="zen-rice-share-include-mod-prefs" id="zen-rice-share-include-mod-prefs" />
</vbox>
<checkbox data-l10n-id="zen-rice-share-include-preferences" id="zen-rice-share-include-preferences" />
<checkbox data-l10n-id="zen-rice-share-include-workspace-themes" id="zen-rice-share-include-workspace-themes" />
</vbox>
<html:moz-button-group class="panel-footer">
<button onclick="gZenThemePicker.riceManager.cancel()" class="footer-button" data-l10n-id="zen-rice-share-cancel" />
<button onclick="gZenThemePicker.riceManager.submit()" class="footer-button" data-l10n-id="zen-rice-share-save" default="true" slot="primary" id="zen-rice-share-save" disabled="true" />
</html:moz-button-group>
</vbox>
<vbox id="zen-rice-share-second-form" hidden="true">
<hbox></hbox>
<vbox id="zen-rice-share-error" hidden="true">
<label data-l10n-id="zen-rice-share-error" />
<button onclick="gZenThemePicker.riceManager.resetShareDialog()" data-l10n-id="zen-close-label" class="footer-button" />
</vbox>
</vbox>
<vbox id="zen-rice-share-success" hidden="true">
<h1 data-l10n-id="zen-rice-share-success" />
<p data-l10n-id="zen-rice-share-succes-details" />
<label data-l10n-id="zen-rice-share-success-link" />
<html:input type="text" readonly="true" id="zen-rice-share-success-link" onclick="this.select()" />
<html:moz-button-group class="panel-footer">
<button onclick="gZenThemePicker.riceManager.resetShareDialog()" data-l10n-id="zen-close-label" class="footer-button" slot="primary" default="true" />
</html:moz-button-group>
</vbox>
</hbox>
</vbox>
</vbox>
`);
document.getElementById("zen-main-app-wrapper").appendChild(this._shareDialog);
this._shareDialog = document.getElementById("zen-rice-share-dialog-overlay");
return this._shareDialog;
}
get hasAcceptedNotice() {
return Services.prefs.getBoolPref("zen.rice.share.notice.accepted", false);
}
set hasAcceptedNotice(value) {
Services.prefs.setBoolPref("zen.rice.share.notice.accepted", value);
}
openLink(event) {
event.stopPropagation();
this.cancel();
gZenUIManager.openAndChangeToTab("https://docs.zen-browser.app/guides/");
}
acceptNotice() {
this.hasAcceptedNotice = true;
const notice = document.getElementById("zen-rice-share-dialog-notice");
notice.setAttribute("hidden", "true");
this.openShareDialog();
}
toggleOptions(event) {
if (event.originalTarget.closest(".options-header")) {
const options = document.getElementById("zen-rice-share-options");
options.setAttribute("zen-collapsed", options.getAttribute("zen-collapsed") === "true" ? "false" : "true");
}
this.validateShareDialog();
}
openShareDialog() {
window.docShell.treeOwner
.QueryInterface(Ci.nsIInterfaceRequestor)
.getInterface(Ci.nsIAppWindow)
.rollupAllPopups();
const dialog = this.shareDialog;
dialog.removeAttribute("hidden");
if (!this.hasAcceptedNotice) {
const notice = document.getElementById("zen-rice-share-dialog-notice");
notice.removeAttribute("hidden");
return;
}
document.getElementById("zen-rice-share-dialog").removeAttribute("hidden");
document.getElementById("zen-rice-share-dialog-notice").setAttribute("hidden", "true");
document.getElementById("zen-rice-share-name").focus();
// Initialize the dialog with the current values
this.validateShareDialog();
}
resetShareDialog() {
const dialog = this.shareDialog;
dialog.setAttribute("hidden", "true");
document.getElementById("zen-rice-share-dialog").removeAttribute("animate");
document.getElementById("zen-rice-share-name").value = "";
document.getElementById("zen-rice-share-author").value = "";
document.getElementById("zen-rice-share-save").disabled = true;
document.getElementById("zen-rice-share-first-form").removeAttribute("fade-out");
document.getElementById("zen-rice-share-second-form").setAttribute("hidden", "true");
document.getElementById("zen-rice-share-second-form").removeAttribute("fade-out");
document.getElementById("zen-rice-share-error").setAttribute("hidden", "true");
document.getElementById("zen-rice-share-success").setAttribute("hidden", "true");
document.getElementById("zen-rice-share-options").setAttribute("zen-collapsed", "true");
}
cancel() {
this.resetShareDialog();
}
getAllowedRice() {
return {
userChrome: document.getElementById("zen-rice-share-include-userchrome").checked,
userContent: document.getElementById("zen-rice-share-include-usercontent").checked,
mods: document.getElementById("zen-rice-share-include-mods").checked,
modPrefs: document.getElementById("zen-rice-share-include-mod-prefs").checked,
preferences: document.getElementById("zen-rice-share-include-preferences").checked,
workspaceThemes: document.getElementById("zen-rice-share-include-workspace-themes").checked,
};
}
get userAgent() {
return `ZenBrowser/${Services.appinfo.version} (${gZenOperatingSystemCommonUtils.currentOperatingSystem})`;
}
canShareRice() {
const allowedRice = this.getAllowedRice();
const modsPrefs = document.getElementById("zen-rice-share-include-mod-prefs");
// remove "share mod prefs" if mods are not included
if (!allowedRice.mods) {
allowedRice.modPrefs = false;
modsPrefs.disabled = true;
}
modsPrefs.disabled = !allowedRice.mods;
return Object.values(allowedRice).some(v => v);
}
validateShareDialog() {
const saveButton = document.getElementById("zen-rice-share-save");
const authorInput = document.getElementById("zen-rice-share-author");
const input = document.getElementById("zen-rice-share-name");
saveButton.disabled = !this.canShareRice() || input.value.trim().length < 3 || input.value.trim().length > 30
|| authorInput.value.trim().length < 3 || authorInput.value.trim().length > 15;
}
async submit() {
const firstForm = document.getElementById("zen-rice-share-first-form");
const secondForm = document.getElementById("zen-rice-share-second-form");
firstForm.setAttribute("fade-out", "true");
secondForm.removeAttribute("hidden");
await this._submit();
}
async _submit() {
const allowedRice = this.getAllowedRice();
const rice = await this._collector.packRice(allowedRice);
const name = document.getElementById("zen-rice-share-name").value;
const author = document.getElementById("zen-rice-share-author").value;
const response = await this._sendRice({ name, author, rice });
if (response) {
this.showSuccessDialog(response);
}
}
async _sendRice({ name, author, rice }) {
const headers = new Headers();
headers.append("X-Zen-Rice-Name", name);
headers.append("X-Zen-Rice-Author", author);
headers.append("User-Agent", this.userAgent);
headers.append("Content-Type", "application/json");
headers.append("Accept", "application/json");
let response;
try {
response = await fetch(`${ZEN_RICE_API}/rices`, {
method: "POST",
headers,
body: JSON.stringify(rice),
});
} catch (e) {
this.showErrorMessage("An error occurred while sharing your rice. Please try again later.");
console.error(e);
return null;
}
// Here, response will never be a null object
return await this._verifyResponse(response);
}
async _verifyResponse(response) {
const json = await response.json();
if (!response.ok) {
const message = json.message || "An error occurred while sharing your rice.";
this.showErrorMessage(message);
console.error(json);
return null;
}
return json;
}
showErrorMessage(message) {
const errorBox = document.getElementById("zen-rice-share-error");
errorBox.removeAttribute("hidden");
errorBox.querySelector("label").textContent = message;
}
showSuccessDialog(riceInfo) {
const { slug, token } = riceInfo;
// 'token' is like some sort of password to edit the rice, do NOT expose it
setTimeout(() => {
document.getElementById("zen-rice-share-dialog").setAttribute("animate", "true");
const successBox = document.getElementById("zen-rice-share-success");
document.getElementById("zen-rice-share-second-form").setAttribute("fade-out", "true");
successBox.removeAttribute("hidden");
const link = document.getElementById("zen-rice-share-success-link");
link.value = `${ZEN_RICE_API}/${slug}`;
this.showConffetti();
}, 2000);
}
showConffetti() {
const end = Date.now() + 2500;
function frame() {
this.conffettiWrapper({
angle: 135,
spread: 55,
particleCount: 5,
startVelocity: 55,
origin: { y: 0.6 },
});
this.conffettiWrapper({
angle: 45,
spread: 55,
particleCount: 5,
startVelocity: 55,
origin: { y: 0.6 },
});
this.conffettiWrapper({
angle: 90,
spread: 55,
particleCount: 5,
startVelocity: 55,
origin: { y: 0.6 },
});
if (Date.now() < end) {
requestAnimationFrame(frame.bind(this));
}
}
frame.call(this);
}
}
window.ZenRiceManager = ZenRiceManager;
}

1
src/browser/base/zen-components/ZenSidebarManager.mjs
View File

@@ -250,6 +250,7 @@ class ZenBrowserManagerSidebar extends ZenDOMOperatedFeature {
'#zenWebPanelContextMenu',
'#zen-sidebar-web-panel-splitter',
'#contentAreaContextMenu',
'#zen-sidepanel-button',
].join(', ');
if (target.closest(closestSelector)) {
return;

1
src/browser/base/zen-components/ZenWorkspaces.mjs
View File

@@ -1306,6 +1306,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
return;
}
await SessionStore.promiseInitialized;
this._inChangingWorkspace = true;
try {
await this._performWorkspaceChange(window, onInit);