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 self = this;
+
       $('auto-signin-block').hidden =
           !loadTimeData.getBoolean('enableCredentialManagerAPI');
 
       $('password-manager-confirm').onclick = 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',
                     ['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

[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;
+    },
   };
 
   /**
    * Removes a saved password.
    * @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']);
   };
 
   /**
    * Removes a password exception.
    * @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) {
     chrome.send('requestShowPassword', [index]);
   };
 
   // Forward public APIs to private implementations on the singleton instance.
   cr.makePublic(PasswordManager, [
     'setManageAccountLinkVisibility',
     'setSavedPasswordsList',
     'setPasswordExceptionsList',
-    'showPassword'
+    'showPassword',
+    'setImportCompleteUIVisibility',
+    'showImportExportButton'
   ]);
 
   // Export
   return {
     PasswordManager: PasswordManager
   };
 
 });