Use dom-if to hide settings pages and show explicitly.

This CL:
* Wraps each settings subpage with a dom-if
* Adds a new SettingsPageVisibility behavior that allows tests
  to control page visibility.
* NOTE: This changes the page load order (subpages are all loaded
  after the main pages and their dependencies). This has the side
  benefit of making Prefs more likely to load before the pages do.
* Fixes an inconsistency with the naming of the OnStartup section

NOTE: This does not impact i18n_template.js since that is loaded after <cr-settings> in settings.html, however if we enable a subpage after loading (e.g. in a test) then i18n_template.js will not be processed and would need to be run explicitly to include translations.

BUG=560432
R=dbeam@chromium.org, michaelpg@chromium.org

Review URL: https://codereview.chromium.org/1477773003 .

Cr-Commit-Position: refs/heads/master@{#364470}

chrome/browser/resources/settings/advanced_page/advanced_page.html

@@ -4,6 +4,7 @@
 <link rel="import" href="chrome://md-settings/passwords_and_forms_page/passwords_and_forms_page.html">
 <link rel="import" href="chrome://md-settings/privacy_page/privacy_page.html">
 <link rel="import" href="chrome://md-settings/reset_page/reset_page.html">
+<link rel="import" href="chrome://md-settings/settings_page/settings_page_visibility.html">
 <link rel="import" href="chrome://md-settings/settings_page/settings_section.html">
 <link rel="import" href="chrome://md-settings/site_settings/constants.html">
 <link rel="import" href="chrome://md-settings/site_settings/site_settings_category.html">
@@ -18,67 +19,81 @@
   <link rel="import" type="css" href="advanced_page.css">
   <template>
 <if expr="chromeos">
-    <settings-section i18n-values="page-title:dateTimePageTitle"
-        current-route="[[currentRoute]]" section="dateTime">
-      <settings-date-time-page prefs="{{prefs}}">
-      </settings-date-time-page>
-    </settings-section>
+    <template is="dom-if" if="[[showPage(pageVisibility.dateTime)]]" restamp>
+      <settings-section i18n-values="page-title:dateTimePageTitle"
+          current-route="[[currentRoute]]" section="dateTime">
+        <settings-date-time-page prefs="{{prefs}}">
+        </settings-date-time-page>
+      </settings-section>
+    </template>
 </if>
-    <settings-section i18n-values="page-title:siteSettingsLocation"
-        current-route="[[currentRoute]]" section="location">
-      <site-settings-category id="locationCategory" prefs="{{prefs}}"
-        current-route="{{currentRoute}}">
-      </site-settings-category>
-    </settings-section>
-
-    <settings-section i18n-values="page-title:privacyPageTitle"
-        current-route="[[currentRoute]]" section="privacy">
-      <settings-privacy-page prefs="{{prefs}}"
-        current-route="{{currentRoute}}">
-      </settings-privacy-page>
-    </settings-section>
-
+    <template is="dom-if" if="[[showPage(pageVisibility.location)]]" restamp>
+      <settings-section i18n-values="page-title:siteSettingsLocation"
+          current-route="[[currentRoute]]" section="location">
+        <site-settings-category prefs="{{prefs}}"
+          current-route="{{currentRoute}}"
+          category="[[locationCategory]]">
+        </site-settings-category>
+      </settings-section>
+    </template>
+    <template is="dom-if" if="[[showPage(pageVisibility.privacy)]]" restamp>
+      <settings-section i18n-values="page-title:privacyPageTitle"
+          current-route="[[currentRoute]]" section="privacy">
+        <settings-privacy-page prefs="{{prefs}}"
+          current-route="{{currentRoute}}">
+        </settings-privacy-page>
+      </settings-section>
+    </template>
 <if expr="chromeos">
-    <settings-section i18n-values="page-title:bluetoothPageTitle"
-        current-route="[[currentRoute]]" section="bluetooth">
-      <settings-bluetooth-page current-route="{{currentRoute}}">
-      </settings-bluetooth-page>
-    </settings-section>
+    <template is="dom-if" if="[[showPage(pageVisibility.bluetooth)]]" restamp>
+      <settings-section i18n-values="page-title:bluetoothPageTitle"
+          current-route="[[currentRoute]]" section="bluetooth">
+        <settings-bluetooth-page current-route="{{currentRoute}}">
+        </settings-bluetooth-page>
+      </settings-section>
+    </template>
 </if>
 
-    <settings-section
-        i18n-values="page-title:passwordsAndAutofillPageTitle"
-        current-route="[[currentRoute]]" section="passwordsAndForms">
-      <settings-passwords-and-forms-page prefs="{{prefs}}"
-          current-route="{{currentRoute}}">
-      </settings-passwords-and-forms-page>
-    </settings-section>
-
-    <settings-section i18n-values="page-title:languagesPageTitle"
-        current-route="[[currentRoute]]" section="languages">
-      <settings-languages-page prefs="{{prefs}}"
-          current-route="{{currentRoute}}">
-      </settings-languages-page>
-    </settings-section>
-
-    <settings-section i18n-values="page-title:downloadsPageTitle"
-        current-route="[[currentRoute]]" section="downloads">
-      <settings-downloads-page prefs="{{prefs}}">
-      </settings-downloads-page>
-    </settings-section>
-
-    <settings-section i18n-values="page-title:resetPageTitle"
-        current-route="[[currentRoute]]" section="reset">
-      <settings-reset-page></settings-reset-page>
-    </settings-section>
-
+    <template is="dom-if" if="[[showPage(pageVisibility.passwordsAndForms)]]"
+        restamp>
+      <settings-section
+          i18n-values="page-title:passwordsAndAutofillPageTitle"
+          current-route="[[currentRoute]]" section="passwordsAndForms">
+        <settings-passwords-and-forms-page prefs="{{prefs}}"
+            current-route="{{currentRoute}}">
+        </settings-passwords-and-forms-page>
+      </settings-section>
+    </template>
+    <template is="dom-if" if="[[showPage(pageVisibility.languages)]]" restamp>
+      <settings-section i18n-values="page-title:languagesPageTitle"
+          current-route="[[currentRoute]]" section="languages">
+        <settings-languages-page prefs="{{prefs}}"
+            current-route="{{currentRoute}}">
+        </settings-languages-page>
+      </settings-section>
+    </template>
+    <template is="dom-if" if="[[showPage(pageVisibility.downloads)]]" restamp>
+      <settings-section i18n-values="page-title:downloadsPageTitle"
+          current-route="[[currentRoute]]" section="downloads">
+        <settings-downloads-page prefs="{{prefs}}">
+        </settings-downloads-page>
+      </settings-section>
+    </template>
+    <template is="dom-if" if="[[showPage(pageVisibility.reset)]]" restamp>
+      <settings-section i18n-values="page-title:resetPageTitle"
+          current-route="[[currentRoute]]" section="reset">
+        <settings-reset-page></settings-reset-page>
+      </settings-section>
+    </template>
 <if expr="chromeos">
     <!-- TODO(dbeam): find somewhere to stuff "Add more accessibility features"
          on desktop. -->
-    <settings-section i18n-values="page-title:a11yPageTitle"
-        current-route="[[currentRoute]]" section="a11y">
-      <settings-a11y-page prefs="{{prefs}}"></settings-a11y-page>
-    </settings-section>
+    <template is="dom-if" if="[[showPage(pageVisibility.a11y)]]" restamp>
+      <settings-section i18n-values="page-title:a11yPageTitle"
+          current-route="[[currentRoute]]" section="a11y">
+        <settings-a11y-page prefs="{{prefs}}"></settings-a11y-page>
+      </settings-section>
+    </template>
 </if>
   </template>
   <script src="chrome://md-settings/advanced_page/advanced_page.js"></script>

chrome/browser/resources/settings/advanced_page/advanced_page.js

@@ -37,10 +37,15 @@ Polymer({
       type: Object,
       notify: true,
     },
-  },
 
-  ready: function() {
-    this.$.locationCategory.category =
-        settings.ContentSettingsTypes.GEOLOCATION;
+    /**
+     * The site-settings-category type for the location page.
+     */
+    locationCategory: {
+      type: Number,
+      value: settings.ContentSettingsTypes.GEOLOCATION,
+    },
   },
+
+  behaviors: [SettingsPageVisibility],
 });

