forked from ZenBrowserMirrors/zen-desktop
feat: Added better toast management, b=(no-bug), c=common, compact-mode
This commit is contained in:
parent
7a00f3c67c
commit
2f68f77f87
6 changed files with 23 additions and 21 deletions
|
@ -45,7 +45,7 @@ pref('zen.view.compact.color-toolbar', true);
|
||||||
pref('zen.view.compact.color-sidebar', true);
|
pref('zen.view.compact.color-sidebar', true);
|
||||||
pref('zen.view.compact.animate-sidebar', true);
|
pref('zen.view.compact.animate-sidebar', true);
|
||||||
pref('zen.view.compact.show-sidebar-and-toolbar-on-hover', true);
|
pref('zen.view.compact.show-sidebar-and-toolbar-on-hover', true);
|
||||||
pref('zen.view.compact.show-background-tab-toast', false);
|
pref('zen.view.compact.show-background-tab-toast', true);
|
||||||
|
|
||||||
pref('zen.urlbar.replace-newtab', true);
|
pref('zen.urlbar.replace-newtab', true);
|
||||||
pref('zen.urlbar.show-protections-icon', false);
|
pref('zen.urlbar.show-protections-icon', false);
|
||||||
|
|
|
@ -1,12 +1,13 @@
|
||||||
diff --git a/browser/base/content/browser-box.inc.xhtml b/browser/base/content/browser-box.inc.xhtml
|
diff --git a/browser/base/content/browser-box.inc.xhtml b/browser/base/content/browser-box.inc.xhtml
|
||||||
index 7d7e8697f02f90d4f336c9ab0a73a89848e0c21c..d113b439888d26629ce5f6b5d35f8fa12249774b 100644
|
index 7d7e8697f02f90d4f336c9ab0a73a89848e0c21c..ef670b93d3e8b653c4da54b65aa4042fce6b0aa9 100644
|
||||||
--- a/browser/base/content/browser-box.inc.xhtml
|
--- a/browser/base/content/browser-box.inc.xhtml
|
||||||
+++ b/browser/base/content/browser-box.inc.xhtml
|
+++ b/browser/base/content/browser-box.inc.xhtml
|
||||||
@@ -23,7 +23,13 @@
|
@@ -23,7 +23,14 @@
|
||||||
<browser id="sidebar" autoscroll="false" disablehistory="true" disablefullscreen="true" tooltip="aHTMLTooltip"/>
|
<browser id="sidebar" autoscroll="false" disablehistory="true" disablefullscreen="true" tooltip="aHTMLTooltip"/>
|
||||||
</vbox>
|
</vbox>
|
||||||
<splitter id="sidebar-splitter" class="chromeclass-extrachrome sidebar-splitter" resizebefore="sibling" resizeafter="none" hidden="true"/>
|
<splitter id="sidebar-splitter" class="chromeclass-extrachrome sidebar-splitter" resizebefore="sibling" resizeafter="none" hidden="true"/>
|
||||||
+<vbox flex="1" id="zen-appcontent-wrapper">
|
+<vbox flex="1" id="zen-appcontent-wrapper">
|
||||||
|
+ <vbox id="zen-toast-container"></vbox>
|
||||||
+ <html:div id="zen-appcontent-navbar-container"></html:div>
|
+ <html:div id="zen-appcontent-navbar-container"></html:div>
|
||||||
+ <hbox id="zen-tabbox-wrapper" flex="1">
|
+ <hbox id="zen-tabbox-wrapper" flex="1">
|
||||||
<tabbox id="tabbrowser-tabbox" flex="1" tabcontainer="tabbrowser-tabs">
|
<tabbox id="tabbrowser-tabbox" flex="1" tabcontainer="tabbrowser-tabs">
|
||||||
|
|
|
@ -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 51a25aaa5558e6e17246d54a7ed95d5ddf3ecdab..b49984c8711fc9f5f19f0cf6ecca07a8cca0d125 100644
|
index 51a25aaa5558e6e17246d54a7ed95d5ddf3ecdab..08809c25c01d159a9903f1921936b178d51f9875 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 @@
|
||||||
|
@ -22,12 +22,11 @@ index 51a25aaa5558e6e17246d54a7ed95d5ddf3ecdab..b49984c8711fc9f5f19f0cf6ecca07a8
|
||||||
</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)
|
||||||
@@ -127,9 +131,12 @@
|
@@ -127,9 +131,11 @@
|
||||||
</vbox>
|
</vbox>
|
||||||
</html:template>
|
</html:template>
|
||||||
|
|
||||||
+<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>
|
|
||||||
#include navigator-toolbox.inc.xhtml
|
#include navigator-toolbox.inc.xhtml
|
||||||
|
|
||||||
#include browser-box.inc.xhtml
|
#include browser-box.inc.xhtml
|
||||||
|
|
|
@ -4,6 +4,8 @@ var gZenUIManager = {
|
||||||
_hasLoadedDOM: false,
|
_hasLoadedDOM: false,
|
||||||
testingEnabled: Services.prefs.getBoolPref('zen.testing.enabled', false),
|
testingEnabled: Services.prefs.getBoolPref('zen.testing.enabled', false),
|
||||||
|
|
||||||
|
_toastTimeouts: [],
|
||||||
|
|
||||||
init() {
|
init() {
|
||||||
document.addEventListener('popupshowing', this.onPopupShowing.bind(this));
|
document.addEventListener('popupshowing', this.onPopupShowing.bind(this));
|
||||||
document.addEventListener('popuphidden', this.onPopupHidden.bind(this));
|
document.addEventListener('popuphidden', this.onPopupHidden.bind(this));
|
||||||
|
@ -409,24 +411,24 @@ var gZenUIManager = {
|
||||||
this._toastContainer.appendChild(toast);
|
this._toastContainer.appendChild(toast);
|
||||||
if (reused) {
|
if (reused) {
|
||||||
await this.motion.animate(toast, { scale: 0.2 }, { duration: 0.1, bounce: 0 });
|
await this.motion.animate(toast, { scale: 0.2 }, { duration: 0.1, bounce: 0 });
|
||||||
toast._useCount++;
|
|
||||||
} else {
|
|
||||||
toast._useCount = 1;
|
|
||||||
}
|
}
|
||||||
if (!toast.style.hasOwnProperty('transform')) {
|
if (!toast.style.hasOwnProperty('transform')) {
|
||||||
toast.style.transform = 'scale(0)';
|
toast.style.transform = 'scale(0)';
|
||||||
}
|
}
|
||||||
await this.motion.animate(toast, { scale: 1 }, { type: 'spring', bounce: 0.2, duration: 0.5 });
|
await this.motion.animate(toast, { scale: 1 }, { type: 'spring', bounce: 0.2, duration: 0.5 });
|
||||||
await new Promise((resolve) => setTimeout(resolve, 3000));
|
if (this._toastTimeouts[messageId]) {
|
||||||
if (toast._useCount <= 1) {
|
clearTimeout(this._toastTimeouts[messageId]);
|
||||||
await this.motion.animate(toast, { opacity: [1, 0], scale: [1, 0.5] }, { duration: 0.2, bounce: 0 });
|
}
|
||||||
|
this._toastTimeouts[messageId] = setTimeout(() => {
|
||||||
|
this.motion
|
||||||
|
.animate(toast, { opacity: [1, 0], scale: [1, 0.5] }, { duration: 0.2, bounce: 0 })
|
||||||
|
.then(() => {
|
||||||
toast.remove();
|
toast.remove();
|
||||||
if (!this._toastContainer.hasChildNodes()) {
|
if (this._toastContainer.children.length === 0) {
|
||||||
this._toastContainer.setAttribute('hidden', 'true');
|
this._toastContainer.setAttribute('hidden', true);
|
||||||
}
|
}
|
||||||
return;
|
});
|
||||||
}
|
}, options.timeout || 3000);
|
||||||
toast._useCount--;
|
|
||||||
},
|
},
|
||||||
|
|
||||||
get panelUIPosition() {
|
get panelUIPosition() {
|
||||||
|
|
|
@ -369,13 +369,13 @@ menuitem {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: max-content;
|
width: max-content;
|
||||||
font-size: medium;
|
font-size: small;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
transform-origin: top center;
|
transform-origin: top center;
|
||||||
|
|
||||||
& .description {
|
& .description {
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
font-size: small;
|
font-size: smaller;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -560,7 +560,7 @@ var gZenCompactModeManager = {
|
||||||
},
|
},
|
||||||
|
|
||||||
async _onTabOpen(tab, inBackground) {
|
async _onTabOpen(tab, inBackground) {
|
||||||
if (inBackground && this.preference && !this.isSidebarPotentiallyOpen() && this._canShowBackgroundTabToast) {
|
if (inBackground && this.preference && !this.isSidebarPotentiallyOpen() && this._canShowBackgroundTabToast && !gZenGlanceManager._animating) {
|
||||||
gZenUIManager.showToast('zen-background-tab-opened-toast');
|
gZenUIManager.showToast('zen-background-tab-opened-toast');
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue