MD Settings: Add import data dialog.

chrome/browser/resources/settings/people_page/import_data_dialog.js

Index: chrome/browser/resources/settings/people_page/import_data_dialog.js
diff --git a/chrome/browser/resources/settings/people_page/import_data_dialog.js b/chrome/browser/resources/settings/people_page/import_data_dialog.js
new file mode 100644
index 0000000000000000000000000000000000000000..d7a3e0b5a833999c845d5166229f883fae49c309
--- /dev/null
+++ b/chrome/browser/resources/settings/people_page/import_data_dialog.js
@@ -0,0 +1,78 @@
+// Copyright 2016 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.
+
+/**
+ * @fileoverview 'settings-import-data-dialog' is a component for importing
+ * bookmarks and other data from other sources.
+ */
+Polymer({
+  is: 'settings-import-data-dialog',
+
+  behaviors: [I18nBehavior, WebUIListenerBehavior],
+
+  properties: {
+    /** @private {!Array<!settings.BrowserProfile>} */
+    browserProfiles_: Array,
+
+    /** @private {!settings.BrowserProfile} */
+    selected_: Object,
+  },
+
+  /** @private {?settings.ImportDataBrowserProxy} */
+  browserProxy_: null,
+
+  /** @override */
+  attached: function() {
+    this.$.dialog.showModal();
+  },
+
+  /** @override */
+  ready: function() {

[tommycli, 2016/11/14 18:15:57]

nit: but when is the earliest that we could do this? Any reason to wait until
ready instead of attached?

[dpapad, 2016/11/14 20:35:22]

No good reason. Moved to attached.

+    this.browserProxy_ = settings.ImportDataBrowserProxyImpl.getInstance();
+    this.browserProxy_.initializeImportDialog().then(function(data) {
+      this.browserProfiles_ = data;
+      // TODO(dpapad): Check old options to determine whether it is possible
+      // that no browser profile is found (including the "import from file"
+      // option).
+      this.selected_ = this.browserProfiles_[0];
+    }.bind(this));
+
+    this.addWebUIListener('import-data-status-changed', function(e) {
+      // TODO(dpapad): Handle events to show spinner or success message.
+    });
+  },
+
+  /** @private */
+  isImportFromFileSelected_: function() {
+    return this.selected_.index == this.browserProfiles_.length - 1;

[tommycli, 2016/11/14 18:15:57]

The last item in the list of browser profiles is always "import from file"? That
wasn't obvious to me from the C++ handler...

[dpapad, 2016/11/14 20:35:22]

Did not look at the C++, but the old JS code implies that, see
https://cs.chromium.org/chromium/src/chrome/browser/resources/options/import_....

[tommycli, 2016/11/14 20:45:34]

Hmm interesting. Maybe investigate and add a comment for future devs, since this
seems pretty non-obvious as to why.

[dpapad, 2016/11/14 21:47:57]

Done. The answer is that the last browser profile will always be about importing
straight from a bookmarks file, see [1] and [2].

[1]
https://cs.chromium.org/chromium/src/chrome/browser/importer/importer_list.cc...
[2]
https://cs.chromium.org/chromium/src/chrome/browser/ui/webui/settings/setting...

+  },
+
+  /**
+   * @return {string}
+   * @private
+   */
+  getActionButtonText_: function() {
+    return this.i18n(this.isImportFromFileSelected_() ?
+        'importChooseFile' : 'importCommit');
+  },
+
+  /** @private */
+  onChange_: function() {
+    this.selected_ = this.browserProfiles_[this.$$('select').selectedIndex];

[tommycli, 2016/11/14 18:15:57]

Maybe marginally faster to use event.target.value instead of doing the dom
selection again? Also prevents accidentally selecting wrong 'select' element.
May be good to change the name to onSelectedBrowserProfileChanged or something

[dpapad, 2016/11/14 20:35:22]

In order to associate event.target.value with a settings.BrowserProfile I would
have to do a linear search within the array, which is avoided by using
selectedIndex.
Done. Gave an id to the <select>, to avoid searching the DOM.
Given that there is only one <select> in the dialog I think |onChange_| naming
is sufficient (no other element can fire change event).

+  },
+
+  /** @private */
+  onActionButtonTap_: function() {
+    if (this.isImportFromFileSelected_()) {
+      this.browserProxy_.importFromBookmarksFile();
+    } else {
+      // TODO(dpapad): Implement this.
+    }
+  },
+
+  /** @private */
+  onCancelTap_: function() {
+    this.$.dialog.close();
+  },
+});