[invalidations] Convert invalidations to use TreeOutline

Source/devtools/front_end/timeline/timelinePanel.css

 /*
  * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org>
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
@@ skipping 845 matching lines @@
 
 .timeline-paint-profiler-log-split > div:last-child {
     background-color: #eee;
     z-index: 0;
 }
 
 .timeline-gap {
     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 {
     margin-left: 12px;
     margin-right: 6px;
     color: #888;
 }