merge m-c to fx-team

browser/devtools/shared/SplitView.jsm

@@ -41,7 +41,7 @@
 const EXPORTED_SYMBOLS = ["SplitView"];
 
 /* this must be kept in sync with CSS (ie. splitview.css) */
-const LANDSCAPE_MEDIA_QUERY = "(min-aspect-ratio: 5/3)";
+const LANDSCAPE_MEDIA_QUERY = "(min-width: 551px)";
 
 const BINDING_USERDATA = "splitview-binding";
 
@@ -171,7 +171,6 @@ SplitView.prototype = {
     if (binding.onShow) {
       binding.onShow(aSummary, binding._details, binding.data);
     }
-    aSummary.scrollIntoView();
   },
 
   /**

browser/devtools/shared/splitview.css

@@ -80,7 +80,7 @@ box,
 }
 
 /* this is to keep in sync with SplitView.jsm's LANDSCAPE_MEDIA_QUERY */
-@media (min-aspect-ratio: 5/3) {
+@media (min-width: 551px) {
   .splitview-root {
     -moz-box-orient: horizontal;
   }
@@ -116,7 +116,7 @@ ol.splitview-nav > li.splitview-filtered {
 }
 
 /* portrait mode */
-@media (max-aspect-ratio: 5/3) {
+@media (max-width: 550px) {
   #splitview-details-toolbar {
     display: none;
   }

browser/devtools/styleeditor/StyleEditor.jsm

@@ -358,7 +358,6 @@ StyleEditor.prototype = {
   load: function SE_load()
   {
     if (!this._styleSheet) {
-      this._flags.push(StyleEditorFlags.NEW);
       this._appendNewStyleSheet();
     }
     this._loadSource();
@@ -868,9 +867,12 @@ StyleEditor.prototype = {
     parent.appendChild(style);
 
     this._styleSheet = document.styleSheets[document.styleSheets.length - 1];
-    this._flags.push(aText ? StyleEditorFlags.IMPORTED : StyleEditorFlags.NEW);
     if (aText) {
       this._onSourceLoad(aText);
+      this._flags.push(StyleEditorFlags.IMPORTED);
+    } else {
+      this._flags.push(StyleEditorFlags.NEW);
+      this._flags.push(StyleEditorFlags.UNSAVED);
     }
   },
 

browser/devtools/styleeditor/styleeditor.css

@@ -64,11 +64,8 @@ li.error > .stylesheet-info > .stylesheet-more  > .stylesheet-error-message {
   -moz-box-flex: 1;
 }
 
-.stylesheet-name {
-  outline: none;
-}
-
 .stylesheet-name > label {
+  display: inline;
   cursor: pointer;
 }
 
@@ -95,7 +92,7 @@ li:hover > hgroup > .stylesheet-more > h3 > .stylesheet-saveButton {
 }
 
 /* portrait mode */
-@media (max-aspect-ratio: 5/3) {
+@media (max-width: 550px) {
   li.splitview-active > hgroup > .stylesheet-more > .stylesheet-rule-count,
   li:hover > hgroup > .stylesheet-more > .stylesheet-rule-count {
     display: none;

browser/devtools/styleeditor/test/browser_styleeditor_new.js

@@ -61,8 +61,8 @@ function testEditorAdded(aChrome, aEditor)
            "new editor is loaded when attached");
         ok(aEditor.hasFlag("new"),
            "new editor has NEW flag");
-        ok(!aEditor.hasFlag("unsaved"),
+        ok(aEditor.hasFlag("unsaved"),
-           "new editor does not have UNSAVED flag");
+           "new editor has UNSAVED flag");
 
         ok(aEditor.inputElement,
            "new editor has an input element attached");

browser/themes/gnomestripe/devtools/splitview.css

@@ -160,16 +160,3 @@
   border-top: 1px solid hsla(210,8%,5%,.5);
   border-bottom: 1px solid hsla(210,8%,5%,.5);
 }
-
-/* limited width mode (hide search unless it has focus [search-on-type]) */
-@media (max-width: 250px) {
-  .splitview-filter {
-    max-width: none;
-    position: fixed;
-    margin: 0;
-    bottom: -4em;
-  }
-  .splitview-filter[focused="true"] {
-    bottom: 0;
-  }
-}

browser/themes/gnomestripe/devtools/styleeditor.css

@@ -135,7 +135,7 @@ h3 {
 }
 
 /* portrait mode */
-@media (max-aspect-ratio: 5/3) {
+@media (max-width: 550px) {
   .splitview-nav {
     box-shadow: none;
   }

browser/themes/pinstripe/devtools/splitview.css

@@ -160,16 +160,3 @@
   border-top: 1px solid hsla(210,8%,5%,.5);
   border-bottom: 1px solid hsla(210,8%,5%,.5);
 }
-
-/* limited width mode (hide search unless it has focus [search-on-type]) */
-@media (max-width: 250px) {
-  .splitview-filter {
-    max-width: none;
-    position: fixed;
-    margin: 0;
-    bottom: -4em;
-  }
-  .splitview-filter[focused="true"] {
-    bottom: 0;
-  }
-}

browser/themes/pinstripe/devtools/styleeditor.css

@@ -135,7 +135,7 @@ h3 {
 }
 
 /* portrait mode */
-@media (max-aspect-ratio: 5/3) {
+@media (max-width: 550px) {
   .splitview-nav {
     box-shadow: none;
   }

browser/themes/winstripe/devtools/splitview.css

@@ -160,16 +160,3 @@
   border-top: 1px solid hsla(210,8%,5%,.5);
   border-bottom: 1px solid hsla(210,8%,5%,.5);
 }
-
-/* limited width mode (hide search unless it has focus [search-on-type]) */
-@media (max-width: 250px) {
-  .splitview-filter {
-    max-width: none;
-    position: fixed;
-    margin: 0;
-    bottom: -4em;
-  }
-  .splitview-filter[focused="true"] {
-    bottom: 0;
-  }
-}

browser/themes/winstripe/devtools/styleeditor.css

@@ -135,7 +135,7 @@ h3 {
 }
 
 /* portrait mode */
-@media (max-aspect-ratio: 5/3) {
+@media (max-width: 550px) {
   .splitview-nav {
     box-shadow: none;
   }

toolkit/content/widgets/videocontrols.xml

@@ -270,7 +270,10 @@
             </vbox>
 
             <vbox class="controlsOverlay">
+                <stack flex="1">
                     <spacer class="controlsSpacer" flex="1"/>
+                    <box class="clickToPlay" hidden="true" flex="1"/>
+                </stack>
                 <hbox class="controlBar" hidden="true">
                     <button class="playButton"
                             playlabel="&playButton.playLabel;"
@@ -328,6 +331,7 @@
                 bufferBar      : null,
                 statusOverlay  : null,
                 controlsSpacer : null,
+                clickToPlay    : null,
                 stats          : {},
                 fullscreenButton : null,
 
@@ -344,6 +348,12 @@
                 isAudioOnly : false,
 
                 setupStatusFader : function(immediate) {
+                    // Since the play button will be showing, we don't want to
+                    // show the throbber behind it. The throbber here will
+                    // only show if needed after the play button has been pressed.
+                    if (!this.clickToPlay.hidden)
+                        return;
+
                     var show = false;
                     if (this.video.seeking ||
                         this.video.error ||
@@ -404,6 +414,9 @@
                             this.isAudioOnly = true;
                     }
 
+                    if (this.isAudioOnly)
+                        this.clickToPlay.hidden = 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;
@@ -419,24 +432,20 @@
 
                     // Set the current status icon.
                     if (this.hasError()) {
+                        this.clickToPlay.hidden = true;
                         this.statusIcon.setAttribute("type", "error");
                         this.updateErrorText();
                         this.setupStatusFader(true);
-                    } else {
-                        this.statusIcon.setAttribute("type", "throbber");
-                        this.setupStatusFader();
                     }
 
                     // An event handler for |onresize| should be added when bug 227495 is fixed.
-                    let controlBarWasHidden = this.controlBar.getAttribute("hidden") == "true";
+                    this.controlBar.hidden = false;
-                    this.controlBar.removeAttribute("hidden");
                     this._playButtonWidth = this.playButton.clientWidth;
                     this._durationLabelWidth = this.durationLabel.clientWidth;
                     this._muteButtonWidth = this.muteButton.clientWidth;
                     this._fullscreenButtonWidth = this.fullscreenButton.clientWidth;
                     this._controlBarHeight = this.controlBar.clientHeight;
-                    if (controlBarWasHidden)
+                    this.controlBar.hidden = true;
-                      this.controlBar.setAttribute("hidden", "true");
                     this.adjustControlSize();
 
                     this._handleCustomEventsBound = this.handleCustomEvents.bind(this);
@@ -481,6 +490,8 @@
                             this.setupStatusFader();
                             if (!this._triggeredByControls && this.dynamicControls && this.videocontrols.isTouchControl)
                                 this.startFadeOut(this.controlBar);
+                            if (!this._triggeredByControls)
+                                this.clickToPlay.hidden = true;
                             this._triggeredByControls = false;
                             break;
                         case "pause":
@@ -511,6 +522,7 @@
                             if (this.video instanceof HTMLVideoElement &&
                                 (this.video.videoWidth == 0 || this.video.videoHeight == 0)) {
                                 this.isAudioOnly = true;
+                                this.clickToPlay.hidden = true;
                                 this.startFadeIn(this.controlBar);
                             }
                             this.showDuration(Math.round(this.video.duration * 1000));
@@ -596,6 +608,7 @@
                             //    loading from child source elements, but we were unable to select
                             //    any of the child elements for playback during resource selection.
                             if (this.hasError()) {
+                                this.clickToPlay.hidden = true;
                                 this.statusIcon.setAttribute("type", "error");
                                 this.updateErrorText();
                                 this.setupStatusFader(true);
@@ -809,11 +822,9 @@
                         return;
 
                     this.startFade(this.controlBar, true);
-                    // Only hide the controls if the mouse cursor is not left on top of
+                    // Hide the controls if the mouse cursor is left on top of the video
-                    // the control bar. We only need to check the Y position of the cursor
+                    // but above the control bar and if the click-to-play overlay is hidden.
-                    // since the controls span the width of the video and are always located
+                    if (event.clientY < this.controlBar.getBoundingClientRect().top && this.clickToPlay.hidden) {
-                    // at the bottom of the video.
-                    if (event.clientY < this.controlBar.getBoundingClientRect().top) {
                         this._hideControlsTimeout = setTimeout(this._hideControlsFn, this.HIDE_CONTROLS_TIMEOUT_MS);
                     }
                 },
@@ -845,6 +856,10 @@
                     if (!isMouseOver) {
                         this.adjustControlSize();
                         
+                        // Keep the controls visible if the click-to-play is visible.
+                        if (!this.clickToPlay.hidden)
+                            return;
+
                         // Setting a timer here to handle the case where the mouse leaves
                         // the video from hovering over the controls.
                         this._hideControlsTimeout = setTimeout(this._hideControlsFn, this.HIDE_CONTROLS_TIMEOUT_MS);
@@ -876,7 +891,7 @@
                         element.removeAttribute("immediate");
 
                     if (fadeIn) {
-                        element.setAttribute("hidden", false);
+                        element.hidden = false;
                         // force style resolution, so that transition begins
                         // when we remove the attribute.
                         element.clientTop;
@@ -897,7 +912,7 @@
                     if (!element.hasAttribute("fadeout"))
                         return;
 
-                    element.setAttribute("hidden", true);
+                    element.hidden = true;
                 },
 
                 _triggeredByControls: false,
@@ -949,6 +964,24 @@
                         this.fullscreenButton.removeAttribute("fullscreened");
                 },
 
+                handleClickToPlay : function () {
+                    let videoHeight = this.video.clientHeight;
+                    let videoWidth = this.video.clientWidth;
+
+                    // The play button will animate to 3x its size. This
+                    // shows the animation unless the video is too small
+                    // to show 2/3 of the animation.
+                    let animationScale = 2;
+                    if (this._overlayPlayButtonHeight * animationScale > (videoHeight - this._controlBarHeight)||
+                        this._overlayPlayButtonWidth * animationScale > videoWidth) {
+                        this.clickToPlay.setAttribute("immediate", "true");
+                    } else {
+                        this.clickToPlay.removeAttribute("immediate");
+                    }
+                    this.clickToPlay.setAttribute("fadeout", "true");
+                    this.togglePause();
+                },
+
                 setPlayButtonState : function(aPaused) {
                   if (aPaused)
                       this.playButton.setAttribute("paused", "true");
@@ -1191,6 +1224,8 @@
                 _muteButtonWidth : 0,
                 _fullscreenButtonWidth : 0,
                 _controlBarHeight : 0,
+                _overlayPlayButtonHeight : 64,
+                _overlayPlayButtonWidth : 64,
                 adjustControlSize : function adjustControlSize() {
                     if (this.isAudioOnly)
                         return;
@@ -1198,6 +1233,9 @@
                     let videoHeight = this.video.clientHeight;
                     let videoWidth = this.video.clientWidth;
 
+                    if (this._overlayPlayButtonHeight > videoHeight || this._overlayPlayButtonWidth > videoWidth)
+                        this.clickToPlay.hidden = true;
+
                     // The scrubber has |flex=1|, therefore |minScrubberWidth|
                     // was generated by empirical testing.
                     let minScrubberWidth = 25;
@@ -1239,6 +1277,7 @@
                     this.statusOverlay = document.getAnonymousElementByAttribute(binding, "class", "statusOverlay");
                     this.statsOverlay  = document.getAnonymousElementByAttribute(binding, "class", "statsOverlay");
                     this.controlsSpacer     = document.getAnonymousElementByAttribute(binding, "class", "controlsSpacer");
+                    this.clickToPlay        = document.getAnonymousElementByAttribute(binding, "class", "clickToPlay");
                     this.fullscreenButton   = document.getAnonymousElementByAttribute(binding, "class", "fullscreenButton");
 
                     this.statsTable       = document.getAnonymousElementByAttribute(binding, "class", "statsTable");
@@ -1268,6 +1307,8 @@
                     //
                     // (Note: the |controls| attribute is already handled via layout/style/html.css)
                     var shouldShow = (!(this.video.autoplay && this.video.mozAutoplayEnabled) || !this.dynamicControls);
+                    // Hide the overlay if the video time is non-zero or if an error occurred to workaround bug 718107.
+                    this.startFade(this.clickToPlay, shouldShow && this.video.currentTime == 0 && !this.hasError(), true);
                     this.startFade(this.controlBar, shouldShow, true);
 
                     // Use the handleEvent() callback for all media events.
@@ -1280,6 +1321,17 @@
                     this.muteButton.addEventListener("command", function() { self.toggleMute(); }, false);
                     this.playButton.addEventListener("command", function() { self.togglePause(); }, false);
                     this.fullscreenButton.addEventListener("command", function() { self.toggleFullscreen(); }, false );
+                    this.clickToPlay.addEventListener("click", function clickToPlayClickHandler(e) {
+                      if (e.button != 0 || self.hasError())
+                        return;
+                      // Read defaultPrevented asynchronously, since Web content
+                      // may want to consume the "click" event but will only
+                      // receive it after us.
+                      setTimeout(function clickToPlayCallback() {
+                        if (!e.defaultPrevented)
+                          self.handleClickToPlay();
+                      }, 0);
+                    }, false);
 
                     this.controlsSpacer.addEventListener("click", function spacerClickHandler(e) {
                       if (e.button != 0 || self.hasError())

toolkit/themes/pinstripe/global/jar.mn

@@ -148,6 +148,8 @@ toolkit.jar:
   skin/classic/global/media/throbber.png                             (media/throbber.png)
   skin/classic/global/media/stalled.png                              (media/stalled.png)
   skin/classic/global/media/volumeThumb.png                          (media/volumeThumb.png)
+  skin/classic/global/media/clicktoplay-bgtexture.png                (media/clicktoplay-bgtexture.png)
+  skin/classic/global/media/videoClickToPlayButton.svg               (media/videoClickToPlayButton.svg)
   skin/classic/global/menu/menu-arrow.png                            (menu/menu-arrow.png)
   skin/classic/global/menu/menu-check.png                            (menu/menu-check.png)
   skin/classic/global/scale/scale-tray-horiz.gif                     (scale/scale-tray-horiz.gif)

toolkit/themes/pinstripe/global/media/videoClickToPlayButton.svg

@@ -0,0 +1,99 @@
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   version="1.1"
+   id="videoPlayButtonOverlay"
+   preserveAspectRatio="xMinYMin meet"
+   viewBox="0 0 64 64">
+  <defs>
+    <linearGradient id="whiteGradientStops">
+      <stop id="whiteGradientStop01" style="stop-color:#ffffff;stop-opacity:.95" offset="0" />
+      <stop id="whiteGradientStop02" style="stop-color:#ffffff;stop-opacity:.75" offset=".45" />
+      <stop id="whiteGradientStop03" style="stop-color:#ffffff;stop-opacity:.72" offset=".55" />
+      <stop id="whiteGradientStop04" style="stop-color:#ffffff;stop-opacity:.65" offset="1" />
+    </linearGradient>
+    <linearGradient
+       x1="32"
+       y1="0"
+       x2="32"
+       y2="62"
+       id="whiteGradient"
+       xlink:href="#whiteGradientStops"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient id="arrowGradientStops">
+      <stop id="arrowGradientStop01" style="stop-color:#333333;stop-opacity:.5" offset="0" />
+      <stop id="arrowGradientStop02" style="stop-color:#666666;stop-opacity:.5" offset="1" />
+    </linearGradient>
+    <linearGradient
+       x1="32"
+       y1="16"
+       x2="32"
+       y2="48"
+       id="arrowGradient"
+       xlink:href="#arrowGradientStops"
+       gradientUnits="userSpaceOnUse" />
+    <filter
+       x="-0.15"
+       y="-0.15"
+       width="1.25"
+       height="1.25"
+       color-interpolation-filters="sRGB"
+       id="dropShadow">
+      <feGaussianBlur
+         result="blur"
+         stdDeviation="2"
+         in="SourceAlpha"
+         id="dropShadowBlur" />
+      <feColorMatrix
+         values="1 0 0 0  0
+                 0 1 0 0  0
+                 0 0 1 0  0
+                 0 0 0 .5 0"
+         type="matrix"
+         result="bluralpha"
+         id="dropShadowColor" />
+      <feOffset
+         result="offsetBlur"
+         dy="1"
+         dx="0"
+         in="bluralpha"
+         id="dropShadowOffset" />
+      <feMerge>
+        <feMergeNode
+           in="offsetBlur" />
+        <feMergeNode
+           in="SourceGraphic" />
+      </feMerge>
+    </filter>
+    <mask id="dropShadowMask">
+      <path
+         d="M47.285,29.991L23.75,16.24c-0.357-0.208-0.692-0.278-0.969-0.221 C22.32,16.114,22,16.555,22,17.251v27.5c0,1.112,0.797,1.568,1.75,1.011l23.535-13.749C48.238,31.458,48.238,30.546,47.285,29.991z M0,0v64h64V0H0z M32,59C16.536,59,4,46.464,4,31S16.536,3,32,3s28,12.536,28,28S47.464,59,32,59z"
+         id="dropShadowMaskPath"
+         style="fill:#ffffff;fill-opacity:1;stroke:none" />
+    </mask>       
+  </defs>
+  <path 
+     d="M32,3C16.536,3,4,15.536,4,31s12.536,28,28,28s28-12.536,28-28S47.464,3,32,3z M47.285,32.013L23.75,45.762C22.797,46.319,22,45.863,22,44.751v-27.5c0-0.697,0.32-1.137,0.781-1.232 c0.277-0.058,0.612,0.012,0.969,0.221l23.535,13.751C48.238,30.546,48.238,31.458,47.285,32.013z"
+     mask="url(#dropShadowMask)"
+     id="playButtonShadow"
+     style="fill:black;fill-opacity:1;stroke:none;filter:url(#dropShadow)" />
+  <path
+     d="M22.781,16.019C22.32,16.114,22,16.555,22,17.251v27.5c0,1.112,0.797,1.568,1.75,1.011 l23.535-13.749c0.953-0.556,0.953-1.467,0-2.022L23.75,16.24C23.393,16.031,23.058,15.961,22.781,16.019z"
+     id="playButtonArrow"
+     style="fill:url(#arrowGradient);fill-opacity:1;stroke:none" />
+  <path 
+     d="M32,3C16.536,3,4,15.536,4,31s12.536,28,28,28s28-12.536,28-28S47.464,3,32,3z M47.285,32.013L23.75,45.762C22.797,46.319,22,45.863,22,44.751v-27.5c0-0.697,0.32-1.137,0.781-1.232 c0.277-0.058,0.612,0.012,0.969,0.221l23.535,13.751C48.238,30.546,48.238,31.458,47.285,32.013z"
+     id="playButton"
+     style="fill:url(#whiteGradient);fill-opacity:1;stroke:none" />
+  <path
+     d="M32,3C16.536,3,4,15.536,4,31s12.536,28,28,28s28-12.536,28-28S47.464,3,32,3 z M32,58C17.112,58,5,45.888,5,31S17.112,4,32,4s27,12.112,27,27S46.888,58,32,58z M47.789,29.127l-23.534-13.75 C23.826,15.126,23.396,15,22.976,15c-0.135,0-0.27,0.014-0.398,0.041C21.62,15.238,21,16.106,21,17.251v27.5 C21,46.075,21.812,47,22.977,47c0.423,0,0.854-0.126,1.279-0.375L47.79,32.876c0.769-0.448,1.21-1.131,1.21-1.875 S48.559,29.576,47.789,29.127z M47.285,32.013L23.75,45.762C23.474,45.924,23.211,46,22.977,46C22.402,46,22,45.541,22,44.751v-27.5 c0-0.697,0.32-1.137,0.781-1.232L22.976,16c0.233,0,0.498,0.079,0.775,0.24l23.535,13.751 C48.238,30.546,48.238,31.458,47.285,32.013z"
+     id="playButtonEdgeHighlights"
+     style="fill:white;fill-opacity:.3;stroke:none" />
+  <path
+     d="M32,3C16.536,3,4,15.536,4,31c0,0.167,0.01,0.333,0.013,0.5C4.28,16.268,16.704,4,32,4 c15.296,0,27.72,12.268,27.987,27.5C59.99,31.333,60,31.167,60,31C60,15.536,47.464,3,32,3z M47.285,32.013L23.75,45.762 C22.797,46.319,22,45.863,22,44.751v1c0,1.112,0.797,1.568,1.75,1.011l23.535-13.748c0.697-0.407,0.879-1.003,0.556-1.512 C47.723,31.688,47.541,31.864,47.285,32.013z"
+     id="playButtonTopEdgeHighlights"
+     style="fill:white;fill-opacity:.8;stroke:none" />
+</svg>

toolkit/themes/pinstripe/global/media/videocontrols.css

@@ -196,6 +196,24 @@
   background: url(chrome://global/skin/media/error.png) no-repeat center;
 }
 
+/* Overlay Play button */
+.clickToPlay {
+  width: 64px;
+  height: 64px;
+  -moz-box-pack: center;
+  -moz-box-align: center;
+  opacity: 0.7;
+  background-image: url(chrome://global/skin/media/clicktoplay-bgtexture.png),
+                    url(chrome://global/skin/media/videoClickToPlayButton.svg);
+  background-repeat: repeat, no-repeat;
+  background-position: center, center;
+  background-size: auto, 64px 64px;
+  background-color: hsla(0,0%,10%,.5);
+}
+.clickToPlay:hover {
+  opacity: 1;
+}
+
 /* Statistics formatting */
 html|*.statsDiv {
   position: relative;
@@ -222,6 +240,18 @@ html|table {
 }
 
 /* CSS Transitions */
+.clickToPlay {
+  -moz-transition-property: opacity, background-size;
+  -moz-transition-duration: 400ms, 400ms;
+}
+.clickToPlay[fadeout] {
+  background-size: auto, 192px 192px;
+  opacity: 0;
+}
+.clickToPlay[fadeout][immediate] {
+  -moz-transition-property: opacity, background-size;
+  -moz-transition-duration: 0s, 0s;
+}
 .controlBar:not([immediate]) {
   -moz-transition-property: opacity;
   -moz-transition-duration: 200ms;

toolkit/themes/winstripe/global/jar.mn

@@ -152,6 +152,8 @@ toolkit.jar:
         skin/classic/global/media/stalled.png                    (media/stalled.png)
         skin/classic/global/media/volumeThumb.png                (media/volumeThumb.png)
         skin/classic/global/media/error.png                      (media/error.png)
+        skin/classic/global/media/clicktoplay-bgtexture.png      (media/clicktoplay-bgtexture.png)
+        skin/classic/global/media/videoClickToPlayButton.svg     (media/videoClickToPlayButton.svg)
         skin/classic/global/printpreview/arrow-left.png          (printpreview/arrow-left.png)
         skin/classic/global/printpreview/arrow-left-end.png      (printpreview/arrow-left-end.png)
         skin/classic/global/printpreview/arrow-right.png         (printpreview/arrow-right.png)
@@ -326,6 +328,8 @@ toolkit.jar:
         skin/classic/aero/global/media/stalled.png                       (media/stalled.png)
         skin/classic/aero/global/media/volumeThumb.png                   (media/volumeThumb.png)
         skin/classic/aero/global/media/error.png                         (media/error.png)
+        skin/classic/aero/global/media/clicktoplay-bgtexture.png         (media/clicktoplay-bgtexture.png)
+        skin/classic/aero/global/media/videoClickToPlayButton.svg        (media/videoClickToPlayButton.svg)
         skin/classic/aero/global/printpreview/arrow-left.png             (printpreview/arrow-left-aero.png)
         skin/classic/aero/global/printpreview/arrow-left-end.png         (printpreview/arrow-left-end-aero.png)
         skin/classic/aero/global/printpreview/arrow-right.png            (printpreview/arrow-right-aero.png)

toolkit/themes/winstripe/global/media/videoClickToPlayButton.svg

@@ -0,0 +1,99 @@
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   version="1.1"
+   id="videoPlayButtonOverlay"
+   preserveAspectRatio="xMinYMin meet"
+   viewBox="0 0 64 64">
+  <defs>
+    <linearGradient id="whiteGradientStops">
+      <stop id="whiteGradientStop01" style="stop-color:#ffffff;stop-opacity:.95" offset="0" />
+      <stop id="whiteGradientStop02" style="stop-color:#ffffff;stop-opacity:.75" offset=".45" />
+      <stop id="whiteGradientStop03" style="stop-color:#ffffff;stop-opacity:.72" offset=".55" />
+      <stop id="whiteGradientStop04" style="stop-color:#ffffff;stop-opacity:.65" offset="1" />
+    </linearGradient>
+    <linearGradient
+       x1="32"
+       y1="0"
+       x2="32"
+       y2="62"
+       id="whiteGradient"
+       xlink:href="#whiteGradientStops"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient id="arrowGradientStops">
+      <stop id="arrowGradientStop01" style="stop-color:#333333;stop-opacity:.5" offset="0" />
+      <stop id="arrowGradientStop02" style="stop-color:#666666;stop-opacity:.5" offset="1" />
+    </linearGradient>
+    <linearGradient
+       x1="32"
+       y1="16"
+       x2="32"
+       y2="48"
+       id="arrowGradient"
+       xlink:href="#arrowGradientStops"
+       gradientUnits="userSpaceOnUse" />
+    <filter
+       x="-0.15"
+       y="-0.15"
+       width="1.25"
+       height="1.25"
+       color-interpolation-filters="sRGB"
+       id="dropShadow">
+      <feGaussianBlur
+         result="blur"
+         stdDeviation="2"
+         in="SourceAlpha"
+         id="dropShadowBlur" />
+      <feColorMatrix
+         values="1 0 0 0  0
+                 0 1 0 0  0
+                 0 0 1 0  0
+                 0 0 0 .5 0"
+         type="matrix"
+         result="bluralpha"
+         id="dropShadowColor" />
+      <feOffset
+         result="offsetBlur"
+         dy="1"
+         dx="0"
+         in="bluralpha"
+         id="dropShadowOffset" />
+      <feMerge>
+        <feMergeNode
+           in="offsetBlur" />
+        <feMergeNode
+           in="SourceGraphic" />
+      </feMerge>
+    </filter>
+    <mask id="dropShadowMask">
+      <path
+         d="M47.285,29.991L23.75,16.24c-0.357-0.208-0.692-0.278-0.969-0.221 C22.32,16.114,22,16.555,22,17.251v27.5c0,1.112,0.797,1.568,1.75,1.011l23.535-13.749C48.238,31.458,48.238,30.546,47.285,29.991z M0,0v64h64V0H0z M32,59C16.536,59,4,46.464,4,31S16.536,3,32,3s28,12.536,28,28S47.464,59,32,59z"
+         id="dropShadowMaskPath"
+         style="fill:#ffffff;fill-opacity:1;stroke:none" />
+    </mask>       
+  </defs>
+  <path 
+     d="M32,3C16.536,3,4,15.536,4,31s12.536,28,28,28s28-12.536,28-28S47.464,3,32,3z M47.285,32.013L23.75,45.762C22.797,46.319,22,45.863,22,44.751v-27.5c0-0.697,0.32-1.137,0.781-1.232 c0.277-0.058,0.612,0.012,0.969,0.221l23.535,13.751C48.238,30.546,48.238,31.458,47.285,32.013z"
+     mask="url(#dropShadowMask)"
+     id="playButtonShadow"
+     style="fill:black;fill-opacity:1;stroke:none;filter:url(#dropShadow)" />
+  <path
+     d="M22.781,16.019C22.32,16.114,22,16.555,22,17.251v27.5c0,1.112,0.797,1.568,1.75,1.011 l23.535-13.749c0.953-0.556,0.953-1.467,0-2.022L23.75,16.24C23.393,16.031,23.058,15.961,22.781,16.019z"
+     id="playButtonArrow"
+     style="fill:url(#arrowGradient);fill-opacity:1;stroke:none" />
+  <path 
+     d="M32,3C16.536,3,4,15.536,4,31s12.536,28,28,28s28-12.536,28-28S47.464,3,32,3z M47.285,32.013L23.75,45.762C22.797,46.319,22,45.863,22,44.751v-27.5c0-0.697,0.32-1.137,0.781-1.232 c0.277-0.058,0.612,0.012,0.969,0.221l23.535,13.751C48.238,30.546,48.238,31.458,47.285,32.013z"
+     id="playButton"
+     style="fill:url(#whiteGradient);fill-opacity:1;stroke:none" />
+  <path
+     d="M32,3C16.536,3,4,15.536,4,31s12.536,28,28,28s28-12.536,28-28S47.464,3,32,3 z M32,58C17.112,58,5,45.888,5,31S17.112,4,32,4s27,12.112,27,27S46.888,58,32,58z M47.789,29.127l-23.534-13.75 C23.826,15.126,23.396,15,22.976,15c-0.135,0-0.27,0.014-0.398,0.041C21.62,15.238,21,16.106,21,17.251v27.5 C21,46.075,21.812,47,22.977,47c0.423,0,0.854-0.126,1.279-0.375L47.79,32.876c0.769-0.448,1.21-1.131,1.21-1.875 S48.559,29.576,47.789,29.127z M47.285,32.013L23.75,45.762C23.474,45.924,23.211,46,22.977,46C22.402,46,22,45.541,22,44.751v-27.5 c0-0.697,0.32-1.137,0.781-1.232L22.976,16c0.233,0,0.498,0.079,0.775,0.24l23.535,13.751 C48.238,30.546,48.238,31.458,47.285,32.013z"
+     id="playButtonEdgeHighlights"
+     style="fill:white;fill-opacity:.3;stroke:none" />
+  <path
+     d="M32,3C16.536,3,4,15.536,4,31c0,0.167,0.01,0.333,0.013,0.5C4.28,16.268,16.704,4,32,4 c15.296,0,27.72,12.268,27.987,27.5C59.99,31.333,60,31.167,60,31C60,15.536,47.464,3,32,3z M47.285,32.013L23.75,45.762 C22.797,46.319,22,45.863,22,44.751v1c0,1.112,0.797,1.568,1.75,1.011l23.535-13.748c0.697-0.407,0.879-1.003,0.556-1.512 C47.723,31.688,47.541,31.864,47.285,32.013z"
+     id="playButtonTopEdgeHighlights"
+     style="fill:white;fill-opacity:.8;stroke:none" />
+</svg>

toolkit/themes/winstripe/global/media/videocontrols.css

@@ -205,6 +205,24 @@
   background: url(chrome://global/skin/media/error.png) no-repeat center;
 }
 
+/* Overlay Play button */
+.clickToPlay {
+  width: 64px;
+  height: 64px;
+  -moz-box-pack: center;
+  -moz-box-align: center;
+  opacity: 0.7;
+  background-image: url(chrome://global/skin/media/clicktoplay-bgtexture.png),
+                    url(chrome://global/skin/media/videoClickToPlayButton.svg);
+  background-repeat: repeat, no-repeat;
+  background-position: center, center;
+  background-size: auto, 64px 64px;
+  background-color: hsla(0,0%,10%,.5);
+}
+.clickToPlay:hover {
+  opacity: 1;
+}
+
 /* Statistics formatting */
 html|*.statsDiv {
   position: relative;
@@ -231,6 +249,18 @@ html|table {
 }
 
 /* CSS Transitions */
+.clickToPlay {
+  -moz-transition-property: opacity, background-size;
+  -moz-transition-duration: 400ms, 400ms;
+}
+.clickToPlay[fadeout] {
+  background-size: auto, 192px 192px;
+  opacity: 0;
+}
+.clickToPlay[fadeout][immediate] {
+  -moz-transition-property: opacity, background-size;
+  -moz-transition-duration: 0s, 0s;
+}
 .controlBar:not([immediate]) {
   -moz-transition-property: opacity;
   -moz-transition-duration: 200ms;