Closed Bug 462977 Opened 11 years ago Closed 11 years ago

Improve the site button and search button appearance on Windows

Categories

(Firefox :: Theme, defect)

3.5 Branch
x86
Windows Vista
defect
Not set

Tracking

()

VERIFIED FIXED
Firefox 3.6a1

People

(Reporter: faaborg, Assigned: dao)

References

Details

(Keywords: polish, verified1.9.1, Whiteboard: [polish-easy] [polish-visual][polish-p1])

Attachments

(2 files, 15 obsolete files)

29.23 KB, application/x-zip-compressed
Details
11.61 KB, patch
rflint
: review+
faaborg
: ui-review+
beltzner
: approval1.9.1+
Details | Diff | Splinter Review
Currently the curve of the site button is being drawn in CSS.  For 3.1 we should use -moz-border-image so that the curve can be created using images, giving the button a slightly more polished and three dimensional appearance that is not possible when solely using css.

Sean Martell is currently working on creating new artwork for the Vista and XP themes, but in the meantime I'll attach some files with the Firefox 3 artwork so that we can begin working on the implementation.
Whiteboard: [icon-3.1]
Attached image Site buttons (Aero) (obsolete) —
Attached image Site buttons (Luna) (obsolete) —
Attached image NEW Site Buttons (Aero) (obsolete) —
The revised Aero site buttons have been attached. The Luna set will follow after further style changes.
Also note bug 462982, which changes the design of the text field these buttons are placed next to.
Attached image Site Buttons Guide (obsolete) —
For the site buttons to stretch properly, I have attached the spots that cannot be sampled from due to shadows and/or curves.

Anything within the area not covered by the red mask can be sampled and set 1px wide and stretched.

If the buttons are not visually structured for this to be possible, please advise as to how they should be set up within the PNG or if the button elements need to be sliced into seperate files.
The problem with -moz-border-image is that you need to use separate images for each state(unless somebody knows a way around it).  I've got this implemented and it looks great.  Do we want to do this for the search button and url dropdown button too?

Would it be better to use -moz-transform to flip it for RTL languages instead of having separate images?
>Would it be better to use -moz-transform to flip it for RTL languages instead
>of having separate images?

