From 104f818f0667e7577fb35a925d4acd00da5e86c2 Mon Sep 17 00:00:00 2001
From: Timo Tijhof <krinklemail@gmail.com>
Date: Mon, 13 Nov 2017 14:53:19 -0800
Subject: [PATCH] flamegraph: Clean up flameGraph.css patch (1)

Follows-up 71f521e3d4dfdb7.

* Undo the overrides and place them in xhgui.css instead.
* Add a class "xhgui-flamegraph" to the main chart element
  so that we can uniquely address flamegraphs within xhgui
  with a higher CSS specificity selector (using the same selector
  as in d3.flameGraph.css won't work given that they have the
  same weight, and load order would break the tie, which currently
  means the upstream one applies last, use a stronger selector
  instead of relying on load order).

This is in preparation of upgrading d3.flameGraph to a newer
version from upstream.

Ref perftools/xhgui#211.
---
 webroot/css/d3.flameGraph.css | 12 +++++++-----
 webroot/css/xhgui.css         | 24 ++++++++++++++++++++++++
 2 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/webroot/css/d3.flameGraph.css b/webroot/css/d3.flameGraph.css
index 7136a79d7..a9636526f 100644
--- a/webroot/css/d3.flameGraph.css
+++ b/webroot/css/d3.flameGraph.css
@@ -1,14 +1,13 @@
 .d3-flame-graph rect {
-  stroke: #fff;
+  stroke: #EEEEEE;
   fill-opacity: .8;
 }
 
-.d3-flame-graph .frame {
+.d3-flame-graph rect:hover {
+  stroke: #474747;
+  stroke-width: 0.5;
   cursor: pointer;
 }
-.d3-flame-graph .frame:hover .label {
-  color: #fff;
-}
 
 .d3-flame-graph .label {
   pointer-events: none;
@@ -32,6 +31,7 @@
 
 .d3-flame-graph .title {
   font-size: 20px;
+  font-family: Verdana;
 }
 
 .d3-flame-graph .label {
@@ -40,6 +40,8 @@
 
 .d3-flame-graph-tip {
   line-height: 1;
+  font-family: Verdana;
+  font-size: 12px;
   padding: 12px;
   background: #fff;
   border-radius: 6px;
diff --git a/webroot/css/xhgui.css b/webroot/css/xhgui.css
index 5068fd0b0..a54da767b 100644
--- a/webroot/css/xhgui.css
+++ b/webroot/css/xhgui.css
@@ -375,6 +375,30 @@ tr .no-results {
     color: black;
 }
 
+/**
+ * FlameGraph
+ *
+ * Note: Uses "body" selector to make sure specificity is higher
+ * than the original styles in d3.flameGraph.css.
+ */
+
+/* Use white stroke instead of grey, to make them invisible on our background */
+body .d3-flame-graph rect,
+body .d3-flame-graph rect:hover {
+    stroke: #fff;
+    stroke-width: 1px;
+}
+/* Instead of stroke, change text color on hover */
+body .d3-flame-graph .frame:hover .label {
+    color: #fff;
+}
+
+/* Inherit our font style instead of hardcoded Verdana 12px */
+body .d3-flame-graph-tip {
+  font-family: inherit;
+  font-size: inherit;
+}
+
 /**
  * Run details
  */