[MD settings] expand subpages to 100%

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

Index: chrome/browser/resources/settings/basic_page/basic_page.js
diff --git a/chrome/browser/resources/settings/basic_page/basic_page.js b/chrome/browser/resources/settings/basic_page/basic_page.js
index 82e9add52da31876ba558caf8c8a3136501948d6..6bdcd88fed92fa2888e31ac02bfe767e4eba9846 100644
--- a/chrome/browser/resources/settings/basic_page/basic_page.js
+++ b/chrome/browser/resources/settings/basic_page/basic_page.js
@@ -102,7 +102,7 @@ Polymer({
 
     if (this.pageVisibility.advancedSettings !== false) {
       assert(whenSearchDone === settings.getSearchManager().search(
-          query, assert(this.$.advancedPageTemplate.get())));
+          query, assert(this.$$('#advancedPageTemplate').get())));
     }
 
     return whenSearchDone;
@@ -136,8 +136,11 @@ Polymer({
    * @private
    */
   advancedToggleExpandedChanged_: function() {
-    if (this.advancedToggleExpanded)
-      this.$.advancedPageTemplate.get();
+    if (this.advancedToggleExpanded) {
+      // Ensure any dom-if reflects the current properties.
+      Polymer.dom.flush();

[dpapad, 2017/02/14 19:06:00]

We've been generally avoiding calling Polymer.dom.flush() in prod code (there
are 3 occurrences of such calls). Is this call necessary? Does the following
work equivalently?

if (this.advancedToggleExpanded) {
  this.async(function() {
    this.$$('#advancedPageTemplate').get();
  }.bind(this));
}

[dschuyler, 2017/02/14 19:36:56]

Done.

+      this.$$('#advancedPageTemplate').get();
+    }
   },
 
   /**