Settings: show cr-input underline while pin-keyboard has focus

Bug: 877571
Change-Id: I981008a53c0a88aa98027f5fa56697ba410917ab
Reviewed-on: https://chromium-review.googlesource.com/1204511Reviewed-by: Scott Chen <scottchen@chromium.org>
Commit-Queue: Esmael El-Moslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#589227}

chrome/test/data/webui/cr_elements/cr_input_test.js

@@ -181,8 +181,22 @@ suite('cr-input', function() {
         })
         .then(() => {
           input.blur();
+          whenTransitionEnd =
+              test_util.eventToPromise('transitionend', underline);
+          // Wait for underline to fade out.
+          return whenTransitionEnd;
+        })
+        .then(() => {
+          whenTransitionEnd =
+              test_util.eventToPromise('transitionend', underline);
           assertFalse(crInput.hasAttribute('focused_'));
           assertEquals('0', getComputedStyle(underline).opacity);
+          // The width transition has a delay larger than the opacity transition
+          // duration so that the width can be reset to 0 after the underline is
+          // no longer visible.
+          return whenTransitionEnd;
+        })
+        .then(() => {
           assertEquals(0, underline.offsetWidth);
         });
   });

ui/webui/resources/cr_components/chromeos/quick_unlock/pin_keyboard.html

@@ -160,7 +160,7 @@
             is-input-rtl$="[[isInputRtl_(value)]]"
             has-content$="[[hasInput_(value)]]" invalid="[[hasError]]"
             placeholder="[[getInputPlaceholder_(enablePassword)]]"
-            on-keydown="onInputKeyDown_">
+            on-keydown="onInputKeyDown_" force-underline$="[[forceUnderline_]]">
         </cr-input>
       </div>
       <slot select="[problem]"></slot>

ui/webui/resources/cr_components/chromeos/quick_unlock/pin_keyboard.js

@@ -103,6 +103,19 @@ Polymer({
       value: '',
       observer: 'onPinValueChange_',
     },
+
+    /**
+     * @private
+     */
+    forceUnderline_: {
+      type: Boolean,
+      value: false,
+    }
+  },
+
+  listeners: {
+    'blur': 'onBlur_',
+    'focus': 'onFocus_',
   },
 
   /**
@@ -174,6 +187,16 @@ Polymer({
     this.focus(this.selectionStart_, this.selectionEnd_);
   },
 
+  /** @private */
+  onFocus_: function() {
+    this.forceUnderline_ = true;
+  },
+
+  /** @private */
+  onBlur_: function() {
+    this.forceUnderline_ = false;
+  },
+
   /**
    * Called when a keypad number has been tapped.
    * @param {Event} event The event object.

ui/webui/resources/cr_elements/cr_input/cr_input_style_css.html

@@ -78,11 +78,12 @@
         opacity: 0;
         position: absolute;
         right: 0;
-        transition: opacity 120ms ease-out, width 0 linear 180ms;
+        transition: opacity 120ms ease-out, width 0s linear 180ms;
         width: 0;
       }
 
       :host([invalid]) #underline,
+      :host([force-underline]) #underline,
       :host([focused_]:not([readonly])) #underline {
         opacity: 1;
         transition: width 180ms ease-out, opacity 120ms ease-in;