MD Settings: Move settings-advanced-page into settings-basic-page

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

 <link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="/a11y_page/a11y_page.html">
 <link rel="import" href="/appearance_page/appearance_page.html">
+<link rel="import" href="/downloads_page/downloads_page.html">
+<link rel="import" href="/languages_page/languages_page.html">
+<link rel="import" href="/on_startup_page/on_startup_page.html">
+<link rel="import" href="/passwords_and_forms_page/passwords_and_forms_page.html">
+<link rel="import" href="/people_page/people_page.html">
+<link rel="import" href="/printing_page/printing_page.html">
+<link rel="import" href="/privacy_page/privacy_page.html">
+<link rel="import" href="/reset_page/reset_page.html">
+<link rel="import" href="/reset_page/reset_profile_banner.html">

[dpapad, 2016/11/28 20:04:44]

I am realizing that all those new HTML imports will have an impact in the time
it takes to load chrome://md-settings (even with the advanced section
collapsed). The "advanced" settings are in a dom-if, but before this merge, the
HTML imports where not loaded/parsed until the dom-if was turned to true. Now
the deps are loaded always, even if the dom-if is false I mentioned this in
today's standup meeting.

Did you notice any difference? If yes, is there something we can do about this
(besides eventually vulcanizing settings)? @dbeam asked whether the HTML imports
could be inside the dom-if too.

[michaelpg, 2016/12/02 01:51:44]

I'm not sure I understand/agree. Before this merge, the HTML imports in
advanced_page.html were loaded/parsed when advanced_page.html was loaded/parsed,
which happened when settings_main.html was loaded/parsed, irrespective of any
dom-ifs later in those files. Which actually was *before* basic_page.html was
loaded, because its import came later in settings_main.html. With this merge,
the HTML imports in advanced_page.html have been moved here. So the same amount
of loading should be happening.

 <link rel="import" href="/search_page/search_page.html">
 <link rel="import" href="/settings_page/main_page_behavior.html">
 <link rel="import" href="/settings_page/settings_page_visibility.html">
 <link rel="import" href="/settings_page/settings_section.html">
-<link rel="import" href="/on_startup_page/on_startup_page.html">
-<link rel="import" href="/people_page/people_page.html">
-<link rel="import" href="/reset_page/reset_profile_banner.html">
 <link rel="import" href="/settings_page_css.html">
-
-<if expr="chromeos">
+<link rel="import" href="/settings_vars_css.html">
+
+<if expr="chromeos">
+<link rel="import" href="/bluetooth_page/bluetooth_page.html">
+<link rel="import" href="/date_time_page/date_time_page.html">
 <link rel="import" href="/device_page/device_page.html">
 <link rel="import" href="/internet_page/internet_page.html">
 </if>
 
 <if expr="not chromeos">
 <link rel="import" href="/default_browser_page/default_browser_page.html">
-</if>
-
+<link rel="import" href="/system_page/system_page.html">
+</if>
+
+<!-- TODO(michaelpg): Rename to something better than "basic" now that this page
+     includes both the basic and advanced settings. -->
 <dom-module id="settings-basic-page">
   <template>
