781002 - Story - Apply metro styling to the context menu

Status: RESOLVED FIXED

(Tracking Graveyard :: Metro Operations, defect, P2)

Description

[Jim Mathies [:jimm]]

The context menu will need metro styling. Currently it has the xul fennec style.

Comment 1

[Jonathan Wilde [:jwilde]]

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.

Comment 2

[Stephen Horlander [:shorlander]]

(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?

Comment 3

[Jim Mathies [:jimm]]

(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.

Comment 4

[Jim Mathies [:jimm]]

Attachment: calendar app hover

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.

Comment 5

[Jim Mathies [:jimm]]

Attachment: current firefox theme

Comment 6

[Jim Mathies [:jimm]]

(In reply to Jim Mathies [:jimm] from comment #5)
> Created attachment 651486 [details]
> current firefox theme

(active on the left, hover on the right)

Comment 7

[Jim Mathies [:jimm]]

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.

Comment 8

[Asa Dotzler [:asa]]

Attachment: UC-95 Metro-stye context menus

Comment 9

[Jim Mathies [:jimm]]

This just requires a final sign off on css color codes I think, and any tweaks to layout ux wants.

Comment 10

[Sam Foster [:sfoster] (he/him)]

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.

Comment 11

[Sam Foster [:sfoster] (he/him)]

Attachment: Context menu screenshots with grey/orange selected color side by side

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?

Comment 12

[Jim Mathies [:jimm]]

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.

Comment 13

[Sam Foster [:sfoster] (he/him)]

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.

Comment 14

[Sam Foster [:sfoster] (he/him)]

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).

Comment 15

[Stephen Horlander [:shorlander]]

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

Comment 16

[Jonathan Wilde [:jwilde]]

Attachment: patch v1

Changing some colors, and doing a little bit of selector and !important tidying.

Comment 17

[Jonathan Wilde [:jwilde]]

Attachment: patch v1.1

Better comment for form selects.

Comment 18

[Jonathan Wilde [:jwilde]]

https://hg.mozilla.org/integration/mozilla-inbound/rev/8b2b8ac3507a

Comment 19

[Ed Morley [:emorley]]

https://hg.mozilla.org/mozilla-central/rev/8b2b8ac3507a

Comment 20

[Jonathan Wilde [:jwilde]]

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.

Comment 21

[Samvedana (:Samvedana)]

Attachment: Context menu without option selected.PNG

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?

Comment 22

[Samvedana (:Samvedana)]

Attachment: selected option from context menu.PNG

Comment 23

[Jim Mathies [:jimm]]

Looks right to me.