842410 - Use Unicode right-pointing triangle instead of an image in menu arrow boxes

Status: RESOLVED INVALID

(Toolkit :: Themes, defect)

Comment 1

[Reuben Morais [:reuben]]

Attachment: Patch

Comment 2

[Reuben Morais [:reuben]]

Attachment: Screenshot comparing old and new appearance

Comment 3

[Justin Dolske [:Dolske]]

What are native menus using?

Comment 4

[Reuben Morais [:reuben]]

Attachment: OS X image

(In reply to Justin Dolske [:Dolske] from comment #3)
> What are native menus using?

If you mean what OS X uses, it's this (and a greyed out version for disabled menus).

Comment 5

[Dão Gottwald [:dao]]

Comment on attachment 715284 [details] [diff] [review]
Patch

>+.menu-right::after {
>   width: 8px;
>-  list-style-image: url("chrome://global/skin/menu/menu-arrow.png");
>-  -moz-image-region: rect(0, 8px, 10px, 0);
>-}
>-
>-.menu-right[_moz-menuactive="true"]:not([disabled="true"]) {
>-  -moz-image-region: rect(0, 16px, 10px, 8px);
>-}
>-
>-.menu-right[disabled="true"] {
>-  -moz-image-region: rect(0, 24px, 10px, 16px);
>+  content: "\25B6"; /* black right-pointing triangle */
>+  font-size: 90%;
> }

Is width:8px still needed?

Comment 6

[Reuben Morais [:reuben]]

Attachment: Patch

(In reply to Dão Gottwald [:dao] from comment #5)
> Is width:8px still needed?

I don't know why I left that in :)

Comment 7

[Justin Dolske [:Dolske]]

(In reply to Reuben Morais [:reuben] from comment #4)

> > What are native menus using?
> 
> If you mean what OS X uses, it's this (and a greyed out version for disabled
> menus).

What I mean is, how do you know that's what the native menus are using?

Comment 8

[Reuben Morais [:reuben]]

(In reply to Justin Dolske [:Dolske] from comment #7)
> (In reply to Reuben Morais [:reuben] from comment #4)
> 
> > > What are native menus using?
> > 
> > If you mean what OS X uses, it's this (and a greyed out version for disabled
> > menus).
> 
> What I mean is, how do you know that's what the native menus are using?

It isn't. What OS X uses is the image I attached to the bug. I think ▶ is close enough that you can't tell the difference without zooming in and comparing. I can also convert the image to a @2x.png and use that if that's better.

Comment 9

[Justin Dolske [:Dolske]]

If "▶" isn't actually what the native menus are using, then let's no go down that route. (Although I'd be willing to reconsider if it ends up being enormously difficult to fix this with a @2x image.)

The concern is that we want to match native style as closely as practical, and so if we're just trading one wrong appearance for another it's not a net win.

Comment 10

[Tony Mechelynck [:tonymec]]

(In reply to Justin Dolske [:Dolske] from comment #9)
> If "▶" isn't actually what the native menus are using, then let's no go down
> that route. (Although I'd be willing to reconsider if it ends up being
> enormously difficult to fix this with a @2x image.)
> 
> The concern is that we want to match native style as closely as practical,
> and so if we're just trading one wrong appearance for another it's not a net
> win.

It's a net win, albeit a small one, in that "▶" is one Unicode codepoint, U+25B6, 3 bytes in UTF-8 or 2 in UTF-16, common to all platforms, and requiring no maintenance, while an image is certainly more than 3 bytes, especially if each platform uses a different format. Of course the win is marginal compared to the total bulk of any of Firefox, Thunderbird or SeaMonkey; some would say it is practically infinitesimal.

Comment 11

[Reuben Morais [:reuben]]

(In reply to Tony Mechelynck [:tonymec] from comment #10)
> It's a net win, albeit a small one, in that "▶" is one Unicode codepoint,
> U+25B6, 3 bytes in UTF-8 or 2 in UTF-16, common to all platforms, and
> requiring no maintenance, while an image is certainly more than 3 bytes,
> especially if each platform uses a different format. Of course the win is
> marginal compared to the total bulk of any of Firefox, Thunderbird or
> SeaMonkey; some would say it is practically infinitesimal.

Additionally: you don't need inverted color versions for different hover states, it's text, so DPI-proof, a single version for high and low DPI screens, and simpler CSS rules.

Anyway, I'll attach the images used by OS X in bug 795665 so someone can write a patch using the @2x approach.