1 files changed, 56 insertions, 0 deletions
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-page-selector.html b/chromium/chrome/browser/resources/pdf/elements/viewer-page-selector.html
new file mode 100644
index 00000000000..e1fdc869efe
--- /dev/null
+++ b/chromium/chrome/browser/resources/pdf/elements/viewer-page-selector.html
@@ -0,0 +1,56 @@
+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
+
+<dom-module id="viewer-page-selector">
+  <template>
+    <style>
+      :host {
+        color: #fff;
+        display: flex;
+        font-size: 0.81rem;
+      }
+
+      :host ::selection {
+        background: rgba(255, 255, 255, 0.3);
+      }
+
+      #pageselector-container,
+      #pagelength-spacer {
+        padding: 0 3px;
+        text-align: start;
+        /* --page-length-digits is set through JavaScript */
+        width: calc(var(--page-length-digits, 1) * 1ch);
+      }
+
+      #pageselector-container:focus-within,
+      #pageselector-container:hover {
+        background: rgba(0, 0, 0, 0.5);
+      }
+
+      #pageselector {
+        --cr-input-focus-color: transparent;
+        --cr-input-error-display: none;
+        --cr-input-background-color: transparent;
+        --cr-input-color: white;
+      }
+
+      #pageselector::part(input) {
+        caret-color: var(--cr-input-color);
+        padding: 0;
+        text-align: end;
+      }
+    </style>
+    <div id="pageselector-container">
+      <cr-input id="pageselector" value="[[pageNo]]" on-mouseup="select"
+          on-value-changed="onInputValueChange_" on-change="pageNoCommitted"
+          aria-label$="{{strings.labelPageNumber}}">
+      </cr-input>
+    </div>
+    <span id="slash">/</span>
+    <span id="pagelength-spacer">
+      <span id="pagelength">{{docLength}}</span>
+    </span>
+  </template>
+  <script src="viewer-page-selector.js"></script>
+</dom-module>