Bug 1483408 - Set focus to the video element when the media document loads r=Gijs

For some reason we might miss the initial focus event. This ensures the video
element is focused when the document loads.

Differential Revision: https://phabricator.services.mozilla.com/D3444

--HG--
extra : moz-landing-system : lando

toolkit/content/TopLevelVideoDocument.js

@@ -4,43 +4,52 @@
 
 "use strict";
 
-// <video> is used for top-level audio documents as well
-let videoElement = document.getElementsByTagName("video")[0];
+// Hide our variables from the web content, even though the spec allows them
+// (and the DOM) to be accessible (see bug 1474832)
+{
+  // <video> is used for top-level audio documents as well
+  let videoElement = document.getElementsByTagName("video")[0];
 
-// Redirect focus to the video element whenever the document receives
-// focus.
-document.addEventListener("focus", (e) => {
-  // We don't want to retarget focus if it goes to the controls in
-  // the video element. Because they're anonymous content, the target
-  // will be the video element in that case. Avoid calling .focus()
-  // for those events:
-  if (e.target == videoElement) {
-    return;
-  }
-  videoElement.focus();
-}, true);
-
-// Handle fullscreen mode
-document.addEventListener("keypress", ev => {
-  // Maximize the standalone video when pressing F11,
-  // but ignore audio elements
-  if (ev.key == "F11" && videoElement.videoWidth != 0 && videoElement.videoHeight != 0) {
-    // If we're in browser fullscreen mode, it means the user pressed F11
-    // while browser chrome or another tab had focus.
-    // Don't break leaving that mode, so do nothing here.
-    if (window.fullScreen) {
+  let setFocusToVideoElement = function(e) {
+    // We don't want to retarget focus if it goes to the controls in
+    // the video element. Because they're anonymous content, the target
+    // will be the video element in that case. Avoid calling .focus()
+    // for those events:
+    if (e && e.target == videoElement) {
       return;
     }
+    videoElement.focus();
+  };
 
-    // If we're not in browser fullscreen mode, prevent entering into that,
-    // so we don't end up there after pressing Esc.
-    ev.preventDefault();
-    ev.stopPropagation();
+  // Redirect focus to the video element whenever the document receives
+  // focus.
+  document.addEventListener("focus", setFocusToVideoElement, true);
 
-    if (!document.mozFullScreenElement) {
-      videoElement.mozRequestFullScreen();
-    } else {
-      document.mozCancelFullScreen();
+  // Focus on the video in the newly created document.
+  setFocusToVideoElement();
+
+  // Handle fullscreen mode
+  document.addEventListener("keypress", ev => {
+    // Maximize the standalone video when pressing F11,
+    // but ignore audio elements
+    if (ev.key == "F11" && videoElement.videoWidth != 0 && videoElement.videoHeight != 0) {
+      // If we're in browser fullscreen mode, it means the user pressed F11
+      // while browser chrome or another tab had focus.
+      // Don't break leaving that mode, so do nothing here.
+      if (window.fullScreen) {
+        return;
+      }
+
+      // If we're not in browser fullscreen mode, prevent entering into that,
+      // so we don't end up there after pressing Esc.
+      ev.preventDefault();
+      ev.stopPropagation();
+
+      if (!document.mozFullScreenElement) {
+        videoElement.mozRequestFullScreen();
+      } else {
+        document.mozCancelFullScreen();
+      }
     }
-  }
-});
+  });
+}

toolkit/content/tests/widgets/test_videocontrols_standalone.html

@@ -24,6 +24,9 @@ function getMediaElement(aWindow) {
 var popup = window.open("seek_with_sound.ogg");
 popup.addEventListener("load", function() {
   var video = getMediaElement(popup);
+
+  is(popup.document.activeElement, video, "Document should load with focus moved to the video element.");
+
   if (!video.paused)
     runTestVideo(video);
   else {
@@ -52,6 +55,9 @@ function runTestAudioPre() {
   popup = window.open("audio.ogg");
   popup.addEventListener("load", function() {
     var audio = getMediaElement(popup);
+
+    is(popup.document.activeElement, audio, "Document should load with focus moved to the video element.");
+
     if (!audio.paused)
       runTestAudio(audio);
     else {