Add a settings screen that lets the user choose how they unlock their device.

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

Index: chrome/browser/resources/settings/people_page/quick_unlock_choose_method.html
diff --git a/chrome/browser/resources/settings/people_page/quick_unlock_choose_method.html b/chrome/browser/resources/settings/people_page/quick_unlock_choose_method.html
new file mode 100644
index 0000000000000000000000000000000000000000..86cb2aa03eee4f75674138fdacfe54c7af4d89f3
--- /dev/null
+++ b/chrome/browser/resources/settings/people_page/quick_unlock_choose_method.html
@@ -0,0 +1,66 @@
+<link rel="import" href="chrome://resources/html/polymer.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-input/paper-input.html">
+<link rel="import" href="/people_page/pin_keyboard.html">
+<link rel="import" href="/people_page/quick_unlock_routing_behavior.html">
+<link rel="import" href="/people_page/quick_unlock_validating_behavior.html">
+<link rel="import" href="/prefs/prefs_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-choose-method">
+  <template>
+    <style include="settings-shared"></style>
+    <style>
+      #configure-container {
+        transition: opacity 250ms ease-in-out;
+      }
+
+      #configure-container *> span {

[tommycli, 2016/06/29 22:56:09]

This is just that one error message span right? Just give it an explicit id.

[jdufault, 2016/06/30 18:10:18]

Done.

+        color: var(--paper-grey-500);
+        font-style: italic;
+      }
+
+      .align-end {

[tommycli, 2016/06/29 22:56:09]

Does .button-strip within settings-shared work instead of making a new class?

[jdufault, 2016/06/30 18:10:18]

Nope; I tried putting it on both the div and the button (fwiw, button-strip adds
a text-align: end).

+        justify-content: flex-end;
+      }
+    </style>
+
+    <div>
+      <div class="settings-box">
+        $i18n{quickUnlockChooseUnlockMethod}
+      </div>
+
+      <div class="list-frame">
+        <paper-radio-group selected="{{selectedUnlockType_}}">
+          <paper-radio-button name="password">
+            $i18n{quickUnlockUnlockMethodPassword}
+          </paper-radio-button>
+          <paper-radio-button name="pin+password">
+            $i18n{quickUnlockUnlockMethodPinAndPassword}
+          </paper-radio-button>
+          <paper-radio-button name="none">
+            $i18n{quickUnlockUnlockMethodNone}
+          </paper-radio-button>
+        </paper-radio-group>
+      </div>
+
+      <div id="configure-container" class="step"
+           style$="{{computeConfigureContainerStyle_(selectedUnlockType_)}}">
+        <div class="settings-box continuation">
+          <!-- TODO(jdufault): i18n once this string is finalized. -->
+          <span>Warning about how PIN is weaker than a password.</span>
+        </div>
+
+        <div class="align-end settings-box">
+          <paper-button class="action-button" on-tap="onConfigurePin_">

[tommycli, 2016/06/29 22:56:09]

Can we make this onSubmitPin_? It would make clear to the user that it's
expected to go to the next part of the wizard.

[jdufault, 2016/06/30 18:10:18]

onSubmitPin_ implies that we are submitting a PIN, but we are actually setting
up the PIN. I'd prefer to use the term 'setup' instead of 'configure', but I
went with 'configure' because that's what the UI string uses.

I can change this if you'd still like, but I'd prefer onSetupPin_ instead of
onSubmitPin_.

+            $i18n{quickUnlockConfigurePinButton}
+          </paper-button>
+        </div>
+      </div>
+    </div>
+  </template>
+
+  <script src="quick_unlock_choose_method.js"></script>
+</dom-module>