Bug 1483656 - Part I, Correct references in TouchUtils r=jaws
authorTimothy Guan-tin Chien <timdream@gmail.com>
Wed, 03 Oct 2018 15:14:36 +0000
changeset 495171 a632efc6cac44106f08fe0bdf373a939aad9ca41
parent 495170 5d797c6f6f132d76c04dd556c5c2e9fc0ad3cbcb
child 495172 ce8a60ec0ee9fc3775cd2a2a56bd9a066a2e1bcc
push id9984
push userffxbld-merge
push dateMon, 15 Oct 2018 21:07:35 +0000
treeherdermozilla-beta@183d27ea8570 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs1483656
milestone64.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 1483656 - Part I, Correct references in TouchUtils r=jaws Differential Revision: https://phabricator.services.mozilla.com/D6423
mobile/android/tests/browser/chrome/test_mozAutoplayMediaBlocked.html
mobile/android/tests/browser/robocop/testVideoControls.js
toolkit/content/widgets/videocontrols.js
--- a/mobile/android/tests/browser/chrome/test_mozAutoplayMediaBlocked.html
+++ b/mobile/android/tests/browser/chrome/test_mozAutoplayMediaBlocked.html
@@ -33,17 +33,45 @@ SimpleTest.requestLongerTimeout(2);
 (function setup_testing_env() {
   gChromeWin = Services.wm.getMostRecentWindow("navigator:browser");
   gBrowserApp = gChromeWin.BrowserApp;
 
   Services.prefs.setIntPref("media.autoplay.default", 1 /* BLOCKED */);
   Services.prefs.setBoolPref("media.autoplay.enabled.user-gestures-needed", true);
 })();
 
