gh-10594: Fixed video controls being off screen in compact mode (gh-13428)

src/zen/common/zenThemeModifier.js

@@ -57,10 +57,14 @@
         "ZenViewSplitter:SplitViewActivated",
         "fullscreen",
         "ZenCompactMode:Toggled",
+        "MozDOMFullscreen:Entered",
+        "MozDOMFullscreen:Exited",
       ];
       const separationHandler = this.updateElementSeparation.bind(this);
       for (let eventName of eventsForSeparation) {
-        window.addEventListener(eventName, separationHandler);
+        window.addEventListener(eventName, separationHandler, {
+          capture: true,
+        });
       }
 
       window.addEventListener(
@@ -70,7 +74,9 @@
             Services.prefs.removeObserver(pref, handleEvent);
           }
           for (let eventName of eventsForSeparation) {
-            window.removeEventListener(eventName, separationHandler);
+            window.removeEventListener(eventName, separationHandler, {
+              capture: true,
+            });
           }
         },
         { once: true }
@@ -131,11 +137,19 @@
       }
     },
 
-    updateElementSeparation() {
+    /**
+     * @param {Event|undefined} event - The event that triggered the update, if any.
+     *  If the event is a fullscreen change event, the element separation will be updated accordingly.
+     */
+    updateElementSeparation(event = undefined) {
       const kMinElementSeparation = 0.1; // in px
       let separation = this.elementSeparation;
+      let domFullscreen =
+        event?.type === "MozDOMFullscreen:Entered" ||
+        document.documentElement.hasAttribute("inDOMFullscreen");
       if (
         document.documentElement.hasAttribute("inFullscreen") &&
+        (!domFullscreen || event?.type === "MozDOMFullscreen:Exited") &&
         window.gZenCompactModeManager?.preference &&
         !document
           .getElementById("tabbrowser-tabbox")
@@ -154,6 +168,9 @@
         document.documentElement.setAttribute("zen-no-padding", true);
       } else {
         document.documentElement.removeAttribute("zen-no-padding");
+        if (domFullscreen) {
+          window.windowUtils.flushLayoutWithoutThrottledAnimations();
+        }
       }
     },