Change - Firefox Autocomplete theme changes based on latest comps

RESOLVED FIXED in Firefox 28

Status

P1
normal
RESOLVED FIXED
6 years ago
5 years ago

People

(Reporter: jimm, Assigned: rsilveira)

Tracking

Trunk
Firefox 28
x86_64
Windows 8.1
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [block28] feature=change c=tbd u=tbd p=2, URL)

Attachments

(7 attachments, 3 obsolete attachments)

(Reporter)

Description

6 years ago
Created attachment 777943 [details]
comp_autocomplete.png

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

Updated

6 years ago
Summary: Firefox Start Top Site tile theme changes based on latest comps → Firefox Autocomplete theme changes based on latest comps
Summary: Firefox Autocomplete theme changes based on latest comps → Change - Firefox Autocomplete theme changes based on latest comps
Whiteboard: feature=change c=tbd u=tbd p=0
Hi Stephan, looking for your input to confirm.
Assignee: nobody → shorlander
Blocks: 838497
Duplicate of this bug: 891133
Blocks: 831910
No longer blocks: 859003
Whiteboard: feature=change c=tbd u=tbd p=0 → feature=change
Priority: -- → P1
Created attachment 783391 [details]
Autocomplete Tiles Design Specs - i01

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

Updated

6 years ago
Depends on: 899980
(Reporter)

Comment 4

6 years ago
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.)
Whiteboard: feature=change → feature=change [preview]
(Reporter)

Updated

5 years ago
Duplicate of this bug: 897198
(Reporter)

Comment 6

5 years ago
Created attachment 785773 [details]
Windows8-i03-(AutoComplete)-04-Recovered.png
Depends on: 904417, 904493
Depends on: 903292
Created attachment 806953 [details] [diff] [review]
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.
Created attachment 806954 [details]
Autocomplete search - WIP

We need better icons.

Need to add the url to the tiles.
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
(Reporter)

Comment 10

5 years ago
(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.
To use a search engine image/icon larger than 16x16 we need to fix bug 900137 first. I'll give that a try.
Depends on: 900137
Created attachment 808890 [details] [diff] [review]
WIP v2

WIP

Using WIP patch from bug 900137
Attachment #806954 - Attachment is obsolete: true
Blocks: 861680
No longer blocks: 831910, 838497
Whiteboard: feature=change [preview] → feature=change c=tbd u=tbd p=0
No longer depends on: 903292
No longer depends on: 900137
Created attachment 828457 [details] [diff] [review]
Patch v1

Bug 900137 has landed. The WIP patch just needed some un-bitrotting and updated API calls.
Assignee: shorlander → rsilveira
Attachment #806953 - Attachment is obsolete: true
Attachment #808890 - Attachment is obsolete: true
Status: NEW → ASSIGNED
Attachment #828457 - Flags: review?(sfoster)
Created attachment 828458 [details]
SearchTiles.png

Screenshot
Blocks: 931976
No longer blocks: 861680
Depends on: 900137
QA Contact: jbecerra
Whiteboard: feature=change c=tbd u=tbd p=0 → feature=change c=tbd u=tbd p=2
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
Attachment #828457 - Flags: review?(sfoster) → review+
Blocks: 936489
No longer blocks: 931976
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
Flags: needinfo?(netzen)
Whiteboard: feature=change c=tbd u=tbd p=2 → [block28] feature=change c=tbd u=tbd p=2
I think it'll just work but please make sure to test it once it lands.
Flags: needinfo?(netzen)
https://hg.mozilla.org/mozilla-central/rev/b0773de63083
Status: ASSIGNED → RESOLVED
Last Resolved: 5 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 28

Comment 19

5 years ago
verified on x86_64, Win8 Metro. Found Fixed.
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).
Flags: needinfo?(mmucci)
Hi Rodrigo, please see Francesco's question in Comment #20.
Flags: needinfo?(mmucci)
Flags: needinfo?(rsilveira)
(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?
Flags: needinfo?(rsilveira)
(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.
(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).
(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.
(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.
(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.
(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?
(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.
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.
Created attachment 8341062 [details]
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!
Flags: needinfo?(rsilveira)
(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!
Flags: needinfo?(rsilveira)
OS: Windows 8 Metro → Windows 8.1
You need to log in before you can comment on or make changes to this bug.