-add_task(async function test_MozAutoplayMediaBlocked() {
+add_task(async function test_UAWidgetMozAutoplayMediaBlocked() {
+  Services.prefs.setBoolPref("dom.ua_widget.enabled", true);
+
+  info("- open a new tab -");
+  let tab = gBrowserApp.addTab(URL);
+  let browser = tab.browser;
+
+  const mediaBlockedPromise = promiseTabEvent(browser, "MozAutoplayMediaBlocked");
+
+  info("- wait for loading tab's content -");
+  await promiseBrowserEvent(browser, "load");
+
+  info("- wait for 'MozAutoplayMediaBlocked' event -");
+  await mediaBlockedPromise;
+  ok(true, "got `MozAutoplayMediaBlocked` event");
+
+  let doc = browser.contentWindow.document;
+  let video = doc.getElementById("testAudio");
+
+  let button = video.openOrClosedShadowRoot.getElementById("clickToPlay");
+  ok(!button.hidden, "Click to play button is not hidden");
+
+  info("- remove tab -");
+  gBrowserApp.closeTab(tab);
+});
+
+add_task(async function test_XBLBindingMozAutoplayMediaBlocked() {
+  Services.prefs.setBoolPref("dom.ua_widget.enabled", false);
+
   info("- open a new tab -");
   let tab = gBrowserApp.addTab(URL);
   let browser = tab.browser;
 
   const mediaBlockedPromise = promiseTabEvent(browser, "MozAutoplayMediaBlocked");
 
   info("- wait for loading tab's content -");
   await promiseBrowserEvent(browser, "load");
--- a/mobile/android/tests/browser/robocop/testVideoControls.js
+++ b/mobile/android/tests/browser/robocop/testVideoControls.js
@@ -55,16 +55,20 @@ add_test(function test_webm() {
 add_test(function test_ogg() {
   // Load the test video
   video.src = "http://mochi.test:8888/tests/robocop/video-pattern.ogg";
 
   Services.tm.dispatchToMainThread(testLoad);
 });
 
 function getButtonByAttribute(aName, aValue) {
+  if (video.openOrClosedShadowRoot) {
+    return video.openOrClosedShadowRoot.firstChild.querySelector(`[${aName}="${aValue}"]`);
+  }
+
   let kids = InspectorUtils.getChildrenForNode(video, true);
   let videocontrols = kids[1];
   return contentDocument.getAnonymousElementByAttribute(videocontrols, aName, aValue);
 }
 
 function getPixelColor(aCanvas, aX, aY) {
   let cx = aCanvas.getContext("2d");
   let pixel = cx.getImageData(aX, aY, 1, 1);
--- a/toolkit/content/widgets/videocontrols.js
+++ b/toolkit/content/widgets/videocontrols.js
@@ -441,17 +441,17 @@ this.VideoControlsImplPageWidget = class
         }
       },
 
       handleVideoEvent(aEvent) {
         switch (aEvent.type) {
           case "play":
             this.setPlayButtonState(false);
             this.setupStatusFader();
-            if (!this._triggeredByControls && this.dynamicControls && this.videocontrols.isTouchControls) {
+            if (!this._triggeredByControls && this.dynamicControls && this.isTouchControls) {
               this.startFadeOut(this.controlBar);
             }
             if (!this._triggeredByControls) {
               this.startFadeOut(this.clickToPlay, true);
             }
             this._triggeredByControls = false;
             break;
           case "pause":
@@ -1949,18 +1949,18 @@ this.VideoControlsImplPageWidget = class
         }
 
         let isMobile = this.window.navigator.appVersion.includes("Android");
         if (isMobile) {
           this.controlsContainer.classList.add("mobile");
         }
 
         // TODO: Switch to touch controls on touch-based desktops (bug 1447547)
-        this.videocontrols.isTouchControls = isMobile;
-        if (this.videocontrols.isTouchControls) {
+        this.isTouchControls = isMobile;
+        if (this.isTouchControls) {
           this.controlsContainer.classList.add("touch");
         }
 
         // XXX: Calling getComputedStyle() here by itself doesn't cause any reflow,
         // but there is no guard proventing accessing any properties and methods
         // of this saved CSSStyleDeclaration instance that could trigger reflow.
         this.controlBarComputedStyles = this.window.getComputedStyle(this.controlBar);
 
@@ -2029,37 +2029,33 @@ this.VideoControlsImplPageWidget = class
           { el: this.video.textTracks, type: "removetrack" },
           { el: this.video.textTracks, type: "change" },
 
           { el: this.video, type: "media-videoCasting", touchOnly: true },
         ];
 
         for (let { el, type, nonTouchOnly = false, touchOnly = false,
                    mozSystemGroup = true, capture = false } of this.controlsEvents) {
-          if ((this.videocontrols.isTouchControls && nonTouchOnly) ||
-              (!this.videocontrols.isTouchControls && touchOnly)) {
+          if ((this.isTouchControls && nonTouchOnly) ||
+              (!this.isTouchControls && touchOnly)) {
             continue;
           }
           el.addEventListener(type, this, { mozSystemGroup, capture });
         }
 
         this.log("--- videocontrols initialized ---");
       },
     };
 
     this.TouchUtils = {
       videocontrols: null,
       video: null,
       controlsTimer: null,
       controlsTimeout: 5000,
 
-      get Utils() {
-        return this.videocontrols.Utils;
-      },
-
       get visible() {
         return !this.Utils.controlBar.hasAttribute("fadeout") &&
                !(this.Utils.controlBar.hidden);
       },
 
       firstShow: false,
 
       toggleControls() {
@@ -2136,19 +2132,22 @@ this.VideoControlsImplPageWidget = class
           for (let { el, type, mozSystemGroup = true } of this.controlsEvents) {
             el.removeEventListener(type, this, { mozSystemGroup });
           }
         } catch (ex) {}
 
         this.clearTimer();
       },
 
-      init(shadowRoot) {
+      init(shadowRoot, utils) {
+        this.Utils = utils;
         this.videocontrols = this.Utils.videocontrols;
         this.video = this.Utils.video;
+        this.document = this.videocontrols.ownerDocument;
+        this.window = this.document.defaultView;
         this.shadowRoot = shadowRoot;
 
         this.controlsEvents = [
           { el: this.Utils.playButton, type: "click" },
           { el: this.Utils.scrubber, type: "touchstart" },
           { el: this.Utils.scrubber, type: "touchend" },
           { el: this.Utils.muteButton, type: "click" },
           { el: this.Utils.controlsSpacer, type: "mouseup" },
@@ -2175,18 +2174,18 @@ this.VideoControlsImplPageWidget = class
         // 5s, which feels too long after the transition.
         if (this.video.currentTime !== 0) {
           this.delayHideControls(this.Utils.HIDE_CONTROLS_TIMEOUT_MS);
         }
       },
     };
 
     this.Utils.init(this.shadowRoot);
-    if (this.isTouchControls) {
-      this.TouchUtils.init(this.shadowRoot);
+    if (this.Utils.isTouchControls) {
+      this.TouchUtils.init(this.shadowRoot, this.Utils);
     }
     this.shadowRoot.firstChild.dispatchEvent(new this.window.CustomEvent("VideoBindingAttached"));
 
     this._setupEventListeners();
   }
 
   generateContent() {
     /*
@@ -2264,29 +2263,29 @@ this.VideoControlsImplPageWidget = class
   destructor() {
     this.Utils.terminate();
     this.TouchUtils.terminate();
     this.Utils.updateOrientationState(false);
   }
 
   _setupEventListeners() {
     this.shadowRoot.firstChild.addEventListener("mouseover", event => {
-      if (!this.isTouchControls) {
+      if (!this.Utils.isTouchControls) {
         this.Utils.onMouseInOut(event);
       }
     });
 
     this.shadowRoot.firstChild.addEventListener("mouseout", event => {
-      if (!this.isTouchControls) {
+      if (!this.Utils.isTouchControls) {
         this.Utils.onMouseInOut(event);
       }
     });
 
     this.shadowRoot.firstChild.addEventListener("mousemove", event => {
-      if (!this.isTouchControls) {
+      if (!this.Utils.isTouchControls) {
         this.Utils.onMouseMove(event);
       }
     });
   }
 };
 
 this.NoControlsImplPageWidget = class {
   constructor(shadowRoot) {
@@ -2367,18 +2366,18 @@ this.NoControlsImplPageWidget = class {
         this.noControlsOverlay = this.shadowRoot.getElementById("controlsContainer");
 
         let isMobile = this.window.navigator.appVersion.includes("Android");
         if (isMobile) {
           this.controlsContainer.classList.add("mobile");
         }
 
         // TODO: Switch to touch controls on touch-based desktops (bug 1447547)
-        this.videocontrols.isTouchControls = isMobile;
-        if (this.videocontrols.isTouchControls) {
+        this.isTouchControls = isMobile;
+        if (this.isTouchControls) {
           this.controlsContainer.classList.add("touch");
         }
 
         this.clickToPlay.addEventListener("click", this, { mozSystemGroup: true });
 
         for (let event of this.videoEvents) {
           this.video.addEventListener(event, this, {
             capture: true,