Closed Bug 781002 Opened 8 years ago Closed 7 years ago
Story - Apply metro styling to the context menu
6.88 KB, image/png
24.30 KB, image/png
3.16 KB, text/html
33.91 KB, image/png
1.84 KB, patch
|Details | Diff | Splinter Review|
14.97 KB, image/png
11.48 KB, image/png
The context menu will need metro styling. Currently it has the xul fennec style.
Implementation: - We need to make sure that there's data pushed from content to chrome about the location that the context menu needs to be shown at. - Context menus (along with menulists, for that matter) need to be tied to that popup location. - There needs to be some CSS to style the menus like Metro style menus.
(In reply to Jonathan Wilde [:jwilde] from comment #1) > - There needs to be some CSS to style the menus like Metro style menus. Is there a way to pick up the style from the system?
(In reply to Stephen Horlander from comment #2) > (In reply to Jonathan Wilde [:jwilde] from comment #1) > > > - There needs to be some CSS to style the menus like Metro style menus. > > Is there a way to pick up the style from the system? Hover and selection color seem to be defined on a per app basis, so I think we can customize those if we want. The basic style though is pretty constant. I've just revamped this a bit in my selection work, I'll post some examples / screen shots here so you can tweak look and feel.
these are hard to get. the popups hide when you hit the screen cap buttons. you might want to get a hold of a win8 tablet to take a look at some more.
(In reply to Jim Mathies [:jimm] from comment #5) > Created attachment 651486 [details] > current firefox theme (active on the left, hover on the right)
So it looks like certain colors are locked: 1) hover color, which is a gray/brownish 2) active color, which is black selection color varies between apps. I'll see if I can track down a system color source for some of these.
Component: Theme → General
Product: Firefox → Firefox for Metro
Component: General → Theme
Priority: -- → P2
Summary: Apply metro styling to the context menu → Story - Apply metro styling to the context menu
Whiteboard: [metro-mvp][LOE:1] → [metro-mvp][LOE:1] feature=story u=metro_firefox_user c=context_menus
Whiteboard: [metro-mvp][LOE:1] feature=story u=metro_firefox_user c=context_menus → feature=story u=metro_firefox_user c=context_menus p=0
Whiteboard: feature=story u=metro_firefox_user c=context_menus p=0 → feature=story u=metro_firefox_user c=context_menus p=2
This just requires a final sign off on css color codes I think, and any tweaks to layout ux wants.
Component: Theme → Metro Operations
Product: Firefox for Metro → Tracking
Version: Trunk → ---
I can only find http://msdn.microsoft.com/en-us/library/windows/apps/hh465308.aspx in reference to context menus, which includes nothing about :hover / :active styles. From looking around at other apps, it looks like that :active background is a light grey: rgb(222,222,222). However we use the orange everywhere else for a selected color so I'm not sure we should break our own convention here? I can adjust the padding a little and double-check the popup placement - the MS guidelines indicate it should always be centered on the selection/context and what looks like a few pixels above/below.
Here's the current orange selected color side by side with grey color. Padding is adjusted here to roughly align with other apps. Apart from tweaks there, the only other thing I see is that MS' menu text seems to be semi-bold, or perhaps just a larger font-size?
I've always wondered if we should have that gap on the top and bottom. Seems like the top and bottom menu items should sit flush with the border.
I think the SDK's menus have that gap - about every context menu I've seen looks like the grey one on the right. The gap serves show you that the menu item isn't cropped in any way maybe? I can't muster strong feelings about it - seems like you could argue it either way, and it comes down to consistency (with other store apps) vs. aethetics and our own internal consistency.
Did I post further clarification to another bug? Anyhow, this should be a very minor fix so I just need clarification on what menu item states get which color (with color values if we dont use them elsewhere).
Context Menu Colors: - Hover: Black (#000) text on grey (#ccc) background - Pressed: White (#fff) text on black (#000) background It probably doesn't affect this but I should note that context menus have different styling than dropdown menus: - Hover: Black (#000) text on light-grey (#f0f0f0) background - Pressed: Black (#000) text on grey (#d3d3d3) background - Selected: White (#fff) text on orange (#ff8000) background
Changing some colors, and doing a little bit of selector and !important tidying.
Better comment for form selects.
Attachment #775035 - Flags: review?(mbrubeck) → review+
Whiteboard: feature=story u=metro_firefox_user c=context_menus p=2 → [leave open] feature=story u=metro_firefox_user c=context_menus p=2
I put a leave open on here, thinking that there might be other work to do, but it looks like we have pretty good coverage of other issues (selection, etc.) in other bugs. Resolving this as fixed.
Status: ASSIGNED → RESOLVED
Closed: 7 years ago
Resolution: --- → FIXED
Whiteboard: [leave open] feature=story u=metro_firefox_user c=context_menus p=2 → feature=story u=metro_firefox_user c=context_menus p=2
User Agent: Mozilla/5.0 (Windows NT 6.2; Win64; x64; rv:26.0) Gecko/20100101 Firefox/26.0 Build ID: 20130807030216 Built from http://hg.mozilla.org/mozilla-central/rev/1fb5d14e8348 Tested on windows 8 using latest nightly for iteration-11. I can see context menu as attached here. Is this desired behavior?
Looks right to me.
You need to log in before you can comment on or make changes to this bug.