Bluetooth UI refresh

BUG=chromium:106442
TEST=


Review URL: http://codereview.chromium.org/8873033

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@115605 0039d316-1c4b-4281-b951-d872f2087c98

24 files changed, 499 insertions, 1306 deletions

diff --git a/chrome/app/generated_resources.grd b/chrome/app/generated_resources.grd
index f12e820..4c4db72 100644
--- a/chrome/app/generated_resources.grd
+++ b/chrome/app/generated_resources.grd
@@ -12082,14 +12082,14 @@ changed since last sign in
       <message name="IDS_OPTIONS_SETTINGS_BLUETOOTH_ENABLE">
         Enable bluetooth
       </message>
-      <message name="IDS_OPTIONS_SETTINGS_FIND_BLUETOOTH_DEVICES">
-        Search for devices
+      <message name="IDS_OPTIONS_SETTINGS_ADD_BLUETOOTH_DEVICE">
+        Add a device
       </message>
-      <message name="IDS_OPTIONS_SETTINGS_NO_BLUETOOTH_DEVICES_FOUND">
-        No devices found.
+      <message name="IDS_OPTIONS_SETTINGS_FIND_BLUETOOTH_DEVICES">
+        Search
       </message>
       <message name="IDS_OPTIONS_SETTINGS_BLUETOOTH_SCANNING">
-        Searching...
+        Searching for devices...
       </message>
       <message name="IDS_OPTIONS_SETTINGS_BLUETOOTH_CONNECTED">
         Connected
@@ -12097,14 +12097,11 @@ changed since last sign in
       <message name="IDS_OPTIONS_SETTINGS_BLUETOOTH_CONNECTING">
         Connecting
       </message>
-      <message name="IDS_OPTIONS_SETTINGS_BLUETOOTH_NOT_PAIRED">
-        Not Paired
+      <message name="IDS_OPTIONS_SETTINGS_BLUETOOTH_NOT_CONNECTED">
+        Not Connected
       </message>
-      <message name="IDS_OPTIONS_SETTINGS_BLUETOOTH_FAILED_PAIRING">
-        Unsuccessful Pairing
-      </message>
-      <message name="IDS_OPTIONS_SETTINGS_BLUETOOTH_PAIRED">
-        Paired
+      <message name="IDS_OPTIONS_SETTINGS_BLUETOOTH_ADD_DEVICE_TITLE">
+        Add Bluetooth Device
       </message>
       <message name="IDS_OPTIONS_SETTINGS_BLUETOOTH_CONNECT">
         Connect
@@ -12124,17 +12121,14 @@ changed since last sign in
       <message name="IDS_OPTIONS_SETTINGS_BLUETOOTH_REJECT_PASSKEY">
         Reject
       </message>
-      <message name="IDS_OPTIONS_SETTINGS_BLUETOOTH_CONFIRM_PASSKEY_REQUEST" desc="Bluetooth pairing message typically shown when pairing with a device that has a display.  The label %1 is replaced by the passkey and %2 with the name of the device.">
-        Please confirm that the passkey <ph name="PASSKEY">%1<ex>0123</ex></ph> is shown on "<ph name="DEVICE_NAME">%2<ex>Nexus S</ex></ph>".
+      <message name="IDS_OPTIONS_SETTINGS_BLUETOOTH_CONFIRM_PASSKEY_REQUEST" desc="Bluetooth pairing message typically shown when pairing with a device that has a display.  The label %1 is replaced with the name of the device.">
+        Please confirm this passkey is shown on "<ph name="DEVICE_NAME">%1<ex>Nexus S</ex></ph>":
       </message>
       <message name="IDS_OPTIONS_SETTINGS_BLUETOOTH_ENTER_PASSKEY_REQUEST" desc="Bluetooth pairing message typically displayed when the external device has no display or means of input.">
         Please enter the passkey:
       </message>
-      <message name="IDS_OPTIONS_SETTINGS_BLUETOOTH_REMOTE_PASSKEY_REQUEST" desc="Bluetooth pairing message typically displayed when pairing a wireless keyboard.  The label %1 is replaced by the passkey and %2 with the name of the device.">
-        Please enter the passkey <ph name="PASSKEY">%1<ex>0123</ex></ph> on "<ph name="DEVICE_NAME">%2<ex>Nexus S</ex></ph>".
-      </message>
-      <message name="IDS_OPTIONS_SETTINGS_BLUETOOTH_FAILED_PAIRING_INSTRUCTIONS" desc="">
-        Please make sure that "<ph name="DEVICE_NAME">%1<ex>Nexus S</ex></ph>" is turned on, in range and ready for pairing.
+      <message name="IDS_OPTIONS_SETTINGS_BLUETOOTH_REMOTE_PASSKEY_REQUEST" desc="Bluetooth pairing message typically displayed when pairing a wireless keyboard.  The label %1 is replaced with the name of the device.">
+        Please enter this passkey on "<ph name="DEVICE_NAME">%1<ex>Nexus S</ex></ph>":
       </message>
       <message name="IDS_OPTIONS_SETTINGS_ACCESSIBILITY_DESCRIPTION" desc="In the settings tab, the text next to the checkbox for accessbility.">
         Enable accessibility features
diff --git a/chrome/browser/resources/options/chromeos/bluetooth_list_element.js b/chrome/browser/resources/options/chromeos/bluetooth_list_element.js
deleted file mode 100644
index 1b6ef82..0000000
--- a/chrome/browser/resources/options/chromeos/bluetooth_list_element.js
+++ /dev/null
@@ -1,387 +0,0 @@
-// 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() {}
-
-  /**
-   * Enumeration of supported device types.  Each device type has an
-   * associated icon and CSS style.
-   * @enum {string}
-   */
-  Constants.DEVICE_TYPE = {
-    COMPUTER: 'computer',
-    HEADSET: 'headset',
-    KEYBOARD: 'input-keyboard',
-    MOUSE: 'input-mouse',
-    PHONE: 'phone',
-  };
-
-  /**
-   * Enumeration of possible states for a bluetooth device.  The value
-   * associated with each state maps to a localized string in the global
-   * variable 'templateData'.
-   * @enum {string}
-   */
-  Constants.DEVICE_STATUS = {
-    CONNECTED: 'bluetoothDeviceConnected',
-    CONNECTING: 'bluetoothDeviceConnecting',
-    FAILED_PAIRING: 'bluetoothDeviceFailedPairing',
-    NOT_PAIRED: 'bluetoothDeviceNotPaired',
-    PAIRED: 'bluetoothDevicePaired'
-  };
-
-  /**
-   * Enumeration of possible states during pairing.  The value associated
-   * with each state maps to a loalized string in the global variable
-   * 'tempateData'.
-   * @enum {string}
-   */
-  Constants.PAIRING = {
-    CONFIRM_PASSKEY: 'bluetoothConfirmPasskey',
-    ENTER_PASSKEY: 'bluetoothEnterPasskey',
-    FAILED_CONNECT_INSTRUCTIONS: 'bluetoothFailedPairingInstructions',
-    REMOTE_PASSKEY: 'bluetoothRemotePasskey'
-  };
-
-  /**
-   * Creates an element for storing a list of bluetooth devices.
-   * @param {Object=} opt_propertyBag Optional properties.
-   * @constructor
-   * @extends {HTMLDivElement}
-   */
-  var BluetoothListElement = cr.ui.define('div');
-
-  BluetoothListElement.prototype = {
-    __proto__: HTMLDivElement.prototype,
-
-    /** @inheritDoc */
-    decorate: function() {
-    },
-
-    /**
-     * Loads given list of bluetooth devices. This list will comprise of
-     * devices that are currently connected. New devices are discovered
-     * via the 'Find devices' button.
-     * @param {Array} devices An array of bluetooth devices.
-     */
-    load: function(devices) {
-      this.textContent = '';
-      for (var i = 0; i < devices.length; i++) {
-        if (this.isSupported_(devices[i]))
-          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 false;
-      var item = new BluetoothItem(device);
-      var existing = this.findDevice(device.address);
-      if (existing)
-        this.replaceChild(item, existing);
-      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) {
-      var candidate = this.firstChild;
-      while (candidate) {
-        if (candidate.data.address  == address)
-          return candidate;
-        candidate = candidate.nextSibling;
-      }
-    },
-
-    /**
-     * Tests if the bluetooth device is supported based on the type of device.
-     * @param {Object.<string,string>} device Desription of the device.
-     * @return {boolean} true if the device is supported.
-     * @private
-     */
-    isSupported_: function(device) {
-      var target = device.icon;
-      for (var key in Constants.DEVICE_TYPE) {
-        if (Constants.DEVICE_TYPE[key] == target)
-          return true;
-      }
-      return false;
-    }
-  };
-
-  /**
-   * Creates an element in the list of bluetooth devices.
-   * @param {{name: string,
-   *          address: string,
-   *          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 = $('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];
-    el.decorate();
-    return el;
-  }
-
-  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.addLabels_();
-      this.addButtons_();
-    },
-
-    /**
-     * 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
-     */
-    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() {
-      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');
-          spinner.hidden = false;
-        }
-      }
-      if (this.data.pairing)
-        this.addPairingInstructions_();
-    },
-
-    /**
-     * Adds instructions on how to complete the pairing process.
-     * @param {!Element} textDiv Target element for inserting the instructions.
-     * @private
-     */
-    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);
-      }
-    },
-
-    /**
-     * 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.
-     */
-    formatInstructions_: function(instructions) {
-       var array = [];
-       var index = instructions.indexOf('%');
-       if (index >= 0) {
-         array.push(this.createTextElement_(instructions.substring(0, index)));
-         var labelPlaceholder = instructions.charAt(index + 1);
-         // ... handle the placeholder
-         switch (labelPlaceholder) {
-         case '1':
-           array.push(this.createPasskeyElement_());
-           break;
-         case '2':
-           array.push(this.createTextElement_(this.data.name));
-         }
-         array = array.concat(this.formatInstructions_(instructions.substring(
-             index + 2)));
-       } else {
-         array.push(this.createTextElement_(instructions));
-       }
-       return array;
-    },
-
-    /**
-     * Formats an element for displaying the passkey.
-     * @return {Element} Element containing the passkey.
-     */
-    createPasskeyElement_: function() {
-      var passkeyEl = document.createElement('div');
-      if (this.data.pairing == Constants.PAIRING.REMOTE_PASSKEY) {
-        passkeyEl.className = 'bluetooth-remote-passkey';
-        var key = String(this.data.passkey);
-        var progress = this.data.entered;
-        for (var i = 0; i < key.length; i++) {
-          var keyEl = document.createElement('div');
-          keyEl.textContent = key.charAt(i);
-          keyEl.className = 'bluetooth-passkey-char';
-          if (i < progress)
-            keyEl.classList.add('key-typed');
-          passkeyEl.appendChild(keyEl);
-        }
-        // Add return key symbol.
-        var keyEl = document.createElement('div');
-        keyEl.className = 'bluetooth-passkey-char';
-        keyEl.textContent = '\u23ce';
-        passkeyEl.appendChild(keyEl);
-      } else {
-        passkeyEl.className = 'bluetooth-confirm-passkey';
-        passkeyEl.textContent = this.data.passkey;
-      }
-      return passkeyEl;
-    },
-
-    /**
-     * Adds a text element.
-     * @param {string} text The text content of the new element.
-     * @param {string=} opt_style Optional parameter for the CSS class for
-     *     formatting the text element.
-     * @return {Element} Element containing the text.
-     */
-    createTextElement_: function(text, array, opt_style) {
-      var el = this.ownerDocument.createElement('span');
-      el.textContent = text;
-      if (opt_style)
-        el.className = opt_style;
-      return el;
-    },
-
-    /**
-     * Adds buttons for updating the connectivity of a device.
-     * @private.
-     */
-    addButtons_: function() {
-      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 = 'forget';
-      } else if (this.connecting) {
-        if (this.data.pairing == Constants.PAIRING.CONFIRM_PASSKEY) {
-          buttonLabelKey = 'bluetoothRejectPasskey';
-          callbackType = 'reject';
-        } else {
-          buttonLabelKey = 'bluetoothCancel';
-          callbackType = 'cancel';
-        }
-      } else {
-        buttonLabelKey = 'bluetoothConnectDevice';
-        callbackType = 'connect';
-      }
-      if (buttonLabelKey && callbackType) {
-        var buttonEl = this.ownerDocument.createElement('button');
-        buttonEl.textContent = localStrings.getString(buttonLabelKey);
-        var self = this;
-        var callback = function(e) {
-          chrome.send('updateBluetoothDevice',
-              [self.data.address, callbackType]);
-        }
-        buttonEl.addEventListener('click', callback);
-        buttonsDiv.appendChild(buttonEl);
-      }
-      if (this.data.pairing == Constants.PAIRING.CONFIRM_PASSKEY ||
-          this.data.pairing == Constants.PAIRING.ENTER_PASSKEY) {
-        var buttonEl = this.ownerDocument.createElement('button');
-        buttonEl.className = 'accept-pairing-button';
-        var msg = this.data.pairing == Constants.PAIRING.CONFIRM_PASSKEY ?
-            'bluetoothAcceptPasskey' : 'bluetoothConnectDevice';
-        buttonEl.textContent = localStrings.getString(msg);
-        var self = this;
-        var callback = function(e) {
-          var passkey = self.data.passkey;
-          if (self.data.pairing == Constants.PAIRING.ENTER_PASSKEY) {
-            var passkeyField = self.getNodeByClass_('bluetooth-passkey-field');
-            passkey = passkeyField.value;
-          }
-          chrome.send('updateBluetoothDevice',
-              [self.data.address, 'connect', String(passkey)]);
-        }
-        buttonEl.addEventListener('click', callback);
-        buttonsDiv.insertBefore(buttonEl, buttonsDiv.firstChild);
-      }
-      this.appendChild(buttonsDiv);
-    }
-  };
-
-  cr.defineProperty(BluetoothItem, 'connected', cr.PropertyKind.BOOL_ATTR);
-
-  cr.defineProperty(BluetoothItem, 'paired', cr.PropertyKind.BOOL_ATTR);
-
-  cr.defineProperty(BluetoothItem, 'connecting', cr.PropertyKind.BOOL_ATTR);
-
-  return {
-    Constants: Constants,
-    BluetoothListElement: BluetoothListElement
-  };
-});
diff --git a/chrome/browser/resources/options/chromeos/system_options.html b/chrome/browser/resources/options/chromeos/system_options.html
index cd7b7ce..97baec7 100644
--- a/chrome/browser/resources/options/chromeos/system_options.html
+++ b/chrome/browser/resources/options/chromeos/system_options.html
@@ -72,7 +72,8 @@
       </div>
     </section>
     <!-- By default, the bluetooth section is hidden.  It is only
