Adds custom tabview for charm browser

Adds custom tabview for charm browser

Adds a tabview that can render tabs both horizontally along the top and
vertically down the left hand side.

This also manually forces tabview into the reqs for merge-files, as
merge-files wasn't properly grabbing it from the require in the widget code.

https://code.launchpad.net/~jcsackett/juju-gui/tab-widget/+merge/154432

(do not edit description out of merge proposal)

[j.c.sackett, 2013-03-20 16:39:39]

Please take a look.

[jeff.pihach, 2013-03-20 16:46:57]

LGTM land with trivial Thanks for the code!

https://codereview.appspot.com/7663050/diff/1/app/widgets/tabview.js
File app/widgets/tabview.js (right):

https://codereview.appspot.com/7663050/diff/1/app/widgets/tabview.js#newcode76
app/widgets/tabview.js:76: value: null
by default an attribute with no value defined is `undefined` is there a reason
why you set it to null explicitly?

https://codereview.appspot.com/7663050/diff/1/app/widgets/tabview.js#newcode127
app/widgets/tabview.js:127: 'tab',
'tab' isn't a valid module name it will throw a console warning if they aren't
surpressed

https://codereview.appspot.com/7663050/diff/1/lib/views/browser/tabview.less
File lib/views/browser/tabview.less (right):

https://codereview.appspot.com/7663050/diff/1/lib/views/browser/tabview.less#...
lib/views/browser/tabview.less:3: ul{
space between the ul and {

[matthew.scott, 2013-03-20 16:54:25]

LGTM - thanks for the branch.

https://codereview.appspot.com/7663050/diff/1/app/widgets/tabview.js
File app/widgets/tabview.js (right):

https://codereview.appspot.com/7663050/diff/1/app/widgets/tabview.js#newcode39
app/widgets/tabview.js:39: * @method binUI
Typo: binUI -> bindUI

[rharding, 2013-03-20 16:56:31]

lgtm but I think we can ditch the callback part. Outside code should use the
existing events to bind and handle clicking a tab. 

In the view, on render, it'll run through the handlebars template filling out
the dom with the content for each tab it has conent for.

Then it'll create an instance of the TabView and init it. After that, it'll bind
to the selectionChange, listening for which tab is clicked, and if the hooks tab
is clicked, it'll bind a callback to each filename listed so that it can make
the ajax request for the file content when it's clicked.

https://codereview.appspot.com/7663050/diff/1/app/modules-debug.js
File app/modules-debug.js (right):

https://codereview.appspot.com/7663050/diff/1/app/modules-debug.js#newcode71
app/modules-debug.js:71: fullpath: '/juju-ui/widgets/tabview.js'
I'd prefer we didn't use names already in the YUI namespace.

https://codereview.appspot.com/7663050/diff/1/app/widgets/tabview.js
File app/widgets/tabview.js (right):

https://codereview.appspot.com/7663050/diff/1/app/widgets/tabview.js#newcode52
app/widgets/tabview.js:52: destructor: function() {
should call the parent destructor as well? Not sure if these are auto stacked
via extension.

https://codereview.appspot.com/7663050/diff/1/app/widgets/tabview.js#newcode64
app/widgets/tabview.js:64: * @type {array}
cap Array since it's the type.

https://codereview.appspot.com/7663050/diff/1/test/test_tabview.js
File test/test_tabview.js (right):

https://codereview.appspot.com/7663050/diff/1/test/test_tabview.js#newcode76
test/test_tabview.js:76: callback_called = true;
This method of binding a callback is a bit backwards and might cause issues. For
instance, only one callback is made available. I'd imagine that we could bind to
the selectionChange event on the TabView widget directly vs passing in a
callback. In this way, anyone that cares can bind events.

[j.c.sackett, 2013-03-20 17:46:50]

Please take a look.

https://codereview.appspot.com/7663050/diff/1/app/modules-debug.js
File app/modules-debug.js (right):

https://codereview.appspot.com/7663050/diff/1/app/modules-debug.js#newcode71
app/modules-debug.js:71: fullpath: '/juju-ui/widgets/tabview.js'
On 2013/03/20 16:56:31, rharding wrote:
> I'd prefer we didn't use names already in the YUI namespace. 

Even filenames? I don't think anything in YUI actually operates on filename, and
if we prefix this with, say, browser, it begs the question why things like
charm-search, charm-slider &c aren't prefixed.

[j.c.sackett, 2013-03-20 17:47:45]

The Tab has been removed per discussion with Rick, as its logic should actually
be handled elsewhere.

[rharding, 2013-03-20 17:49:43]

lgtm with one test that might not be needed. 

Thanks

https://codereview.appspot.com/7663050/diff/8001/test/test_tabview.js
File test/test_tabview.js (right):

https://codereview.appspot.com/7663050/diff/8001/test/test_tabview.js#newcode43
test/test_tabview.js:43: it('accepts tab data', function() {
This test is testing the base tabview code and isn't required.

[j.c.sackett, 2013-03-20 17:52:48]

On 2013/03/20 17:49:43, rharding wrote:
> lgtm with one test that might not be needed. 
> 
> Thanks
> 
> https://codereview.appspot.com/7663050/diff/8001/test/test_tabview.js
> File test/test_tabview.js (right):
> 
>
https://codereview.appspot.com/7663050/diff/8001/test/test_tabview.js#newcode43
> test/test_tabview.js:43: it('accepts tab data', function() {
> This test is testing the base tabview code and isn't required.

Good point.

[j.c.sackett, 2013-03-20 18:00:03]

*** Submitted:

Adds custom tabview for charm browser

Adds a tabview that can render tabs both horizontally along the top and
vertically down the left hand side.

This also manually forces tabview into the reqs for merge-files, as
merge-files wasn't properly grabbing it from the require in the widget code.

R=jeff.pihach, rharding
CC=
https://codereview.appspot.com/7663050