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

BUG=none
TEST=none

Review URL: http://codereview.chromium.org//6372010

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@72356 0039d316-1c4b-4281-b951-d872f2087c98

chrome/browser/resources/options/add_startup_page_overlay.html

 <div class="page hidden" id="addStartupPageOverlay">
   <h1 i18n-content="addStartupPageTitle"></h1>
-
   <form id="addStartupPageForm">
+    <div class="content-area">
       <label id="addURLBlock"><span
           i18n-content="addStartupPageURLLabel"></span>
-      <input id="addStartupPageURL"></label>
-
+        <input type="url" id="addStartupPageURL"></label>
       <list id="addStartupRecentPageList"></list>
-
-    <div class="action-area button-strip">
+    </div>
+    <div class="action-area">
+      <div class="button-strip">
         <button type="reset"
             i18n-content="addStartupPageCancelButton"></button>
         <button type="submit" id="addStartupPageAddButton" disabled
             i18n-content="addStartupPageAddButton"></button>
       </div>
+    </div>
   </form>
 </div>

chrome/browser/resources/options/autofill_edit_address_overlay.html

 <div class="page hidden" id="autoFillEditAddressOverlay">
   <h1 id="autoFillAddressTitle"></h1>
-
+  <div class="content-area">
     <div class="input">
       <label id="fullNameLabel">
         <div><span i18n-content="fullNameLabel"></span></div>
@@ -25,7 +25,6 @@
         <input type="text" class="form" class="form" id="addrLine2">
       </label>
     </div>
-
     <div class="table">
       <div class="row">
         <div class="input cell">
@@ -56,14 +55,12 @@
         </div>
       </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">
@@ -86,18 +83,19 @@
         </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 class="action-area button-strip">
+  </div>
+  <div class="action-area">
+    <div class="button-strip">
       <button type="reset" id="autoFillEditAddressCancelButton"
           i18n-content="cancel"></button>
       <button type="submit" id="autoFillEditAddressApplyButton" disabled
           i18n-content="ok"></button>
     </div>
+  </div>
 </div>

chrome/browser/resources/options/autofill_edit_creditcard_overlay.html

 <div class="page hidden" id="autoFillEditCreditCardOverlay">
   <h1 id="autoFillCreditCardTitle"></h1>
-
+  <div class="content-area">
     <div>
       <label id="nameOnCardLabel">
         <span i18n-content="nameOnCardLabel"></span><br>
         <input type="text" id="nameOnCard">
       </label>
     </div>
-
     <div>
       <label id="creditCardNumberLabel">
         <span i18n-content="creditCardNumberLabel"></span><br>
         <input type="text" id="creditCardNumber">
       </label>
     </div>
-
     <div>
       <label id="creditCardExpirationDateLabel">
         <span i18n-content="creditCardExpirationDateLabel"></span><br>
@@ -22,11 +20,13 @@
         <select id="expirationYear"></select>
       </label>
     </div>
-
-  <div class="action-area button-strip">
+  </div>
+  <div class="action-area">
+    <div class="button-strip">
       <button type="reset" id="autoFillEditCreditCardCancelButton"
           i18n-content="cancel"></button>
       <button type="submit" id="autoFillEditCreditCardApplyButton" disabled
           i18n-content="ok"></button>
     </div>
+  </div>
 </div>

chrome/browser/resources/options/certificate_edit_ca_trust_overlay.html

 <div class="page hidden" id="certificateEditCaTrustOverlay">
+  <div class="content-area">
     <p>
       <span id="certificateEditCaTrustDescription"></span>
     </p>
-
     <p>
       <span i18n-content="certificateEditTrustLabel"></span>
       <br>
@@ -21,11 +21,13 @@
         <span i18n-content="certificateCaTrustObjSignLabel"></span>
       </label>
     </p>
-
-  <div class="action-area button-strip">
+  </div>
+  <div class="action-area">
+    <div class="button-strip">
       <button type="reset" id="certificateEditCaTrustCancelButton"
           i18n-content="cancel"></button>
       <button type="submit" id="certificateEditCaTrustOkButton"
           i18n-content="ok"></button>
     </div>
+  </div>
 </div>

chrome/browser/resources/options/clear_browser_data_overlay.css

@@ -4,33 +4,11 @@ Use of this source code is governed by a BSD-style license that can be
 found in the LICENSE file.
 */
 
-/* TODO(estade): these rules override some more general style rules. We
- * should unify these rules instead of overriding them, but first we need
- * to update existing overlays. Since a lot of the overlays are going away,
- * I'm making these rules specific to this overlay for now. */
-
 #clearBrowserDataOverlay {
-  -webkit-box-shadow: 0px 0px 40px -5px #888;
-  border: 1px solid rgb(188, 193, 208);
-  border-radius: 2px;
   min-width: 500px;