-         visible if the command line flag --enable_bluetooth is set. -->
+         visible if the command line flag --enable_bluetooth is set
+         and a bluetooth adapter is discovered or emmulating ChromeOS. -->
     <section id="bluetooth-devices" hidden>
       <h3 i18n-content="bluetooth"></h3>
       <div id="bluetooth-options-div">
@@ -80,34 +81,11 @@
           <button id="enable-bluetooth" i18n-content="enableBluetooth" hidden>
           <button id="disable-bluetooth" i18n-content="disableBluetooth">
         </div>
-        <div id="no-bluetooth-devices-label"
-            i18n-content="noBluetoothDevicesFound">
-        </div>
-        <div id="bluetooth-device-list">
-          <!-- A list of connected devices is inserted here on page load. -->
-          <!-- The list of devices is updated asynchronously on clicking
-               'Find Devices'. -->
-        </div>
-        <!-- Template for items in list of Bluetooth devices -->
-        <div id="bluetooth-item-template" class="bluetooth-item" hidden>
-          <div class="bluetooth-item-text">
-            <div class="network-name-label"></div>
-            <div class="bluetooth-status">
-              <span class="network-status-label"></span>
-              <div class="inline-spinner" hidden></div>
-            </div>
-            <div class="bluetooth-instructions"></div>
-          </div>
-          <div class="bluetooth-button-group"></div>
-        </div>
-        <div id = "bluetooth-finder-container">
-          <button id="bluetooth-find-devices"
-              i18n-content="findBluetoothDevices"></button>
-          <div id="bluetooth-scanning-icon"
-              class="inline-spinner transparent"></div>
-          <span id="bluetooth-scanning-label" class="transparent"
-              i18n-content="bluetoothScanning"></span>
+        <div class="settings-list bluetooth-device-list" hidden>
+          <list id="bluetooth-paired-devices-list"></list>
         </div>
+        <button id="bluetooth-add-device" hidden
+            i18n-content="addBluetoothDevice"></button>
       </div>
     </section>
     <section>
@@ -137,4 +115,4 @@
       </div>
     </section>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/chrome/browser/resources/options/chromeos/system_options.js b/chrome/browser/resources/options/chromeos/system_options.js
