490277 - SM2: Update video controls for Mozilla 1.9.1 changes

Status: RESOLVED FIXED

(SeaMonkey :: Themes, enhancement)

Description

[Ben Frisch]

The video controls and videocontrols.css should be updated for the Mozilla 1.9.1 changes.

Comment 1

[Ben Frisch]

Attachment: Video Controls Images and CSS v.1

This updates videocontrols.css and images based on what's in 1.9.1 right now, while still keeping the modern theme colors.  I had to update the play, pause, and mute images in modern to be based off the transparent images in the 1.9.1, as half of the scrubber would otherwise be hidden at first.  The scrubber, throbber, and error images look okay to me in their winstripe form.

Comment 2

[[e-mail]]

Comment on attachment 374730 [details] [diff] [review]
Video Controls Images and CSS v.1

>+  margin: 0px;
>+  padding: 0px;
>+  border: none;
Don't need these.

> .muteButton {
>   background: url(chrome://global/skin/media/muteButton.png) no-repeat center;
>+  min-width: 33px;
Why this change?

>+  /* margin left/right: 1/2 of scrubber thumb width, for overhang. */
>+  margin: 10px 22px 10px 22px;
Nit: just use 10px 22px;

>+  -moz-appearance: none;
Don't need these anywhere in this file.

>+.volumeStack {
...
>+  border: none;
Don't need this?

> /* .scale-slider is an element inside the <scale> implementation. */
>-.scale-slider {
>-  /* Hide the default box. */
>+.scrubber .scale-slider, .volumeControl .scale-slider {
>+  /* Hide the default horizontal bar. */
>+  -moz-appearance: none;
>   background: none;
>-  border: none;
Why these changes?

>+  -moz-border-radius: 4px 4px;
Nit: one 4px suffices.

>+.timeThumb {
>+  background: url(chrome://global/skin/media/scrubberThumb.png) no-repeat center;
>+  min-width: 45px;
>+  min-height: 27px;
>+  -moz-box-pack: center;
>+}
>+
>+.timeThumb[showhours="true"] {
>+  background: url(chrome://global/skin/media/scrubberThumbWide.png) no-repeat center;
I don't like the background colour of these images. Haven't checked your other image changes yet.

Comment 3

[[e-mail]]

Comment on attachment 374730 [details] [diff] [review]
Video Controls Images and CSS v.1

The other image changes are definitely wrong, sorry; the alpha transparency has been applied incorrectly.

Comment 4

[[e-mail]]

Comment on attachment 374730 [details] [diff] [review]
Video Controls Images and CSS v.1

Oh, and I spotted a TAB character somewhere...

Comment 5

[Robert Kaiser]

This bug is open but targeted for seamonkey2.0b1, which has already been released. Please set the target milestone to an appropriate value, "---" if it has no specific target.

Comment 6

[Robert Kaiser]

Can we get some traction on this one? Would be good if the <video> element would work fine in Modern in 2.0...

Comment 7

[Ben Frisch]

Sure.  I'll try to submit another patch this week.

Comment 8

[Robert Kaiser]

Benjamin?
We really would like to have video controls working in Modern for 2.0, but RC1 is already cut and RC1 will probably be done next week, so we'd need a patch very soon now...

Comment 9

[Robert Kaiser]

er, RC2 is what's probably next week, and we expect RC2 to become final if possible...

Comment 10

[Ben Frisch]

Attachment: CSS and Images v.2

This should address all of Neil's comments.  I think the new thumbs should blend in nicely with modern's style, but any suggestions on how to deal with the thumbs would be appreciated.  Sorry for taking so long.

Comment 11

[[e-mail]]

Comment on attachment 405413 [details] [diff] [review]
CSS and Images v.2

Haven't looked at the images yet, just some CSS nits:

> .muteButton {
>   background: url(chrome://global/skin/media/muteButton.png) no-repeat center;
>+  min-width: 33px;
Why is this button wider?

>+  margin: -70px 3px 28px -31px;
[-28px if we don't make the volume button wider]

> .scale-slider {
>   /* Hide the default box. */
>   background: none;
>   border: none;
Nit: you turned border off for all sliders already, didn't you?

>   min-height: 20px;
[Not sure why this is here, but then you didn't add it, so meh.]

>+.volumeControl .scale-thumb {
>   /* Override the default thumb appearance. */
>   background-color: #B1BBC5;
>   background-image: none;
>   border: 2px solid;
>   -moz-border-top-colors: #000000;
>   -moz-border-right-colors: #000000;
>   -moz-border-bottom-colors: #000000;
>   -moz-border-left-colors: #000000;
>   -moz-border-radius: 5px;
>   min-width: 11px;
>   min-height: 20px;
Don't we need to swap these dimensions for the volume scale thumb?

Comment 12

[[e-mail]]

Hmm, the images don't have alpha transparency, was that intentional?

Comment 13

[[e-mail]]

(In reply to comment #11)
> > .muteButton {
> >   background: url(chrome://global/skin/media/muteButton.png) no-repeat center;
> >+  min-width: 33px;
> Why is this button wider?
I hadn't noticed, but apparently it's always been a wider image.

Comment 14

[[e-mail]]

(In reply to comment #12)
> Hmm, the images don't have alpha transparency, was that intentional?
I've created some draft images with alpha transparency, they look much better.

One other thing I noticed was that the current time wasn't vertically centered.

Comment 15

[Ben Frisch]

Attachment: Zip of Images with Alpha Transparency

I'll get to the CSS changes this afternoon, but I did intend to include the images in this zip file in the previous patch. (I'll work on properly getting these into the next patch.) Also, with this thumb, the current time should be centered.

Comment 16

[[e-mail]]

Attachment: Real alpha transparency

OK, so this is what I meant when I asked for alpha transparency.

Comment 17

[Robert Kaiser]

The window for 2.0 RC2/final is about to close within hours now, we will tag the source and create the builds some time tomorrow probably - if you want to get this in, you should better be fast...

Comment 18

[[e-mail]]

Attachment: Updated for review comments

I swapped the dimensions of the volume scale thumb.
I removed the slider { border: none; } rule as it seems superfluous.
I replaced the images with anti-aliased images.

Comment 19

[Ben Frisch]

Thanks for the patch Neil.  The images look good, but I noticed that there's no scrubber thumbs in the patch.

Comment 20

[[e-mail]]

(In reply to comment #19)
> Thanks for the patch Neil.  The images look good, but I noticed that there's no
> scrubber thumbs in the patch.
My fault, I forgot to hg add them before creating the patch.

Comment 21

[[e-mail]]

Pushed changeset 0cb216450528 to comm-central.