Material PDF: Fix inconsistent behaviour in page selector, update styling

chrome/browser/resources/pdf/elements/viewer-pdf-toolbar/viewer-pdf-toolbar.html

 <link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-shadow-flex-layout.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/image-icons.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-material/paper-material.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-toolbar/paper-toolbar.html">
 <link rel="import" href="../viewer-page-selector/viewer-page-selector.html">
 
 <dom-module id="viewer-pdf-toolbar">
   <link rel="import" type="css" href="viewer-pdf-toolbar.css">
   <template>
     <div id="animatable">
       <paper-material class="fit"></paper-material>
 
       <!-- TODO(tsergeant): Re-enable once paper-progress is available in Polymer
         0.8 -->
       <!--<paper-progress value="{{loadProgress}}"></paper-progress>-->
 
       <paper-toolbar class="core-narrow">
         <div id="aligner" class="horizontal layout center">
           <span id="title" class="invisible flex-5" title="{{docTitle}}">
             <span>{{docTitle}}</span>
           </span>
 
           <div class="flex-1" id="pageselector-container">
             <viewer-page-selector id="pageselector" class="invisible"
-                index="{{pageIndex}}" doc-length="{{docLength}}">
+                doc-length="{{docLength}}" page-no="{{pageNo}}">
             </viewer-page-selector>
           </div>
 
           <div id="buttons" class="invisible flex-5">
             <paper-icon-button icon="image:rotate-right"
                 on-click="rotateRight"></paper-icon-button>
             <paper-icon-button icon="bookmark-outline"
                 on-click="toggleBookmarks" hidden></paper-icon-button>
             <paper-icon-button icon="save"
                 on-click="save"></paper-icon-button>
             <paper-icon-button icon="print"
                 on-click="print"></paper-icon-button>
           </div>
         </div>
       </paper-toolbar>
     </div>
   </template>
 </dom-module>
 <script src="viewer-pdf-toolbar.js"></script>