index 04854df..ae26b9c 100644
--- a/chrome/browser/resources/options/chromeos/system_options.js
+++ b/chrome/browser/resources/options/chromeos/system_options.js
@@ -14,7 +14,6 @@ cr.define('options', function() {
    * Encapsulated handling of ChromeOS system options page.
    * @constructor
    */
-
   function SystemOptions() {
     OptionsPage.call(this, 'system', templateData.systemPageTabTitle,
                      'systemPage');
@@ -27,6 +26,12 @@ cr.define('options', function() {
     __proto__: options.OptionsPage.prototype,
 
     /**
+     * Flag indicating if currently scanning for Bluetooth devices.
+     * @type {boolean}
+     */
+    isScanning_: false,
+
+    /**
      * Initializes SystemOptions page.
      * Calls base class implementation to starts preference initialization.
      */
@@ -43,13 +48,13 @@ cr.define('options', function() {
           use_24hour_clock.disabled = true;
       }
 
-      options.system.bluetooth.BluetoothListElement.decorate(
-          $('bluetooth-device-list'));
+      options.system.bluetooth.BluetoothDeviceList.decorate(
+          $('bluetooth-paired-devices-list'));
 
-      // TODO(kevers): Populate list of connected bluetooth devices.
-      //               Set state of 'Enable bluetooth' checkbox.
-      $('bluetooth-find-devices').onclick = function(event) {
-        findBluetoothDevices_();
+      $('bluetooth-add-device').onclick = function(event) {
+        if (! this.isScanning_)
+          findBluetoothDevices_(true);
+        OptionsPage.navigateToPage('bluetooth');
       };
       $('enable-bluetooth').onclick = function(event) {
         chrome.send('bluetoothEnableChange', [Boolean(true)]);
@@ -90,36 +95,17 @@ cr.define('options', function() {
 
   /**
    * Scan for bluetooth devices.
+   * @param {boolean} reset Indicates if the list of unpaired devices should be
+   *     cleared.
    * @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);
-    }
+  function findBluetoothDevices_(reset) {
+    this.isScanning_ = true;
+    if (reset)
+      $('bluetooth-unpaired-devices-list').clear();
     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) {
-    if (visible)
-      $(id).classList.remove("transparent");
-    else
-      $(id).classList.add("transparent");
-  }
-
   //
   // Chrome callbacks
   //
@@ -147,20 +133,15 @@ cr.define('options', function() {
   SystemOptions.setBluetoothState = function(checked) {
     $('disable-bluetooth').hidden = !checked;
     $('enable-bluetooth').hidden = checked;
-    $('bluetooth-finder-container').hidden = !checked;
-    $('no-bluetooth-devices-label').hidden = !checked;
-    if (!checked) {
-      setVisibility_('bluetooth-scanning-label', false);
-      setVisibility_('bluetooth-scanning-icon', false);
-    }
+    $('bluetooth-paired-devices-list').parentNode.hidden = !checked;
+    $('bluetooth-add-device').hidden = !checked;
     // Flush list of previously discovered devices if bluetooth is turned off.
     if (!checked) {
-      var devices = $('bluetooth-device-list').childNodes;
-      for (var i = devices.length - 1; i >= 0; i--) {
-        var device = devices.item(i);
-        $('bluetooth-device-list').removeChild(device);
-      }
+      $('bluetooth-paired-devices-list').clear();
+      $('bluetooth-unpaired-devices-list').clear();
     }
+    if (checked && ! this.isScanning_)
+      findBluetoothDevices_(true);
   }
 
   /**
@@ -174,17 +155,29 @@ cr.define('options', function() {
    *     Decription of the bluetooth device.
    */
   SystemOptions.addBluetoothDevice = function(device) {
-    if ($('bluetooth-device-list').appendDevice(device))
-      $('no-bluetooth-devices-label').hidden = true;
+    if (device.paired) {
+      // Test to see if the device is currently in the unpaired list, in which
+      // case it should be removed from that list.
+      var index = $('bluetooth-unpaired-devices-list').find(device.address);
+      if (index != undefined)
+        $('bluetooth-unpaired-devices-list').deleteItemAtIndex(index);
+      $('bluetooth-paired-devices-list').appendDevice(device);
+    } else {
+      $('bluetooth-unpaired-devices-list').appendDevice(device);
+    }
+    // One device can be in the process of pairing.  If found, display
+    // the Bluetooth pairing overlay.
+    if (device.pairing)
+      BluetoothPairing.showDialog(device);
   };
 
   /**
-   * Hides the scanning label and icon that are used to indicate that a device
-   * search is in progress.
+   * Notification that a single pass of device discovery has completed.
    */
   SystemOptions.notifyBluetoothSearchComplete = function() {
-    setVisibility_('bluetooth-scanning-label', false);
-    setVisibility_('bluetooth-scanning-icon', false);
+    // TODO(kevers): Determine the fate of this method once continuous
+    // scanning is implemented in the Bluetooth code.
+    this.isScanning_ = false;
   };
 
   /**
diff --git a/chrome/browser/resources/options/chromeos/system_options_page.css b/chrome/browser/resources/options/chromeos/system_options_page.css
index 066d5b8..03010b3 100644
--- a/chrome/browser/resources/options/chromeos/system_options_page.css
+++ b/chrome/browser/resources/options/chromeos/system_options_page.css
@@ -26,140 +26,12 @@ html[dir=rtl] .pointer-sensitivity-more {
   display: -webkit-box;
 }
 
-#no-bluetooth-devices-label {
-  -webkit-margin-after: 5px;
-  -webkit-margin-before: 5px;
-  color: gray;
-}
-
-#bluetooth-finder-container,
-#bluetooth-scanning-status {
-  -webkit-box-orient: horizontal;
-  display: -webkit-box;
-  vertical-align: baseline;
-}
-
-#bluetooth-scanning-label,
-#bluetooth-scanning-icon {
-  -webkit-transition: 250ms opacity;
-}
-
-#bluetooth-scanning-label {
-  -webkit-margin-start: 5px;
-  color: gray;
-}
-
-#bluetooth-scanning-icon {
-  -webkit-margin-start: 10px;
-  vertical-align: middle;
-}
-
-#bluetooth-device-list {
-  display: table;
-  width: 100%;
-}
-
-#bluetooth-device-list > * {
-  display: table-row;
-}
-
-#bluetooth-device-list > * > * {
-  border-bottom: 4px solid rgba(255,255,255,1);
-  display: table-cell;
-}
-
-.bluetooth-item > * > button {
-  visibility: hidden;
-  width: 100%;
-}
-
-.bluetooth-item:first-child > * {
-  border-top: 4px solid rgba(255,255,255,1);
-}
-
-.bluetooth-item:hover > * > button,
-.bluetooth-item[connected] > * > button,
-.bluetooth-item[connecting] > * > button {
-  visibility: visible;
-}
-
-.bluetooth-item[connected] {
-  background-color: hsl(214, 91%, 89%);
-  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.8),
-                                            rgba(255, 255, 255, 0));
-  border-color: hsl(214, 91%, 65%);
-}
-
-.bluetooth-item[paired] {
-  color: gray;
-}
-
-.bluetooth-item:hover,
-.bluetooth-item[connecting] {
-  background-color: hsl(214, 91%, 97%);
-  border-color: hsl(214, 91%, 65%);
-}
-
-.bluetooth-item-text {
-  -webkit-padding-after: 3px;
-  -webkit-padding-before: 3px;
-  -webkit-padding-end: 5px;
-  -webkit-padding-start: 5px;
-  width: 100%;
-}
-
-.bluetooth-item-text > * > .inline-spinner {
-  -webkit-margin-start: 5px;
-  -webkit-transform: translateY(3px);
-}
-
-.bluetooth-instructions {
-  -webkit-margin-after: 5px;
-  -webkit-margin-before: 5px;
-  display: block;
-  line-height: 120%;
-}
-
-.bluetooth-remote-passkey {
-  -webkit-box-align: baseline;
-  -webkit-box-orient: horizontal;
-  display: -webkit-inline-box;
-  margin-bottom: 5px;
-  margin-top: 5px;
-}
-
-.bluetooth-confirm-passkey {
-  display: inline;
+#bluetooth-devices-label {
+  -webkit-margin-end: 8px;
+  -webkit-margin-start: 8px;
   font-weight: bold;
 }
 
-.bluetooth-passkey-char {
-  -webkit-margin-end: 3px;
-  -webkit-margin-start: 3px;
-  border: 1px solid black;
-  display: -webkit-box;
-  font-weight: bold;
-  padding: 2px;
-}
-
-.bluetooth-passkey-char:first-child {
-  -webkit-margin-start: 10px;
-}
-
-.bluetooth-passkey-char:last-child {
-  -webkit-margin-end: 10px;
-}
-
-.bluetooth-passkey-char.key-typed {
-  background-color: hsl(214, 91%, 50%);
-  color: white;
-}
-
-.bluetooth-passkey-field {
-  -webkit-margin-start: 10px;
-  width: 100px;
-}
-
 .bluetooth-button-group {
   -webkit-padding-end: 5px;
   vertical-align: middle;
diff --git a/chrome/browser/resources/options/options.html b/chrome/browser/resources/options/options.html
index fb75e98..35c58ee 100644
--- a/chrome/browser/resources/options/options.html
+++ b/chrome/browser/resources/options/options.html
@@ -50,6 +50,7 @@
   <link rel="stylesheet" href="chromeos/internet_options_page.css">
   <link rel="stylesheet" href="chromeos/proxy.css">
   <link rel="stylesheet" href="chromeos/system_options_page.css">
+  <link rel="stylesheet" href="chromeos/bluetooth.css">
 </if>
 <if expr="pp_ifdef('chromeos') and pp_ifdef('use_virtual_keyboard')">
   <link rel="stylesheet" href="chromeos/virtual_keyboard.css">
@@ -93,6 +94,8 @@
   <include src="pack_extension_overlay.html">
   <include src="../sync_setup_overlay.html">
   <if expr="pp_ifdef('chromeos')">
+     <include src="chromeos/bluetooth_add_device_overlay.html">
+     <include src="chromeos/bluetooth_pair_device_overlay.html">
      <include
          src="chromeos/language_customize_modifier_keys_overlay.html">
      <include src="chromeos/internet_detail.html">
diff --git a/chrome/browser/resources/options/options.js b/chrome/browser/resources/options/options.js
index 5a744f3..43bfe75 100644
--- a/chrome/browser/resources/options/options.js
+++ b/chrome/browser/resources/options/options.js
@@ -172,7 +172,6 @@ function load() {
                               PersonalOptions.getInstance());
   OptionsPage.registerOverlay(ManageProfileOverlay.getInstance(),
                               PersonalOptions.getInstance());
-
   OptionsPage.register(ExtensionSettings.getInstance());
   OptionsPage.registerOverlay(PackExtensionOverlay.getInstance(),
                               ExtensionSettings.getInstance());
@@ -198,6 +197,11 @@ function load() {
     OptionsPage.registerOverlay(languageModifierKeysOverlay,
                                 SystemOptions.getInstance(),
                                 [$('modifier-keys-button')]);
+    OptionsPage.registerOverlay(BluetoothOptions.getInstance(),
+                                SystemOptions.getInstance(),
+                                [$('bluetooth-add-device')]);
+    OptionsPage.registerOverlay(BluetoothPairing.getInstance(),
+                                SystemOptions.getInstance());
   }
 
   Preferences.getInstance().initialize();
diff --git a/chrome/browser/resources/options/options_bundle.js b/chrome/browser/resources/options/options_bundle.js
index f6e9939..c527402 100644
--- a/chrome/browser/resources/options/options_bundle.js
+++ b/chrome/browser/resources/options/options_bundle.js
@@ -21,7 +21,9 @@
   <include src="chromeos/internet_options.js"></include>
   <include src="chromeos/internet_detail.js"></include>
   <include src="chromeos/system_options.js"></include>
-  <include src="chromeos/bluetooth_list_element.js"></include>
+  <include src="chromeos/bluetooth_device_list.js"></include>
+  <include src="chromeos/bluetooth_add_device_overlay.js"></include>
+  <include src="chromeos/bluetooth_pair_device_overlay.js"></include>
   <include src="chromeos/accounts_options.js"></include>
   <include src="chromeos/proxy_options.js"></include>
   <include src="chromeos/proxy_rules_list.js"></include>
@@ -35,6 +37,8 @@
   var InternetOptions = options.InternetOptions;
   var DetailsInternetPage = options.internet.DetailsInternetPage;
   var SystemOptions = options.SystemOptions;
+  var BluetoothOptions = options.BluetoothOptions;
+  var BluetoothPairing = options.BluetoothPairing;
 </if>
 <if expr="not pp_ifdef('win32') and not pp_ifdef('darwin')">
   <include src="certificate_tree.js"></include>
diff --git a/chrome/browser/resources/options2/chromeos/bluetooth.css b/chrome/browser/resources/options2/chromeos/bluetooth.css
new file mode 100644
index 0000000..a7c682d
--- /dev/null
+++ b/chrome/browser/resources/options2/chromeos/bluetooth.css
@@ -0,0 +1,50 @@
+.bluetooth-device-list {
+  margin: 10px;
+  padding: 5px 10px;
+}
+
+.bluetooth-device[paired] {
+  color: gray;
+}
+
+#bluetooth-scanning {
+  -webkit-box-orient: horizontal;
+  display: -webkit-inline-box;
+  margin-bottom: 5px;
+}
+
+#bluetooth-scanning-label {
+  -webkit-margin-start: 5px;
+}
+
+#bluetooth-scanning-icon {
+  -webkit-margin-start: 10px;
+  vertical-align: middle;
+}
+
+#bluetooth-unpaired-devices-list {
+  /* Prevent dialog from expanding if many devices are found. */
+  max-height: 192px;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+
+#bluetooth-pairing-instructions,
+#bluetooth-passkey {
+  margin: 10px;
+}
+
+#bluetooth-pairing-passkey-display {
+  padding: 5px;
+  text-align: center;
+}
+
+.bluetooth-passkey-char {
+  color: #555;
+  font-size: 150%;
+  padding: 5px;
+}
+
+.bluetooth-passkey-char.key-typed {
+  text-decoration: underline;
+}
diff --git a/chrome/browser/resources/options2/chromeos/bluetooth_add_device_overlay.html b/chrome/browser/resources/options2/chromeos/bluetooth_add_device_overlay.html
new file mode 100644
index 0000000..259bdf8
--- /dev/null
+++ b/chrome/browser/resources/options2/chromeos/bluetooth_add_device_overlay.html
@@ -0,0 +1,18 @@
+<div id="bluetooth-options" class="page" hidden>
+  <h1 i18n-content="bluetoothAddDeviceTitle"></h1>
+  <div class="settings-list bluetooth-device-list">
+    <list id="bluetooth-unpaired-devices-list"></list>
+  </div>
+  <div id="bluetooth-scanning">
+    <div id="bluetooth-scanning-icon" 
+        class="inline-spinner"></div>
+    <span id="bluetooth-scanning-label"
+        i18n-content="bluetoothScanning"></span>
+  </div>
+  <div class="action-area button-strip">
+    <button id="bluetooth-add-device-cancel-button" type="reset"
+        i18n-content="cancel"></button>
+    <button id="bluetooth-add-device-apply-button" type="submit"
+        i18n-content="bluetoothConnectDevice" disabled></button>
+  </div>
+</div>
diff --git a/chrome/browser/resources/options2/chromeos/bluetooth_add_device_overlay.js b/chrome/browser/resources/options2/chromeos/bluetooth_add_device_overlay.js
new file mode 100644
index 0000000..da7aebc
--- /dev/null
+++ b/chrome/browser/resources/options2/chromeos/bluetooth_add_device_overlay.js
@@ -0,0 +1,70 @@
+// 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', function() {
+  const OptionsPage = options.OptionsPage;
+
+  /**
+   * Encapsulated handling of the Bluetooth options page.
+   * @constructor
+   */
+  function BluetoothOptions() {
+    OptionsPage.call(this,
+                     'bluetooth',
+                     templateData.bluetoothOptionsPageTabTitle,
+                     'bluetooth-options');
+  }
+
+  cr.addSingletonGetter(BluetoothOptions);
+
+  BluetoothOptions.prototype = {
+    __proto__: OptionsPage.prototype,
+
+    /**
+     * The list of available (unpaired) bluetooth devices.
+     * @type {DeletableItemList}
+     * @private
+     */
+    deviceList_: null,
+
+    /** @inheritDoc */
+    initializePage: function() {
+      OptionsPage.prototype.initializePage.call(this);
+      this.createDeviceList_();
+
+      $('bluetooth-add-device-cancel-button').onclick = function(event) {
+        OptionsPage.closeOverlay();
+      };
+
+      var self = this;
+      $('bluetooth-add-device-apply-button').onclick = function(event) {
+        var device = self.deviceList_.selectedItem;
+        var address = device.address;
+        chrome.send('updateBluetoothDevice', [address, 'connect']);
+        OptionsPage.closeOverlay();
+      };
+
+      $('bluetooth-add-device-apply-button').onmousedown = function(event) {
+        // Prevent 'blur' event, which would reset the list selection,
+        // thereby disabling the apply button.
+        event.preventDefault();
+      };
+    },
+
+    /**
+     * Creates, decorates and initializes the bluetooth device list.
+     * @private
+     */
+    createDeviceList_: function() {
+      this.deviceList_ = $('bluetooth-unpaired-devices-list');
+      options.system.bluetooth.BluetoothDeviceList.decorate(this.deviceList_);
+      this.deviceList_.autoExpands = true;
+    }
+  };
+
+  // Export
+  return {
+    BluetoothOptions: BluetoothOptions
+  };
+});
diff --git a/chrome/browser/resources/options2/chromeos/bluetooth_list_element.js b/chrome/browser/resources/options2/chromeos/bluetooth_list_element.js
deleted file mode 100644
index 1b6ef82..0000000
--- a/chrome/browser/resources/options2/chromeos/bluetooth_list_element.js
+++ /dev/null
@@ -1,387 +0,0 @@
-// 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() {}
-
-  /**
-   * Enumeration of supported device types.  Each device type has an
-   * associated icon and CSS style.
-   * @enum {string}
-   */
-  Constants.DEVICE_TYPE = {
-    COMPUTER: 'computer',
-    HEADSET: 'headset',
-    KEYBOARD: 'input-keyboard',
-    MOUSE: 'input-mouse',
-    PHONE: 'phone',
-  };
-
-  /**
-   * Enumeration of possible states for a bluetooth device.  The value
-   * associated with each state maps to a localized string in the global
-   * variable 'templateData'.
-   * @enum {string}
-   */
-  Constants.DEVICE_STATUS = {
-    CONNECTED: 'bluetoothDeviceConnected',
-    CONNECTING: 'bluetoothDeviceConnecting',
-    FAILED_PAIRING: 'bluetoothDeviceFailedPairing',
-    NOT_PAIRED: 'bluetoothDeviceNotPaired',
-    PAIRED: 'bluetoothDevicePaired'
-  };
-
-  /**
-   * Enumeration of possible states during pairing.  The value associated
-   * with each state maps to a loalized string in the global variable
-   * 'tempateData'.
-   * @enum {string}
-   */
-  Constants.PAIRING = {
-    CONFIRM_PASSKEY: 'bluetoothConfirmPasskey',
-    ENTER_PASSKEY: 'bluetoothEnterPasskey',
-    FAILED_CONNECT_INSTRUCTIONS: 'bluetoothFailedPairingInstructions',
-    REMOTE_PASSKEY: 'bluetoothRemotePasskey'
-  };
-
-  /**
-   * Creates an element for storing a list of bluetooth devices.
-   * @param {Object=} opt_propertyBag Optional properties.
-   * @constructor
-   * @extends {HTMLDivElement}
-   */
-  var BluetoothListElement = cr.ui.define('div');
-
-  BluetoothListElement.prototype = {
-    __proto__: HTMLDivElement.prototype,
-
-    /** @inheritDoc */
-    decorate: function() {
-    },
-
-    /**
-     * Loads given list of bluetooth devices. This list will comprise of
-     * devices that are currently connected. New devices are discovered
-     * via the 'Find devices' button.
-     * @param {Array} devices An array of bluetooth devices.
-     */
-    load: function(devices) {
-      this.textContent = '';
-      for (var i = 0; i < devices.length; i++) {
-        if (this.isSupported_(devices[i]))
-          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 false;
-      var item = new BluetoothItem(device);
-      var existing = this.findDevice(device.address);
-      if (existing)
-        this.replaceChild(item, existing);
-      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) {
-      var candidate = this.firstChild;
-      while (candidate) {
-        if (candidate.data.address  == address)
-          return candidate;
-        candidate = candidate.nextSibling;
-      }
-    },
-
-    /**
-     * Tests if the bluetooth device is supported based on the type of device.
-     * @param {Object.<string,string>} device Desription of the device.
-     * @return {boolean} true if the device is supported.
-     * @private
-     */
-    isSupported_: function(device) {
-      var target = device.icon;
-      for (var key in Constants.DEVICE_TYPE) {
-        if (Constants.DEVICE_TYPE[key] == target)
-          return true;
-      }
-      return false;
-    }
-  };
-
-  /**
-   * Creates an element in the list of bluetooth devices.
-   * @param {{name: string,
-   *          address: string,
-   *          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 = $('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];
-    el.decorate();
-    return el;
-  }
-
-  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.addLabels_();
-      this.addButtons_();
-    },
-
-    /**
-     * 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
-     */
-    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() {
-      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');
-          spinner.hidden = false;
-        }
-      }
-      if (this.data.pairing)
-        this.addPairingInstructions_();
-    },
-
-    /**
-     * Adds instructions on how to complete the pairing process.
-     * @param {!Element} textDiv Target element for inserting the instructions.
-     * @private
-     */
-    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);
-      }
-    },
-
-    /**
-     * 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.
-     */
-    formatInstructions_: function(instructions) {
-       var array = [];
-       var index = instructions.indexOf('%');
-       if (index >= 0) {
-         array.push(this.createTextElement_(instructions.substring(0, index)));
-         var labelPlaceholder = instructions.charAt(index + 1);
-         // ... handle the placeholder
-         switch (labelPlaceholder) {
-         case '1':
-           array.push(this.createPasskeyElement_());
-           break;
-         case '2':
-           array.push(this.createTextElement_(this.data.name));
-         }
-         array = array.concat(this.formatInstructions_(instructions.substring(
-             index + 2)));
-       } else {
-         array.push(this.createTextElement_(instructions));
-       }
-       return array;
-    },
-
-    /**
-     * Formats an element for displaying the passkey.
-     * @return {Element} Element containing the passkey.
-     */
-    createPasskeyElement_: function() {
-      var passkeyEl = document.createElement('div');
-      if (this.data.pairing == Constants.PAIRING.REMOTE_PASSKEY) {
-        passkeyEl.className = 'bluetooth-remote-passkey';
-        var key = String(this.data.passkey);
-        var progress = this.data.entered;
-        for (var i = 0; i < key.length; i++) {
-          var keyEl = document.createElement('div');
-          keyEl.textContent = key.charAt(i);
-          keyEl.className = 'bluetooth-passkey-char';
-          if (i < progress)
-            keyEl.classList.add('key-typed');
-          passkeyEl.appendChild(keyEl);
-        }
-        // Add return key symbol.
-        var keyEl = document.createElement('div');
-        keyEl.className = 'bluetooth-passkey-char';
-        keyEl.textContent = '\u23ce';
-        passkeyEl.appendChild(keyEl);
-      } else {
-        passkeyEl.className = 'bluetooth-confirm-passkey';
-        passkeyEl.textContent = this.data.passkey;
-      }
-      return passkeyEl;
-    },
-
-    /**
-     * Adds a text element.
-     * @param {string} text The text content of the new element.
-     * @param {string=} opt_style Optional parameter for the CSS class for
-     *     formatting the text element.
-     * @return {Element} Element containing the text.
-     */
-    createTextElement_: function(text, array, opt_style) {
-      var el = this.ownerDocument.createElement('span');
-      el.textContent = text;
-      if (opt_style)
-        el.className = opt_style;
-      return el;
-    },
-
-    /**
-     * Adds buttons for updating the connectivity of a device.
-     * @private.
-     */
-    addButtons_: function() {
-      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 = 'forget';
-      } else if (this.connecting) {
-        if (this.data.pairing == Constants.PAIRING.CONFIRM_PASSKEY) {
-          buttonLabelKey = 'bluetoothRejectPasskey';
-          callbackType = 'reject';
-        } else {
-          buttonLabelKey = 'bluetoothCancel';
-          callbackType = 'cancel';
-        }
-      } else {
-        buttonLabelKey = 'bluetoothConnectDevice';
-        callbackType = 'connect';
-      }
-      if (buttonLabelKey && callbackType) {
-        var buttonEl = this.ownerDocument.createElement('button');
-        buttonEl.textContent = localStrings.getString(buttonLabelKey);
-        var self = this;
-        var callback = function(e) {
-          chrome.send('updateBluetoothDevice',
-              [self.data.address, callbackType]);
-        }
-        buttonEl.addEventListener('click', callback);
-        buttonsDiv.appendChild(buttonEl);
-      }
-      if (this.data.pairing == Constants.PAIRING.CONFIRM_PASSKEY ||
-          this.data.pairing == Constants.PAIRING.ENTER_PASSKEY) {
-        var buttonEl = this.ownerDocument.createElement('button');
-        buttonEl.className = 'accept-pairing-button';
-        var msg = this.data.pairing == Constants.PAIRING.CONFIRM_PASSKEY ?
-            'bluetoothAcceptPasskey' : 'bluetoothConnectDevice';
-        buttonEl.textContent = localStrings.getString(msg);
-        var self = this;
-        var callback = function(e) {
-          var passkey = self.data.passkey;
-          if (self.data.pairing == Constants.PAIRING.ENTER_PASSKEY) {
-            var passkeyField = self.getNodeByClass_('bluetooth-passkey-field');
-            passkey = passkeyField.value;
-          }
-          chrome.send('updateBluetoothDevice',
-              [self.data.address, 'connect', String(passkey)]);
-        }
-        buttonEl.addEventListener('click', callback);
-        buttonsDiv.insertBefore(buttonEl, buttonsDiv.firstChild);
-      }
-      this.appendChild(buttonsDiv);
-    }
-  };
-
-  cr.defineProperty(BluetoothItem, 'connected', cr.PropertyKind.BOOL_ATTR);
-
-  cr.defineProperty(BluetoothItem, 'paired', cr.PropertyKind.BOOL_ATTR);
-
-  cr.defineProperty(BluetoothItem, 'connecting', cr.PropertyKind.BOOL_ATTR);
-
-  return {
-    Constants: Constants,
-    BluetoothListElement: BluetoothListElement
-  };
-});
diff --git a/chrome/browser/resources/options2/chromeos/bluetooth_pair_device_overlay.html b/chrome/browser/resources/options2/chromeos/bluetooth_pair_device_overlay.html
new file mode 100644
index 0000000..12647d4
--- /dev/null
+++ b/chrome/browser/resources/options2/chromeos/bluetooth_pair_device_overlay.html
@@ -0,0 +1,18 @@
+<div id="bluetooth-pairing" class="page" hidden>
+  <h1 i18n-content="bluetoothAddDeviceTitle"></h1>
+  <div id="bluetooth-pairing-instructions"></div>
+  <div id="bluetooth-pairing-passkey-display" hidden></div>
+  <div id="bluetooth-pairing-passkey-entry" hidden>
+     <input id="bluetooth-passkey" type="text">
+  </div>
+  <div class="action-area button-strip">
+    <button id="bluetooth-pair-device-cancel-button" type="reset"
+        i18n-content="cancel" hidden></button>
+    <button id="bluetooth-pair-device-connect-button" type="reset"
+        i18n-content="bluetoothConnectDevice" hidden></button>
+    <button id="bluetooth-pair-device-reject-button" type="reset"
+        i18n-content="bluetoothRejectPasskey" hidden></button>
+    <button id="bluetooth-pair-device-accept-button" type="reset"
+        i18n-content="bluetoothAcceptPasskey" hidden></button>
+  </div>
+</div>
diff --git a/chrome/browser/resources/options2/chromeos/bluetooth_pair_device_overlay.js b/chrome/browser/resources/options2/chromeos/bluetooth_pair_device_overlay.js
new file mode 100644
index 0000000..b61d922
--- /dev/null
+++ b/chrome/browser/resources/options2/chromeos/bluetooth_pair_device_overlay.js
@@ -0,0 +1,182 @@
+// 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', function() {
+  const OptionsPage = options.OptionsPage;
+
+  /**
+   * Enumeration of possible states during pairing.  The value associated with
+   * each state maps to a loalized string in the global variable
+   * 'templateData'.
+   * @enum {string}
+   */
+  const PAIRING = {
+    CONFIRM_PASSKEY: 'bluetoothConfirmPasskey',
+    ENTER_PASSKEY: 'bluetoothEnterPasskey',
+    FAILED_CONNECT: 'bluetoothFailedPairingInstructions',
+    REMOTE_PASSKEY: 'bluetoothRemotePasskey'
+  };
+
+  /**
+   * Encapsulated handling of the Bluetooth device pairing page.
+   * @constructor
+   */
+  function BluetoothPairing() {
+    OptionsPage.call(this,
+                     'bluetoothPairing',
+                     templateData.bluetoothOptionsPageTabTitle,
+                     'bluetooth-pairing');
+  }
+
+  cr.addSingletonGetter(BluetoothPairing);
+
+  BluetoothPairing.prototype = {
+    __proto__: OptionsPage.prototype,
+
+    /**
+     * Description of the bluetooth device.
+     * @type {{name: string,
+     *         address: string,
+     *         icon: Constants.DEVICE_TYPE,
+     *         paired: boolean,
+     *         connected: boolean,
+     *         pairing: string|undefined,
+     *         passkey: number|undefined,
+     *         entered: number|undefined}}
+     * @private.
+     */
+    device_: null,
+
+     /** @inheritDoc */
+    initializePage: function() {
+      OptionsPage.prototype.initializePage.call(this);
+      var self = this;
+      var cancel = function() {
+        chrome.send('updateBluetoothDevice',
+                    [self.device_.address, 'cancel']);
+        OptionsPage.closeOverlay();
+      };
+      var connect = function() {
+        var args = [self.device_.address, 'connect'];
+        var passkey = self.device_.passkey;
+        if (!passkey && !$('bluetooth-pairing-passkey-entry').hidden)
+          passkey = $('bluetooth-passkey').value;
+        if (passkey)
+          args.push(String(passkey));
+        chrome.send('updateBluetoothDevice', args);
+        OptionsPage.closeOverlay();
+      };
+      $('bluetooth-pair-device-cancel-button').onclick = cancel;
+      $('bluetooth-pair-device-reject-button').onclick = cancel;
+      $('bluetooth-pair-device-connect-button').onclick = connect;
+      $('bluetooth-pair-device-accept-button').onclick = connect;
+      $('bluetooth-passkey').oninput = function() {
+        $('bluetooth-pair-device-connect-button').disabled =
+            $('bluetooth-passkey').value.length == 0;
+      }
+    },
+
+    /**
+     * Override to prevent showing the overlay if the Bluetooth device details
+     * have not been specified.  Prevents showing an empty dialog if the user
+     * quits and restarts Chrome while in the process of pairing with a device.
+     " @return {boolean} True if the overlay can be displayed.
+     */
+    canShowPage: function() {
+      return this.device_ && this.device_.address && this.device_.pairing;
+    },
+
+    /**
+     * Configures the overlay for pairing a device.
+     * @param {Object} device Description of the bluetooth device.
+     */
+    update: function(device) {
+      this.device_ = {};
+      for (key in device)
+        this.device_[key] = device[key];
+      // Update the pairing instructions.
+      var instructionsEl = $('bluetooth-pairing-instructions');
+      this.clearElement_(instructionsEl);
+
+      var message = templateData[device.pairing];
+      message = message.replace('%1', this.device_.name);
+      instructionsEl.textContent = message;
+      if (this.device_.passkey) {
+        this.updatePasskey_();
+        $('bluetooth-pairing-passkey-display').hidden = false;
+        $('bluetooth-pairing-passkey-entry').hidden = true;
+        $('bluetooth-pair-device-connect-button').hidden = true;
+        if (this.device_.pairing == PAIRING.CONFIRM_PASSKEY) {
+          // Display 'Accept' and 'Reject' buttons when confirming a match
+          // between displayed passkeys.
+          $('bluetooth-pair-device-accept-button').hidden = false;
+          $('bluetooth-pair-device-reject-button').hidden = false;
+          $('bluetooth-pair-device-cancel-button').hidden = true;
+        } else {
+          // Only display the 'Cancel' button for when remote entering a
+          // passkey.
+          $('bluetooth-pair-device-accept-button').hidden = true;
+          $('bluetooth-pair-device-reject-button').hidden = true;
+          $('bluetooth-pair-device-cancel-button').hidden = false;
+        }
+      } else if (this.device_.pairing == PAIRING.ENTER_PASSKEY) {
+        // Display 'Connect' and 'Cancel' buttons when prompted to enter a
+        // passkey.
+        $('bluetooth-pairing-passkey-display').hidden = true;
+        $('bluetooth-pairing-passkey-entry').hidden = false;
+        $('bluetooth-pair-device-connect-button').hidden = false;
+        $('bluetooth-pair-device-cancel-button').hidden = false;
+      }
+      $('bluetooth-pair-device-connect-button').disabled =
+          $('bluetooth-passkey').value.length == 0;
+    },
+
+    /**
+     * Removes all children from an element.
+     * @param {!Element} element Target element to clear.
+     */
+    clearElement_: function(element) {
+      var child = element.firstChild;
+      while (child) {
+        element.removeChild(child);
+        child = element.firstChild;
+      }
+    },
+
+    /**
+     * Formats an element for displaying the passkey.
+     * @return {Element} Element containing the passkey.
+     */
+    updatePasskey_: function() {
+      var passkeyEl = $('bluetooth-pairing-passkey-display');
+      this.clearElement_(passkeyEl);
+      var key = String(this.device_.passkey);
+      var progress = this.device_.entered | 0;
+      for (var i = 0; i < key.length; i++) {
+        var keyEl = document.createElement('span');
+        keyEl.textContent = key.charAt(i);
+        keyEl.className = 'bluetooth-passkey-char';
+        if (i == progress - 1)
+          keyEl.classList.add('key-typed');
+        passkeyEl.appendChild(keyEl);
+      }
+      passkeyEl.hidden = false;
+    },
+  };
+
+  /**
+   * Configures the device pairing instructions and displays the pairing
+   * overlay.
+   * @param {Object} device Description of the Bluetooth device.
+   */
+  BluetoothPairing.showDialog = function(device) {
+    BluetoothPairing.getInstance().update(device);
+    OptionsPage.navigateToPage('bluetoothPairing');
+  };
+
+  // Export
+  return {
+    BluetoothPairing: BluetoothPairing
+  };
+});
diff --git a/chrome/browser/resources/options2/chromeos/system_options.html b/chrome/browser/resources/options2/chromeos/system_options.html
index cd7b7ce..97baec7 100644
--- a/chrome/browser/resources/options2/chromeos/system_options.html
+++ b/chrome/browser/resources/options2/chromeos/system_options.html
@@ -72,7 +72,8 @@
       </div>
     </section>
     <!-- By default, the bluetooth section is hidden.  It is only
