WebKitPerfMonitor: Tooltips can be cut off at the top

https://bugs.webkit.org/show_bug.cgi?id=130960

Reviewed by Andreas Kling.

* public/common.css:
(#title): Removed the gradients, box shadows, and border from the header.
(#title h1): Reduce the font size.
(#title ul): Use line-height to vertically align the navigation bar instead of specifying a padding atop.
* public/index.html:
(.tooltop:before): Added. Identical to .tooltop:after except it's upside down (arrow facing up).
(.tooltip.inverted:before): Show the arrow facing up when .inverted is set.
(.tooltip.inverted:before): Hide the arrow facing down when .inverted is set.
* public/js/helper-classes.js:
(Tooltip.show): Show the tooltip below the point if placing it above the point results in the top of the
tooltip extending above y=0.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@166701 268f45cc-cd09-0410-ab3c-d52691b4dbfc

diff --git a/Websites/perf.webkit.org/ChangeLog b/Websites/perf.webkit.org/ChangeLog
index e9635501c1acf894da3c9084661d925e3772dd92..f4d3bdfc71319930719545a80f74aa82946305c8 100644 (file)
--- a/Websites/perf.webkit.org/ChangeLog
+++ b/Websites/perf.webkit.org/ChangeLog
@@ -1,3 +1,22 @@
+2014-04-03  Ryosuke Niwa  <rniwa@webkit.org>
+
+        WebKitPerfMonitor: Tooltips can be cut off at the top
+        https://bugs.webkit.org/show_bug.cgi?id=130960
+
+        Reviewed by Andreas Kling.
+
+        * public/common.css:
+        (#title): Removed the gradients, box shadows, and border from the header.
+        (#title h1): Reduce the font size.
+        (#title ul): Use line-height to vertically align the navigation bar instead of specifying a padding atop.
+        * public/index.html:
+        (.tooltop:before): Added. Identical to .tooltop:after except it's upside down (arrow facing up).
+        (.tooltip.inverted:before): Show the arrow facing up when .inverted is set.
+        (.tooltip.inverted:before): Hide the arrow facing down when .inverted is set.
+        * public/js/helper-classes.js:
+        (Tooltip.show): Show the tooltip below the point if placing it above the point results in the top of the
+        tooltip extending above y=0.
+
 2014-04-03  Ryosuke Niwa  <rniwa@webkit.org>
 
         WebKitPerfMonitor: Y-axis adjustment is too aggressive

diff --git a/Websites/perf.webkit.org/public/common.css b/Websites/perf.webkit.org/public/common.css
index 676942bb8398241dc7d9cf2a7264bd2231bab0b1..6a566fd8a7d3bdcf6d85d64625eb4144ecb56011 100644 (file)
--- a/Websites/perf.webkit.org/public/common.css
+++ b/Websites/perf.webkit.org/public/common.css
@@ -11,17 +11,6 @@ body {
 }
 
 #title {
-    background-image: linear-gradient(bottom, rgb(240,240,240) 31%, rgb(255,255,255) 90%);
-    background-image: -o-linear-gradient(bottom, rgb(240,240,240) 31%, rgb(255,255,255) 90%);
-    background-image: -moz-linear-gradient(bottom, rgb(240,240,240) 31%, rgb(255,255,255) 90%);
-    background-image: -webkit-linear-gradient(bottom, rgb(240,240,240) 31%, rgb(255,255,255) 90%);
-    background-image: -ms-linear-gradient(bottom, rgb(240,240,240) 31%, rgb(255,255,255) 90%);
-    -moz-box-shadow:    1px 1px 3px 1px #ccc;
-    -webkit-box-shadow: 1px 1px 3px 1px #ccc;
-    box-shadow:         1px 1px 3px 1px #ccc;
-    padding: 5px 10px;
-    margin: 0 0 10px 0;
-    border-radius: 5px;
     position: relative;
 }
 
@@ -30,7 +19,7 @@ body {
     text-shadow: #bbb 1px 1px 2px;
     margin: 0;
     padding: 0;
-    font-size: 2em;
+    font-size: 1.5em;
 }
 #title li, #title ul {
     list-style: none;
@@ -55,7 +44,7 @@ body {
     vertical-align: middle;
     top: 5px;
     right: 20px;
-    padding-top: 0.6em;
+    line-height: 1.5em;
 }
 
 a {

diff --git a/Websites/perf.webkit.org/public/index.html b/Websites/perf.webkit.org/public/index.html
index 0fd36750bb50b1292e5b88f656c5627a03b6ca32..f758dcbdc41492e44c799a793d241001566a0606 100644 (file)
--- a/Websites/perf.webkit.org/public/index.html
+++ b/Websites/perf.webkit.org/public/index.html
@@ -251,6 +251,28 @@ td, th {
     white-space: nowrap;
 }
 
+.tooltip:before {
+    position: absolute;
+    width: 0;
+    height: 0;
+    left: 50%;
+    margin-left: -9px;
+    top: -19px;
+    content: "";
+    display: none;
+    border-style: solid;
+    border-width: 10px;
+    border-color: transparent transparent #333 transparent;
+}
+
+.tooltip.inverted:before {
+    display: block;
+}
+
+.tooltip.inverted:after {
+    display: none;
+}
+
 .tooltip:after {
     position: absolute;
     width: 0;

diff --git a/Websites/perf.webkit.org/public/js/helper-classes.js b/Websites/perf.webkit.org/public/js/helper-classes.js
index aa2df8de275f7499eab8fed25aceb9ee5aa948a9..00ccf1909c36828e9c65c39a7a6e9c323613a33e 100755 (executable)
--- a/Websites/perf.webkit.org/public/js/helper-classes.js
+++ b/Websites/perf.webkit.org/public/js/helper-classes.js
@@ -377,7 +377,13 @@ function Tooltip(containerParent, className) {
         container.innerHTML = content;
         $(container).show();
         // FIXME: Style specific computation like this one shouldn't be in Tooltip class.
-        $(container).offset({left: x - $(container).outerWidth() / 2, top: y - $(container).outerHeight() - 15});
+        var top = y - $(container).outerHeight() - 15;
+        if (top < 0) {
+            $(container).addClass('inverted');
+            top = y + 15;
+        } else
+            $(container).removeClass('inverted');
+        $(container).offset({left: x - $(container).outerWidth() / 2, top: top});
     }
 
     this.hide = function () {