Bluetooth UI update.

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

 // Copyright (c) 2011 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('options.system.bluetooth', function() {
   /**
    * Bluetooth settings constants.
    */
   function Constants() {}
 
@@ skipping 65 matching lines @@
           this.appendChild(new BluetoothItem(devices[i]));
       }
     },
 
     /**
      * Adds a bluetooth device to the list of available devices. A check is
      * made to see if the device is already in the list, in which case the
      * 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;
     },
 
     /**
      * Scans the list of elements corresponding to discovered Bluetooth
      * devices for one with a matching address.
      * @param {string} address The address of the device.
      * @return {Element|undefined} Element corresponding to the device address
      *     or undefined if no corresponding element is found.
      */
     findDevice: function(address) {
@@ skipping 28 matching lines @@
    *          icon: Constants.DEVICE_TYPE,
    *          paired: boolean,
    *          connected: boolean,
    *          pairing: string|undefined,
    *          passkey: number|undefined,
    *          entered: number|undefined}} device
    *     Decription of the bluetooth device.
    * @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,
 
     /** @inheritDoc */
     decorate: function() {
       this.className = 'bluetooth-item';
       this.connected = this.data.connected;
       // Though strictly speaking, a connected device will also be paired,
       // 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];
+    },
+
+    /**
+     * 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
+     */
+    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 an element containing the display name, status and device pairing
      * instructions.
      * @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);
+      this.setLabel_('network-name-label', this.data.name);
+      var status;
+      if (this.data.connected)
+        status = Constants.DEVICE_STATUS.CONNECTED;
+      else if (this.data.pairing)
+        status = Constants.DEVICE_STATUS.CONNECTING;
+      if (status) {
+        var statusMessage = templateData[status];
+        if (statusMessage)
+          this.setLabel_('network-status-label', statusMessage);
+        if (this.connecting) {
+          var spinner = this.getNodeByClass_('inline-spinner');
+          if (spinner)
+            spinner.hidden = false;
+        }
       }
+      if (this.data.pairing)
+        this.addPairingInstructions_();
     },
 
     /**
-     * Adds a label showing the status of the device.
-     * @param {!Element} textDiv Target element for inserting the status label.
-     * @private
-     */
-    setDeviceStatus_: function(textDiv) {
-      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 (this.connecting) {
-          var throbber = this.ownerDocument.createElement('div');
-          throbber.className = 'throbber';
-          statusEl.appendChild(throbber);
-        }
-        textDiv.appendChild(statusEl);
-      }
-    },
-
-    /**
      * Adds instructions on how to complete the pairing process.
      * @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++) {
         instructionsEl.appendChild(array[i]);
       }
       if (this.data.pairing == Constants.PAIRING.ENTER_PASSKEY) {
         var input = this.ownerDocument.createElement('input');
         input.type = 'text';
         input.className = 'bluetooth-passkey-field';
         instructionsEl.appendChild(input);
       }
-      textDiv.appendChild(instructionsEl);
     },
 
     /**
      * Formats the pairing instruction, which may contain labels for
      * substitution.  The label '%1' is replaced with the passkey, and '%2'
      * is replaced with the name of the bluetooth device.  Formatting of the
      * passkey depends on the type of validation.
      * @param {string} instructions The source instructions to format.
      * @return {Array.<Element>} Array of formatted elements.
      */
@@ skipping 62 matching lines @@
       if (opt_style)
         el.className = opt_style;
       return el;
     },
 
     /**
      * Adds buttons for updating the connectivity of a device.
      * @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) {
         buttonLabelKey = 'bluetoothDisconnectDevice';
         callbackType = 'disconnect';
       } else if (this.paired) {
         buttonLabelKey = 'bluetoothForgetDevice';
         callbackType = 'disconnect';
       } else if (this.connecting) {
         buttonLabelKey = 'bluetoothCancel';
@@ skipping 28 matching lines @@
 
   cr.defineProperty(BluetoothItem, 'paired', cr.PropertyKind.BOOL_ATTR);
 
   cr.defineProperty(BluetoothItem, 'connecting', cr.PropertyKind.BOOL_ATTR);
 
   return {
     Constants: Constants,
     BluetoothListElement: BluetoothListElement
   };
 });