Implement import data overlay

BUG=None
TEST=None

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

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

2 files changed, 84 insertions, 11 deletions

diff --git a/chrome/browser/resources/options/import_data_overlay.html b/chrome/browser/resources/options/import_data_overlay.html
index 35d2e3e..5bab568 100644
--- a/chrome/browser/resources/options/import_data_overlay.html
+++ b/chrome/browser/resources/options/import_data_overlay.html
@@ -4,8 +4,8 @@
     <span i18n-content="import_from_label"></span>
     <select id="supported-browsers"></select>
   </div>
-  <div>
-    <span i18n-content="import_description"></span>
+  <div id="checkboxList">
+    <span i18n-content="import_description"></span><br>
     <label>
       <input id="import-favorites" type="checkbox">
       <span i18n-content="import_favorites">
@@ -23,6 +23,8 @@
       <span i18n-content="import_history">
     </label><br>
   </div>
-  <button id="import-data-cancel" i18n-content="cancel"></button>
+  <span id="import-throbber"></span>
+  <button id="import-data-cancel" i18n-content="cancel"
+    onclick="ImportDataOverlay.dismiss();"></button>
   <button id="import-data-commit" i18n-content="import_commit"></button>
 </div>
diff --git a/chrome/browser/resources/options/import_data_overlay.js b/chrome/browser/resources/options/import_data_overlay.js
index 744dbef..784b831 100644
--- a/chrome/browser/resources/options/import_data_overlay.js
+++ b/chrome/browser/resources/options/import_data_overlay.js
@@ -17,6 +17,9 @@ cr.define('options', function() {
                      'importDataOverlay');
   }
 
+  ImportDataOverlay.throbIntervalId = 0
+  ImportDataOverlay.checkboxMask = "";
+
   cr.addSingletonGetter(ImportDataOverlay);
 
   ImportDataOverlay.prototype = {
@@ -30,13 +33,42 @@ cr.define('options', function() {
       // Call base class implementation to starts preference initialization.
       OptionsPage.prototype.initializePage.call(this);
 
-      $('import-data-cancel').onclick = function(e) {
-        OptionsPage.clearOverlays();
+      var self = this;
+      var checkboxList = $('checkboxList').getElementsByTagName('input');
+      for (var i = 0; i < checkboxList.length; ++i) {
+        if(checkboxList[i].type == 'checkbox')
+          checkboxList[i].onchange = function(e) {
+            self.countCheckboxes_();
+          };
       }
 
       $('import-data-commit').onclick = function(e) {
-        var paramList = new Array();
+        /** The first digit in paramList indicates browser selected
+         *  The rest indicate the checkboxes (1 is checked, 0 is not)
+         */
+        var selectedBrowser = $('supported-browsers').selectedIndex;
+        var paramList =
+            String(selectedBrowser) + ImportDataOverlay.checkboxMask;
+
+        chrome.send('importData', [paramList]);
+      }
+    },
+
+    countCheckboxes_: function() {
+      ImportDataOverlay.checkboxMask = "";
+      var checkboxList = $('checkboxList').getElementsByTagName('input');
+      for (var i = 0; i < checkboxList.length; ++i) {
+        if (checkboxList[i].type == 'checkbox') {
+          if(checkboxList[i].checked)
+            ImportDataOverlay.checkboxMask += "1";
+          else
+            ImportDataOverlay.checkboxMask += "0";
+        }
       }
+      if (ImportDataOverlay.checkboxMask.indexOf("1") == -1)
+        $('import-data-commit').disabled = true;
+      else
+        $('import-data-commit').disabled = false;
     },
 
     /**
@@ -54,11 +86,23 @@ cr.define('options', function() {
     updateSupportedBrowsers_: function(browsers) {
       this.clearSupportedBrowsers_();
       browserSelect = $('supported-browsers');
-      browserCount = browsers.length
-      for (var i = 0; i < browserCount; i++) {
-        var browser = browsers[i]
-        var option = new Option(browser['name'], browser['index']);
+      browserCount = browsers.length;
+
+      if(browserCount == 0) {
+        var option = new Option(templateData.no_profile_found, 0);
         browserSelect.appendChild(option);
+
+        ImportDataOverlay.setImportingState(true);
+      }
+      else {
+        for (var i = 0; i < browserCount; i++) {
+          var browser = browsers[i]
+          var option = new Option(browser['name'], browser['index']);
+          browserSelect.appendChild(option);
+
+        ImportDataOverlay.setImportingState(false);
+        this.countCheckboxes_();
+        }
       }
     },
   };
@@ -67,10 +111,37 @@ cr.define('options', function() {
     ImportDataOverlay.getInstance().updateSupportedBrowsers_(browsers);
   }
 
+  ImportDataOverlay.setImportingState = function(state) {
+    $('supported-browsers').disabled = state;
+    $('import-favorites').disabled = state;
+    $('import-search').disabled = state;
+    $('import-passwords').disabled = state;
+    $('import-history').disabled = state;
+    $('import-data-commit').disabled = state;
+    $('import-throbber').style.visibility = state ? "visible" : "hidden";
+
+    function advanceThrobber() {
+      var throbber = $('import-throbber');
+      throbber.style.backgroundPositionX =
+          ((parseInt(getComputedStyle(throbber).backgroundPositionX, 10) - 16)
+          % 576) + 'px';
+    }
+    if (state) {
+      ImportDataOverlay.throbIntervalId =
+          setInterval(advanceThrobber, 30);
+    } else {
+      clearInterval(ImportDataOverlay.throbIntervalId);
+    }
+  }
+
+  ImportDataOverlay.dismiss = function() {
+    OptionsPage.clearOverlays();
+    ImportDataOverlay.setImportingState(false);
+  }
+
   // Export
   return {
     ImportDataOverlay: ImportDataOverlay
   };
 
 });
-