Allow click events to pass through the toolbar padding.

elements/viewer-toolbar/viewer-toolbar.html

Index: elements/viewer-toolbar/viewer-toolbar.html
diff --git a/elements/viewer-toolbar/viewer-toolbar.html b/elements/viewer-toolbar/viewer-toolbar.html
index 70c66eb51afc60eff4231fe4c7afc31fd1551100..fcb2341916c4726df791c582a68bc15ae7dc1b3c 100644
--- a/elements/viewer-toolbar/viewer-toolbar.html
+++ b/elements/viewer-toolbar/viewer-toolbar.html
@@ -1,6 +1,4 @@
-<polymer-element name="viewer-toolbar" attributes="fadingIn"
-    on-mouseover="{{fadeIn}}" on-mousemove="{{fadeIn}}"
-    on-mouseout="{{fadeOut}}">
+<polymer-element name="viewer-toolbar" attributes="fadingIn">
 <template>
   <link rel="stylesheet" href="viewer-toolbar.css">
   <div id="toolbar">
@@ -10,30 +8,55 @@
 <script>
   Polymer('viewer-toolbar', {
     fadingIn: false,
-    timerId: undefined,
+    timerId_: undefined,
+    inInitialFadeIn_: false,
     ready: function() {
-      this.fadingInChanged();
+      this.mousemoveCallback = function(e) {
+        var rect = this.getBoundingClientRect();
+        if (e.clientX >= rect.left && e.clientX <= rect.right &&
+            e.clientY >= rect.top && e.clientY <= rect.bottom) {
+          this.fadingIn = true;
+          // If we hover over the toolbar, cancel the initial fade in.
+          if (this.inInitialFadeIn_)
+            this.inInitialFadeIn_ = false;
+        } else {
+          // Initially we want to keep the toolbar up for a longer period.
+          if (!this.inInitialFadeIn_)
+            this.fadingIn = false;
+        }
+      }.bind(this);
     },
-    fadeIn: function() {
-      this.fadingIn = true;
+    attached: function() {
+      this.parentNode.addEventListener('mousemove', this.mousemoveCallback);
     },
-    fadeOut: function() {
-      this.fadingIn = false;
+    detached: function() {
+      this.parentNode.removeEventListener('mousemove', this.mousemoveCallback);
+    },
+    initialFadeIn: function() {
+      this.inInitialFadeIn_ = true;
+      this.fadeIn();
+      this.fadeOutAfterDelay(6000);
     },
     fadingInChanged: function() {
       if (this.fadingIn) {
-        this.style.opacity = 1;
-        clearTimeout(this.timerId);
-        this.timerId = undefined;
+        this.fadeIn();
       } else {
-        if (this.timerId === undefined) {
-          this.timerId = setTimeout(
-            function() {
-              this.style.opacity = 0;
-              this.timerId = undefined;
-            }.bind(this), 3000);
-        }
+        if (this.timerId_ === undefined)
+          this.fadeOutAfterDelay(3000);
       }
+    },
+    fadeIn: function() {
+      this.style.opacity = 1;
+      clearTimeout(this.timerId_);
+      this.timerId_ = undefined;
+    },
+    fadeOutAfterDelay: function(delay) {
+      this.timerId_ = setTimeout(
+        function() {
+          this.style.opacity = 0;
+          this.timerId_ = undefined;
+          this.inInitialFadeIn_ = false;
+        }.bind(this), delay);
     }
   });
 </script>