Bug 488083 - video scrubber thumb can overlap play/pause button and duration. ui-r=boriss, r=ryan
authorJustin Dolske <dolske@mozilla.com>
Thu, 23 Apr 2009 00:33:35 -0700
changeset 27668 4fbaf81986a24cb7e39ac838d4705ec1e4dd6a50
parent 27667 33ae4bca85cde8d8f2f9a79d61bc1d76f7da1495
child 27669 e167d6ca202331c03489dbf17095839336663771
push id6682
push userjdolske@mozilla.com
push dateThu, 23 Apr 2009 07:34:34 +0000
treeherdermozilla-central@e167d6ca2023 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersboriss, ryan
bugs488083
milestone1.9.2a1pre
Bug 488083 - video scrubber thumb can overlap play/pause button and duration. ui-r=boriss, r=ryan
toolkit/themes/pinstripe/global/media/scrubberThumb.png
toolkit/themes/pinstripe/global/media/scrubberThumbWide.png
toolkit/themes/pinstripe/global/media/videocontrols.css
toolkit/themes/winstripe/global/media/scrubberThumb.png
toolkit/themes/winstripe/global/media/scrubberThumbWide.png
toolkit/themes/winstripe/global/media/videocontrols.css
index 6b388b17e3f1c0752ecb8e018e0d4b1ed106e09c..f382be9c8fa5b394f9184065f10a025629b88610
GIT binary patch
literal 551
zc$@(z0@(eDP)<h;3K|Lk000e1NJLTq001oj000{Z1^@s6=s5-|0005*Nkl<ZSi|L4
zO-lk%6m_UXA=<R7KM(}{hiKEPMd7Nw|3So$nT5X~TI9m~4MO0qy$eBu7Hutp49!R^
zN9`QBf(&Ee%p2cG4=$HC@7;3__sx6vy-4Igv_vAYk<aJ%vf1o~Wm!eo1FV(H<=)|Y
z@L%FT9es|sWPXwH#35c_VnMJ8qGOQPU~jN*klU~^Y~rx7!#l@p#tTl3xWrd2_!LA9
z$)1}KKQ<QJ26<HIH2`!4z;*y)-BzGYKJxm>@C|_a0gH87pS+#~<3BsWvVE*r@YKjl
z{-s4DxPsuJCeh@rEG-&=bsd7|gx9_N&(}ILO@1$;4*<~Bl<6+{J#9wQH1BnYCa<q5
zh^1;u^;^Yn!7ABQQ5_8cmSL|_wu2CC3x3&GVR6a&5$qP3c!rG>R7jTZ5%Gvi{J<_w
znM~#oge8zY$?a|E;SBCce2I9gyrRaDopavOxZ5TBe~BH*yc**eukC&f0Ws|MONe=d
zsKEl!1CDbZ=ZEEOV5HOOeTb_%Pa5f0Ij(e*scNZIYM14AwozrH)%iWt&oM0jS)ovv
z9%J<EhyD!-kx>!-Bch}0@bHa`=n1{nQ(}osZ_kTne;q{c%+73j_SZpl3}QQSdUV2c
pE-!4!WO55d<PM@==-F4z@e45R(UWa<4K@G(002ovPDHLkV1nrG2}1w?
index b011830e13f71502869dd420c05611ed96914fdd..6db34269bd94b599def615709650dff133293ecb
GIT binary patch
literal 610
zc$@)Z0-gPdP)<h;3K|Lk000e1NJLTq001oj000{Z1^@s6=s5-|0006hNkl<ZSi{v;
zJx>Bb5MA-3(8S8bpJ8GxjkLD>0b__ifQm>0l-5@AFH8^<60syC6cRhJGgd$ZB7z);
z@0o#|2*)0|JI+bo?cVL|%)8y$*-=VEQmNE#CX=~Hr_(n;8T}`;&jk84;1y`&eSp>k
zMpH0ltS!1V%Y51@(>8t3ms&#BFmVqC&Vf9Pea<1`1x)dmr+@MwA6vGV5CI;6j*mp`
zexM_KA~RPP16NS2FCc5q`KJ4Wri~4|Id$^;wd(kAje)L)Qv>({deUEZH%yt|6MKfn
zoGy7<L!zbQ40?TFNVpI_=GYePYWi>egbE%Hnt$p9##HN?UGi1v<Ro1U-8@7ZvFZrI
zk0~=p(pirPk31rtRf$AmA1^N+gvQA25Ft<U9p89on%QHOE8Qhe>opzX6$&(6*goy=
z4$zb<J~XSwID~_e<iz1BZ$$A=9wqX!y~?A}=sJ{+p?n84JV;wQX{|y3<Uu};DkoN4
zz$pw=qz)K(w5kKKU!lKcE4@DwkH>dl>;z5<z`F}OV2GUp?b5#TQg|Se$>aeX7Nvf0
zLYDeP&YyX(d=S>&M<7wvNNpUiQh#BM?1zBJ2IBD&_?Q#39~`Hi3X*WE<<R!0D?>S4
zAr(YndIHIN>rKda$7#!N0nxCfPUZy>RzVkp!M3%Y=6m2tGv8Y4Y0vYoiz_`ji2q`x
wrDB{M#K2~aDbiawfVUw0#x@p<ZMyB_8=V=<l1HAkH2?qr07*qoM6N<$g5xa{5&!@I
--- a/toolkit/themes/pinstripe/global/media/videocontrols.css
+++ b/toolkit/themes/pinstripe/global/media/videocontrols.css
@@ -112,40 +112,49 @@
 /* .scale-slider is an element inside the <scale> implementation. */
 .scrubber .scale-slider, .volumeControl .scale-slider {
     /* Hide the default horizontal bar. */
     -moz-appearance: none;
     background: none;
     margin: 0;
 }
 
+.scrubber .scale-slider {
+    /* abs(margin-top) + margin-bottom + bar height == timeThumb height */
+    margin-top: -9px;
+    margin-bottom: 10px;
+}
 /* .scale-thumb is an element inside the <scale> implementation. */
 .scrubber .scale-thumb {
     /* Override the default thumb appearance with a custom image. */
     -moz-appearance: none;
     background: transparent;
     border: none;
 }
 
 .timeThumb {
     background: url(chrome://global/skin/media/scrubberThumb.png) no-repeat center;
-    min-width: 44px;
-    min-height: 22px;
-    margin-top: -14px;
+    min-width: 45px;
+    min-height: 27px;
     -moz-box-pack: center;
 }
 
 .timeThumb[showhours="true"] {
     background: url(chrome://global/skin/media/scrubberThumbWide.png) no-repeat center;
 }
 
 .timeLabel {
     color: rgba(255,255,255,0.75);
     font: 10px sans-serif;
-    padding-top: 6px;
+    text-shadow: rgba(0,0,0, 0.3) 0 1px;
+    padding-top: 4px;
+}
+
+.timeThumb[showhours="true"] > .timeLabel {
+    padding-top: 3px;
 }
 
 .statusOverlay {
     background-color: rgba(0,0,0,0.55);
 }
 
 .statusIcon {
     margin-bottom: 28px; /* same height as .controlBar, to keep icon centered above it */
index 6b388b17e3f1c0752ecb8e018e0d4b1ed106e09c..f382be9c8fa5b394f9184065f10a025629b88610
GIT binary patch
literal 551
zc$@(z0@(eDP)<h;3K|Lk000e1NJLTq001oj000{Z1^@s6=s5-|0005*Nkl<ZSi|L4
zO-lk%6m_UXA=<R7KM(}{hiKEPMd7Nw|3So$nT5X~TI9m~4MO0qy$eBu7Hutp49!R^
zN9`QBf(&Ee%p2cG4=$HC@7;3__sx6vy-4Igv_vAYk<aJ%vf1o~Wm!eo1FV(H<=)|Y
z@L%FT9es|sWPXwH#35c_VnMJ8qGOQPU~jN*klU~^Y~rx7!#l@p#tTl3xWrd2_!LA9
z$)1}KKQ<QJ26<HIH2`!4z;*y)-BzGYKJxm>@C|_a0gH87pS+#~<3BsWvVE*r@YKjl
z{-s4DxPsuJCeh@rEG-&=bsd7|gx9_N&(}ILO@1$;4*<~Bl<6+{J#9wQH1BnYCa<q5
zh^1;u^;^Yn!7ABQQ5_8cmSL|_wu2CC3x3&GVR6a&5$qP3c!rG>R7jTZ5%Gvi{J<_w
znM~#oge8zY$?a|E;SBCce2I9gyrRaDopavOxZ5TBe~BH*yc**eukC&f0Ws|MONe=d
zsKEl!1CDbZ=ZEEOV5HOOeTb_%Pa5f0Ij(e*scNZIYM14AwozrH)%iWt&oM0jS)ovv
z9%J<EhyD!-kx>!-Bch}0@bHa`=n1{nQ(}osZ_kTne;q{c%+73j_SZpl3}QQSdUV2c
pE-!4!WO55d<PM@==-F4z@e45R(UWa<4K@G(002ovPDHLkV1nrG2}1w?
index b011830e13f71502869dd420c05611ed96914fdd..6db34269bd94b599def615709650dff133293ecb
GIT binary patch
literal 610
zc$@)Z0-gPdP)<h;3K|Lk000e1NJLTq001oj000{Z1^@s6=s5-|0006hNkl<ZSi{v;
zJx>Bb5MA-3(8S8bpJ8GxjkLD>0b__ifQm>0l-5@AFH8^<60syC6cRhJGgd$ZB7z);
z@0o#|2*)0|JI+bo?cVL|%)8y$*-=VEQmNE#CX=~Hr_(n;8T}`;&jk84;1y`&eSp>k
zMpH0ltS!1V%Y51@(>8t3ms&#BFmVqC&Vf9Pea<1`1x)dmr+@MwA6vGV5CI;6j*mp`
zexM_KA~RPP16NS2FCc5q`KJ4Wri~4|Id$^;wd(kAje)L)Qv>({deUEZH%yt|6MKfn
zoGy7<L!zbQ40?TFNVpI_=GYePYWi>egbE%Hnt$p9##HN?UGi1v<Ro1U-8@7ZvFZrI
zk0~=p(pirPk31rtRf$AmA1^N+gvQA25Ft<U9p89on%QHOE8Qhe>opzX6$&(6*goy=
z4$zb<J~XSwID~_e<iz1BZ$$A=9wqX!y~?A}=sJ{+p?n84JV;wQX{|y3<Uu};DkoN4
zz$pw=qz)K(w5kKKU!lKcE4@DwkH>dl>;z5<z`F}OV2GUp?b5#TQg|Se$>aeX7Nvf0
zLYDeP&YyX(d=S>&M<7wvNNpUiQh#BM?1zBJ2IBD&_?Q#39~`Hi3X*WE<<R!0D?>S4
zAr(YndIHIN>rKda$7#!N0nxCfPUZy>RzVkp!M3%Y=6m2tGv8Y4Y0vYoiz_`ji2q`x
wrDB{M#K2~aDbiawfVUw0#x@p<ZMyB_8=V=<l1HAkH2?qr07*qoM6N<$g5xa{5&!@I
--- a/toolkit/themes/winstripe/global/media/videocontrols.css
+++ b/toolkit/themes/winstripe/global/media/videocontrols.css
@@ -120,40 +120,50 @@
 /* .scale-slider is an element inside the <scale> implementation. */
 .scrubber .scale-slider, .volumeControl .scale-slider {
     /* Hide the default horizontal bar. */
     -moz-appearance: none;
     background: none;
     margin: 0;
 }
 
+.scrubber .scale-slider {
+    /* abs(margin-top) + margin-bottom + bar height == timeThumb height */
+    margin-top: -9px;
+    margin-bottom: 10px;
+}
+
 /* .scale-thumb is an element inside the <scale> implementation. */
 .scrubber .scale-thumb {
     /* Override the default thumb appearance with a custom image. */
     -moz-appearance: none;
     background: transparent;
     border: none;
 }
 
 .timeThumb {
     background: url(chrome://global/skin/media/scrubberThumb.png) no-repeat center;
-    min-width: 44px;
-    min-height: 22px;
-    margin-top: -14px;
+    min-width: 45px;
+    min-height: 27px;
     -moz-box-pack: center;
 }
 
 .timeThumb[showhours="true"] {
     background: url(chrome://global/skin/media/scrubberThumbWide.png) no-repeat center;
 }
 
 .timeLabel {
     color: rgba(255,255,255,0.75);
     font: 10px sans-serif;
-    padding-top: 3px;
+    text-shadow: rgba(0,0,0, 0.3) 0 1px;
+    padding-top: 2px;
+}
+
+.timeThumb[showhours="true"] > .timeLabel {
+    padding-top: 1px;
 }
 
 .statusOverlay {
     background-color: rgba(0,0,0,0.55);
 }
 
 .statusIcon {
     margin-bottom: 28px; /* same height as .controlBar, to keep icon centered above it */