Fixed Bluetooth keyboard pairing pincode visibility issue.

The problem was that the UI expected that CONTEXT_KEY_KEYBOARD_STATE key
observer is called before CONTEXT_KEY_KEYBOARD_PINCODE observer. In fact, the
order of notifications was never defined. It have changed at some point, which
lead to regression.

BUG=507896
TEST=OobeWebUITest.HIDDetectionScreenTest browser test

Review URL: https://codereview.chromium.org/1243983002

Cr-Commit-Position: refs/heads/master@{#339767}

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

@@ -50,8 +50,7 @@
   display: inline;
 }
 
-#hid-detection .label,
-#hid-keyboard-pincode {
+#hid-detection .label {
   display: none;
 }
 
@@ -94,6 +93,3 @@
   visibility: visible;
 }
 
-.pairing .show-pincode #hid-keyboard-pincode {
-  display: block;
-}

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

@@ -41,7 +41,7 @@
         </span>
         <span id="hid-keyboard-label-pairing" class="label"></span>
       </div>
-      <div id="hid-keyboard-pincode">
+      <div id="hid-keyboard-pincode" hidden>
         <div id="hid-keyboard-pincode-sym-1" class="bluetooth-keyboard-button">
         </div>
         <div id="hid-keyboard-pincode-sym-2" class="bluetooth-keyboard-button">

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

@@ -17,6 +17,8 @@ login.createScreen('HIDDetectionScreen', 'hid-detection', function() {
   var CONTEXT_KEY_KEYBOARD_LABEL = 'keyboard-device-label';
   var CONTEXT_KEY_CONTINUE_BUTTON_ENABLED = 'continue-button-enabled';
 
+  var PINCODE_LENGTH = 6;
+
   return {
 
   /**
@@ -71,6 +73,7 @@ login.createScreen('HIDDetectionScreen', 'hid-detection', function() {
       this.context.addObserver(
         CONTEXT_KEY_KEYBOARD_STATE,
         function(stateId) {
+          self.updatePincodeKeysState_();
           if (stateId === undefined)
             return;
           self.setDeviceBlockState_('hid-keyboard-block', stateId);
@@ -80,50 +83,18 @@ login.createScreen('HIDDetectionScreen', 'hid-detection', function() {
           } 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) {
@@ -186,20 +157,43 @@ login.createScreen('HIDDetectionScreen', 'hid-detection', function() {
     },
 
     /**
-     * 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] : '';
       }
     },
 

chrome/test/data/chromeos/oobe_webui_browsertest.js

@@ -128,3 +128,58 @@ TEST_F('OobeWebUITest', 'DISABLED_OobeUserImage', function() {
 TEST_F('OobeWebUITest', 'DISABLED_OobeAccountPicker', function() {
   Oobe.getInstance().showScreen({'id':'account-picker'});
 });
+
+
+TEST_F('OobeWebUITest', 'HIDDetectionScreenTest', function() {
+  function getPincodeSymbol(i) {
+    return $('hid-keyboard-pincode-sym-' + (i + 1));
+  }
+
+  function getDisplayedPincode() {
+    var pincode = '';
+    for (var i = 0; i < 6; ++i)
+      pincode += getPincodeSymbol(i).textContent;
+    return pincode;
+  }
+
+  login.HIDDetectionScreen.contextChanged({
+    'keyboard-state': 'searching',
+    'mouse-state': 'searching'
+  });
+  Oobe.showScreen({'id': 'hid-detection'});
+  expectTrue($('hid-keyboard-pincode').hidden);
+
+  login.HIDDetectionScreen.contextChanged({
+    'keyboard-state': 'pairing',
+    'keyboard-pincode': '013188'
+  });
+  expectFalse($('hid-keyboard-pincode').hidden);
+  expectEquals('013188', getDisplayedPincode());
+
+  login.HIDDetectionScreen.contextChanged({
+    'num-keys-entered-expected': true,
+    'num-keys-entered-pincode': 3
+  });
+  expectFalse($('hid-keyboard-pincode').hidden);
+  expectEquals('013188', getDisplayedPincode());
+  [
+    { 'key-typed': true },
+    { 'key-typed': true },
+    { 'key-typed': true },
+    { 'key-next': true },
+    { 'key-untyped': true },
+    { 'key-untyped': true },
+    { 'key-untyped': true }  // Enter key symbol.
+  ].forEach(function(expectedClasses, i) {
+    var symbol = getPincodeSymbol(i);
+    ['key-typed', 'key-untyped', 'key-next'].forEach(function(className) {
+      expectEquals(!!expectedClasses[className],
+                   symbol.classList.contains(className));
+    });
+  });
+
+  login.HIDDetectionScreen.contextChanged({
+    'keyboard-state': 'connected'
+  });
+  expectTrue($('hid-keyboard-pincode').hidden);
+});