PDF Viewer: Use a plain <input> instead of <cr-input> for page input.

There is no benefit by using cr-input, as the UI of this element is
heavily customized anyway, and none other features of cr-input are
needed.

Bug: 1100432
Change-Id: I9831a981dc790b83570a9d6645ffab1af2e290cd
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2271105Reviewed-by: John Lee <johntlee@chromium.org>
Commit-Queue: dpapad <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#783787}

chrome/browser/resources/pdf/elements/BUILD.gn

@@ -64,7 +64,6 @@ js_library("viewer-page-indicator") {
 }
 
 js_library("viewer-page-selector") {
-  deps = [ "//ui/webui/resources/cr_elements/cr_input:cr_input.m" ]
 }
 
 js_library("viewer-password-screen") {

chrome/browser/resources/pdf/elements/viewer-page-selector.html

@@ -12,7 +12,7 @@
         background: rgba(255, 255, 255, 0.3);
       }
 
-      #pageselector::part(input),
+      input,
       #pagelength {
         /* --page-length-digits is set through JavaScript. 1px is added because
          * the unit 'ch' does not provide exact whole number pixels, and
@@ -20,28 +20,23 @@
         width: calc(max(2, var(--page-length-digits)) * 1ch + 1px);
       }
 
-      #pageselector {
-        --cr-input-background-color: transparent;
-        --cr-input-border-radius: 0;
-        --cr-input-color: white;
-        --cr-input-error-display: none;
-        --cr-input-focus-color: transparent;
-      }
-
-      #pageselector::part(input) {
+      input {
         background: rgba(0, 0, 0, 0.5);
-        box-sizing: content-box;
-        caret-color: var(--cr-input-color);
+        border: none;
+        color: white;
+        font-family: inherit;
+        line-height: inherit;
+        outline: none;
         padding: 0 var(--page-selector-spacing);
+        text-align: center;
       }
 
       #divider {
         margin: 0 var(--page-selector-spacing);
       }
     </style>
-    <cr-input id="pageselector" value="[[pageNo]]" on-mouseup="select"
-        on-value-changed="onInputValueChange_" on-change="pageNoCommitted"
+    <input type="text" id="pageselector" value="[[pageNo]]" on-mouseup="select"
+        on-input="onInput_" on-change="pageNoCommitted"
         aria-label$="$i18n{labelPageNumber}">
-    </cr-input>
     <span id="divider">/</span>
     <span id="pagelength">[[docLength]]</span>

chrome/browser/resources/pdf/elements/viewer-page-selector.js

@@ -2,8 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import 'chrome://resources/cr_elements/cr_input/cr_input.m.js';
-
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 Polymer({
@@ -65,7 +63,7 @@ Polymer({
    * Immediately remove any non-digit characters.
    * @private
    */
-  onInputValueChange_() {
+  onInput_() {
     this.pageSelector.value = this.pageSelector.value.replace(/[^\d]/, '');
   },
 });

chrome/test/data/pdf/basic_test.js

@@ -49,7 +49,7 @@ const tests = [
     // Test that the traversal through the shadow DOM works correctly.
     const viewer = document.body.querySelector('pdf-viewer');
     const toolbar = viewer.shadowRoot.querySelector('#toolbar');
-    toolbar.$.pageselector.pageSelector.inputElement.focus();
+    toolbar.$.pageselector.pageSelector.focus();
     chrome.test.assertTrue(shouldIgnoreKeyEvents(toolbar));
 
     // Test case where the active element has a shadow root of its own.

chrome/test/data/pdf/material_elements_test.js

@@ -50,6 +50,7 @@ const tests = [
     // Simulate entering text into `input` and pressing enter.
     function changeInput(newValue) {
       input.value = newValue;
+      input.dispatchEvent(new CustomEvent('input'));
       input.dispatchEvent(new CustomEvent('change'));
     }