Modifications to performance monitor UI to address real webui.

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 a7aa65679b1ad364155d0b989f5eb51bcf12aa13..f17de7856036dba593c425d407b0802fc2b63e83 100644
--- a/chrome/browser/resources/performance_monitor/chart.css
+++ b/chrome/browser/resources/performance_monitor/chart.css
@@ -2,41 +2,33 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
-div#chooseMetrics {
-   float: left;
+#chooseBlock {

[Dan Beam, 2012/08/03 18:40:36]

the style guide says this should be #choose-block

[clintstaley, 2012/08/06 21:06:47]

Sorry.  Changed here and elsewhere.

+  -webkit-box-orient: horizontal;
+  background: #eee;
+  display: -webkit-box;
 }
 
-div#chooseEvents {
-   float: left;
-   margin-left: 20px;
+.spacer {
+  -webkit-box-flex: 1;
 }
 
-div#chooseTimeRange {
-   float: right;
+/* Style for div enclosing all charts, collectively.  Increase these
+ * dimensions if you redesign for more than one chart.*/

[Dan Beam, 2012/08/03 18:40:36]

some people prefer not to use "we" or "you" in comments, additionally 1 \s
between sentences in comments

[clintstaley, 2012/08/06 21:06:47]

Can change it if you really feel strongly, but my own style is to use these more
familiar pronouns.  The alternative of passive voice or "if one redesigns"
doesn't seem as readable.

[Evan Stade, 2012/08/07 00:46:35]

I don't care about the use of pronouns but it's pretty easy to avoid them
without resorting to passive voice. "The dimensions would need to be larger if
#charts contained more than one chart."

+#charts {
+  height: 500px;
+  width: 900px;
 }
 
-div#chooseBlock {
-   background: #eee;
-   overflow: hidden;
-}
-
-div#charts {
-   height: 500px;
-   width: 900px;
-}
-
-div.chart {
-   height: 500px;
-   width: 900px;
+/* Style for any div that encloses a single chart -- a child div of the
+ * larger #charts div.*/
+.chart {

[Dan Beam, 2012/08/03 18:40:36]

why can't these two rules be combined until they differ, i.e.

  #charts,
  .charts {
    height: 500px;
    width: 900px;
  }

?

[clintstaley, 2012/08/06 21:06:47]

Done.

+  height: 500px;
+  width: 900px;
 }
 
 div.event-label {
-   background: #fff;
-   border: 1px solid;
-   font: 0.6em;
-   position: absolute;
-}
-
-.hidden {
-   visibility: hidden;
+  background: white;
+  border: 1px solid;
+  font: 0.6em;
+  position: absolute;
 }