Extensions Docs Server: Filter APIs UI

Extensions Docs Server: Filter APIs UI

There is now a small search box under at the top of the left sidebar.
If you start typing an API name, it will display a list of links to
API pages.

BUG=131095
Committed: https://src.chromium.org/viewvc/chrome?view=rev&revision=149011

[cduvall, 2012-07-27 23:11:24]

Filter APIs UI. It's a pretty cool feature.

[not at google - send to devlin, 2012-07-30 10:14:25]

This is seriously awesome. Everybody in the extensions office was very excited,
and excited about what else we could do with it: e.g. apps APIs, samples, etc.
Basically possibly replacing the crappy search thing in the top right corner of
ours.

One thing that would be really nice to support is arrow key navigation. Check
out http://developer.android.com/guide/components/index.html (top right corner).
Type like "intent" and you can then arrow down into the results.

https://chromiumcodereview.appspot.com/10821073/diff/2001/chrome/common/exten...
File chrome/common/extensions/docs/server2/static/css/site.css (right):

https://chromiumcodereview.appspot.com/10821073/diff/2001/chrome/common/exten...
chrome/common/extensions/docs/server2/static/css/site.css:369: line-height: 30%;
pixel height is preferred; 6px looks ok.

I'd also like to see it be a differentiating colour, like the blue that's used
for code, but this has specificity issues. I'll save you the effort of playing
with it, so

#filtered_apis * {
  color: #50A9D5;
}

works. Note the *, specificity hack.

CSS is so dumb sometimes.

https://chromiumcodereview.appspot.com/10821073/diff/2001/chrome/common/exten...
chrome/common/extensions/docs/server2/static/css/site.css:375: border-bottom:
1px solid #E5E5E5;
border looks kinda ugly, if you make them different colours though, i reckon
it'll distinguish itself enough.

https://chromiumcodereview.appspot.com/10821073/diff/2001/chrome/common/exten...
File chrome/common/extensions/docs/server2/static/js/filter.js (right):

https://chromiumcodereview.appspot.com/10821073/diff/2001/chrome/common/exten...
chrome/common/extensions/docs/server2/static/js/filter.js:4: 
quick comment plz

https://chromiumcodereview.appspot.com/10821073/diff/2001/chrome/common/exten...
chrome/common/extensions/docs/server2/static/js/filter.js:12:
filtered_apis.innerHTML = '';
this is kind of wasteful? only need to clear it if it changes, right?

https://chromiumcodereview.appspot.com/10821073/diff/2001/chrome/common/exten...
chrome/common/extensions/docs/server2/static/js/filter.js:14: return;
looks like clearing the search results doesn't leave around the old data, but I
don't know why that would be.

https://chromiumcodereview.appspot.com/10821073/diff/2001/chrome/common/exten...
chrome/common/extensions/docs/server2/static/js/filter.js:17:
filtered_apis.innerHTML += '<li class="filtered_item"><a href="' +
It's possible that changing innerHTML like this re-parses the whole thing and
causes it to re-layout. Save to local variable etc.

https://chromiumcodereview.appspot.com/10821073/diff/2001/chrome/common/exten...
chrome/common/extensions/docs/server2/static/js/filter.js:18: apis[i].name +
'.html">' + apis[i].name + '</a></li>'
you'll also need to hide filtered_apis if it has no content, otherwise there
will be a funky extra gap.

https://chromiumcodereview.appspot.com/10821073/diff/2001/chrome/common/exten...
File chrome/common/extensions/docs/server2/templates/private/footer.html
(right):

https://chromiumcodereview.appspot.com/10821073/diff/2001/chrome/common/exten...
chrome/common/extensions/docs/server2/templates/private/footer.html:61:
api_names: {{*api_list.chrome}},
what about experimental?

https://chromiumcodereview.appspot.com/10821073/diff/2001/chrome/common/exten...
File chrome/common/extensions/docs/server2/templates/private/sidenav.html
(right):

