Adding pref to store the user-selected proximity threshold.

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/assert.html">
 <link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.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_dropdown_menu.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">
@@ skipping 46 matching lines @@
           </div>
           <div class="list-frame">
             <paper-radio-group id="unlockType"
                 selected="{{selectedUnlockType}}">
               <paper-radio-button name="password" class="list-item underbar">
                 <div class="start">
                   $i18n{lockScreenPasswordOnly}
                 </div>
               </paper-radio-button>
               <paper-radio-button name="pin+password"
                   class="list-item underbar">

[stevenjb, 2017/07/17 16:55:08]

'underbar' should be removed here (see next comment)

[sacomoto, 2017/07/20 19:50:15]

Done.

                 <div id="pinPasswordDiv" class="start">
                   $i18n{lockScreenPinOrPassword}
                 </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_">
@@ skipping 32 matching lines @@
                     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 continuation">

[stevenjb, 2017/07/17 16:55:08]

I also noticed that this really shouldn't be 'continuation' and we should remove
the final 'underbar' above.

[sacomoto, 2017/07/20 19:50:15]

Done.

           <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_(
-                  easyUnlockEnabled_, easyUnlockProximityDetectionAllowed_)]]">
-                <settings-toggle-button
-                    pref="{{prefs.easy_unlock.proximity_required}}"
-                    label="$i18n{easyUnlockRequireProximityLabel}">
-                </settings-toggle-button>
+              <template is="dom-if" if="[[easyUnlockEnabled_]]">
+                <div class="setting-box">

[stevenjb, 2017/07/17 16:43:36]

Instead of having a settings-box inside a settings-box like this, this should be
at the same level as #easyUnlock.

Also we generally use iron-collapse to hide the section when the setting is
disabled so that the subsection animates opened/closed when the controlling
setting is enabled/disabled.

See "Enable auto repeat" in the keyboard settings for an example.

[sacomoto, 2017/07/20 19:50:15]

Done.

+                  <div class="start">
+                    $i18n{easyUnlockProximityThresholdLabel}
+                    <settings-dropdown-menu
+                        pref="{{prefs.easy_unlock.proximity_threshold}}"
+                        menu-options="[[easyUnlockProximityThresholdMapping_]]">
+                    </settings-dropdown-menu>

[stevenjb, 2017/07/17 16:43:37]

The dropdown menu should be at the same level as the <div> so that it appears
right aligned.

[sacomoto, 2017/07/20 19:50:15]

Done.

+                  </div>
+                </div>
               </template>
-            </div>
+             </div>
           </div>
           <div class="separator"></div>
           <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"
@@ skipping 19 matching lines @@
       <template is="dom-if" if="[[showEasyUnlockTurnOffDialog_]]" restamp>
         <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>