513138 - [1.5.1] Search Engine & Results Page

Status: VERIFIED FIXED

(addons.mozilla.org Graveyard :: Developer Pages, defect, P1)

Description

[Justin Scott [:fligtar]]

Attachment: mockup

Searches done from the developer hub nav bar will go to this page and show the results.

The URL for this page should be /developers/search.

See the attached mockup for the style of results. This bug is currently blocked by legal review of the search provider's TOS and Privacy Policy. I will update the bug with the appropriate code and details after that.

Comment 1

[Justin Scott [:fligtar]]

We would like to use Google Custom Search for this, and I've setup a demo of it here: https://people.mozilla.com/~jscott/developer-hub/search.html

You can try a search like "install.rdf" or "amo" or anything add-on-related. It's pretty great. Unfortunately, it's currently blocked on legal's review, but we can start the CSS work on it since the CSS should be the same regardless of what service we use.

The widget we need is in the source of that demo page. We can apply CSS to the results with the classes Google uses.

Comment 2

[Fred Wenzel [:wenzel]]

The demo is hawt.

Comment 3

[Fred Wenzel [:wenzel]]

Are we going to use the AJAX Search API (can be bound to a CSE, apparently [1])? I am not sure if the widget you use is flexible enough to be bound to the search box in our nav bar.

For now, I'll just drop that widget into the search page though and add some styles.

[1] http://code.google.com/intl/en/apis/ajaxsearch/web.html

Comment 4

[Fred Wenzel [:wenzel]]

Attachment: Search engine goodness

Styling the search engine without implementing it didn't make much sense, so here you go.

With some fun little JavaScript magic, it's using our search field as the input to the Google custom search engine. JS is obviously required, though we could probably add a link to the "raw" engine as a noscript tag.

Another thing that's not quite awesome yet is the experience when you submit the search form empty (from a non-search page): The resulting page is basically empty. Would probably look friendlier if we encouraged people to start typing into the search box.

Comment 5

[Fred Wenzel [:wenzel]]

Attachment: Screenshot

Comment 6

[Justin Scott [:fligtar]]

Awesome! Thanks Fred!

btw, we'll need to use the https:// version of the Google JS when checked in.

Comment 7

[Wil Clouser [:clouserw]]

Comment on attachment 398685 [details] [diff] [review]
Search engine goodness

I agree it's confusing with nothing on the page with no search terms.

In addition to https you should use the noscript helper to stay consistent.

cool stuff

Comment 8

[Fred Wenzel [:wenzel]]

(In reply to comment #7)
> In addition to https you should use the noscript helper to stay consistent.

Where do I find that?

Comment 9

[Fred Wenzel [:wenzel]]

(In reply to comment #8)
> (In reply to comment #7)
> > In addition to https you should use the noscript helper to stay consistent.
> 
> Where do I find that?

Ah, it's an element. Thanks for the hint. I'll change that, then commit.

Comment 10

[Fred Wenzel [:wenzel]]

Fligtar: Please check if it still works without an API key, or if we need to add that before this reaches production.

I https-ed the API URL, used the noscript element, and also made sure not to show the search term as HTML, so we're not inviting anyone to an XSS party. Finally, the empty page now contains a message "Please enter some search terms." (Let me know if you want that changed).

Committed to r51006, r51007, r51009, r51010.

Comment 11

[Justin Scott [:fligtar]]

This is great, thanks!

Still waiting on Legal to say it's okay... hopefully we won't have to change anything.

Comment 12

[Justin Scott [:fligtar]]

FYI, our implementation is OK with Legal as long as we add a notice that the results are powered by Google, which I will do this afternoon.

Comment 13

[Milos Dinic [:Milos]]

Verified on https://preview.addons.mozilla.org/en-US/developers/search?q=milos