diff -r 000000000000 -r 6474c204b198 browser/devtools/profiler/cleopatra/css/ui.css
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/browser/devtools/profiler/cleopatra/css/ui.css	Wed Dec 31 06:09:35 2014 +0100
@@ -0,0 +1,340 @@
+/* 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/. */
+
+body {
+  margin: 0;
+  font-family: "Lucida Grande", sans-serif;
+  font-size: 11px;
+}
+#mainarea {
+  position: absolute;
+  top: 0;
+  left: 0px;
+  bottom: 0;
+  right: 0;
+}
+.finishedProfilePane,
+.finishedProfilePaneBackgroundCover,
+.profileEntryPane,
+.profileProgressPane {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+.profileEntryPane {
+  overflow: auto;
+}
+.profileEntryPane,
+.profileProgressPane {
+  padding: 20px;
+  background-color: rgb(229,229,229);
+  background-image: url(../images/noise.png),
+                    linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.2));
+  text-shadow: rgba(255, 255, 255, 0.4) 0 1px;
+}
+.profileEntryPane h1 {
+  margin-top: 0;
+  font-size: 13px;
+  font-weight: normal;
+}
+.profileEntryPane input[type="file"] {
+  margin-bottom: 1em;
+}
+.profileProgressPane a {
+  position: absolute;
+  top: 30%;
+  left: 30%;
+  width: 40%;
+  height: 16px;
+}
+.profileProgressPane progress {
+  position: absolute;
+  top: 40%;
+  left: 30%;
+  width: 40%;
+  height: 16px;
+}
+.finishedProfilePaneBackgroundCover {
+  animation: darken 300ms cubic-bezier(0, 0, 1, 0);
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.finishedProfilePane {
+  animation: appear 300ms ease-out;
+}
+
+@keyframes darken {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes appear {
+  from {
+    transform: scale(0.3);
+    opacity: 0;
+    pointer-events: none;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+.breadcrumbTrail {
+  top: 0;
+  right: 0;
+  height: 29px;
+  left: 0;
+  background: linear-gradient(#FFF 50%, #F3F3F3 55%);
+  border-bottom: 1px solid #CCC;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+.breadcrumbTrailItem {
+  background: linear-gradient(#FFF 50%, #F3F3F3 55%);
+  display: block;
+  margin: 0;
+  padding: 0;
+  float: left;
+  line-height: 29px;
+  padding: 0 10px;
+  font-size: 12px;
+  -moz-user-select: none;
+  user-select: none;
+  cursor: default;
+  border-right: 1px solid #CCC;
+  max-width: 250px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  position: relative;
+}
+@keyframes slide-out {
+  from {
+    margin-left: -270px;
+    opacity: 0;
+  }
+  to {
+    margin-left: 0;
+    opacity: 1;
+  }
+}
+@keyframes slide-out {
+  from {
+    margin-left: -270px;
+    opacity: 0;
+  }
+  to {
+    margin-left: 0;
+    opacity: 1;
+  }
+}
+.breadcrumbTrailItem:not(:first-child) {
+  animation: slide-out;
+  animation-duration: 400ms;
+  animation-timing-function: ease-out;
+}
+.breadcrumbTrailItem.selected {
+  background: linear-gradient(#E5E5E5 50%, #DADADA 55%);
+}
+.breadcrumbTrailItem:not(.selected):active:hover {
+  background: linear-gradient(#F2F2F2 50%, #E6E6E6 55%);
+}
+.breadcrumbTrailItem.deleted {
+  transition: 400ms ease-out;
+  transition-property: opacity, margin-left;
+  opacity: 0;
+  margin-left: -270px;
+}
+.treeContainer {
+  /*For asbolute position child*/
+  position: relative;
+}
+.tree {
+  height: 100%;
+}
+#sampleBar {
+  position: absolute;
+  float: right;
+  left: auto;
+  top: 0;
+  right: 0;
+  height: 100%;
+}
+#fileList {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 360px;
+  width: 199px;
+  overflow: auto;
+  padding: 0;
+  margin: 0;
+  background: #DBDFE7;
+  border-right: 1px solid #BBB;
+  cursor: pointer;
+}
+#infoBar dl {
+  margin: 0;
+}
+#infoBar dt,
+#infoBar dd {
+  display: inline;
+}
+#infoBar dt {
+  font-weight: bold;
+}
+#infoBar dt::after {
+  content: " ";
+  white-space: pre;
+}
+#infoBar dd {
+  margin-left: 0;
+}
+#infoBar dd::after {
+  content: "\a";
+  white-space:pre;
+}
+.sideBar {
+  box-sizing: border-box;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 200px;
+  height: 480px;
+  overflow: auto;
+  padding: 3px;
+  background: #EEE;
+  border-top: 1px solid #BBB;
+  border-right: 1px solid #BBB;
+}
+.sideBar h2 {
+  font-size: 1em;
+  padding: 1px 3px;
+  margin: 3px -3px;
+  background: rgba(255, 255, 255, 0.6);
+  border: solid #CCC;
+  border-width: 1px 0;
+}
+.sideBar h2:first-child {
+  margin-top: -4px;
+}
+.sideBar ul {
+  margin: 2px 0;
+  padding-left: 18px;
+}
+.pluginview {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  background-color: white;
+}
+.pluginviewIFrame {
+  border-style: none;
+  width: 100%;
+  height: 100%;
+}
+.histogram {
+  position: relative;
+  height: 60px;
+  right: 0;
+  left: 0;
+  border-bottom: 1px solid #CCC;
+  background: linear-gradient(#EEE, #CCC);
+}
+.histogramHilite {
+  position: absolute;
+  pointer-events: none;
+}
+.histogramHilite:not(.collapsed) {
+  background: rgba(150, 150, 150, 0.5);
+}
+.histogramMouseMarker {
+  position: absolute;
+  pointer-events: none;
+  top: 0;
+  width: 1px;
+  height: 100%;
+}
+.histogramMouseMarker:not(.collapsed) {
+    background: rgba(0, 0, 150, 0.7);
+}
+#iconbox {
+  display: none;
+}
+#filter, #showall {
+  cursor: pointer;
+}
+.markers {
+  display: none;
+}
+.hidden {
+  display: none !important;
+}
+.fileListItem {
+  display: block;
+  margin: 0;
+  padding: 0;
+  height: 40px;
+  text-indent: 8px;
+}
+.fileListItem.selected {
+  background: linear-gradient(#4B91D7 1px, #5FA9E4 1px, #5FA9E4 2px, #58A0DE 3px, #2B70C7 39px, #2763B4 39px);
+  color: #FFF;
+  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+}
+.fileListItemTitle {
+  display: block;
+  padding-top: 6px;
+  font-size: 12px;
+}
+.fileListItemDescription {
+  display: block;
+  line-height: 15px;
+  font-size: 9px;
+}
+.busyCover {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
+  background: rgba(120, 120, 120, 0.2);
+  transition: 200ms ease-in-out;
+  transition-property: visibility, opacity;
+}
+.busyCover.busy {
+  visibility: visible;
+  opacity: 1;
+}
+.busyCover::before {
+  content: url(../images/throbber.svg);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: -12px;
+}
+label {
+  -moz-user-select: none;
+}
+.videoPane {
+  background-color: white;
+  width: 100%;
+}
+.video {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}