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..b73353323f125a2535e7c92b75e61ec797512084
--- /dev/null
+++ b/chrome/browser/resources/pdf/elements/viewer-toolbar/viewer-toolbar.html
@@ -0,0 +1,43 @@
+<polymer-element name="viewer-toolbar">
+  <template>
+    <link rel="stylesheet" href="viewer-toolbar.css">
+    <div id="hover" on-mouseover="{{fadeIn}}" on-mousemove="{{fadeIn}}" on-mouseout="{{fadeOut}}">

[ganetsky1, 2013/12/17 20:57:32]

You can probably kill the div, and move these handlers to be on polymer-element
itself

[raymes, 2013/12/18 04:46:57]

Done.

+      <div id="toolbar">
+        <content></content>
+      </div>
+    </div>
+  </template>
+  <script>
+    Polymer('viewer-toolbar', {
+      fadingIn: false,
+      ready: function() {
+        this.fadeOut();
+      },
+      fadeIn: function(event, detail, sender) {

[ganetsky1, 2013/12/17 20:57:32]

Are the arguments necessary?

[raymes, 2013/12/18 04:46:57]

Done.

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

[ganetsky1, 2013/12/17 20:57:32]

Do you intend for fadingIn to be public or private?

[raymes, 2013/12/18 04:46:57]

It seems easier to have it public based on your hints below and it doesn't seem
problematic :)

+        this.updateStyle();          

[ganetsky1, 2013/12/17 20:57:32]

I think it would be be just have a fadingIn published attribute on the custom
element, and write a fadingInChanged listener that calls updateStyle

[raymes, 2013/12/18 04:46:57]

Done.

+      },
+      updateStyle: function() {
+        if (this.fadingIn) {
+          this.style.setProperty("-webkit-transition",
+                                 "opacity 0.4s ease-in-out");
+          this.style.opacity = 1;

[ganetsky1, 2013/12/17 20:57:32]

You can probably just set this all up with data binding directly in CSS.
Something like

<style>
:host {
  opacity: {{ fadingIn ? 1 : 0 }}
  -webkit-transition: {{ fadingIn ? 'opacity 0.4s ease-in-out' :
'-webkit-transition opacity 0.4s ease-in-out 3s' }}
}
</style>

[raymes, 2013/12/18 04:46:57]

Cool - I didn't know you could do that! I've gone to the trouble of allowing the
fade in to finish before starting the fade out. This fixes a bug in the current
viewer toolbar where if you quickly mouse over and then mouse out the toolbar
stays transparent for a few seconds before fading out. This wouldn't be easy to
do with the inline css case.

+        } 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.
+            var me = this; 
+            setTimeout(function() { me.updateStyle(); }, 400);

[ganetsky1, 2013/12/17 20:57:32]

Delete var me = this
Change to setTimeout(this.updateStyle.bind(this), 400);

[raymes, 2013/12/18 04:46:57]

Done.

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