Rework quick unlock settings to follow new specs.

chrome/browser/resources/settings/people_page/lock_screen.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/polymer/v1_0/paper-button/paper-button.html">
+<link rel="import" href="/people_page/lock_state_behavior.html">
+<link rel="import" href="/people_page/password_prompt_dialog.html">
+<link rel="import" href="/people_page/setup_pin_dialog.html">
+<link rel="import" href="/prefs/prefs_behavior.html">
+<link rel="import" href="/route.html">
+<link rel="import" href="/settings_shared_css.html">
+
+<dom-module id="settings-lock-screen">
+  <template>
+    <style include="settings-shared"></style>
+    <style>
+      .radio-indent {
+        margin-left: 28px;
+      }
+
+      paper-button {
+        text-transform: none;

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

What does this do?

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

Removes the all-caps from the "action-link" paper-button below.

+      }
+    </style>
+
+    <div>
+      <div class="list-frame">
+        <paper-radio-group selected="{{selectedUnlockType}}">
+          <paper-radio-button name="password">
+            $i18n{lockScreenPasswordOnly}
+          </paper-radio-button>
+          <paper-radio-button name="pin+password">
+            $i18n{lockScreenPinOrPassword}
+          </paper-radio-button>
+          <div class="settings-box continuation radio-indent"
+               hidden$="[[!showSetupPin_(selectedUnlockType)]]">
+            <paper-button is="action-link" on-tap="onConfigurePin_">
+              [[getSetupPinText_(hasPin)]]
+            </paper-button>
+          </div>
+        </paper-radio-group>
+      </div>
+
+      <div class="settings-box single-column">

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

In the mocks, isn't this above the radio group?

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

That got changed around in the newest mocks
(https://folio.googleplex.com/chrome-ux-specs-and-sources/Chrome%20Inner%20Pag...).

+        <settings-checkbox pref="{{prefs.settings.enable_screen_lock}}"
+                           label="$i18n{enableScreenlock}">
+        </settings-checkbox>
+      </div>
+
+      <settings-password-prompt-dialog id="passwordPrompt"

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

Is it intended that the "Confirm your password" dialog opens AFTER navigating to
the "Configure screen lock" subpage?

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

I implemented it that way for simplicity, since if the user navigates directly
to this page they will have also have to enter their password. The alternative
is kicking them back to people, bringing up a password page, and then routing
back here.

[tommycli, 2016/08/09 16:15:36]

Acknowledged. I'm always pro-simplicity.

+                                       on-close="onPasswordClosed_"
+                                       set-modes="{{setModes_}}">
+      </settings-password-prompt-dialog>
+      <settings-setup-pin-dialog id="setupPin" on-done="onPinSetupDone_"
+                                 set-modes="[[setModes_]]">
+      </settings-setup-pin-dialog>
+    </div>
+  </template>
+
+  <script src="lock_screen.js"></script>
+</dom-module>