Add the viewer toolbar to the PDF extension

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

Index: chrome/browser/resources/pdf/elements/viewer-toolbar/viewer-toolbar.html
diff --git a/chrome/browser/resources/pdf/elements/viewer-toolbar/viewer-toolbar.html b/chrome/browser/resources/pdf/elements/viewer-toolbar/viewer-toolbar.html
new file mode 100644
index 0000000000000000000000000000000000000000..61c4c432a1013e3edb2d92e1f36ba175f1b3cbe5
--- /dev/null
+++ b/chrome/browser/resources/pdf/elements/viewer-toolbar/viewer-toolbar.html
@@ -0,0 +1,41 @@
+<polymer-element name="viewer-toolbar" attributes="fadingIn"
+    on-mouseover="{{fadeIn}}" on-mousemove="{{fadeIn}}"
+    on-mouseout="{{fadeOut}}">
+  <template>
+    <link rel="stylesheet" href="viewer-toolbar.css">
+    <div id="toolbar">
+      <content></content>
+    </div>
+  </template>
+  <script>
+    Polymer('viewer-toolbar', {
+      fadingIn: false,
+      timerIsRunning: false,
+      timerId: 0,
+      ready: function() {
+        this.fadingInChanged();
+      },
+      fadeIn: function() {
+        this.fadingIn = true;
+      },
+      fadeOut: function() {
+        this.fadingIn = false;
+      },
+      fadingInChanged: function() {
+        if (this.fadingIn) {
+          this.style.opacity = 1;
+          if (this.timerIsRunning) {
+            this.timerIsRunning = false;
+            clearTimeout(this.timerId);
+          }
+        } else {
+          if (!this.timerIsRunning) {
+            this.timerIsRunning = true;
+            this.timerId = setTimeout(
+                function() { this.style.opacity = 0; }.bind(this), 3000);
+          }

[ganetsky1, 2014/01/03 18:14:39]

There are numerous things I don't understand here:

1) You need to set timerIsRunning to false when either the timer expires, or the
timer is cancelled. But you don't seem to set timerIsRunning to false when the
timer expires.
2) I don't see the initiation of a fade transition, just a an opacity change for
3 seconds from now.
3) Why not collapse the timerIsRunning variable and the timerId variable into
one? Just set timerId to undefined whenever the timer is not running.

[raymes, 2014/01/06 00:22:45]

1) Done, thanks.
2) The transition has been moved to the CSS.
3) Done.

[ganetsky1, 2014/01/08 06:13:43]

Please correct me if I'm wrong somewhere:

There still needs to be something that initiates the transition...

Your CSS is watching for changes in opacity... NOT for changes in fadingIn

Therefore, when fadingIn is changed from true to false, this code waits 3
seconds, and THEN sets opacity to 0, which I think would THEN initiate the
transition.

Also, this code is one-sided, it sets a timer when fading in goes from true to
false, but not the other way around. Is that intentional and correct?

+        }
+      }
+    });
+  </script>
+</polymer-element>