623722 - <button type="menu"> has wrong style on OS X

Status: RESOLVED INVALID

(Core :: Widget: Cocoa, defect)

Description

[Philipp von Weitershausen [:philikon]]

Limi informs me (see bug 526445 comment 47) that <button type="menu"> has the wrong style on OS X. It looks very much like (but not identical to) a <menulist>: the dropdown arrow is in a separate blue box whereas it really should just be next to the label, much like it is for <toolbarbutton type="menu">.

There also seems to be no way to change this using CSS, either, at least I haven't found one.

Maybe related: bug 288689

Comment 1

[Philipp von Weitershausen [:philikon]]

Attachment: screenshot: current (wrong)

Comment 2

[Philipp von Weitershausen [:philikon]]

Attachment: desired look

Comment 3

[Philipp von Weitershausen [:philikon]]

Attachment: all I could do with CSS

This is all I could do with CSS, by unhiding the dropmarker in the button. Maybe there's a trick one can pull off with -moz-appearance, but nothing like that worked for me.

Comment 4

[Stefan [:stefanh]]

To me it looks like a "Command Pop-Down Menu" with the original styling.

From the Apple HIH;
"A command pop-down menu is similar to a pull-down menu, but it appears within a window rather than in the menu bar. A command pop-down menu presents a list of commands that affect the containing window’s contents."

I could be wrong, but I have never seen anything like attachment #501807 [details] in a native mac app.

Comment 5

[Philipp von Weitershausen [:philikon]]

(In reply to comment #4)
> To me it looks like a "Command Pop-Down Menu" with the original styling.

Possibly, I can't remember seeing something like this in a native Mac app... Anyway, Limi seems to disagree with you, but I'll let him speak for himself. ;)

> From the Apple HIH;
> "A command pop-down menu is similar to a pull-down menu, but it appears within
> a window rather than in the menu bar. A command pop-down menu presents a list
> of commands that affect the containing window’s contents."

Yeah, this doesn't say anything about what the button that invokes the menu should look like, though...

> I could be wrong, but I have never seen anything like attachment #501807 [details] in a
> native mac app.

I've only ever seen it in toolbars, e.g. in the Finder.

Comment 6

[Philipp von Weitershausen [:philikon]]

Stefan posted this link in bug 526445 comment 51:

http://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/AppleHIGuidelines/art/ct_openpopdownmenu.jpg

Looks like the style is correct then... It would still be nice to be able to change it to the one Limi and Faaborg favour via CSS. It doens't seem to be possible right now, or am I just being thick?

Comment 7

[Markus Stange [:mstange]]

Faaborg / Limi: Can you comment on why you prefer a clear endcap over a blue endcap?
I agree with Stefan that the blue endcap is more correct. That's why I implemented it that way in bug 508724. :-)

In fact the only way we can make Mac OS X draw such a button with a clear endcap is to ask it to draw a "tab" (of the style used in the Advanced panel in the preferences) - those don't have endcaps, but the rest of the thing looks identical to a menu button, as far as I can tell.

(In reply to comment #6)
> It would still be nice to be able to
> change it to the one Limi and Faaborg favour via CSS. It doens't seem to be
> possible right now, or am I just being thick?

No, you can't get that appearance with CSS at the moment. At least not with native theming; you'd have to use images. Changing what -moz-appearance does would require changes in nsNativeThemeCocoa.mm.

(In reply to comment #5)
> (In reply to comment #4)
> > I could be wrong, but I have never seen anything like attachment #501807 [details] in a
> > native mac app.
> 
> I've only ever seen it in toolbars, e.g. in the Finder.

Right, in toolbars they look differently. But the in-window equivalent has a blue endcap; that's just the way it is.

Comment 8

[Markus Stange [:mstange]]

(In reply to comment #7)
> Faaborg / Limi: Can you comment on why you prefer a clear endcap over a blue
> endcap?

Oh, I've just seen Limi's comment in bug 526445:

(In reply to comment #47)
> Comment on attachment 501441 [details]
> Mac screenshot of v1.1
> 
> Actually, this isn't a select pulldown, so it shouldn't look like one.

It doesn't - the dropdown arrow makes the difference (down instead of up-down). I agree that it looks unfamiliar because most Mac apps only use this kind of control in toolbars, but I can't help it.

Comment 9

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

(In reply to comment #8)
> > Actually, this isn't a select pulldown, so it shouldn't look like one.
> 
> It doesn't - the dropdown arrow makes the difference (down instead of up-down).
> I agree that it looks unfamiliar because most Mac apps only use this kind of
> control in toolbars, but I can't help it.

Wow, I haven't seen that anywhere before. But it does exist in the color picker, you're right.

What I was arguing was essentially that it should look like the gear menu in the Finder, which seems more appropriate — but then it loses the Aqua look (which Apple seems eager to get rid of finally too — with OS X 10.7, the new app store, and to some extent — iTunes).

I wouldn't make it block anything, and I'm fine with shipping the aqua-style down arrow inline menu in FF4 — but it does look weird and feel weird. :)

Comment 10

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

(In reply to comment #9)
> What I was arguing was essentially that it should look like the gear menu in
> the Finder


To clarify: Yes, that would make it look like a toolbar button.

Comment 11

[Philipp von Weitershausen [:philikon]]

So we've established that <button type="menu"> has quite the correct style on OS X. In fact there are examples of OS X apps using it, the most prominent one being TextEdit (in its "toolbar" even!). It's a pity it's apparently impossible to change this styling through CSS, but I don't think we need to bother. For now at least.