Add quick unlock Settings in options page

chrome/browser/resources/options/route.js

Index: chrome/browser/resources/options/route.js
diff --git a/chrome/browser/resources/settings/route.js b/chrome/browser/resources/options/route.js
similarity index 53%
copy from chrome/browser/resources/settings/route.js
copy to chrome/browser/resources/options/route.js
index 0238bb4e939b1678e472fadcfbc05d74f239406c..2333e7571f2fce343177777836d8cf0798d85435 100644
--- a/chrome/browser/resources/settings/route.js
+++ b/chrome/browser/resources/options/route.js
@@ -1,6 +1,15 @@
 // 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.
+//
+// TODO(xiaoyinh@): This file is mostly a copy of
+// chrome/browser/resources/settings/route.js. And it is used to integrate
+// with the polymer elements in settings.
+// It should be removed once we don't need to support options.
+// I add a copy in options instead of import it directly from settings

[jdufault, 2016/08/15 19:21:18]

Can we avoid loading the polymer elements until after we need to show PIN
keyboard?

What about just creating a simple stub for this class?

[xiaoyinh(OOO Sep 11-29), 2016/08/16 17:33:43]

Thanks Jacob! Could you take a look at route_stub.js?

+// because this file initializes the route from the URL, and return to
+// basic path if a valid route is not found. This will make a lot of
+// options URL not usable anymore, so I removed the logic in here.
 
 cr.define('settings', function() {
   /**
@@ -18,6 +27,7 @@ cr.define('settings', function() {
     // Below are all legacy properties to provide compatibility with the old
     // routing system. TODO(tommycli): Remove once routing refactor complete.
     this.section = '';
+    /** @type {!Array<string>} */ this.subpage = [];
   };
 
   Route.prototype = {
@@ -25,10 +35,11 @@ cr.define('settings', function() {
      * Returns a new Route instance that's a child of this route.
      * @param {string} path Extends this route's path if it doesn't contain a
      *     leading slash.
+     * @param {string=} opt_subpageName
      * @return {!settings.Route}
      * @private
      */
-    createChild: function(path) {
+    createChild: function(path, opt_subpageName) {
       assert(path);
 
       // |path| extends this route's path if it doesn't have a leading slash.
@@ -38,11 +49,28 @@ cr.define('settings', function() {
       var route = new Route(newUrl);
       route.parent = this;
       route.section = this.section;
+      route.subpage = this.subpage.slice();  // Shallow copy.
+
+      if (opt_subpageName)
+        route.subpage.push(opt_subpageName);
 
       return route;
     },
 
     /**
+     * Returns a new Route instance that's a child dialog of this route.
+     * @param {string} path
+     * @param {string} dialogName
+     * @return {!settings.Route}
+     * @private
+     */
+    createDialog: function(path, dialogName) {
+      var route = this.createChild(path);
+      route.dialog = dialogName;
+      return route;
+    },
+
+    /**
      * Returns a new Route instance that's a child section of this route.
      * TODO(tommycli): Remove once we've obsoleted the concept of sections.
      * @param {string} path
@@ -68,14 +96,6 @@ cr.define('settings', function() {
       }
       return false;
     },
-
-    /**
-     * Returns true if this route is a subpage of a section.
-     * @return {boolean}
-     */
-    isSubpage: function() {
-      return !!this.parent && this.parent.section == this.section;
-    },
   };
 
   // Abbreviated variable for easier definitions.
@@ -88,139 +108,159 @@ cr.define('settings', function() {
 
 <if expr="chromeos">
   r.INTERNET = r.BASIC.createSection('/internet', 'internet');
-  r.NETWORK_DETAIL = r.INTERNET.createChild('/networkDetail');
-  r.KNOWN_NETWORKS = r.INTERNET.createChild('/knownNetworks');
+  r.NETWORK_DETAIL = r.INTERNET.createChild('/networkDetail', 'network-detail');
+  r.KNOWN_NETWORKS = r.INTERNET.createChild('/knownNetworks', 'known-networks');
 </if>
 
   r.APPEARANCE = r.BASIC.createSection('/appearance', 'appearance');
-  r.FONTS = r.APPEARANCE.createChild('/fonts');
+  r.FONTS = r.APPEARANCE.createChild('/fonts', 'appearance-fonts');
 
   r.DEFAULT_BROWSER =
       r.BASIC.createSection('/defaultBrowser', 'defaultBrowser');
 
   r.SEARCH = r.BASIC.createSection('/search', 'search');
-  r.SEARCH_ENGINES = r.SEARCH.createChild('/searchEngines');
+  r.SEARCH_ENGINES = r.SEARCH.createChild('/searchEngines', 'search-engines');
 
   r.ON_STARTUP = r.BASIC.createSection('/onStartup', 'onStartup');
 
   r.PEOPLE = r.BASIC.createSection('/people', 'people');
-  r.SYNC = r.PEOPLE.createChild('/syncSetup');
+  r.SYNC = r.PEOPLE.createChild('/syncSetup', 'sync');
 <if expr="not chromeos">
-  r.MANAGE_PROFILE = r.PEOPLE.createChild('/manageProfile');
+  r.MANAGE_PROFILE = r.PEOPLE.createChild('/manageProfile', 'manageProfile');
 </if>
 <if expr="chromeos">
-  r.CHANGE_PICTURE = r.PEOPLE.createChild('/changePicture');
-  r.ACCOUNTS = r.PEOPLE.createChild('/accounts');
-  r.LOCK_SCREEN = r.PEOPLE.createChild('/lockScreen');
+  r.CHANGE_PICTURE = r.PEOPLE.createChild('/changePicture', 'changePicture');
+  r.ACCOUNTS = r.PEOPLE.createChild('/accounts', 'users');
+  r.LOCK_SCREEN = r.PEOPLE.createChild('/lockScreen', 'lockScreen');
+  r.SETUP_PIN = r.LOCK_SCREEN.createDialog('/setupPin', 'setupPin');
 
   r.DEVICE = r.BASIC.createSection('/device', 'device');
-  r.POINTERS = r.DEVICE.createChild('/pointer-overlay');
-  r.KEYBOARD = r.DEVICE.createChild('/keyboard-overlay');
-  r.DISPLAY = r.DEVICE.createChild('/display');
-  r.NOTES = r.DEVICE.createChild('/note');
+  r.POINTERS = r.DEVICE.createChild('/pointer-overlay', 'pointers');
+  r.KEYBOARD = r.DEVICE.createChild('/keyboard-overlay', 'keyboard');
+  r.DISPLAY = r.DEVICE.createChild('/display', 'display');
+  r.NOTES = r.DEVICE.createChild('/note', 'note');
 </if>
 
   r.PRIVACY = r.ADVANCED.createSection('/privacy', 'privacy');
-  r.CERTIFICATES = r.PRIVACY.createChild('/certificates');
-
-  // CLEAR_BROWSER_DATA is the only navigable dialog route. It's the only child
-  // of a section that's not a subpage. Don't add any more routes like these.
-  // If more navigable dialogs are needed, add explicit support in Route.
-  r.CLEAR_BROWSER_DATA = r.PRIVACY.createChild('/clearBrowserData');
-  r.CLEAR_BROWSER_DATA.isSubpage = function() { return false; };
-
-  r.SITE_SETTINGS = r.PRIVACY.createChild('/siteSettings');
-  r.SITE_SETTINGS_ALL = r.SITE_SETTINGS.createChild('all');
-  r.SITE_SETTINGS_ALL_DETAILS = r.SITE_SETTINGS_ALL.createChild('details');
-
-  r.SITE_SETTINGS_HANDLERS = r.SITE_SETTINGS.createChild('handlers');
-
-  // TODO(tommycli): Find a way to refactor these repetitive category routes.
-  r.SITE_SETTINGS_AUTOMATIC_DOWNLOADS =
-      r.SITE_SETTINGS.createChild('automaticDownloads');
-  r.SITE_SETTINGS_BACKGROUND_SYNC =
-      r.SITE_SETTINGS.createChild('backgroundSync');
-  r.SITE_SETTINGS_CAMERA = r.SITE_SETTINGS.createChild('camera');
-  r.SITE_SETTINGS_COOKIES = r.SITE_SETTINGS.createChild('cookies');
-  r.SITE_SETTINGS_IMAGES = r.SITE_SETTINGS.createChild('images');
-  r.SITE_SETTINGS_JAVASCRIPT = r.SITE_SETTINGS.createChild('javascript');
-  r.SITE_SETTINGS_KEYGEN = r.SITE_SETTINGS.createChild('keygen');
-  r.SITE_SETTINGS_LOCATION = r.SITE_SETTINGS.createChild('location');
-  r.SITE_SETTINGS_MICROPHONE = r.SITE_SETTINGS.createChild('microphone');
-  r.SITE_SETTINGS_NOTIFICATIONS = r.SITE_SETTINGS.createChild('notifications');
-  r.SITE_SETTINGS_PLUGINS = r.SITE_SETTINGS.createChild('plugins');
-  r.SITE_SETTINGS_POPUPS = r.SITE_SETTINGS.createChild('popups');
-  r.SITE_SETTINGS_UNSANDBOXED_PLUGINS =
-      r.SITE_SETTINGS.createChild('unsandboxedPlugins');
+  r.CERTIFICATES =
+      r.PRIVACY.createChild('/certificates', 'manage-certificates');
+  r.CLEAR_BROWSER_DATA =
+      r.PRIVACY.createDialog('/clearBrowserData', 'clear-browsing-data');
+  r.SITE_SETTINGS = r.PRIVACY.createChild('/siteSettings', 'site-settings');
+  r.SITE_SETTINGS_ALL = r.SITE_SETTINGS.createChild('all', 'all-sites');
+  r.SITE_SETTINGS_ALL_DETAILS =
+      r.SITE_SETTINGS_ALL.createChild('details', 'site-details');
+
+  r.SITE_SETTINGS_HANDLERS = r.SITE_SETTINGS.createChild(
+      'handlers', 'protocol-handlers');
+
+  // TODO(tommicli): Find a way to refactor these repetitive category routes.
+  r.SITE_SETTINGS_AUTOMATIC_DOWNLOADS = r.SITE_SETTINGS.createChild(
+      'automaticDownloads', 'site-settings-category-automatic-downloads');
+  r.SITE_SETTINGS_BACKGROUND_SYNC = r.SITE_SETTINGS.createChild(
+      'backgroundSync', 'site-settings-category-background-sync');
+  r.SITE_SETTINGS_CAMERA = r.SITE_SETTINGS.createChild(
+      'camera', 'site-settings-category-camera');
+  r.SITE_SETTINGS_COOKIES = r.SITE_SETTINGS.createChild(
+      'cookies', 'site-settings-category-cookies');
+  r.SITE_SETTINGS_IMAGES = r.SITE_SETTINGS.createChild(
+      'images', 'site-settings-category-images');
+  r.SITE_SETTINGS_JAVASCRIPT = r.SITE_SETTINGS.createChild(
+      'javascript', 'site-settings-category-javascript');
+  r.SITE_SETTINGS_KEYGEN = r.SITE_SETTINGS.createChild(
+      'keygen', 'site-settings-category-keygen');
+  r.SITE_SETTINGS_LOCATION = r.SITE_SETTINGS.createChild(
+      'location', 'site-settings-category-location');
+  r.SITE_SETTINGS_MICROPHONE = r.SITE_SETTINGS.createChild(
+      'microphone', 'site-settings-category-microphone');
+  r.SITE_SETTINGS_NOTIFICATIONS = r.SITE_SETTINGS.createChild(
+      'notifications', 'site-settings-category-notifications');
+  r.SITE_SETTINGS_PLUGINS = r.SITE_SETTINGS.createChild(
+      'plugins', 'site-settings-category-plugins');
+  r.SITE_SETTINGS_POPUPS = r.SITE_SETTINGS.createChild(
+      'popups', 'site-settings-category-popups');
+  r.SITE_SETTINGS_UNSANDBOXED_PLUGINS = r.SITE_SETTINGS.createChild(
+      'unsandboxedPlugins', 'site-settings-category-unsandboxed-plugins');
 
   r.SITE_SETTINGS_AUTOMATIC_DOWNLOADS_DETAILS =
-      r.SITE_SETTINGS_AUTOMATIC_DOWNLOADS.createChild('details');
+      r.SITE_SETTINGS_AUTOMATIC_DOWNLOADS.createChild('details',
+                                                      'site-details');
   r.SITE_SETTINGS_BACKGROUND_SYNC_DETAILS =
-      r.SITE_SETTINGS_BACKGROUND_SYNC.createChild('details');
+      r.SITE_SETTINGS_BACKGROUND_SYNC.createChild('details', 'site-details');
   r.SITE_SETTINGS_CAMERA_DETAILS =
-      r.SITE_SETTINGS_CAMERA.createChild('details');
+      r.SITE_SETTINGS_CAMERA.createChild('details', 'site-details');
   r.SITE_SETTINGS_COOKIES_DETAILS =
-      r.SITE_SETTINGS_COOKIES.createChild('details');
+      r.SITE_SETTINGS_COOKIES.createChild('details', 'site-details');
   r.SITE_SETTINGS_IMAGES_DETAILS =
-      r.SITE_SETTINGS_IMAGES.createChild('details');
+      r.SITE_SETTINGS_IMAGES.createChild('details', 'site-details');
   r.SITE_SETTINGS_JAVASCRIPT_DETAILS =
-      r.SITE_SETTINGS_JAVASCRIPT.createChild('details');
+      r.SITE_SETTINGS_JAVASCRIPT.createChild('details', 'site-details');
   r.SITE_SETTINGS_KEYGEN_DETAILS =
-      r.SITE_SETTINGS_KEYGEN.createChild('details');
+      r.SITE_SETTINGS_KEYGEN.createChild('details', 'site-details');
   r.SITE_SETTINGS_LOCATION_DETAILS =
-      r.SITE_SETTINGS_LOCATION.createChild('details');
+      r.SITE_SETTINGS_LOCATION.createChild('details', 'site-details');
   r.SITE_SETTINGS_MICROPHONE_DETAILS =
-      r.SITE_SETTINGS_MICROPHONE.createChild('details');
+      r.SITE_SETTINGS_MICROPHONE.createChild('details', 'site-details');
   r.SITE_SETTINGS_NOTIFICATIONS_DETAILS =
-      r.SITE_SETTINGS_NOTIFICATIONS.createChild('details');
+      r.SITE_SETTINGS_NOTIFICATIONS.createChild('details', 'site-details');
   r.SITE_SETTINGS_PLUGINS_DETAILS =
-      r.SITE_SETTINGS_PLUGINS.createChild('details');
+      r.SITE_SETTINGS_PLUGINS.createChild('details', 'site-details');
   r.SITE_SETTINGS_POPUPS_DETAILS =
-      r.SITE_SETTINGS_POPUPS.createChild('details');
+      r.SITE_SETTINGS_POPUPS.createChild('details', 'site-details');
   r.SITE_SETTINGS_UNSANDBOXED_PLUGINS_DETAILS =
-      r.SITE_SETTINGS_UNSANDBOXED_PLUGINS.createChild('details');
+      r.SITE_SETTINGS_UNSANDBOXED_PLUGINS.createChild('details',
+                                                      'site-details');
 
 <if expr="chromeos">
   r.DATETIME = r.ADVANCED.createSection('/dateTime', 'dateTime');
 
   r.BLUETOOTH = r.ADVANCED.createSection('/bluetooth', 'bluetooth');
-  r.BLUETOOTH_ADD_DEVICE = r.BLUETOOTH.createChild('/bluetoothAddDevice');
-  r.BLUETOOTH_PAIR_DEVICE =
-      r.BLUETOOTH_ADD_DEVICE.createChild('bluetoothPairDevice');
+  r.BLUETOOTH_ADD_DEVICE =
+      r.BLUETOOTH.createChild('/bluetoothAddDevice', 'bluetooth-add-device');
+  r.BLUETOOTH_PAIR_DEVICE = r.BLUETOOTH_ADD_DEVICE.createChild(
+      'bluetoothPairDevice', 'bluetooth-pair-device');
 </if>
 
   r.PASSWORDS = r.ADVANCED.createSection('/passwords', 'passwordsAndForms');
-  r.AUTOFILL = r.PASSWORDS.createChild('/autofill');
-  r.MANAGE_PASSWORDS = r.PASSWORDS.createChild('/managePasswords');
+  r.AUTOFILL = r.PASSWORDS.createChild('/autofill', 'manage-autofill');
+  r.MANAGE_PASSWORDS =
+      r.PASSWORDS.createChild('/managePasswords', 'manage-passwords');
 
   r.LANGUAGES = r.ADVANCED.createSection('/languages', 'languages');
-  r.LANGUAGES_DETAIL = r.LANGUAGES.createChild('edit');
-  r.MANAGE_LANGUAGES = r.LANGUAGES.createChild('/manageLanguages');
+  r.LANGUAGES_DETAIL = r.LANGUAGES.createChild('edit', 'language-detail');
+  r.MANAGE_LANGUAGES =
+      r.LANGUAGES.createChild('/manageLanguages', 'manage-languages');
 <if expr="chromeos">
-  r.INPUT_METHODS = r.LANGUAGES.createChild('/inputMethods');
+  r.INPUT_METHODS =
+      r.LANGUAGES.createChild('/inputMethods', 'manage-input-methods');
 </if>
 <if expr="not is_macosx">
-  r.EDIT_DICTIONARY = r.LANGUAGES.createChild('/editDictionary');
+  r.EDIT_DICTIONARY =
+      r.LANGUAGES.createChild('/editDictionary', 'edit-dictionary');
 </if>
 
   r.DOWNLOADS = r.ADVANCED.createSection('/downloadsDirectory', 'downloads');
 
   r.PRINTING = r.ADVANCED.createSection('/printing', 'printing');
-  r.CLOUD_PRINTERS = r.PRINTING.createChild('/cloudPrinters');
+  r.CLOUD_PRINTERS = r.PRINTING.createChild('/cloudPrinters', 'cloud-printers');
 <if expr="chromeos">
-  r.CUPS_PRINTERS = r.PRINTING.createChild('/cupsPrinters');
-  r.CUPS_PRINTER_DETAIL = r.CUPS_PRINTERS.createChild('/cupsPrinterDetails');
+  r.CUPS_PRINTERS = r.PRINTING.createChild('/cupsPrinters', 'cups-printers');
+  r.CUPS_PRINTER_DETAIL = r.CUPS_PRINTERS.createChild(
+      '/cupsPrinterDetails', 'cups-printer-details-page');
 </if>
 
   r.ACCESSIBILITY = r.ADVANCED.createSection('/accessibility', 'a11y');
-  r.MANAGE_ACCESSIBILITY = r.ACCESSIBILITY.createChild('/manageAccessibility');
+  r.MANAGE_ACCESSIBILITY = r.ACCESSIBILITY.createChild(
+      '/manageAccessibility', 'manage-a11y');
 
   r.SYSTEM = r.ADVANCED.createSection('/system', 'system');
   r.RESET = r.ADVANCED.createSection('/reset', 'reset');
 
 <if expr="chromeos">
-  r.INPUT_METHODS = r.LANGUAGES.createChild('/inputMethods');
-  r.DETAILED_BUILD_INFO = r.ABOUT.createChild('/help/details');
+  r.INPUT_METHODS =
+      r.LANGUAGES.createChild('/inputMethods', 'manage-input-methods');
+  r.DETAILED_BUILD_INFO =
+      r.ABOUT.createChild('/help/details', 'detailed-build-info');
   r.DETAILED_BUILD_INFO.section = 'about';
 </if>
 
@@ -276,13 +316,6 @@ cr.define('settings', function() {
 
   // Initialize the route and query params from the URL.
   (function() {
-    var route = getRouteForPath(window.location.pathname);
-    if (route) {
-      currentRoute_ = route;
-      currentQueryParameters_ = new URLSearchParams(window.location.search);
-    } else {
-      window.history.pushState(undefined, '', Route.BASIC.path);
-    }
   })();
 
   /**
@@ -315,6 +348,10 @@ cr.define('settings', function() {
    */
   var navigateTo = function(route, opt_dynamicParameters) {
     var params = opt_dynamicParameters || new URLSearchParams();
+    if (assert(route) == currentRoute_ &&
+        params.toString() == currentQueryParameters_.toString()) {
+      return;
+    }
 
     var url = route.path;
     if (opt_dynamicParameters) {