https://chromiumcodereview.appspot.com/10821073/diff/2001/chrome/common/exten...
chrome/common/extensions/docs/server2/templates/private/sidenav.html:75: <input
type="search" id="api_search" placeholder="Filter APIs">
I googled and found a couple of neat tricks: if you add a "results" property
then you get a little magnifying glass in WebKit. Not sure if you can get a
similar thing on Firefox, or if it works on platforms other than mac, but it's
pretty cool.

Also I'd call this "Search APIs" not "Filter APIs".

https://chromiumcodereview.appspot.com/10821073/diff/2001/chrome/common/exten...
chrome/common/extensions/docs/server2/templates/private/sidenav.html:77: </div>
I reckon we should move this and the API references to the top. This one first.
It's the coolest feature we have.

I think we'll eventually make it more prominent, but for now just move it up (so
at least most people don't need to scroll down).

[cduvall, 2012-07-30 20:05:38]

http://codereview.chromium.org/10821073/diff/2001/chrome/common/extensions/do...
File chrome/common/extensions/docs/server2/static/css/site.css (right):

http://codereview.chromium.org/10821073/diff/2001/chrome/common/extensions/do...
chrome/common/extensions/docs/server2/static/css/site.css:369: line-height: 30%;
On 2012/07/30 10:14:25, kalman wrote:
> pixel height is preferred; 6px looks ok.
> 
> I'd also like to see it be a differentiating colour, like the blue that's used
> for code, but this has specificity issues. I'll save you the effort of playing
> with it, so
> 
> #filtered_apis * {
>   color: #50A9D5;
> }
> 
> works. Note the *, specificity hack.
> 
> CSS is so dumb sometimes.

Done.

http://codereview.chromium.org/10821073/diff/2001/chrome/common/extensions/do...
chrome/common/extensions/docs/server2/static/css/site.css:375: border-bottom:
1px solid #E5E5E5;
On 2012/07/30 10:14:25, kalman wrote:
> border looks kinda ugly, if you make them different colours though, i reckon
> it'll distinguish itself enough.

Done.

http://codereview.chromium.org/10821073/diff/2001/chrome/common/extensions/do...
File chrome/common/extensions/docs/server2/static/js/filter.js (right):

http://codereview.chromium.org/10821073/diff/2001/chrome/common/extensions/do...
chrome/common/extensions/docs/server2/static/js/filter.js:4: 
On 2012/07/30 10:14:25, kalman wrote:
> quick comment plz

Done.

http://codereview.chromium.org/10821073/diff/2001/chrome/common/extensions/do...
chrome/common/extensions/docs/server2/static/js/filter.js:12:
filtered_apis.innerHTML = '';
On 2012/07/30 10:14:25, kalman wrote:
> this is kind of wasteful? only need to clear it if it changes, right?

Done.

http://codereview.chromium.org/10821073/diff/2001/chrome/common/extensions/do...
chrome/common/extensions/docs/server2/static/js/filter.js:14: return;
On 2012/07/30 10:14:25, kalman wrote:
> looks like clearing the search results doesn't leave around the old data, but
I
> don't know why that would be.

Are you talking about clearing the search box here? I think clearing the search
box should clear all the APIs because if it doesn't, there's no way to clear the
APIs.

http://codereview.chromium.org/10821073/diff/2001/chrome/common/extensions/do...
chrome/common/extensions/docs/server2/static/js/filter.js:17:
filtered_apis.innerHTML += '<li class="filtered_item"><a href="' +
On 2012/07/30 10:14:25, kalman wrote:
> It's possible that changing innerHTML like this re-parses the whole thing and
> causes it to re-layout. Save to local variable etc.

Done.

