Modifications to performance monitor UI to address real webui.

chrome/browser/resources/performance_monitor/chart.css

 /* Copyright (c) 2012 The Chromium Authors. All rights reserved.
  * 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;
+  background: white;
+  border: 1px solid;
+  font: 0.6em;
+  position: absolute;
 }
-
-.hidden {
-   visibility: hidden;
-}