Bug 1545554 - Hide Picture-in-Picture toggle when in fullscreen mode. r=jaws
authorMike Conley <mconley@mozilla.com>
Wed, 24 Apr 2019 01:41:59 +0000
changeset 470582 c9f0730a57a6a938339c0d8868704080bb584357
parent 470581 01c3e1ae707de16d3e72bf5a9cfa8bf26d85fec3
child 470583 06ead1ed1ba4ae35b648ef4bfabbf4bcbb02e200
child 470940 cf705095c18d99865fef304ead69f8116c3fee1d
push id35908
push useraciure@mozilla.com
push dateWed, 24 Apr 2019 04:28:40 +0000
treeherdermozilla-central@c9f0730a57a6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs1545554
milestone68.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1545554 - Hide Picture-in-Picture toggle when in fullscreen mode. r=jaws Differential Revision: https://phabricator.services.mozilla.com/D28527
toolkit/content/widgets/videocontrols.js
toolkit/themes/shared/media/videocontrols.css
--- a/toolkit/content/widgets/videocontrols.js
+++ b/toolkit/content/widgets/videocontrols.js
@@ -236,16 +236,23 @@ this.VideoControlsImplWidget = class {
             this.muteButton.setAttribute("disabled", "true");
           }
         }
 
         // We should lock the orientation if we are already in
         // fullscreen.
         this.updateOrientationState(this.isVideoInFullScreen);
 
+        // The video itself might not be fullscreen, but part of the
+        // document might be, in which case we set this attribute to
+        // apply any styles for the DOM fullscreen case.
+        if (this.document.fullscreenElement) {
+          this.videocontrols.setAttribute("inDOMFullscreen", true);
+        }
+
         if (this.isAudioOnly) {
           this.startFadeOut(this.clickToPlay, true);
         }
 
         // If the first frame hasn't loaded, kick off a throbber fade-in.
         if (this.video.readyState >= this.video.HAVE_CURRENT_DATA) {
           this.firstFrameShown = true;
         }
@@ -1365,16 +1372,22 @@ this.VideoControlsImplWidget = class {
         if (this.isVideoInFullScreen) {
           this.fullscreenButton.setAttribute("fullscreened", "true");
         } else {
           this.fullscreenButton.removeAttribute("fullscreened");
         }
       },
 
       onFullscreenChange() {
+        if (this.document.fullscreenElement) {
+          this.videocontrols.setAttribute("inDOMFullscreen", true);
+        } else {
+          this.videocontrols.removeAttribute("inDOMFullscreen");
+        }
+
         this.updateOrientationState(this.isVideoInFullScreen);
 
         if (this.isVideoInFullScreen) {
           this.startFadeOut(this.controlBar, true);
         }
 
         this.setFullscreenButtonState();
       },
@@ -2547,45 +2560,73 @@ this.NoControlsDesktopImplWidget = class
     this.window = this.document.defaultView;
     this.prefs = prefs;
   }
 
   onsetup() {
     this.generateContent();
 
     this.Utils = {
+      handleEvent(event) {
+        switch (event.type) {
+          case "fullscreenchange": {
+            if (this.document.fullscreenElement) {
+              this.videocontrols.setAttribute("inDOMFullscreen", true);
+            } else {
+              this.videocontrols.removeAttribute("inDOMFullscreen");
+            }
+            break;
+          }
+        }
+      },
+
       init(shadowRoot, prefs) {
         this.shadowRoot = shadowRoot;
         this.prefs = prefs;
         this.video = shadowRoot.host;
         this.videocontrols = shadowRoot.firstChild;
         this.document = this.videocontrols.ownerDocument;
         this.window = this.document.defaultView;
         this.shadowRoot = shadowRoot;
 
         this.pictureInPictureToggleButton =
           this.shadowRoot.getElementById("pictureInPictureToggleButton");
 
+        if (this.document.fullscreenElement) {
+          this.videocontrols.setAttribute("inDOMFullscreen", true);
+        }
+
         if (!this.pipToggleEnabled) {
           this.pictureInPictureToggleButton.setAttribute("hidden", true);
         }
+
+        this.document.addEventListener("fullscreenchange", this, {
+          capture: true,
+        });
+      },
+
+      terminate() {
+        this.document.removeEventListener("fullscreenchange", this, {
+          capture: true,
+        });
       },
 
       get pipToggleEnabled() {
         return this.prefs["media.videocontrols.picture-in-picture.video-toggle.enabled"];
       },
     };
     this.Utils.init(this.shadowRoot, this.prefs);
   }
 
   elementStateMatches(element) {
     return true;
   }
 
   destructor() {
+    this.Utils.terminate();
   }
 
   generateContent() {
     /*
      * Pass the markup through XML parser purely for the reason of loading the localization DTD.
      * Remove it when migrate to Fluent.
      */
     const parser = new this.window.DOMParser();
--- a/toolkit/themes/shared/media/videocontrols.css
+++ b/toolkit/themes/shared/media/videocontrols.css
@@ -65,17 +65,18 @@
   /* Do not delete: these variables are accessed by JavaScript directly.
      see videocontrols.js and search for |-width|. */
   --scrubberStack-width: 84px;
   --volumeStack-width: 64px;
 }
 
 .controlsContainer [hidden],
 .controlBar[hidden],
-.pictureInPictureToggleButton[hidden] {
+.pictureInPictureToggleButton[hidden],
+.videocontrols[inDOMFullscreen] > .controlsContainer > .controlsOverlay > .pictureInPictureToggleButton {
   display: none;
 }
 
 .controlBar[size="hidden"] {
   display: none;
 }
 
 .controlsSpacer[hideCursor] {