-    <style include="settings-page-styles"></style>
-    <div>
-      <template is="dom-if" if="[[showResetProfileBanner_]]">
-        <settings-reset-profile-banner on-reset-done="onResetDone_">
-        </settings-reset-profile-banner>
+    <style include="settings-page-styles">
+      #advancedToggle {
+        --paper-button: {
+          text-transform: none;
+        }
+        @apply(--settings-actionable);
+        align-items: center;
+        display: flex;
+        margin-bottom: 3px;
+        margin-top: 12px;  /* Part of a 48px spacer (33px + 12px + 3px). */
+        min-height: 32px;
+        padding: 0 12px;
+      }
+
+      #toggleContainer {
+        align-items: center;
+        display: flex;
+        font: inherit;
+        justify-content: center;
+        margin-bottom: 0;
+        margin-top: 0;
+      }
+
+      #toggleSpacer {
+        padding-top: 33px;  /* Part of a 48px spacer (33px + 12px + 3px). */
+      }
+
+      iron-icon {
+        -webkit-margin-start: 16px;
+      }
+    </style>
+    <template is="dom-if" if="[[showBasicPage_(
+        currentRoute_, inSearchMode, hasExpandedSection_)]]">
+      <div id="basicPage">
+        <template is="dom-if" if="[[showResetProfileBanner_]]">
+          <settings-reset-profile-banner on-reset-done="onResetDone_">
+          </settings-reset-profile-banner>
+        </template>
+<if expr="chromeos">
+        <template is="dom-if" if="[[showPage(pageVisibility.internet)]]"
+            restamp>
+          <settings-section page-title="$i18n{internetPageTitle}"
+              section="internet">
+            <settings-internet-page prefs="{{prefs}}">
+            </settings-internet-page>
+          </settings-section>
+        </template>
+</if>
+        <template is="dom-if" if="[[showPage(pageVisibility.people)]]" restamp>
+          <settings-section page-title="$i18n{peoplePageTitle}"
+              section="people">
+            <settings-people-page prefs="{{prefs}}"></settings-people-page>
+          </settings-section>
+        </template>
+        <template is="dom-if" if="[[showPage(pageVisibility.appearance)]]"
+            restamp>
+          <settings-section page-title="$i18n{appearancePageTitle}"
+              section="appearance">
+            <settings-appearance-page prefs="{{prefs}}"
+                page-visibility="[[pageVisibility.appearance]]">
+            </settings-appearance-page>
+          </settings-section>
+        </template>
+<if expr="chromeos">
+        <template is="dom-if" if="[[showPage(pageVisibility.device)]]" restamp>
+          <settings-section page-title="$i18n{devicePageTitle}" section="device">
+            <settings-device-page  prefs="{{prefs}}"></settings-device-page>
+          </settings-section>
+        </template>
+</if>
+        <template is="dom-if" if="[[showPage(pageVisibility.search)]]" restamp>
+          <settings-section page-title="$i18n{searchPageTitle}" section="search">
+            <settings-search-page></settings-search-page>
+          </settings-section>
+        </template>
+<if expr="not chromeos">
+        <template is="dom-if" if="[[showPage(pageVisibility.defaultBrowser)]]"
+            restamp>
+          <settings-section page-title="$i18n{defaultBrowser}"
+              section="defaultBrowser">
+            <settings-default-browser-page></settings-default-browser-page>
+          </settings-section>
+        </template>
+</if>
+        <template is="dom-if" if="[[showPage(pageVisibility.onStartup)]]" restamp>
+          <settings-section page-title="$i18n{onStartup}" section="onStartup">
+            <settings-on-startup-page prefs="{{prefs}}">
+            </settings-on-startup-page>
+          </settings-section>
+        </template>
+      </div>
+    </template>
+
+    <template is="dom-if"
+        if="[[showAdvancedSettings_(pageVisibility.advancedSettings)]]">
+      <template is="dom-if" if="[[showAdvancedToggle_(
+          inSearchMode, hasExpandedSection_)]]">
+        <div id="toggleSpacer"></div>
+        <h2 id="toggleContainer">
+          <paper-button id="advancedToggle" active="{{advancedToggleExpanded}}"
+              aria-active-attribute="aria-expanded" toggles>
+            <span>$i18n{advancedPageTitle}</span>
+            <iron-icon icon="[[arrowState_(advancedToggleExpanded)]]">
+            </iron-icon>
+          </paper-button>
+        </h2>
       </template>
