Default 'Search' input on Toolbar is off by about 6pixels on Safari

[Ipstenu]

If you enter text, it's fine, but if you look at the blank entry, it's clearly off.

vs

[nacin]

Not sure about Safari, but I also saw this with the P2 theme in general.

[koopersmith]

Confirmed using Twenty Eleven. Looking into it now.

[SergeyBiryukov]

I've looked into this the other day, and it seems that padding-top is one of the supported properties for placeholder in Safari 5: ​http://blog.ajcw.com/2011/02/styling-the-html5-placeholder/

However 19370.patch​ only works for me in Safari 5.0.3 (Windows), but not in 5.1.1.

The search icon also looks a bit off in both Safari and Chrome (see 19370.search-icon.png​).

[koopersmith]

I also wrote a fix. Cross-browser support for styling the placeholder is spotty, so I attempted to adjust the input's height and padding to force the placeholder to render properly (without styling the placeholder itself).

Let's go with whichever patch supports more browsers.

On OS X, I've tested Chrome 15, Safari 5.1.1, and Firefox 6.

Firefox sadly cuts off descenders by a pixel or two, so the patch might need some tweaking.

[SergeyBiryukov]

19370.input.diff​ looks good in Firefox 8 (19370.input-firefox.png​), Safari 5.0/5.1 and IE 8, but off in Opera 11 (19370.input-opera.png​; the darker color also looks a bit odd) and Chrome 15 (19370.input-chrome.png​).

While we're at it, thinking we could display the search icon 1px lower (19370.search-icon-2.png​).

[koopersmith]

Thanks for the screenshots, Sergey, they helped immensely.

I really dislike the fact that the placeholder's baseline cannot remain consistent cross-browser.

With #19404 in mind, I've attached a patch that makes the search trigger an icon only. This solves a few problems:

1. We don't have to worry about the placeholder.
2. We don't have to fix the width of the menu item (which looks awkward and is currently in place because we can't predict the length of the translated placeholder string.

Another alternative would be to have the search box pop down when the item is pressed (like shortlink does now). This would prevent the expanded search item from pushing toolbar items to the next line of a crowded bar. If we go in this direction, we could optionally include text in the item as well (and avoid baseline issues).

[SergeyBiryukov]

19370.icon-only.diff​ looks more consistent, but has a side effect.

If I type "test" and then click elsewhere, the input collapses, but the search text slightly peeps out and looks like an artefact in Firefox 8, Chrome 15, Opera 11, Safari 5.1 (19370.icon-only-firefox.png​)

In IE 8, it looks like a stray first letter of the search text (19370.icon-only-ie.png​).

[koopersmith]

Replying to SergeyBiryukov:

19370.icon-only.diff​ looks more consistent, but has a side effect.

If I type "test" and then click elsewhere, the input collapses, but the search text slightly peeps out...

Ah, you're right. Other browsers could probably be fixed with slightly adjusted padding, but IE looks especially ugly in this circumstance.

[koopersmith]

In [19518]:

In toolbar, move search item to the right of the account menu and make it icon-only. fixes #19370, #19406.