Fixed Bluetooth keyboard pairing pincode visibility issue.

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

 // Copyright 2014 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.
 
 /**
  * @fileoverview Oobe HID detection screen implementation.
  */
 
 login.createScreen('HIDDetectionScreen', 'hid-detection', function() {
   var CONTEXT_KEY_KEYBOARD_STATE = 'keyboard-state';
   var CONTEXT_KEY_MOUSE_STATE = 'mouse-state';
   var CONTEXT_KEY_KEYBOARD_PINCODE = 'keyboard-pincode';
   var CONTEXT_KEY_KEYBOARD_ENTERED_PART_EXPECTED = 'num-keys-entered-expected';
   var CONTEXT_KEY_KEYBOARD_ENTERED_PART_PINCODE = 'num-keys-entered-pincode';
   var CONTEXT_KEY_MOUSE_DEVICE_NAME = 'mouse-device-name';
   var CONTEXT_KEY_KEYBOARD_DEVICE_NAME = 'keyboard-device-name';
   var CONTEXT_KEY_KEYBOARD_LABEL = 'keyboard-device-label';
   var CONTEXT_KEY_CONTINUE_BUTTON_ENABLED = 'continue-button-enabled';
 
+  var PINCODE_LENGTH = 6;
+
   return {
 
   /**
    * Enumeration of possible states during pairing.  The value associated with
    * each state maps to a localized string in the global variable
    * |loadTimeData|.
    * @enum {string}
    */
    PAIRING: {
      STARTUP: 'bluetoothStartConnecting',
@@ skipping 34 matching lines @@
           CONTEXT_KEY_MOUSE_STATE,
           function(stateId) {
             if (stateId === undefined)
               return;
             self.setDeviceBlockState_('hid-mouse-block', stateId);
           }
       );
       this.context.addObserver(
         CONTEXT_KEY_KEYBOARD_STATE,
         function(stateId) {
+          self.updatePincodeKeysState_();
           if (stateId === undefined)
             return;
           self.setDeviceBlockState_('hid-keyboard-block', stateId);
           if (stateId == self.CONNECTION.PAIRED) {
             $('hid-keyboard-label-paired').textContent = self.context.get(
                 CONTEXT_KEY_KEYBOARD_LABEL, '');
           } else if (stateId == self.CONNECTION.PAIRING) {
             $('hid-keyboard-label-pairing').textContent = self.context.get(
                 CONTEXT_KEY_KEYBOARD_LABEL, '');
-          } else if (stateId == self.CONNECTION.CONNECTED) {
           }
         }
       );
       this.context.addObserver(
         CONTEXT_KEY_KEYBOARD_PINCODE,
-        function(pincode) {
-          self.setPincodeKeysState_();
-          if (!pincode) {
-            $('hid-keyboard-pincode').classList.remove('show-pincode');
-            return;
-          }
-          if (self.context.get(CONTEXT_KEY_KEYBOARD_STATE, '') !=
-              self.CONNECTION.PAIRING) {
-            return;
-          }
-          $('hid-keyboard-pincode').classList.add('show-pincode');
-          for (var i = 0, len = pincode.length; i < len; i++) {
-            var pincodeSymbol = $('hid-keyboard-pincode-sym-' + (i + 1));
-            pincodeSymbol.textContent = pincode[i];
-          }
-          announceAccessibleMessage(
-            self.context.get(CONTEXT_KEY_KEYBOARD_LABEL, '') + ' ' + pincode +
-            ' ' + loadTimeData.getString('hidDetectionBTEnterKey'));
-        }
-      );
+        this.updatePincodeKeysState_.bind(this));
       this.context.addObserver(
         CONTEXT_KEY_KEYBOARD_ENTERED_PART_EXPECTED,
-        function(entered_part_expected) {
-          if (self.context.get(CONTEXT_KEY_KEYBOARD_STATE, '') != 'pairing')
-            return;
-          self.setPincodeKeysState_();
-        }
-      );
+        this.updatePincodeKeysState_.bind(this));
       this.context.addObserver(
         CONTEXT_KEY_KEYBOARD_ENTERED_PART_PINCODE,
-        function(entered_part) {
-          if (self.context.get(CONTEXT_KEY_KEYBOARD_STATE, '') !=
-              self.CONNECTION.PAIRING) {
-            return;
-          }
-          self.setPincodeKeysState_();
-        }
-      );
+        this.updatePincodeKeysState_.bind(this));
       this.context.addObserver(
         CONTEXT_KEY_CONTINUE_BUTTON_ENABLED,
         function(enabled) {
           $('hid-continue-button').disabled = !enabled;
         }
       );
     },
 
     /**
      * Buttons in oobe wizard's button strip.
@@ skipping 42 matching lines @@
      * Sets state for mouse-block.
      * @param {state} one of keys of this.CONNECTION dict.
      */
     setPointingDeviceState: function(state) {
       if (state === undefined)
         return;
       this.setDeviceBlockState_(this.BLOCK.MOUSE, state);
     },
 
     /**
-     * Sets state for pincode key elements.
+     * Updates state for pincode key elements based on context state.
      */
-    setPincodeKeysState_: function() {
+    updatePincodeKeysState_: function() {
+      var pincodeKeys = $('hid-keyboard-pincode');
+      var pincode = this.context.get(CONTEXT_KEY_KEYBOARD_PINCODE, '');
+      var state = this.context.get(CONTEXT_KEY_KEYBOARD_STATE, '');
+
+      if (!pincode || state !== this.CONNECTION.PAIRING) {
+        pincodeKeys.hidden = true;
+        return;
+      }
+
+      if (pincodeKeys.hidden) {
+        pincodeKeys.hidden = false;
+        announceAccessibleMessage(
+            this.context.get(CONTEXT_KEY_KEYBOARD_LABEL, '') + ' ' + pincode +
+            ' ' + loadTimeData.getString('hidDetectionBTEnterKey'));
+      }
+
       var entered = this.context.get(
           CONTEXT_KEY_KEYBOARD_ENTERED_PART_PINCODE, 0);
+
       // whether the functionality of getting num of entered keys is available.
       var expected = this.context.get(
           CONTEXT_KEY_KEYBOARD_ENTERED_PART_EXPECTED, false);
-      var pincodeLength = 7; // including enter-key
-      for (var i = 0; i < pincodeLength; i++) {
+
+      if (pincode.length != PINCODE_LENGTH)
+        console.error('Wrong pincode length');
+
+      // Pincode keys plus Enter key.
+      for (var i = 0; i < (PINCODE_LENGTH + 1); i++) {
         var pincodeSymbol = $('hid-keyboard-pincode-sym-' + (i + 1));
         pincodeSymbol.classList.toggle('key-typed', i < entered && expected);
         pincodeSymbol.classList.toggle('key-untyped', i > entered && expected);
         pincodeSymbol.classList.toggle('key-next', i == entered && expected);
+        if (i < PINCODE_LENGTH)
+          pincodeSymbol.textContent = pincode[i] ? pincode[i] : '';
       }
     },
 
      /*
      * Event handler that is invoked just before the screen in shown.
      * @param {Object} data Screen init payload.
      */
     onBeforeShow: function(data) {
       this.setDeviceBlockState_('hid-mouse-block', this.CONNECTION.SEARCHING);
       this.setDeviceBlockState_('hid-keyboard-block',
                                 this.CONNECTION.SEARCHING);
     },
   };
 });