mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-10-15 22:36:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: streamline style clearing in ZenGlanceManager and update version numbers in surfer.json

Browse Source
This commit is contained in:
mr. M
2025-04-05 04:15:18 +02:00
parent a7e217152b
commit f2c6d0a6b9
14 changed files with 425 additions and 672 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/browser/base/content/ZenStartup.mjs
View File

@@ -83,8 +83,6 @@
_changeSidebarLocation() {
const kElementsToAppend = ['sidebar-splitter', 'sidebar-box'];
const appWrapepr = document.getElementById('zen-sidebar-box-container');
appWrapepr.setAttribute('hidden', 'true');
const browser = document.getElementById('browser');
const toolbox = document.getElementById('navigator-toolbox');

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

@@ -657,10 +657,10 @@ var gZenVerticalTabsManager = {
this.navigatorToolbox.after(document.getElementById('zen-sidebar-splitter'));
window.dispatchEvent(new Event('resize'));
gZenCompactModeManager.getAndApplySidebarWidth();
gZenUIManager.updateTabsToolbar();
} catch (e) {
console.error(e);
}
gZenUIManager.updateTabsToolbar();
this._isUpdating = false;
},

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

@@ -1,5 +1,5 @@
diff --git a/browser/base/content/browser.xhtml b/browser/base/content/browser.xhtml
index 0d0a559a6473149b50f4bf18d059e86907c4acd3..a5a48ba1d50b3bf74dec3f3d371a76228e246a9e 100644
index 0d0a559a6473149b50f4bf18d059e86907c4acd3..25ad798eb26f04262d069fdaf1f3fb00adec9807 100644
--- a/browser/base/content/browser.xhtml
+++ b/browser/base/content/browser.xhtml
@@ -26,6 +26,7 @@
@@ -27,7 +27,7 @@ index 0d0a559a6473149b50f4bf18d059e86907c4acd3..a5a48ba1d50b3bf74dec3f3d371a7622
</head>
<html:body xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
# All sets except for popupsets (commands, keys, and stringbundles)
@@ -169,9 +173,13 @@
@@ -169,9 +173,11 @@
</vbox>
</html:template>
@@ -37,8 +37,6 @@ index 0d0a559a6473149b50f4bf18d059e86907c4acd3..a5a48ba1d50b3bf74dec3f3d371a7622
+ <hbox id="zen-main-app-wrapper" flex="1" persist="zen-compact-mode">
+ <vbox id="zen-toast-container"></vbox>
+ #include navigator-toolbox.inc.xhtml
+ <html:span id="zen-sidebar-box-container">
+ </html:span>
+ #include browser-box.inc.xhtml
+ </hbox>

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

@@ -19,7 +19,6 @@
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-decks.css" />
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-folders.css" />
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-glance.css" />
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-sidebar-panels.css" />
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-popup.css" />
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-compact-mode.css" />

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

@@ -45,7 +45,6 @@
content/browser/zen-styles/zen-workspaces.css (content/zen-styles/zen-workspaces.css)
content/browser/zen-styles/zen-urlbar.css (content/zen-styles/zen-urlbar.css)
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)

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

@@ -191,3 +191,42 @@
:root[zen-window-buttons-reversed='true'][zen-right-side='true'] .titlebar-buttonbox-container {
margin-inline-start: calc(var(--zen-element-separation) - 3px);
}
.zen-split-view-splitter[orient='vertical'],
#zen-sidebar-splitter {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: var(--zen-element-separation);
background: transparent;
border: none;
cursor: ew-resize;
z-index: 3;
&:is(.zen-split-view-splitter[orient='vertical']) {
/* Bit of a hacky solution, but it works */
width: var(--zen-split-row-gap);
margin-left: calc(var(--zen-element-separation) * -1 - 1px);
height: unset;
cursor: ew-resize;
}
&::before {
height: 50px;
width: 2px;
background: var(--button-primary-bgcolor);
border-radius: 2px;
content: '';
position: absolute;
top: 50%;
left: 50%;
opacity: 0;
transition: opacity 0.1s ease-in-out;
pointer-events: none;
}
&:hover::before {
opacity: 1;
}
}

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

