Closed
Bug 460155
Opened 16 years ago
Closed 16 years ago
update <video> control icons
Categories
(Toolkit :: Video/Audio Controls, defect)
Toolkit
Video/Audio Controls
Tracking
()
VERIFIED
FIXED
mozilla1.9.2a1
People
(Reporter: info, Assigned: jboriss)
References
()
Details
(Keywords: polish, verified1.9.1, Whiteboard: [polish-easy][polish-visual][polish-p2])
Attachments
(5 files, 7 obsolete files)
301.29 KB,
image/png
|
Details | |
5.04 KB,
patch
|
faaborg
:
ui-review+
beltzner
:
approval1.9.1+
|
Details | Diff | Splinter Review |
150.27 KB,
image/png
|
Details | |
41.97 KB,
application/zip
|
Details | |
2.83 KB,
image/png
|
Details |
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1b2pre) Gecko/20081015 Minefield/3.1b2pre
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1b2pre) Gecko/20081015 Minefield/3.1b2pre ID:20081015032107
The images for the video controls, e.g. on http://www.double.co.nz/video_test/events.html, should be improved to match the accepted iconography of audio equipment.
Reproducible: Always
Steps to Reproduce:
1. Go to a page with video controls, or view chrome://global/skin/media/videocontrols.png
2. Run a screen magnifier like Windows' magnify.exe
Actual Results:
The pause bars are slightly too tall.
The volume control speaker isn’t quite right, the voice coil on the back has rounded back corners (a voice coil has a squared off edge) and the coil is slightly too big for that size cone.
I earlier provided this feedback on http://jboriss.wordpress.com/2008/09/19/html-5-video-tag-pirate-edition/#comment-318 , along with comments on other parts of the control UI that aren't exposed (yet?).
I adjusted the pause and the voice coil in http://www.skierpage.com/moz_bugs/videocontrols_tweaked.png , go back/forwards between it and chrome://global/skin/media/videocontrols.png to see the improvements.
Unfortunately, #$@! MS Paint changed the color balance (what tool do you use to edit PNGs?), so it's not a replacement.
Assignee | ||
Comment 2•16 years ago
|
||
Thanks for the feedback, skierpage. I'll revisit this & post a mockup here.
Updated•16 years ago
|
Assignee: nobody → jboriss
Status: UNCONFIRMED → NEW
Ever confirmed: true
OS: Windows XP → All
Hardware: PC → All
Version: unspecified → Trunk
Comment 3•16 years ago
|
||
Attachment #353402 -
Flags: review?(dolske)
Comment 4•16 years ago
|
||
Pauze button was not centered, moved 1px to the left to make it centered.
Attachment #353402 -
Attachment is obsolete: true
Attachment #353426 -
Flags: review?(dolske)
Attachment #353402 -
Flags: review?(dolske)
Comment 5•16 years ago
|
||
Comment on attachment 353426 [details]
Centered pauze button
It basically looks fine to me, but...
* Bug 464371 is spitting these into multiple PNGs (1 per button state).
* If we're going to clean these up, I'd also like to make them proper transparent images (ie, transparent background instead of dark gray).
Boriss, I assume you have original vector art for these buttons? Can you generate cleaned up versions with all these changes?
Attachment #353426 -
Flags: review?(dolske) → review-
Comment 6•16 years ago
|
||
Ok, understood. That will be much better.
Comment 7•16 years ago
|
||
Bug 464371 has split the image into four images, but didn't fix the issue of this bug.
Btw, why split the image into separate images per button?
-moz-image-region was invented for the purpose of reducing the number of images in chrome (as they do impact performance of the browser overall).
Updated•16 years ago
|
Attachment #355399 -
Attachment description: Another example of fixed mediaplayer → Another example of fixed & transparent mediaplayer buttons.
Comment 8•16 years ago
|
||
(In reply to comment #7)
> Btw, why split the image into separate images per button?
> -moz-image-region was invented for the purpose of reducing the number of images
> in chrome (as they do impact performance of the browser overall).
Because -moz-image-region doesn't work with background images.
Comment 9•16 years ago
|
||
But as the buttons are now real xul buttons, a normal list-style-image would also work. And for making the background grey, background-color:grey would work ;-).
As said in other comments, the preference is to use transparent icons, and let the css do the styling...
Note, I have done with my themes (such as Nautipolis and Walnut) and this works like a charm, with the added benefit that the browser provided controlBar as the same styling as the browser itself.
Comment 10•16 years ago
|
||
Sure, but the purpose of bug 464371 was suppress the unexpected load events. For example:
<button onload="alert('load')" style="list-style-image: url(http://www.google.com/intl/en_ALL/images/logo.gif)"/>
When <video onload="..."> gets triggered because of these image loads events, that's a problem.
Comment 11•16 years ago
|
||
So list-style-image do cause load events, but background-image not?
Assignee | ||
Comment 12•16 years ago
|
||
I agree with the jist of Comment 1, but would go a bit further. I've posted new versions of the graphics, with some changes:
- Pause icon a better height/thickness ratio
- Colors of played/loaded/unloaded more distinct from each other
- Volume icon looks less like shuttlecock
- Colors and opacities of controls and background changed to look better on various backgrounds. I've been playing around with this and think that a better solution than having the full opacity of the controls on top of the video is to have parts of it slightly transparent, so that some of the video can be seen below it. This makes the controls more visually integrated - rather than something stamped on top of the video, something blended in. If the background especially can be made slightly transparent, the difference is pretty striking (see preview).
Assignee | ||
Comment 13•16 years ago
|
||
Assignee | ||
Comment 14•16 years ago
|
||
pleaze to be provided
Assignee | ||
Comment 15•16 years ago
|
||
Assignee | ||
Updated•16 years ago
|
Attachment #355878 -
Attachment is obsolete: true
Assignee | ||
Updated•16 years ago
|
Attachment #355873 -
Attachment is obsolete: true
Assignee | ||
Comment 16•16 years ago
|
||
Comment 17•16 years ago
|
||
Patch version of Boriss's icon update.
Attachment #353426 -
Attachment is obsolete: true
Attachment #355399 -
Attachment is obsolete: true
Attachment #355880 -
Attachment is obsolete: true
Attachment #355889 -
Attachment is obsolete: true
Attachment #355898 -
Flags: ui-review?(faaborg)
Updated•16 years ago
|
Attachment #355898 -
Attachment is patch: true
Attachment #355898 -
Attachment mime type: application/octet-stream → text/plain
Comment 18•16 years ago
|
||
Updated•16 years ago
|
Attachment #355898 -
Flags: ui-review?(faaborg) → ui-review+
Comment 19•16 years ago
|
||
There are some gray lines on the inside edges of the pause button. I'm not sure if this was intentional or not, and not a big enough deal to block ui-r+, but they might make the icon look ever so slightly fuzzy.
Updated•16 years ago
|
Summary: in <video> controls, the pause control is too tall and loudspeaker looks wrong → update <video> control icons
Updated•16 years ago
|
Attachment #355898 -
Flags: approval1.9.1?
Comment 20•16 years ago
|
||
Comment on attachment 355898 [details] [diff] [review]
Patch v.1
a191=beltzner
Attachment #355898 -
Flags: approval1.9.1? → approval1.9.1+
Assignee | ||
Comment 21•16 years ago
|
||
Comment 22•16 years ago
|
||
Status: NEW → RESOLVED
Closed: 16 years ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla1.9.2a1
Comment 23•16 years ago
|
||
Pushed to branch: http://hg.mozilla.org/releases/mozilla-1.9.1/rev/c007cf4d5fb4
Keywords: fixed1.9.1
Assignee | ||
Comment 24•16 years ago
|
||
Comment 25•16 years ago
|
||
Verified on Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b4pre) Gecko/20090313 Shiretoko/3.1b4pre Ubiquity/0.1.5
and Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.2a1pre) Gecko/20090313 Minefield/3.2a1pre
Status: RESOLVED → VERIFIED
Keywords: fixed1.9.1 → verified1.9.1
Comment 26•15 years ago
|
||
This bug's priority relative to the set of other polish bugs is:
P2 - Polish issue that is in a secondary interface, occasionally encountered, and is easily identifiable.
Whiteboard: [polish-easy] → [polish-easy][polish-visual][polish-p2]
Updated•15 years ago
|
Component: Video/Audio → Video/Audio Controls
Product: Core → Toolkit
QA Contact: video.audio → video.audio
Target Milestone: mozilla1.9.2a1 → ---
Version: Trunk → unspecified
Updated•15 years ago
|
Target Milestone: --- → mozilla1.9.2a1
You need to log in
before you can comment on or make changes to this bug.
Description
•