We've never done this before, as far as I know.  However if it works and there isn't any performance impact, it would be fantastic not to have to ship any RTL image files.
(In reply to comment #6)
> Would it be better to use -moz-transform to flip it for RTL languages instead
> of having separate images?

Wouldn't that render the image upside down for RTL?
i.e. -moz-transform: rotate(180deg).
(In reply to comment #8)
> (In reply to comment #6)
> > Would it be better to use -moz-transform to flip it for RTL languages instead
> > of having separate images?
> 
> Wouldn't that render the image upside down for RTL?
> i.e. -moz-transform: rotate(180deg).

No, we would use -moz-transform: scaleX(-1).  It works, but requires using the same transform on the content of the button to flip it back to normal.
Attached image EV hover state too bright? (obsolete) —
The hover state for the new aero EV button seems too bright, washes out the text.
Attached image NEW - Revised Vista Site buttons (obsolete) —
Attached image NEW - Revised XP Site buttons (obsolete) —
Sorry, tinted them blue to integrate better within Vista.
With these new button images, the shadow will be wrong if we use -moz-transform, so let's ditch that idea.

I was able to use these images on the url dropdown and search buttons, but the search button doesn't show the active state.  My guess is that the mousedown event is being cancelled.
Setting target milestone to future, hopefully we will be able to get this for 3.2
Whiteboard: [icon-3.1]
Target Milestone: --- → Future
To clarify, there are two issues on that bug, switching to using moz-border-image, and creating new images.  the new image part isn't going to make 3.1, but using the existing images with moz-border-image would be something we would want to take for 3.1.
uiwanted: post images
Keywords: polish, uiwanted
Whiteboard: [polish-easy] [polish-visual]
Blocks: 431983
Attached image Site buttons (Luna) (obsolete) —
Attachment #346187 - Attachment is obsolete: true
Attachment #346194 - Attachment is obsolete: true
Attachment #346819 - Attachment is obsolete: true
Attached image Site buttons (Aero) (obsolete) —
Attachment #346186 - Attachment is obsolete: true
Attachment #346192 - Attachment is obsolete: true
Attachment #346608 - Attachment is obsolete: true
Attachment #346818 - Attachment is obsolete: true
Attachment #346828 - Attachment is obsolete: true
Attachment #346846 - Attachment is obsolete: true
Summary: Windows theme: use -moz-border-image on the site button → Windows theme: use -moz-border-image on the site button and search buttons
Attached image Search buttons (Luna) (obsolete) —
Whiteboard: [polish-easy] [polish-visual] → [polish-easy] [polish-visual][polish-high-visibility]
Attached image Search buttons (Aero) (obsolete) —
Attached file Individual image files
Attachment #363960 - Attachment is obsolete: true
Attachment #363961 - Attachment is obsolete: true
Attachment #363963 - Attachment is obsolete: true
Attachment #363964 - Attachment is obsolete: true
border-radius was improved in bug 450652, which can also be utilized here.
Assignee: nobody → dao
Summary: Windows theme: use -moz-border-image on the site button and search buttons → [Windows] use border-image or new border-radius facilities to improve the site button and search button appearance
Attached patch wip (obsolete) — Splinter Review
Attachment #364267 - Flags: ui-review?(faaborg)
Attached patch v2 (obsolete) — Splinter Review
using the "open" attribute for the site button from bug 480953
Attachment #365002 - Flags: ui-review?(faaborg)
Attachment #364267 - Attachment is obsolete: true
Attachment #364267 - Flags: ui-review?(faaborg)
Attached patch patch v3Splinter Review
more polish and cleanup

https://build.mozilla.org/tryserver-builds/2009-03-13_09:46-dgottwald@mozilla.com-try-eb5d0d24b71/
Attachment #365002 - Attachment is obsolete: true
Attachment #367261 - Flags: ui-review?(faaborg)
Attachment #365002 - Flags: ui-review?(faaborg)
Alex: ping?
(In reply to comment #29)
> Alex: ping?

Let us add him to the cc list...
sorry about the lag, images coming soon.
Attachment #367261 - Flags: ui-review?(faaborg) → ui-review+
Attachment #367261 - Flags: review?(gavin.sharp)
Keywords: uiwanted
Attachment #367261 - Flags: review?(gavin.sharp) → review?(rflint)
Comment on attachment 367261 [details] [diff] [review]
patch v3

>diff --git a/browser/themes/winstripe/browser/browser.css b/browser/themes/winstripe/browser/browser.css

>+#urlbar > .autocomplete-history-dropmarker:hover:active ,
nit: whitespace preceding the comma

>+#identity-box {
>+  -moz-box-shadow: 1px 1px 0 rgba(255,255,255,.3) inset,
>+                   0 -1px 0 rgba(255,255,255,.2) inset;
Seems like this might be a pretty expensive way to achieve this effect. Can this be accomplished with -moz-border-*-colors and -moz-background-origin: border?

Looks good!
Attachment #367261 - Flags: review?(rflint) → review+
(In reply to comment #32)
> >+#identity-box {
> >+  -moz-box-shadow: 1px 1px 0 rgba(255,255,255,.3) inset,
> >+                   0 -1px 0 rgba(255,255,255,.2) inset;
> Seems like this might be a pretty expensive way to achieve this effect. Can
> this be accomplished with -moz-border-*-colors and -moz-background-origin:
> border?

Yes, if the identity box would always be rectangular, but since it will be round in most cases, using box-shadow instead of multiple borders makes a difference. I didn't use box-shadow in v2, but started using it as it looked nicer.
http://hg.mozilla.org/mozilla-central/rev/e70a8da4b6ff
Status: NEW → RESOLVED
Closed: 11 years ago
Resolution: --- → FIXED
Summary: [Windows] use border-image or new border-radius facilities to improve the site button and search button appearance → Improve the site button and search button appearance on Windows
Target Milestone: Future → Firefox 3.6a1
Attachment #367261 - Flags: approval1.9.1?
Comment on attachment 367261 [details] [diff] [review]
patch v3

a191=beltzner
Attachment #367261 - Flags: approval1.9.1? → approval1.9.1+
Keywords: checkin-needed
With this fix on the branch, the site button's coloring is quite off on the branch: EV is grey and doesn't get any hover effects, DV is blue and turns green on hover. Also there's one or two pixels of padding missing for both EV and DV labels. Known regression?
(In reply to comment #37)
In case it matters: This is using a custom theme under WinXP (which AFAICT should be the same look as with all Classic themes: rectangular buttons).
Confirmed with the default theme on Vista & Win7. EV certs look grey and with the white text it is very difficult to read the domain. DV certs go green on mouse-over.

Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.1b5pre) Gecko/20090514 Shiretoko/3.5b5pre Firefox/3.0.9 (.NET CLR 3.5.30729) ID:20090514043924
Thanks for letting me know. Apparently the navbar-textbox-buttons.png and navbar-textbox-buttons-aero.png changes didn't make it on branch. I'll push the images asap, should be in tomorrows nightly.
(In reply to comment #37)
> With this fix on the branch, the site button's coloring is quite off on the
> branch: EV is grey and doesn't get any hover effects, DV is blue and turns
> green on hover. Also there's one or two pixels of padding missing for both EV
> and DV labels. Known regression?

I'm seeing this on Vista, which is not themed:
bugzilla.mozilla.org: normal blue (SSL), on hover and when info expanded green (EV)
normal page: grey, but blue (SSL) when site info expanded
(In reply to comment #40)
> Thanks for letting me know. Apparently the navbar-textbox-buttons.png and
> navbar-textbox-buttons-aero.png changes didn't make it on branch. I'll push the
> images asap, should be in tomorrows nightly.

This either needs to be backed out or fixed, immediately. Have you pushed the updated files yet?
Looks fine for non-secure and DV/EV sites. Verified fixed on trunk and 1.9.1 on XP and Vista.

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2a1pre) Gecko/20090519 Minefield/3.6a1pre (.NET CLR 3.5.30729)

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1b5pre) Gecko/20090520 Shiretoko/3.5b5pre (.NET CLR 3.5.30729)
Status: RESOLVED → VERIFIED
Version: Trunk → 3.5 Branch
This bug's priority relative to the set of other polish bugs is:
P1 - Polish issue that appears in the main window, or is something that the user may encounter several times a day.
Whiteboard: [polish-easy] [polish-visual][polish-high-visibility] → [polish-easy] [polish-visual][polish-p1]
You need to log in before you can comment on or make changes to this bug.