flamegraph: Clean up flameGraph.css patch (1)

Follows-up 71f521e.

* 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#211.

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;

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
  */