1018796 - [chameleon] InContent Prefs - Update menulist style

Status: RESOLVED FIXED

(Firefox :: Theme, defect)

Description

[Tim Nguyen :ntim]

To match project chameleon, we should :
- Get rid of the background gradient (we're flattening the UI)
- Update the dropdown arrow glyph
- Update the dropdown list style

Comment 1

[jaramat]

I was going to fill a separate bug, but then I came across this one so I'll report it here.

Menuitems (40px) don't use the same height as menulist (30px). This should be corrected (decrease the height of menuitems to 30px). Screenshot at http://imgur.com/7SqqG7b

Comment 2

[Tim Nguyen :ntim]

Attachment: Patch

Changes :
- menulist arrow (to match new specs)
- Fixes high contrast color for menulist arrow
- Fixes issue in Comment 1
- Uses flat colors (colors from the Project Chameleon palette), instead of gradients (the gradients are leftovers from the older chameleon UI)
- Removes the text-shadows from the older chameleon UI (leftovers as well)

Comment 3

[Jared Wein [:jaws] (please needinfo? me)]

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

Review of attachment 8519469 [details] [diff] [review]:
-----------------------------------------------------------------

This is super close to r+, just make the following change, test it, and put it up for review and I'll take another look. Nice job.

::: toolkit/themes/shared/in-content/dropdown.svg
@@ +12,5 @@
> +      fill: GrayText;
> +    }
> +  </style>
> +  <path fill-rule="evenodd" clip-rule="evenodd" d="M12,6l-4.016,4L4,6H12z" id="dropdown"/>
> +  <path fill-rule="evenodd" clip-rule="evenodd" d="M12,6l-4.016,4L4,6H12z" class="disabled" id="dropdown-disabled"/>

We don't need to duplicate the paths here (see how d="..." is defined twice above, both with the same path).

To share the path, we can do the following:

<style>
use {
  fill: menutext;
}
use[id$="-active"] {
  fill: -moz-menuhovertext;
}
use[id$="-disabled"] {
  fill: graytext;
}
</style>
<defs style="display:none;">
  <path id="dropdown-shape" fill-rule="evenodd" clip-rule="evenodd" d="M12,6l-4.016,4L4,6H12z"/>
</defs>
<use id="dropdown" xlink:href="dropdown-shape"/>
<use id="dropdown-disabled" xlink:href="dropdown-shape"/>

You can see /browser/themes/linux/content-contextmenu.svg for an example of this already in use.

Comment 4

[Jared Wein [:jaws] (please needinfo? me)]

(In reply to Jared Wein [:jaws] (please needinfo? me) from comment #3)

Edit, you shouldn't need the `use[id$="-active"]` rule above.

Comment 5

[Tim Nguyen :ntim]

Attachment: Patch v2

Addressed review comment.

Comment 6

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/integration/fx-team/rev/d53d4abae160

Comment 7

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/d53d4abae160