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

   1 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 cr.define('options', function() {
   6   /** @const */ var Page = cr.ui.pageManager.Page;
   7   /** @const */ var PageManager = cr.ui.pageManager.PageManager;
   8
   9   /**
  10    * Enumeration of possible states during pairing.  The value associated with
  11    * each state maps to a localized string in the global variable
  12    * |loadTimeData|.
  13    * @enum {string}
  14    */
  15   var PAIRING = {
  16     STARTUP: 'bluetoothStartConnecting',
  17     ENTER_PIN_CODE: 'bluetoothEnterPinCode',
  18     ENTER_PASSKEY: 'bluetoothEnterPasskey',
  19     REMOTE_PIN_CODE: 'bluetoothRemotePinCode',
  20     REMOTE_PASSKEY: 'bluetoothRemotePasskey',
  21     CONFIRM_PASSKEY: 'bluetoothConfirmPasskey',
  22     CONNECT_FAILED: 'bluetoothConnectFailed',
  23     CANCELED: 'bluetoothPairingCanceled',
  24     DISMISSED: 'bluetoothPairingDismissed', // pairing dismissed(succeeded or
  25                                             // canceled).
  26   };
  27
  28   /**
  29    * List of IDs for conditionally visible elements in the dialog.
  30    * @type {Array<string>}
  31    * @const
  32    */
  33   var ELEMENTS = ['bluetooth-pairing-passkey-display',
  34                   'bluetooth-pairing-passkey-entry',
  35                   'bluetooth-pairing-pincode-entry',
  36                   'bluetooth-pair-device-connect-button',
  37                   'bluetooth-pair-device-cancel-button',
  38                   'bluetooth-pair-device-accept-button',
  39                   'bluetooth-pair-device-reject-button',
  40                   'bluetooth-pair-device-dismiss-button'];
  41
  42   /**
  43    * Encapsulated handling of the Bluetooth device pairing page.
  44    * @constructor
  45    * @extends {cr.ui.pageManager.Page}
  46    */
  47   function BluetoothPairing() {
  48     Page.call(this, 'bluetoothPairing',
  49               loadTimeData.getString('bluetoothOptionsPageTabTitle'),
  50               'bluetooth-pairing');
  51   }
  52
  53   cr.addSingletonGetter(BluetoothPairing);
  54
  55   BluetoothPairing.prototype = {
  56     __proto__: Page.prototype,
  57
  58     /**
  59      * Description of the bluetooth device.
  60      * @type {?BluetoothDevice}
  61      * @private
  62      */
  63     device_: null,
  64
  65     /**
  66      * Can the dialog be programmatically dismissed.
  67      * @type {boolean}
  68      */
  69     dismissible_: true,
  70
  71     /** @override */
  72     initializePage: function() {
  73       Page.prototype.initializePage.call(this);
  74       var self = this;
  75       $('bluetooth-pair-device-cancel-button').onclick = function() {
  76         PageManager.closeOverlay();
  77       };
  78       $('bluetooth-pair-device-reject-button').onclick = function() {
  79         chrome.send('updateBluetoothDevice',
  80                     [self.device_.address, 'reject']);
  81         self.device_.pairing = PAIRING.DISMISSED;
  82         PageManager.closeOverlay();
  83       };
  84       $('bluetooth-pair-device-connect-button').onclick = function() {
  85         var args = [self.device_.address, 'connect'];
  86         var passkey = self.device_.passkey;
  87         if (passkey)
  88           args.push(String(passkey));
  89         else if (!$('bluetooth-pairing-passkey-entry').hidden)
  90           args.push($('bluetooth-passkey').value);
  91         else if (!$('bluetooth-pairing-pincode-entry').hidden)
  92           args.push($('bluetooth-pincode').value);
  93         chrome.send('updateBluetoothDevice', args);
  94         // Prevent sending a 'connect' command twice.
  95         $('bluetooth-pair-device-connect-button').disabled = true;
  96       };
  97       $('bluetooth-pair-device-accept-button').onclick = function() {
  98         chrome.send('updateBluetoothDevice',
  99                     [self.device_.address, 'accept']);
 100         // Prevent sending a 'accept' command twice.
 101         $('bluetooth-pair-device-accept-button').disabled = true;
 102       };
 103       $('bluetooth-pair-device-dismiss-button').onclick = function() {
 104         PageManager.closeOverlay();
 105       };
 106       $('bluetooth-passkey').oninput = function() {
 107         var inputField = $('bluetooth-passkey');
 108         var value = inputField.value;
 109         // Note that using <input type="number"> is insufficient to restrict
 110         // the input as it allows negative numbers and does not limit the
 111         // number of charactes typed even if a range is set.  Furthermore,
 112         // it sometimes produces strange repaint artifacts.
 113         var filtered = value.replace(/[^0-9]/g, '');
 114         if (filtered != value)
 115           inputField.value = filtered;
 116         $('bluetooth-pair-device-connect-button').disabled =
 117             inputField.value.length == 0;
 118       };
 119       $('bluetooth-pincode').oninput = function() {
 120         $('bluetooth-pair-device-connect-button').disabled =
 121             $('bluetooth-pincode').value.length == 0;
 122       };
 123       $('bluetooth-passkey').addEventListener('keydown',
 124           this.keyDownEventHandler_.bind(this));
 125       $('bluetooth-pincode').addEventListener('keydown',
 126           this.keyDownEventHandler_.bind(this));
 127     },
 128
 129     /** @override */
 130     didClosePage: function() {
 131       if (this.device_.pairing != PAIRING.DISMISSED &&
 132           this.device_.pairing != PAIRING.CONNECT_FAILED) {
 133         this.device_.pairing = PAIRING.CANCELED;
 134         chrome.send('updateBluetoothDevice',
 135                     [this.device_.address, 'cancel']);
 136       }
 137     },
 138
 139     /**
 140      * Override to prevent showing the overlay if the Bluetooth device details
 141      * have not been specified.  Prevents showing an empty dialog if the user
 142      * quits and restarts Chrome while in the process of pairing with a device.
 143      * @return {boolean} True if the overlay can be displayed.
 144      */
 145     canShowPage: function() {
 146       return !!(this.device_ && this.device_.address && this.device_.pairing);
 147     },
 148
 149     /**
 150      * Sets input focus on the passkey or pincode field if appropriate.
 151      */
 152     didShowPage: function() {
 153       if (!$('bluetooth-pincode').hidden)
 154         $('bluetooth-pincode').focus();
 155       else if (!$('bluetooth-passkey').hidden)
 156         $('bluetooth-passkey').focus();
 157     },
 158
 159     /**
 160      * Configures the overlay for pairing a device.
 161      * @param {Object} device Description of the bluetooth device.
 162      */
 163     update: function(device) {
 164       this.device_ = /** @type {BluetoothDevice} */({});
 165       for (var key in device)
 166         this.device_[key] = device[key];
 167       // Update the pairing instructions.
 168       var instructionsEl = assert($('bluetooth-pairing-instructions'));
 169       this.clearElement_(instructionsEl);
 170       this.dismissible_ = ('dismissible' in device) ?
 171         device.dismissible : true;
 172
 173       var message = loadTimeData.getString(device.pairing);
 174       message = message.replace('%1', this.device_.name);
 175       instructionsEl.textContent = message;
 176
 177       // Update visibility of dialog elements.
 178       if (this.device_.passkey) {
 179         this.updatePasskey_(String(this.device_.passkey));
 180         if (this.device_.pairing == PAIRING.CONFIRM_PASSKEY) {
 181           // Confirming a match between displayed passkeys.
 182           this.displayElements_(['bluetooth-pairing-passkey-display',
 183                                  'bluetooth-pair-device-accept-button',
 184                                  'bluetooth-pair-device-reject-button']);
 185           $('bluetooth-pair-device-accept-button').disabled = false;
 186         } else {
 187           // Remote entering a passkey.
 188           this.displayElements_(['bluetooth-pairing-passkey-display',
 189                                  'bluetooth-pair-device-cancel-button']);
 190         }
 191       } else if (this.device_.pincode) {
 192         this.updatePasskey_(String(this.device_.pincode));
 193         this.displayElements_(['bluetooth-pairing-passkey-display',
 194                                'bluetooth-pair-device-cancel-button']);
 195       } else if (this.device_.pairing == PAIRING.ENTER_PIN_CODE) {
 196         // Prompting the user to enter a PIN code.
 197         this.displayElements_(['bluetooth-pairing-pincode-entry',
 198                                'bluetooth-pair-device-connect-button',
 199                                'bluetooth-pair-device-cancel-button']);
 200         $('bluetooth-pincode').value = '';
 201       } else if (this.device_.pairing == PAIRING.ENTER_PASSKEY) {
 202         // Prompting the user to enter a passkey.
 203         this.displayElements_(['bluetooth-pairing-passkey-entry',
 204                                'bluetooth-pair-device-connect-button',
 205                                'bluetooth-pair-device-cancel-button']);
 206         $('bluetooth-passkey').value = '';
 207       } else if (this.device_.pairing == PAIRING.STARTUP) {
 208         // Starting the pairing process.
 209         this.displayElements_(['bluetooth-pair-device-cancel-button']);
 210       } else {
 211         // Displaying an error message.
 212         this.displayElements_(['bluetooth-pair-device-dismiss-button']);
 213       }
 214       // User is required to enter a passkey or pincode before the connect
 215       // button can be enabled.  The 'oninput' methods for the input fields
 216       // determine when the connect button becomes active.
 217       $('bluetooth-pair-device-connect-button').disabled = true;
 218     },
 219
 220     /**
 221      * Handles the ENTER key for the passkey or pincode entry field.
 222      * @param {Event} event A keydown event.
 223      * @private
 224      */
 225     keyDownEventHandler_: function(event) {
 226       /** @const */ var ENTER_KEY_CODE = 13;
 227       if (event.keyCode == ENTER_KEY_CODE) {
 228         var button = $('bluetooth-pair-device-connect-button');
 229         if (!button.hidden)
 230           button.click();
 231       }
 232     },
 233
 234     /**
 235      * Updates the visibility of elements in the dialog.
 236      * @param {Array<string>} list List of conditionally visible elements that
 237      *     are to be made visible.
 238      * @private
 239      */
 240     displayElements_: function(list) {
 241       var enabled = {};
 242       for (var i = 0; i < list.length; i++) {
 243         var key = list[i];
 244         enabled[key] = true;
 245       }
 246       for (var i = 0; i < ELEMENTS.length; i++) {
 247         var key = ELEMENTS[i];
 248         $(key).hidden = !enabled[key];
 249       }
 250     },
 251
 252     /**
 253      * Removes all children from an element.
 254      * @param {!Element} element Target element to clear.
 255      */
 256     clearElement_: function(element) {
 257       var child = element.firstChild;
 258       while (child) {
 259         element.removeChild(child);
 260         child = element.firstChild;
 261       }
 262     },
 263
 264     /**
 265      * Formats an element for displaying the passkey or PIN code.
 266      * @param {string} key Passkey or PIN to display.
 267      */
 268     updatePasskey_: function(key) {
 269       var passkeyEl = assert($('bluetooth-pairing-passkey-display'));
 270       var keyClass = (this.device_.pairing == PAIRING.REMOTE_PASSKEY ||
 271                       this.device_.pairing == PAIRING.REMOTE_PIN_CODE) ?
 272           'bluetooth-keyboard-button' : 'bluetooth-passkey-char';
 273       this.clearElement_(passkeyEl);
 274       // Passkey should always have 6 digits.
 275       key = '000000'.substring(0, 6 - key.length) + key;
 276       var progress = this.device_.entered;
 277       for (var i = 0; i < key.length; i++) {
 278         var keyEl = document.createElement('span');
 279         keyEl.textContent = key.charAt(i);
 280         keyEl.className = keyClass;
 281         if (progress != undefined) {
 282           if (i < progress)
 283             keyEl.classList.add('key-typed');
 284           else if (i == progress)
 285             keyEl.classList.add('key-next');
 286           else
 287             keyEl.classList.add('key-untyped');
 288         }
 289         passkeyEl.appendChild(keyEl);
 290       }
 291       if (this.device_.pairing == PAIRING.REMOTE_PASSKEY ||
 292           this.device_.pairing == PAIRING.REMOTE_PIN_CODE) {
 293         // Add enter key.
 294         var label = loadTimeData.getString('bluetoothEnterKey');
 295         var keyEl = document.createElement('span');
 296         keyEl.textContent = label;
 297         keyEl.className = keyClass;
 298         keyEl.id = 'bluetooth-enter-key';
 299         if (progress != undefined) {
 300           if (progress > key.length)
 301             keyEl.classList.add('key-typed');
 302           else if (progress == key.length)
 303             keyEl.classList.add('key-next');
 304           else
 305             keyEl.classList.add('key-untyped');
 306         }
 307         passkeyEl.appendChild(keyEl);
 308       }
 309       passkeyEl.hidden = false;
 310     },
 311   };
 312
 313   /**
 314    * Configures the device pairing instructions and displays the pairing
 315    * overlay.
 316    * @param {Object} device Description of the Bluetooth device.
 317    */
 318   BluetoothPairing.showDialog = function(device) {
 319     BluetoothPairing.getInstance().update(device);
 320     PageManager.showPageByName('bluetoothPairing', false);
 321   };
 322
 323   /**
 324    * Displays a message from the Bluetooth adapter.
 325    * @param {{message: string, address: string}} data Data for constructing the
 326    *     message. |data.message| is the name of message to show. |data.address|
 327    *     is the device address.
 328    */
 329   BluetoothPairing.showMessage = function(data) {
 330     var name = data.address;
 331     if (name.length == 0)
 332       return;
 333     var dialog = BluetoothPairing.getInstance();
 334     if (dialog.device_ && name == dialog.device_.address &&
 335         dialog.device_.pairing == PAIRING.CANCELED) {
 336       // Do not show any error message after cancelation of the pairing.
 337       return;
 338     }
 339
 340     var list = $('bluetooth-paired-devices-list');
 341     if (list) {
 342       var index = list.find(name);
 343       if (index == undefined) {
 344         list = $('bluetooth-unpaired-devices-list');
 345         index = list.find(name);
 346       }
 347       if (index != undefined) {
 348         var entry = list.dataModel.item(index);
 349         if (entry && entry.name)
 350           name = entry.name;
 351       }
 352     }
 353     BluetoothPairing.showDialog({name: name,
 354                                  address: data.address,
 355                                  pairing: data.message,
 356                                  dismissible: false});
 357   };
 358
 359   /**
 360    * Closes the Bluetooth pairing dialog.
 361    */
 362   BluetoothPairing.dismissDialog = function() {
 363     var overlay = PageManager.getTopmostVisiblePage();
 364     var dialog = BluetoothPairing.getInstance();
 365     if (overlay == dialog && dialog.dismissible_) {
 366       dialog.device_.pairing = PAIRING.DISMISSED;
 367       PageManager.closeOverlay();
 368     }
 369   };
 370
 371   // Export
 372   return {
 373     BluetoothPairing: BluetoothPairing
 374   };
 375 });