Add gr-tooltip-behavior and gr-tooltip element

What it looks like: http://imgur.com/U37fSkk

Will only trigger if the element has a title value and
also has its hasTooltip property set.

Add titles to the label buttons and turn tooltips on for
those.

Bug: Issue 3901
Change-Id: Id02f79bcf218419ab92d8100477ced093623f4d2

polygerrit-ui/app/behaviors/gr-tooltip-behavior/gr-tooltip-behavior.html

@@ -0,0 +1,18 @@
+<!--
+Copyright (C) 2016 The Android Open Source Project
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../elements/shared/gr-tooltip/gr-tooltip.html">
+<script src="gr-tooltip-behavior.js"></script>

polygerrit-ui/app/behaviors/gr-tooltip-behavior/gr-tooltip-behavior.js

@@ -0,0 +1,110 @@
+// Copyright (C) 2016 The Android Open Source Project
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+(function(window) {
+  'use strict';
+
+  var BOTTOM_OFFSET = 10;
+
+  var TooltipBehavior = {
+
+    properties: {
+      hasTooltip: Boolean,
+
+      _tooltip: Element,
+      _titleText: String,
+    },
+
+    attached: function() {
+      if (!this.hasTooltip) { return; }
+
+      this.addEventListener('mouseover', this._handleShowTooltip.bind(this));
+      this.addEventListener('mouseout', this._handleHideTooltip.bind(this));
+      this.addEventListener('focusin', this._handleShowTooltip.bind(this));
+      this.addEventListener('focusout', this._handleHideTooltip.bind(this));
+      this.listen(window, 'scroll', '_handleWindowScroll');
+    },
+
+    detached: function() {
+      this.unlisten(window, 'scroll', '_handleWindowScroll');
+    },
+
+    _handleShowTooltip: function(e) {
+      if (!this.hasAttribute('title') || this._tooltip) { return; }
+
+      // Store the title attribute text then set it to an empty string to
+      // prevent it from showing natively.
+      this._titleText = this.getAttribute('title');
+      this.setAttribute('title', '');
+
+      var tooltip = document.createElement('gr-tooltip');
+      tooltip.text = this._titleText;
+
+      // Set visibility to hidden before appending to the DOM so that
+      // calculations can be made based on the element’s size.
+      tooltip.style.visibility = 'hidden';
+      Polymer.dom(document.body).appendChild(tooltip);
+      this._positionTooltip(tooltip);
+      tooltip.style.visibility = null;
+
+      this._tooltip = tooltip;
+    },
+
+    _handleHideTooltip: function(e) {
+      if (!this.hasAttribute('title') ||
+          !this._titleText ||
+          this === document.activeElement) { return; }
+
+      this.setAttribute('title', this._titleText);
+      if (this._tooltip && this._tooltip.parentNode) {
+        this._tooltip.parentNode.removeChild(this._tooltip);
+      }
+      this._tooltip = null;
+    },
+
+    _handleWindowScroll: function(e) {
+      if (!this._tooltip) { return; }
+
+      this._positionTooltip(this._tooltip);
+    },
+
+    _positionTooltip: function(tooltip) {
+      var offset = this._getOffset(this);
+      var top = offset.top;
+      var left = offset.left;
+
+      top -= this.offsetHeight + BOTTOM_OFFSET;
+      left -= (tooltip.offsetWidth / 2) - (this.offsetWidth / 2);
+      left = Math.max(0, left);
+      top = Math.max(0, top);
+
+      tooltip.style.left = left + 'px';
+      tooltip.style.top = top + 'px';
+    },
+
+    _getOffset: function(el) {
+      var top = 0;
+      var left = 0;
+      for (var node = el; node; node = node.offsetParent) {
+        if (node.offsetTop) { top += node.offsetTop; }
+        if (node.offsetLeft) { left += node.offsetLeft; }
+      }
+      top += window.scrollY;
+      left += window.scrollX;
+      return {top: top, left: left};
+    },
+  };
+
+  window.Gerrit = window.Gerrit || {};
+  window.Gerrit.TooltipBehavior = TooltipBehavior;
+})(window);

polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.html

@@ -125,7 +125,8 @@ limitations under the License.
                 <template is="dom-repeat"
                     items="[[_computePermittedLabelValues(permittedLabels, label)]]"
                     as="value">
-                  <gr-button data-value$="[[value]]">[[value]]</gr-button>
+                  <gr-button has-tooltip data-value$="[[value]]"
+                      title$="[[_computeLabelValueTitle(labels, label, value)]]">[[value]]</gr-button>
                 </template>
               </iron-selector>
             </div>

polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.js

@@ -89,6 +89,10 @@
       if (total > 1) { return total + ' Drafts'; }
     },
 
+    _computeLabelValueTitle: function(labels, label, value) {
+      return labels[label].values[value];
+    },
+
     _computeLabelArray: function(labelsObj) {
       return Object.keys(labelsObj).sort();
     },

polygerrit-ui/app/elements/shared/gr-button/gr-button.html

@@ -15,6 +15,7 @@ limitations under the License.
 -->
 
 <link rel="import" href="../../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../../behaviors/gr-tooltip-behavior/gr-tooltip-behavior.html">
 <link rel="import" href="../../../behaviors/keyboard-shortcut-behavior.html">
 
 <dom-module id="gr-button">

polygerrit-ui/app/elements/shared/gr-button/gr-button.js

@@ -31,6 +31,7 @@
 
     behaviors: [
       Gerrit.KeyboardShortcutBehavior,
+      Gerrit.TooltipBehavior,
     ],
 
     hostAttributes: {

polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip.html

@@ -0,0 +1,49 @@
+<!--
+Copyright (C) 2016 The Android Open Source Project
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<link rel="import" href="../../../bower_components/polymer/polymer.html">
+
+<dom-module id="gr-tooltip">
+  <template>
+    <style>
+      :host {
+        --gr-tooltip-arrow-size: .6em;
+
+        background-color: #333;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
+        color: #fff;
+        font-size: .75rem;
+        padding: .5em .85em;
+        position: absolute;
+        z-index: 1000;
+      }
+      .arrow {
+        border-left: var(--gr-tooltip-arrow-size) solid transparent;
+        border-right: var(--gr-tooltip-arrow-size) solid transparent;
+        border-top: var(--gr-tooltip-arrow-size) solid #333;
+        bottom: -var(--gr-tooltip-arrow-size);
+        height: 0;
+        position: absolute;
+        left: calc(50% - var(--gr-tooltip-arrow-size));
+        width: 0;
+      }
+    </style>
+    [[text]]
+    <i class="arrow"></i>
+  </template>
+  <script src="gr-tooltip.js"></script>
+</dom-module>
+

polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip.js

@@ -0,0 +1,24 @@
+// Copyright (C) 2016 The Android Open Source Project
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+(function() {
+  'use strict';
+
+  Polymer({
+    is: 'gr-tooltip',
+
+    properties: {
+      text: String,
+    },
+  });
+})();