991945 - Fix modern theme fallout from bug 649490 (Horizontal html5 audio/video volume control)

Status: RESOLVED FIXED

(SeaMonkey :: Themes, defect)

Description

[[e-mail]]

I actually saw bug 649490 land, but forgot to follow up on it, and nobody else noticed until Patrick Dempsey pointed out that Modern's videocontrols.css is now broken.

Comment 1

[[e-mail]]

Attachment: Proposed patch

I didn't quite follow Patrick's suggestions.
The volumeStack now needs no themeing at all.
The volume control's height changes to a width, and I also halved it to match Classic. I switched the width and height on the volume control's thumb too of course.
The volumeBackgroundBar is now just volumeBackground, and also it's the margin's values that now need to be switched around.

Comment 2

[[e-mail]]

Of course further work could be done to make it look more like a volume control, but this at least unbreaks the theme.

Comment 3

[Philip Chee]

Comment on attachment 8401617 [details] [diff] [review]
Proposed patch

>  .volumeControl {
> -  min-height: 64px;
> +  width: 32px;
I prefer the width to be wider (say 64px) but in anycase r=me

Comment 4

[[e-mail]]

Attachment: Isosceles triangle

This is with a triangular volume control, see what you think?

Comment 5

[Philip Chee]

Comment on attachment 8402198 [details] [diff] [review]
Isosceles triangle

(In reply to [e-mail] from comment #4)
> This is with a triangular volume control, see what you think?
Hmm I prefer Patricks version in Bug 992294. It's less fragile.

.volumeBackground {
background-image: linear-gradient(to bottom right, rgba(255,255,255,0), rgba(255,255,255,0) 50%, rgba(255,255,255,.5) 51%, rgba(255,255,255,.5));
}

Adding a margin makes it look better

.volumeBackground {
margin: 5px 4px;
background-image: linear-gradient(to bottom right, rgba(255,255,255,0), rgba(255,255,255,0) 50%, rgba(255,255,255,.5) 51%, rgba(255,255,255,.5));
}

Comment 6

[Philip Chee]

> (In reply to [e-mail] from comment #4)
> > This is with a triangular volume control, see what you think?
> Hmm I prefer Patricks version in Bug 992294. It's less fragile.

<NeilAway>	wonders what RattyAway means by "fragile"
<RattyAway>	NeilAway: it means I don't understand how it works
<NeilAway>	RattyAway: http://apps.eky.hk/css-triangle-generator/

Comment 7

[Philip Chee]

Comment on attachment 8402198 [details] [diff] [review]
Isosceles triangle

(In reply to [e-mail] from comment #4)
> Created attachment 8402198 [details] [diff] [review]
> 991945.diff
> 
> This is with a triangular volume control, see what you think?
Looks rather ugly. Sorry.

Comment 8

[[e-mail]]

Attachment: Right-angled triangle

Comment 9

[[e-mail]]

FYI the first triangle is isosceles because Classic uses an isosceles triangle, while the second triangle is a right-angled triangle to match Patrick's suggestion (but using simpler CSS).

Comment 10

[Philip Chee]

Comment on attachment 8405909 [details] [diff] [review]
Right-angled triangle

> -  min-height: 64px;
> +  width: 32px;
Looks good.

> -  min-width: 20px;
> +  min-height: 20px;
> +  min-width: 11px;
The scale thumb could be narrower, say 8px?

> +.volumeBackground {
...
> +  border-top-width: 16px;
> +  -moz-border-end-width: 24px;
What works for me is:

> border-top-width: 16px;
> -moz-border-end-width: 32px;

r=me with the above fixed plus please add a comment containing a pointer to
http://appendto.com/2013/03/pure-css-triangles-explained/

Comment 11

[[e-mail]]

(In reply to Philip Chee from comment #10)
> > -  min-width: 20px;
> > +  min-height: 20px;
> > +  min-width: 11px;
> The scale thumb could be narrower, say 8px?
Yes; of course I have to reduce the border radius to 4px.

> > +.volumeBackground {
> What works for me is:
> 
> > border-top-width: 16px;
> > -moz-border-end-width: 32px;

I'd like you to choose between three versions of the 2:1 aspect ration:

.volumeBackground {
  margin: 6px 0px;
  border: 0px solid transparent;
  border-top-width: 16px;
  -moz-border-end-width: 32px;
  -moz-border-end-color: #B1BBC5;
}

.volumeBackground {
  margin: 7px 2px;
  border: 0px solid transparent;
  border-top-width: 14px;
  -moz-border-end-width: 28px;
  -moz-border-end-color: #B1BBC5;
}

.volumeBackground {
  margin: 8px 4px;
  border: 0px solid transparent;
  border-top-width: 12px;
  -moz-border-end-width: 24px;
  -moz-border-end-color: #B1BBC5;
}

Comment 12

[Ian Neal]

Comment on attachment 8405909 [details] [diff] [review]
Right-angled triangle

I think the following one looks best:
.volumeBackground {
  margin: 6px 0px;
  border: 0px solid transparent;
  border-top-width: 16px;
  -moz-border-end-width: 32px;
  -moz-border-end-color: #B1BBC5;
}

Comment 13

[[e-mail]]

Pushed comm-central changeset 8067ac095355.

Comment 14

[Philip Chee]

Comment on attachment 8405909 [details] [diff] [review]
Right-angled triangle

[Approval Request Comment]
Regression caused by (bug #): Bug 649490 - Horizontal html5 audio/video volume control
User impact if declined: Unusable volume control in the media controls of <video> elements
Testing completed (on m-c, etc.): tested on comm-central
Risk to taking this patch (and alternatives if risky): No risk, feature was already broken.
String changes made by this patch: None.

a=me for a=comm-aurora and a=comm-beta.

Comment 15

[[e-mail]]

Pushed comm-aurora changeset 4f43e626ee6d.

Comment 16

[[e-mail]]

Pushed comm-beta changeset 65199009f39b.