gh-14882: Add website window drag to settings (gh-14893)

locales/en-US/browser/browser/preferences/zen-preferences.ftl

@@ -48,6 +48,11 @@ zen-look-and-feel-compact-view-top-toolbar =
 zen-look-and-feel-compact-toolbar-flash-popup =
     .label = Briefly make the toolbar popup when switching or opening new tabs in compact mode
 
+zen-look-and-feel-window-drag-header = Window dragging
+zen-look-and-feel-window-drag-description = Move the window by dragging empty space at the top of websites, just like the titlebar.
+zen-window-drag-enabled =
+    .label = Allow dragging the window from web pages
+
 pane-zen-tabs-title = Tab Management
 category-zen-workspaces =
     .tooltiptext = { pane-zen-tabs-title }

src/browser/components/preferences/zen-settings.js

@@ -1184,6 +1184,11 @@ Preferences.addAll([
     type: "bool",
     default: true,
   },
+  {
+    id: "zen.view.drag-window-from-content",
+    type: "bool",
+    default: true,
+  },
   {
     id: "zen.urlbar.behavior",
     type: "string",

src/browser/components/preferences/zenLooksAndFeel.inc.xhtml

@@ -61,6 +61,15 @@
                       data-l10n-id="zen-look-and-feel-compact-toolbar-flash-popup"
                       preference="zen.view.compact.toolbar-flash-popup"/>
       </vbox>
+
+      <label><html:h2 data-l10n-id="zen-look-and-feel-window-drag-header"/></label>
+      <description class="description-deemphasized" data-l10n-id="zen-look-and-feel-window-drag-description" />
+
+      <vbox class="indent">
+            <checkbox id="zenLooksAndFeelWindowDragEnabled"
+                  data-l10n-id="zen-window-drag-enabled"
+                  preference="zen.view.drag-window-from-content"/>
+      </vbox>
 </groupbox>
 
 <hbox id="zenGlanceCategory"

src/zen/media/ZenMediaController.mjs

@@ -164,11 +164,33 @@ class ZenMediaCard {
   }
 
   setHidden(hidden) {
-    if (this.element.hidden === hidden) {
+    if (!hidden) {
+      // Showing cancels a hide that may still be animating.
+      this.element.removeAttribute("zen-hiding");
+      if (this.element.hidden) {
+        this.element.hidden = false;
+        this.manager.onCardVisibilityChanged();
+      }
       return;
     }
-    this.element.hidden = hidden;
-    this.manager.onCardVisibilityChanged();
+
+    if (this.element.hidden || this.element.hasAttribute("zen-hiding")) {
+      return;
+    }
+    this.element.setAttribute("zen-hiding", "true");
+    Promise.allSettled(
+      this.element.getAnimations().map(animation => animation.finished)
+    ).then(() => {
+      if (!this.element.hasAttribute("zen-hiding")) {
+        return;
+      }
+      this.element.removeAttribute("zen-hiding");
+      if (this.shouldBeVisible) {
+        return;
+      }
+      this.element.hidden = true;
+      this.manager.onCardVisibilityChanged();
+    });
   }
 
   // Mirrors the original bar behavior: hide instantly when the card's own

src/zen/media/zen-media-controls.css

@@ -89,7 +89,7 @@
       animation: zen-back-and-forth-text 10s infinite ease-in-out;
     }
 
-    & .zen-media-card:not([zen-removing]) {
+    & .zen-media-card:not([zen-removing], [zen-hiding]) {
       transform: none;
       opacity: 1;
     }
@@ -168,11 +168,9 @@
     transition: none;
   }
 
-  &[zen-removing] {
-    position: absolute;
-    left: 0;
-    width: 100%;
-    transform: none;
+  /* Removed and hiding cards sink down behind the stack while fading out */
+  &[zen-removing],
+  &[zen-hiding] {
     translate: 0 0.5rem;
     opacity: 0;
     filter: blur(2px);
@@ -183,6 +181,16 @@
       filter 0.3s var(--zen-media-stack-easing);
   }
 
+  /* Removed cards additionally leave the flex flow instantly (bottom is
+     set inline to where the card was), so only translate/opacity/filter
+     animate; hiding cards stay in flow until the animation finishes. */
+  &[zen-removing] {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    transform: none;
+  }
+
   &[stack-overflow] {
     display: none;
   }