-  padding: 0;
-}
-
-#cbdTitle {
-  background: -webkit-linear-gradient(white, #F8F8F8);
-  border-bottom: 1px solid rgba(188, 193, 208, .5);
-  display: block;
-  font-size: 105%;
-  font-weight: bold;
-  padding: 10px 15px 8px 15px;
 }
 
-#cbdContentArea {
-  padding: 10px 15px 5px 15px;
-}
-
-#cbdContentArea label {
+#clearBrowserDataOverlay > .content-area label {
   margin: 5px 0;
 }
 
@@ -42,11 +20,3 @@ found in the LICENSE file.
   visibility: hidden;
   width: 16px;
 }
-
-#cbdActionArea {
-  -webkit-box-align: center;
-  -webkit-box-orient: horizontal;
-  border-top: 1px solid rgba(188, 193, 208, .5);
-  display: -webkit-box;
-  padding: 12px;
-}

chrome/browser/resources/options/clear_browser_data_overlay.html

 <div id="clearBrowserDataOverlay" class="page hidden">
-  <span i18n-content="clearBrowserDataTitle" id="cbdTitle"></span>
-  <div id="cbdContentArea">
+  <h1 i18n-content="clearBrowserDataTitle"></h1>
+  <div class="content-area">
     <span i18n-content="clearBrowserDataLabel"></span>
     <select id="clearBrowserDataTimePeriod"
         i18n-options="clearBrowserDataTimeList"
@@ -38,9 +38,12 @@
       <span i18n-content="deleteFormDataCheckbox"></span>
     </label>
   </div>
-  <div id="cbdActionArea">
+  <div class="action-area">
+    <div>
       <a target="_blank" i18n-content="flash_storage_settings"
           i18n-values="href:flash_storage_url"></a>
+    </div>
+    <div class="action-area-right">
       <div id="cbdThrobber" class="throbber"></div>
       <div class="button-strip">
         <button id="clearBrowserDataDismiss" i18n-content="cancel"></button>
@@ -49,4 +52,5 @@
         </button>
       </div>
     </div>
+  </div>
 </div>

chrome/browser/resources/options/import_data_overlay.css

 #import-from-div {
-  margin-top: 10px;
   margin-bottom: 20px;
 }
 

chrome/browser/resources/options/import_data_overlay.html

 <div id="import-data-overlay" class="page hidden">
   <h1 i18n-content="importDataTitle"></h1>
+  <div class="content-area">
     <div id="import-from-div">
       <span i18n-content="importFromLabel"></span>
       <select id="import-browsers">
@@ -25,11 +26,14 @@
         <label for="import-search" i18n-content="importSearch"></label>
       </div>
     </div>
+  </div>
   <div class="action-area">
+    <div class="action-area-right">
       <div id="import-throbber" class="throbber"></div>
       <div class="button-strip">
         <button id="import-data-cancel" i18n-content="cancel"></button>
         <button id="import-data-commit" i18n-content="importCommit"></button>
       </div>
     </div>
+  </div>
 </div>

chrome/browser/resources/options/language_add_language_overlay.html

@@ -7,10 +7,12 @@
 </if>
 <if expr="not pp_ifdef('chromeos')">
   <h1 i18n-content="add_language_title"></h1>
+  <div class="content-area">
     <label>
       <span i18n-content="add_language_select_label"></span>
       <select id="add-language-overlay-language-list"></select>
     </label>
+  </div>
   <div class="action-area">
     <div class="button-strip">
       <button id="add-language-overlay-cancel-button" i18n-content="cancel">

chrome/browser/resources/options/language_options.css

@@ -167,3 +167,7 @@
   width: 100px;
   height: 30%;
 }
+
+#add-language-overlay-page .content-area {
+  padding-bottom: 10px;
+}

chrome/browser/resources/options/options_page.css

@@ -84,20 +84,27 @@ html[hide-menu=true] .close-subpage {
   display: none
 }
 
+.content-area {
+  padding: 10px 15px 5px 15px;
+}
+
 .action-area {
   -webkit-box-align: center;
   -webkit-box-orient: horizontal;
-  bottom: 0;
+  -webkit-box-pack: end;
+  border-top: 1px solid rgba(188, 193, 208, .5);
   display: -webkit-box;
   padding: 12px;
-  position: absolute;
-  right: 0;
 }
 
 html[dir='rtl'] .action-area {
   left: 0;
 }
 
+.action-area-right {
+  display: -webkit-box;
+}
+
 .button-strip {
   -webkit-box-orient: horizontal;
   display: -webkit-box;
@@ -113,12 +120,12 @@ html[toolkit=views] .button-strip {
 }
 
 .overlay .page {
-  -webkit-box-shadow: 3px 3px 3px #666;
+  -webkit-box-shadow: 0px 0px 40px -5px #888;
   background: white;
-  border: 1px solid #666;
-  border-radius: 5px;
+  border: 1px solid rgb(188, 193, 208);
+  border-radius: 2px;
   min-width: 400px;
-  padding: 0 15px 50px 15px;
+  padding: 0;
   position: relative;
 }