1 files changed, 26 insertions, 54 deletions

diff --git a/toolkit/content/widgets/videocontrols.js b/toolkit/content/widgets/videocontrols.js
index 21c8946e60..73a32164aa 100644
--- a/toolkit/content/widgets/videocontrols.js
+++ b/toolkit/content/widgets/videocontrols.js
@@ -5,7 +5,7 @@
 "use strict";
 
 // This is a UA widget. It runs in per-origin UA widget scope,
-// to be loaded by UAWidgetsChild.jsm.
+// to be loaded by UAWidgetsChild.sys.mjs.
 
 /*
  * This is the class of entry. It will construct the actual implementation
@@ -64,11 +64,8 @@ this.VideoControlsWidget = class {
     // the underlying element state hasn't changed in ways that we
     // care about. This can happen if the property is set again
     // without a value change.
-    if (
-      this.impl &&
-      this.impl.constructor == newImpl &&
-      this.impl.elementStateMatches(this.element)
-    ) {
+    if (this.impl && this.impl.constructor == newImpl) {
+      this.impl.onchange();
       return;
     }
     if (this.impl) {
@@ -458,10 +455,10 @@ this.VideoControlsImplWidget = class {
           this.statusIcon.setAttribute("type", "error");
           this.updateErrorText();
           this.setupStatusFader(true);
-        } else if (VideoControlsWidget.isPictureInPictureVideo(this.video)) {
-          this.setShowPictureInPictureMessage(true);
         }
 
+        this.updatePictureInPictureMessage();
+
         if (this.video.readyState >= this.video.HAVE_METADATA) {
           // According to the spec[1], at the HAVE_METADATA (or later) state, we know
           // the video duration and dimensions, which means we can calculate whether or
@@ -934,6 +931,8 @@ this.VideoControlsImplWidget = class {
             // Since this event come from the layout, this is the only place
             // we are sure of that probing into layout won't trigger or force
             // reflow.
+            // FIXME(emilio): We should rewrite this to just use
+            // ResizeObserver, probably.
             this.reflowTriggeringCallValidator.isReflowTriggeringPropsAllowed = true;
             this.updateReflowedDimensions();
             this.reflowTriggeringCallValidator.isReflowTriggeringPropsAllowed = false;
@@ -1095,7 +1094,10 @@ this.VideoControlsImplWidget = class {
         );
       },
 
-      setShowPictureInPictureMessage(showMessage) {
+      updatePictureInPictureMessage() {
+        let showMessage =
+          !this.hasError() &&
+          VideoControlsWidget.isPictureInPictureVideo(this.video);
         this.pictureInPictureOverlay.hidden = !showMessage;
         this.isShowingPictureInPictureMessage = showMessage;
       },
@@ -1188,7 +1190,7 @@ this.VideoControlsImplWidget = class {
         }
       },
 
-      onScrubberInput(e) {
+      onScrubberInput() {
         const duration = Math.round(this.video.duration * 1000); // in ms
         let time = this.scrubber.value;
 
@@ -1200,7 +1202,7 @@ this.VideoControlsImplWidget = class {
         this.pauseVideoDuringDragging();
       },
 
-      onScrubberChange(e) {
+      onScrubberChange() {
         this.scrubber.isDragging = false;
 
         if (this.isPausedByDragging) {
@@ -1815,12 +1817,7 @@ this.VideoControlsImplWidget = class {
 
       updateMuteButtonState() {
         var muted = this.isEffectivelyMuted;
-
-        if (muted) {
-          this.muteButton.setAttribute("muted", "true");
-        } else {
-          this.muteButton.removeAttribute("muted");
-        }
+        this.muteButton.toggleAttribute("muted", muted);
 
         var id = muted
           ? "videocontrols-unmute-button"
@@ -2026,12 +2023,7 @@ this.VideoControlsImplWidget = class {
       },
 
       setCastingButtonState() {
-        if (this.isCastingOn) {
-          this.castingButton.setAttribute("enabled", "true");
-        } else {
-          this.castingButton.removeAttribute("enabled");
-        }
-
+        this.castingButton.toggleAttribute("enabled", this.isCastingOn);
         this.adjustControlSize();
       },
 
@@ -2058,22 +2050,15 @@ this.VideoControlsImplWidget = class {
       },
 
       setClosedCaptionButtonState() {
-        if (this.isClosedCaptionOn) {
-          this.closedCaptionButton.setAttribute("enabled", "true");
-        } else {
-          this.closedCaptionButton.removeAttribute("enabled");
-        }
-
+        this.closedCaptionButton.toggleAttribute(
+          "enabled",
+          this.isClosedCaptionOn
+        );
         let ttItems = this.textTrackList.childNodes;
 
         for (let tti of ttItems) {
           const idx = +tti.getAttribute("index");
-
-          if (idx == this.currentTextTrackIndex) {
-            tti.setAttribute("aria-checked", "true");
-          } else {
-            tti.setAttribute("aria-checked", "false");
-          }
+          tti.setAttribute("aria-checked", idx == this.currentTextTrackIndex);
         }
 
         this.adjustControlSize();
@@ -2804,10 +2789,6 @@ this.VideoControlsImplWidget = class {
     if (this.Utils.isTouchControls) {
       this.TouchUtils.init(this.shadowRoot, this.Utils);
     }
-    this.shadowRoot.firstChild.dispatchEvent(
-      new this.window.CustomEvent("VideoBindingAttached")
-    );
-
     this._setupEventListeners();
   }
 
@@ -2920,9 +2901,9 @@ this.VideoControlsImplWidget = class {
     this.l10n.translateRoots();
   }
 
-  elementStateMatches(element) {
-    let elementInPiP = VideoControlsWidget.isPictureInPictureVideo(element);
-    return this.isShowingPictureInPictureMessage == elementInPiP;
+  onchange() {
+    this.Utils.updatePictureInPictureMessage();
+    this.shadowRoot.firstChild.removeAttribute("flipped");
   }
 
   teardown() {
@@ -3080,14 +3061,9 @@ this.NoControlsMobileImplWidget = class {
       },
     };
     this.Utils.init(this.shadowRoot);
-    this.Utils.video.dispatchEvent(
-      new this.window.CustomEvent("MozNoControlsVideoBindingAttached")
-    );
   }
 
-  elementStateMatches(element) {
-    return true;
-  }
+  onchange() {}
 
   teardown() {
     this.Utils.terminate();
@@ -3135,9 +3111,7 @@ this.NoControlsPictureInPictureImplWidget = class {
     this.shadowRoot.firstElementChild.setAttribute("localedir", direction);
   }
 
-  elementStateMatches(element) {
-    return true;
-  }
+  onchange() {}
 
   teardown() {}
 
@@ -3312,9 +3286,7 @@ this.NoControlsDesktopImplWidget = class {
     this.Utils.init(this.shadowRoot, this.prefs);
   }
 
-  elementStateMatches(element) {
-    return true;
-  }
+  onchange() {}
 
   teardown() {
     this.Utils.terminate();