chrome/browser/resources/chromeos/login/oobe_screen_hid_detection.js

   1 // Copyright 2014 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 /**
   6  * @fileoverview Oobe HID detection screen implementation.
   7  */
   8
   9 login.createScreen('HIDDetectionScreen', 'hid-detection', function() {
  10   var CONTEXT_KEY_KEYBOARD_STATE = 'keyboard-state';
  11   var CONTEXT_KEY_MOUSE_STATE = 'mouse-state';
  12   var CONTEXT_KEY_KEYBOARD_PINCODE = 'keyboard-pincode';
  13   var CONTEXT_KEY_KEYBOARD_ENTERED_PART_EXPECTED = 'num-keys-entered-expected';
  14   var CONTEXT_KEY_KEYBOARD_ENTERED_PART_PINCODE = 'num-keys-entered-pincode';
  15   var CONTEXT_KEY_MOUSE_DEVICE_NAME = 'mouse-device-name';
  16   var CONTEXT_KEY_KEYBOARD_DEVICE_NAME = 'keyboard-device-name';
  17   var CONTEXT_KEY_KEYBOARD_LABEL = 'keyboard-device-label';
  18   var CONTEXT_KEY_CONTINUE_BUTTON_ENABLED = 'continue-button-enabled';
  19
  20   return {
  21
  22   /**
  23    * Enumeration of possible states during pairing.  The value associated with
  24    * each state maps to a localized string in the global variable
  25    * |loadTimeData|.
  26    * @enum {string}
  27    */
  28    PAIRING: {
  29      STARTUP: 'bluetoothStartConnecting',
  30      REMOTE_PIN_CODE: 'bluetoothRemotePinCode',
  31      CONNECT_FAILED: 'bluetoothConnectFailed',
  32      CANCELED: 'bluetoothPairingCanceled',
  33      // Pairing dismissed (succeeded or canceled).
  34      DISMISSED: 'bluetoothPairingDismissed'
  35    },
  36
  37    // Enumeration of possible connection states of a device.
  38    CONNECTION: {
  39      SEARCHING: 'searching',
  40      CONNECTED: 'connected',
  41      PAIRING: 'pairing',
  42      PAIRED: 'paired',
  43      // Special info state.
  44      UPDATE: 'update'
  45    },
  46
  47    // Possible ids of device blocks.
  48    BLOCK: {
  49      MOUSE: 'hid-mouse-block',
  50      KEYBOARD: 'hid-keyboard-block'
  51    },
  52
  53     /**
  54      * Button to move to usual OOBE flow after detection.
  55      * @private
  56      */
  57     continueButton_: null,
  58
  59     /** @override */
  60     decorate: function() {
  61       var self = this;
  62
  63       this.context.addObserver(
  64           CONTEXT_KEY_MOUSE_STATE,
  65           function(stateId) {
  66             if (stateId === undefined)
  67               return;
  68             self.setDeviceBlockState_('hid-mouse-block', stateId);
  69           }
  70       );
  71       this.context.addObserver(
  72         CONTEXT_KEY_KEYBOARD_STATE,
  73         function(stateId) {
  74           if (stateId === undefined)
  75             return;
  76           self.setDeviceBlockState_('hid-keyboard-block', stateId);
  77           if (stateId == self.CONNECTION.PAIRED) {
  78             $('hid-keyboard-label-paired').textContent = self.context.get(
  79                 CONTEXT_KEY_KEYBOARD_LABEL, '');
  80           } else if (stateId == self.CONNECTION.PAIRING) {
  81             $('hid-keyboard-label-pairing').textContent = self.context.get(
  82                 CONTEXT_KEY_KEYBOARD_LABEL, '');
  83           } else if (stateId == self.CONNECTION.CONNECTED) {
  84           }
  85         }
  86       );
  87       this.context.addObserver(
  88         CONTEXT_KEY_KEYBOARD_PINCODE,
  89         function(pincode) {
  90           self.setPincodeKeysState_();
  91           if (!pincode) {
  92             $('hid-keyboard-pincode').classList.remove('show-pincode');
  93             return;
  94           }
  95           if (self.context.get(CONTEXT_KEY_KEYBOARD_STATE, '') !=
  96               self.CONNECTION.PAIRING) {
  97             return;
  98           }
  99           $('hid-keyboard-pincode').classList.add('show-pincode');
 100           for (var i = 0, len = pincode.length; i < len; i++) {
 101             var pincodeSymbol = $('hid-keyboard-pincode-sym-' + (i + 1));
 102             pincodeSymbol.textContent = pincode[i];
 103           }
 104           announceAccessibleMessage(
 105             self.context.get(CONTEXT_KEY_KEYBOARD_LABEL, '') + ' ' + pincode +
 106             ' ' + loadTimeData.getString('hidDetectionBTEnterKey'));
 107         }
 108       );
 109       this.context.addObserver(
 110         CONTEXT_KEY_KEYBOARD_ENTERED_PART_EXPECTED,
 111         function(entered_part_expected) {
 112           if (self.context.get(CONTEXT_KEY_KEYBOARD_STATE, '') != 'pairing')
 113             return;
 114           self.setPincodeKeysState_();
 115         }
 116       );
 117       this.context.addObserver(
 118         CONTEXT_KEY_KEYBOARD_ENTERED_PART_PINCODE,
 119         function(entered_part) {
 120           if (self.context.get(CONTEXT_KEY_KEYBOARD_STATE, '') !=
 121               self.CONNECTION.PAIRING) {
 122             return;
 123           }
 124           self.setPincodeKeysState_();
 125         }
 126       );
 127       this.context.addObserver(
 128         CONTEXT_KEY_CONTINUE_BUTTON_ENABLED,
 129         function(enabled) {
 130           $('hid-continue-button').disabled = !enabled;
 131         }
 132       );
 133     },
 134
 135     /**
 136      * Buttons in oobe wizard's button strip.
 137      * @type {array} Array of Buttons.
 138      */
 139     get buttons() {
 140       var buttons = [];
 141       var continueButton = this.ownerDocument.createElement('button');
 142       continueButton.id = 'hid-continue-button';
 143       continueButton.textContent = loadTimeData.getString(
 144           'hidDetectionContinue');
 145       continueButton.addEventListener('click', function(e) {
 146         chrome.send('HIDDetectionOnContinue');
 147         e.stopPropagation();
 148       });
 149       buttons.push(continueButton);
 150
 151       return buttons;
 152     },
 153
 154     /**
 155      * Returns a control which should receive an initial focus.
 156      */
 157     get defaultControl() {
 158       return $('hid-continue-button');
 159     },
 160
 161     /**
 162      * Sets a device-block css class to reflect device state of searching,
 163      * connected, pairing or paired (for BT devices).
 164      * @param {blockId} id one of keys of this.BLOCK dict.
 165      * @param {state} one of keys of this.CONNECTION dict.
 166      * @private
 167      */
 168     setDeviceBlockState_: function(blockId, state) {
 169       if (state == 'update')
 170         return;
 171       var deviceBlock = $(blockId);
 172       for (var key in this.CONNECTION) {
 173         var stateCase = this.CONNECTION[key];
 174         deviceBlock.classList.toggle(stateCase, stateCase == state);
 175       }
 176     },
 177
 178     /**
 179      * Sets state for mouse-block.
 180      * @param {state} one of keys of this.CONNECTION dict.
 181      */
 182     setPointingDeviceState: function(state) {
 183       if (state === undefined)
 184         return;
 185       this.setDeviceBlockState_(this.BLOCK.MOUSE, state);
 186     },
 187
 188     /**
 189      * Sets state for pincode key elements.
 190      */
 191     setPincodeKeysState_: function() {
 192       var entered = this.context.get(
 193           CONTEXT_KEY_KEYBOARD_ENTERED_PART_PINCODE, 0);
 194       // whether the functionality of getting num of entered keys is available.
 195       var expected = this.context.get(
 196           CONTEXT_KEY_KEYBOARD_ENTERED_PART_EXPECTED, false);
 197       var pincodeLength = 7; // including enter-key
 198       for (var i = 0; i < pincodeLength; i++) {
 199         var pincodeSymbol = $('hid-keyboard-pincode-sym-' + (i + 1));
 200         pincodeSymbol.classList.toggle('key-typed', i < entered && expected);
 201         pincodeSymbol.classList.toggle('key-untyped', i > entered && expected);
 202         pincodeSymbol.classList.toggle('key-next', i == entered && expected);
 203       }
 204     },
 205
 206      /*
 207      * Event handler that is invoked just before the screen in shown.
 208      * @param {Object} data Screen init payload.
 209      */
 210     onBeforeShow: function(data) {
 211       this.setDeviceBlockState_('hid-mouse-block', this.CONNECTION.SEARCHING);
 212       this.setDeviceBlockState_('hid-keyboard-block',
 213                                 this.CONNECTION.SEARCHING);
 214     },
 215   };
 216 });