WebKitPerfMonitor: Tooltips can be cut off at the top
authorrniwa@webkit.org <rniwa@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 3 Apr 2014 07:08:32 +0000 (07:08 +0000)
committerrniwa@webkit.org <rniwa@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 3 Apr 2014 07:08:32 +0000 (07:08 +0000)
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: http://svn.webkit.org/repository/webkit/trunk@166701 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Websites/perf.webkit.org/ChangeLog
Websites/perf.webkit.org/public/common.css
Websites/perf.webkit.org/public/index.html
Websites/perf.webkit.org/public/js/helper-classes.js

index e963550..f4d3bdf 100644 (file)
@@ -1,5 +1,24 @@
 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
         https://bugs.webkit.org/show_bug.cgi?id=130937
 
index 676942b..6a566fd 100644 (file)
@@ -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 {
index 0fd3675..f758dcb 100644 (file)
@@ -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;
index aa2df8d..00ccf19 100755 (executable)
@@ -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 () {