chrome/browser/resources/settings/advanced_page/compiled_resources.gyp

+# Copyright 2014 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.
+{
+  'targets': [
+    {
+      'target_name': 'advanced_page',
+      'variables': {
+        'depends': [
+          '../../../../../ui/webui/resources/js/compiled_resources.gyp:cr',
+          '../settings_page/compiled_resources.gyp:settings_page_visibility',
+          '../site_settings/constants.js',
+        ],
+      },
+      'includes': ['../../../../../third_party/closure_compiler/compile_js.gypi'],
+    },
+  ],
+}

chrome/browser/resources/settings/basic_page/basic_page.html

 <link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
 <link rel="import" href="chrome://md-settings/appearance_page/appearance_page.html">
 <link rel="import" href="chrome://md-settings/search_page/search_page.html">
+<link rel="import" href="chrome://md-settings/settings_page/settings_page_visibility.html">
 <link rel="import" href="chrome://md-settings/settings_page/settings_section.html">
 <link rel="import" href="chrome://md-settings/on_startup_page/on_startup_page.html">
 
@@ -18,53 +19,65 @@
   <link rel="import" type="css" href="basic_page.css">
   <template>
 <if expr="not chromeos">
-    <settings-section i18n-values="page-title:peoplePageTitle"
-        current-route="[[currentRoute]]" section="people">
-      <settings-signin-page current-route="{{currentRoute}}">
-      </settings-signin-page>
-    </settings-section>
+    <template is="dom-if" if="[[showPage(pageVisibility.people)]]" restamp>
+      <settings-section i18n-values="page-title:peoplePageTitle"
+          current-route="[[currentRoute]]" section="people">
+        <settings-signin-page current-route="{{currentRoute}}">
+        </settings-signin-page>
+      </settings-section>
+    </template>
 </if>
 <if expr="chromeos">
