Make tooltips match the rest of xhgui.

* Make the callgraph display fit into the viewport better. * Use buttons instead of a elements.
perftools · Jun 8, 2016 · 0ff9af8 · 0ff9af8
1 parent 71f521e
commit 0ff9af8
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 50 deletions.
diff --git a/src/templates/runs/flamegraph.twig b/src/templates/runs/flamegraph.twig
@@ -13,13 +13,13 @@
 
 <div class="row-fluid">
 <form class="search-form form-inline" id="form">
-	<div class="control-group span4">
+	<div class="control-group span8">
 		<a class="btn" id="flamegraph-reset">Reset zoom</a>
 	</div>
 	<div class="control-group span4">
 		<input type="text" class="form-control" id="term">
-		<a class="btn btn-primary" id="flamegraph-search">Search</a>
-		<a class="btn" id="flamegraph-clear">Clear</a>
+		<button class="btn btn-primary" id="flamegraph-search">Search</button>
+		<button class="btn" id="flamegraph-clear">Clear</button>
 	</div>
 </form>
 </div>
@@ -35,14 +35,15 @@
 <script src="{{ static('js/d3-tip-index.js') }}"></script>
 <script src="{{ static('js/d3.flameGraph.js') }}"></script>
 <script type="text/javascript">
+var width = parseInt($('#chart').css('width'), 10);
+
 var flameGraph = d3.flameGraph()
     .height(540)
-    .width(960)
+    .width(width)
     .cellHeight(18)
     .transitionDuration(750)
     .transitionEase('cubic-in-out')
-    .sort(true)
-    .title("");
+    .sort(true);
 
 var tip = d3.tip()
     .direction("s")

diff --git a/webroot/css/d3.flameGraph.css b/webroot/css/d3.flameGraph.css
@@ -41,54 +41,38 @@
 .d3-flame-graph-tip {
   line-height: 1;
   padding: 12px;
-  background: rgba(0, 0, 0, 0.8);
-  color: #fff;
-  border-radius: 2px;
+  background: #fff;
+  border-radius: 6px;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  color: #000;
   pointer-events: none;
 }
 
 /* Creates a small triangle extender for the tooltip */
+.d3-flame-graph-tip:before,
 .d3-flame-graph-tip:after {
-  box-sizing: border-box;
-  display: inline;
-  font-size: 10px;
-  width: 100%;
-  line-height: 1;
-  color: rgba(0, 0, 0, 0.8);
-  position: absolute;
-  pointer-events: none;
-}
-
-/* Northward tooltips */
-.d3-flame-graph-tip.n:after {
-  content: "\25BC";
-  margin: -1px 0 0 0;
-  top: 100%;
-  left: 0;
-  text-align: center;
+    pointer-events: none;
+    content: '';
+    position: absolute;
+    display: block;
+    width: 0;
+    height: 0;
+    border-width: 11px;
+    border-color: transparent;
+    border-style: solid;
+    left: 50%;
+    z-index: 2;
 }
-
-/* Eastward tooltips */
-.d3-flame-graph-tip.e:after {
-  content: "\25C0";
-  margin: -4px 0 0 0;
-  top: 50%;
-  left: -8px;
-}
-
-/* Southward tooltips */
-.d3-flame-graph-tip.s:after {
-  content: "\25B2";
-  margin: 0 0 1px 0;
-  top: -8px;
-  left: 0;
-  text-align: center;
+.d3-flame-graph-tip:after {
+    border-bottom-color: #fff;
+    margin-left: -11px;
+    top: -22px;
+    z-index: 2;
 }
-
-/* Westward tooltips */
-.d3-flame-graph-tip.w:after {
-  content: "\25B6";
-  margin: -4px 0 0 -1px;
-  top: 50%;
-  left: 100%;
+.d3-flame-graph-tip:before {
+    border-width: 12px;
+    border-bottom-color: #999;
+    margin-left: -12px;
+    top: -24px;
 }
diff --git a/webroot/js/d3.flameGraph.js b/webroot/js/d3.flameGraph.js
@@ -15,7 +15,7 @@
 
     var tip = d3.tip()
       .direction("s")
-      .offset([8, 0])
+      .offset([24, 0])
       .attr('class', 'd3-flame-graph-tip')
       .html(function(d) { return label(d); });