Add quick unlock Settings in options page

chrome/browser/resources/options/route.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.
+//
+// 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() {
   /**
    * Class for navigable routes. May only be instantiated within this file.
    * @constructor
    * @param {string} path
    * @private
    */
   var Route = function(path) {
     this.path = path;
 
     /** @type {?settings.Route} */
     this.parent = null;
 
     // 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 = {
     /**
      * 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.
       // If it does have a leading slash, it's just set as the new route's URL.
       var newUrl = path[0] == '/' ? path : this.path + '/' + path;
 
       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
      * @param {string} section
      * @return {!settings.Route}
      * @private
      */
     createSection: function(path, section) {
       var route = this.createChild(path);
       route.section = section;
       return route;
     },
 
     /**
      * Returns true if this route matches or is an ancestor of the parameter.
      * @param {!settings.Route} route
      * @return {boolean}
      */
     contains: function(route) {
       for (var r = route; r != null; r = r.parent) {
         if (this == r)
           return true;
       }
       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.
   var r = Route;
 
   // Root pages.
   r.BASIC = new Route('/');
   r.ADVANCED = new Route('/advanced');
   r.ABOUT = new Route('/help');
 
 <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');
+  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');
 
-  // 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_HANDLERS = r.SITE_SETTINGS.createChild(
+      'handlers', 'protocol-handlers');
 
-  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');
+  // 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>
 
   var routeObservers_ = new Set();
 
   /** @polymerBehavior */
   var RouteObserverBehavior = {
     /** @override */
     attached: function() {
       assert(!routeObservers_.has(this));
@@ skipping 35 matching lines @@
   var currentRoute_ = Route.BASIC;
 
   /**
    * The current query parameters. This updated only by settings.navigateTo.
    * @private {!URLSearchParams}
    */
   var currentQueryParameters_ = new URLSearchParams();
 
   // 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);
-    }
   })();
 
   /**
    * Helper function to set the current route and notify all observers.
    * @param {!settings.Route} route
    * @param {!URLSearchParams} queryParameters
    */
   var setCurrentRoute = function(route, queryParameters) {
     var oldRoute = currentRoute_;
     currentRoute_ = route;
@@ skipping 12 matching lines @@
 
   /**
    * Navigates to a canonical route and pushes a new history entry.
    * @param {!settings.Route} route
    * @param {URLSearchParams=} opt_dynamicParameters Navigations to the same
    *     search parameters in a different order will still push to history.
    * @private
    */
   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) {
       var queryString = opt_dynamicParameters.toString();
       if (queryString)
         url += '?' + queryString;
     }
 
     // History serializes the state, so we don't push the actual route object.
     var previousRoutePath = currentRoute_.path;
     setCurrentRoute(route, params);
     window.history.pushState(previousRoutePath, '', url);
   };
 
   window.addEventListener('popstate', function(event) {
     // On pop state, do not push the state onto the window.history again.
     setCurrentRoute(getRouteForPath(window.location.pathname) || Route.BASIC,
                     new URLSearchParams(window.location.search));
   });
 
   return {
     Route: Route,
     RouteObserverBehavior: RouteObserverBehavior,
     getRouteForPath: getRouteForPath,
     getCurrentRoute: getCurrentRoute,
     getQueryParameters: getQueryParameters,
     navigateTo: navigateTo,
   };
 });