Closed Bug 548027 Opened 10 years ago Closed 10 years ago

Tweak New Toolbar Button Style to Match Designs

Categories

(Firefox :: Theme, enhancement)

All
Windows 7
enhancement
Not set

Tracking

()

RESOLVED FIXED
Firefox 3.7a3

People

(Reporter: shorlander, Assigned: dao)

References

Details

Attachments

(2 files, 1 obsolete file)

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.
Assignee: nobody → dao
Blocks: 544999
Status: NEW → ASSIGNED
Attached patch patch (obsolete) — Splinter Review
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.
Attachment #429466 - Flags: review?(rflint)
Attached patch patchSplinter Review
redundant lines removed
Attachment #429466 - Attachment is obsolete: true
Attachment #429467 - Flags: review?(rflint)
Attachment #429466 - Flags: review?(rflint)
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 on attachment 429467 [details] [diff] [review]
patch

r=rflint with comment 3!
Attachment #429467 - Flags: review?(rflint) → review+
http://hg.mozilla.org/mozilla-central/rev/dbb530e1ac89
Status: ASSIGNED → RESOLVED
Closed: 10 years ago
Resolution: --- → FIXED
Target Milestone: Firefox 3.7a2 → Firefox 3.7a3
(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?
See comment 1. Should probably file a followup on it.
The glass effect on the looks smoother on the mockup than on the trunk.
http://svn.mozilla.org/design/projects/newtheme/
(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.
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.
The shadow has been made darker. If you think it's not dark enough, please file a new bug.
There's bug 547440 for the icons+text mode, although it's a bit vague.
Dao, did you mean to have duplicate ids on the <circle> elements?
(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.
(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
You need to log in before you can comment on or make changes to this bug.