DOMUI: Refactor the new overlay style and apply it to all overlays.

chrome/browser/resources/options/autofill_edit_address_overlay.html

Index: chrome/browser/resources/options/autofill_edit_address_overlay.html
diff --git a/chrome/browser/resources/options/autofill_edit_address_overlay.html b/chrome/browser/resources/options/autofill_edit_address_overlay.html
index 9528ccf9116e53ec6538e01f523ac5ea1fc98237..9b2110e53fd57b1d56f34d39d62af9df69988755 100644
--- a/chrome/browser/resources/options/autofill_edit_address_overlay.html
+++ b/chrome/browser/resources/options/autofill_edit_address_overlay.html
@@ -1,103 +1,104 @@
 <div class="page hidden" id="autoFillEditAddressOverlay">
   <h1 id="autoFillAddressTitle"></h1>
-
-  <div class="input">
-    <label id="fullNameLabel">
-      <div><span i18n-content="fullNameLabel"></span></div>
-      <input type="text" class="form" class="form" id="fullName">
-    </label>
-  </div>
-  <div class="input">
-    <label id="companyNameLabel">
-      <div><span i18n-content="companyNameLabel"></span></div>
-      <input type="text" class="form" class="form" id="companyName">
-    </label>
-  </div>
-  <div class="input">
-    <label id="addrLine1Label">
-      <div><span i18n-content="addrLine1Label"></span></div>
-      <input type="text" class="form" class="form" id="addrLine1">
-    </label>
-  </div>
-  <div class="input">
-    <label id="addrLine2Label">
-      <div><span i18n-content="addrLine2Label"></span></div>
-      <input type="text" class="form" class="form" id="addrLine2">
-    </label>
-  </div>
-
-  <div class="table">
-    <div class="row">
-      <div class="input cell">
-        <label id="cityLabel" for="city">
-          <span i18n-content="cityLabel"></span>
-        </label>
-      </div>
-      <div class="input cell">
-        <label id="stateLabel" for="state">
-          <span i18n-content="stateLabel"></span>
-        </label>
-      </div>
-      <div class="input cell">
-        <label id="zipCodeLabel" for="zipCode">
-          <span i18n-content="zipCodeLabel"></span>
-        </label>
-      </div>
+  <div class="content-area">
+    <div class="input">
+      <label id="fullNameLabel">
+        <div><span i18n-content="fullNameLabel"></span></div>
+        <input type="text" class="form" class="form" id="fullName">
+      </label>
     </div>
-    <div class="row">
-      <div class="input cell">
-        <input type="text" class="form" id="city">
-      </div>
-      <div class="input cell">
-        <input type="text" class="form" id="state">
-      </div>
-      <div class="input cell">
-        <input type="text" class="form" id="zipCode">
-      </div>
+    <div class="input">
+      <label id="companyNameLabel">
+        <div><span i18n-content="companyNameLabel"></span></div>
+        <input type="text" class="form" class="form" id="companyName">
+      </label>
     </div>
-  </div>
-
-  <div class="input">
-    <label id="countryLabel">
-      <div><span i18n-content="countryLabel"></span></div>
-      <input type="text" class="form" class="form" id="country">
-    </label>
-  </div>
-
-  <div class="table">
-    <div class="row">
-      <div class="input cell">
-        <label id="phoneLabel" for="phone">
-          <span i18n-content="phoneLabel"></span>
-        </label>
+    <div class="input">
+      <label id="addrLine1Label">
+        <div><span i18n-content="addrLine1Label"></span></div>
+        <input type="text" class="form" class="form" id="addrLine1">
+      </label>
+    </div>
+    <div class="input">
+      <label id="addrLine2Label">
+        <div><span i18n-content="addrLine2Label"></span></div>
+        <input type="text" class="form" class="form" id="addrLine2">
+      </label>
+    </div>
+    <div class="table">
+      <div class="row">
+        <div class="input cell">
+          <label id="cityLabel" for="city">
+            <span i18n-content="cityLabel"></span>
+          </label>
+        </div>
+        <div class="input cell">
+          <label id="stateLabel" for="state">
+            <span i18n-content="stateLabel"></span>
+          </label>
+        </div>
+        <div class="input cell">
+          <label id="zipCodeLabel" for="zipCode">
+            <span i18n-content="zipCodeLabel"></span>
+          </label>
+        </div>
       </div>
-      <div class="input cell">
-        <label id="faxLabel" for="fax">
-          <span i18n-content="faxLabel"></span>
-        </label>
+      <div class="row">
+        <div class="input cell">
+          <input type="text" class="form" id="city">
+        </div>
+        <div class="input cell">
+          <input type="text" class="form" id="state">
+        </div>
+        <div class="input cell">
+          <input type="text" class="form" id="zipCode">
+        </div>
       </div>
     </div>
-    <div class="row">
-      <div class="input cell">
-        <input type="text" class="form" class="form" id="phone">
+    <div class="input">
+      <label id="countryLabel">
+        <div><span i18n-content="countryLabel"></span></div>
+        <input type="text" class="form" class="form" id="country">
+      </label>
+    </div>
+    <div class="table">

[stuartmorgan, 2011/01/22 00:48:05]

I know this is pre-existing but... why have we completely re-invented all the
table elements as classes? If this is conceptually a table, why not use a table?

[James Hawkins, 2011/01/22 01:39:22]

Because tables suck.

[stuartmorgan, 2011/01/24 17:04:49]

I'm not aware of any reason tables suck for structurally tabular data... we can
talk about this offline since it's out of scope though.

+      <div class="row">
+        <div class="input cell">
+          <label id="phoneLabel" for="phone">
+            <span i18n-content="phoneLabel"></span>
+          </label>
+        </div>
+        <div class="input cell">
+          <label id="faxLabel" for="fax">
+            <span i18n-content="faxLabel"></span>
+          </label>
+        </div>
       </div>
-      <div class="input cell">
-        <input type="text" class="form" class="form" id="fax">
+      <div class="row">
+        <div class="input cell">
+          <input type="text" class="form" class="form" id="phone">
+        </div>
+        <div class="input cell">
+          <input type="text" class="form" class="form" id="fax">
+        </div>
       </div>
     </div>
+    <div class="input">
+      <label id="emailLabel">
+        <div><span i18n-content="emailLabel"></span></div>
+        <input type="text" class="form" class="form" id="email">
+      </label>
+    </div>
   </div>
-
-  <div class="input">
-    <label id="emailLabel">
-      <div><span i18n-content="emailLabel"></span></div>
-      <input type="text" class="form" class="form" id="email">
-    </label>
-  </div>
-
-  <div class="action-area button-strip">
-    <button type="reset" id="autoFillEditAddressCancelButton"
+  <div class="action-area">
+    <span class="action-area-left"></span>
+    <span>
+      <div class="button-strip">
+        <button type="reset" id="autoFillEditAddressCancelButton"
             i18n-content="cancel"></button>
-    <button type="submit" id="autoFillEditAddressApplyButton" disabled
+        <button type="submit" id="autoFillEditAddressApplyButton" disabled
             i18n-content="ok"></button>
+      </div>
+    </span>
   </div>
 </div>