Allow click events to pass through the toolbar padding.

elements/viewer-toolbar/viewer-toolbar.html

-<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">
     <content></content>
   </div>
 </template>
 <script>
   Polymer('viewer-toolbar', {
     fadingIn: false,
     timerId: undefined,
+    inInitialFadeIn: false,
     ready: function() {
-      this.fadingInChanged();
+      this.parentNode.addEventListener('mousemove', 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;
-    },
-    fadeOut: function() {
-      this.fadingIn = false;
+    initialFadeIn: function() {
+      this.inInitialFadeIn = true;
+      this.fadeIn();
+      this.fadeOutAfterDelay(6000);
     },

[ganetsky1, 2014/02/20 20:22:29]

You can just have inInitialFadeInChanged(oldValue, newValue), and trigger a
transition or a cancellation based on that

[raymes, 2014/02/21 03:03:42]

inInitialFadeIn is just meant to be some private state which avoids the element
being faded out prematurely if the mouse is hovered over it. The owner element
shouldn't touch it, only call initialFadeIn(). I guess I should be adding an '_'
suffix to the private variables?

     fadingInChanged: function() {
       if (this.fadingIn) {
-        this.style.opacity = 1;
-        if (this.timerId !== undefined) {
-          clearTimeout(this.timerId);
+        this.fadeIn();
+      } else {
+        if (this.timerId === undefined)
+          this.fadeOutAfterDelay(3000);
+      }
+    },
+    fadeIn: function() {
+      this.style.opacity = 1;
+      clearTimeout(this.timerId);
+      this.timerId = undefined;
+    },
+    fadeOutAfterDelay: function(delay) {

[ganetsky1, 2014/02/20 20:22:29]

Why have a fadeOutAfterDelay method, when you could just have a fadeOut method,
and call it with setTimeout.

[raymes, 2014/02/21 03:03:42]

I just pulled out the common code. Both the callsites would call setTimeout so
we might as well have it in this function.

+      this.timerId = setTimeout(
+        function() {
+          this.style.opacity = 0;
           this.timerId = undefined;
-        }
-      } else {
-        if (this.timerId === undefined) {
-          this.timerId = setTimeout(
-            function() {
-              this.style.opacity = 0;
-              this.timerId = undefined;
-            }.bind(this), 3000);
-        }
-      }
+          this.inInitialFadeIn = false;
+        }.bind(this), delay);
     }
   });
 </script>
 </polymer-element>