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) {
+      if (existing)
         this.replaceChild(item, existing);
-        return;
-      }
-      this.appendChild(item);
+      else
+        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);
+      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)

[flackr, 2011/11/11 22:55:38]

Ditto here.

[kevers, 2011/11/14 17:51:17]

Done.

+            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
   };
 });