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 {

[Evan Stade, 2012/07/28 01:01:16]

you don't need any other qualifier than the id

[clintstaley, 2012/07/31 02:34:32]

CSS newbie mistakes: I thought perhaps greater specificity would be "good
style".  Fixed here and below.

-   float: left;
+  float: left;

[Evan Stade, 2012/07/31 22:57:02]

don't use float for layout. It's mostly just useful for allowing text to flow
around something.

[clintstaley, 2012/08/01 00:25:45]

I'd prefer not locking things down in absolute pixels, and I was going by the
model of the ubiquitous 3-column layout.  Should I use flexbox instead?

[Evan Stade, 2012/08/01 02:06:08]

I don't actually know what the layout of this page looks like, but yes, flexbox
is often the best bet.

[clintstaley, 2012/08/01 21:37:40]

Flexbox worked fine, much better than that float tinkertoy system. I can never
get the latter to behave properly.  

I did need to do some flexbox nesting to get the left/right layout arrangement. 
If there's a better way to do that, I'd be happy to hear about it.  Doesn't seem
as though there's any flag to tell a *child* to move left or right.  box-pack
looks like a global at the parent level... ?

 }
 
 div#chooseEvents {
-   float: left;
-   margin-left: 20px;
+  float: left;
+  margin-left: 20px;
 }
 
 div#chooseTimeRange {
-   float: right;
+  float: right;
 }
 
 div#chooseBlock {
-   background: #eee;
-   overflow: hidden;
+  background: #eee;
+  overflow: hidden;
 }
 
 div#charts {
-   height: 500px;
-   width: 900px;
+  height: 500px;
+  width: 900px;
 }
 
 div.chart {

[Evan Stade, 2012/07/28 01:01:16]

combine with the above

also I doubt you need the tag name here either.

[clintstaley, 2012/07/31 02:34:32]

Removed the tag name, but the #charts style applies to the div enclosing all
charts, of which there may eventually be more than just one.  The .chart style
applies to each individual chart div within the #charts div.  Added comments
clarifying this.

[Evan Stade, 2012/07/31 22:57:02]

in this case are you sure you need the height/width on #charts?

[clintstaley, 2012/08/01 00:25:45]

Well, I am still a little mystified on how to get divs to actually wrap around
their children.  Enlightenment would be appreciated.  If there are several
charts in the future, the only alternative I can think of is to make the height
of the #charts div be X*500px, and I'm thus leaving the #charts style as a
placeholder for that.

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

[Evan Stade, 2012/07/28 01:01:16]

white

[clintstaley, 2012/07/31 02:34:32]

Done.

+  border: 1px solid;
+  font: 0.6em;
+  position: absolute;
 }
 
 .hidden {

[Evan Stade, 2012/07/28 01:01:16]

what is the point of this rule? normally .hidden means display: none. Are you
overriding that somewhere?

[clintstaley, 2012/07/31 02:34:32]

Ditto on CSS newbie comment.  Fixed to display: none. 

(There does not appear to be a .hidden style already included in other .css
files.  Removal of this CSS entry causes class ="hidden" to fail in the HTML.)

[Evan Stade, 2012/07/31 22:57:02]

ah. You should be using the hidden attribute, not a class.

[clintstaley, 2012/08/01 00:25:45]

Done.

-   visibility: hidden;
+  visibility: hidden;
 }