-         visible if the command line flag --enable_bluetooth is set. -->
+         visible if the command line flag --enable_bluetooth is set
+         and a bluetooth adapter is discovered or emmulating ChromeOS. -->
     <section id="bluetooth-devices" hidden>
       <h3 i18n-content="bluetooth"></h3>
       <div id="bluetooth-options-div">
@@ -80,34 +81,11 @@
           <button id="enable-bluetooth" i18n-content="enableBluetooth" hidden>
           <button id="disable-bluetooth" i18n-content="disableBluetooth">
         </div>
-        <div id="no-bluetooth-devices-label"
-            i18n-content="noBluetoothDevicesFound">
-        </div>
-        <div id="bluetooth-device-list">
-          <!-- A list of connected devices is inserted here on page load. -->
-          <!-- The list of devices is updated asynchronously on clicking
-               'Find Devices'. -->
-        </div>
-        <!-- Template for items in list of Bluetooth devices -->
-        <div id="bluetooth-item-template" class="bluetooth-item" hidden>
-          <div class="bluetooth-item-text">
-            <div class="network-name-label"></div>
-            <div class="bluetooth-status">
-              <span class="network-status-label"></span>
-              <div class="inline-spinner" hidden></div>
-            </div>
-            <div class="bluetooth-instructions"></div>
-          </div>
-          <div class="bluetooth-button-group"></div>
-        </div>
-        <div id = "bluetooth-finder-container">
-          <button id="bluetooth-find-devices"
-              i18n-content="findBluetoothDevices"></button>
-          <div id="bluetooth-scanning-icon"
-              class="inline-spinner transparent"></div>
-          <span id="bluetooth-scanning-label" class="transparent"
-              i18n-content="bluetoothScanning"></span>
+        <div class="settings-list bluetooth-device-list" hidden>
+          <list id="bluetooth-paired-devices-list"></list>
         </div>
