548027 - Tweak New Toolbar Button Style to Match Designs

Status: RESOLVED FIXED

(Firefox :: Theme, enhancement)

Description

[Stephen Horlander [:shorlander]]

Attachment: New Toolbar Button Dimension/Style Tweaks

There are some tweaks I would like to make to get the new toolbar buttons to match the mockups.

-- Size/Spacing: --
* Default button size for stand-alone buttons should be 30px and 40px for buttons with a dropdown arrow. The forward button attached to the back button is 29px. The height is correct already and the big back button is the right size. The spacing between elements should be 7px.


-- Styling: --
 * Darker outline and shadow (especially on the bottom): This might be kind of tricky since the outline/shadow is a gradient from less transparent to more transparent.

 * Darker or more opaque gradient at the start of the bottom transition: Hard to explain but at the start of the gradient after the glossy top half it needs to be a little darker so it has more dimension on lighter backgrounds.

 * Darker/Light shadow between back/forward buttons: The shadow cast on the forward button from the big background button appears too light on lighter backgrounds and too dark on darker backgrounds.

 * Don't darken disabled buttons: The dark tint on disabled buttons makes them seem a little heavy and out of place. If the 40-50% transparent glyph isn't obvious enough maybe just making the button(but not the shadow) more transparent. I think I might need to make the actual glyphs darker because they tend to get lost on black backgrounds.

 * More opaque/brighter gradients: The highlight parts of the button gradient aren't quite bright or opaque enough. This is sort of the same as the darker bottom half maybe the correct description is that is just needs to have more contrast.

 * Slightly softer edge highlight: The edge highlight in the mockups has a hard(er) 1px outer edge but a second softer/feathered 1px inside.

 * Labels under of button: With text turned on the buttons should remain the same but the text should act more as a label instead of becoming part of the button.

 * Hover effect should be more blue/brighter: The hover effect is more blue and the outline also takes on a blueish tint. It is also still contrasty instead of washed out.

Comment 1

[Dão Gottwald [:dao]]

Attachment: patch

The space between the buttons is 6px, since it's a symmetric sum.

I didn't move the labels, I'm not sure it's feasible. Can be filed as a separate bug.

Comment 2

[Dão Gottwald [:dao]]

Attachment: patch

redundant lines removed

Comment 3

[Dão Gottwald [:dao]]

Comment on attachment 429467 [details] [diff] [review]
patch

>+toolbar:not([iconsize="small"])[mode="icons"] #forward-button:hover {

read that as:

toolbar:not([iconsize="small"])[mode="icons"] #forward-button:hover:not([disabled="true"]) {

Comment 4

[Ryan Flint [:rflint] (ping via IRC for reviews)]

Comment on attachment 429467 [details] [diff] [review]
patch

r=rflint with comment 3!

Comment 5

[Dão Gottwald [:dao]]

http://hg.mozilla.org/mozilla-central/rev/dbb530e1ac89

Comment 6

[u88484]

(In reply to comment #0)
> Created an attachment (id=428476) [details]
> New Toolbar Button Dimension/Style Tweaks
>
>  * Labels under of button: With text turned on the buttons should remain the
> same but the text should act more as a label instead of becoming part of the
> button.

I'm using an hourly (cset c7fce09a0e9e) that includes this patch and the text is still part of the buttons.  Was a decision made somewhere where this wasn't going to be changed or was a separate bug spun off for this?

Comment 7

[:Gavin Sharp [email: [e-mail]]]

See comment 1. Should probably file a followup on it.

Comment 8

[Darren Kalck [:D-Kalck]]

The glass effect on the looks smoother on the mockup than on the trunk.
http://svn.mozilla.org/design/projects/newtheme/

Comment 9

[Dão Gottwald [:dao]]

(In reply to comment #8)
> The glass effect on the looks smoother on the mockup than on the trunk.
> http://svn.mozilla.org/design/projects/newtheme/

Please file a new bug if you have a concrete suggestion, preferable with a description and a mockup / screenshot like in comment 0.

Comment 10

[Darren Kalck [:D-Kalck]]

This bug should reopened since a tweak suggested in comment 0 and on the mockup has not been adressed : the shadow on the bottom are darker on stephen's PSDs I mentionned above.

Comment 11

[Dão Gottwald [:dao]]

The shadow has been made darker. If you think it's not dark enough, please file a new bug.

Comment 12

[Dão Gottwald [:dao]]

There's bug 547440 for the icons+text mode, although it's a bit vague.

Comment 13

[Neil Deakin]

Dao, did you mean to have duplicate ids on the <circle> elements?

Comment 14

[Dão Gottwald [:dao]]

(In reply to comment #13)
> Dao, did you mean to have duplicate ids on the <circle> elements?

Uh, no, it doesn't need an id at all.

Comment 15

[Dão Gottwald [:dao]]

(In reply to comment #14)
> (In reply to comment #13)
> > Dao, did you mean to have duplicate ids on the <circle> elements?
> 
> Uh, no, it doesn't need an id at all.

http://hg.mozilla.org/mozilla-central/rev/739b79cb8701