Bug 1474574 - Ensure <video> is the only focusable element in TopLevelVideoDocument r=Gijs draft
authorTimothy Guan-tin Chien <timdream@gmail.com>
Wed, 11 Jul 2018 11:51:48 +0800
changeset 816419 8bbc787c7e5dd3d4351270b17f521f49b0f1a21c
parent 816349 3edc9c3ae818490ed36b8bfc8ffdfc9e222b41db
push id115842
push usertimdream@gmail.com
push dateWed, 11 Jul 2018 08:34:36 +0000
reviewersGijs
bugs1474574
milestone63.0a1
Bug 1474574 - Ensure <video> is the only focusable element in TopLevelVideoDocument r=Gijs Instead of re-dispatch an untrusted event, simply make sure the keyboard event is handled by the video controls. MozReview-Commit-ID: 9Kj7E3UP77w
layout/style/TopLevelVideoDocument.css
toolkit/content/TopLevelVideoDocument.js
--- a/layout/style/TopLevelVideoDocument.css
+++ b/layout/style/TopLevelVideoDocument.css
@@ -8,25 +8,27 @@
   are top level (e.g. not iframes).
 */
 
 body {
   height: 100%;
   width: 100%;
   margin: 0;
   padding: 0;
+  -moz-user-focus: ignore;
 }
 
 video {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   margin: auto;
   max-width: 100%;
   max-height: 100%;
   -moz-user-select: none;
+  -moz-user-focus: normal;
 }
 
 video:focus {
   outline-width: 0;
 }
--- a/toolkit/content/TopLevelVideoDocument.js
+++ b/toolkit/content/TopLevelVideoDocument.js
@@ -2,23 +2,22 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 // <video> is used for top-level audio documents as well
 let videoElement = document.getElementsByTagName("video")[0];
 
-// 1. Handle fullscreen mode;
-// 2. Send keystrokes to the video element if the body element is focused,
-//    to be received by the event listener in videocontrols.xml.
+// Redirect focus to the video element whenever the document receives
+// focus.
+document.addEventListener("focus", () => videoElement.focus(), true);
+
+// Handle fullscreen mode
 document.addEventListener("keypress", ev => {
-  if (ev.synthetic) // prevent recursion
-    return;
-
   // 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;
@@ -29,20 +28,10 @@ document.addEventListener("keypress", ev
     ev.preventDefault();
     ev.stopPropagation();
 
     if (!document.mozFullScreenElement) {
       videoElement.mozRequestFullScreen();
     } else {
       document.mozCancelFullScreen();
     }
-    return;
   }
-
-  // Check if the video element is focused, so it already receives
-  // keystrokes, and don't send it another one from here.
-  if (document.activeElement == videoElement)
-    return;
-
-  let newEvent = new KeyboardEvent("keypress", ev);
-  newEvent.synthetic = true;
-  videoElement.dispatchEvent(newEvent);
 });