Add display of available bluetooth devices, and mechanism for retrieving the list.

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

Index: chrome/browser/resources/options/chromeos/system_options.js
diff --git a/chrome/browser/resources/options/chromeos/system_options.js b/chrome/browser/resources/options/chromeos/system_options.js
index 959e8a0945c5f03aaa5a03bb599865ac9dc7bb25..46481907b42c7e95f33a03e9a854de43898d1ece 100644
--- a/chrome/browser/resources/options/chromeos/system_options.js
+++ b/chrome/browser/resources/options/chromeos/system_options.js
@@ -41,9 +41,17 @@ cr.define('options', function() {
           use_24hour_clock.disabled = true;
       }
 
+      options.system.bluetooth.BluetoothListElement.decorate(
+          $('bluetooth-device-list'));
+
       // TODO (kevers) - Populate list of connected bluetooth devices.
       //                 Set state of 'Enable bluetooth' checkbox.
-      //                 Set state of 'Find devices' button.
+
+      $('bluetooth-find-devices').disabled =
+          $('enable-bluetooth-label') ? false : true;
+      $('bluetooth-find-devices').onclick = function(event) {
+        findBluetoothDevices_();
+      };
 
       $('language-button').onclick = function(event) {
         OptionsPage.navigateToPage('language');
@@ -76,6 +84,91 @@ cr.define('options', function() {
     $('bluetooth-devices').hidden = false;
   }
 
+  /**
+   * Adds an element to the list of available bluetooth devices.
+   * @param{{'deviceName': string,
+   *         'deviceId': string,
+   *         'deviceType': Constants.DEVICE_TYPE,
+   *         'deviceStatus': Constants.DEVICE_STATUS} device
+   *     Decription of the bluetooth device.
+   */
+  SystemOptions.AddBluetoothDevice = function(device) {

[James Hawkins, 2011/10/06 17:20:45]

Public methods should be at the bottom.

[James Hawkins, 2011/10/06 17:20:45]

s/Add/add/

[kevers, 2011/10/06 20:24:41]

Done.

[kevers, 2011/10/06 20:24:41]

Done.

+    $('bluetooth-device-list').appendDevice(device);
+  }
+
+  /**
+   * Hides the scanning label and icon that are used to indicate that a device
+   * search is in progress.
+   */
+  SystemOptions.NotifyBluetoothSearchComplete = function() {

[James Hawkins, 2011/10/06 17:20:45]

s/Notify/notify/

[kevers, 2011/10/06 20:24:41]

Done.

+    // TDOO (kevers) - Reset state immediately once results are received
+    //                 asynchronously.
+    setTimeout(function() {
+      setVisibility_('bluetooth-scanning-label', false);
+      setVisibility_('bluetooth-scanning-icon', false);
+    }, 2000);
+  }
+
+  /**
+   * Scan for bluetooth devices.
+   * @private
+   */
+  function findBluetoothDevices_() {
+    setVisibility_('bluetooth-scanning-label', true);
+    setVisibility_('bluetooth-scanning-icon', true);
+
+    // Remove devices that are not currently connected.
+    var devices = $('bluetooth-device-list').childNodes;
+    for (var i = devices.length - 1; i >= 0; i--) {
+      var device = devices.item(i);
+      var data = device.data;
+      if (!data || data.status !== 'connected')
+        $('bluetooth-device-list').removeChild(device);
+    }
+    // TODO (kevers) - Set arguments to a list of the currently connected
+    //                 devices.
+    chrome.send('findBluetoothDevices');
+  }
+
+  /**
+   * Sets the visibility of an element.
+   * @param {string} id The id of the element.
+   * @param {boolean} visible True if the element should be made visible.
+   * @private
+   */
+  function setVisibility_(id, visible) {
+    var el = $(id);
+    if (el.hidden != visible) {
+      if (visible)
+        el.classList.remove("transparent");
+      return;
+    }
+    if (visible) {
+      el.hidden = false;
+      setTimeout(function() {
+        el.classList.remove('transparent');
+      });
+    } else {
+      el.addEventListener('webkitTransitionEnd', function f(e) {
+        if (e.propertyName != 'opacity')
+          return;
+        el.removeEventListener('webkitTransitionEnd', f);

[James Hawkins, 2011/10/06 17:20:45]

Can't this all be done in CSS?

[kevers, 2011/10/06 20:24:41]

Can animate opacity but not the 'hidden' attribute.  In a previous review, I was
asked to use hidden to show/hide the content.  In this case, the logic could be
simplified by dropping the hidden attribute and relying solely on the addition
and removable the 'transparent' class.  

+        fadeCompleted_(el);
+      });
+      el.classList.add('transparent');
+    }
+  }
+
+  /**
+   * Called when the opacity animation finishes on an element.
+   * @param {!Element} el The target element.
+   * @private
+   */
+  function fadeCompleted_(el) {
+    if (el.classList.contains('transparent'))
+      el.hidden = true;
+  }
+
   // Export
   return {
     SystemOptions: SystemOptions