Enable import/export of passwords into/from Password Manager

chrome/browser/resources/options/password_manager.js

 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 cr.define('options', function() {
   /** @const */ var Page = cr.ui.pageManager.Page;
   /** @const */ var PageManager = cr.ui.pageManager.PageManager;
   /** @const */ var ArrayDataModel = cr.ui.ArrayDataModel;
 
   /////////////////////////////////////////////////////////////////////////////
@@ skipping 41 matching lines @@
      * The most recent search query, or null if the query is empty.
      * @type {?string}
      * @private
      */
     lastQuery_: null,
 
     /** @override */
     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');
 
       $('password-manager-confirm').onclick = 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',
                     ['Options_PasswordManagerExceptionsLearnMore']);
         return true;  // Always follow the href
       };
 
       this.createSavedPasswordsList_();
       this.createPasswordExceptionsList_();
     },
 
     /** @override */
     canShowPage: function() {
       return !(cr.isChromeOS && UIAccountTweaks.loggedInAsGuest());
     },
 
     /** @override */
     didShowPage: 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();
     },
 
     /**
      * Creates, decorates and initializes the saved passwords list.
      * @private
      */
     createSavedPasswordsList_: function() {
       var savedPasswordsList = $('saved-passwords-list');
       options.passwordManager.PasswordsList.decorate(savedPasswordsList);
@@ skipping 124 matching lines @@
       item.showPassword(password);
     },
 
     /**
      * @param {boolean} visible Whether the link should be visible.
      * @private
      */
     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;
+    },
   };
 
   /**
    * Removes a saved password.
    * @param {number} rowIndex indicating the row to remove.
    */
   PasswordManager.removeSavedPassword = function(rowIndex) {
       chrome.send('removeSavedPassword', [String(rowIndex)]);
       chrome.send('coreOptionsUserMetricsAction',
                   ['Options_PasswordManagerDeletePassword']);
   };
 
   /**
    * Removes a password exception.
    * @param {number} rowIndex indicating the row to remove.
    */
   PasswordManager.removePasswordException = function(rowIndex) {
       chrome.send('removePasswordException', [String(rowIndex)]);
   };
 
   PasswordManager.requestShowPassword = function(index) {
     chrome.send('requestShowPassword', [index]);
   };
 
   // Forward public APIs to private implementations on the singleton instance.
   cr.makePublic(PasswordManager, [
     'setManageAccountLinkVisibility',
     'setSavedPasswordsList',
     'setPasswordExceptionsList',
-    'showPassword'
+    'showPassword',
+    'setImportCompleteUIVisibility'
   ]);
 
   // Export
   return {
     PasswordManager: PasswordManager
   };
 
 });