From a0b372e7d95e6987f2cddbee27e9b66e4f589234 Mon Sep 17 00:00:00 2001
From: "mr. M" <mauro.balades@tutanota.com>
Date: Sun, 9 Mar 2025 15:34:19 +0100
Subject: [PATCH] Enhance Zen Glance functionality with confirmation on close
 and improved styling

---
 l10n                                          |  2 +-
 src/browser/base/content/zen-glance.inc.xhtml |  2 +-
 .../base/content/zen-styles/zen-glance.css    | 26 +++++++++++
 .../base/content/zen-styles/zen-urlbar.css    |  2 +-
 .../base/zen-components/ZenGlanceManager.mjs  | 44 ++++++++++++-------
 src/browser/base/zen-components/ZenRices.mjs  |  2 +-
 .../base/zen-components/ZenViewSplitter.mjs   | 10 ++---
 .../actors/ZenGlanceChild.sys.mjs             | 12 +++++
 .../actors/ZenGlanceParent.sys.mjs            | 10 +++++
 9 files changed, 86 insertions(+), 24 deletions(-)

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 @@
 <vbox id="zen-glance-sidebar-container" hidden="true">
-  <toolbarbutton id="zen-glance-sidebar-close" class="toolbarbutton-1" oncommand="gZenGlanceManager.closeGlance({ onTabClose: true })"/>
+  <toolbarbutton id="zen-glance-sidebar-close" data-l10n-id="zen-general-confrim" class="toolbarbutton-1" oncommand="gZenGlanceManager.closeGlance({ onTabClose: true })"/>
   <toolbarbutton id="zen-glance-sidebar-open" class="toolbarbutton-1" oncommand="gZenGlanceManager.fullyOpenGlance()"/>
 </vbox>
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 @@
                   <checkbox data-l10n-id="zen-rice-share-include-workspace-themes" id="zen-rice-share-include-workspace-themes" />
                 </vbox>
                 <html:moz-button-group class="panel-footer">
-                  <button onclick="gZenThemePicker.riceManager.cancel()" class="footer-button" data-l10n-id="zen-rice-share-cancel" />
+                  <button onclick="gZenThemePicker.riceManager.cancel()" class="footer-button" data-l10n-id="zen-general-cancel" />
                   <button onclick="gZenThemePicker.riceManager.submit()" class="footer-button" data-l10n-id="zen-rice-share-save" default="true" slot="primary" id="zen-rice-share-save" disabled="true" />
                 </html:moz-button-group>
               </vbox>
diff --git a/src/browser/base/zen-components/ZenViewSplitter.mjs b/src/browser/base/zen-components/ZenViewSplitter.mjs
index 07cb872cf..6007a1ac1 100644
--- a/src/browser/base/zen-components/ZenViewSplitter.mjs
+++ b/src/browser/base/zen-components/ZenViewSplitter.mjs
@@ -245,7 +245,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
                 paddingLeft: 0,
               },
           {
-            duration: 0.1,
+            duration: 0.08  ,
             easing: 'ease-out',
           }
         ),
@@ -260,7 +260,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
               : {}),
           },
           {
-            duration: 0.1,
+            duration: 0.08,
             easing: 'ease-out',
           }
         ),
@@ -320,7 +320,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
                 paddingRight: [`${halfWidth}px`, 0],
               },
           {
-            duration: 0.15,
+            duration: 0.1,
             easing: 'ease-out',
           }
         ),
@@ -335,7 +335,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
               : {}),
           },
           {
-            duration: 0.15,
+            duration: 0.1,
             easing: 'ease-out',
           }
         ),
@@ -1550,7 +1550,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
     const containerRect = this.fakeBrowser.getBoundingClientRect();
     const padding = Services.prefs.getIntPref('zen.theme.content-element-separation', 0);
     const dropTarget = document.elementFromPoint(
-      side == 'left' ? containerRect.left + containerRect.width + padding + 5 : containerRect.left - padding - 5,
+      dropSide == 'left' ? containerRect.left + containerRect.width + padding + 5 : containerRect.left - padding - 5,
       event.clientY
     );
     const browser = dropTarget?.closest('browser');
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}`);
     }
   }