From a9f5276cf3bd68b3ecf17f047ef147150daddf2b Mon Sep 17 00:00:00 2001 From: Justin Dolske Date: Wed, 1 Oct 2008 01:00:22 -0700 Subject: [PATCH] Bug 448909 - Need more controls WHATWG Video tag. r=mconnor, r=bz --- layout/style/forms.css | 18 - toolkit/content/widgets/videocontrols.xml | 450 ++++++++---------- toolkit/themes/pinstripe/global/jar.mn | 2 + .../pinstripe/global/media/videocontrols.css | 23 + .../pinstripe/global/media/videocontrols.png | Bin 0 -> 478 bytes toolkit/themes/winstripe/global/jar.mn | 4 + .../winstripe/global/media/videocontrols.css | 23 + .../winstripe/global/media/videocontrols.png | Bin 0 -> 478 bytes 8 files changed, 255 insertions(+), 265 deletions(-) create mode 100644 toolkit/themes/pinstripe/global/media/videocontrols.css create mode 100644 toolkit/themes/pinstripe/global/media/videocontrols.png create mode 100644 toolkit/themes/winstripe/global/media/videocontrols.css create mode 100644 toolkit/themes/winstripe/global/media/videocontrols.png diff --git a/layout/style/forms.css b/layout/style/forms.css index 219d7111ac0b..6b34fd90ed20 100644 --- a/layout/style/forms.css +++ b/layout/style/forms.css @@ -600,29 +600,11 @@ input[type="file"] > input[type="text"] { } video > xul|videocontrols { - display: none; -} -video[controls] > xul|videocontrols { display: -moz-box; -moz-box-orient: vertical; -moz-binding: url("chrome://global/content/bindings/videocontrols.xml#videoControls"); } -video[controls] > xul|videocontrols xul|button.controlbar { - visibility: hidden; -} - -video[controls] > xul|videocontrols xul|button.centerplay { - visibility: visible; -} -video[controls] > xul|videocontrols.playing xul|button.centerplay { - visibility: hidden; -} - -video[controls]:hover > xul|videocontrols.playing xul|button.controlbar { - visibility: visible; -} - %if OSARCH==OS2 input { font: medium serif; font-family: inherit diff --git a/toolkit/content/widgets/videocontrols.xml b/toolkit/content/widgets/videocontrols.xml index 51bd96800a14..4424acf55609 100644 --- a/toolkit/content/widgets/videocontrols.xml +++ b/toolkit/content/widgets/videocontrols.xml @@ -1,9 +1,5 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + - - - - - return "AllAccess"; - - + + + + + return "AllAccess"; + + - - - - - return "AllAccess"; - - + + + + + return "AllAccess"; + + - - - - - return "AllAccess"; - - + + + + + return "AllAccess"; + + - - - - - return "AllAccess"; - - + + + + + return "AllAccess"; + + - - - - - - + + + + + + - - this.init(); - + + + - - - + = self.animationSteps) { + self.animationStep = self.animationSteps; + clearInterval(self.animationTimer); + self.animationTimer = null; + } + + // XXX might be good to do logarithmic steps, maybe use timer error too (for smoothness)? + self.controls.style.opacity = self.animationStep / self.animationSteps; + }, + + togglePause : function () { + if (this.video.paused) + this.video.play(); + else + this.video.pause(); + + // We'll handle style changes in the event listener for + // the "play" and "pause" events, same as if content + // script was controlling video playback. + }, + + toggleMute : function () { + this.video.muted = !this.video.muted; + + // We'll handle style changes in the event listener for + // the "volumechange" event, same as if content script was + // controlling volume. + }, + + isChildNode : function (node) { + while (node) { + if (node == this.controls) + break; + node = node.parentNode; + } + return (node == this); + }, + + log : function (msg) { + if (this.debug) + dump("videoctl: " + msg + "\n"); + } + }) ]]> + + + + + + + - var pause = document.getAnonymousElementByAttribute(this, "vcattr", "pause"); - pause.addEventListener("click", function() { - video.pause(); - }, false); - var stop = document.getAnonymousElementByAttribute(this, "vcattr", "stop"); - stop.addEventListener("click", function() { - video.pause(); - video.currentTime = 0.0; - }, false); - ]]> - - - - + + + + + + + + + + diff --git a/toolkit/themes/pinstripe/global/jar.mn b/toolkit/themes/pinstripe/global/jar.mn index 24d2a86d781b..1726163da1da 100644 --- a/toolkit/themes/pinstripe/global/jar.mn +++ b/toolkit/themes/pinstripe/global/jar.mn @@ -169,6 +169,8 @@ classic.jar: + skin/classic/global/notification/critical-bar-background.png (notification/critical-bar-background.png) + skin/classic/global/notification/info-bar-background.png (notification/info-bar-background.png) + skin/classic/global/notification/warning-bar-background.png (notification/warning-bar-background.png) ++ skin/classic/global/media/videocontrols.css (media/videocontrols.css) ++ skin/classic/global/media/videocontrols.png (media/videocontrols.png) + skin/classic/global/menu/menu-arrow-dis.gif (menu/menu-arrow-dis.gif) + skin/classic/global/menu/menu-arrow-hov.gif (menu/menu-arrow-hov.gif) + skin/classic/global/menu/menu-arrow.gif (menu/menu-arrow.gif) diff --git a/toolkit/themes/pinstripe/global/media/videocontrols.css b/toolkit/themes/pinstripe/global/media/videocontrols.css new file mode 100644 index 000000000000..47e1ae6dbdb2 --- /dev/null +++ b/toolkit/themes/pinstripe/global/media/videocontrols.css @@ -0,0 +1,23 @@ +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +#controlsBackground { + height: 24px; + background-color: #656363; +} + +#playButton { + list-style-image: url(chrome://global/skin/media/videocontrols.png); + -moz-image-region: rect(0px, 48px, 24px, 24px); +} +#playButton[paused="true"] { + -moz-image-region: rect(0px, 24px, 24px, 0px); +} + +#muteButton{ + list-style-image: url(chrome://global/skin/media/videocontrols.png); + -moz-image-region: rect(24px, 24px, 48px, 0px); +} +#muteButton[muted="true"] { + -moz-image-region: rect(24px, 48px, 48px, 24px); +} + diff --git a/toolkit/themes/pinstripe/global/media/videocontrols.png b/toolkit/themes/pinstripe/global/media/videocontrols.png new file mode 100644 index 0000000000000000000000000000000000000000..4a54c4697c6d8ebe5361e174940208a2f93dae33 GIT binary patch literal 478 zcmV<40U`d0P)Wh?6NN9+YY!=S)dFE(1Y@hQp^lur~ z0vM0SkXBV;0H$dI7l!5Mi`q}6{tke$EDI{-vb+FXjd~qI!JxbVsNrx3d(o)80I11i z0>_z*ya1^Ad=9m0l>n%O{#6r8`x=${Lni$wA^k8%`v3tD009sH0T2KIcnp9e^+mBL zEZFu|05XS1VgPm&g)KFoh9M+84sLHRukcX2_Z}dXNU-r5B?4eK5`ho>9eQ6q_W%c) z2CZh31?8Sjr}m7_0nQ5rwyAA?Gm>z3bIXEqw_9x%-ZcQ0$!s=*W#RydSd49K_;fZY zlWwPDhjp?m09+zgX|aR`-+j0&mDUE()b!Hu1R#A0IW_U1-**J?s)?T;pS%Td@^$5k z-EC2?(bHTGjIJRL0FA#`Mx&9i4_PuE2fd+-1K>R(a+JUx5jINDG)e#jKmeZk2W5vE U3gx=~m;e9(07*qoM6N<$g2yw;g#Z8m literal 0 HcmV?d00001 diff --git a/toolkit/themes/winstripe/global/jar.mn b/toolkit/themes/winstripe/global/jar.mn index 0f0a57a54a22..0d9c05e4cb39 100644 --- a/toolkit/themes/winstripe/global/jar.mn +++ b/toolkit/themes/winstripe/global/jar.mn @@ -144,6 +144,8 @@ classic.jar: skin/classic/global/icons/warningBarIcon-16.png (icons/warningBarIcon-16.png) skin/classic/global/icons/warningGhosted-64.png (icons/warningGhosted-64.png) skin/classic/global/icons/wrap.png (icons/wrap.png) + skin/classic/global/media/videocontrols.css (media/videocontrols.css) + skin/classic/global/media/videocontrols.png (media/videocontrols.png) skin/classic/global/radio/radio-check.gif (radio/radio-check.gif) skin/classic/global/radio/radio-check-dis.gif (radio/radio-check-dis.gif) skin/classic/global/scrollbar/slider.gif (scrollbar/slider.gif) @@ -308,6 +310,8 @@ classic.jar: skin/classic/aero/global/icons/warningBarIcon-16.png (icons/warningBarIcon-16-aero.png) skin/classic/aero/global/icons/warningGhosted-64.png (icons/warningGhosted-64-aero.png) skin/classic/aero/global/icons/wrap.png (icons/wrap-aero.png) + skin/classic/aero/global/media/videocontrols.css (media/videocontrols.css) + skin/classic/aero/global/media/videocontrols.png (media/videocontrols.png) skin/classic/aero/global/radio/radio-check.gif (radio/radio-check.gif) skin/classic/aero/global/radio/radio-check-dis.gif (radio/radio-check-dis.gif) skin/classic/aero/global/scrollbar/slider.gif (scrollbar/slider.gif) diff --git a/toolkit/themes/winstripe/global/media/videocontrols.css b/toolkit/themes/winstripe/global/media/videocontrols.css new file mode 100644 index 000000000000..47e1ae6dbdb2 --- /dev/null +++ b/toolkit/themes/winstripe/global/media/videocontrols.css @@ -0,0 +1,23 @@ +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +#controlsBackground { + height: 24px; + background-color: #656363; +} + +#playButton { + list-style-image: url(chrome://global/skin/media/videocontrols.png); + -moz-image-region: rect(0px, 48px, 24px, 24px); +} +#playButton[paused="true"] { + -moz-image-region: rect(0px, 24px, 24px, 0px); +} + +#muteButton{ + list-style-image: url(chrome://global/skin/media/videocontrols.png); + -moz-image-region: rect(24px, 24px, 48px, 0px); +} +#muteButton[muted="true"] { + -moz-image-region: rect(24px, 48px, 48px, 24px); +} + diff --git a/toolkit/themes/winstripe/global/media/videocontrols.png b/toolkit/themes/winstripe/global/media/videocontrols.png new file mode 100644 index 0000000000000000000000000000000000000000..4a54c4697c6d8ebe5361e174940208a2f93dae33 GIT binary patch literal 478 zcmV<40U`d0P)Wh?6NN9+YY!=S)dFE(1Y@hQp^lur~ z0vM0SkXBV;0H$dI7l!5Mi`q}6{tke$EDI{-vb+FXjd~qI!JxbVsNrx3d(o)80I11i z0>_z*ya1^Ad=9m0l>n%O{#6r8`x=${Lni$wA^k8%`v3tD009sH0T2KIcnp9e^+mBL zEZFu|05XS1VgPm&g)KFoh9M+84sLHRukcX2_Z}dXNU-r5B?4eK5`ho>9eQ6q_W%c) z2CZh31?8Sjr}m7_0nQ5rwyAA?Gm>z3bIXEqw_9x%-ZcQ0$!s=*W#RydSd49K_;fZY zlWwPDhjp?m09+zgX|aR`-+j0&mDUE()b!Hu1R#A0IW_U1-**J?s)?T;pS%Td@^$5k z-EC2?(bHTGjIJRL0FA#`Mx&9i4_PuE2fd+-1K>R(a+JUx5jINDG)e#jKmeZk2W5vE U3gx=~m;e9(07*qoM6N<$g2yw;g#Z8m literal 0 HcmV?d00001