[invalidations] Convert invalidations to use TreeOutline

Source/devtools/front_end/timeline/timelinePanel.css

Index: Source/devtools/front_end/timeline/timelinePanel.css
diff --git a/Source/devtools/front_end/timeline/timelinePanel.css b/Source/devtools/front_end/timeline/timelinePanel.css
index 41f444194bb150a678da200dbe01b0b54aacff30..287aa4839d4398286f98ae72cd3e23c4470eab6f 100644
--- a/Source/devtools/front_end/timeline/timelinePanel.css
+++ b/Source/devtools/front_end/timeline/timelinePanel.css
@@ -863,21 +863,26 @@
     flex: none;
 }
 
-.invalidations-group {
-    margin-top: 4px;
-    line-height: normal;
+.invalidations-tree {

[pfeldman, 2015/04/07 15:02:09]

You should instead create a small dedicated css file that you would inject via
treeoutlineinshadow's registerRequiredCSS

+    border-left: 1px solid #e1e1e1;
+    padding-left: 5px;
+    width: 100%;
 }
 
-.invalidations-group > .header {
-    padding-left: 0;
+.invalidations-tree::shadow .children li::before {
+    display: none;
 }
 
-.invalidations-group > .content {
-    margin-left: 25px;
+.invalidations-tree::shadow .content {
+    margin-bottom: 4px;
 }
 
-.invalidations-group > .content > .node-list {
-    border-left: 1px solid #e1e1e1;
+.invalidations-tree::shadow .content .stack-preview-container {
+    margin-left: 8px;
+}
+
+.invalidations-tree::shadow .content .node-list {
+    margin-left: 10px;
 }
 
 .timeline.panel .status-bar::shadow .timeline-status-bar-group-label {