Closed Bug 895520 Opened 11 years ago Closed 11 years ago

Change - Firefox Autocomplete theme changes based on latest comps

Categories

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

x86_64
Windows 8.1
defect

Tracking

(Not tracked)

RESOLVED FIXED
Firefox 28

People

(Reporter: jimm, Assigned: rsilveira)

References

()

Details

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

Attachments

(7 files, 3 obsolete files)

Attached image comp_autocomplete.png
From the latest spec shorlander has up, our auto complete window need some tweaks.
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: 831910
No longer blocks: metrov1defect&change
Whiteboard: feature=change c=tbd u=tbd p=0 → feature=change
Priority: -- → P1
Will follow up with some styling, still tweaking it a bit.
Depends on: 899980
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]
Depends on: 904417, 904493
Depends on: 903292
Attached patch 895520.patch (obsolete) — Splinter Review
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.
Attached image Autocomplete search - WIP (obsolete) —
We need better icons. Need to add the url to the tiles.
Hi Rodrigo, let me know if those icons work for you. Ping me or shorlander if you need anything else
(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
Attached patch WIP v2 (obsolete) — Splinter Review
WIP Using WIP patch from bug 900137
Attachment #806954 - Attachment is obsolete: true
Blocks: metrobacklog
No longer blocks: 831910, Backlog-MetroDesign
Whiteboard: feature=change [preview] → feature=change c=tbd u=tbd p=0
No longer depends on: 903292
No longer depends on: 900137
Attached patch Patch v1Splinter Review
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)
Attached image SearchTiles.png
Screenshot
Blocks: metrov1it18
No longer blocks: metrobacklog
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: metrov1it19
No longer blocks: metrov1it18
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)
Status: ASSIGNED → RESOLVED
Closed: 11 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 28
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.
Attached file 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.

Attachment

General

Created:
Updated:
Size: