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() {
|
||||
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');
|
||||
|
||||
@@ -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;
|
||||
},
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,10 +7,10 @@
|
||||
|
||||
: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;
|
||||
&:not([zen-compact-animating]) {
|
||||
& #zen-sidebar-splitter {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#zen-tabbox-wrapper {
|
||||
@@ -25,14 +25,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
#zen-sidebar-top-buttons-customization-target {
|
||||
padding-inline-start: calc(var(--zen-toolbox-padding) - var(--toolbarbutton-outer-padding)) !important;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
&:not([zen-window-buttons-reversed='true']) #zen-appcontent-navbar-container #nav-bar {
|
||||
margin-left: var(--zen-element-separation) !important;
|
||||
}
|
||||
@@ -293,6 +293,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media -moz-pref('zen.view.compact.hide-toolbar') {
|
||||
&:not([zen-single-toolbar='true']) {
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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: {},
|
||||
_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,7 +176,11 @@ var gZenCompactModeManager = {
|
||||
},
|
||||
|
||||
animateCompactMode() {
|
||||
this._animating = true;
|
||||
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;
|
||||
@@ -193,18 +204,19 @@ var gZenCompactModeManager = {
|
||||
let sidebarWidth = this.getAndApplySidebarWidth();
|
||||
if (!canAnimate) {
|
||||
this.sidebar.removeAttribute('animate');
|
||||
this._animating = false;
|
||||
document.documentElement.removeAttribute('zen-compact-animating');
|
||||
resolve();
|
||||
return;
|
||||
}
|
||||
if (canHideSidebar && isCompactMode) {
|
||||
sidebarWidth -= 0.5 * splitterWidth;
|
||||
gZenUIManager.motion
|
||||
.animate(
|
||||
this.sidebar,
|
||||
this.sidebarIsOnRight
|
||||
? {
|
||||
marginRight: `-${sidebarWidth}px`,
|
||||
}
|
||||
: { marginLeft: `-${sidebarWidth}px` },
|
||||
{
|
||||
marginRight: this.sidebarIsOnRight ? `-${sidebarWidth}px` : 0,
|
||||
marginLeft: this.sidebarIsOnRight ? 0 : `-${sidebarWidth}px`,
|
||||
},
|
||||
{
|
||||
ease: 'easeIn',
|
||||
type: 'spring',
|
||||
@@ -213,20 +225,30 @@ var gZenCompactModeManager = {
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
window.requestAnimationFrame(() => {
|
||||
this.sidebar.style.transition = 'none';
|
||||
this.sidebar.style.opacity = 0;
|
||||
this.getAndApplySidebarWidth();
|
||||
setTimeout(() => {
|
||||
this.sidebar.removeAttribute('animate');
|
||||
this.sidebar.style.visibility = 'hidden';
|
||||
document.documentElement.removeAttribute('zen-compact-animating');
|
||||
this.sidebar.style.removeProperty('margin-right');
|
||||
this.sidebar.style.removeProperty('margin-left');
|
||||
this.sidebar.style.removeProperty('transform');
|
||||
if (this.sidebarIsOnRight) {
|
||||
this.sidebar.style.right = `-100%`;
|
||||
} else {
|
||||
this.sidebar.style.left = `-100%`;
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
this._animating = false;
|
||||
this.sidebar.style.removeProperty('visibility');
|
||||
this.sidebar.style.removeProperty('transition');
|
||||
this.sidebar.style.left = '';
|
||||
this.sidebar.style.right = '';
|
||||
this.sidebar.style.removeProperty('opacity');
|
||||
}, 300);
|
||||
});
|
||||
this.sidebar.style.removeProperty('transform');
|
||||
this.sidebar.style.removeProperty('transition');
|
||||
}, 200);
|
||||
|
||||
resolve();
|
||||
}, 0);
|
||||
});
|
||||
} else if (canHideSidebar && !isCompactMode) {
|
||||
document.getElementById('browser').style.overflow = 'clip';
|
||||
@@ -258,16 +280,18 @@ var gZenCompactModeManager = {
|
||||
this.sidebar.style.removeProperty('margin-right');
|
||||
this.sidebar.style.removeProperty('margin-left');
|
||||
this.sidebar.style.removeProperty('transform');
|
||||
this._animating = false;
|
||||
document.documentElement.removeAttribute('zen-compact-animating');
|
||||
setTimeout(() => {
|
||||
this.sidebar.style.removeProperty('transition');
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
} else {
|
||||
this.sidebar.removeAttribute('animate'); // remove the attribute if we are not animating
|
||||
this._animating = false;
|
||||
document.documentElement.removeAttribute('zen-compact-animating');
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
updateContextMenu() {
|
||||
|
||||
@@ -228,10 +228,8 @@
|
||||
|
||||
_clearContainerStyles(container) {
|
||||
const inset = container.style.inset;
|
||||
window.requestAnimationFrame(() => {
|
||||
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);
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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');
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user