Show review score explanation in change details

Gr-tooltip is used for displaying the score explanation. In order to
have gr-tooltip being applied, gr-label component was introduced as a
<span> tag replacement.

Gr-tooltip bug fixes:
- Tooltip arrow now moves sideways if toolip was shown close to left
window side.
- Tooltip positioning was broken anywhere bug in fixed container's child.
- Positioning math updated to use standart getBoundingClientRect instead
of DOM traversal.

Feature: Issue 4101
Change-Id: If62ecff33535b910b311c984993e402c6dc36be7

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

@@ -14,7 +14,7 @@
 (function(window) {
   'use strict';
 
-  var BOTTOM_OFFSET = 10;
+  var BOTTOM_OFFSET = 7.2; // Height of the arrow in tooltip.
 
   /** @polymerBehavior Gerrit.TooltipBehavior */
   var TooltipBehavior = {
@@ -84,29 +84,19 @@
     },
 
     _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; }
+      var rect = this.getBoundingClientRect();
+      var boxRect = tooltip.getBoundingClientRect();
+      var parentRect = tooltip.parentElement.getBoundingClientRect();
+      var top = rect.top - parentRect.top - boxRect.height - BOTTOM_OFFSET;
+      var left =
+          rect.left - parentRect.left + (rect.width - boxRect.width) / 2;
+      if (left < 0) {
+        tooltip.updateStyles({
+          '--gr-tooltip-arrow-center-offset': left + 'px',
+        });
       }
-      top += window.scrollY;
-      left += window.scrollX;
-      return {top: top, left: left};
+      tooltip.style.left = Math.max(0, left) + 'px';
+      tooltip.style.top = Math.max(0, top) + 'px';
     },
   };
 

polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata.html

@@ -17,6 +17,7 @@ limitations under the License.
 <link rel="import" href="../../../bower_components/polymer/polymer.html">
 <link rel="import" href="../../../behaviors/rest-client-behavior.html">
 <link rel="import" href="../../shared/gr-account-link/gr-account-link.html">
+<link rel="import" href="../../shared/gr-label/gr-label.html">
 <link rel="import" href="../../shared/gr-date-formatter/gr-date-formatter.html">
 <link rel="import" href="../../shared/gr-editable-label/gr-editable-label.html">
 <link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
@@ -141,7 +142,12 @@ limitations under the License.
               as="label">
             <div class="labelValueContainer">
               <span class$="[[label.className]]">
-                <span class="labelValue">[[label.value]]</span>
+                <gr-label
+                    has-tooltip
+                    title="[[_computeValueTooltip(label.value, labelName)]]"
+                    class="labelValue">
+                  [[label.value]]
+                </gr-label>
                 <gr-account-link account="[[label.account]]"></gr-account-link>
               </span>
             </div>

polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata.js

@@ -117,6 +117,11 @@
       return result;
     },
 
+    _computeValueTooltip: function(score, labelName) {
+      var values = this.change.labels[labelName].values;
+      return values[score];
+    },
+
     _handleTopicChanged: function(e, topic) {
       if (!topic.length) { topic = null; }
       this.$.restAPI.setChangeTopic(this.change.id, topic);

polygerrit-ui/app/elements/shared/gr-js-api-interface/gr-js-api-interface_test.html

@@ -42,7 +42,7 @@ limitations under the License.
         getAccount: function() {
           return Promise.resolve({name: 'Judy Hopps'});
         },
-      })
+      });
       element = fixture('basic');
       errorStub = sinon.stub(console, 'error');
       Gerrit.install(function(p) { plugin = p; }, '0.1',

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

@@ -0,0 +1,23 @@
+<!--
+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="../../../behaviors/gr-tooltip-behavior/gr-tooltip-behavior.html">
+<dom-module id="gr-label">
+  <template strip-whitespace>
+    <content></content>
+  </template>
+  <script src="gr-label.js"></script>
+</dom-module>

polygerrit-ui/app/elements/shared/gr-label/gr-label.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-label',
+
+    behaviors: [
+      Gerrit.TooltipBehavior,
+    ],
+  });
+})();

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

@@ -20,7 +20,8 @@ limitations under the License.
   <template>
     <style>
       :host {
-        --gr-tooltip-arrow-size: .6em;
+        --gr-tooltip-arrow-size: .5em;
+        --gr-tooltip-arrow-center-offset: 0;
 
         background-color: #333;
         box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
@@ -38,6 +39,7 @@ limitations under the License.
         height: 0;
         position: absolute;
         left: calc(50% - var(--gr-tooltip-arrow-size));
+        margin-left: var(--gr-tooltip-arrow-center-offset);
         width: 0;
       }
     </style>
@@ -46,4 +48,3 @@ limitations under the License.
   </template>
   <script src="gr-tooltip.js"></script>
 </dom-module>
-