Bug 1444489 - Part I, Convert noControls binding to HTML content r=Gijs
authorTimothy Guan-tin Chien <timdream@gmail.com>
Mon, 12 Mar 2018 22:30:03 +0800
changeset 409379 264b7bdb6c6d
parent 409378 556811240710
child 409380 e0c831e58530
push id33686
push userapavel@mozilla.com
push dateThu, 22 Mar 2018 09:30:27 +0000
treeherdermozilla-central@f82d56c64966 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs
bugs1444489
milestone61.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 1444489 - Part I, Convert noControls binding to HTML content r=Gijs The noControls binding is bound to <video> without controls on mobile (see geckoview/content.css), and is only visible when the video is blocked because of background autoplay. MozReview-Commit-ID: KZqlQedCjd5
browser/base/content/test/static/browser_parsable_css.js
toolkit/content/widgets/videocontrols.xml
toolkit/themes/mobile/jar.mn
toolkit/themes/shared/media/videocontrols.css
--- a/browser/base/content/test/static/browser_parsable_css.js
+++ b/browser/base/content/test/static/browser_parsable_css.js
@@ -109,16 +109,18 @@ let propNameWhitelist = [
   {propName: "--theme-codemirror-gutter-background",
    isFromDevTools: true},
   // Bug 1442300
   {propName: "--in-content-category-background",
    isFromDevTools: false},
   // These custom properties are retrieved directly from CSSOM
   // in videocontrols.xml to get pre-defined style instead of computed
   // dimensions, which is why they are not referenced by CSS.
+  {propName: "--clickToPlay-width",
+   isFromDevTools: false},
   {propName: "--muteButton-width",
    isFromDevTools: false},
   {propName: "--closedCaptionButton-width",
    isFromDevTools: false},
   {propName: "--fullscreenButton-width",
    isFromDevTools: false},
   {propName: "--durationSpan-width",
    isFromDevTools: false},
--- a/toolkit/content/widgets/videocontrols.xml
+++ b/toolkit/content/widgets/videocontrols.xml
@@ -2166,26 +2166,27 @@
     </handler>
   </handlers>
 
 </binding>
 
 <binding id="noControls">
 
   <resources>
-    <stylesheet src="chrome://global/content/bindings/videocontrols.css"/>
-    <stylesheet src="chrome://global/skin/media/videocontrols.css"/>
+    <stylesheet src="chrome://global/skin/media/videocontrols-html.css"/>
   </resources>
 
-  <xbl:content xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" class="mediaControlsFrame">
-    <vbox flex="1" class="statusOverlay" hidden="true">
-      <box flex="1">
-        <box class="clickToPlay" flex="1"/>
-      </box>
-    </vbox>
+  <xbl:content xmlns="http://www.w3.org/1999/xhtml" class="mediaControlsFrame">
+    <div anonid="controlsContainer" class="controlsContainer" role="none" hidden="true">
+      <div class="controlsOverlay stackItem">
+        <div class="controlsSpacerStack">
+          <div anonid="clickToPlay" class="clickToPlay"></div>
+        </div>
+      </div>
+    </div>
   </xbl:content>
 
   <implementation>
   <constructor>
     <![CDATA[
     this.randomID = 0;
     this.Utils = {
       randomID: 0,
@@ -2254,18 +2255,18 @@
         this.video.play();
       },
 
       init(binding) {
         this.binding = binding;
         this.randomID = Math.random();
         this.binding.randomID = this.randomID;
         this.video = binding.parentNode;
-        this.clickToPlay       = document.getAnonymousElementByAttribute(binding, "class", "clickToPlay");
-        this.noControlsOverlay = document.getAnonymousElementByAttribute(binding, "class", "statusOverlay");
+        this.clickToPlay       = document.getAnonymousElementByAttribute(binding, "anonid", "clickToPlay");
+        this.noControlsOverlay = document.getAnonymousElementByAttribute(binding, "anonid", "controlsContainer");
 
         let self = this;
         function addListener(elem, eventName, func) {
           let boundFunc = func.bind(self);
           self.controlListeners.push({ item: elem, event: eventName, func: boundFunc });
           elem.addEventListener(eventName, boundFunc, { mozSystemGroup: true });
         }
         addListener(this.clickToPlay, "click", this.clickToPlayClickHandler);
--- a/toolkit/themes/mobile/jar.mn
+++ b/toolkit/themes/mobile/jar.mn
@@ -36,16 +36,19 @@ toolkit.jar:
    skin/classic/global/media/error.png                     (global/media/error.png)
    skin/classic/global/media/throbber.png                  (global/media/throbber.png)
    skin/classic/global/media/videoClickToPlayButton.svg    (global/media/videoClickToPlayButton.svg)
    skin/classic/global/media/TopLevelImageDocument.css     (global/media/TopLevelImageDocument.css)
    skin/classic/global/media/TopLevelVideoDocument.css     (global/media/TopLevelVideoDocument.css)
    skin/classic/global/media/imagedoc-lightnoise.png       (global/media/imagedoc-lightnoise.png)
    skin/classic/global/media/imagedoc-darknoise.png        (global/media/imagedoc-darknoise.png)
 
+* skin/classic/global/media/videocontrols-html.css         (../shared/media/videocontrols.css)
+  skin/classic/global/media/playButton.svg                 (../shared/media/playButton.svg)
+
 % skin mozapps classic/1.0 %skin/classic/mozapps/
    skin/classic/mozapps/plugins/pluginProblem.css          (mozapps/plugins/pluginProblem.css)
 
    skin/classic/mozapps/plugins/contentPluginActivate.png  (mozapps/plugins/contentPluginActivate.png)
    skin/classic/mozapps/plugins/contentPluginBlocked.png   (mozapps/plugins/contentPluginBlocked.png)
    skin/classic/mozapps/plugins/contentPluginClose.png     (mozapps/plugins/contentPluginClose.png)
    skin/classic/mozapps/plugins/contentPluginCrashed.png   (mozapps/plugins/contentPluginCrashed.png)
    skin/classic/mozapps/plugins/contentPluginStripe.png    (mozapps/plugins/contentPluginStripe.png)
--- a/toolkit/themes/shared/media/videocontrols.css
+++ b/toolkit/themes/shared/media/videocontrols.css
@@ -7,22 +7,34 @@
 
 video > xul|videocontrols,
 audio > xul|videocontrols {
   writing-mode: horizontal-tb;
   width: 100%;
   height: 100%;
   display: inline-block;
   overflow: hidden;
+
+  direction: ltr;
+  /* Prevent unwanted style inheritance. See bug 554717. */
+  text-align: left;
+  list-style-image: none !important;
+  font: normal normal normal 100%/normal sans-serif !important;
+  text-decoration: none !important;
+}
+
+.controlsContainer {
+  --clickToPlay-size: 48px;
 }
 
 /* Some CSS custom properties defined here are referenced by videocontrols.xml in JavaScript */
 .controlBar {
-  --clickToPlay-width: 48px;
-  --clickToPlay-height: var(--clickToPlay-width);
+  /* Do not delete: these variables are accessed by JavaScript directly.
+     see videocontrols.xml and search for |-width|. */
+  --clickToPlay-width: var(--clickToPlay-size);
   --playButton-width: 30px;
   --playButton-height: var(--playButton-width);
   --scrubberStack-width: 64px;
   --muteButton-width: 30px;
   --volumeStack-width: 48px;
   --closedCaptionButton-width: 30px;
   --fullscreenButton-width: 30px;
 
@@ -371,18 +383,18 @@ audio > xul|videocontrols {
   min-width: 70px;
   min-height: 60px;
   background: url(chrome://global/skin/media/error.png) no-repeat center;
   background-size: contain;
 }
 
 /* Overlay Play button */
 .clickToPlay {
-  min-width: var(--clickToPlay-width);
-  min-height: var(--clickToPlay-height);
+  min-width: var(--clickToPlay-size);
+  min-height: var(--clickToPlay-size);
   border-radius: 50%;
   background-image: url(chrome://global/skin/media/playButton.svg);
   background-repeat: no-repeat;
   background-position: 54% 50%;
   background-size: 40% 40%;
   background-color: #1a1a1a;
   -moz-context-properties: fill;
   fill: #ffffff;