Bug 704326 - Standalone audio files should have different style so they don't look awkward. r=smaug,dolske

dom/webidl/Document.webidl

@@ -151,7 +151,7 @@ partial interface Document {
    * True if this document is synthetic : stand alone image, video, audio file,
    * etc.
    */
-  [ChromeOnly] readonly attribute boolean mozSyntheticDocument;
+  [Func="IsChromeOrXBL"] readonly attribute boolean mozSyntheticDocument;
   /**
    * Returns the script element whose script is currently being processed.
    *

toolkit/content/widgets/videocontrols.xml

@@ -338,7 +338,15 @@
                 firstFrameShown : false,
                 timeUpdateCount : 0,
                 maxCurrentTimeSeen : 0,
-                isAudioOnly : false,
+                _isAudioOnly : false,
+                get isAudioOnly() { return this._isAudioOnly; },
+                set isAudioOnly(val) {
+                    this._isAudioOnly = val;
+                    if (!this.isTopLevelSyntheticDocument)
+                        return;
+                    this.video.style.height = this._controlBarHeight + "px";
+                    this.video.style.width = "66%";
+                },
                 suppressError : false,
 
                 setupStatusFader : function(immediate) {
@@ -842,7 +850,10 @@
                 },
 
                 onVolumeMouseInOut : function (event) {
-                    if (this.isVideoWithoutAudioTrack()) {
+                    let doc = this.video.ownerDocument;
+                    let win = doc.defaultView;
+                    if (this.isVideoWithoutAudioTrack() ||
+                        (this.isAudioOnly && this.isTopLevelSyntheticDocument)) {
                         return;
                     }
                     // Ignore events caused by transitions between mute button and volumeStack,
@@ -1335,6 +1346,12 @@
                         dump("videoctl: " + msg + "\n");
                 },
 
+                get isTopLevelSyntheticDocument() {
+                  let doc = this.video.ownerDocument;
+                  let win = doc.defaultView;
+                  return doc.mozSyntheticDocument && win === win.top;
+                },
+
                 _playButtonWidth : 0,
                 _durationLabelWidth : 0,
                 _muteButtonWidth : 0,
@@ -1343,15 +1360,11 @@
                 _overlayPlayButtonHeight : 64,
                 _overlayPlayButtonWidth : 64,
                 adjustControlSize : function adjustControlSize() {
-                    if (this.isAudioOnly)
+                    let doc = this.video.ownerDocument;
+                    let isAudioOnly = this.isAudioOnly;
+                    if (isAudioOnly && !this.isTopLevelSyntheticDocument)
                         return;
 
-                    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;
@@ -1363,6 +1376,12 @@
                     let minHeightForControlBar = this._controlBarHeight;
                     let minWidthOnlyPlayPause = this._playButtonWidth + this._muteButtonWidth;
 
+                    let videoHeight = isAudioOnly ? minHeightForControlBar : this.video.clientHeight;
+                    let videoWidth = isAudioOnly ? minWidthAllControls : this.video.clientWidth;
+
+                    if (this._overlayPlayButtonHeight > videoHeight || this._overlayPlayButtonWidth > videoWidth)
+                        this.clickToPlay.hidden = true;
+
                     let size = "normal";
                     if (videoHeight < minHeightForControlBar)
                         size = "hidden";