Enable import/export of passwords into/from Password Manager

chrome/browser/resources/options/password_manager.js

Index: chrome/browser/resources/options/password_manager.js
diff --git a/chrome/browser/resources/options/password_manager.js b/chrome/browser/resources/options/password_manager.js
index 6e16ebac5e14d48e2cba966de98e8638f585fa26..9c8daac5c6f5d38315ff9e1d675ba34743c5c2d3 100644
--- a/chrome/browser/resources/options/password_manager.js
+++ b/chrome/browser/resources/options/password_manager.js
@@ -59,6 +59,8 @@ cr.define('options', function() {
     initializePage: function() {
       Page.prototype.initializePage.call(this);
 
+      var self = this;
+
       $('auto-signin-block').hidden =
           !loadTimeData.getBoolean('enableCredentialManagerAPI');
 
@@ -66,8 +68,20 @@ cr.define('options', function() {
         PageManager.closeOverlay();
       };
 
+      $('password-manager-import-confirm').onclick = function() {
+        self.setImportCompleteUIVisibility_(false);
+      };
+
+      $('password-manager-import').onclick = function() {
+        chrome.send('importPassword');
+      };
+
+      $('password-manager-export').onclick = function() {
+        chrome.send('exportPassword');
+      };
+
       $('password-search-box').addEventListener('search',
-          this.handleSearchQueryChange_.bind(this));
+        this.handleSearchQueryChange_.bind(this));
 
       $('exceptions-learn-more').onclick = function() {
         chrome.send('coreOptionsUserMetricsAction',
@@ -89,6 +103,7 @@ cr.define('options', function() {
       // Updating the password lists may cause a blocking platform dialog pop up
       // (Mac, Linux), so we delay this operation until the page is shown.
       chrome.send('updatePasswordLists');
+      this.setImportCompleteUIVisibility_(false);
       $('password-search-box').focus();
     },
 
@@ -233,6 +248,30 @@ cr.define('options', function() {
     setManageAccountLinkVisibility_: function(visible) {
       $('manage-passwords-span').hidden = !visible;
     },
+
+    /**
+     * @param {boolean} visible Whether the import-password-complete UI should
+     * be visible

[Evan Stade, 2015/07/08 20:38:11]

final punctuation, also I think this indentation is off

[xunlu, 2015/07/11 00:18:29]

Done.

+     * @private
+     */
+    setImportCompleteUIVisibility_: function(visible) {

[Evan Stade, 2015/07/08 20:38:11]

proper capitalization is Ui

[xunlu, 2015/07/11 00:18:30]

Done.

+      var sections = document.querySelectorAll('.password-manager-default');

[Evan Stade, 2015/07/08 20:38:11]

password-manager-default is a kind of non-descriptive class name (I couldn't
figure out what it meant until I read the code).

[xunlu, 2015/07/11 00:18:30]

Renamed to password-manager-home

+      for (var i = 0; i < sections.length; i++) {
+        if (sections[i].disabled != true) {

[Evan Stade, 2015/07/08 20:38:11]

if (!sections[i].disabled) ? or simply sections[i].hidden = visible &&
!sections[i].disabled;

actually, I would just make a css rule

.password-manager-default[disabled] {
  display: none;
}

and make this function simply set a class on the page. Then add another couple
rules like so:

#password-manager.importing .password-manager-default {
  display: none;
}

[xunlu, 2015/07/11 00:18:30]

Done but not sure if this is exactly what you suggested.

[Evan Stade, 2015/07/11 00:28:41]

this entire function should be something like:

$('password-manager').classList.toggle('importing', !visible);

the visibility of things can then be controlled in css

[xunlu, 2015/07/13 21:30:26]

Got it. Done

+          sections[i].hidden = visible;
+        }
+      }
+      sections = document.querySelectorAll('.import-password-complete');
+      for (var i = 0; i < sections.length; i++)
+        sections[i].hidden = !visible;
+    },
+
+    showImportExportButton_: function() {
+      $('password-manager-import').hidden = false;
+      $('password-manager-export').hidden = false;
+      $('password-manager-import').disabled = false;
+      $('password-manager-export').disabled = false;
+    },
   };
 
   /**
@@ -240,8 +279,8 @@ cr.define('options', function() {
    * @param {number} rowIndex indicating the row to remove.
    */
   PasswordManager.removeSavedPassword = function(rowIndex) {
-      chrome.send('removeSavedPassword', [String(rowIndex)]);
-      chrome.send('coreOptionsUserMetricsAction',
+    chrome.send('removeSavedPassword', [String(rowIndex)]);
+    chrome.send('coreOptionsUserMetricsAction',
                   ['Options_PasswordManagerDeletePassword']);
   };
 
@@ -250,7 +289,7 @@ cr.define('options', function() {
    * @param {number} rowIndex indicating the row to remove.
    */
   PasswordManager.removePasswordException = function(rowIndex) {
-      chrome.send('removePasswordException', [String(rowIndex)]);
+    chrome.send('removePasswordException', [String(rowIndex)]);
   };
 
   PasswordManager.requestShowPassword = function(index) {
@@ -262,7 +301,9 @@ cr.define('options', function() {
     'setManageAccountLinkVisibility',
     'setSavedPasswordsList',
     'setPasswordExceptionsList',
-    'showPassword'
+    'showPassword',
+    'setImportCompleteUIVisibility',
+    'showImportExportButton'
   ]);
 
   // Export