mirror of
https://github.com/zen-browser/desktop.git
synced 2025-10-15 22:36:23 +00:00
fix: streamline style clearing in ZenGlanceManager and update version numbers in surfer.json
This commit is contained in:
mr. M
@@ -83,8 +83,6 @@
|
|||||||
|
|
||||||
_changeSidebarLocation() {
|
_changeSidebarLocation() {
|
||||||
const kElementsToAppend = ['sidebar-splitter', 'sidebar-box'];
|
const kElementsToAppend = ['sidebar-splitter', 'sidebar-box'];
|
||||||
const appWrapepr = document.getElementById('zen-sidebar-box-container');
|
|
||||||
appWrapepr.setAttribute('hidden', 'true');
|
|
||||||
|
|
||||||
const browser = document.getElementById('browser');
|
const browser = document.getElementById('browser');
|
||||||
const toolbox = document.getElementById('navigator-toolbox');
|
const toolbox = document.getElementById('navigator-toolbox');
|
||||||
|
|||||||
@@ -657,10 +657,10 @@ var gZenVerticalTabsManager = {
|
|||||||
this.navigatorToolbox.after(document.getElementById('zen-sidebar-splitter'));
|
this.navigatorToolbox.after(document.getElementById('zen-sidebar-splitter'));
|
||||||
window.dispatchEvent(new Event('resize'));
|
window.dispatchEvent(new Event('resize'));
|
||||||
gZenCompactModeManager.getAndApplySidebarWidth();
|
gZenCompactModeManager.getAndApplySidebarWidth();
|
||||||
|
gZenUIManager.updateTabsToolbar();
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error(e);
|
console.error(e);
|
||||||
}
|
}
|
||||||
gZenUIManager.updateTabsToolbar();
|
|
||||||
this._isUpdating = false;
|
this._isUpdating = false;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
diff --git a/browser/base/content/browser.xhtml b/browser/base/content/browser.xhtml
|
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
|
--- a/browser/base/content/browser.xhtml
|
||||||
+++ b/browser/base/content/browser.xhtml
|
+++ b/browser/base/content/browser.xhtml
|
||||||
@@ -26,6 +26,7 @@
|
@@ -26,6 +26,7 @@
|
||||||
@@ -27,7 +27,7 @@ index 0d0a559a6473149b50f4bf18d059e86907c4acd3..a5a48ba1d50b3bf74dec3f3d371a7622
|
|||||||
</head>
|
</head>
|
||||||
<html:body xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
|
<html:body xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
|
||||||
# All sets except for popupsets (commands, keys, and stringbundles)
|
# All sets except for popupsets (commands, keys, and stringbundles)
|
||||||
@@ -169,9 +173,13 @@
|
@@ -169,9 +173,11 @@
|
||||||
</vbox>
|
</vbox>
|
||||||
</html:template>
|
</html:template>
|
||||||
|
|
||||||
@@ -37,8 +37,6 @@ index 0d0a559a6473149b50f4bf18d059e86907c4acd3..a5a48ba1d50b3bf74dec3f3d371a7622
|
|||||||
+ <hbox id="zen-main-app-wrapper" flex="1" persist="zen-compact-mode">
|
+ <hbox id="zen-main-app-wrapper" flex="1" persist="zen-compact-mode">
|
||||||
+ <vbox id="zen-toast-container"></vbox>
|
+ <vbox id="zen-toast-container"></vbox>
|
||||||
+ #include navigator-toolbox.inc.xhtml
|
+ #include navigator-toolbox.inc.xhtml
|
||||||
+ <html:span id="zen-sidebar-box-container">
|
|
||||||
+ </html:span>
|
|
||||||
+ #include browser-box.inc.xhtml
|
+ #include browser-box.inc.xhtml
|
||||||
+ </hbox>
|
+ </hbox>
|
||||||
|
|
||||||
|
|||||||
@@ -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-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-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-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-popup.css" />
|
||||||
|
|
||||||
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-compact-mode.css" />
|
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-compact-mode.css" />
|
||||||
|
|||||||
@@ -45,7 +45,6 @@
|
|||||||
content/browser/zen-styles/zen-workspaces.css (content/zen-styles/zen-workspaces.css)
|
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-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-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-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-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-branding.css (content/zen-styles/zen-branding.css)
|
||||||
|
|||||||
@@ -191,3 +191,42 @@
|
|||||||
:root[zen-window-buttons-reversed='true'][zen-right-side='true'] .titlebar-buttonbox-container {
|
:root[zen-window-buttons-reversed='true'][zen-right-side='true'] .titlebar-buttonbox-container {
|
||||||
margin-inline-start: calc(var(--zen-element-separation) - 3px);
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -7,287 +7,288 @@
|
|||||||
|
|
||||||
:root[zen-compact-mode='true']:not([customizing]):not([inDOMFullscreen='true']) {
|
:root[zen-compact-mode='true']:not([customizing]):not([inDOMFullscreen='true']) {
|
||||||
%include zen-tabs/vertical-tabs-topbuttons-fix.css
|
%include zen-tabs/vertical-tabs-topbuttons-fix.css
|
||||||
|
|
||||||
@media -moz-pref('zen.view.compact.hide-tabbar') or -moz-pref('zen.view.use-single-toolbar') {
|
@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']) {
|
&:not([zen-compact-animating]) {
|
||||||
margin-left: var(--zen-sidebar-web-panel-spacing) !important;
|
& #zen-sidebar-splitter {
|
||||||
}
|
display: none !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;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
#zen-sidebar-top-buttons-customization-target {
|
#zen-tabbox-wrapper {
|
||||||
padding-inline-start: calc(var(--zen-toolbox-padding) - var(--toolbarbutton-outer-padding)) !important;
|
/* 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 {
|
#zen-appcontent-wrapper {
|
||||||
display: none !important;
|
& #tabbrowser-tabbox {
|
||||||
}
|
margin-left: 0 !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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not([zen-right-side='true']) #nav-bar {
|
#zen-sidebar-splitter {
|
||||||
margin-left: 0 !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&:not([zen-right-side='true']) #navigator-toolbox {
|
#zen-sidebar-top-buttons-customization-target {
|
||||||
left: calc(-1 * var(--actual-zen-sidebar-width) + 1px);
|
padding-inline-start: calc(var(--zen-toolbox-padding) - var(--toolbarbutton-outer-padding)) !important;
|
||||||
}
|
|
||||||
|
|
||||||
/* 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-right-side='true'] {
|
&:not([zen-window-buttons-reversed='true']) #zen-appcontent-navbar-container #nav-bar {
|
||||||
& #navigator-toolbox {
|
margin-left: var(--zen-element-separation) !important;
|
||||||
--zen-compact-float: calc(var(--zen-element-separation) + 1px);
|
}
|
||||||
|
|
||||||
|
&[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']) {
|
&: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 {
|
&:not([zen-right-side='true']) #navigator-toolbox {
|
||||||
margin-left: 0 !important;
|
left: calc(-1 * var(--actual-zen-sidebar-width) + 1px);
|
||||||
margin-right: 0 !important;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
#navigator-toolbox:not([animate='true']) #titlebar {
|
/* When we have multiple toolbars and the top-toolbar is NOT being hidden,
|
||||||
box-shadow: var(--zen-big-shadow);
|
* we need to adjust the top-padding of the toolbox to account for the
|
||||||
border-radius: calc(var(--zen-native-inner-radius) + var(--zen-element-separation) / 4);
|
* extra toolbar height. */
|
||||||
padding: var(--zen-toolbox-padding) !important;
|
@media not -moz-pref('zen.view.compact.hide-toolbar') {
|
||||||
position: relative;
|
&:not([zen-single-toolbar='true']) {
|
||||||
background: var(--zen-dialog-background);
|
#navigator-toolbox:not([animate='true']) {
|
||||||
outline: 1px solid var(--zen-colors-border-contrast);
|
margin-top: var(--zen-toolbar-height) !important;
|
||||||
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'] {
|
&[zen-right-side='true'] {
|
||||||
padding-top: 0 !important;
|
& #navigator-toolbox {
|
||||||
margin-left: 0 !important;
|
--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') {
|
#navigator-toolbox:not([animate='true']) #titlebar {
|
||||||
background: var(--zen-main-browser-background-toolbar) !important;
|
box-shadow: var(--zen-big-shadow);
|
||||||
background-attachment: fixed !important;
|
border-radius: calc(var(--zen-native-inner-radius) + var(--zen-element-separation) / 4);
|
||||||
background-size: 2000px !important; /* Dont ask me why */
|
padding: var(--zen-toolbox-padding) !important;
|
||||||
/* NOTE: We MUST not add a backdrop-filter if we want the URL
|
position: relative;
|
||||||
* bar to be floating correctly:
|
background: var(--zen-dialog-background);
|
||||||
* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/Containing_block#identifying_the_containing_block */
|
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'] {
|
#navigator-toolbox[zen-has-hover]:not(:has(#urlbar[zen-floating-urlbar='true']:hover)),
|
||||||
transition: left 0.05s ease;
|
#navigator-toolbox[zen-user-show],
|
||||||
visibility: visible;
|
#navigator-toolbox[zen-has-empty-tab],
|
||||||
|
#navigator-toolbox[flash-popup],
|
||||||
#navigator-toolbox:has(&) {
|
#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;
|
opacity: 1;
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&::before {
|
&:not([supress-primary-adjustment='true']) {
|
||||||
content: '';
|
left: calc(var(--zen-element-separation) / -2);
|
||||||
position: absolute;
|
:root[zen-right-side='true'] & {
|
||||||
top: 0;
|
right: calc(var(--zen-element-separation) / -2);
|
||||||
left: 0;
|
left: auto;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -133,7 +133,7 @@
|
|||||||
padding: 5px;
|
padding: 5px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
& .zen-theme-picker-dot-custom {
|
& .zen-theme-picker-dot.custom {
|
||||||
background: var(--zen-theme-picker-dot-color);
|
background: var(--zen-theme-picker-dot-color);
|
||||||
border: 1px solid var(--zen-colors-border);
|
border: 1px solid var(--zen-colors-border);
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
|
|||||||
@@ -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;
|
|
||||||
}
|
|
||||||
@@ -27,7 +27,6 @@ var gZenCompactModeManager = {
|
|||||||
_flashTimeouts: {},
|
_flashTimeouts: {},
|
||||||
_evenListeners: [],
|
_evenListeners: [],
|
||||||
_removeHoverFrames: {},
|
_removeHoverFrames: {},
|
||||||
_animating: false,
|
|
||||||
|
|
||||||
init() {
|
init() {
|
||||||
Services.prefs.addObserver('zen.tabs.vertical.right-side', this._updateSidebarIsOnRight.bind(this));
|
Services.prefs.addObserver('zen.tabs.vertical.right-side', this._updateSidebarIsOnRight.bind(this));
|
||||||
@@ -67,7 +66,7 @@ var gZenCompactModeManager = {
|
|||||||
},
|
},
|
||||||
|
|
||||||
set preference(value) {
|
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
|
// We dont want the user to be able to spam the button
|
||||||
return value;
|
return value;
|
||||||
}
|
}
|
||||||
@@ -146,10 +145,17 @@ var gZenCompactModeManager = {
|
|||||||
this._evenListeners.push(callback);
|
this._evenListeners.push(callback);
|
||||||
},
|
},
|
||||||
|
|
||||||
_updateEvent() {
|
async _updateEvent() {
|
||||||
this._evenListeners.forEach((callback) => callback());
|
// IF we are animating IN, call the callbacks first so we can calculate the width
|
||||||
|
// once the window buttons are shown
|
||||||
this.updateContextMenu();
|
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
|
// NOTE: Dont actually use event, it's just so we make sure
|
||||||
@@ -160,6 +166,7 @@ var gZenCompactModeManager = {
|
|||||||
gZenUIManager.restoreScrollbarState();
|
gZenUIManager.restoreScrollbarState();
|
||||||
// Second variable to get the genuine width of the sidebar
|
// Second variable to get the genuine width of the sidebar
|
||||||
this.sidebar.style.setProperty('--actual-zen-sidebar-width', `${sidebarWidth}px`);
|
this.sidebar.style.setProperty('--actual-zen-sidebar-width', `${sidebarWidth}px`);
|
||||||
|
window.dispatchEvent(new window.Event('resize')); // To recalculate the layout
|
||||||
if (event && this.preference) {
|
if (event && this.preference) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -169,104 +176,121 @@ var gZenCompactModeManager = {
|
|||||||
},
|
},
|
||||||
|
|
||||||
animateCompactMode() {
|
animateCompactMode() {
|
||||||
this._animating = true;
|
return new Promise((resolve) => {
|
||||||
const isCompactMode = this.preference;
|
// Get the splitter width before hiding it (we need to hide it before animating on right)
|
||||||
const canHideSidebar =
|
document.documentElement.setAttribute('zen-compact-animating', 'true');
|
||||||
Services.prefs.getBoolPref('zen.view.compact.hide-tabbar') || gZenVerticalTabsManager._hasSetSingleToolbar;
|
// We need to set the splitter width before hiding it
|
||||||
const canAnimate =
|
let splitterWidth = document.getElementById('zen-sidebar-splitter').getBoundingClientRect().width;
|
||||||
lazyCompactMode.COMPACT_MODE_CAN_ANIMATE_SIDEBAR &&
|
const isCompactMode = this.preference;
|
||||||
!this.sidebar.hasAttribute('zen-user-show') &&
|
const canHideSidebar =
|
||||||
!this.sidebar.hasAttribute('zen-has-empty-tab') &&
|
Services.prefs.getBoolPref('zen.view.compact.hide-tabbar') || gZenVerticalTabsManager._hasSetSingleToolbar;
|
||||||
!this.sidebar.hasAttribute('zen-has-hover');
|
const canAnimate =
|
||||||
// Do this so we can get the correct width ONCE compact mode styled have been applied
|
lazyCompactMode.COMPACT_MODE_CAN_ANIMATE_SIDEBAR &&
|
||||||
const titlebar = this.sidebar.querySelector('#titlebar');
|
!this.sidebar.hasAttribute('zen-user-show') &&
|
||||||
if (canAnimate) {
|
!this.sidebar.hasAttribute('zen-has-empty-tab') &&
|
||||||
this.sidebar.setAttribute('animate', 'true');
|
!this.sidebar.hasAttribute('zen-has-hover');
|
||||||
titlebar.setAttribute('has-animated-padding', 'true');
|
// Do this so we can get the correct width ONCE compact mode styled have been applied
|
||||||
} else {
|
const titlebar = this.sidebar.querySelector('#titlebar');
|
||||||
titlebar.removeAttribute('has-animated-padding');
|
if (canAnimate) {
|
||||||
}
|
this.sidebar.setAttribute('animate', 'true');
|
||||||
this.sidebar.style.removeProperty('margin-right');
|
titlebar.setAttribute('has-animated-padding', 'true');
|
||||||
this.sidebar.style.removeProperty('margin-left');
|
} else {
|
||||||
this.sidebar.style.removeProperty('transform');
|
titlebar.removeAttribute('has-animated-padding');
|
||||||
window.requestAnimationFrame(() => {
|
|
||||||
let sidebarWidth = this.getAndApplySidebarWidth();
|
|
||||||
if (!canAnimate) {
|
|
||||||
this.sidebar.removeAttribute('animate');
|
|
||||||
this._animating = false;
|
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
if (canHideSidebar && isCompactMode) {
|
this.sidebar.style.removeProperty('margin-right');
|
||||||
gZenUIManager.motion
|
this.sidebar.style.removeProperty('margin-left');
|
||||||
.animate(
|
this.sidebar.style.removeProperty('transform');
|
||||||
this.sidebar,
|
window.requestAnimationFrame(() => {
|
||||||
this.sidebarIsOnRight
|
let sidebarWidth = this.getAndApplySidebarWidth();
|
||||||
? {
|
if (!canAnimate) {
|
||||||
marginRight: `-${sidebarWidth}px`,
|
this.sidebar.removeAttribute('animate');
|
||||||
}
|
document.documentElement.removeAttribute('zen-compact-animating');
|
||||||
: { marginLeft: `-${sidebarWidth}px` },
|
resolve();
|
||||||
{
|
return;
|
||||||
ease: 'easeIn',
|
}
|
||||||
type: 'spring',
|
if (canHideSidebar && isCompactMode) {
|
||||||
bounce: 0,
|
sidebarWidth -= 0.5 * splitterWidth;
|
||||||
duration: 0.2,
|
gZenUIManager.motion
|
||||||
}
|
.animate(
|
||||||
)
|
this.sidebar,
|
||||||
.then(() => {
|
{
|
||||||
window.requestAnimationFrame(() => {
|
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.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.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-right');
|
||||||
this.sidebar.style.removeProperty('margin-left');
|
this.sidebar.style.removeProperty('margin-left');
|
||||||
this.sidebar.style.removeProperty('transform');
|
this.sidebar.style.removeProperty('transform');
|
||||||
|
document.documentElement.removeAttribute('zen-compact-animating');
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this._animating = false;
|
|
||||||
this.sidebar.style.removeProperty('visibility');
|
|
||||||
this.sidebar.style.removeProperty('transition');
|
this.sidebar.style.removeProperty('transition');
|
||||||
this.sidebar.style.removeProperty('opacity');
|
resolve();
|
||||||
}, 300);
|
});
|
||||||
});
|
});
|
||||||
});
|
|
||||||
} else if (canHideSidebar && !isCompactMode) {
|
|
||||||
document.getElementById('browser').style.overflow = 'clip';
|
|
||||||
if (this.sidebarIsOnRight) {
|
|
||||||
this.sidebar.style.marginRight = `-${sidebarWidth}px`;
|
|
||||||
} else {
|
} 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;
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
@@ -228,10 +228,8 @@
|
|||||||
|
|
||||||
_clearContainerStyles(container) {
|
_clearContainerStyles(container) {
|
||||||
const inset = container.style.inset;
|
const inset = container.style.inset;
|
||||||
window.requestAnimationFrame(() => {
|
container.removeAttribute('style');
|
||||||
container.removeAttribute('style');
|
container.style.inset = inset;
|
||||||
container.style.inset = inset;
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
closeGlance({
|
closeGlance({
|
||||||
@@ -560,12 +558,13 @@
|
|||||||
|
|
||||||
async fullyOpenGlance({ forSplit = false } = {}) {
|
async fullyOpenGlance({ forSplit = false } = {}) {
|
||||||
this.animatingFullOpen = true;
|
this.animatingFullOpen = true;
|
||||||
this.#currentTab.removeAttribute('zen-glance-tab');
|
this.#currentTab.setAttribute('zen-dont-split-glance', true);
|
||||||
|
|
||||||
gBrowser._insertTabAtIndex(this.#currentTab, {
|
gBrowser._insertTabAtIndex(this.#currentTab, {
|
||||||
index: this.getTabPosition(this.#currentTab),
|
index: this.getTabPosition(this.#currentTab),
|
||||||
});
|
});
|
||||||
|
|
||||||
|
this.#currentTab.removeAttribute('zen-glance-tab');
|
||||||
this._clearContainerStyles(this.browserWrapper);
|
this._clearContainerStyles(this.browserWrapper);
|
||||||
this.browserWrapper.removeAttribute('has-finished-animation');
|
this.browserWrapper.removeAttribute('has-finished-animation');
|
||||||
this.browserWrapper.setAttribute('animate-full', true);
|
this.browserWrapper.setAttribute('animate-full', true);
|
||||||
|
|||||||
@@ -366,13 +366,13 @@
|
|||||||
addColorToCustomList(color) {
|
addColorToCustomList(color) {
|
||||||
const listItems = window.MozXULElement.parseXULToFragment(`
|
const listItems = window.MozXULElement.parseXULToFragment(`
|
||||||
<hbox class="zen-theme-picker-custom-list-item">
|
<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>
|
<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>
|
<toolbarbutton class="zen-theme-picker-custom-list-item-remove toolbarbutton-1" oncommand="gZenThemePicker.removeCustomColor(event);"></toolbarbutton>
|
||||||
</hbox>
|
</hbox>
|
||||||
`);
|
`);
|
||||||
listItems.querySelector('.zen-theme-picker-custom-list-item').setAttribute('data-color', color);
|
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;
|
listItems.querySelector('.zen-theme-picker-custom-list-item-label').textContent = color;
|
||||||
|
|
||||||
this.customColorList.appendChild(listItems);
|
this.customColorList.appendChild(listItems);
|
||||||
|
|||||||
@@ -902,7 +902,9 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
|
|||||||
async onLocationChange(browser) {
|
async onLocationChange(browser) {
|
||||||
this.disableTabRearrangeView();
|
this.disableTabRearrangeView();
|
||||||
let tab = window.gBrowser.getTabForBrowser(browser);
|
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
|
// Extract from parent node so we are not selecting the wrong (current) tab
|
||||||
tab = tab.parentNode.closest('.tabbrowser-tab');
|
tab = tab.parentNode.closest('.tabbrowser-tab');
|
||||||
console.assert(tab, 'Tab not found for zen-glance-tab');
|
console.assert(tab, 'Tab not found for zen-glance-tab');
|
||||||
|
|||||||
@@ -19,7 +19,7 @@
|
|||||||
"brandShortName": "Zen",
|
"brandShortName": "Zen",
|
||||||
"brandFullName": "Zen Browser",
|
"brandFullName": "Zen Browser",
|
||||||
"release": {
|
"release": {
|
||||||
"displayVersion": "1.11b",
|
"displayVersion": "1.11.1b",
|
||||||
"github": {
|
"github": {
|
||||||
"repo": "zen-browser/desktop"
|
"repo": "zen-browser/desktop"
|
||||||
},
|
},
|
||||||
@@ -39,7 +39,7 @@
|
|||||||
"brandShortName": "Twilight",
|
"brandShortName": "Twilight",
|
||||||
"brandFullName": "Zen Twilight",
|
"brandFullName": "Zen Twilight",
|
||||||
"release": {
|
"release": {
|
||||||
"displayVersion": "1.11t",
|
"displayVersion": "1.11.1t",
|
||||||
"github": {
|
"github": {
|
||||||
"repo": "zen-browser/desktop"
|
"repo": "zen-browser/desktop"
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user