DOMUI: Implement new-style password manager.

chrome/browser/resources/options/options_page.css

 body {
   -webkit-user-select: none;
   cursor: default;
   font-size: 100%;
 }
 
 #settings-title {
   -webkit-padding-end: 24px;
   color: #53637d;
   font-size: 200%;
@@ skipping 373 matching lines @@
 list > .heading {
   color: #666666;
 }
 
 list > .heading:hover {
   background-color: transparent;
   border-color: transparent;
 }
 
 list .deletable-item {
+  -webkit-box-align: center;
+  -webkit-box-flex: 1;
   display: -webkit-box;
 }
 
-list .deletable-item > :first-child {
-  -webkit-box-flex: 1;
-}
-
 list .close-button {
   background-color: transparent;
   /* TODO(stuartmorgan): Replace with real images once they are available. */
   background-image: url("../../../app/theme/close_bar.png");
   border: none;
   height: 16px;
   width: 16px;
 }
 
 list > *:not(:hover) .close-button, list[disabled] .close-button {
-  display: none;
+  visibility: hidden;

[arv (Not doing code reviews), 2010/12/17 20:07:34]

Now that we control this using visibility maybe we should use "opacity: 0" and
"pointer-events: none" so that we can have a transition on the opacity?

[James Hawkins, 2010/12/17 21:32:40]

Can you describe the entire flow that you're imagining? Once the user hovers
over another item, do we transition the highlighting of the old and the new list
item as well?

 }
 
 list .close-button:hover {
   background-image: url("../../../app/theme/close_bar_h.png");
 }
 
 list .close-button:active {
   background-image: url("../../../app/theme/close_bar_p.png");
 }
 
@@ skipping 86 matching lines @@
 label.radio > span,
 .suboption {
   -webkit-margin-start: 16px;
   display: block;
 }
 
 html[os=mac] label.checkbox > input,
 html[os=mac] label.radio > input {
   margin-top: 2px;
 }