Closed Bug 603790 Opened 9 years ago Closed 9 years ago

drop the drop shadow on buttons and textfields on windows 7 toolbar so we look like a modern app and not like XP era

Categories

(Firefox :: Theme, enhancement)

x86
Windows 7
enhancement
Not set

Tracking

()

VERIFIED FIXED
Firefox 5

People

(Reporter: asa, Assigned: dao)

References

Details

Attachments

(7 files)

The heavy shadow on our buttons and the light shadow in our text fields make us look like an XP app. We should drop those shadows on Vista and 7 so we fit in better there.
Blocks: 544820
Keywords: uiwanted
Wouldn't the back/forward button look weird in normal icons mode?
(In reply to comment #1)
> Wouldn't the back/forward button look weird in normal icons mode?

No.
A circle in a row of rectangles looks rather ugly/out of place to me. Do you have any more mockups?
(In reply to comment #3)
> A circle in a row of rectangles looks rather ugly/out of place to me. Do you
> have any more mockups?

FWIW, IE9 beta uses two circles for its back and forward buttons and rectangles for the fields and tabs, and it looks fine.

http://blogs.sitepointstatic.com/images/tech/408-ie9-review-screenshot.png

Demonstrate said "weirdness" before protesting.
Please don't morph this bug into a discussion of the shape of the back button. That discussion has already happened in several other places and if it's going to be continued should be continued outside of this bug. 

I realize I made a slight modification to the shape of the widget corners in my mock-up and I think that's actually worth considering here, but the focus of this bug is on the borders of buttons and fields and how they create a raised or inset appearance and not about the keyhole navigation shape including its round button. 

Thanks for helping to keep things sane.
My apologies. So what's the priority of this? Firefox 4.x?
Dropping the shadows with Tabs on Top looks pretty awesome, but it should remain for Tabs on Bottom since the shadows look good on glass.
Opera already does that. It would look exactly like opera with the round corners.

Not for or against, just an observation.
Blocks: 638526
No longer blocks: 638526
Blocks: 638526
No longer blocks: 638526
Blocks: 638526
Is there a CSS hack for this or can someone provide a mockup with large buttons?
I've had a play, can I suggest we keep the button styling even if we drop the box shadow?

Something like this:
@-moz-document url(chrome://browser/content/browser.xul){
	#nav-bar > .toolbarbutton-1:not(#back-button), toolbar #forward-button {
		box-shadow: none !important;
	}

	#urlbar, #nav-bar > .toolbarbutton-1:not(#back-button), toolbar #forward-button {
		-moz-border-radius: 3px 3px 3px 3px !important;
	}
}
This doesn't remove the shadow from text boxes as I believe the browser looks better with those shadows remaining.
(In reply to comment #11)

Can you post a screenshot?
(In reply to comment #12)
> (In reply to comment #11)
> 
> Can you post a screenshot?

Cinnebt 11 us a screenshot
I've posted this "bug" on Neowin and a guy tried at least to do it...

It looks really perfect, but sorry, I don't know how to add a screenshot. 

http://k.min.us/ilPgCW.png

I wish we could get it with Final release... It's really sharp and lovely this "bug"

http://userstyles.org/styles/44843/
Attached image Screenshot
Yeah, that looks good.  I think we'll want to make sure we have consistently curved corners throughout the product.  The tweak to the tabs came too late for us to consider more significant changes, but on the bright side Firefox 5 should only be a few months away.
Just one more screenshot with "Stratiform" Add-on! 

Personally I love that shape even more than my girlfriend! hehe! J/K

http://min.us/ljL6ge
Attached patch patchSplinter Review
This seems like a good incremental improvement. I don't think we should let this bug wait for a larger redesign.
Assignee: nobody → dao
Status: NEW → ASSIGNED
Attachment #522350 - Flags: review?(shorlander)
(In reply to comment #18)
> Created attachment 522350 [details] [diff] [review]
> patch
> 
> This seems like a good incremental improvement. I don't think we should let
> this bug wait for a larger redesign.

Is there a screenshot available of what your patch implements Dao? There were a few proposals for new styling and I'm unsure as to what was opted to follow.
This patch basically just removes the shadows and slightly reduces the border radii.
Comment on attachment 522350 [details] [diff] [review]
patch

This is a nice improvement, looks good!
Attachment #522350 - Flags: review?(shorlander) → review+
http://hg.mozilla.org/mozilla-central/rev/1282968cc051
Severity: normal → enhancement
Status: ASSIGNED → RESOLVED
Closed: 9 years ago
Keywords: uiwanted
Resolution: --- → FIXED
Target Milestone: --- → Firefox4.2
Thanks, Dao!
This still looks like its not entirely flat.  I thought that was the look we were going for?
(In reply to comment #24)
> Created attachment 523015 [details]
> Before and After Screenshot
> 
> This still looks like its not entirely flat.  I thought that was the look we
> were going for?

Looks perfect as is. In fact the only thing I'd suggest is to bring back the shadow (perceived indent) on textfields. The flat look is an Opera thing, we should maintain our own identity and I think this patch does that perfectly.
(In reply to comment #24)
> Created attachment 523015 [details]
> Before and After Screenshot
> 
> This still looks like its not entirely flat.  I thought that was the look we
> were going for?

As already mentioned, this patch only removed the shadow and reduced the radii. For the sake of making progress, it explicitly did not try to incorporate any other (potentially controversial) changes. Please file new bugs on those.
Dao, it looks like we missed the shadow on the circular back button.
(In reply to comment #27)
> Dao, it looks like we missed the shadow on the circular back button.

I didn't get rid of that entirely but reduced it, see attachment 523015 [details].
I'm wrong. You did get the big shadow, but there's still something there that's much heavier on the bottom of the back button compared to the other square buttons and it's especially bad looking when the forward button is "disabled" (which it probably is most of the time)

Can we lighten the bottom half of the back button's border and see if that does it? Also, maybe it's just the anti-aliasing, but there does appear to be a row of "shadow-like" pixels below the bottom row of border pixels there.

New bug?
(In reply to comment #28)
> (In reply to comment #27)
> > Dao, it looks like we missed the shadow on the circular back button.
> 
> I didn't get rid of that entirely but reduced it, see attachment 523015 [details].

It makes that one button look like it's lifted off of the toolbar compared to the others. Looking at it, I feel like I could get my fingernail under the back button and lift it off and I don't get that for the other buttons. 

What's the reason for not removing it completely?
(In reply to comment #29)
> Created attachment 523379 [details]
> I'm wrong. we did remove the big shadow but there's still something there
> 
> I'm wrong. You did get the big shadow, but there's still something there that's
> much heavier on the bottom of the back button compared to the other square
> buttons and it's especially bad looking when the forward button is "disabled"
> (which it probably is most of the time)
> 
> Can we lighten the bottom half of the back button's border and see if that does
> it? Also, maybe it's just the anti-aliasing, but there does appear to be a row
> of "shadow-like" pixels below the bottom row of border pixels there.
> 
> New bug?

I can't say I'm in agreement with 'especially bad'. I think attempting to make the button completely flat in it's joined state to the forward button would (and does with the use of userstyles) look 'especially bad. I feel that Dao has indeed gone with the right approach on this.

I believe I read somewhere that the plan was to remove to the circle and have all installations go with small buttons if not the controversial proposal to remove all button styling. Perhaps this could be handled in that bug along with the rest of the controversial decisions.
(In reply to comment #31) 
> I can't say I'm in agreement with 'especially bad'. I think attempting to make
> the button completely flat in it's joined state to the forward button would
> (and does with the use of userstyles) look 'especially bad. 

How we look for 450M users of the default theme should absolutely trump how we look for the few people who have user-styles. Right now we have one button that doesn't match the others and seems lifted off the toolbar compared to the others. I honestly don't care what it looks like with user-styles, which, if they wanted to, could put any shadow there they liked.
(In reply to comment #32)
> (In reply to comment #31) 
> > I can't say I'm in agreement with 'especially bad'. I think attempting to make
> > the button completely flat in it's joined state to the forward button would
> > (and does with the use of userstyles) look 'especially bad. 
> 
> How we look for 450M users of the default theme should absolutely trump how we
> look for the few people who have user-styles. Right now we have one button that
> doesn't match the others and seems lifted off the toolbar compared to the
> others. I honestly don't care what it looks like with user-styles, which, if
> they wanted to, could put any shadow there they liked.

Paul is saying that he /removed/ the shadow with a user style and that it looked bad to him.

> What's the reason for not removing it completely?

The reason is that it overlaps the forward button. Anyway, please file new bugs for followup suggestions.
Verified fixed on Mozilla/5.0 (Windows NT 6.1; rv:2.2a1pre) Gecko/20110404 Firefox/4.2a1pre
Status: RESOLVED → VERIFIED
Target Milestone: Firefox5 → Firefox 5
Blocks: 689051
You need to log in before you can comment on or make changes to this bug.