Version 2 of CPM UI, with rearranged controls, multiple graphs, event rollovers, etc.

chrome/browser/resources/performance_monitor/chart.css

Index: chrome/browser/resources/performance_monitor/chart.css
diff --git a/chrome/browser/resources/performance_monitor/chart.css b/chrome/browser/resources/performance_monitor/chart.css
index db88cf5cc2a5fb816f9574b75e968827bcaf8872..79dda2e70195eeea6bfb08006896ea2dc8b4572a 100644
--- a/chrome/browser/resources/performance_monitor/chart.css
+++ b/chrome/browser/resources/performance_monitor/chart.css
@@ -3,11 +3,12 @@
  * found in the LICENSE file. */
 
 #choose-block {
-  -webkit-box-orient: horizontal;
-  background: #eee;
+  -webkit-box-orient: vertical;
+  background: rgb(238, 238, 255);

[Jeffrey Yasskin, 2012/08/30 00:15:10]

Why rgb(...) instead of #eef?

[clintstaley, 2012/08/30 21:40:18]

The automated style checker dinged me for the #eef, saying I should use rgb
notation for non-gray shades.

[Jeffrey Yasskin, 2012/08/31 22:28:16]

So weird. 

   display: -webkit-box;
 }
 
+
 .spacer {
   -webkit-box-flex: 1;
 }
@@ -19,12 +20,74 @@
 #charts,
 .chart {
   height: 500px;
-  width: 900px;
+  margin-left: 1.5em;
+  margin-top: 1.5em;
+  min-width: 800px;
+  width: 80%;
 }
 
-div.event-label {
-  background: white;
+.event-label {
+  background: #eee;
   border: 1px solid;
-  font: 0.6em;
+  font-family: Arial, sans-serif;
+  font-size: 0.7em;
   position: absolute;
 }
+
+/* Three levels of label for lefthand control navigation.*/
+.tab-label {
+  font: 1.4em bold;
+  margin-bottom: .5em;
+  margin-top: 1em;
+}
+
+.category-label {
+  font: 1.1em bold;
+  margin-top: .3em;
+}
+
+.detail-label {
+  font: 1em;
+}
+
+.detail-checkbox,
+.radio {
+  margin-left: 18px;
+}
+
+.color-icon {
+  height: 1em;
+  min-height: 1em;
+  min-width: 1em;
+  opacity: 0.7;
+  visibility: hidden;
+  width: 1em;
+}
+
+.horizontal-box {
+  -webkit-box-orient: horizontal;
+  display: -webkit-box;
+}
+
+button {
+  -webkit-padding-end: 10px;
+  -webkit-padding-start: 10px;
+  background-color: buttonface;
+  background-image: -webkit-linear-gradient(#EDEDED, #EDEDED 38%, #DEDEDE);
+  border: 1px solid rgba(0, 0, 0, 0.25);
+  border-radius: 2px;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08),
+      inset 0 1px 2px rgba(255, 255, 255, 0.75);
+  color: #444;
+  font: inherit;
+  height: 1.5em;
+  margin: 0 1px 0 0;
+  min-width: 4em;
+  text-shadow: #F0F0F0 0px 1px 0px;
+}
+
+button:active {
+  background-image: -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
+  box-shadow: none;
+  text-shadow: none;
+}