Update markup for import data markup to work well with uber page.

BUG=118231
TEST=Exercise import data dialog, make sure resizing works properly.
Review URL: https://chromiumcodereview.appspot.com/9699050

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

chrome/browser/resources/options2/browser_options.js

@@ -229,11 +229,7 @@ cr.define('options', function() {
         };
       } else {
         $('import-data').onclick = function(event) {
-          // Make sure that any previous import success message is hidden, and
-          // we're showing the UI to import further data.
-          $('import-data-configure').hidden = false;
-          $('import-data-success').hidden = true;
-          OptionsPage.navigateToPage('importData');
+          ImportDataOverlay.show();
           chrome.send('coreOptionsUserMetricsAction', ['Import_ShowDlg']);
         };
 

chrome/browser/resources/options2/import_data_overlay.html

 <div id="import-data-overlay" class="page" hidden>
   <div class="close-button"></div>
   <h1 i18n-content="importDataOverlay"></h1>
-  <div id="import-data-configure">
-    <div class="content-area">
+  <div class="content-area">
+    <div class="import-data-configure">
       <div id="import-from-div">
         <span i18n-content="importFromLabel"></span>
         <select id="import-browsers">
@@ -30,18 +30,7 @@
         </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>
-  <div id="import-data-success" hidden>
-    <div class="content-area">
+    <div class="import-data-success" hidden>
       <div id="import-success-header">
         <strong i18n-content="importSucceeded"></strong>
       </div>
@@ -60,7 +49,18 @@
         </div>
       </div>
     </div>
-    <div class="action-area">
+  </div>
+  <div class="action-area">
+    <div class="import-data-configure">
+      <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 class="import-data-success" hidden>
       <div class="action-area-right">
         <div class="button-strip">
           <button id="import-data-confirm" i18n-content="ok"></button>

chrome/browser/resources/options2/import_data_overlay.js

@@ -153,11 +153,11 @@ cr.define('options', function() {
     },
 
     /**
-    * Clear import prefs set when user checks/unchecks a checkbox so that each
-    * checkbox goes back to the default "checked" state (or alternatively, to
-    * the state set by a recommended policy).
-    * @private
-    */
+     * Clear import prefs set when user checks/unchecks a checkbox so that each
+     * checkbox goes back to the default "checked" state (or alternatively, to
+     * the state set by a recommended policy).
+     * @private
+     */
     clearUserPrefs_: function() {
       var importPrefs = ['import_history',
                          'import_bookmarks',
@@ -166,6 +166,21 @@ cr.define('options', function() {
       for (var i = 0; i < importPrefs.length; i++)
         Preferences.clearPref(importPrefs[i], undefined);
     },
+
+    /**
+     * Update the dialog layout to reflect success state.
+     * @param {boolean} success If true, show success dialog elements.
+     * @private
+     */
+    updateSuccessState_: function(success) {
+      var sections = document.querySelectorAll('.import-data-configure');
+      for (var i = 0; i < sections.length; i++)
+        sections[i].hidden = success;
+
+      sections = document.querySelectorAll('.import-data-success');
+      for (var i = 0; i < sections.length; i++)
+        sections[i].hidden = !success;
+    },
   };
 
   ImportDataOverlay.clearUserPrefs = function() {
@@ -210,9 +225,19 @@ cr.define('options', function() {
   ImportDataOverlay.confirmSuccess = function() {
     var showBookmarksMessage = $('import-favorites').checked;
     ImportDataOverlay.setImportingState(false);
-    $('import-data-configure').hidden = true;
-    $('import-data-success').hidden = false;
     $('import-find-your-bookmarks').hidden = !showBookmarksMessage;
+    ImportDataOverlay.getInstance().updateSuccessState_(true);
+  };
+
+  /**
+   * Show the import data overlay.
+   */
+  ImportDataOverlay.show = function() {
+    // Make sure that any previous import success message is hidden, and
+    // we're showing the UI to import further data.
+    ImportDataOverlay.getInstance().updateSuccessState_(false);
+
+    OptionsPage.navigateToPage('importData');
   };
 
   // Export