MD Settings: Hook up import data dialog.

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

 <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/iron-icon/iron-icon.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-spinner/paper-spinner.html">
 <link rel="import" href="/controls/settings_checkbox.html">
+<link rel="import" href="/controls/settings_toggle_button.html">
+<link rel="import" href="/icons.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">
   <template>
     <style include="settings-shared md-select">
-      #description {
+      .description {
         align-items: center;
         display: flex;
         min-height: var(--settings-row-min-height);
       }
+
+      paper-spinner {
+        margin: 0 8px;
+      }
+
+      .icon-container {

[tommycli, 2016/11/16 17:23:52]

nit: Can we remove the need for this by giving the iron-icon a margin: auto?

[dpapad, 2016/11/16 21:33:02]

Done.

+        text-align: center;
+      }
+
+      iron-icon {

[tommycli, 2016/11/16 17:23:53]

Although there is only one iron-icon here, it may serve as a useful comment to
tag it with a #success-icon id

[dpapad, 2016/11/16 21:33:02]

Done.

+        fill: var(--paper-blue-600);
+        height: 80px;
+        width: 80px;
+      }
     </style>
     <dialog is="cr-dialog" id="dialog">
       <div class="title">$i18n{importTitle}</div>
       <div class="body">
-        <span class="md-select-wrapper">
-          <select id="browserSelect" 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>
-          <settings-checkbox
-              hidden="[[!selected_.history]]"
-              pref="{{prefs.import_history}}"
-              label="$i18n{importHistory}">
-          </settings-checkbox>
-          <settings-checkbox
-              hidden="[[!selected_.favorites]]"
-              pref="{{prefs.import_bookmarks}}"
-              label="$i18n{importFavorites}">
-          </settings-checkbox>
-          <settings-checkbox
-              hidden="[[!selected_.passwords]]"
-              pref="{{prefs.import_saved_passwords}}"
-              label="$i18n{importPasswords}">
-          </settings-checkbox>
-          <settings-checkbox
-              hidden="[[!selected_.search]]"
-              pref="{{prefs.import_search_engine}}"
-              label="$i18n{importSearch}">
-          </settings-checkbox>
-          <settings-checkbox
-              hidden="[[!selected_.autofillFormData]]"
-              pref="{{prefs.import_autofill_form_data}}"
-              label="$i18n{importAutofillFormData}">
-          </settings-checkbox>
+        <div hidden$="[[!hasImportStatus_(
+            importStatusEnum_.SUCCEEDED, importStatus_)]]">
+          <div class="icon-container">
+            <iron-icon icon="settings:check-circle"></iron-icon>
+          </div>
+          <div hidden$="[[!prefs.import_bookmarks.value]]">
+            <div class="description">$i18n{importReady}</div>
+            <settings-toggle-button class="start"
+                label="$i18n{showBookmarksBar}"
+                pref="{{prefs.bookmark_bar.show_on_all_tabs}}">
+            </settings-toggle-button>
+          </div>
+        </div>
+
+        <div hidden$="[[hasImportStatus_(
+              importStatusEnum_.SUCCEEDED, importStatus_)]]">
+          <span class="md-select-wrapper">
+            <select id="browserSelect" 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 class="description">$i18n{importDescription}</div>
+          <div on-iron-change="onCheckboxChange_">
+            <settings-checkbox
+                hidden="[[!selected_.history]]"
+                pref="{{prefs.import_history}}"
+                label="$i18n{importHistory}">
+            </settings-checkbox>
+            <settings-checkbox
+                hidden="[[!selected_.favorites]]"
+                pref="{{prefs.import_bookmarks}}"
+                label="$i18n{importFavorites}">
+            </settings-checkbox>
+            <settings-checkbox
+                hidden="[[!selected_.passwords]]"
+                pref="{{prefs.import_saved_passwords}}"
+                label="$i18n{importPasswords}">
+            </settings-checkbox>
+            <settings-checkbox
+                hidden="[[!selected_.search]]"
+                pref="{{prefs.import_search_engine}}"
+                label="$i18n{importSearch}">
+            </settings-checkbox>
+            <settings-checkbox
+                hidden="[[!selected_.autofillFormData]]"
+                pref="{{prefs.import_autofill_form_data}}"
+                label="$i18n{importAutofillFormData}">
+            </settings-checkbox>
+          </div>

[tommycli, 2016/11/16 17:23:52]

It looks like this whole div block is basically unchanged, but just tabbed over
right?

[dpapad, 2016/11/16 21:33:01]

It was just tabbed over, but I ended up undoing this change, since I am no
longer listening for iron-change event (that was the only reason I had put a
surrounding div).

         </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>
+        <paper-spinner

[tommycli, 2016/11/16 17:23:52]

any situation in which it's not-hidden but inactive? I'm wondering why there are
separate tests for IN_PROGRESS and SUCCEEDED.

[dpapad, 2016/11/16 21:33:02]

It is subtle. When you change active to false, paper-spinner does a fade out
animation which takes some noticeable time to execute. This resulted in the
spinner being briefly visible after this dialog transitions to the SUCCEEDED
case. The hidden attribute ensures that the fade-out animation of the spinner is
not visible at all, when in SUCCEEDED state.

[tommycli, 2016/11/16 21:43:40]

Acknowledged.

+            active="[[hasImportStatus_(
+                importStatusEnum_.IN_PROGRESS, importStatus_)]]"
+            hidden="[[hasImportStatus_(
+                importStatusEnum_.SUCCEEDED, importStatus_)]]">
+        </paper-spinner>
+        <paper-button class="cancel-button" id="cancel"
+            hidden="[[hasImportStatus_(
+                importStatusEnum_.SUCCEEDED, importStatus_)]]"
+            disabled="[[hasImportStatus_(
+                importStatusEnum_.IN_PROGRESS, importStatus_)]]"
+            on-tap="closeDialog_">
+          $i18n{cancel}
+        </paper-button>
+        <paper-button id="actionButton" class="action-button"

[tommycli, 2016/11/16 17:23:52]

nit: Maybe call this confirmButton or importButton instead of actionButton?
Since action-button is also a class used by the done button.

Same with the on-tap and the text methods

[dpapad, 2016/11/16 21:33:01]

Removed "id" completely, since it is not needed yet (perhaps I'll re-add it in
next CL where I add tests).

BTW, "Confirm" button can be easily confused with the button that simply
displays "Done" at line 118.

+            hidden="[[hasImportStatus_(
+                importStatusEnum_.SUCCEEDED, importStatus_)]]"
+            disabled="[[disallowAction_(
+                importStatus_, noCategorySelected_)]]"
+            on-tap="onActionButtonTap_">
+          [[getActionButtonText_(selected_)]]
+        </paper-button>
+
+        <paper-button class="action-button"
+            hidden$="[[!hasImportStatus_(
+                importStatusEnum_.SUCCEEDED, importStatus_)]]"
+            on-tap="closeDialog_">$i18n{done}</paper-button>
       </div>
     </dialog>
   </template>
   <script src="import_data_dialog.js"></script>
 </dom-module>