895520 - Change - Firefox Autocomplete theme changes based on latest comps

Status: RESOLVED FIXED

(Firefox for Metro Graveyard :: Theme, defect, P1)

Description

[Jim Mathies [:jimm]]

Attachment: comp_autocomplete.png

From the latest spec shorlander has up, our auto complete window need some tweaks.

Comment 1

[Marco Mucci [:MarcoM]]

Hi Stephan, looking for your input to confirm.

Comment 3

[Stephen Horlander [:shorlander]]

Attachment: Autocomplete Tiles Design Specs - i01

Will follow up with some styling, still tweaking it a bit.

Comment 4

[Jim Mathies [:jimm]]

Do we need the smaller close X in the navbar plus the big close circular X in the main navbar? Currently w/autocomplete open the smaller in-edit nav button displays the forward arrow nav, and pressing that submits the search to the default search engine.

(filed bug 899980 on updating navbar button states for autocomplete.)

Comment 6

[Jim Mathies [:jimm]]

Attachment: Windows8-i03-(AutoComplete)-04-Recovered.png

Comment 7

[Rodrigo Silveira [:rsilveira] [:rodms]]

Attachment: 895520.patch

WIP

Search tiles with large icon.

This is using the color analyzer to guess the bg color of the search tiles, I'll try to see if there's a way we can get it from the search service.

Comment 8

[Rodrigo Silveira [:rsilveira] [:rodms]]

Attachment: Autocomplete search - WIP

We need better icons.

Need to add the url to the tiles.

Comment 9

[Yuan Wang(:Yuan) – Mobile Firefox Design Lead]

Attachment: Search provider icons.zip

Hi Rodrigo, let me know if those icons work for you. Ping me or shorlander if you need anything else

Comment 10

[Jim Mathies [:jimm]]

