diff --git a/l10n b/l10n
index 1a15769b8..1db9cb464 160000
--- a/l10n
+++ b/l10n
@@ -1 +1 @@
-Subproject commit 1a15769b8d5add458f7e5716c337e471687f3f25
+Subproject commit 1db9cb464e03cd75c910920360c8389516c9a4fd
diff --git a/src/browser/base/content/zen-glance.inc.xhtml b/src/browser/base/content/zen-glance.inc.xhtml
index 64d5a0703..286a32b11 100644
--- a/src/browser/base/content/zen-glance.inc.xhtml
+++ b/src/browser/base/content/zen-glance.inc.xhtml
@@ -1,4 +1,4 @@
diff --git a/src/browser/base/content/zen-styles/zen-glance.css b/src/browser/base/content/zen-styles/zen-glance.css
index 0662e4e68..91fe6efda 100644
--- a/src/browser/base/content/zen-styles/zen-glance.css
+++ b/src/browser/base/content/zen-styles/zen-glance.css
@@ -36,6 +36,7 @@
appearance: none;
box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.07);
opacity: 0;
+ padding: 8px;
&:hover {
background: light-dark(rgb(41, 41, 41), rgb(204, 204, 204));
@@ -54,6 +55,31 @@
filter: invert(1);
}
}
+
+ & #zen-glance-sidebar-close {
+ width: fit-content;
+ & label {
+ display: block;
+ max-width: 0px;
+ margin: 0;
+ overflow: hidden;
+ transition: max-width 0.2s ease, margin-left 0.2s ease;
+ }
+
+ &[waitconfirmation] {
+ background: rgb(220, 53, 69);
+ color: white;
+ fill: white;
+ & label {
+ max-width: 100px;
+ margin-left: 8px;
+ }
+
+ & image {
+ filter: none;
+ }
+ }
+ }
}
.browserSidebarContainer.zen-glance-overlay {
diff --git a/src/browser/base/content/zen-styles/zen-urlbar.css b/src/browser/base/content/zen-styles/zen-urlbar.css
index 337525531..568790c0b 100644
--- a/src/browser/base/content/zen-styles/zen-urlbar.css
+++ b/src/browser/base/content/zen-styles/zen-urlbar.css
@@ -326,7 +326,7 @@ button.popup-notification-dropmarker {
background: transparent;
&[notificationside='top'] {
- position: absolute;
+ position: fixed;
bottom: calc(var(--zen-element-separation) * 1.5);
right: calc(var(--zen-element-separation) * 1.5);
width: fit-content;
diff --git a/src/browser/base/zen-components/ZenGlanceManager.mjs b/src/browser/base/zen-components/ZenGlanceManager.mjs
index 5f3b6979b..63e2b3bc5 100644
--- a/src/browser/base/zen-components/ZenGlanceManager.mjs
+++ b/src/browser/base/zen-components/ZenGlanceManager.mjs
@@ -6,8 +6,9 @@
#glances = new Map();
#currentGlanceID = null;
+ #confirmationTimeout = null;
+
init() {
- window.addEventListener('keydown', this.onKeyDown.bind(this));
window.addEventListener('TabClose', this.onTabClose.bind(this));
window.addEventListener('TabSelect', this.onLocationChange.bind(this));
@@ -37,17 +38,6 @@
return this.#glances.get(this.#currentGlanceID)?.parentTab;
}
- onKeyDown(event) {
- if (event.defaultPrevented) {
- return;
- }
- if (event.key === 'Escape' && this.#currentGlanceID) {
- event.preventDefault();
- event.stopPropagation();
- this.closeGlance({ onTabClose: true });
- }
- }
-
onOverlayClick(event) {
if (event.target === this.overlay && event.originalTarget !== this.contentWrapper) {
this.closeGlance({ onTabClose: true });
@@ -216,11 +206,22 @@
});
}
- closeGlance({ noAnimation = false, onTabClose = false, setNewID = null, isDifferent = false } = {}) {
+ closeGlance({ noAnimation = false, onTabClose = false, setNewID = null, isDifferent = false, hasFocused = false } = {}) {
if (this._animating || !this.#currentBrowser || this.animatingOpen || this._duringOpening) {
return;
}
+ console.log(hasFocused)
+ if (onTabClose && hasFocused && !this.#confirmationTimeout) {
+ const cancelButton = document.getElementById('zen-glance-sidebar-close');
+ cancelButton.setAttribute('waitconfirmation', true);
+ this.#confirmationTimeout = setTimeout(() => {
+ cancelButton.removeAttribute('waitconfirmation');
+ this.#confirmationTimeout = null;
+ }, 3000);
+ return;
+ }
+
this.browserWrapper.removeAttribute('has-finished-animation');
if (noAnimation) {
this.#currentParentTab.linkedBrowser.closest('.browserSidebarContainer').removeAttribute('style');
@@ -275,7 +276,7 @@
...originalPosition,
opacity: 0,
},
- { type: 'spring', bounce: 0, duration: 0.6, easing: 'ease-in' }
+ { type: 'spring', bounce: 0, duration: 0.5, easing: 'ease-in' }
)
.then(() => {
this.browserWrapper.removeAttribute('animate');
@@ -398,9 +399,18 @@
}
}
- // note: must be async to avoid timing issues
+ clearConfirmationTimeout() {
+ if (this.#confirmationTimeout) {
+ clearTimeout(this.#confirmationTimeout);
+ this.#confirmationTimeout = null;
+ }
+ document.getElementById('zen-glance-sidebar-close')?.removeAttribute('waitconfirmation');
+ }
+
+ // note: must be sync to avoid timing issues
onLocationChange(event) {
const tab = event.target;
+ this.clearConfirmationTimeout();
if (this.animatingFullOpen || this.closingGlance) {
return;
}
@@ -586,8 +596,12 @@
esModuleURI: 'chrome://browser/content/zen-components/actors/ZenGlanceChild.sys.mjs',
events: {
DOMContentLoaded: {},
+ keydown: {
+ capture: true,
+ },
},
},
+ allFrames: true,
matches: ['https://*/*'],
});
}
diff --git a/src/browser/base/zen-components/ZenRices.mjs b/src/browser/base/zen-components/ZenRices.mjs
index cd453aa3c..a2fc0e4b4 100644
--- a/src/browser/base/zen-components/ZenRices.mjs
+++ b/src/browser/base/zen-components/ZenRices.mjs
@@ -176,7 +176,7 @@
diff --git a/src/browser/base/zen-components/ZenViewSplitter.mjs b/src/browser/base/zen-components/ZenViewSplitter.mjs
index b5d9f8ff8..98d082e60 100644
--- a/src/browser/base/zen-components/ZenViewSplitter.mjs
+++ b/src/browser/base/zen-components/ZenViewSplitter.mjs
@@ -246,7 +246,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
paddingLeft: 0,
},
{
- duration: 0.1,
+ duration: 0.08 ,
easing: 'ease-out',
}
),
@@ -261,7 +261,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
: {}),
},
{
- duration: 0.1,
+ duration: 0.08,
easing: 'ease-out',
}
),
@@ -318,7 +318,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
paddingRight: [`${halfWidth}px`, 0],
},
{
- duration: 0.15,
+ duration: 0.1,
easing: 'ease-out',
}
),
@@ -333,7 +333,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
: {}),
},
{
- duration: 0.15,
+ duration: 0.1,
easing: 'ease-out',
}
),
diff --git a/src/browser/base/zen-components/actors/ZenGlanceChild.sys.mjs b/src/browser/base/zen-components/actors/ZenGlanceChild.sys.mjs
index c43451375..9b97d3ae5 100644
--- a/src/browser/base/zen-components/actors/ZenGlanceChild.sys.mjs
+++ b/src/browser/base/zen-components/actors/ZenGlanceChild.sys.mjs
@@ -12,6 +12,9 @@ export class ZenGlanceChild extends JSWindowActorChild {
case 'DOMContentLoaded':
await this.initiateGlance();
break;
+ case 'keydown':
+ this.onKeyDown(event);
+ break;
default:
}
}
@@ -120,4 +123,13 @@ export class ZenGlanceChild extends JSWindowActorChild {
this.openGlance(target);
}
}
+
+ onKeyDown(event) {
+ if (event.defaultPrevented || event.key !== 'Escape') {
+ return;
+ }
+ this.sendAsyncMessage('ZenGlance:CloseGlance', {
+ hasFocused: this.contentWindow.document.activeElement !== this.contentWindow.document.body
+ });
+ }
}
diff --git a/src/browser/base/zen-components/actors/ZenGlanceParent.sys.mjs b/src/browser/base/zen-components/actors/ZenGlanceParent.sys.mjs
index edbb157b3..caeb27618 100644
--- a/src/browser/base/zen-components/actors/ZenGlanceParent.sys.mjs
+++ b/src/browser/base/zen-components/actors/ZenGlanceParent.sys.mjs
@@ -15,6 +15,16 @@ export class ZenGlanceParent extends JSWindowActorParent {
this.openGlance(this.browsingContext.topChromeWindow, message.data);
break;
}
+ case 'ZenGlance:CloseGlance': {
+ const params = {
+ onTabClose: true,
+ ...message.data,
+ };
+ this.browsingContext.topChromeWindow.gZenGlanceManager.closeGlance(params);
+ break;
+ }
+ default:
+ console.warn(`[glance]: Unknown message: ${message.name}`);
}
}