@@ -7,287 +7,288 @@
:root[zen-compact-mode='true']:not([customizing]):not([inDOMFullscreen='true']) {
%include zen-tabs/vertical-tabs-topbuttons-fix.css
@media -moz-pref('zen.view.compact.hide-tabbar') or -moz-pref('zen.view.use-single-toolbar') {
#zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned='true']) {
margin-left: var(--zen-sidebar-web-panel-spacing) !important;
}
#zen-tabbox-wrapper {
/* Remove extra 1px of margine we have to add to the tabbox */
margin-left: var(--zen-element-separation) !important;
margin-right: var(--zen-element-separation) !important;
}
#zen-appcontent-wrapper {
& #tabbrowser-tabbox {
margin-left: 0 !important;
&:not([zen-compact-animating]) {
& #zen-sidebar-splitter {
display: none !important;
}
}
#zen-sidebar-top-buttons-customization-target {
padding-inline-start: calc(var(--zen-toolbox-padding) - var(--toolbarbutton-outer-padding)) !important;
}
#zen-tabbox-wrapper {
/* Remove extra 1px of margine we have to add to the tabbox */
margin-left: var(--zen-element-separation) !important;
margin-right: var(--zen-element-separation) !important;
}
#zen-sidebar-splitter {
display: none !important;
}
&:not([zen-window-buttons-reversed='true']) #zen-appcontent-navbar-container #nav-bar {
margin-left: var(--zen-element-separation) !important;
}
&[zen-window-buttons-reversed='true'] #zen-appcontent-navbar-container #nav-bar {
margin-right: var(--zen-element-separation) !important;
margin-left: calc(var(--zen-element-separation) - 3px) !important;
}
#navigator-toolbox {
--zen-toolbox-max-width: 64px !important;
--zen-compact-float: var(--zen-element-separation);
/* Initial padding for when we are animating */
padding: 0 0 0 var(--zen-toolbox-padding) !important;
&:not([animate='true']) {
position: fixed;
z-index: 10;
transition:
left 0.15s ease,
right 0.15s ease,
opacity 1.5s ease;
top: 0;
bottom: var(--zen-element-separation);
padding: 0 var(--zen-compact-float) !important;
opacity: 0;
:root[zen-single-toolbar='true'] & {
top: calc(var(--zen-element-separation) / 2);
height: calc(100% - var(--zen-element-separation));
}
& #zen-sidebar-top-buttons {
margin: 0 0 calc(var(--zen-toolbox-padding) / 2) 0;
#zen-appcontent-wrapper {
& #tabbrowser-tabbox {
margin-left: 0 !important;
}
}
&:not([zen-right-side='true']) #nav-bar {
margin-left: 0 !important;
#zen-sidebar-splitter {
display: none !important;
}
}
&:not([zen-right-side='true']) #navigator-toolbox {
left: calc(-1 * var(--actual-zen-sidebar-width) + 1px);
}
/* When we have multiple toolbars and the top-toolbar is NOT being hidden,
* we need to adjust the top-padding of the toolbox to account for the
* extra toolbar height. */
@media not -moz-pref('zen.view.compact.hide-toolbar') {
&:not([zen-single-toolbar='true']) {
#navigator-toolbox:not([animate='true']) {
margin-top: var(--zen-toolbar-height) !important;
}
#zen-sidebar-top-buttons-customization-target {
padding-inline-start: calc(var(--zen-toolbox-padding) - var(--toolbarbutton-outer-padding)) !important;
}
}
&[zen-right-side='true'] {
& #navigator-toolbox {
--zen-compact-float: calc(var(--zen-element-separation) + 1px);
&:not([zen-window-buttons-reversed='true']) #zen-appcontent-navbar-container #nav-bar {
margin-left: var(--zen-element-separation) !important;
}
&[zen-window-buttons-reversed='true'] #zen-appcontent-navbar-container #nav-bar {
margin-right: var(--zen-element-separation) !important;
margin-left: calc(var(--zen-element-separation) - 3px) !important;
}
#navigator-toolbox {
--zen-toolbox-max-width: 64px !important;
--zen-compact-float: var(--zen-element-separation);
/* Initial padding for when we are animating */
padding: 0 0 0 var(--zen-toolbox-padding) !important;
&:not([animate='true']) {
right: calc(-1 * var(--actual-zen-sidebar-width) + 1px);
position: fixed;
z-index: 10;
transition:
left 0.15s ease,
right 0.15s ease,
opacity 1.5s ease;
top: 0;
bottom: var(--zen-element-separation);
padding: 0 var(--zen-compact-float) !important;
opacity: 0;
:root[zen-single-toolbar='true'] & {
top: calc(var(--zen-element-separation) / 2);
height: calc(100% - var(--zen-element-separation));
}
& #zen-sidebar-top-buttons {
margin: 0 0 calc(var(--zen-toolbox-padding) / 2) 0;
}
}
&:not([zen-right-side='true']) #nav-bar {
margin-left: 0 !important;
}
}
& .browserSidebarContainer {
margin-left: 0 !important;
margin-right: 0 !important;
&:not([zen-right-side='true']) #navigator-toolbox {
left: calc(-1 * var(--actual-zen-sidebar-width) + 1px);
}
}
#navigator-toolbox:not([animate='true']) #titlebar {
box-shadow: var(--zen-big-shadow);
border-radius: calc(var(--zen-native-inner-radius) + var(--zen-element-separation) / 4);
padding: var(--zen-toolbox-padding) !important;
position: relative;
background: var(--zen-dialog-background);
outline: 1px solid var(--zen-colors-border-contrast);
outline-offset: -1px;
/* times 4 because we have the inner padding and the outter padding to consider */
:root[zen-sidebar-expanded='true'] & {
&[has-animated-padding='true'] {
width: calc(var(--zen-sidebar-width) + var(--zen-toolbox-padding));
}
&:not([has-animated-padding='true']) {
width: calc(var(--zen-sidebar-width) - var(--zen-toolbox-padding));
/* When we have multiple toolbars and the top-toolbar is NOT being hidden,
* we need to adjust the top-padding of the toolbox to account for the
* extra toolbar height. */
@media not -moz-pref('zen.view.compact.hide-toolbar') {
&:not([zen-single-toolbar='true']) {
#navigator-toolbox:not([animate='true']) {
margin-top: var(--zen-toolbar-height) !important;
}
}
}
:root[zen-single-toolbar='true'] {
padding-top: 0 !important;
margin-left: 0 !important;
&[zen-right-side='true'] {
& #navigator-toolbox {
--zen-compact-float: calc(var(--zen-element-separation) + 1px);
&:not([animate='true']) {
right: calc(-1 * var(--actual-zen-sidebar-width) + 1px);
}
}
& .browserSidebarContainer {
margin-left: 0 !important;
margin-right: 0 !important;
}
}
@media -moz-pref('zen.view.compact.color-sidebar') {
background: var(--zen-main-browser-background-toolbar) !important;
background-attachment: fixed !important;
background-size: 2000px !important; /* Dont ask me why */
/* NOTE: We MUST not add a backdrop-filter if we want the URL
* bar to be floating correctly:
* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/Containing_block#identifying_the_containing_block */
#navigator-toolbox:not([animate='true']) #titlebar {
box-shadow: var(--zen-big-shadow);
border-radius: calc(var(--zen-native-inner-radius) + var(--zen-element-separation) / 4);
padding: var(--zen-toolbox-padding) !important;
position: relative;
background: var(--zen-dialog-background);
outline: 1px solid var(--zen-colors-border-contrast);
outline-offset: -1px;
/* times 4 because we have the inner padding and the outter padding to consider */
:root[zen-sidebar-expanded='true'] & {
&[has-animated-padding='true'] {
width: calc(var(--zen-sidebar-width) + var(--zen-toolbox-padding));
}
&:not([has-animated-padding='true']) {
width: calc(var(--zen-sidebar-width) - var(--zen-toolbox-padding));
}
}
:root[zen-single-toolbar='true'] {
padding-top: 0 !important;
margin-left: 0 !important;
}
@media -moz-pref('zen.view.compact.color-sidebar') {
background: var(--zen-main-browser-background-toolbar) !important;
background-attachment: fixed !important;
background-size: 2000px !important; /* Dont ask me why */
/* NOTE: We MUST not add a backdrop-filter if we want the URL
* bar to be floating correctly:
* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/Containing_block#identifying_the_containing_block */
}
& #urlbar[open][zen-floating-urlbar='true'] {
transition: left 0.05s ease;
visibility: visible;
#navigator-toolbox:has(&) {
opacity: 1;
}
}
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url(chrome://browser/content/zen-images/grain-bg.png);
pointer-events: none;
z-index: 0;
opacity: var(--zen-grainy-background-opacity, 0);
mix-blend-mode: overlay;
}
}
& #urlbar[open][zen-floating-urlbar='true'] {
transition: left 0.05s ease;
visibility: visible;
#navigator-toolbox:has(&) {
#navigator-toolbox[zen-has-hover]:not(:has(#urlbar[zen-floating-urlbar='true']:hover)),
#navigator-toolbox[zen-user-show],
#navigator-toolbox[zen-has-empty-tab],
#navigator-toolbox[flash-popup],
#navigator-toolbox[has-popup-menu],
#navigator-toolbox[movingtab],
#navigator-toolbox:has(.tabbrowser-tab:active),
&[zen-renaming-tab='true'] #navigator-toolbox,
#navigator-toolbox:has(
*:is([panelopen='true'], [open='true'], #urlbar:focus-within):not(#urlbar[zen-floating-urlbar='true']):not(tab):not(.zen-compact-mode-ignore)
) {
&:not([animate='true']) {
--zen-compact-mode-func: linear(
0 0%,
0.002748 1%,
0.010544 2%,
0.022757 3%,
0.038804 4%,
0.058151 5%,
0.080308 6%,
0.104828 7.000000000000001%,
0.131301 8%,
0.159358 9%,
0.188662 10%,
0.21891 11%,
0.249828 12%,
0.281172 13%,
0.312724 14.000000000000002%,
0.344288 15%,
0.375693 16%,
0.40679 17%,
0.437447 18%,
0.467549 19%,
0.497 20%,
0.525718 21%,
0.553633 22%,
0.580688 23%,
0.60684 24%,
0.632052 25%,
0.656298 26%,
0.679562 27%,
0.701831 28.000000000000004%,
0.723104 28.999999999999996%,
0.743381 30%,
0.76267 31%,
0.780983 32%,
0.798335 33%,
0.814744 34%,
0.830233 35%,
0.844826 36%,
0.858549 37%,
0.87143 38%,
0.883498 39%,
0.894782 40%,
0.905314 41%,
0.915125 42%,
0.924247 43%,
0.93271 44%,
0.940547 45%,
0.947787 46%,
0.954463 47%,
0.960603 48%,
0.966239 49%,
0.971397 50%,
0.976106 51%,
0.980394 52%,
0.984286 53%,
0.987808 54%,
0.990984 55.00000000000001%,
0.993837 56.00000000000001%,
0.99639 56.99999999999999%,
0.998664 57.99999999999999%,
1.000679 59%,
1.002456 60%,
1.004011 61%,
1.005363 62%,
1.006528 63%,
1.007522 64%,
1.008359 65%,
1.009054 66%,
1.009618 67%,
1.010065 68%,
1.010405 69%,
1.010649 70%,
1.010808 71%,
1.01089 72%,
1.010904 73%,
1.010857 74%,
1.010757 75%,
1.010611 76%,
1.010425 77%,
1.010205 78%,
1.009955 79%,
1.009681 80%,
1.009387 81%,
1.009077 82%,
1.008754 83%,
1.008422 84%,
1.008083 85%,
1.00774 86%,
1.007396 87%,
1.007052 88%,
1.00671 89%,
1.006372 90%,
1.00604 91%,
1.005713 92%,
1.005394 93%,
1.005083 94%,
1.004782 95%,
1.004489 96%,
1.004207 97%,
1.003935 98%,
1.003674 99%,
1.003423 100%
);
transition:
left 0.25s var(--zen-compact-mode-func),
right 0.25s var(--zen-compact-mode-func);
opacity: 1;
}
}
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url(chrome://browser/content/zen-images/grain-bg.png);
pointer-events: none;
z-index: 0;
opacity: var(--zen-grainy-background-opacity, 0);
mix-blend-mode: overlay;
}
}
#navigator-toolbox[zen-has-hover]:not(:has(#urlbar[zen-floating-urlbar='true']:hover)),
#navigator-toolbox[zen-user-show],
#navigator-toolbox[zen-has-empty-tab],
#navigator-toolbox[flash-popup],
#navigator-toolbox[has-popup-menu],
#navigator-toolbox[movingtab],
#navigator-toolbox:has(.tabbrowser-tab:active),
&[zen-renaming-tab='true'] #navigator-toolbox,
#navigator-toolbox:has(
*:is([panelopen='true'], [open='true'], #urlbar:focus-within):not(#urlbar[zen-floating-urlbar='true']):not(tab):not(.zen-compact-mode-ignore)
) {
&:not([animate='true']) {
--zen-compact-mode-func: linear(
0 0%,
0.002748 1%,
0.010544 2%,
0.022757 3%,
0.038804 4%,
0.058151 5%,
0.080308 6%,
0.104828 7.000000000000001%,
0.131301 8%,
0.159358 9%,
0.188662 10%,
0.21891 11%,
0.249828 12%,
0.281172 13%,
0.312724 14.000000000000002%,
0.344288 15%,
0.375693 16%,
0.40679 17%,
0.437447 18%,
0.467549 19%,
0.497 20%,
0.525718 21%,
0.553633 22%,
0.580688 23%,
0.60684 24%,
0.632052 25%,
0.656298 26%,
0.679562 27%,
0.701831 28.000000000000004%,
0.723104 28.999999999999996%,
0.743381 30%,
0.76267 31%,
0.780983 32%,
0.798335 33%,
0.814744 34%,
0.830233 35%,
0.844826 36%,
0.858549 37%,
0.87143 38%,
0.883498 39%,
0.894782 40%,
0.905314 41%,
0.915125 42%,
0.924247 43%,
0.93271 44%,
0.940547 45%,
0.947787 46%,
0.954463 47%,
0.960603 48%,
0.966239 49%,
0.971397 50%,
0.976106 51%,
0.980394 52%,
0.984286 53%,
0.987808 54%,
0.990984 55.00000000000001%,
0.993837 56.00000000000001%,
0.99639 56.99999999999999%,
0.998664 57.99999999999999%,
1.000679 59%,
1.002456 60%,
1.004011 61%,
1.005363 62%,
1.006528 63%,
1.007522 64%,
1.008359 65%,
1.009054 66%,
1.009618 67%,
1.010065 68%,
1.010405 69%,
1.010649 70%,
1.010808 71%,
1.01089 72%,
1.010904 73%,
1.010857 74%,
1.010757 75%,
1.010611 76%,
1.010425 77%,
1.010205 78%,
1.009955 79%,
1.009681 80%,
1.009387 81%,
1.009077 82%,
1.008754 83%,
1.008422 84%,
1.008083 85%,
1.00774 86%,
1.007396 87%,
1.007052 88%,
1.00671 89%,
1.006372 90%,
1.00604 91%,
1.005713 92%,
1.005394 93%,
1.005083 94%,
1.004782 95%,
1.004489 96%,
1.004207 97%,
1.003935 98%,
1.003674 99%,
1.003423 100%
);
transition:
left 0.25s var(--zen-compact-mode-func),
right 0.25s var(--zen-compact-mode-func);
opacity: 1;
&:not([supress-primary-adjustment='true']) {
left: calc(var(--zen-element-separation) / -2);
:root[zen-right-side='true'] & {
right: calc(var(--zen-element-separation) / -2);
left: auto;
&:not([supress-primary-adjustment='true']) {
left: calc(var(--zen-element-separation) / -2);
:root[zen-right-side='true'] & {
right: calc(var(--zen-element-separation) / -2);
left: auto;
}
}
}
}

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

@@ -133,7 +133,7 @@
padding: 5px;
position: relative;
& .zen-theme-picker-dot-custom {
& .zen-theme-picker-dot.custom {
background: var(--zen-theme-picker-dot-color);
border: 1px solid var(--zen-colors-border);
border-radius: 5px;

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

@@ -1,306 +0,0 @@
/*
* 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-panels-wrapper {
/*min-height: 500px;*/
display: flex;
align-items: center;
justify-content: space-between;
align-content: center;
}
#zen-sidebar-panels-sites {
background: transparent;
max-width: 1px;
display: flex;
}
#zen-sidebar-add-panel-button:not(:hover) image,
.zen-sidebar-panel-button:not([selected='true'], #zen-sidebar-add-panel-button) image {
background: transparent !important;
}
.zen-sidebar-panel-button {
width: var(--zen-sidebar-action-button-width);
height: var(--zen-sidebar-action-button-width);
max-height: var(--zen-sidebar-action-button-width);
padding: 0 3px !important;
margin: 0;
justify-content: center;
align-items: center;
cursor: pointer;
}
.zen-sidebar-panel-button image {
border-radius: 10px !important;
border: 2px solid transparent;
}
.zen-sidebar-panel-button:hover image {
background: color-mix(in srgb, var(--toolbarbutton-hover-background) 12%, transparent);
}
.zen-sidebar-panel-button[selected='true'] image {
border-color: var(--zen-primary-color);
}
/** Sidebar view */
#zen-sidebar-web-panel-wrapper {
--zen-default-sidebar-width: 300px;
--zen-sidebar-web-panel-spacing: var(--zen-element-separation);
position: relative;
margin-right: 0;
display: flex;
pointer-events: none;
transition: width 0.3s ease-in-out;
}
#zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[hidden='true']) {
max-width: 0;
padding: 0;
margin: 0;
display: none;
}
#zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned='true']) {
position: absolute;
z-index: 1;
width: calc(100% - var(--zen-sidebar-web-panel-spacing) * 3);
margin: var(--zen-sidebar-web-panel-spacing);
/* Why times 3?
* + 1 for the top margin, making the element overflow the view.
* + 1 for the margin we want to add at the bottom
* + 1 so that the panel can be correctly spaced from the border of the webview
*/
height: calc(100% - var(--zen-sidebar-web-panel-spacing) * 4);
}
#zen-sidebar-web-panel {
border-radius: var(--zen-native-inner-radius);
z-index: 2;
box-shadow: var(--zen-big-shadow);
background: var(--zen-colors-tertiary);
opacity: 0;
animation-delay: 0.1s;
flex-direction: column;
min-width: var(--zen-default-sidebar-width);
max-width: 720px;
min-height: var(--zen-default-sidebar-width);
width: calc(var(--zen-default-sidebar-width) + 200px);
pointer-events: all;
height: calc(100% - 20px);
}
#zen-sidebar-web-panel:not([pinned='true']) {
/* We need to always override the height */
height: unset !important;
}
.zen-sidebar-web-panel-splitter,
.zen-split-view-splitter[orient='vertical'],
#zen-sidebar-splitter {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: var(--zen-element-separation);
background: transparent;
border: none;
cursor: ew-resize;
z-index: 3;
&:is(.zen-split-view-splitter[orient='vertical']) {
/* Bit of a hacky solution, but it works */
width: var(--zen-split-row-gap);
margin-left: calc(var(--zen-element-separation) * -1 - 1px);
height: unset;
cursor: ew-resize;
}
&::before {
height: 50px;
width: 2px;
background: var(--button-primary-bgcolor);
border-radius: 2px;
content: '';
position: absolute;
top: 50%;
left: 50%;
opacity: 0;
transition: opacity 0.1s ease-in-out;
pointer-events: none;
}
&:hover::before {
opacity: 1;
}
}
.zen-sidebar-web-panel-splitter[side='right'] {
left: 100%;
}
.zen-sidebar-web-panel-splitter[side='left'] {
right: 100%;
}
.zen-sidebar-web-panel-splitter[orient='horizontal'] {
width: 100%;
height: 7px;
cursor: ns-resize;
&::before {
display: none;
}
}
.zen-sidebar-web-panel-splitter[side='bottom'] {
top: initial;
bottom: -2px;
}
#zen-sidebar-web-panel[hidden='true'] .zen-sidebar-web-panel-splitter,
#zen-sidebar-web-panel-wrapper[hidden='true'] + .zen-sidebar-web-panel-splitter,
#zen-sidebar-web-panel:not([pinned='true']) .zen-sidebar-web-panel-splitter[orient='horizontal'],
#zen-sidebar-web-panel:not([pinned='true']) .zen-sidebar-web-panel-splitter[side='left'] {
display: none;
margin: 0;
}
#main-window[customizing='true'] #zen-sidebar-web-panel-wrapper {
display: none !important;
}
#zen-sidebar-web-panel:not([hidden='true']) {
display: flex;
}
#zen-sidebar-web-panel[pinned='true'] {
position: absolute;
z-index: 1;
max-height: 100%;
}
#zen-sidebar-web-panel[hidden='true'][pinned='true'] {
display: flex;
pointer-events: none;
}
#zen-sidebar-web-header,
#zen-sidebar-panels-wrapper {
width: 100%;
min-height: var(--zen-toolbar-height) !important;
display: flex;
align-items: center;
padding: 0 5px;
border: var(--zen-appcontent-border);
border-width: 0 !important;
border-bottom-width: 1px !important;
background: transparent;
position: relative;
color-scheme: var(--toolbar-color-scheme);
-moz-window-dragging: no-drag;
--toolbarbutton-inner-padding: var(--zen-toolbar-button-inner-padding) !important;
}
#zen-sidebar-web-header {
justify-content: space-between;
}
#zen-sidebar-web-header toolbarbutton {
fill: color-mix(in srgb, var(--toolbarbutton-icon-fill) 70%, transparent);
}
#zen-sidebar-panels-wrapper {
border-top-width: 1px !important;
border-bottom-width: 0px !important;
}
#zen-sidebar-web-panel-browser-containers {
height: 100%;
position: relative;
}
#zen-sidebar-introduction-panel {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0 auto;
width: 70%;
}
#zen-sidebar-introduction-panel[hidden='true'] {
display: none;
}
#zen-sidebar-introduction-panel h1 {
font-size: 1.5em;
font-weight: 600;
margin: 0;
margin-bottom: 2px;
}
#zen-sidebar-introduction-panel p {
opacity: 0.7;
text-align: center;
}
#zen-sidebar-web-panel browser[zen-sidebar-id] {
height: 100%;
}
#zen-sidebar-web-panel-title {
font-size: 0.9em;
font-weight: 600;
margin: 0 10px;
padding: 0;
color: var(--text-color-deemphasized);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: -moz-available;
text-align: center;
display: block;
}
#zen-sidebar-web-panel[pinned] {
transform-origin: 50% 20%;
}
#zen-sidebar-web-panel[pinned]:not([hidden]) {
animation: better-sidebar-pinned-show 0.15s ease-in-out forwards !important;
}
#zen-sidebar-web-panel[pinned][hidden] {
animation: better-sidebar-pinned-hide 0.15s ease-in-out forwards !important;
}
/** UNPINNED **/
#zen-sidebar-web-panel {
/* Sets perspective */
transform-origin: 50% 20%;
}
#zen-sidebar-web-panel:not([hidden]) #zen-sidebar-introduction-panel * {
opacity: 0;
animation: better-sidebar-intro-show 0.5s 0.4s ease-out forwards !important;
}
#zen-sidebar-web-panel:not([hidden]) #zen-sidebar-introduction-panel p {
animation: better-sidebar-intro-show 0.5s 0.8s ease-out forwards !important;
}
#zen-sidebar-web-panel:not([hidden]) {
animation: better-sidebar-show 0.15s ease-in-out forwards !important;
}
#zen-sidebar-web-panel[hidden] {
animation: better-sidebar-hide 0.15s ease-in-out forwards !important;
}

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

@@ -27,7 +27,6 @@ var gZenCompactModeManager = {
_flashTimeouts: {},
_evenListeners: [],
_removeHoverFrames: {},
_animating: false,
init() {
Services.prefs.addObserver('zen.tabs.vertical.right-side', this._updateSidebarIsOnRight.bind(this));
@@ -67,7 +66,7 @@ var gZenCompactModeManager = {
},
set preference(value) {
if (this.preference === value || this._animating) {
if (this.preference === value || document.documentElement.hasAttribute('zen-compact-animating')) {
// We dont want the user to be able to spam the button
return value;
}
@@ -146,10 +145,17 @@ var gZenCompactModeManager = {
this._evenListeners.push(callback);
},
_updateEvent() {
this._evenListeners.forEach((callback) => callback());
async _updateEvent() {
// IF we are animating IN, call the callbacks first so we can calculate the width
// once the window buttons are shown
this.updateContextMenu();
this.animateCompactMode();
if (!this.preference) {
this._evenListeners.forEach((callback) => callback());
await this.animateCompactMode();
} else {
await this.animateCompactMode();
this._evenListeners.forEach((callback) => callback());
}
},
// NOTE: Dont actually use event, it's just so we make sure
@@ -160,6 +166,7 @@ var gZenCompactModeManager = {
gZenUIManager.restoreScrollbarState();
// Second variable to get the genuine width of the sidebar
this.sidebar.style.setProperty('--actual-zen-sidebar-width', `${sidebarWidth}px`);
window.dispatchEvent(new window.Event('resize')); // To recalculate the layout
if (event && this.preference) {
return;
}
@@ -169,104 +176,121 @@ var gZenCompactModeManager = {
},
animateCompactMode() {
this._animating = true;
const isCompactMode = this.preference;
const canHideSidebar =
Services.prefs.getBoolPref('zen.view.compact.hide-tabbar') || gZenVerticalTabsManager._hasSetSingleToolbar;
const canAnimate =
lazyCompactMode.COMPACT_MODE_CAN_ANIMATE_SIDEBAR &&
!this.sidebar.hasAttribute('zen-user-show') &&
!this.sidebar.hasAttribute('zen-has-empty-tab') &&
!this.sidebar.hasAttribute('zen-has-hover');
// Do this so we can get the correct width ONCE compact mode styled have been applied
const titlebar = this.sidebar.querySelector('#titlebar');
if (canAnimate) {
this.sidebar.setAttribute('animate', 'true');
titlebar.setAttribute('has-animated-padding', 'true');
} else {
titlebar.removeAttribute('has-animated-padding');
}
this.sidebar.style.removeProperty('margin-right');
this.sidebar.style.removeProperty('margin-left');
this.sidebar.style.removeProperty('transform');
window.requestAnimationFrame(() => {
let sidebarWidth = this.getAndApplySidebarWidth();
if (!canAnimate) {
this.sidebar.removeAttribute('animate');
this._animating = false;
return;
return new Promise((resolve) => {
// Get the splitter width before hiding it (we need to hide it before animating on right)
document.documentElement.setAttribute('zen-compact-animating', 'true');
// We need to set the splitter width before hiding it
let splitterWidth = document.getElementById('zen-sidebar-splitter').getBoundingClientRect().width;
const isCompactMode = this.preference;
const canHideSidebar =
Services.prefs.getBoolPref('zen.view.compact.hide-tabbar') || gZenVerticalTabsManager._hasSetSingleToolbar;
const canAnimate =
lazyCompactMode.COMPACT_MODE_CAN_ANIMATE_SIDEBAR &&
!this.sidebar.hasAttribute('zen-user-show') &&
!this.sidebar.hasAttribute('zen-has-empty-tab') &&
!this.sidebar.hasAttribute('zen-has-hover');
// Do this so we can get the correct width ONCE compact mode styled have been applied
const titlebar = this.sidebar.querySelector('#titlebar');
if (canAnimate) {
this.sidebar.setAttribute('animate', 'true');
titlebar.setAttribute('has-animated-padding', 'true');
} else {
titlebar.removeAttribute('has-animated-padding');
}
if (canHideSidebar && isCompactMode) {
gZenUIManager.motion
.animate(
this.sidebar,
this.sidebarIsOnRight
? {
marginRight: `-${sidebarWidth}px`,
}
: { marginLeft: `-${sidebarWidth}px` },
{
ease: 'easeIn',
type: 'spring',
bounce: 0,
duration: 0.2,
}
)
.then(() => {
window.requestAnimationFrame(() => {
this.sidebar.style.removeProperty('margin-right');
this.sidebar.style.removeProperty('margin-left');
this.sidebar.style.removeProperty('transform');
window.requestAnimationFrame(() => {
let sidebarWidth = this.getAndApplySidebarWidth();
if (!canAnimate) {
this.sidebar.removeAttribute('animate');
document.documentElement.removeAttribute('zen-compact-animating');
resolve();
return;
}
if (canHideSidebar && isCompactMode) {
sidebarWidth -= 0.5 * splitterWidth;
gZenUIManager.motion
.animate(
this.sidebar,
{
marginRight: this.sidebarIsOnRight ? `-${sidebarWidth}px` : 0,
marginLeft: this.sidebarIsOnRight ? 0 : `-${sidebarWidth}px`,
},
{
ease: 'easeIn',
type: 'spring',
bounce: 0,
duration: 0.2,
}
)
.then(() => {
this.sidebar.style.transition = 'none';
this.sidebar.style.opacity = 0;
this.getAndApplySidebarWidth();
setTimeout(() => {
this.sidebar.removeAttribute('animate');
document.documentElement.removeAttribute('zen-compact-animating');
this.sidebar.style.removeProperty('margin-right');
this.sidebar.style.removeProperty('margin-left');
if (this.sidebarIsOnRight) {
this.sidebar.style.right = `-100%`;
} else {
this.sidebar.style.left = `-100%`;
}
setTimeout(() => {
this.sidebar.style.left = '';
this.sidebar.style.right = '';
this.sidebar.style.removeProperty('opacity');
this.sidebar.style.removeProperty('transform');
this.sidebar.style.removeProperty('transition');
}, 200);
resolve();
}, 0);
});
} else if (canHideSidebar && !isCompactMode) {
document.getElementById('browser').style.overflow = 'clip';
if (this.sidebarIsOnRight) {
this.sidebar.style.marginRight = `-${sidebarWidth}px`;
} else {
this.sidebar.style.marginLeft = `-${sidebarWidth}px`;
}
gZenUIManager.motion
.animate(
this.sidebar,
this.sidebarIsOnRight
? {
marginRight: [`-${sidebarWidth}px`, 0],
transform: ['translateX(100%)', 'translateX(0)'],
}
: { marginLeft: 0 },
{
ease: 'easeOut',
type: 'spring',
bounce: 0,
duration: 0.2,
}
)
.then(() => {
this.sidebar.removeAttribute('animate');
this.sidebar.style.visibility = 'hidden';
document.getElementById('browser').style.removeProperty('overflow');
this.sidebar.style.transition = 'none';
this.sidebar.style.removeProperty('margin-right');
this.sidebar.style.removeProperty('margin-left');
this.sidebar.style.removeProperty('transform');
document.documentElement.removeAttribute('zen-compact-animating');
setTimeout(() => {
this._animating = false;
this.sidebar.style.removeProperty('visibility');
this.sidebar.style.removeProperty('transition');
this.sidebar.style.removeProperty('opacity');
}, 300);
resolve();
});
});
});
} else if (canHideSidebar && !isCompactMode) {
document.getElementById('browser').style.overflow = 'clip';
if (this.sidebarIsOnRight) {
this.sidebar.style.marginRight = `-${sidebarWidth}px`;
} else {
this.sidebar.style.marginLeft = `-${sidebarWidth}px`;
this.sidebar.removeAttribute('animate'); // remove the attribute if we are not animating
document.documentElement.removeAttribute('zen-compact-animating');
}
gZenUIManager.motion
.animate(
this.sidebar,
this.sidebarIsOnRight
? {
marginRight: [`-${sidebarWidth}px`, 0],
transform: ['translateX(100%)', 'translateX(0)'],
}
: { marginLeft: 0 },
{
ease: 'easeOut',
type: 'spring',
bounce: 0,
duration: 0.2,
}
)
.then(() => {
this.sidebar.removeAttribute('animate');
document.getElementById('browser').style.removeProperty('overflow');
this.sidebar.style.transition = 'none';
this.sidebar.style.removeProperty('margin-right');
this.sidebar.style.removeProperty('margin-left');
this.sidebar.style.removeProperty('transform');
this._animating = false;
setTimeout(() => {
this.sidebar.style.removeProperty('transition');
});
});
} else {
this.sidebar.removeAttribute('animate'); // remove the attribute if we are not animating
this._animating = false;
}
});
});
},

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

@@ -228,10 +228,8 @@
_clearContainerStyles(container) {
const inset = container.style.inset;
window.requestAnimationFrame(() => {
container.removeAttribute('style');
container.style.inset = inset;
});
container.removeAttribute('style');
container.style.inset = inset;
}
closeGlance({
@@ -560,12 +558,13 @@
async fullyOpenGlance({ forSplit = false } = {}) {
this.animatingFullOpen = true;
this.#currentTab.removeAttribute('zen-glance-tab');
this.#currentTab.setAttribute('zen-dont-split-glance', true);
gBrowser._insertTabAtIndex(this.#currentTab, {
index: this.getTabPosition(this.#currentTab),
});
this.#currentTab.removeAttribute('zen-glance-tab');
this._clearContainerStyles(this.browserWrapper);
this.browserWrapper.removeAttribute('has-finished-animation');
this.browserWrapper.setAttribute('animate-full', true);

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

@@ -366,13 +366,13 @@
addColorToCustomList(color) {
const listItems = window.MozXULElement.parseXULToFragment(`
<hbox class="zen-theme-picker-custom-list-item">
<html:div class="zen-theme-picker-dot-custom"></html:div>
<html:div class="zen-theme-picker-dot custom"></html:div>
<label class="zen-theme-picker-custom-list-item-label"></label>
<toolbarbutton class="zen-theme-picker-custom-list-item-remove toolbarbutton-1" oncommand="gZenThemePicker.removeCustomColor(event);"></toolbarbutton>
</hbox>
`);
listItems.querySelector('.zen-theme-picker-custom-list-item').setAttribute('data-color', color);
listItems.querySelector('.zen-theme-picker-dot-custom').style.setProperty('--zen-theme-picker-dot-color', color);
listItems.querySelector('.zen-theme-picker-dot').style.setProperty('--zen-theme-picker-dot-color', color);
listItems.querySelector('.zen-theme-picker-custom-list-item-label').textContent = color;
this.customColorList.appendChild(listItems);

4
src/browser/base/zen-components/ZenViewSplitter.mjs
View File

@@ -902,7 +902,9 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
async onLocationChange(browser) {
this.disableTabRearrangeView();
let tab = window.gBrowser.getTabForBrowser(browser);
if (tab.hasAttribute('zen-glance-tab')) {
const ignoreSplit = tab.hasAttribute('zen-dont-split-glance');
tab.removeAttribute('zen-dont-split-glance');
if (tab.hasAttribute('zen-glance-tab') && !ignoreSplit) {
// Extract from parent node so we are not selecting the wrong (current) tab
tab = tab.parentNode.closest('.tabbrowser-tab');
console.assert(tab, 'Tab not found for zen-glance-tab');

4
surfer.json
View File

@@ -19,7 +19,7 @@
"brandShortName": "Zen",
"brandFullName": "Zen Browser",
"release": {
"displayVersion": "1.11b",
"displayVersion": "1.11.1b",
"github": {
"repo": "zen-browser/desktop"
},
@@ -39,7 +39,7 @@
"brandShortName": "Twilight",
"brandFullName": "Zen Twilight",
"release": {
"displayVersion": "1.11t",
"displayVersion": "1.11.1t",
"github": {
"repo": "zen-browser/desktop"
}