Add the revision details widget to sheriff-o-matic

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

+<!--
+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;
+        overflow: hidden;

[ojan, 2014/08/05 02:07:23]

Why overflow:hidden?

+      }
+      #menu {
+        position: absolute;
+        overflow-y: scroll;

[ojan, 2014/08/05 02:07:23]

s/scroll/auto?

[leviw_travelin_and_unemployed, 2014/08/05 20:51:17]

With scroll, we don't wrap the contents. With auto, the longest bots wrap (seems
like a blink bug :-/ ).

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

Def sounds like a blink bug. At least add a FIXME?

+        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;
+      }
+      #scrim {
+        position: fixed;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 49;
+      }
+      core-icon {
+        position: relative;
+        top: 0.5em;

[ojan, 2014/08/05 02:07:23]

Is this trying to center it? The better way to center is to use a flexbox and
align-items: center (or align-self: center just on the core-icon).

+      }
+      .hidden {
+        visibility: hidden;

[ojan, 2014/08/05 02:07:23]

Don't think you need this if you have the opacity:0.

[leviw_travelin_and_unemployed, 2014/08/05 20:51:17]

It will still hit test otherwise and get in the way of the contents under it.

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

Ah. Mind adding an explanatory comment?

+        opacity: 0;
+      }
+    </style>
+    <core-icon src="{{src}}" icon="{{icon}}" on-click="{{ showAction }}"></core-icon>

[ojan, 2014/08/05 02:07:23]

Need spaces around src/icon

+    <div id="menu" class="hidden">
+      <content></content>
+    </div>
+    <div id="scrim" class="hidden" on-click="{{ hideAction }}"></div>

[ojan, 2014/08/05 02:07:23]

This is just to capture clicks? If so, you should just add a *capturing* click
handler to the body on attach and remove the handler on detach.

Also, add a FIXME to close the menu when you hit escape.

+  </template>
+  <script>
+  (function() {
+    Polymer({
+      showAction: function() {

[ojan, 2014/08/05 02:07:23]

Nit: _showAction and _hideAction

+        this.$.menu.classList.remove('hidden');
+        this.$.scrim.classList.remove('hidden');
+      },
+
+      hideAction: function() {
+        this.$.menu.classList.add('hidden');
+        this.$.scrim.classList.add('hidden');
+      },
+    });
+  })();
+  </script>
+</polymer-element>