663490 - Have a native rendering for meter elements on Windows

Status: RESOLVED WONTFIX

(Core :: Widget: Win32, defect, P3)

Description

[Yoan TEBOUL]

Attachment: PoC_v1.0

Windows does not have a native rendering for meter elements, yet it is possible to use the different states of the progress element to represent the different Optimum states of the meter element. I'm not sure that we really want to do this, since this is kind of a small hack, but it would give a native rendering. I post a first proof of concept that works.

Comment 1

[Mounir Lamouri (:mounir)]

Jimm, what do you think of using these PP_FILL states to represent the meter chunk. The only meter I've been able to find in Windows 7 UI is the blue bar representing the HD usage and it's using PP_FILL with a specific state (not used by this patch because the bar is blue). Though, the other states might not be appropriate and their look isn't really consistent with each other.

Yoan, maybe a screenshot would be helpful.

Comment 2

[Yoan TEBOUL]

Attachment: comparison.jpg

This image shows the two different appearances : with the default style and with the "windows" one.

Comment 3

[Mounir Lamouri (:mounir)]

Comment on attachment 538574 [details] [diff] [review]
PoC_v1.0

After talking with Jim on IRC, he recommended asking for a UI review.

So. the different colors of the meter elements represent how far the current value is from the ideal value. There are three possible states:
- optimum, which means equals to the ideal value or very close;
- sub-optimum, which means not too far from the ideal value but not close enough;
- sub-sub-optimum, which means far from the ideal value.

The size of the bar represents the value and the color represents the 'state'.
The ideal value can be anywhere in the meter. That means a very small value can be optimal or a very big one or even one in the middle. That means a big bar doesn't have to be green.

The specs:
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-meter-element

So, on Windows [1], there is no very clear meter element: we need to use something close to the progress one, though, that's what Microsoft recommends and it's used in Explorer to show the disk space for example. The bar inside the progress bar can have 4 states: 'normal' (green), 'partial' (yellow), 'paused' (blue) and 'error' (red). Partial is used for the meter in Explorer. Error is also used sometimes when the disk space is too small. Though, I'm not sure how and when paused and normal are used for a meter.

Here are the Microsoft recommendations:
http://msdn.microsoft.com/en-us/library/aa511486.aspx

So, Alexander, do you think we should use these states/colors or give up and use the default style (from forms.css) which might be nicer than what is in the screenshot.

[1] Only Vista and 7. Nothing can be done for Windows XP AFAIK. Jim, let me know if I'm wrong.

Comment 4

[Mounir Lamouri (:mounir)]

Alexander, could you have a look at the screenshot and the comment below?

Comment 5

[Jim Mathies [:jimm]]

Comment on attachment 538574 [details] [diff] [review]
PoC_v1.0

Per our irc discussion, this need a ui-review. Patch looks fine.

Comment 6

[Alex Limi (:limi) — Firefox UX Team]

Comment on attachment 538686 [details]
comparison.jpg

I think we should be using the Windows-style ones. As long as they use the same type of gradients, it's OK to use these colors — although I'm unsure how useful the yellow color is in real life. But if it's in the spec, we should support it.

(I don't have Windows booted right now, so if these don't look like their Windows progress bar counterparts, let me know — in any case these are preferrably over the flat ones.

Comment 7

[Andrew Cook]

I don't have a build to test, but it looks like under Classic themes this forces the meter bar's color to be the same COLOR_HIGHLIGHT color as progress bars, rather than unique colors for optimal/sub-optimal/sub-sub-optimal.

Comment 8

[Harsh Vardhan [:royalharsh95]]

I would like to work on this. Can anyone assign this to me, please ?

Comment 9

[Jim Mathies [:jimm]]

There ya go!

Comment 10

[Harsh Vardhan [:royalharsh95]]

I read the comments but couldn't figure out what do I have to do in this bug ? Can anybody guide me ? :)

Comment 11

[Harsh Vardhan [:royalharsh95]]

I was trying to apply the patch but I think the path to nsNativeThemeWin.cpp,nsNativeTheme.cpp and nsNativeTheme.h has been changed. When I tried by manually changing the path in the patch. It didn't help.It showed : errors during apply, please fix and refresh PoC_v1.0.diff.

Comment 12

[Jim Mathies [:jimm]]

(In reply to Harsh Vardhan [:royalharsh95] from comment #11)
> I was trying to apply the patch but I think the path to
> nsNativeThemeWin.cpp,nsNativeTheme.cpp and nsNativeTheme.h has been changed.
> When I tried by manually changing the path in the patch. It didn't help.It
> showed : errors during apply, please fix and refresh PoC_v1.0.diff.

The patch is bit rotten. Usually what you have to do is reapply the changes manually after updating your local repo. There's no way to get tools like patch to do this for you.

Comment 13

[BugBot [:suhaib / :marco/ :calixte]]

This good-first-bug hasn't had any activity for 6 months, it is automatically unassigned.
For more information, please visit auto_nag documentation.

Comment 14

[Abid999]

i would like to work on this bug? shall i proceed ?

Comment 15

[Stephen A Pohl [:spohl]]

Native theming of form elements (including the meter element) has been removed in bug 1535761 and dependent bugs and replaced with non-native theming.