PIN keyboard: always underline text field and enable contrast if either focus or text typed

see https://bugs.chromium.org/p/chromium/issues/detail?id=994492#c12

Bug: 994492
Change-Id: Icd4c1fa6ed5225092a5ca29eba2da07107e3876d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1823876Reviewed-by: Roman Sorokin [CET] <rsorokin@chromium.org>
Reviewed-by: Alexander Alekseev <alemate@chromium.org>
Commit-Queue: Thomas Tellier <tellier@google.com>
Cr-Commit-Position: refs/heads/master@{#706176}

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

@@ -176,7 +176,7 @@
         @apply --pin-keyboard-pin-input-style;
       }
 
-      #pinInput[has-content] {
+      #pinInput[make-contrast] {
         --cr-disabled-opacity: var(--dark-primary-opacity);
         opacity: var(--dark-primary-opacity);
       }
@@ -196,10 +196,10 @@
       <div id="pinInputDiv">
         <cr-input id="pinInput" type="password" value="{{value}}"
             is-input-rtl$="[[isInputRtl_(value)]]" aria-label="[[ariaLabel]]"
-            has-content$="[[hasInput_(value)]]" invalid="[[hasError]]"
+            make-contrast$="[[hasInputOrFocus_(value, focused_)]]" invalid="[[hasError]]"
             placeholder="[[getInputPlaceholder_(enablePassword,
                 enablePlaceholder)]]"
-            on-keydown="onInputKeyDown_" force-underline$="[[forceUnderline_]]"
+            on-keydown="onInputKeyDown_" force-underline="true"
             disabled="[[isIncognitoUi]]">
         </cr-input>
       </div>

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

@@ -132,7 +132,7 @@ Polymer({
     /**
      * @private
      */
-    forceUnderline_: {
+    focused_: {
       type: Boolean,
       value: false,
     },
@@ -246,12 +246,12 @@ Polymer({
 
   /** @private */
   onFocus_: function() {
-    this.forceUnderline_ = true;
+    this.focused_ = true;
   },
 
   /** @private */
   onBlur_: function() {
-    this.forceUnderline_ = false;
+    this.focused_ = false;
   },
 
   /**
@@ -452,11 +452,19 @@ Polymer({
   },
 
   /**
-   * Disables the backspace button if nothing is entered.
+   * Indicates if something is entered.
    * @private
    */
-  hasInput_: function() {
-    return this.value.length > 0;
+  hasInput_: function(value) {
+    return value.length > 0;
+  },
+
+  /**
+   * Determines if the pin input should be contrasted.
+   * @private
+   */
+  hasInputOrFocus_: function(value, focused) {
+    return this.hasInput_(value) || focused;
   },
 
   /**