+        <button id="bluetooth-add-device" hidden
+            i18n-content="addBluetoothDevice"></button>
       </div>
     </section>
     <section>
@@ -137,4 +115,4 @@
       </div>
     </section>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/chrome/browser/resources/options2/chromeos/system_options.js b/chrome/browser/resources/options2/chromeos/system_options.js
index 04854df..ae26b9c 100644
--- a/chrome/browser/resources/options2/chromeos/system_options.js
+++ b/chrome/browser/resources/options2/chromeos/system_options.js
@@ -14,7 +14,6 @@ cr.define('options', function() {
    * Encapsulated handling of ChromeOS system options page.
    * @constructor
    */
-
   function SystemOptions() {
     OptionsPage.call(this, 'system', templateData.systemPageTabTitle,
                      'systemPage');
@@ -27,6 +26,12 @@ cr.define('options', function() {
     __proto__: options.OptionsPage.prototype,
 
     /**
+     * Flag indicating if currently scanning for Bluetooth devices.
+     * @type {boolean}
+     */
+    isScanning_: false,
+
+    /**
      * Initializes SystemOptions page.
      * Calls base class implementation to starts preference initialization.
      */
@@ -43,13 +48,13 @@ cr.define('options', function() {
           use_24hour_clock.disabled = true;
       }
 
-      options.system.bluetooth.BluetoothListElement.decorate(
-          $('bluetooth-device-list'));
+      options.system.bluetooth.BluetoothDeviceList.decorate(
+          $('bluetooth-paired-devices-list'));
 
-      // TODO(kevers): Populate list of connected bluetooth devices.
-      //               Set state of 'Enable bluetooth' checkbox.
-      $('bluetooth-find-devices').onclick = function(event) {
-        findBluetoothDevices_();
+      $('bluetooth-add-device').onclick = function(event) {
+        if (! this.isScanning_)
+          findBluetoothDevices_(true);
+        OptionsPage.navigateToPage('bluetooth');
       };
       $('enable-bluetooth').onclick = function(event) {
         chrome.send('bluetoothEnableChange', [Boolean(true)]);
@@ -90,36 +95,17 @@ cr.define('options', function() {
 
   /**
    * Scan for bluetooth devices.
+   * @param {boolean} reset Indicates if the list of unpaired devices should be
+   *     cleared.
    * @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);
-    }
+  function findBluetoothDevices_(reset) {
+    this.isScanning_ = true;
+    if (reset)
+      $('bluetooth-unpaired-devices-list').clear();
     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) {
-    if (visible)
-      $(id).classList.remove("transparent");
-    else
-      $(id).classList.add("transparent");
-  }
-
   //
   // Chrome callbacks
   //
@@ -147,20 +133,15 @@ cr.define('options', function() {
   SystemOptions.setBluetoothState = function(checked) {
     $('disable-bluetooth').hidden = !checked;
     $('enable-bluetooth').hidden = checked;
-    $('bluetooth-finder-container').hidden = !checked;
-    $('no-bluetooth-devices-label').hidden = !checked;
-    if (!checked) {
-      setVisibility_('bluetooth-scanning-label', false);
-      setVisibility_('bluetooth-scanning-icon', false);
-    }
+    $('bluetooth-paired-devices-list').parentNode.hidden = !checked;
+    $('bluetooth-add-device').hidden = !checked;
     // Flush list of previously discovered devices if bluetooth is turned off.
     if (!checked) {
-      var devices = $('bluetooth-device-list').childNodes;
-      for (var i = devices.length - 1; i >= 0; i--) {
-        var device = devices.item(i);
-        $('bluetooth-device-list').removeChild(device);
-      }
+      $('bluetooth-paired-devices-list').clear();
+      $('bluetooth-unpaired-devices-list').clear();
     }
+    if (checked && ! this.isScanning_)
+      findBluetoothDevices_(true);
   }
 
   /**
@@ -174,17 +155,29 @@ cr.define('options', function() {
    *     Decription of the bluetooth device.
    */
   SystemOptions.addBluetoothDevice = function(device) {
-    if ($('bluetooth-device-list').appendDevice(device))
-      $('no-bluetooth-devices-label').hidden = true;
+    if (device.paired) {
+      // Test to see if the device is currently in the unpaired list, in which
+      // case it should be removed from that list.
+      var index = $('bluetooth-unpaired-devices-list').find(device.address);
+      if (index != undefined)
+        $('bluetooth-unpaired-devices-list').deleteItemAtIndex(index);
+      $('bluetooth-paired-devices-list').appendDevice(device);
+    } else {
+      $('bluetooth-unpaired-devices-list').appendDevice(device);
+    }
+    // One device can be in the process of pairing.  If found, display
+    // the Bluetooth pairing overlay.
+    if (device.pairing)
+      BluetoothPairing.showDialog(device);
   };
 
   /**
-   * Hides the scanning label and icon that are used to indicate that a device
-   * search is in progress.
+   * Notification that a single pass of device discovery has completed.
    */
   SystemOptions.notifyBluetoothSearchComplete = function() {
-    setVisibility_('bluetooth-scanning-label', false);
-    setVisibility_('bluetooth-scanning-icon', false);
+    // TODO(kevers): Determine the fate of this method once continuous
+    // scanning is implemented in the Bluetooth code.
+    this.isScanning_ = false;
   };
 
   /**
diff --git a/chrome/browser/resources/options2/chromeos/system_options_page.css b/chrome/browser/resources/options2/chromeos/system_options_page.css
index 066d5b8..03010b3 100644
--- a/chrome/browser/resources/options2/chromeos/system_options_page.css
+++ b/chrome/browser/resources/options2/chromeos/system_options_page.css
@@ -26,140 +26,12 @@ html[dir=rtl] .pointer-sensitivity-more {
   display: -webkit-box;
 }
 
-#no-bluetooth-devices-label {
-  -webkit-margin-after: 5px;
-  -webkit-margin-before: 5px;
-  color: gray;
-}
-
-#bluetooth-finder-container,
-#bluetooth-scanning-status {
-  -webkit-box-orient: horizontal;
-  display: -webkit-box;
-  vertical-align: baseline;
-}
-
-#bluetooth-scanning-label,
-#bluetooth-scanning-icon {
-  -webkit-transition: 250ms opacity;
-}
-
-#bluetooth-scanning-label {
-  -webkit-margin-start: 5px;
-  color: gray;
-}
-
-#bluetooth-scanning-icon {
-  -webkit-margin-start: 10px;
-  vertical-align: middle;
-}
-
-#bluetooth-device-list {
-  display: table;
-  width: 100%;
-}
-
-#bluetooth-device-list > * {
-  display: table-row;
-}
-
-#bluetooth-device-list > * > * {
-  border-bottom: 4px solid rgba(255,255,255,1);
-  display: table-cell;
-}
-
-.bluetooth-item > * > button {
-  visibility: hidden;
-  width: 100%;
-}
-
-.bluetooth-item:first-child > * {
-  border-top: 4px solid rgba(255,255,255,1);
-}
-
-.bluetooth-item:hover > * > button,
-.bluetooth-item[connected] > * > button,
-.bluetooth-item[connecting] > * > button {
-  visibility: visible;
-}
-
-.bluetooth-item[connected] {
-  background-color: hsl(214, 91%, 89%);
-  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.8),
-                                            rgba(255, 255, 255, 0));
-  border-color: hsl(214, 91%, 65%);
-}
-
-.bluetooth-item[paired] {
-  color: gray;
-}
-
-.bluetooth-item:hover,
-.bluetooth-item[connecting] {
-  background-color: hsl(214, 91%, 97%);
-  border-color: hsl(214, 91%, 65%);
-}
-
-.bluetooth-item-text {
-  -webkit-padding-after: 3px;
-  -webkit-padding-before: 3px;
-  -webkit-padding-end: 5px;
-  -webkit-padding-start: 5px;
-  width: 100%;
-}
-
-.bluetooth-item-text > * > .inline-spinner {
-  -webkit-margin-start: 5px;
-  -webkit-transform: translateY(3px);
-}
-
-.bluetooth-instructions {
-  -webkit-margin-after: 5px;
-  -webkit-margin-before: 5px;
-  display: block;
-  line-height: 120%;
-}
-
-.bluetooth-remote-passkey {
-  -webkit-box-align: baseline;
-  -webkit-box-orient: horizontal;
-  display: -webkit-inline-box;
-  margin-bottom: 5px;
-  margin-top: 5px;
-}
-
-.bluetooth-confirm-passkey {
-  display: inline;
+#bluetooth-devices-label {
+  -webkit-margin-end: 8px;
+  -webkit-margin-start: 8px;
   font-weight: bold;
 }
 
-.bluetooth-passkey-char {
-  -webkit-margin-end: 3px;
-  -webkit-margin-start: 3px;
-  border: 1px solid black;
-  display: -webkit-box;
-  font-weight: bold;
-  padding: 2px;
-}
-
-.bluetooth-passkey-char:first-child {
-  -webkit-margin-start: 10px;
-}
-
-.bluetooth-passkey-char:last-child {
-  -webkit-margin-end: 10px;
-}
-
-.bluetooth-passkey-char.key-typed {
-  background-color: hsl(214, 91%, 50%);
-  color: white;
-}
-
-.bluetooth-passkey-field {
-  -webkit-margin-start: 10px;
-  width: 100px;
-}
-
 .bluetooth-button-group {
   -webkit-padding-end: 5px;
   vertical-align: middle;
diff --git a/chrome/browser/resources/options2/options.html b/chrome/browser/resources/options2/options.html
index e56e849..94ed0a4 100644
--- a/chrome/browser/resources/options2/options.html
+++ b/chrome/browser/resources/options2/options.html
@@ -48,6 +48,7 @@
   <link rel="stylesheet" href="chromeos/internet_options_page.css">
   <link rel="stylesheet" href="chromeos/proxy.css">
   <link rel="stylesheet" href="chromeos/system_options_page.css">
+  <link rel="stylesheet" herf="chromeos/bluetooth.css">
 </if>
 <if expr="pp_ifdef('chromeos') and pp_ifdef('use_virtual_keyboard')">
   <link rel="stylesheet" href="chromeos/virtual_keyboard.css">
@@ -90,6 +91,8 @@
   <include src="manage_profile_overlay.html">
   <include src="../sync_setup_overlay.html">
   <if expr="pp_ifdef('chromeos')">
+     <include src="chromeos/bluetooth_add_device_overlay.html">
+     <include src="chromeos/bluetooth_pair_device_overlay.html">
      <include
          src="chromeos/language_customize_modifier_keys_overlay.html">
      <include src="chromeos/internet_detail.html">
diff --git a/chrome/browser/resources/options2/options.js b/chrome/browser/resources/options2/options.js
index 3f28573..48925d9 100644
--- a/chrome/browser/resources/options2/options.js
+++ b/chrome/browser/resources/options2/options.js
@@ -192,6 +192,11 @@ function load() {
     OptionsPage.registerOverlay(languageModifierKeysOverlay,
                                 SystemOptions.getInstance(),
                                 [$('modifier-keys-button')]);
+    OptionsPage.registerOverlay(BluetoothOptions.getInstance(),
+                                SystemOptions.getInstance(),
+                                [$('bluetooth-add-device')]);
+    OptionsPage.registerOverlay(BluetoothPairing.getInstance(),
+                                SystemOptions.getInstance());
   }
 
   Preferences.getInstance().initialize();
diff --git a/chrome/browser/resources/options2/options_bundle.js b/chrome/browser/resources/options2/options_bundle.js
index 9254c5f..fc600e7 100644
--- a/chrome/browser/resources/options2/options_bundle.js
+++ b/chrome/browser/resources/options2/options_bundle.js
@@ -21,7 +21,9 @@
   <include src="chromeos/internet_options.js"></include>
   <include src="chromeos/internet_detail.js"></include>
   <include src="chromeos/system_options.js"></include>
-  <include src="chromeos/bluetooth_list_element.js"></include>
+  <include src="chromeos/bluetooth_device_list.js"></include>
+  <include src="chromeos/bluetooth_add_device_overlay.js"></include>
+  <include src="chromeos/bluetooth_pair_device_overlay.js"></include>
   <include src="chromeos/accounts_options.js"></include>
   <include src="chromeos/proxy_options.js"></include>
   <include src="chromeos/proxy_rules_list.js"></include>
@@ -35,6 +37,8 @@
   var InternetOptions = options.InternetOptions;
   var DetailsInternetPage = options.internet.DetailsInternetPage;
   var SystemOptions = options.SystemOptions;
+  var BluetoothOptions = options.BluetoothOptions;
+  var BluetoothPairing = options.BluetoothPairing;
 </if>
 <if expr="not pp_ifdef('win32') and not pp_ifdef('darwin')">
   <include src="certificate_tree.js"></include>
diff --git a/chrome/browser/ui/webui/options/chromeos/bluetooth_options_handler.cc b/chrome/browser/ui/webui/options/chromeos/bluetooth_options_handler.cc
index 0e194a2..fa88d07 100644
--- a/chrome/browser/ui/webui/options/chromeos/bluetooth_options_handler.cc
+++ b/chrome/browser/ui/webui/options/chromeos/bluetooth_options_handler.cc
@@ -62,23 +62,19 @@ void BluetoothOptionsHandler::GetLocalizedValues(
       l10n_util::GetStringUTF16(IDS_OPTIONS_SETTINGS_BLUETOOTH_DISABLE));
   localized_strings->SetString("enableBluetooth",
       l10n_util::GetStringUTF16(IDS_OPTIONS_SETTINGS_BLUETOOTH_ENABLE));
-  localized_strings->SetString("noBluetoothDevicesFound",
+  localized_strings->SetString("addBluetoothDevice",
+      l10n_util::GetStringUTF16(IDS_OPTIONS_SETTINGS_ADD_BLUETOOTH_DEVICE));
+  localized_strings->SetString("bluetoothAddDeviceTitle",
       l10n_util::GetStringUTF16(
-          IDS_OPTIONS_SETTINGS_NO_BLUETOOTH_DEVICES_FOUND));
+      IDS_OPTIONS_SETTINGS_BLUETOOTH_ADD_DEVICE_TITLE));
   localized_strings->SetString("findBluetoothDevices",
       l10n_util::GetStringUTF16(IDS_OPTIONS_SETTINGS_FIND_BLUETOOTH_DEVICES));
   localized_strings->SetString("bluetoothScanning",
       l10n_util::GetStringUTF16(IDS_OPTIONS_SETTINGS_BLUETOOTH_SCANNING));
   localized_strings->SetString("bluetoothDeviceConnected",
       l10n_util::GetStringUTF16(IDS_OPTIONS_SETTINGS_BLUETOOTH_CONNECTED));
-  localized_strings->SetString("bluetoothDeviceConnecting",
-      l10n_util::GetStringUTF16(IDS_OPTIONS_SETTINGS_BLUETOOTH_CONNECTING));
-  localized_strings->SetString("bluetoothDeviceNotPaired",
-      l10n_util::GetStringUTF16(IDS_OPTIONS_SETTINGS_BLUETOOTH_NOT_PAIRED));
-  localized_strings->SetString("bluetoothDevicePaired",
-      l10n_util::GetStringUTF16(IDS_OPTIONS_SETTINGS_BLUETOOTH_PAIRED));
-  localized_strings->SetString("bluetoothDeviceFailedPairing",
-      l10n_util::GetStringUTF16(IDS_OPTIONS_SETTINGS_BLUETOOTH_FAILED_PAIRING));
+  localized_strings->SetString("bluetoothDeviceNotConnected",
+      l10n_util::GetStringUTF16(IDS_OPTIONS_SETTINGS_BLUETOOTH_NOT_CONNECTED));
   localized_strings->SetString("bluetoothConnectDevice",
       l10n_util::GetStringUTF16(IDS_OPTIONS_SETTINGS_BLUETOOTH_CONNECT));
   localized_strings->SetString("bluetoothDisconnectDevice",
@@ -102,9 +98,6 @@ void BluetoothOptionsHandler::GetLocalizedValues(
   localized_strings->SetString("bluetoothRemotePasskey",
       l10n_util::GetStringUTF16(
       IDS_OPTIONS_SETTINGS_BLUETOOTH_REMOTE_PASSKEY_REQUEST));
-  localized_strings->SetString("bluetoothFailedPairingInstructions",
-      l10n_util::GetStringUTF16(
-      IDS_OPTIONS_SETTINGS_BLUETOOTH_FAILED_PAIRING_INSTRUCTIONS));
 }
 
 void BluetoothOptionsHandler::Initialize() {
@@ -257,11 +250,6 @@ void BluetoothOptionsHandler::RequestPasskey(
   SendDeviceNotification(device, &params);
 }
 
-void BluetoothOptionsHandler::ValidatePasskeyCallback(
-    const base::ListValue* args) {
-  // TODO(kevers): Implement me.
-}
-
 void BluetoothOptionsHandler::DefaultAdapterChanged(
     chromeos::BluetoothAdapter* adapter) {
   std::string old_default_adapter_id = default_adapter_id_;
@@ -338,14 +326,14 @@ void BluetoothOptionsHandler::GenerateFakeDeviceList() {
     "Fake Wireless Keyboard",
     "01-02-03-04-05-06",
     "input-keyboard",
-    true,
-    true,
+    false,
+    false,
     "");
   GenerateFakeDevice(
     "Fake Wireless Mouse",
     "02-03-04-05-06-01",
     "input-mouse",
-    true,
+    false,
     false,
     "");
   GenerateFakeDevice(
@@ -355,27 +343,6 @@ void BluetoothOptionsHandler::GenerateFakeDeviceList() {
     false,
     false,
     "");
-  GenerateFakeDevice(
-    "Fake Connecting Keyboard",
-    "04-05-06-01-02-03",
-    "input-keyboard",
-    false,
-    false,
-    "bluetoothRemotePasskey");
-  GenerateFakeDevice(
-    "Fake Connecting Phone",
-    "05-06-01-02-03-04",
-    "phone",
-    false,
-    false,
-    "bluetoothConfirmPasskey");
-  GenerateFakeDevice(
-    "Fake Connecting Headset",
-    "06-01-02-03-04-05",
-    "headset",
-    false,
-    false,
-    "bluetoothEnterPasskey");
   web_ui_->CallJavascriptFunction(
       "options.SystemOptions.notifyBluetoothSearchComplete");
 }
diff --git a/chrome/browser/ui/webui/options/chromeos/bluetooth_options_handler.h b/chrome/browser/ui/webui/options/chromeos/bluetooth_options_handler.h
index 2409f07..175d06c 100644
--- a/chrome/browser/ui/webui/options/chromeos/bluetooth_options_handler.h
+++ b/chrome/browser/ui/webui/options/chromeos/bluetooth_options_handler.h
@@ -83,10 +83,6 @@ class BluetoothOptionsHandler : public OptionsPageUIHandler,
   // |device| is the Bluetooth device being paired.
   void RequestPasskey(chromeos::BluetoothDevice* device);
 
-  // Callback to validate a user entered passkey.
-  // |args| is a list containing the device address and entered passkey.
-  void ValidatePasskeyCallback(const base::ListValue* args);
-
   // chromeos::BluetoothManager::Observer override.
   virtual void DefaultAdapterChanged(
       chromeos::BluetoothAdapter* adapter) OVERRIDE;
diff --git a/chrome/browser/ui/webui/options2/chromeos/bluetooth_options_handler2.cc b/chrome/browser/ui/webui/options2/chromeos/bluetooth_options_handler2.cc
index 5abef0c..f6554ab 100644
--- a/chrome/browser/ui/webui/options2/chromeos/bluetooth_options_handler2.cc
+++ b/chrome/browser/ui/webui/options2/chromeos/bluetooth_options_handler2.cc
@@ -63,23 +63,19 @@ void BluetoothOptionsHandler::GetLocalizedValues(
       l10n_util::GetStringUTF16(IDS_OPTIONS_SETTINGS_BLUETOOTH_DISABLE));
   localized_strings->SetString("enableBluetooth",
       l10n_util::GetStringUTF16(IDS_OPTIONS_SETTINGS_BLUETOOTH_ENABLE));
-  localized_strings->SetString("noBluetoothDevicesFound",
+  localized_strings->SetString("addBluetoothDevice",
+      l10n_util::GetStringUTF16(IDS_OPTIONS_SETTINGS_ADD_BLUETOOTH_DEVICE));
+  localized_strings->SetString("bluetoothAddDeviceTitle",
       l10n_util::GetStringUTF16(
-          IDS_OPTIONS_SETTINGS_NO_BLUETOOTH_DEVICES_FOUND));
+      IDS_OPTIONS_SETTINGS_BLUETOOTH_ADD_DEVICE_TITLE));
   localized_strings->SetString("findBluetoothDevices",
       l10n_util::GetStringUTF16(IDS_OPTIONS_SETTINGS_FIND_BLUETOOTH_DEVICES));
   localized_strings->SetString("bluetoothScanning",
       l10n_util::GetStringUTF16(IDS_OPTIONS_SETTINGS_BLUETOOTH_SCANNING));
   localized_strings->SetString("bluetoothDeviceConnected",
       l10n_util::GetStringUTF16(IDS_OPTIONS_SETTINGS_BLUETOOTH_CONNECTED));
-  localized_strings->SetString("bluetoothDeviceConnecting",
-      l10n_util::GetStringUTF16(IDS_OPTIONS_SETTINGS_BLUETOOTH_CONNECTING));
-  localized_strings->SetString("bluetoothDeviceNotPaired",
-      l10n_util::GetStringUTF16(IDS_OPTIONS_SETTINGS_BLUETOOTH_NOT_PAIRED));
-  localized_strings->SetString("bluetoothDevicePaired",
-      l10n_util::GetStringUTF16(IDS_OPTIONS_SETTINGS_BLUETOOTH_PAIRED));
-  localized_strings->SetString("bluetoothDeviceFailedPairing",
-      l10n_util::GetStringUTF16(IDS_OPTIONS_SETTINGS_BLUETOOTH_FAILED_PAIRING));
+  localized_strings->SetString("bluetoothDeviceNotConnected",
+      l10n_util::GetStringUTF16(IDS_OPTIONS_SETTINGS_BLUETOOTH_NOT_CONNECTED));
   localized_strings->SetString("bluetoothConnectDevice",
       l10n_util::GetStringUTF16(IDS_OPTIONS_SETTINGS_BLUETOOTH_CONNECT));
   localized_strings->SetString("bluetoothDisconnectDevice",
@@ -103,9 +99,6 @@ void BluetoothOptionsHandler::GetLocalizedValues(
   localized_strings->SetString("bluetoothRemotePasskey",
       l10n_util::GetStringUTF16(
       IDS_OPTIONS_SETTINGS_BLUETOOTH_REMOTE_PASSKEY_REQUEST));
-  localized_strings->SetString("bluetoothFailedPairingInstructions",
-      l10n_util::GetStringUTF16(
-      IDS_OPTIONS_SETTINGS_BLUETOOTH_FAILED_PAIRING_INSTRUCTIONS));
 }
 
 void BluetoothOptionsHandler::Initialize() {
@@ -258,11 +251,6 @@ void BluetoothOptionsHandler::RequestPasskey(
   SendDeviceNotification(device, &params);
 }
 
-void BluetoothOptionsHandler::ValidatePasskeyCallback(
-    const base::ListValue* args) {
-  // TODO(kevers): Implement me.
-}
-
 void BluetoothOptionsHandler::DefaultAdapterChanged(
     chromeos::BluetoothAdapter* adapter) {
   std::string old_default_adapter_id = default_adapter_id_;
@@ -339,14 +327,14 @@ void BluetoothOptionsHandler::GenerateFakeDeviceList() {
     "Fake Wireless Keyboard",
     "01-02-03-04-05-06",
     "input-keyboard",
-    true,
-    true,
+    false,
+    false,
     "");
   GenerateFakeDevice(
     "Fake Wireless Mouse",
     "02-03-04-05-06-01",
     "input-mouse",
-    true,
+    false,
     false,
     "");
   GenerateFakeDevice(
@@ -356,27 +344,6 @@ void BluetoothOptionsHandler::GenerateFakeDeviceList() {
     false,
     false,
     "");
-  GenerateFakeDevice(
-    "Fake Connecting Keyboard",
-    "04-05-06-01-02-03",
-    "input-keyboard",
-    false,
-    false,
-    "bluetoothRemotePasskey");
-  GenerateFakeDevice(
-    "Fake Connecting Phone",
-    "05-06-01-02-03-04",
-    "phone",
-    false,
-    false,
-    "bluetoothConfirmPasskey");
-  GenerateFakeDevice(
-    "Fake Connecting Headset",
-    "06-01-02-03-04-05",
-    "headset",
-    false,
-    false,
-    "bluetoothEnterPasskey");
   web_ui_->CallJavascriptFunction(
       "options.SystemOptions.notifyBluetoothSearchComplete");
 }
diff --git a/chrome/browser/ui/webui/options2/chromeos/bluetooth_options_handler2.h b/chrome/browser/ui/webui/options2/chromeos/bluetooth_options_handler2.h
index 27badb8..0591380 100644
--- a/chrome/browser/ui/webui/options2/chromeos/bluetooth_options_handler2.h
+++ b/chrome/browser/ui/webui/options2/chromeos/bluetooth_options_handler2.h
@@ -84,10 +84,6 @@ class BluetoothOptionsHandler : public ::options2::OptionsPageUIHandler,
   // |device| is the Bluetooth device being paired.
   void RequestPasskey(chromeos::BluetoothDevice* device);
 
-  // Callback to validate a user entered passkey.
-  // |args| is a list containing the device address and entered passkey.
-  void ValidatePasskeyCallback(const base::ListValue* args);
-
   // chromeos::BluetoothManager::Observer override.
   virtual void DefaultAdapterChanged(
       chromeos::BluetoothAdapter* adapter) OVERRIDE;