-    <settings-section i18n-values="page-title:internetPageTitle"
-        current-route="[[currentRoute]]" section="internet">
-      <settings-internet-page current-route="{{currentRoute}}">
-      </settings-internet-page>
-    </settings-section>
+    <template is="dom-if" if="[[showPage(pageVisibility.internet)]]" restamp>
+      <settings-section i18n-values="page-title:internetPageTitle"
+          current-route="[[currentRoute]]" section="internet">
+        <settings-internet-page current-route="{{currentRoute}}">
+        </settings-internet-page>
+      </settings-section>
+    </template>
 </if>
-    <settings-section i18n-values="page-title:appearancePageTitle"
-        current-route="[[currentRoute]]" section="appearance">
-      <settings-appearance-page prefs="{{prefs}}"
-          current-route="[[currentRoute]]">
-      </settings-appearance-page>
-    </settings-section>
-
-    <settings-section i18n-values="page-title:onStartup"
-        current-route="[[currentRoute]]" section="onStartup">
-      <settings-on-startup-page prefs="{{prefs}}"
-          current-route="{{currentRoute}}">
-      </settings-on-startup-page>
-    </settings-section>
-
-    <settings-section i18n-values="page-title:searchPageTitle"
-        current-route="[[currentRoute]]" section="search">
-      <settings-search-page current-route="{{currentRoute}}">
-      </settings-search-page>
-    </settings-section>
-
+    <template is="dom-if" if="[[showPage(pageVisibility.appearance)]]" restamp>
+      <settings-section i18n-values="page-title:appearancePageTitle"
+          current-route="[[currentRoute]]" section="appearance">
+        <settings-appearance-page prefs="{{prefs}}"
+            current-route="[[currentRoute]]">
+        </settings-appearance-page>
+      </settings-section>
+    </template>
+    <template is="dom-if" if="[[showPage(pageVisibility.onStartup)]]" restamp>
+      <settings-section i18n-values="page-title:onStartup"
+          current-route="[[currentRoute]]" section="onStartup">
+        <settings-on-startup-page prefs="{{prefs}}"
+            current-route="{{currentRoute}}">
+        </settings-on-startup-page>
+      </settings-section>
+    </template>
+    <template is="dom-if" if="[[showPage(pageVisibility.search)]]" restamp>
+      <settings-section i18n-values="page-title:searchPageTitle"
+          current-route="[[currentRoute]]" section="search">
+        <settings-search-page current-route="{{currentRoute}}">
+        </settings-search-page>
+      </settings-section>
+    </template>
 <if expr="chromeos">
