Add quick unlock Settings in options page

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

 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="/people_page/lock_state_behavior.html">
 <link rel="import" href="/people_page/password_prompt_dialog.html">
 <link rel="import" href="/people_page/setup_pin_dialog.html">
 <link rel="import" href="/prefs/prefs_behavior.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"></style>
     <style>
       .radio-indent {
         margin-left: 28px;
       }
+      <!-- TODO(xiaoyinh@): Remove the hidden style once we 
+                            don't need to support options -->

[tommycli, 2016/08/16 21:10:24]

Why are these needed for Options? Doesn't hidden mean the same thing as display:
none?

[tommycli, 2016/08/17 21:19:58]

We should find out why hidden doesn't work in Options before proceeding.

[xiaoyinh(OOO Sep 11-29), 2016/08/18 22:41:12]

In settings we have imported
chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html
which has the following style that set hidden to none.

  [hidden] {
    display: none !important;
  }


I have imported that file in options as well, now it works fine.

+      .radio-indent[hidden] {
+        display: none;
+      }
+
+      .settings-checkbox[hidden] {
+        display: none;
+      }
 
       paper-button {
         text-transform: none;
       }
     </style>
 
     <div>
+      <!--TODO(xiaoyinh@): Use this format $i18n{lockScreenPasswordOnly} once 
+                           we don't need to support options -->
       <div class="list-frame">
         <paper-radio-group selected="{{selectedUnlockType}}">
           <paper-radio-button name="password">
-            $i18n{lockScreenPasswordOnly}
+            [[i18n('lockScreenPasswordOnly')]]
           </paper-radio-button>
           <paper-radio-button name="pin+password">
-            $i18n{lockScreenPinOrPassword}
+            [[i18n('lockScreenPinOrPassword')]]
           </paper-radio-button>
           <div class="settings-box continuation radio-indent"
                hidden$="[[!showConfigurePinButton_(selectedUnlockType)]]">
             <paper-button is="action-link" on-tap="onConfigurePin_">
               [[getSetupPinText_(hasPin)]]
             </paper-button>
           </div>
         </paper-radio-group>
       </div>
 
       <div class="settings-box single-column">
         <settings-checkbox pref="{{prefs.settings.enable_screen_lock}}"
-                           label="$i18n{enableScreenlock}">
+                           label="$i18n{enableScreenlock}" hidden$="[[hideEnableScreenlock]]">
         </settings-checkbox>
       </div>
 
       <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>
     </div>
   </template>
 
   <script src="lock_screen.js"></script>
 </dom-module>