http://codereview.chromium.org/10821073/diff/2001/chrome/common/extensions/do...
chrome/common/extensions/docs/server2/static/js/filter.js:18: apis[i].name +
'.html">' + apis[i].name + '</a></li>'
On 2012/07/30 10:14:25, kalman wrote:
> you'll also need to hide filtered_apis if it has no content, otherwise there
> will be a funky extra gap.

Done.

http://codereview.chromium.org/10821073/diff/2001/chrome/common/extensions/do...
File chrome/common/extensions/docs/server2/templates/private/footer.html
(right):

http://codereview.chromium.org/10821073/diff/2001/chrome/common/extensions/do...
chrome/common/extensions/docs/server2/templates/private/footer.html:61:
api_names: {{*api_list.chrome}},
On 2012/07/30 10:14:25, kalman wrote:
> what about experimental?

Done.

http://codereview.chromium.org/10821073/diff/2001/chrome/common/extensions/do...
File chrome/common/extensions/docs/server2/templates/private/sidenav.html
(right):

http://codereview.chromium.org/10821073/diff/2001/chrome/common/extensions/do...
chrome/common/extensions/docs/server2/templates/private/sidenav.html:75: <input
type="search" id="api_search" placeholder="Filter APIs">
On 2012/07/30 10:14:25, kalman wrote:
> I googled and found a couple of neat tricks: if you add a "results" property
> then you get a little magnifying glass in WebKit. Not sure if you can get a
> similar thing on Firefox, or if it works on platforms other than mac, but it's
> pretty cool.
> 
> Also I'd call this "Search APIs" not "Filter APIs".

Done.

http://codereview.chromium.org/10821073/diff/2001/chrome/common/extensions/do...
chrome/common/extensions/docs/server2/templates/private/sidenav.html:77: </div>
On 2012/07/30 10:14:25, kalman wrote:
> I reckon we should move this and the API references to the top. This one
first.
> It's the coolest feature we have.
> 
> I think we'll eventually make it more prominent, but for now just move it up
(so
> at least most people don't need to scroll down).

Wasn't sure if you wanted me to move the whole section, but I did. Easy to
change though.

[not at google - send to devlin, 2012-07-30 20:19:09]

lgtm

http://codereview.chromium.org/10821073/diff/2001/chrome/common/extensions/do...
File chrome/common/extensions/docs/server2/static/js/filter.js (right):

http://codereview.chromium.org/10821073/diff/2001/chrome/common/extensions/do...
chrome/common/extensions/docs/server2/static/js/filter.js:14: return;
On 2012/07/30 20:05:38, cduvall wrote:
> On 2012/07/30 10:14:25, kalman wrote:
> > looks like clearing the search results doesn't leave around the old data,
but
> I
> > don't know why that would be.
> 
> Are you talking about clearing the search box here? I think clearing the
search
> box should clear all the APIs because if it doesn't, there's no way to clear
the
> APIs.

I was being silly, never mind.

http://codereview.chromium.org/10821073/diff/6/chrome/common/extensions/docs/...
File chrome/common/extensions/docs/server2/templates/private/sidenav.html
(right):

http://codereview.chromium.org/10821073/diff/6/chrome/common/extensions/docs/...
chrome/common/extensions/docs/server2/templates/private/sidenav.html:3:
<li><h2>Reference</h2>
ohh I just meant the search box at the top of the Reference section. My mistake.
Reference section itself left where it was.

[cduvall, 2012-07-30 20:30:15]

By the way, you can tab through the links from the search box, but most people
don't use tab too much.

http://codereview.chromium.org/10821073/diff/6/chrome/common/extensions/docs/...
File chrome/common/extensions/docs/server2/templates/private/sidenav.html
(right):

http://codereview.chromium.org/10821073/diff/6/chrome/common/extensions/docs/...
chrome/common/extensions/docs/server2/templates/private/sidenav.html:3:
<li><h2>Reference</h2>
On 2012/07/30 20:19:09, kalman wrote:
> ohh I just meant the search box at the top of the Reference section. My
mistake.
> Reference section itself left where it was.

Done.