WebUI Polymer2: Make CrSettingsAllSitesTest work in Polymer 2.

This CL addresses 3 bugs that were causing CrSettingsAllSitesTest to
fail with Polymer 2:
(1) async() call in basic_page.js did not pause for all of layout on
the first call in Polymer 2 (likely due to layout not being finished
by the end of attached()). This was also causing a runtime error on
content, languages, and other subpages.
(2) The test itself also called async(), which did not wait long
enough for rendering to complete before checking various elements.
(3) The computed subpageScrollTarget was set earlier in Polymer 2, as
its computation function was called with some parameters undefined.
This resulted in overriding the non-null, defined default scroll
target for iron-list with an undefined scroll target, which caused
toggleScrollListener(), called from the resize handler in iron-list,
to fail.

Bug: 875452
Cq-Include-Trybots: luci.chromium.try:closure_compilation
Change-Id: I2a09020a798fdf806a98c7c9d9d32547b3fa310f
Reviewed-on: https://chromium-review.googlesource.com/1208448
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#590475}

chrome/browser/resources/settings/basic_page/BUILD.gn

@@ -22,4 +22,5 @@ js_library("basic_page") {
     "//ui/webui/resources/js:load_time_data",
     "//ui/webui/resources/js:web_ui_listener_behavior",
   ]
+  externs_list = [ "$externs_path/pending.js" ]
 }

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

@@ -290,9 +290,19 @@ Polymer({
    */
   advancedToggleExpandedChanged_: function() {
     if (this.advancedToggleExpanded) {
-      this.async(() => {
-        this.$$('#advancedPageTemplate').get();
-      });
+      // In Polymer2, async() does not wait long enough for layout to complete.
+      // Polymer.RenderStatus.beforeNextRender() must be used instead.
+      // TODO (rbpotter): Remove conditional when migration to Polymer 2 is
+      // completed.
+      if (Polymer.DomIf) {
+        Polymer.RenderStatus.beforeNextRender(this, () => {
+          this.$$('#advancedPageTemplate').get();
+        });
+      } else {
+        this.async(() => {
+          this.$$('#advancedPageTemplate').get();
+        });
+      }
     }
   },
 

chrome/browser/resources/settings/global_scroll_target_behavior.js

@@ -82,6 +82,9 @@ cr.define('settings', function() {
      * @private
      */
     getActiveTarget_: function(target, active) {
+      if (target === undefined || active === undefined)
+        return undefined;
+
       return active ? target : null;
     },
   };

chrome/test/data/webui/settings/all_sites_tests.js

@@ -105,7 +105,16 @@ suite('AllSites', function() {
     return browserProxy.whenCalled('getAllSites').then(() => {
       // Use resolver to ensure that the list container is populated.
       const resolver = new PromiseResolver();
-      testElement.async(resolver.resolve);
+      // In Polymer2, we need to wait until after the next render for the list
+      // to be populated. TODO (rbpotter): Remove conditional when migration to
+      // Polymer 2 is completed.
+      if (Polymer.DomIf) {
+        Polymer.RenderStatus.beforeNextRender(testElement, () => {
+          resolver.resolve();
+        });
+      } else {
+        testElement.async(resolver.resolve);
+      }
       return resolver.promise.then(() => {
         assertEquals(3, testElement.siteGroupMap.size);
 

testing/buildbot/filters/webui_polymer2_browser_tests.filter

@@ -15,7 +15,6 @@
 # --gtest_repeat=5, but might pass on a single invocation).
 
 # Chrome Desktop failures (Mac, Linux, Windows).
--CrSettingsAllSitesTest.All
 -CrSettingsLanguagesPageTest.InputMethods
 -CrSettingsMainPageTest.MainPage
 -CrSettingsMenuTest.SettingsMenu

third_party/closure_compiler/externs/pending.js

@@ -71,3 +71,14 @@ class ResizeObserver {
   /** @param {Element} target */
   unobserve(target) {}
 }
+
+/**
+ * @see
+ * https://www.polymer-project.org/2.0/docs/api/namespaces/Polymer.RenderStatus
+ * Queue a function call to be run before the next render.
+ * @param {!Element} element The element on which the function call is made.
+ * @param {!function()} fn The function called on next render.
+ * @param {...*} args The function arguments.
+ * TODO(rbpotter): Remove this once it is added to Closure Compiler itself.
+ */
+Polymer.RenderStatus.beforeNextRender = function(element, fn, args) {}