(In reply to Yuan Wang(:Yuan) – Firefox UX Team from comment #9)
> Created attachment 806962 [details]
> Search provider icons.zip
> 
> Hi Rodrigo, let me know if those icons work for you. Ping me or shorlander
> if you need anything else

We might want to file a general bug on updating these across all products, both Yahoo and Bing recently revamped their branding.

Comment 11

[Rodrigo Silveira [:rsilveira] [:rodms]]

To use a search engine image/icon larger than 16x16 we need to fix bug 900137 first. I'll give that a try.

Comment 12

[Rodrigo Silveira [:rsilveira] [:rodms]]

Attachment: WIP v2

WIP

Using WIP patch from bug 900137

Comment 13

[Rodrigo Silveira [:rsilveira] [:rodms]]

Attachment: Patch v1

Bug 900137 has landed. The WIP patch just needed some un-bitrotting and updated API calls.

Comment 14

[Rodrigo Silveira [:rsilveira] [:rodms]]

Attachment: SearchTiles.png

Screenshot

Comment 15

[Sam Foster [:sfoster] (he/him)]

Comment on attachment 828457 [details] [diff] [review]
Patch v1

Review of attachment 828457 [details] [diff] [review]:
-----------------------------------------------------------------

I built browser/metro and browser/locales, tried -purgecaches but I'm still only seeing the little icon for yahoo and wikipedia. May not be a coincidence that these are the names which changed in metrolist.txt?

Also, I think you're missing a little styling for snapped/split view. See: https://dl.dropboxusercontent.com/u/1719101/share/search-icons-snapped.png. They should be able to use that horizontal space, but I'm seeing all 4 tiles dropped into 1 column. That should be minor though so r=me if we can get these kinks worked out

::: browser/locales/en-US/searchplugins/yahoometrofx.xml
@@ +6,5 @@
> +<ShortName>Yahoo</ShortName>
> +<Description>Yahoo Search</Description>
> +<InputEncoding>UTF-8</InputEncoding>
> +<Image width="16" height="16">data:image/x-icon;base64,AAABAAIAEBAAAAAAAAANAQAAJgAAACAgAAAAAAAA/AMAADMBAACJUE5HDQoaCgAAAA1JSERSAAAAEAAAABAIBgAAAB/z/2EAAADUSURBVDjLY2AYPmBPzZn/65L2/W8SmoeClwXt+g+SQ1ZbxTTrPwzDNaNrRMYghciGoBgA03xv37P/MABiT9Jb9x9ZIbIhMP48p03/GUBOhNkE8gIIgBSCFPz++QeMX11697+MqQtsKLIBYAPRnXtu3i2wJpDBIBqkCKQ5iykPTIMMgLkOqwEgDLIR5hKQRhiGBRrI6fAARPYCDIM0ggCyZhCGeQHkVRibAeZfGAYFILLfYa5AjwmMNIBuG7rT0aMRHAPYElKf0jK4RlwJCaQG7oWhDwAW40nUCGVbdgAAAABJRU5ErkJggolQTkcNChoKAAAADUlIRFIAAAAgAAAAIAgGAAAAc3p69AAAA8NJREFUWMPtVmtsDFEU3j+IR7s7d4SISEMi6pUQ/CIRjyAVhBDxChJtvRptbXdn1iMtjbfW7s7caQmNRxVRVLWVVCtCEQklS6mttI3Eo+GPCvHKce5sdzqdndn10489ycnMnLn33O9+59xzrs0Wl7jE5X+X7Q4pyc3R+QJPRZHQPA+Rc5mKnJwuEt8Yp+1w/1g+xAR/sofQXzj/ucjTUoGXdwicvEKwKzOtJzmUNTih1sMrEE1ForQzYC5eHm3lS3AoE03nE9oWOZijGxHl+1gLW4A5n2Ur6Gv06UqgoywAnOi5a0LLQ44oCKhuImvKvpk9Jgiefs1J9I7ssSk7HWEC9qmbKHO1QYjmUrcTBXKIBE7ih+3Ep6qbger6J8Zm4rdzgDIo7Ntp9w83GVPksh1MCCEk8nJmxCfkJ5VAU9Ub+Nz2BdofvYNgfTs01bTCi+pWeFAcUEFkcV7I5I5pyr4ZSEHHEDLxKAwgiy8YGsmUvCREOyelsOwMU7978HE4tagCrm67A3opT70NxyZdhG1cIRRNvwJV7ga4nF4H5RvroNrTALV7HsLR8aXqJsKLuDl5msawAUCGzdeni3rlSk9qqLqrVMdBKBhbpgEIXAui7QCkoZ6YXQHPLge1f50d3yBwvQUOJZ/FUEk6X7LXFIA++/GjySyOLPE2OQ5BSUqlttBN4T6sTdwL6+z7oFpoUG2VOXchG0OQ4Tiq5okhIZ+YAUC7pM/85+bZHErENPt+qMy6p4E4vaAGGsua1XcWCgbSieNE8xMRNAMg8NLibgZ4+soqm1lSZWNybXUcgUBFiwbi+5cfcGD4GdiMdhcyJVqeBvrMDACrrt0M8LTS+kwruIAE6Rh374RLGoALq2phvT1f3bkQ/TgWGQGg7a2h5NKFuNBLKycsDBswDIW6hCyZdwNWJ+5R2YlaE+zSrAgGCK2OrPs8XWtBIewaeBz2J5+GKqE7D+56G6E45SocHn3OsjqiPaBfgxUm1tSMVTJqKBjFvikX4WPTJ+ho/gzNt9rhNRamV7Vt0Hb/HZSurFFPixmAbCIP03qB3T/ZwynjevQHrIJptrRepr1ArzsHFkPekJNqrMNlOSdK4iHFfzCs0w2bC+obFmvHrPRj0ZoTyQShmWah0Dcny8ZE6A0xQeL1/pbZcnsbfBX+00UELxwuHPwQEf+M0Xha8YJykl1OzPxkEF8iMlCPx72zqzou/ScArFZ7HPIMVk5x4mN00oG0fwgp/Yi2Fnyewf+pmf0Kh0TfjH+qh6NbRI76jLkQl7jE5S+qIPrIdKZBVAAAAABJRU5ErkJggg==</Image>
> +<Image width="74" height="74">data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEoAAABKCAIAAACTslUmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw%2FeHBhY2tldCBiZWdpbj0i77u%2FIiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8%2BIDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDOUM2QjI5NUY0MkExMUUyQjUzMEMyNEUyNjY3NEQyNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDOUM2QjI5NkY0MkExMUUyQjUzMEMyNEUyNjY3NEQyNyI%2BIDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkM5QzZCMjkzRjQyQTExRTJCNTMwQzI0RTI2Njc0RDI3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkM5QzZCMjk0RjQyQTExRTJCNTMwQzI0RTI2Njc0RDI3Ii8%2BIDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY%2BIDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8%2BaVyByAAABG1JREFUeNrsmmtMU2cYgFtKS%2B%2F0gqVQadVUJIgUjCaMLXMbg%2BEtKgiCZMmybFli%2FEHiH7c%2F27JLMpct%2FFiyiyYTIxiic8FFjMapW4MDWWSU4gUUSnX0tPTGSq%2FQdu8oq66nHkhT0868X86P97u8b8%2BT73sv30npR4rbaM9uy6A90w3xEA%2FxEA%2FxEA%2FxEA%2FxEA%2FxEA%2FxEA%2FxEA%2FxEA%2FxEA%2FxEA%2FxEA%2FxSC3zqVpn8Vjql9eoKpWywhyOhMPJZodCYZ%2FT57a6iRGLoXdyXGsIzYfi6j5%2FsKKottBpdDomnQ7jDAgTvZPpggdgFe9sLm%2FWsLjM2CkuU5gvyCuVlzeXum2e%2FqMDg526UDAWksFkSFaL4Yl0HUbnsa3taYGXWyzb1bY9WyFcciVPyn3l8JbiHUXdref%2FMrkoVpqGiLTwvZWbFE3te5fDFm3yktyWjkaxUkSFN5wGeNkrhXVf7SQfyCUbP5df%2F80uCkWTzpz60PLaB1VZgqw579zZA%2Bf87sA%2FLpSZEVwIHlk8Vvl%2BTWG1%2Bkm6YpUIwsnVI1ry1Lw%2FaLkznWI8RVme6jklCEw2s%2BbDKtt9%2B2DnkOG6EUaq3t2iadzAYDFAHv9lYvqeLarFFrJ5OVwIsCCXNWn6vhvwOn0xloEtOBdMMV7R9nWLEp0GjgRPwSbFyeYu%2B4Tjxvc3S%2BrWR%2FBc5lndab3z4QwtvBBdVvBebK1cfJssxtpX1bozetLJJBJ7pWT6Xr5GHjMCB3XnF9uAykW4tG29kUHYxrcvvKGqUEJ62H%2By4cC1t0p2Fz8yUionW57SmVKPJ8gVkAdl63JeOvQCCIOndFP%2FBvern2shs7d07FOU58fGGDmfbIQYNqcejyvmxB3f2FJWsFkRDoUvvn85GAj%2B%2FMk1Y5%2Bx6fhevowXx4go1ojH7nU%2BmEk9HgTM%2BBN02taPa5jsTOuYrb2%2Bc7L%2FQcOxOo6IvUwjpkRPZpLxKMoOyIfgciDYxu21H1VzJZzlGyH0lrTA%2B%2FMPE3XijgiigmyKZVOk4mtqKD12b%2FTSGMUsnR6tlZ%2F4o1BY37tyPyJ7HV7I5uCxpkTjSpLznuE3I6E3QwEZM%2B53%2Bd1Wj%2FnWYtlhvPFQKBfA%2FUiYFxtpR7pvQ1aMyAPHb%2F5%2BYpAv44N6wq%2FEqF5Rm0RCYpjYsGd9BuM%2F%2B9P15tlfv%2BydHrVGuncujA6d1kOxtqpS%2BfgyuBx1t%2FZEQgs9gw4Nti4wG0ij66zlrrXnvUs7PqulM%2BjRwYZvd4fDYUjxFIqA8ePBnzx2T6Sbo5a%2B3tUElQ3cZc8fvpgwZPLve7A5%2FtnAtk9rouGRxWdRqwDDuUM9ltuPimaBnA%2B1jnSNRKISz3vn0%2Btby4TW0F7fMfzDCPkOHrtpnrm%2BowMnGk89zrZQAC2GWShuljRCFc%2Be6p%2BNBXJBYY16daVSqpZGAwl4FJy66btWuDqMXRn3zfjiKio25kFRDh54%2Fev%2BNMXDD4GIh3iIh3iIh3iIh3iIh3iIh3iIh3iIh3iI939pfwswANago8DqAlG2AAAAAElFTkSuQmCC</Image>

I don't think I'm seeing the 74x74 image for some reason? For this and the wikipedia one, it looks like just the 16x16 centered in the tile. See: https://dl.dropboxusercontent.com/u/1719101/share/search-icons.png

Comment 16

[Rodrigo Silveira [:rsilveira] [:rodms]]

Nice catch on snapped view! There were a couple rules in the media query that shouldn't apply to search tiles. Fixed.

Figured out why you see the 16x16 icon for yahoo and wikipedia, removing and reapplying the patch had the same effect here. What happens is that building will place the right files in <OBJ_DIR>\dist\bin\metro\searchplugins but not remove existing ones. The search service reads all files and ignores the *metrofx ones since it's the same id. I had to remove those manually (a clobber build works too as the old files are not copied).

bbondy: Do I need to do anything special for the installer to replace the old search plugins files? I didn't notice anything in bug 917933, just to be sure.

on fx-team: https://hg.mozilla.org/integration/fx-team/rev/b0773de63083

Comment 17

[Brian R. Bondy [:bbondy]]

I think it'll just work but please make sure to test it once it lands.

Comment 18

[Matt Brubeck (:mbrubeck)]

https://hg.mozilla.org/mozilla-central/rev/b0773de63083

Comment 19

[ganesh_sahai1]

verified on x86_64, Win8 Metro. Found Fixed.

Comment 20

[Francesco Lodolo [:flod]]

Analyzing this from a l10n perspective (with hundreds of searchplugins to update): what happens is the XML is missing a 74px icon? Is that generated at run-time? If not, could we do it? Because it would seems possible (get the original icon, determine the background color and generate the background).

Comment 21

[Marco Mucci [:MarcoM]]

Hi Rodrigo, please see Francesco's question in Comment #20.

Comment 22

[Rodrigo Silveira [:rsilveira] [:rodms]]

(In reply to Francesco Lodolo [:flod] from comment #20)
> Analyzing this from a l10n perspective (with hundreds of searchplugins to
> update): what happens is the XML is missing a 74px icon? Is that generated
> at run-time? If not, could we do it? Because it would seems possible (get
> the original icon, determine the background color and generate the
> background).

When we don't have the large 74x74 image we fall back to centering the logo, like in this screenshot:  https://dl.dropboxusercontent.com/u/1719101/share/search-icons.png
I actually tried to also set the background color on the fallback based on our color analyzer. But it doesn't always result in what you want. Wikipedia got a black bg for example IIRC.

The same logo images can be used by most other locales - China might have a different logo?

Comment 23

[Francesco Lodolo [:flod]]

(In reply to Rodrigo Silveira [:rsilveira] from comment #22)
> The same logo images can be used by most other locales - China might have a
> different logo?

Well, unfortunately that's not the level of complexity we currently have on l10n. 

Google and Bing will be fine, since locales rely on en-US and locale detection is server side.
This won't work for Wikipedia, Yahoo, eBay, etc.

To give you the example of one locale (Italian, my own), this is the list of searchplugins I currently have for Firefox Desktop: amazon-it, bing, eBay-it, google, hoepli, wikipedia-it, yahoo-it. 
I need to create a new icon for 5 of them. Multiply that for 80 or so locales and you get the picture.

I think the best solution would be to create the icon at run-time and try to solve edge cases. I could give you a set of all icons currently used to make some tests if you want.

Comment 24

[Rodrigo Silveira [:rsilveira] [:rodms]]

(In reply to Francesco Lodolo [:flod] from comment #23)
> (In reply to Rodrigo Silveira [:rsilveira] from comment #22)
> > The same logo images can be used by most other locales - China might have a
> > different logo?
> 
> Well, unfortunately that's not the level of complexity we currently have on
> l10n. 
> 
> Google and Bing will be fine, since locales rely on en-US and locale
> detection is server side.
> This won't work for Wikipedia, Yahoo, eBay, etc.
> 
> To give you the example of one locale (Italian, my own), this is the list of
> searchplugins I currently have for Firefox Desktop: amazon-it, bing,
> eBay-it, google, hoepli, wikipedia-it, yahoo-it. 
> I need to create a new icon for 5 of them. Multiply that for 80 or so
> locales and you get the picture.

I'm not sure I understand why you can't reuse the icon. The searchplugin xml contains descriptions, URLs, Images(logos) and so on. All text and URLs are localizable already. The image tags have no text, so the same image could be used by different locales. Copying the image tag from [1] to wikipediametro-it should work. 

By the way, we only support 4 search engines in metro (wikipedia, bing, yahoo, google).

Comment 25

[Francesco Lodolo [:flod]]

(In reply to Rodrigo Silveira [:rsilveira] from comment #24)
> I'm not sure I understand why you can't reuse the icon.
Problem is not reusing the icon, is to generate a 74px icon with a different background color for 80 locales.

> By the way, we only support 4 search engines in metro (wikipedia, bing,
> yahoo, google).
For en-US sure, certainly not for all other locales.

Comment 26

[Rodrigo Silveira [:rsilveira] [:rodms]]

(In reply to Francesco Lodolo [:flod] from comment #25)
> (In reply to Rodrigo Silveira [:rsilveira] from comment #24)
> > I'm not sure I understand why you can't reuse the icon.
> Problem is not reusing the icon, is to generate a 74px icon with a different
> background color for 80 locales.
> 

Ah, I see your concern. The 74px icon does not use a background, we display the image directly. The image *is* the background.

> > By the way, we only support 4 search engines in metro (wikipedia, bing,
> > yahoo, google).
> For en-US sure, certainly not for all other locales.

Fair enough.

Comment 27

[Francesco Lodolo [:flod]]

(In reply to Rodrigo Silveira [:rsilveira] from comment #26)
> Ah, I see your concern. The 74px icon does not use a background, we display
> the image directly. The image *is* the background.

Exactly, that's why I asked to generate them at run-time if they're not available in the XML, instead of having to manually change hundreds of files.

Comment 28

[Rodrigo Silveira [:rsilveira] [:rodms]]

(In reply to Francesco Lodolo [:flod] from comment #27)
> (In reply to Rodrigo Silveira [:rsilveira] from comment #26)
> > Ah, I see your concern. The 74px icon does not use a background, we display
> > the image directly. The image *is* the background.
> 
> Exactly, that's why I asked to generate them at run-time if they're not
> available in the XML, instead of having to manually change hundreds of files.

The 74x74 images are not the 16x16 with a different background color. They are a larger version of the logo created by our UX team. We can't create those images at runtime.

The large images are optional, if they're not there search will work just fine. But you shouldn't need to create new images for each locale. If they use the same logo you should be able to copy it from en-us.

I'm wondering What you mean by "generate a 74px icon with a different background color for 80 locales." Do you edit the xml files manually or there's a tool that creates that for you?

Comment 29

[Francesco Lodolo [:flod]]

(In reply to Rodrigo Silveira [:rsilveira] from comment #28)
> I'm wondering What you mean by "generate a 74px icon with a different
> background color for 80 locales." Do you edit the xml files manually or
> there's a tool that creates that for you?

Each localizer is responsible for his own repository, basically localizers should create a patch and ask a review for changes to these files (productization). Reality is that not all localizers are technical enough to do that, so it's even more complicated.

Since we need to fix Metro and other icons, I'm trying in these days to fix all the issues created during past years landing changes directly to repos (bug 939834), the idea of having to do this for all locales all over again is just a nightmare.

Comment 30

[Rodrigo Silveira [:rsilveira] [:rodms]]

Oh, I feel the pain sorry :(

Unfortunately we can't really generate the icons programmatically and the search plugin xml is the best place to add them. Maybe we could do some pre-processing on the xml files and insert the icons at build time. This would make it easier if we ever introduce higher resolution icons for high-dpi systems for example. This would be the long term solution, I don't think we can get this in metro release timeframe though.

We don't need to get all icons updated at the same time and we can introduce the new size per search engine if that makes things any easier.

I can help you update the xmls if needed.

It's better to wait for bug 918426 before starting any localization efforts on the icons too.

Comment 31

[Manuela Muntean [Away]]

Attachment: screenshots.zip

Please see the attached screenshots for how the autocomplete window looks like.

Tested for iteration #19, with latest Nightly from 2013-12-01 on Win 8 64-bit.

Is this the desired behavior? Thanks!

Comment 32

[Rodrigo Silveira [:rsilveira] [:rodms]]

(In reply to Manuela Muntean [:Manuela] [QA] from comment #31)
> Please see the attached screenshots for how the autocomplete window looks
> like.
> 
> Tested for iteration #19, with latest Nightly from 2013-12-01 on Win 8
> 64-bit.
> 
> Is this the desired behavior? Thanks!

Yes, this looks right. Thanks!