Closed Bug 681548 Opened 11 years ago Closed 11 years ago

Media controls visual refresh


(Toolkit :: Themes, defect)

Not set





(Reporter: Dolske, Assigned: jaws)


(Keywords: verified-aurora)


(3 files)

We're working on a collection of small fixes to improve the browser's default HTML5 video/audio controls. They haven't changed much since the original landing for Firefox 3.5, and have accumulated bugs and dust.

I'd like to freshen the visual design of the controls. This could be as simple as just tweaking existing icons and colors. The only limit of this smallish-project is that large functional changes (eg, make UI for streaming suck less) should be done later.

See also:
One nitpicky tweak is that I'd like to fix the throbber, it's a little janky in the pixels/antialiasing (eg, some of the circles look pointy or fuzzy). Or maybe we want an entirely new throbber look.
Attachment #564714 - Attachment description: Potential design of new media controls → Potential design of new media controls mocked up by shorlander
Very sharp
Perhaps increase the drop shadow (opacity? length?) in case the first frame or poster image is white?
Comment on attachment 564714 [details]
Potential design of new media controls mocked up by shorlander

I'm curious as to how we would draw the thumb when it is near the ends of the bar, since the thumb wouldn't be in the middle of the time box?

Like so?
At time 00:00 of 01:00:
{[|    ]---------}

At time 00:30 of 01:00:
{----[  |  ]-----}

At time 01:00 of 01:00:
{---------[    |]}
Stephen: Can you please provide the graphics for the different parts of the controls?
Assignee: nobody → shorlander
Any update?
This is a simple patch that is just an image replacement of the previous graphics for the video controls. The padding-top of the timeLabel is adjusted to keep the time vertically centered within the thumb.
Assignee: shorlander → jwein
Attachment #592211 - Flags: review?(dao)
(In reply to Jared Wein [:jaws] from comment #7)
> Created attachment 592211 [details] [diff] [review]
> Patch for bug 681548

I forgot to note that these graphics are from shorlander :)
Attachment #592211 - Flags: review?(dolske)
Comment on attachment 592211 [details] [diff] [review]
Patch for bug 681548

The volume scrubber looks like it could use some polish too...
Attachment #592211 - Flags: review?(dao) → review+
Attachment #592211 - Flags: review?(dolske)
(In reply to Dão Gottwald [:dao] from comment #9)
> Comment on attachment 592211 [details] [diff] [review]
> Patch for bug 681548
> The volume scrubber looks like it could use some polish too...

I talked with shorlander and he was OK with the volume slider not getting updated in this bug since it's secondary UI.
Closed: 11 years ago
Resolution: --- → FIXED
Whiteboard: [fixed-in-fx-team]
Target Milestone: --- → mozilla12
Attached image new controls screenshot
Mozilla/5.0 (Windows NT 6.1; rv:12.0a2) Gecko/20120206 Firefox/12.0a2
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:12.0a2) Gecko/20120206 Firefox/12.0a2
Mozilla/5.0 (X11; Linux i686; rv:12.0a2) Gecko/20120207 Firefox/12.0a2

Verified that timer label has cornered edges, volume button is changed, play button is larger and there is a new play button (overlaying the video) which fades in at mouse hover (and video image fades out) and fades out when mouse hover is removed (and video fades in). This button is displayed only before video is started to play, butit is not displayed when video is paused - shouldn't it be? 
Also, controls bar is displayed permanently before vidoe playing starts, so there is a redundant "play" button. Is this intended?

Are there an other UI changes to the video controls (except the ones mentioned) that were made for this bug? If so, can anyone please post some images for the new design?

Thank you!
Marking verified based on previous comment
Keywords: verified-aurora
You need to log in before you can comment on or make changes to this bug.