MD Settings: Add import data dialog.

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

Index: chrome/browser/resources/settings/people_page/import_data_dialog.html
diff --git a/chrome/browser/resources/settings/people_page/import_data_dialog.html b/chrome/browser/resources/settings/people_page/import_data_dialog.html
new file mode 100644
index 0000000000000000000000000000000000000000..9c5c4db7d825e5175da86e410067690d4f63e3df
--- /dev/null
+++ b/chrome/browser/resources/settings/people_page/import_data_dialog.html
@@ -0,0 +1,69 @@
+<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
+<link rel="import" href="chrome://resources/html/i18n_behavior.html">
+<link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-checkbox/paper-checkbox.html">
+<link rel="import" href="/md_select_css.html">
+<link rel="import" href="/people_page/import_data_browser_proxy.html">
+
+<dom-module id="settings-import-data-dialog">
+  <style>
+    paper-checkbox {
+      display: block;
+      margin-bottom: 20px;
+    }

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

Seems odd that we would need to define a custom style her. You sure this isn't
another instance of list-frame and list-items?

https://cs.chromium.org/chromium/src/chrome/browser/resources/settings/people...

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

Tried using list-frame, list-item. The problem is that list-frame adds 56px of
left padding, which looks ok in a subpage (as in the sync_page link above), but
within a dialog where there is already a 24px left padding (total 56+24) seems
odd, http://imgur.com/a/12Hzv.

Also the precedent in dialogs seems to be to not indent checkboxes.
Example1: CBD dialog,
Example2: Edit certificate authority dialog.

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

Hmm.. if the only problem is the 24px left padding, maybe just override that
left padding with another rule. I leave it to your best judgement. Either way is
okay with me.

I always thought it was very lame that list-frame adds 56px of padding (since
it's not within a settings-box). I would have preferred it to just add 32px of
padding and be within (an invisible) settings-box. - but that's outside the
scope of this patch.

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

I'll leave as-is for now, and will make sure that @bettes takes a look at this
dialog before we consider it polished.

+
+    #description {
+      align-items: center;
+      display: flex;
+      height: 40px;

[Dan Beam, 2016/11/15 01:27:46]

can we use a var() here for the height (and preferrably use min-height)?

[dpapad, 2016/11/15 01:33:46]

Done.

+    }
+  </style>
+  <template>
+    <style include="settings-shared md-select"></style>
+    <dialog is="cr-dialog" id="dialog">
+      <div class="title">$i18n{importTitle}</div>
+      <div class="body">
+        <span class="md-select-wrapper">
+          <select class="md-select" on-change="onChange_">
+            <template is="dom-repeat" items="[[browserProfiles_]]">
+              <option value="[[item.index]]">[[item.name]]</option>
+            </template>
+          </select>
+          <span class="md-select-underline"></span>
+        </span>
+        <div id="description">$i18n{importDescription}</div>
+        <div>
+          <paper-checkbox hidden="[[!selected_.history]]">

[Dan Beam, 2016/11/14 19:07:20]

aren't they persistently stored as prefs somewhere?  can we re-use
<settings-checkbox pref="..."> or is there something that's preventing us from
doing that?

[Dan Beam, 2016/11/14 19:07:50]

isn't this list persistently stored*

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

I don't think there are any prefs related to this UI. All info comes from the
browser proxy, and it is sent back through it. Perhaps @tommycli can answer this
question more definitely since implemented/migrated the C++ side of it.

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

The Old Options code does seem to indicate some interaction with prefs:
https://cs.chromium.org/chromium/src/chrome/browser/resources/options/import_...

That can be in a followup CL. I didn't get a chance to test this, but try
opening two instances of this dialog in old options in different tabs and see if
they synchronize.

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

Double checked with old Options, and the checkboxes do synchronize across tabs.
So will address this in follow up.

[Dan Beam, 2016/11/14 22:05:45]

yeah, all the pref magic in options is done in JS and HTML

+            $i18n{importHistory}
+          </paper-checkbox>
+          <paper-checkbox hidden="[[!selected_.favorites]]">
+            $i18n{importFavorites}
+          </paper-checkbox>
+          <paper-checkbox hidden="[[!selected_.passwords]]">
+            $i18n{importPasswords}
+          </paper-checkbox>
+          <paper-checkbox hidden="[[!selected_.search]]">
+            $i18n{importSearch}
+          </paper-checkbox>
+          <paper-checkbox hidden="[[!selected_.autofillFormData]]">
+            $i18n{importAutofillFormData}
+          </paper-checkbox>
+        </div>
+      </div>
+      <div class="button-container">
+        <div class="action-buttons">
+          <paper-button class="cancel-button" id="cancel" on-tap="onCancelTap_">
+            $i18n{cancel}
+          </paper-button>
+          <paper-button id="actionButton" class="action-button"
+              on-tap="onActionButtonTap_">
+            [[getActionButtonText_(selected_)]]
+          </paper-button>
+        </div>
+      </div>
+    </dialog>
+  </template>
+  <script src="import_data_dialog.js"></script>
+</dom-module>