Rework quick unlock settings to follow new specs.

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

+<link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="chrome://resources/html/i18n_behavior.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
+<link rel="import" href="/people_page/pin_keyboard.html">
+<link rel="import" href="/settings_shared_css.html">
+
+<dom-module id="settings-setup-pin-dialog">

[tommycli, 2016/08/05 17:46:19]

Is there any new stuff in here I should pay extra scrutiny here? I think I
reviewed most of this warning/error logic already.

Or is this a straight port of the old code into a dialog? Does using
--similarity on git cl upload yield a move-diff?

[jdufault, 2016/08/05 20:59:52]

Yea, not too many changes in this file.

+  <template>
+    <style include="settings-shared"></style>
+    <style>
+      iron-icon {
+        -webkit-margin-end: var(--iron-icon-spacing);
+      }
+
+      .warning {
+        color: var(--paper-grey-500);
+      }
+
+      .warning > iron-icon {
+        --iron-icon-fill-color: var(--paper-grey-500);

[tommycli, 2016/08/05 17:46:19]

Can this be consolidated into .warning? I think I asked you this last time too.

[jdufault, 2016/08/05 20:59:52]

Iirc I investigated last time and the answer was no :(

+      }
+
+      .error {
+        color: var(--paper-red-500);
+      }
+
+      .error > iron-icon {
+        --iron-icon-fill-color: var(--paper-red-500);
+      }
+
+      .align-center {
+        justify-content: center;
+      }
+
+      .align-end {
+        justify-content: flex-end;
+      }
+    </style>
+
+    <dialog is="cr-dialog" id="dialog" on-close="close">
+      <div class="title">[[getTitleMessage_(isConfirmStep_)]]</div>
+      <div class="body">
+        <!-- Warning/error; only shown if title is hidden. -->
+        <div class$="[[problemClass_]] settings-box first"
+             hidden$="[[!hasProblem_(problemMessage_)]]">
+          <iron-icon icon="icons:warning"></iron-icon>
+          <span>[[problemMessage_]]</span>
+        </div>
+
+        <!-- Pin keyboard -->
+        <div class="align-center settings-box continuation">
+          <pin-keyboard id="pinKeyboard" on-pin-change="onPinChange_"
+                        on-submit="onPinSubmit_" value="{{pinKeyboardValue_}}">
+          </pin-keyboard>
+        </div>
+
+        <div class="align-end settings-box continuation">
+          <paper-button class="cancel-button" on-tap="onCancelTap_">
+            $i18n{cancel}
+          </paper-button>
+
+          <paper-button class="action-button" on-tap="onPinSubmit_"
+                        disabled$="[[!enableSubmit_]]">
+            <span>[[getContinueMessage_(isConfirmStep_)]]</span>
+          </paper-button>
+        </div>
+      </div>
+    </dialog>
+  </template>
+
+  <script src="setup_pin_dialog.js"></script>
+</dom-module>