Hookup the page-indicator and progress-bar elements in the PDF extension.

chrome/browser/resources/pdf/index.js

 // Copyright (c) 2012 The Polymer Authors. All rights reserved.
 //
 // Redistribution and use in source and binary forms, with or without
 // modification, are permitted provided that the following conditions are
 // met:
 //
 //    * Redistributions of source code must retain the above copyright
 // notice, this list of conditions and the following disclaimer.
 //    * Redistributions in binary form must reproduce the above
 // copyright notice, this list of conditions and the following disclaimer
@@ skipping 430 matching lines @@
         }
       },
       latchableChanged: function() {
         if (this.latchable)
           this.classList.add('latchable');
         else
           this.classList.remove('latchable');
       },
     });
     })();
-  
+  ;
+
+  Polymer('viewer-page-indicator', {
+    text: '1',
+    timerId: undefined,
+    ready: function() {
+      var scrollCallback = function() {
+        this.style.visibility = document.documentElement.clientWidth ==
+            window.innerWidth ? 'hidden' : 'visible';
+        var percent = window.scrollY /
+            (document.body.scrollHeight -
+             document.documentElement.clientHeight);
+        this.style.top = percent *
+            (document.documentElement.clientHeight - this.offsetHeight) + 'px';
+        this.style.opacity = 1;
+        clearTimeout(this.timerId);
+
+        this.timerId = setTimeout(function() {
+          this.style.opacity = 0;
+          this.timerId = undefined;
+        }.bind(this), 2000);
+      }.bind(this);
+      window.addEventListener('scroll', function() {
+        requestAnimationFrame(scrollCallback);
+      });
+
+      scrollCallback();
+    },
+  });
+;
+
+  Polymer('viewer-progress-bar', {
+    progress: 0,

[koz (OOO until 15th September), 2014/02/10 22:38:02]

Add a comment indicating this is a value from 0 to 100.

[raymes, 2014/02/10 23:58:37]

This comes from inside of the polymer element.

+    text: 'Loading',
+    numSegments: 8,
+    segments: [],
+    ready: function() {
+      this.numSegmentsChanged();
+    },
+    progressChanged: function() {
+      var numVisible = this.progress * this.segments.length / 100.0;

[koz (OOO until 15th September), 2014/02/10 22:38:02]

nit: Might be slightly clearer to have (this.progress / 100.0) *
this.segments.length

[raymes, 2014/02/10 23:58:37]

It would be a bit clearer, but the floating point precision is less - not that
it actually matters here though I guess :P

+      for (var i = 0; i < this.segments.length; i++) {
+        this.segments[i].style.visibility =
+            i < numVisible ? 'visible' : 'hidden';
+      }
+
+      if (this.progress == 100)
+        this.style.opacity = 0;
+    },
+    numSegmentsChanged: function() {
+      // Clear the existing segments.
+      this.segments = [];
+      var segmentsElement = this.$.segments;
+      while (segmentsElement.hasChildNodes())
+        segmentsElement.removeChild(segmentsElement.lastChild);
+
+      // Create the new segments.
+      var segment = document.createElement('li');
+      segment.classList.add('segment');
+      var angle = 360 / this.numSegments;
+      for (var i = 0; i < this.numSegments; ++i) {
+        var segmentCopy = segment.cloneNode(true);
+        segmentCopy.style.webkitTransform =
+            'rotate(' + (i * angle) + 'deg) skewY(' +
+            -1 * (90 - angle) + 'deg)';
+        segmentsElement.appendChild(segmentCopy);
+        this.segments.push(segmentCopy);
+      }
+      this.progressChanged();
+    }
+  });