-    <settings-section i18n-values="page-title:usersPageTitle"
-        current-route="[[currentRoute]]" section="users">
-      <settings-users-page prefs="{{prefs}}"></settings-users-page>
-    </settings-section>
+    <template is="dom-if" if="[[showPage(pageVisibility.users)]]" restamp>
+      <settings-section i18n-values="page-title:usersPageTitle"
+          current-route="[[currentRoute]]" section="users">
+        <settings-users-page prefs="{{prefs}}"></settings-users-page>
+      </settings-section>
+    </template>
 </if>
 
 <if expr="not chromeos">
-    <settings-section i18n-values="page-title:defaultBrowser"
-        expand-container="{{expandContainer}}"
-        current-route="[[currentRoute]]" section="defaultBrowser">
-      <settings-default-browser-page>
-      </settings-default-browser-page>
-    </settings-section>
+    <template is="dom-if" if="[[showPage(pageVisibility.defaultBrowser)]]"
+        restamp>
+      <settings-section i18n-values="page-title:defaultBrowser"
+          expand-container="{{expandContainer}}"
+          current-route="[[currentRoute]]" section="defaultBrowser">
+        <settings-default-browser-page>
+        </settings-default-browser-page>
+      </settings-section>
+    </template>
 </if>
   </template>
   <script src="basic_page.js"></script>

chrome/browser/resources/settings/basic_page/basic_page.js

@@ -36,4 +36,6 @@ Polymer({
       notify: true,
     },
   },
+
+  behaviors: [SettingsPageVisibility],
 });

chrome/browser/resources/settings/basic_page/compiled_resources.gyp

+# Copyright 2014 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.
+{
+  'targets': [
+    {
+      'target_name': 'basic_page',
+      'variables': {
+        'depends': [
+          '../settings_page/compiled_resources.gyp:settings_page_visibility',
+        ],
+      },
+      'includes': ['../../../../../third_party/closure_compiler/compile_js.gypi'],
+    },
+  ],
+}

chrome/browser/resources/settings/compiled_resources.gyp

@@ -8,12 +8,15 @@
       'type': 'none',
       'dependencies': [
         'appearance_page/compiled_resources.gyp:*',
+        'advanced_page/compiled_resources.gyp:*',
+        'basic_page/compiled_resources.gyp:*',
         'bluetooth_page/compiled_resources.gyp:*',
         'internet_page/compiled_resources.gyp:*',
         'languages_page/compiled_resources.gyp:*',
         'on_startup_page/compiled_resources.gyp:*',
         'prefs/compiled_resources.gyp:*',
         'site_settings/compiled_resources.gyp:*',
+        'settings_page/compiled_resources.gyp:*',
         'sync_page/compiled_resources.gyp:*',
         'controls/compiled_resources.gyp:*',
       ],

chrome/browser/resources/settings/settings_page/compiled_resources.gyp

+# Copyright 2015 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.
+{
+  'targets': [
+    {
+      'target_name': 'settings_page_visibility',
+      'includes': ['../../../../../third_party/closure_compiler/compile_js.gypi'],
+    },
+  ],
+}

