Add settings screen that lets a user setup a PIN to unlock their device with.

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

Index: chrome/browser/resources/settings/people_page/quick_unlock_setup_pin.html
diff --git a/chrome/browser/resources/settings/people_page/quick_unlock_setup_pin.html b/chrome/browser/resources/settings/people_page/quick_unlock_setup_pin.html
new file mode 100644
index 0000000000000000000000000000000000000000..fa883088d449fe6e96c751e4634d95e0cb9c38d2
--- /dev/null
+++ b/chrome/browser/resources/settings/people_page/quick_unlock_setup_pin.html
@@ -0,0 +1,78 @@
+<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="/people_page/quick_unlock_password_detect_behavior.html">
+<link rel="import" href="/people_page/quick_unlock_routing_behavior.html">
+<link rel="import" href="/settings_page/settings_section.html">
+<link rel="import" href="/settings_shared_css.html">
+
+<dom-module id="settings-quick-unlock-setup-pin">
+  <template>
+    <style include="settings-shared"></style>
+    <style>
+      .icon-box > span {
+        margin-left: 10px;

[tommycli, 2016/07/13 19:31:11]

We already have --icon-icon-spacing used like this:
https://cs.chromium.org/search/?q=iron-icon-spacing&sq=package:chromium&type=cs

      iron-icon {
        -webkit-margin-end: var(--iron-icon-spacing);
      }

Does that work for you? If not, I'd question why this is 10px and everywhere
else in settings uses the standard 16px spacing.

[jdufault, 2016/07/13 20:38:13]

Done.

+      }
+
+      .warning {
+        color: var(--paper-grey-500);
+      }
+
+      .warning > iron-icon {
+        --iron-icon-fill-color: var(--paper-grey-500);
+      }
+
+      .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>
+
+    <div>
+      <!-- Title; only shown if warning/error is hidden. -->
+      <div class="settings-box" hidden$="[[showProblem_]]">
+        <span>[[titleMessage_]]</span>
+      </div>
+
+      <!-- Warning/error; only shown if title is hidden. -->
+      <div class$="[[problemClass_]] icon-box settings-box"
+           hidden$="[[!showProblem_]]">
+        <iron-icon icon="icons:warning"></iron-icon>
+        <span>[[problemMessage_]]</span>
+      </div>
+
+      <!-- Pin keyboard -->
+      <div class="align-center settings-box continuation">
+        <pin-keyboard on-pin-change="onPinChange_" on-submit="onPinSubmit_"
+                      value="{{pinKeyboardValue_}}"></pin-keyboard>
+      </div>
+
+      <div class="align-end settings-box">
+        <paper-button class="cancel-button" on-tap="resetState_"
+                      hidden$="[[!isConfirmStep_(step_)]]">
+          $i18n{quickUnlockConfigurePinBackButton}
+        </paper-button>
+
+        <paper-button class="action-button" on-tap="onPinSubmit_"
+                      disabled$="[[!enableSubmit_]]">
+          <span>[[continueMessage_]]</span>
+        </paper-button>
+      </div>
+
+    </div>
+  </template>
+
+  <script src="quick_unlock_setup_pin.js"></script>
+</dom-module>