Tweak New Toolbar Button Style to Match Designs

RESOLVED FIXED in Firefox 3.7a3

Status

()

Firefox
Theme
--
enhancement
RESOLVED FIXED
9 years ago
9 years ago

People

(Reporter: shorlander, Assigned: dao)

Tracking

Trunk
Firefox 3.7a3
All
Windows 7
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(2 attachments, 1 obsolete attachment)

(Reporter)

Description

9 years ago
Created attachment 428476 [details]
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.
(Assignee)

Updated

9 years ago
Assignee: nobody → dao
Blocks: 544999
Status: NEW → ASSIGNED
(Assignee)

Comment 1

9 years ago
Created attachment 429466 [details] [diff] [review]
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.
Attachment #429466 - Flags: review?(rflint)
(Assignee)

Comment 2

9 years ago
Created attachment 429467 [details] [diff] [review]
patch

redundant lines removed
Attachment #429466 - Attachment is obsolete: true
Attachment #429467 - Flags: review?(rflint)
Attachment #429466 - Flags: review?(rflint)
(Assignee)

Comment 3

9 years ago
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+
(Assignee)

Comment 5

9 years ago
http://hg.mozilla.org/mozilla-central/rev/dbb530e1ac89
Status: ASSIGNED → RESOLVED
Last Resolved: 9 years ago
Resolution: --- → FIXED
Target Milestone: Firefox 3.7a2 → Firefox 3.7a3

Comment 6

9 years ago
(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/
(Assignee)

Comment 9

9 years ago
(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.
(Assignee)

Comment 11

9 years ago
The shadow has been made darker. If you think it's not dark enough, please file a new bug.
(Assignee)

Comment 12

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

Comment 13

9 years ago
Dao, did you mean to have duplicate ids on the <circle> elements?
(Assignee)

Comment 14

9 years ago
(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.
(Assignee)

Comment 15

9 years ago
(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.