downloads: put [column-type] in HTML template instead of JS.

ui/webui/resources/js/cr/ui/focus_row.js

 // Copyright 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 cr.define('cr.ui', function() {
   /**
    * A class to manage focus between given horizontally arranged elements.
    * For example, given the page:
    *
    *   <input type="checkbox"> <label>Check me!</label> <button>X</button>
@@ skipping 36 matching lines @@
     onKeydown: assertNotReached,
 
     /**
      * @param {cr.ui.FocusRow} row The row that detected the mouse going down.
      * @param {Event} e
      * @return {boolean} Whether the event was handled.
      */
     onMousedown: assertNotReached,
   };
 
+  /** @const {string} */
+  FocusRow.ACTIVE_CLASS = 'focus-row-active';
+
   FocusRow.prototype = {
     __proto__: HTMLDivElement.prototype,
 
     /**
      * Should be called in the constructor to decorate |this|.
      * @param {Node} boundary Focus events are ignored outside of this node.
      * @param {cr.ui.FocusRow.Delegate=} opt_delegate A delegate to handle key
      *     events.
      */
     decorate: function(boundary, opt_delegate) {
@@ skipping 31 matching lines @@
      * Add an element to this FocusRow. No-op if |element| is not provided.
      * @param {Element} element The element that should be added.
      */
     addFocusableElement: function(element) {
       if (!element)
         return;
 
       assert(this.focusableElements.indexOf(element) == -1);
       assert(this.contains(element));
 
+      element.tabIndex = this.isActive() ? 0 : -1;
+
       this.focusableElements.push(element);
       this.eventTracker_.add(element, 'mousedown',
                              this.onMousedown_.bind(this));
     },
 
     /**
      * Called when focus changes to activate/deactivate the row. Focus is
      * removed from the row when |element| is not in the FocusRow.
      * @param {Element} element The element that has focus. null if focus should
      *     be removed.
      * @private
     */
     onFocusChange_: function(element) {
-      var isActive = this.contains(element);
-      var wasActive = this.classList.contains('focus-row-active');
+      this.makeActive(this.contains(element));
+    },
 
-      // Only send events if the active state is different for the row.
-      if (isActive != wasActive)
-        this.makeRowActive(isActive);
+    /** @return {boolean} Whether this row is currently active. */
+    isActive: function() {
+      return this.classList.contains(FocusRow.ACTIVE_CLASS);
     },
 
     /**
      * Enables/disables the tabIndex of the focusable elements in the FocusRow.
      * tabIndex can be set properly.
      * @param {boolean} active True if tab is allowed for this row.
      */
-    makeRowActive: function(active) {
+    makeActive: function(active) {
+      if (active == this.isActive())
+        return;
+
       this.focusableElements.forEach(function(element) {
         element.tabIndex = active ? 0 : -1;
       });
 
-      this.classList.toggle('focus-row-active', active);
+      this.classList.toggle(FocusRow.ACTIVE_CLASS, active);
       this.onActiveStateChanged(active);
     },
 
-    /** Call this to clean up event handling before dereferencing. */
+    /** Dereferences nodes and removes event handlers. */
     destroy: function() {
+      this.focusableElements.length = 0;
       this.eventTracker_.removeAll();
     },
 
     /**
      * @param {Event} e The focusin event.
      * @private
      */
     onFocusin_: function(e) {
       var target = assertInstanceof(e.target, Element);
       if (this.boundary_.contains(target))
@@ skipping 45 matching lines @@
         // Focus this row if the target is one of the elements in this row.
         this.onFocusChange_(assertInstanceof(e.target, Element));
       }
     },
   };
 
   return {
     FocusRow: FocusRow,
   };
 });