-<if expr="chromeos">
-      <template is="dom-if" if="[[showPage(pageVisibility.internet)]]" restamp>
-        <settings-section page-title="$i18n{internetPageTitle}"
-            section="internet">
-          <settings-internet-page prefs="{{prefs}}">
-          </settings-internet-page>
-        </settings-section>
+
+      <template is="dom-if" if="[[showAdvancedPage_(
+          currentRoute_, inSearchMode, hasExpandedSection_,
+          advancedToggleExpanded)]]">
+        <div id="advancedPage">
+<if expr="chromeos">
+          <template is="dom-if" if="[[showPage(pageVisibility.dateTime)]]"
+              restamp>
+            <settings-section page-title="$i18n{dateTimePageTitle}"
+                section="dateTime">
+              <settings-date-time-page prefs="{{prefs}}"
+                  page-visibility="[[pageVisibility.dateTime]]">
+              </settings-date-time-page>
+            </settings-section>
+          </template>
+</if>
+          <template is="dom-if" if="[[showPage(pageVisibility.privacy)]]"
+              restamp>
+            <settings-section page-title="$i18n{privacyPageTitle}"
+                section="privacy">
+              <settings-privacy-page prefs="{{prefs}}"
+                  page-visibility="[[pageVisibility.privacy]]">
+              </settings-privacy-page>
+            </settings-section>
+          </template>
+<if expr="chromeos">
+          <template is="dom-if" if="[[showPage(pageVisibility.bluetooth)]]"
+              restamp>
+            <settings-section page-title="$i18n{bluetoothPageTitle}"
+                section="bluetooth">
+              <settings-bluetooth-page prefs="{{prefs}}">
+              </settings-bluetooth-page>
+            </settings-section>
+          </template>
+</if>
+          <template is="dom-if"
+              if="[[showPage(pageVisibility.passwordsAndForms)]]" restamp>
+            <settings-section
+                page-title="$i18n{passwordsAndAutofillPageTitle}"
+                section="passwordsAndForms">
+              <settings-passwords-and-forms-page prefs="{{prefs}}">
+              </settings-passwords-and-forms-page>
+            </settings-section>
+          </template>
+          <template is="dom-if" if="[[showPage(pageVisibility.languages)]]"
+              restamp>
+            <settings-section page-title="$i18n{languagesPageTitle}"
+                section="languages">
+              <settings-languages-page prefs="{{prefs}}"></settings-languages-page>
+            </settings-section>
+          </template>
+          <template is="dom-if" if="[[showPage(pageVisibility.downloads)]]"
+              restamp>
+            <settings-section page-title="$i18n{downloadsPageTitle}"
+                section="downloads">
+              <settings-downloads-page prefs="{{prefs}}"
+                  page-visibility="[[pageVisibility.downloads]]">
+              </settings-downloads-page>
+            </settings-section>
+          </template>
+          <template is="dom-if" if="[[showPage(pageVisibility.printing)]]"
+              restamp>
+            <settings-section page-title="$i18n{printingPageTitle}"
+                section="printing">
+              <settings-printing-page prefs="{{prefs}}">
+              </settings-printing-page>
+            </settings-section>
+          </template>
+          <template is="dom-if" if="[[showPage(pageVisibility.a11y)]]" restamp>
+            <settings-section page-title="$i18n{a11yPageTitle}" section="a11y">
+              <settings-a11y-page prefs="{{prefs}}"></settings-a11y-page>
+            </settings-section>
+          </template>
+<if expr="not chromeos">
+          <template is="dom-if" if="[[showPage(pageVisibility.system)]]"
+              restamp>
+            <settings-section page-title="$i18n{systemPageTitle}"
+                section="system">
+              <settings-system-page prefs="{{prefs}}"></settings-system-page>
+            </settings-section>
+          </template>
+</if>
+          <template is="dom-if" if="[[showPage(pageVisibility.reset)]]"
+              restamp>
+            <settings-section page-title="$i18n{resetPageTitle}"
+                section="reset">
+              <settings-reset-page></settings-reset-page>
+            </settings-section>
+          </template>
+        </div>
       </template>
-</if>
-      <template is="dom-if" if="[[showPage(pageVisibility.people)]]" restamp>
-        <settings-section page-title="$i18n{peoplePageTitle}" section="people">
-          <settings-people-page prefs="{{prefs}}"></settings-people-page>
-        </settings-section>
-      </template>
-      <template is="dom-if" if="[[showPage(pageVisibility.appearance)]]"
-          restamp>
-        <settings-section page-title="$i18n{appearancePageTitle}"
-            section="appearance">
-          <settings-appearance-page prefs="{{prefs}}"
-              page-visibility="[[pageVisibility.appearance]]">
-          </settings-appearance-page>
-        </settings-section>
-      </template>
-<if expr="chromeos">
-      <template is="dom-if" if="[[showPage(pageVisibility.device)]]" restamp>
-        <settings-section page-title="$i18n{devicePageTitle}" section="device">
-          <settings-device-page  prefs="{{prefs}}"></settings-device-page>
-        </settings-section>
-      </template>
-</if>
-      <template is="dom-if" if="[[showPage(pageVisibility.search)]]" restamp>
-        <settings-section page-title="$i18n{searchPageTitle}" section="search">
-          <settings-search-page></settings-search-page>
-        </settings-section>
-      </template>
-<if expr="not chromeos">
-      <template is="dom-if" if="[[showPage(pageVisibility.defaultBrowser)]]"
-          restamp>
-        <settings-section page-title="$i18n{defaultBrowser}"
-            section="defaultBrowser">
-          <settings-default-browser-page></settings-default-browser-page>
-        </settings-section>
-      </template>
-</if>
-      <template is="dom-if" if="[[showPage(pageVisibility.onStartup)]]" restamp>
-        <settings-section page-title="$i18n{onStartup}" section="onStartup">
-          <settings-on-startup-page prefs="{{prefs}}">
-          </settings-on-startup-page>
-        </settings-section>
-      </template>
-    </div>
+    </template>
   </template>
-  <script src="basic_page.js"></script>
+  <script src="/basic_page/basic_page.js"></script>

[dpapad, 2016/11/28 20:04:44]

Nit: Why changing this?  We don't seem to be using absolute paths in other such
occasions.

[michaelpg, 2016/12/08 03:31:58]

Reverted.

 </dom-module>