Last Comment Bug 640514 - [Mac Default] Style the search bar
: [Mac Default] Style the search bar
Product: SeaMonkey
Classification: Client Software
Component: Themes (show other bugs)
: Trunk
: x86 Mac OS X
-- normal (vote)
: seamonkey2.1b3
Assigned To: Stefan [:stefanh]
Depends on: 401417 640425
  Show dependency treegraph
Reported: 2011-03-10 02:54 PST by Stefan [:stefanh]
Modified: 2011-03-27 10:02 PDT (History)
2 users (show)
See Also:
Crash Signature:
QA Whiteboard:
Iteration: ---
Points: ---

v0.9 (10.48 KB, patch)
2011-03-13 11:09 PDT, Stefan [:stefanh]
no flags Details | Diff | Splinter Review
Screenshots, before-after (11.62 KB, image/png)
2011-03-13 11:46 PDT, Stefan [:stefanh]
no flags Details
V1.0 (10.28 KB, patch)
2011-03-18 15:10 PDT, Stefan [:stefanh]
mnyromyr: review+
Details | Diff | Splinter Review

Description User image Stefan [:stefanh] 2011-03-10 02:54:54 PST
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 User image Robert Kaiser 2011-03-10 11:26:54 PST
The search bar in current patches shouldn't have any dropmarker at all any more, though. ;-)
Comment 2 User image Stefan [:stefanh] 2011-03-11 07:48:06 PST

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 User image Robert Kaiser 2011-03-11 09:23:47 PST
(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 User image Stefan [:stefanh] 2011-03-11 10:19:25 PST
pinstripe uses the defaultFavicon.png in mozapps, that'll do fine here.
Comment 5 User image Stefan [:stefanh] 2011-03-13 11:09:59 PDT
Created attachment 519022 [details] [diff] [review]

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 User image Stefan [:stefanh] 2011-03-13 11:46:10 PDT
Created attachment 519036 [details]
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 User image Stefan [:stefanh] 2011-03-13 12:13:42 PDT
(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 User image Philip Chee 2011-03-13 22:02:23 PDT
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 User image Stefan [:stefanh] 2011-03-14 03:54:11 PDT
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 User image Stefan [:stefanh] 2011-03-14 03:58:31 PDT
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 User image Stefan [:stefanh] 2011-03-14 04:04:24 PDT
(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 User image Philip Chee 2011-03-14 08:19:16 PDT
And Safari?
Comment 13 User image Stefan [:stefanh] 2011-03-14 09:28:34 PDT
Ah, yeah - forgot Safari. The same as FF and Opera. Re navbar/toolbar, SeaMonkey looks more like Camino.
Comment 14 User image Stefan [:stefanh] 2011-03-16 10:07:52 PDT
I should wait with this until bug 640425 is resolved.
Comment 15 User image Stefan [:stefanh] 2011-03-18 15:10:22 PDT
Created attachment 520326 [details] [diff] [review]

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 User image Stefan [:stefanh] 2011-03-27 10:02:45 PDT

Note You need to log in before you can comment on or make changes to this bug.