diff -r 000000000000 -r 6474c204b198 browser/devtools/profiler/cleopatra/css/tree.css
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/browser/devtools/profiler/cleopatra/css/tree.css	Wed Dec 31 06:09:35 2014 +0100
@@ -0,0 +1,236 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+.treeViewContainer {
+  -moz-user-select: none;
+  user-select: none;
+  cursor: default;
+  line-height: 16px;
+  height: 100%;
+  outline: none; /* override the browser's focus styling */
+  position: relative;
+}
+
+.treeHeader {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  height: 16px;
+  margin: 0;
+  padding: 0;
+}
+
+.treeColumnHeader {
+  position: absolute;
+  display: block;
+  background: linear-gradient(#FFF 45%, #EEE 60%);
+  margin: 0;
+  padding: 0;
+  top: 0;
+  height: 15px;
+  line-height: 15px;
+  border: 0 solid #CCC;
+  border-bottom-width: 1px;
+  text-indent: 5px;
+}
+
+.treeColumnHeader:not(:last-child) {
+  border-right-width: 1px;
+}
+
+.treeColumnHeader0 {
+  left: 0;
+  width: 86px;
+}
+
+.treeColumnHeader1 {
+  left: 99px;
+  width: 35px;
+}
+
+.treeColumnHeader0,
+.treeColumnHeader1 {
+  text-align: right;
+  padding-right: 12px;
+}
+
+.treeColumnHeader2 {
+  left: 147px;
+  right: 0;
+}
+
+.treeViewVerticalScrollbox {
+  position: absolute;
+  top: 16px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
+
+.treeViewNode,
+.treeViewHorizontalScrollbox {
+  display: block;
+  margin: 0;
+  padding: 0;
+}
+
+.treeViewNode {
+  min-width: -moz-min-content;
+  white-space: nowrap;
+}
+
+.treeViewHorizontalScrollbox {
+  padding-left: 150px;
+  overflow: hidden;
+}
+
+.treeViewVerticalScrollbox,
+.treeViewHorizontalScrollbox {
+  background: linear-gradient(white, white 50%, #F0F5FF 50%, #F0F5FF);
+  background-size: 100px 32px;
+}
+
+.leftColumnBackground {
+  background: linear-gradient(left, transparent, transparent 98px, #CCC 98px, #CCC 99px, transparent 99px),
+    linear-gradient(white, white 50%, #F0F5FF 50%, #F0F5FF);
+  background-size: auto, 100px 32px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 146px;
+  min-height: 100%;
+  border-right: 1px solid #CCC;
+}
+
+.sampleCount,
+.samplePercentage,
+.selfSampleCount {
+  position: absolute;
+  text-align: right;
+}
+
+.sampleCount {
+  left: 2px;
+  width: 50px;
+}
+
+.samplePercentage {
+  left: 55px;
+  width: 40px;
+}
+
+.selfSampleCount {
+  left: 98px;
+  width: 45px;
+  padding-right: 2px;
+  border: solid #CCC;
+  border-width: 0 1px;
+}
+
+.libraryName {
+  margin-left: 10px;
+  color: #999;
+}
+
+.treeViewNode > .treeViewNodeList {
+  margin-left: 1em;
+}
+
+.treeViewNode.collapsed > .treeViewNodeList {
+  display: none;
+}
+
+.treeLine {
+  /* extend the selection background almost infinitely to the left */
+  margin-left: -10000px;
+  padding-left: 10000px;
+}
+
+.treeLine.selected {
+  color: black;
+  background-color: -moz-dialog;
+}
+
+.treeLine.selected > .sampleCount {
+  background-color: inherit;
+  margin-left: -2px;
+  padding-left: 2px;
+  padding-right: 95px;
+  margin-right: -95px;
+}
+
+.treeViewContainer:focus .treeLine.selected {
+  color: highlighttext;
+  background-color: highlight;
+}
+
+.treeViewContainer:focus .treeLine.selected > .libraryName {
+  color: #CCC;
+}
+
+.expandCollapseButton,
+.focusCallstackButton {
+  background: none 0 0 no-repeat transparent;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  width: 16px;
+  height: 16px;
+  overflow: hidden;
+  vertical-align: top;
+  color: transparent;
+  font-size: 0;
+}
+
+.expandCollapseButton {
+  background-image: url(../images/treetwisty.svg);
+}
+
+.focusCallstackButton {
+  background-image: url(../images/circlearrow.svg);
+  margin-left: 5px;
+  visibility: hidden;
+}
+
+.expandCollapseButton:active:hover,
+.focusCallstackButton:active:hover {
+  background-position: -16px 0;
+}
+
+.treeViewNode.collapsed > .treeLine > .expandCollapseButton {
+  background-position: 0 -16px;
+}
+
+.treeViewNode.collapsed > .treeLine > .expandCollapseButton:active:hover {
+  background-position: -16px -16px;
+}
+
+.treeViewContainer:focus .treeLine.selected > .expandCollapseButton,
+.treeViewContainer:focus .treeLine.selected > .focusCallstackButton {
+  background-position: -32px 0;
+}
+
+.treeViewContainer:focus .treeViewNode.collapsed > .treeLine.selected > .expandCollapseButton {
+  background-position: -32px -16px;
+}
+
+.treeViewContainer:focus .treeLine.selected > .expandCollapseButton:active:hover,
+.treeViewContainer:focus .treeLine.selected > .focusCallstackButton:active:hover {
+  background-position: -48px 0;
+}
+
+.treeViewContainer:focus .treeViewNode.collapsed > .treeLine.selected > .expandCollapseButton:active:hover {
+  background-position: -48px -16px;
+}
+
+.treeViewNode.leaf > * > .expandCollapseButton {
+  visibility: hidden;
+}
+
+.treeLine:hover > .focusCallstackButton {
+  visibility: visible;
+}