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..03d1156a2dfbc7e0f4ebb9dcf99f1edab362de74 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 thiz = this;

[Garrett Casto, 2015/06/23 23:42:35]

It looks like this variable is named "self" in most of the other js files in
this directory.

[xunlu, 2015/06/25 17:12:15]

Right. I actually named it "self" until I saw the second answer in
http://stackoverflow.com/questions/962033/what-underlies-this-javascript-idio...

It says that modern browser provides a global variable "self" for some other
purpose

[Garrett Casto, 2015/06/26 21:13:48]

Perhaps, but given that it's common practice for other options pages, it
shouldn't break in this context. My knowledge of JS isn't great, so I'm going to
defer to common practice unless that doesn't work for whatever reason.

[xunlu, 2015/06/30 23:06:09]

Done.

+
       $('auto-signin-block').hidden =
           !loadTimeData.getBoolean('enableCredentialManagerAPI');
 
@@ -66,8 +68,20 @@ cr.define('options', function() {
         PageManager.closeOverlay();
       };
 
+      $('password-manager-import-confirm').onclick = function() {
+        thiz.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,20 @@ cr.define('options', function() {
     setManageAccountLinkVisibility_: function(visible) {
       $('manage-passwords-span').hidden = !visible;
     },
+
+    /**
+     * @param {boolean} visible Whether the import-password-complete UI should
+     * be visible
+     * @private
+     */
+    setImportCompleteUIVisibility_: function(visible) {
+      var sections = document.querySelectorAll('.password-manager-default');

[Garrett Casto, 2015/06/23 23:42:35]

This seems like it might look a little strange, to hide the rest of the UI when
we are showing the import dialog and then displaying it again afterwards. We
should file a the launch but so you can attach screenshots to see how this looks
in practice.

[xunlu, 2015/06/25 17:12:15]

Done.

+      for (var i = 0; i < sections.length; i++)
+              sections[i].hidden = visible;
+      sections = document.querySelectorAll('.import-password-complete');
+      for (var i = 0; i < sections.length; i++)
+              sections[i].hidden = !visible;
+    },
   };
 
   /**
@@ -262,7 +291,8 @@ cr.define('options', function() {
     'setManageAccountLinkVisibility',
     'setSavedPasswordsList',
     'setPasswordExceptionsList',
-    'showPassword'
+    'showPassword',
+    'setImportCompleteUIVisibility'
   ]);
 
   // Export