MD Settings: Move easy unlock from people to lock screen.

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

 <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">
 <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">
+      #easyUnlock .start {
+        /* Use padding to ensure taller content looks correct. */
+        padding: 11px 0;

[stevenjb, 2017/04/07 17:54:18]

We try to avoid this sort of thing as much as possible. Could you clarify the
comment some? Also, does the padding need to be top and bottom? We probably also
shouldn't override the horizontal padding (i.e. use top and or bottom
explicitly). Can we use a value from settings_shared_css.html?

[sammiequon, 2017/04/11 00:28:44]

I'm not entirely sure what this does. I played around with removing it, but I
can't really see a difference. It was added here
https://codereview.chromium.org/2482553002, but maybe its obsolete now?

Ok, I see what it does now, when there's too much element inside .start (when
the easy unlock toggle is shown), the text gets squashed up to the top, so this
11px emulates what happens in regular .start divs, which have a space between
the text and bounds (because they usually only have ore or two lines of text).

I didn't see anything in shared settings with top bottom padding. Would this
comment suffice?

[stevenjb, 2017/04/11 17:29:37]

Ah. Yeah, in that context I gave the benefit of the doubt that it was necessary.
The improved comment helps, thanks.

+      }
+
       .radio-indent {
         -webkit-margin-start: 36px;
       }
     </style>
 
     <div>
       <div class="list-frame">
         <paper-radio-group selected="{{selectedUnlockType}}">
           <paper-radio-button name="password">
             $i18n{lockScreenPasswordOnly}
@@ skipping 36 matching lines @@
                 </div>
               </div>
               <button class="subpage-arrow" is="paper-icon-button-light"
                   aria-label="$i18n{lockScreenEditFingerprints}"
                   aria-describedby="lockScreenEditFingerprintsSecondary"></button>
             </div>
           </iron-collapse>
         </div>
       </template>
 
+      <template is="dom-if" if="[[easyUnlockAllowed_]]">
+        <div id="easyUnlock" class="settings-box two-line">
+          <div class="start">
+            <div>$i18n{easyUnlockSectionTitle}</div>
+            <div class="secondary">
+              <template is="dom-if" if="[[!easyUnlockEnabled_]]">
+                $i18n{easyUnlockSetupIntro}
+              </template>
+              <template is="dom-if" if="[[easyUnlockEnabled_]]">
+                $i18n{easyUnlockDescription}
+              </template>

[stevenjb, 2017/04/07 17:54:18]

Instead of having two templated sections here, just do:

[[getEasyUnlockDescription_(easyUnlockEnabled_,
'$i18nPolymer{easyUnlockSetupIntro}', '$i18nPolymer{easyUnlockDescription}')]]

[sammiequon, 2017/04/11 00:28:44]

Done.

+              <a target="_blank" href="$i18n{easyUnlockLearnMoreURL}">
+                $i18n{learnMore}
+              </a>
+              <!-- TODO(dbeam): this should be 1 dom-if with a method instead
+                   of 2 nested dom-ifs. -->
+              <template is="dom-if" if="[[easyUnlockEnabled_]]">
+                <template is="dom-if"
+                    if="[[easyUnlockProximityDetectionAllowed_]]">
+                  <settings-toggle-button
+                      pref="{{prefs.easy_unlock.proximity_required}}"
+                      label="$i18n{easyUnlockRequireProximityLabel}">
+                  </settings-toggle-button>
+                </template>
+              </template>

[stevenjb, 2017/04/07 17:54:18]

Let's clean this up as Dan suggested:

if="[[getShowEasyUnlockToggle(easyUnlockEnabled_,
easyUnlockProximityDetectionAllowed_)]]"

[sammiequon, 2017/04/11 00:28:44]

Done.

+            </div>
+          </div>
+          <div class="secondary-action">
+            <template is="dom-if" if="[[!easyUnlockEnabled_]]">
+              <paper-button id="easyUnlockSetup" class="secondary-button"
+                  on-tap="onEasyUnlockSetupTap_">
+                $i18n{easyUnlockSetupButton}
+              </paper-button>
+            </template>
+            <template is="dom-if" if="[[easyUnlockEnabled_]]">
+              <paper-button id="easyUnlockTurnOff" class="secondary-button"
+                  on-tap="onEasyUnlockTurnOffTap_">
+                $i18n{easyUnlockTurnOffButton}
+              </paper-button>
+            </template>
+          </div>
+        </div>
+      </template>
+
       <settings-password-prompt-dialog id="passwordPrompt"
           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>
+
+      <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>