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..09eeb714042523ac5ff03bbf05321898de8a966e
--- /dev/null
+++ b/chrome/browser/resources/pdf/elements/viewer-toolbar/viewer-toolbar.html
@@ -0,0 +1,40 @@
+<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,
+      ready: function() {
+        this.fadingInChanged();

[ganetsky1, 2013/12/18 20:05:05]

Not sure this is necessary, considering you set fadingIn to false in
initialization

[raymes, 2013/12/18 23:28:54]

When I tested this, it is needed. It seems like it's not needed if the element
is defined with <viewer-toolbar fadingIn='...'> but if that is not the case,
fadingInChanged will never be called.

+      },
+      fadeIn: function() {
+        this.fadingIn = true;
+      },
+      fadeOut: function() {
+        this.fadingIn = false;
+      },
+      fadingInChanged: function() {

[ganetsky1, 2013/12/18 20:05:05]

fyi, you can use oldValue, newValue as arguments here

+        if (this.fadingIn) {
+          this.style.setProperty("-webkit-transition",
+                                 "opacity 0.4s ease-in-out");
+          this.style.opacity = 1;
+        } else {
+          if (window.getComputedStyle(this).getPropertyValue("opacity") == 1) {
+            this.style.setProperty("-webkit-transition",
+                                   "opacity 0.4s ease-in-out 3s");
+            this.style.opacity = 0;
+          } else {
+            // Let the toolbar finish fading in before fading out.
+            setTimeout(this.fadingInChanged.bind(this), 400);

[ganetsky1, 2013/12/18 20:05:05]

Do you really want to call the change watcher again (it is called whenever
something changes), or do you want to call something more specific after
timeout.

[raymes, 2013/12/18 23:28:54]

Yep I want to call the change watcher again. Basically it's saying "if we're
fading in, wait until we've fully faded in and then check again whether we
should fade out". I could pull everything out into a separate function which
fadingInChanged would call, but it doesn't seem necessary.

[ganetsky1, 2013/12/19 21:52:50]

I think your timing is off. I think what you want to do is
1) Immediately return from the changed watcher if in midst of a fade in
2) Always schedule a 400ms setTimeout right when you start the fadeIn
transition, and only then

[raymes, 2013/12/20 01:47:30]

Hmm, not sure how the timing is off?

This code says that if fadingIn == false, start fading out UNLESS we haven't
finished fading in, in which case we should schedule to fade out after we're
sure we would have finished fading in (which is after 400ms). 

When the function is called back in to after 400ms we re-evaluate whether we
should start fading out and we may get delayed again, which is important because
the state could have changed in that time.

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