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

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

 // Copyright 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @fileoverview
  * 'settings-lock-screen' allows the user to change how they unlock their
  * device.
  *
  * Example:
@@ skipping 133 matching lines @@
     this.fingerprintBrowserProxy_ =
         settings.FingerprintBrowserProxyImpl.getInstance();
 
     if (this.easyUnlockAllowed_) {
       this.addWebUIListener(
           'easy-unlock-enabled-status',
           this.handleEasyUnlockEnabledStatusChanged_.bind(this));
       this.easyUnlockBrowserProxy_.getEnabledStatus().then(
           this.handleEasyUnlockEnabledStatusChanged_.bind(this));
     }
+
+    // PaperRadioButton's content area's width is only as long as the text in
+    // it's content, but we want the set up link to be on the rightmost of the
+    // box, so modify the css of the PaperRadioButton's content parent.
+    var radioButtons = this.shadowRoot.querySelectorAll('paper-radio-button');
+    radioButtons.forEach(function(radioButton) {
+      var radioLabel = radioButton.shadowRoot.querySelector('#radioLabel');

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

nah, don't do this

+      radioLabel.style.display = 'flex';
+      radioLabel.style.width = '100%';
+    });

[sammiequon, 2017/04/14 23:43:52]

Steven, since this is similar to https://codereview.chromium.org/2822733002/, do
you know if there is a better approach? The other options I could think of were
to 1) not use paper-radio-group or 2) make edits to paper-radio-button.

[stevenjb, 2017/04/17 17:18:20]

You are correct in that I would really prefer to avoid this type of shadow root
modification if possible.

Did you try wrapping the content in a div and applying the above styling to
that? i.e.

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

               </paper-button>
             </div>
           </paper-radio-button>


If that doesn't work, paper-radio-button is not especially complicated. We could
create a much simpler unlock-radio-button that has the same behaviors,
hostattributes, and properties.

Dan, any suggestions here?

   },
 
   /**
    * Overridden from settings.RouteObserverBehavior.
    * @param {!settings.Route} newRoute
    * @param {!settings.Route} oldRoute
    * @protected
    */
   currentRouteChanged: function(newRoute, oldRoute) {
     if (newRoute == settings.Route.LOCK_SCREEN &&
@@ skipping 47 matching lines @@
       this.$$('#unlockType').focus();
   },
 
   /** @private */
   onPinSetupDone_: function() {
     this.$.setupPin.close();
   },
 
   /** @private */
   onSetupPinClosed_: function() {
-    this.$$('#setupPinLink').focus();
+    this.$$('#setupPinButton').focus();
   },
 
   /**
    * Returns true if the setup pin section should be shown.
    * @param {!string} selectedUnlockType The current unlock type. Used to let
    *     Polymer know about the dependency.
    * @private
    */
   showConfigurePinButton_: function(selectedUnlockType) {
     return selectedUnlockType === LockScreenUnlockType.PIN_PASSWORD;
@@ skipping 88 matching lines @@
   /**
    * @param {boolean} easyUnlockEnabled
    * @param {boolean} proximityDetectionAllowed
    * @private
    */
   getShowEasyUnlockToggle_: function(
       easyUnlockEnabled, proximityDetectionAllowed) {
     return easyUnlockEnabled && proximityDetectionAllowed;
   },
 });