md settings: Update lock screen to match new mocks.

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

 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.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/html/web_ui_listener_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-group/paper-radio-group.html">
 <link rel="import" href="../controls/settings_toggle_button.html">
 <link rel="import" href="easy_unlock_browser_proxy.html">
 <link rel="import" href="easy_unlock_turn_off_dialog.html">
 <link rel="import" href="fingerprint_browser_proxy.html">
 <link rel="import" href="lock_screen_constants.html">
 <link rel="import" href="lock_state_behavior.html">
 <link rel="import" href="password_prompt_dialog.html">
 <link rel="import" href="setup_pin_dialog.html">
 <link rel="import" href="../i18n_setup.html">
 <link rel="import" href="../prefs/prefs_behavior.html">
 <link rel="import" href="../prefs/prefs.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 action-link">
+    <style include="settings-shared">
       #easyUnlock .start {
         /* When the easy unlock toggle is shown, the easy unlock section's
          * content becomes squashed to the top and bottom edges. Use padding to
-         * ensure the easy unlock content looks correct. */
+         * ensure the easy unlock content looks correct.
+         */
         padding: 11px 0;
       }
 
+      #lockOptionsDiv {
+        display: block;
+      }
+
       paper-radio-button {
         --paper-radio-button-label: {
           display: flex;
+          line-height: 154%;

[stevenjb, 2017/05/08 18:12:22]

Add comment on where 154% is coming from.

[sammiequon, 2017/05/08 19:16:49]

Done.

           width: 100%;
         };
       }
 
-      paper-radio-button > .start {
-        flex: 1;
+      #pinPasswordDiv,
+      #pinPasswordSecondaryActionDiv {
+        margin: auto;
       }
     </style>
 
     <div>
-      <div class="list-frame">
-        <paper-radio-group id="unlockType" selected="{{selectedUnlockType}}">
-          <paper-radio-button name="password">
-            <div class="start">
-              $i18n{lockScreenPasswordOnly}
-              <div class="secondary">
-                $i18n{lockScreenHighSecurity}
-              </div>
-            </div>
-          </paper-radio-button>
-          <paper-radio-button name="pin+password">
-            <div class="start">
-              $i18n{lockScreenPinOrPassword}
-              <div class="secondary">
-                $i18n{lockScreenMediumSecurity}
-              </div>
-            </div>
-            <template is="dom-if"
-                if="[[showConfigurePinButton_(selectedUnlockType)]]">
-              <paper-button id="setupPinButton" class="secondary-button"
-                  on-tap="onConfigurePin_">
-                [[getSetupPinText_(hasPin)]]
-              </paper-button>
-            </template>
-          </paper-radio-button>
-        </paper-radio-group>
-      </div>
-
-      <div id="screenLockDiv" class="settings-box">
+      <div id="screenLockDiv" class="settings-box first">
         <settings-toggle-button class="start"
             pref="{{prefs.settings.enable_screen_lock}}"
             label="$i18n{enableScreenlock}">
         </settings-toggle-button>
       </div>
 
+      <div id="lockOptionsDiv">
+        <div class="settings-box">
+          <h2>$i18n{lockScreenOptions}</h2>
+        </div>
+        <div class="list-frame">
+          <paper-radio-group id="unlockType" selected="{{selectedUnlockType}}">
+            <paper-radio-button name="password"
+                class="settings-box first two-line">

[stevenjb, 2017/05/08 18:12:22]

This is weird. We use settings-box for divs, and not generally inside a
list-frame. We should be able to get the desired effect using shared vars
instead, and then we can use it for all paper-radio-button (or all #unloockType
> paper-radio-button).

[sammiequon, 2017/05/08 19:16:49]

how about list-item underbar?

