640514 - [Mac Default] Style the search bar

Status: RESOLVED FIXED

(SeaMonkey :: Themes, defect)

Description

[Stefan [:stefanh]]

The search bar on Mac Default is about 40% higher than the url bar. The dropmarker looks also wrong and the field itself doesn't looks like a search field (should have rounded corners).

Comment 1

[Robert Kaiser]

The search bar in current patches shouldn't have any dropmarker at all any more, though. ;-)

Comment 2

[Stefan [:stefanh]]

KaiRo,

What is this used for:
".searchbar-engine-image {
  height: 16px;
  width: 16px;
  list-style-image: url("chrome://global/skin/icons/folder-item.png");"?

The reason I ask is that this is a winstripe icon that doesn't exist on Mac (it doesn't exist in gnomestripe either, but I assume gnomestripe gets it from winstripe). Is this the search-engine icon that will appear when the search provider lacks its own icon?

Comment 3

[Robert Kaiser]

(In reply to comment #2)
> Is this the search-engine icon that will appear when the search
> provider lacks its own icon?

Exactly. And I'd think that pinstripe must have such a rule in browser/ for .searchbar-engine-image as well, you probably can take the one from there (not that it's visible very often).

Comment 4

[Stefan [:stefanh]]

pinstripe uses the defaultFavicon.png in mozapps, that'll do fine here.

Comment 5

[Stefan [:stefanh]]

Attachment: v0.9

I need to think a bit about the borders here. We want the search bar to match with the urlbar, but the urlbar is native-themed and the searchbar is not native-themed. The border-radius seems sensitive to contrasting border-colors. Compared to a real cocoa searchbar, the transit between the different border-colors isn't 100% perfect.

This patch uses a slightly different color scheme for borders/shadows compared to the urlbar.

Comment 6

[Stefan [:stefanh]]

Attachment: Screenshots, before-after

Here's a "before-after" screenshot. Hmm, I could have sworn that the current search bar was higher than it is in the screenshot. That's more like 10-15% ;-)

Comment 7

[Stefan [:stefanh]]

(In reply to comment #5)
> I need to think a bit about the borders here. We want the search bar to match
> with the urlbar

Note to self: Consider re-styling the urlbar (remove -moz-appearance etc) and pick border colors that fit both fields.

Comment 8

[Philip Chee]

I like the new rounded ends, but it would be better if the urlbar also had the same (well all search textboxes as well)

Comment 9

[Stefan [:stefanh]]

On mac, all search fields have rounded ends - this is done with native theming (the "instant" search ones). This search field is a bit special, though - the difference is the search provider icon and the drop-down. So, we can't use native theming here (it adds a magnifying glass in the left part of the field where the search provider icon).

Regarding the urlbar, I'm not sure I agree that it should look like (have the shape of) a search field. I mean, sure - you can search from the urlbar. But the urlbar also have a lot of other functionality than just being able to search from it. I can see the point of not mixing rectangular shapes with rounded shapes, though - but otoh it can also be a nice contrast (on Mac, the FF urlbar have about the same shape as it has on windows, the same with Opera, but Camino and Omniweb have rectangular shaped urlbars).

Comment 10

[Stefan [:stefanh]]

I realize comment #5 was a bit unclear. Even though the major difference is the shape, I was actually thinking of border-colors. :-)

Comment 11

[Stefan [:stefanh]]

(In reply to comment #9)

> (on Mac, the FF urlbar have about the same shape as it has on windows

And with this I ment "rectangular, but with 'slightly' rounded corners". The Omniweb/Camino urlbar is rectangular, but has sharp corners.

Comment 12

[Philip Chee]

And Safari?

Comment 13

[Stefan [:stefanh]]

Ah, yeah - forgot Safari. The same as FF and Opera. Re navbar/toolbar, SeaMonkey looks more like Camino.

Comment 14

[Stefan [:stefanh]]

I should wait with this until bug 640425 is resolved.

Comment 15

[Stefan [:stefanh]]

Attachment: V1.0

OK, so I think this one should work fine. One possible enhancement would be to re-style the urlbar so the searchbar and urlbar match in terms of borders and box-shadows, but that is follow-up material, I think. I used rgb/rgba colors here, since I find it easier. The searchbar top border and top box-shadow is the same as the urlbar, but I needed slightly darker colors for the left/right/bottom borders - otherwise the transition between top and side/side and bottom borders became too abrupt (the native styling does this much nicer than our border-radius, sigh)

Comment 16

[Stefan [:stefanh]]

http://hg.mozilla.org/comm-central/rev/9289be84876e