Add picker to filter search results

[tobinmori]

https://bugzilla.mozilla.org/show_bug.cgi?id=1570048

[peterbe]

I'm wondering if it's better to go around this problem altogether. The whole filtering stuff is just weird and bad. It's confusing how to use it, annoying to have to figure out if you're missing out, causes slow redirects, and takes up space. It's supposed to be like an advanced search but it looks like a aggregate/filter thing like Amazon.com uses (on the left) where you can reduce your matches based on brand, size, type etc. Confusing.

I think it'd be much better to do away with all topic filtering on the site search, always include all dociments, and sort results properly.

If we could only sort results by popularity, we'd be able to get the best of both worlds:

• If someone searches for foreach they get the Array.prototype.forEach instead of some XUL documentation that happens to mention forEach in the title.
• If you really do search for EnableProfileMigrator it should find that one and only XUL page that mentions it.

[peterbe]

Contributor @bussdriver made a similar request here: https://github.com/mdn/kuma/issues/6884 which is worth reading for time-motivation.

[bussdriver]

Who doesn't know how to use Amazon.com filtering? Since we use a left to right language and well sorted results should handle common searches, it makes sense to me to use the already empty space on the right side; on a narrow screen it could hide or drop down.

40-55 chars wide is the best column width for wrapped text (sorry I forgot my source on this.) It's also more difficult to easily read wrapped text that is wide, ideal is around 40 characters wide. So limiting the result text width creates white space on the sides for nearly every device.

[bussdriver]

Peterbe is right about: It's not clearly labeled as a "Results Filter" which would help with confusion. Causing a page load onclick is not nice.

One solution: NewEgg.com uses a button to trigger filter changes; furthermore, if the button is never pressed and a search is performed it then is applied.

Nicer solution: Use proximity and to clarify the filter by context: Drop down below the search box when in focus. Similar to an autocomplete on a search box.

1. Showing on focus along with the proximity would make it extremely clear as to it's purpose.
2. Being shown on focus, the checkboxes would be part of the search form itself and not trigger any page loads until you actually pressed enter (or clicked the search icon which right now is purely a decoration.)

Even better: Add a link at the bottom of the filter on how to "save topic set" and that page would be about Firefox bookmarks with keywords and the %s. Including the selected topics in the URL to that page which can then pull them down into the documentation to illustrate where the %s goes in the bookmark (or one could copy/paste that directly into the bookmark.) People would save a lot of time; like my students and I do already by creating keywords so we can just type "css property" directly into the location bar to search only CSS results on MDN. Sorting alone simply can't beat firefox's keywords feature combined with parameter support in the URL.

[bussdriver]

Ok, here I implemented most of it for you (and it works! paste it into the console:)

(function(){var fset= document.createElement('fieldset'); fset.className= "search-results-filters"; fset.style.display= "none"; var legend= document.createElement('b'); legend.appendChild(document.createTextNode('Search Topics')); fset.appendChild(legend); var localized= ["APIs and DOM","Add-ons & Extensions","CSS","Canvas","Firefox","Firefox OS","Games","HTML","HTTP","JavaScript","Marketplace","MathML","Mobile","Open Web Apps","SVG","Web Development","Web Standards","WebExtensions","WebGL","Writing Documentation","XPCOM","XUL"]; ["api","addons","css","canvas","firefox","firefox-os","games","html","http","js","marketplace","mathml","mobile","apps","svg","webdev","standards","webext","webgl","docs","xpcom","xul"].forEach((x,i)=>{ var item= document.createElement('label'); var check= document.createElement('input'); check.type= "checkbox"; check.name= "topic"; check.value= x; if( (location+'').indexOf('topic='+x) >=0 ){ check.checked= true; } item.appendChild(check); item.appendChild(document.createTextNode(" "+ localized[i])); fset.appendChild(item); }); var f= document.getElementById('nav-main-search'); f.appendChild(fset); f.addEventListener('mouseover',function(){fset.style.display="block"},false); f.addEventListener('mouseout',function(){fset.style.display="none"},false); var q= document.getElementById('main-q'); q.addEventListener('focus',function(){fset.style.display="block"},false); document.styleSheets[0].insertRule('.search-results-filters {position: absolute;top: calc( 4px + 4px + 40px + 4px );border:inherit;border-bottom-left-radius: inherit;border-bottom-right-radius: inherit;background-color: #fff;padding: 8px;z-index:9;}',0); document.styleSheets[0].insertRule('.search-results-filters label {display:block;padding-bottom:10px;}',0); })();