[MD settings] expand subpages to 100%

chrome/browser/resources/settings/basic_page/basic_page.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
  * 'settings-basic-page' is the settings page containing the actual settings.
  */
 Polymer({
   is: 'settings-basic-page',
@@ skipping 84 matching lines @@
    * @param {string} query The text to search for.
    * @return {!Promise<!settings.SearchRequest>} A signal indicating that
    *     searching finished.
    */
   searchContents: function(query) {
     var whenSearchDone = settings.getSearchManager().search(
         query, assert(this.$$('#basicPage')));
 
     if (this.pageVisibility.advancedSettings !== false) {
       assert(whenSearchDone === settings.getSearchManager().search(
-          query, assert(this.$.advancedPageTemplate.get())));
+          query, assert(this.$$('#advancedPageTemplate').get())));
     }
 
     return whenSearchDone;
   },
 
   /** @private */
   onResetDone_: function() {
     this.showResetProfileBanner_ = false;
   },
 
@@ skipping 13 matching lines @@
    */
   onSubpageExpanded_: function() {
     this.hasExpandedSection_ = true;
   },
 
   /**
    * Render the advanced page now (don't wait for idle).
    * @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();
+    }
   },
 
   /**
    * @param {boolean} inSearchMode
    * @param {boolean} hasExpandedSection
    * @return {boolean}
    * @private
    */
   showAdvancedToggle_: function(inSearchMode, hasExpandedSection) {
     return !inSearchMode && !hasExpandedSection;
@@ skipping 38 matching lines @@
 
   /**
    * @param {boolean} opened Whether the menu is expanded.
    * @return {string} Icon name.
    * @private
    */
   getArrowIcon_: function(opened) {
     return opened ? 'cr:arrow-drop-up' : 'cr:arrow-drop-down';
   },
 });