+              <div class="start">
+                $i18n{lockScreenPasswordOnly}
+                <div class="secondary">
+                  $i18n{lockScreenHighSecurity}
+                </div>
+              </div>
+            </paper-radio-button>
+            <paper-radio-button name="pin+password"
+                class="settings-box two-line">
+              <div id="pinPasswordDiv" class="start">
+                $i18n{lockScreenPinOrPassword}
+                <div class="secondary">
+                  $i18n{lockScreenMediumSecurity}
+                </div>
+              </div>
+              <template is="dom-if"
+                  if="[[showConfigurePinButton_(selectedUnlockType)]]">
+                <div class="separator"></div>
+                <div id="pinPasswordSecondaryActionDiv"
+                    class="secondary-action">
+                  <paper-button id="setupPinButton" class="secondary-button"
+                      on-tap="onConfigurePin_">
+                    [[getSetupPinText_(hasPin)]]
+                  </paper-button>
+                </div>
+              </template>
+            </paper-radio-button>
+            <div class="settings-box line-only"></div>
+          </paper-radio-group>
+        </div>
+      </div>
+
       <template is="dom-if" if="[[fingerprintUnlockEnabled_]]">
         <div id="fingerprintDiv">
-          <div class="settings-box">
+          <div class="settings-box continuation">
             <settings-toggle-button class="start"
                 pref="{{prefs.settings.enable_quick_unlock_fingerprint}}"
                 label="$i18n{lockScreenFingerprintEnable}">
             </settings-toggle-button>
           </div>
           <iron-collapse
               opened="[[prefs.settings.enable_quick_unlock_fingerprint.value]]">
-            <div class="settings-box continuation" on-tap="onEditFingerprints_"
-                actionable>
+            <div class="settings-box continuation">
               <div class="start">
                 $i18n{lockScreenEditFingerprints}
                 <div class="secondary" id="lockScreenEditFingerprintsSecondary">
                   [[getDescriptionText_(numFingerprints_)]]
                 </div>
               </div>
-              <button class="subpage-arrow" is="paper-icon-button-light"
-                  aria-label="$i18n{lockScreenEditFingerprints}"
-                  aria-describedby="lockScreenEditFingerprintsSecondary"></button>
+              <div class="separator"></div>
+              <div class="secondary-action">
+                <paper-button class="secondary-button"
+                    on-tap="onEditFingerprints_"

[stevenjb, 2017/05/08 18:12:22]

Usually we want the entire div to handle the on-tap, was this moved
intentionally?

[stevenjb, 2017/05/08 18:16:56]

Please ignore. Looking at the mocks (and more closely at the html) I see that
this is now a secondary button so we don't want the the entire line to handle
the tap.

+                    aria-label="$i18n{lockScreenEditFingerprints}"
+                    aria-descibedby="lockScreenEditFingerprintsSecondary">
+                  $i18n{lockScreenSetupFingerprintButton}
+                </paper-button>
+              </div>
             </div>
           </iron-collapse>
         </div>
       </template>
 
       <template is="dom-if" if="[[easyUnlockAllowed_]]">
-        <div id="easyUnlock" class="settings-box two-line">
+        <div id="easyUnlock" class="settings-box two-line continuation">
           <div class="start">
             <div>$i18n{easyUnlockSectionTitle}</div>
             <div class="secondary">
               [[getEasyUnlockDescription_(easyUnlockEnabled_,
                   '$i18nPolymer{easyUnlockDescription}',
                   '$i18nPolymer{easyUnlockSetupIntro}')]]
               <a target="_blank" href="$i18n{easyUnlockLearnMoreURL}">
                 $i18n{learnMore}
               </a>
               <template is="dom-if" if="[[getShowEasyUnlockToggle_(
@@ skipping 32 matching lines @@
       <template is="dom-if" if="[[showEasyUnlockTurnOffDialog_]]">
         <easy-unlock-turn-off-dialog id="easyUnlockTurnOffDialog"
             on-close="onEasyUnlockTurnOffDialogClose_">
         </easy-unlock-turn-off-dialog>
       </template>
     </div>
   </template>
 
   <script src="lock_screen.js"></script>
 </dom-module>