chrome/browser/resources/settings/settings_page/settings_page_visibility.html

+<script src="settings_page_visibility.js"></script>

chrome/browser/resources/settings/settings_page/settings_page_visibility.js

+// Copyright 2015 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.
+
+/**
+ * @fileoverview
+ * Behavior controlling the visibility of Settings pages.
+ *
+ * Example:
+ *   behaviors: [SettingsPageVisibility],
+ *
+ * @group Chrome UI Behavior
+ */
+
+/**
+ * Set this to true in tests before loading the page (e.g. in preLoad()) so that
+ * pages do not initially get created. Set this to false BEFORE modifying
+ * pageVisibility. NOTE: Changing this value after the DOM is loaded will not
+ * trigger a visibility change, pageVisibility must be modified to trigger data
+ * binding events.
+ * @type {boolean}
+ */
+var settingsHideAllPagesForTest;
+
+/** @polymerBehavior */
+var SettingsPageVisibility = {
+  properties: {
+    /**
+     * Dictionary defining page visibility. If not set for a page, visibility
+     * will default to true (unless settingsHideAllPagesForTest is set).
+     * @type {Object<boolean>}
+     */
+    pageVisibility: {
+      type: Object,
+      value: function() { return {}; },
+    },
+  },
+
+  /**
+   * @param {boolean} visibility
+   * @return {boolean}
+   */
+  showPage: function(visibility) {
+    return !settingsHideAllPagesForTest && visibility !== false;
+  },
+};

chrome/browser/resources/settings/settings_resources.grd

@@ -109,6 +109,12 @@
       <structure name="IDR_SETTINGS_CR_SETTINGS_MENU_JS"
                  file="settings_menu/settings_menu.js"
                  type="chrome_html" />
+      <structure name="IDR_SETTINGS_CR_SETTINGS_PAGE_VISIBILITY_HTML"
+                 file="settings_page/settings_page_visibility.html"
+                 type="chrome_html" />
+      <structure name="IDR_SETTINGS_CR_SETTINGS_PAGE_VISIBILITY_JS"
+                 file="settings_page/settings_page_visibility.js"
+                 type="chrome_html" />
       <structure name="IDR_SETTINGS_CR_SETTINGS_SECTION_CSS"
                  file="settings_page/settings_section.css"
                  type="chrome_html" />

chrome/browser/resources/settings/site_settings/site_details_permission.js

@@ -30,11 +30,6 @@ Polymer({
       notify: true,
     },
 
-    /**
-     * The ID of the category this widget is displaying data for.
-     */
-    category: Number,
-
     /**
      * The origin, which this permission affects.
      */

chrome/browser/resources/settings/site_settings/site_list.js

@@ -46,12 +46,6 @@ Polymer({
       observer: 'onDataChanged_',
     },
 
-    /**
-     * The ID of the category this widget is displaying data for.
-     * See site_settings/constants.js for possible values.
-     */
-    category: Number,
-
     /**
       * The type of category this widget is displaying data for. Normally
       * either ALLOW or BLOCK, representing which sites are allowed or blocked

chrome/browser/resources/settings/site_settings/site_settings_behavior.js

@@ -8,6 +8,15 @@
 
 /** @polymerBehavior */
 var SiteSettingsBehaviorImpl = {
+  properties: {
+    /**
+     * The ID of the category this element is displaying data for.
+     */
+    category: {
+      type: Number,
+    },
+  },
+
   /**
    * Returns whether the category default is set to enabled or not.
    * @param {number} category The category to check.

chrome/browser/resources/settings/site_settings/site_settings_category.js

@@ -39,13 +39,6 @@ Polymer({
       type: Boolean,
     },
 
-    /**
-     * The ID of the category this widget is displaying data for.
-     */
-    category: {
-      type: Number,
-    },
-
     /**
      * The origin that was selected by the user in the dropdown list.
      */