md settings: Change action link to button on lock screen.

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

Index: chrome/browser/resources/settings/people_page/lock_screen.html
diff --git a/chrome/browser/resources/settings/people_page/lock_screen.html b/chrome/browser/resources/settings/people_page/lock_screen.html
index 6fc2f78f3d334c976a6d7d34d656c97b2a01e2ab..325a9863be12cf0d4884633afe2b731a0a0ecddd 100644
--- a/chrome/browser/resources/settings/people_page/lock_screen.html
+++ b/chrome/browser/resources/settings/people_page/lock_screen.html
@@ -1,6 +1,4 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
-<link rel="import" href="chrome://resources/html/action_link.html">
-<link rel="import" href="chrome://resources/html/action_link_css.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">
@@ -29,8 +27,8 @@
         padding: 11px 0;
       }
 
-      .radio-indent {
-        -webkit-margin-start: 36px;
+      paper-radio-button > .start {
+        flex: 1;
       }
     </style>
 
@@ -38,19 +36,27 @@
       <div class="list-frame">
         <paper-radio-group id="unlockType" selected="{{selectedUnlockType}}">
           <paper-radio-button name="password">
-            $i18n{lockScreenPasswordOnly}
+            <div class="start">
+              $i18n{lockScreenPasswordOnly}
+              <div class="secondary">
+                $i18n{lockScreenHighSecurity}
+              </div>
+            </div>
           </paper-radio-button>
           <paper-radio-button name="pin+password">
-            $i18n{lockScreenPinOrPassword}
+            <div class="start">

[Dan Beam, 2017/04/17 21:58:36]

can you just do

<style>

#pin-or-password-wrapper {
  display: flex;
}
/* NOTE: you might have to give the <paper-radio-button> a width: 100%; as well
*/

</style>

<paper-radio-button name="pin+password">
  <div id="pin-or-password-wrapper">
    <div class="start">...</div>
    <paper-button id="setupPinButton" ...></paper-button>
  </div>
</paper-radio-button>

[sammiequon, 2017/04/18 00:04:24]

I tried this this morning, but it doesn't seem to work. The paper-radio-button
itself is 100% of the parents width, but the div (#radioLabel) which contains
<content> in the paper-radio-button is only as wide as the text gets it seems,
which squashes the button to be under the text.

[stevenjb, 2017/04/19 20:28:42]

I poked around with this and the problem is that in paper-radio-button,
#radioLabel is display: inline-block and has no @apply var.

One fix would be to modify paper-radio-button to include
@apply(--paper-radio-button-radio-label) for #radioLabel and use that to make it
display: flex and flex: 1.

Another fix would just be to create a custom button element using
Polymer.PaperCheckedElementBehavior.

Dan, thoughts?

+              $i18n{lockScreenPinOrPassword}
+              <div class="secondary">
+                $i18n{lockScreenMediumSecurity}
+              </div>
+            </div>
+            <paper-button id="setupPinButton" class="secondary-button"
+                on-tap="onConfigurePin_"
+                disabled$="[[!showConfigurePinButton_(selectedUnlockType)]]">
+              [[getSetupPinText_(hasPin)]]
+            </paper-button>
           </paper-radio-button>
         </paper-radio-group>
-        <div class="list-item radio-indent"
-            hidden$="[[!showConfigurePinButton_(selectedUnlockType)]]">
-          <a id="setupPinLink" is="action-link" class="list-button"
-              on-tap="onConfigurePin_">
-            [[getSetupPinText_(hasPin)]]
-          </a>
-        </div>
       </div>
 
       <div id="screenLockDiv" class="settings-box">