Loosen a bit the HTML hierarchy required for Tabs to work, Improved UX of the dev tools

ui/webui/resources/js/cr/ui/tabs.js

Index: ui/webui/resources/js/cr/ui/tabs.js
diff --git a/ui/webui/resources/js/cr/ui/tabs.js b/ui/webui/resources/js/cr/ui/tabs.js
index 6afa5663133d325dc80161f6fa9b98cb5314e712..e6374482b77d6bab0bb2ac314b8eb7c495db9d3d 100644
--- a/ui/webui/resources/js/cr/ui/tabs.js
+++ b/ui/webui/resources/js/cr/ui/tabs.js
@@ -10,7 +10,13 @@ cr.define('cr.ui', function() {
    * @return {TabBox} The tab box if found.
    */
   function getTabBox(el) {
-    return el.parentElement && el.parentElement.parentElement;
+    while (el != null) {

[Dan Beam, 2013/05/23 23:06:48]

nit: while (el) {

[dvh, 2013/05/24 04:33:42]

Used findAncestor() instead.

+      if (el.nodeName == 'TABBOX') {

[Dan Beam, 2013/05/23 23:06:48]

nit: no curlies

[dvh, 2013/05/24 04:33:42]

Used findAncestor() instead.

+        break;
+      }
+      el = el.parentElement;
+    }
+    return el;

[Dan Beam, 2013/05/23 23:06:48]

use
https://code.google.com/p/chromium/codesearch#chromium/src/ui/webui/resources...
instead

[dvh, 2013/05/24 04:33:42]

Done.

   }
 
   /**
@@ -39,12 +45,46 @@ cr.define('cr.ui', function() {
       TABPANEL: TabPanel
     };
 
-    var child;
-    for (var i = 0; child = this.children[i]; i++) {
-      var constr = map[child.tagName];
-      if (constr)
+    var mainThis = this;
+    var tagNames = Object.keys(map);
+    tagNames.forEach(function(tagName) {
+      var children = getElementsByTagNameFromRoot.call(mainThis, tagName);
+      var constr = map[tagName];
+      for (var i = 0; child = children[i]; i++) {
         cr.ui.decorate(child, constr);
+      }
+    });

[Dan Beam, 2013/05/23 23:06:48]

}.bind(this);  (and get rid of mainThis)

[dvh, 2013/05/24 04:33:42]

Done.

+  }
+
+  /**
+   * Returns all elements that match a given tagName in the set of the
+   * elements and its descendents.
+   * @tagName {string}
+   * @this {HTMLElement}
+   * @return {array} An array of HTMLElement.
+   */
+  function getElementsByTagNameFromRoot(tagName) {
+    if (this.tagName == tagName) {

[Dan Beam, 2013/05/23 23:06:48]

nit: no curlies

[dvh, 2013/05/24 04:33:42]

Done.

+      return [this];
     }
+    var elements = this.getElementsByTagName(tagName);
+    return Array.prototype.slice.call(elements);
+  }
+
+  /**
+   * Returns the first element that matches a given tagName in the set of the
+   * elements and its descendents.
+   * @tagName {string}
+   * @this {HTMLElement}
+   * @return {HTMLElement} The element that matches the tagName.
+   */
+  function getFirstElementByTagNameFromRoot(tagName) {

[Dan Beam, 2013/05/23 23:06:48]

don't use |this| as the root, change to this pass in an argument as the root and
use findAncestor() in ui/webui/resources/js/util.js

+    var result = null;
+    var elements = getElementsByTagNameFromRoot.call(this, tagName);
+    if (elements.length > 0) {

[Dan Beam, 2013/05/23 23:06:48]

nit: no curlies

[dvh, 2013/05/24 04:33:42]

Done.

+      result = elements[0];

[Dan Beam, 2013/05/23 23:06:48]

return elements[0];

[dvh, 2013/05/24 04:33:42]

Done.

+    }
+    return result;

[Dan Beam, 2013/05/23 23:06:48]

return null;

[dvh, 2013/05/24 04:33:42]

Done.

   }
 
   /**
@@ -53,10 +93,18 @@ cr.define('cr.ui', function() {
    * @this {TabBox}
    */
   function selectedIndexSetHook(selectedIndex) {
-    var child, tabChild;
-    for (var i = 0; child = this.children[i]; i++) {
-      for (var j = 0; tabChild = child.children[j]; j++) {
-        tabChild.selected = j == selectedIndex;
+    var child, tabChild, element;
+    element = getFirstElementByTagNameFromRoot.call(this, 'TABS');
+    if (element != null) {

[Dan Beam, 2013/05/23 23:06:48]

if (element) {

[dvh, 2013/05/24 04:33:42]

Done.

+      for (var i = 0; child = element.children[i]; i++) {
+        child.selected = i == selectedIndex;

[Dan Beam, 2013/05/23 23:06:48]

is this a dom attribute?  if so, you can probably use
querySelector('tabs[selected]') or something

[dvh, 2013/05/24 04:33:42]

Actually, it needs to add the selected attribute on a given child and remove the
selected attribute on other children too.
I'm not sure querySelector would fit that usage.

[Dan Beam, 2013/05/24 04:40:20]

oh, yeah, you're setting it on them... sorry, yeah, keep this as is

+      }
+    }
+
+    element = getFirstElementByTagNameFromRoot.call(this, 'TABPANELS');
+    if (element != null) {

[Dan Beam, 2013/05/23 23:06:48]

if (element) {

[dvh, 2013/05/24 04:33:42]

Done.

+      for (var i = 0; child = element.children[i]; i++) {
+        child.selected = i == selectedIndex;
       }
     }
   }
@@ -113,7 +161,7 @@ cr.define('cr.ui', function() {
     decorate: function() {
       decorateChildren.call(this);
 
-      // Make the Tabs element fousable.
+      // Make the Tabs element focusable.
       this.tabIndex = 0;
       this.addEventListener('keydown', this.handleKeyDown_.bind(this));
 
@@ -149,8 +197,9 @@ cr.define('cr.ui', function() {
         delta *= -1;
 
       var count = this.children.length;
-      var index = this.parentElement.selectedIndex;
-      this.parentElement.selectedIndex = (index + delta + count) % count;
+      var tabbox = getTabBox(this);
+      var index = tabbox.selectedIndex;
+      tabbox.selectedIndex = (index + delta + count) % count;
 
       // Show focus outline since we used the keyboard.
       this.focusOutlineManager_.visible = true;