Bluetooth UI update.

chrome/browser/resources/options/chromeos/bluetooth_list_element.js

Index: chrome/browser/resources/options/chromeos/bluetooth_list_element.js
diff --git a/chrome/browser/resources/options/chromeos/bluetooth_list_element.js b/chrome/browser/resources/options/chromeos/bluetooth_list_element.js
index 5f311008cb9fa900d25c46ec0affddbc746e445c..ac578790502b6161d1e2aedf1d66aeabc83acc95 100644
--- a/chrome/browser/resources/options/chromeos/bluetooth_list_element.js
+++ b/chrome/browser/resources/options/chromeos/bluetooth_list_element.js
@@ -83,17 +83,19 @@ cr.define('options.system.bluetooth', function() {
      * existing device is updated.
      * @param {Object.<string,string>} device Description of the bluetooth
      *     device.
+     * @return {boolean} True if the devies was successfully added or updated.
      */
     appendDevice: function(device) {
       if (!this.isSupported_(device))
-        return;
+        return false;
       var item = new BluetoothItem(device);
       var existing = this.findDevice(device.address);
       if (existing) {
         this.replaceChild(item, existing);
-        return;
+        return true;
       }

[flackr, 2011/11/11 19:46:47]

Style nit: The return isn't affected by the fact that it is existing so just use
if block to select method for node insertion:
if (existing)
  this.replace..
else
  this.append..
return true;

[kevers, 2011/11/11 20:44:23]

Done.

       this.appendChild(item);
+      return true;
     },
 
     /**
@@ -142,23 +144,17 @@ cr.define('options.system.bluetooth', function() {
    * @constructor
    */
   function BluetoothItem(device) {
-    var el = cr.doc.createElement('div');
+    var el = $('bluetooth-item-template').cloneNode(true);
+    el.__proto__ = BluetoothItem.prototype;
+    el.removeAttribute('id');
+    el.hidden = false;
     el.data = {};
     for (var key in device)
       el.data[key] = device[key];
-    BluetoothItem.decorate(el);
+    el.decorate();
     return el;
   }
 
-  /**
-   * Decorates an element as a bluetooth item.
-   * @param {!HTMLElement} el The element to decorate.
-   */
-  BluetoothItem.decorate = function(el) {
-    el.__proto__ = BluetoothItem.prototype;
-    el.decorate();
-  };
-
   BluetoothItem.prototype = {
     __proto__: HTMLDivElement.prototype,
 
@@ -170,68 +166,59 @@ cr.define('options.system.bluetooth', function() {
       // we are interested in tracking paired devices that are not connected.
       this.paired = this.data.paired && !this.data.connected;
       this.connecting = !!this.data.pairing;
-      this.addIcon_();
       this.addLabels_();
       this.addButtons_();
     },
 
     /**
-     * Adds an icon corresponding to the device category.
+     * Retrieves the descendent element with the matching class name.
+     * @param {string} className The class name for the target element.
+     * @return {Element|undefined}  Returns the matching element if
+     *    found and unique.
      * @private
      */
-    addIcon_: function() {
-      var iconElement = this.ownerDocument.createElement('div');
-      iconElement.className = 'bluetooth-' + this.data.icon;
-      iconElement.classList.add('bluetooth-icon');
-      this.appendChild(iconElement);
+    getNodeByClass_:function(className) {
+      var elements = this.getElementsByClassName(className);
+      if (elements && elements.length == 1)
+        return elements[0];
     },
 
     /**
-     * Adds an element containing the display name, status and device pairing
-     * instructions.
+     * Sets the text content for an element.
+     * @param {string} className The class name of the target element.
+     * @param {string} label Text content for the element.
      * @private
      */
-    addLabels_: function() {
-      var textDiv = this.ownerDocument.createElement('div');
-      textDiv.className = 'bluetooth-item-text';
-      var nameEl = this.ownerDocument.createElement('div');
-      nameEl.className = 'network-name-label';
-      nameEl.textContent = this.data.name;
-      textDiv.appendChild(nameEl);
-      this.appendChild(textDiv);
-      this.setDeviceStatus_(textDiv);
-      if (this.data.pairing) {
-        this.addPairingInstructions_(textDiv);
-      }
+    setLabel_: function(className, label) {
+      var el = this.getNodeByClass_(className);
+      if (el)

[flackr, 2011/11/11 19:46:47]

This should always exist if everything's working, right? For cases where not
getting an element is an error you should use the return unconditionally so that
it will cause errors if something goes wrong rather than hiding them.

[kevers, 2011/11/11 20:44:23]

Correct, 'el' should always exist.

+        el.textContent = label;
     },
 
     /**
-     * Adds a label showing the status of the device.
-     * @param {!Element} textDiv Target element for inserting the status label.
+     * Adds an element containing the display name, status and device pairing
+     * instructions.
      * @private
      */
-    setDeviceStatus_: function(textDiv) {
+    addLabels_: function() {
+      this.setLabel_('network-name-label', this.data.name);
       var status;
       if (this.data.connected)
         status = Constants.DEVICE_STATUS.CONNECTED;
-      else if (this.data.paired)
-        status = Constants.DEVICE_STATUS.PAIRED;
       else if (this.data.pairing)
         status = Constants.DEVICE_STATUS.CONNECTING;
-      else
-        status = Constants.DEVICE_STATUS.NOT_PAIRED;
-      var statusMessage = templateData[status];
-      if (statusMessage) {
-        var statusEl = this.ownerDocument.createElement('div');
-        statusEl.className = 'network-status-label';
-        statusEl.textContent = statusMessage;
+      if (status) {
+        var statusMessage = templateData[status];
+        if (statusMessage)
+          this.setLabel_('network-status-label', statusMessage);
         if (this.connecting) {
-          var throbber = this.ownerDocument.createElement('div');
-          throbber.className = 'throbber';
-          statusEl.appendChild(throbber);
+          var spinner = this.getNodeByClass_('inline-spinner');
+          if (spinner)
+            spinner.hidden = false;
         }
-        textDiv.appendChild(statusEl);
       }
+      if (this.data.pairing)
+        this.addPairingInstructions_();
     },
 
     /**
@@ -239,9 +226,8 @@ cr.define('options.system.bluetooth', function() {
      * @param {!Element} textDiv Target element for inserting the instructions.
      * @private
      */
-    addPairingInstructions_: function(textDiv) {
-      var instructionsEl = this.ownerDocument.createElement('div');
-      instructionsEl.className = 'bluetooth-instructions';
+    addPairingInstructions_: function() {
+      var instructionsEl = this.getNodeByClass_('bluetooth-instructions');
       var message = templateData[this.data.pairing];
       var array = this.formatInstructions_(message);
       for (var i = 0; i < array.length; i++) {
@@ -253,7 +239,6 @@ cr.define('options.system.bluetooth', function() {
         input.className = 'bluetooth-passkey-field';
         instructionsEl.appendChild(input);
       }
-      textDiv.appendChild(instructionsEl);
     },
 
     /**
@@ -336,8 +321,7 @@ cr.define('options.system.bluetooth', function() {
      * @private.
      */
     addButtons_: function() {
-      var buttonsDiv = this.ownerDocument.createElement('div');
-      buttonsDiv.className = 'bluetooth-button-group';
+      var buttonsDiv = this.getNodeByClass_('bluetooth-button-group');
       var buttonLabelKey = null;
       var callbackType = null;
       if (this.connected) {