Add the revision details widget to sheriff-o-matic

Tools/GardeningServer/ui/ct-popup-menu.html

Index: Tools/GardeningServer/ui/ct-popup-menu.html
diff --git a/Tools/GardeningServer/ui/ct-popup-menu.html b/Tools/GardeningServer/ui/ct-popup-menu.html
new file mode 100644
index 0000000000000000000000000000000000000000..d7f950f47f961af869bd6a14ff97130e8f650c3d
--- /dev/null
+++ b/Tools/GardeningServer/ui/ct-popup-menu.html
@@ -0,0 +1,69 @@
+<!--
+Copyright 2014 The Chromium Authors. All rights reserved.
+Use of this source code is governed by a BSD-style license that can be
+found in the LICENSE file.
+-->
+<link href="../bower_components/polymer/polymer.html" rel="import">
+<link href="../bower_components/core-icon/core-icon.html" rel="import">
+
+<polymer-element name="ct-popup-menu" attributes="{{ icon }}">
+  <template>
+    <style>
+      :host {
+        display: inline-block;
+      }
+      #menu {
+        position: absolute;

[ojan, 2014/08/06 22:58:46]

We don't have an official style on this, but I've started sorting CSS properties
lexicographically.

[leviw_travelin_and_unemployed, 2014/08/06 23:37:11]

Done.

+        overflow-y: scroll;
+        transition: transform 0.2s ease-in-out, opacity 0.2s ease-in;
+        border: 1px solid grey;
+        -webkit-box-shadow: 3px 4px 20px 0px rgba(0,0,0,0.75);
+        max-height: 300px;
+        padding: 1em;
+        z-index: 50;
+        background-color: white;
+      }
+      .hidden {
+        visibility: hidden;
+        opacity: 0;
+      }
+    </style>
+    <core-icon id="icon" src="{{src}}" icon="{{icon}}" on-click="{{ _toggleAction }}"></core-icon>

[ojan, 2014/08/06 23:38:39]

Spaces in the curlies!

+    <div id="menu" class="hidden">
+      <content></content>
+    </div>
+  </template>
+  <script>
+  (function() {
+    Polymer({
+      attached: function() {
+        // FIXME: hitting escape should also hide the menu.
+        document.body.addEventListener('click', this._handleClick.bind(this), true)
+      },
+      detached: function() {

[ojan, 2014/08/06 22:58:46]

Nit: inconsistent newlining. all your other functions in this file have a
newline between the functions.

[leviw_travelin_and_unemployed, 2014/08/06 23:37:11]

Done.

+        document.body.removeEventListener('click', this._handleClick.bind(this), true)
+      },
+
+      _toggleAction: function() {
+        this.$.menu.classList.toggle('hidden');
+      },
+
+      _handleClick: function(event) {
+        if (this.$.menu.classList.contains('hidden'))
+          return;
+        var preventDefault = true;
+        for (var i = event.path.length - 1; i >= 0; i--) {
+          if (event.path[i] === this.$.icon || event.path[i] === this.$.menu) {

[ojan, 2014/08/06 22:58:46]

Can this just be:
if (event.path[i] === this)

?

Or, even better,
if (!event.path[i].find(function(element) { return element == this; })) {
  event.preventDefault();
  this.$.menu...
}

[leviw_travelin_and_unemployed, 2014/08/06 23:37:11]

It can be the former. NodeLists confusingly don't have a find method.

+            preventDefault = false;
+            break;
+          }
+        };
+        if (preventDefault) {
+          event.preventDefault();
+          this.$.menu.classList.add('hidden');
+        }
+      },
+    });
+  })();
+  </script>
+</polymer-element>