CrScrollableBehavior: Port to Polymer 3

Autogenerate Polymer 3 versions of CrScrollableBehavior and its tests.
This will be used by the chrome://settings page in future.

Bug: 1042558
Change-Id: I13d0a675f2f11cd3ff31a6c9c57948a3e9ad386b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2014146Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Cr-Commit-Position: refs/heads/master@{#734595}

chrome/test/data/webui/BUILD.gn

@@ -191,6 +191,7 @@ js2gtest("browser_tests_js_webui") {
     "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_radio_button_test.m.js",
     "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_radio_group_test.m.js",
     "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_search_field_tests.m.js",
+    "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_scrollable_behavior_tests.m.js",
     "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_slider_test.m.js",
     "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_toast_manager_test.m.js",
     "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_toast_test.m.js",

chrome/test/data/webui/cr_elements/BUILD.gn

@@ -24,6 +24,7 @@ js_modulizer("modulize") {
     "cr_policy_indicator_behavior_tests.js",
     "cr_radio_button_test.js",
     "cr_radio_group_test.js",
+    "cr_scrollable_behavior_tests.js",
     "cr_search_field_tests.js",
     "cr_slider_test.js",
     "cr_toolbar_search_field_tests.js",
@@ -45,10 +46,12 @@ js_modulizer("modulize") {
     "MockInteractions.keyUpOn|keyUpOn",
     "MockInteractions.pressAndReleaseKeyOn|pressAndReleaseKeyOn",
     "MockInteractions.tap|tap",
+    "Polymer.Base|Base",
     "Polymer.dom.flush|flush",
     "test_util.eventToPromise|eventToPromise",
     "test_util.flushTasks|flushTasks",
     "test_util.isVisible|isVisible",
+    "test_util.waitBeforeNextRender|waitBeforeNextRender",
     "test_util.whenAttributeIs|whenAttributeIs",
   ]
 

chrome/test/data/webui/cr_elements/cr_container_shadow_behavior_test.js

@@ -9,9 +9,12 @@
 
 suite('CrContainerShadowBehavior', function() {
   suiteSetup(function() {
-    document.body.innerHTML = `
-      <dom-module id="test-element">
-        <template>
+    if (window.location.origin === 'chrome://test') {
+      // Polymer 3 setup
+      Polymer({
+        is: 'test-element',
+
+        _template: html`
           <style>
             #container {
               height: 50px;
@@ -20,19 +23,41 @@ suite('CrContainerShadowBehavior', function() {
           <div id="before"></div>
           <div id="container" show-bottom-shadow$="[[showBottomShadow]]"></div>
           <div id="after"></div>
-        </template>
-      </dom-module>
-    `;
+        `,
+
+        properties: {
+          showBottomShadow: Boolean,
+        },
+
+        behaviors: [CrContainerShadowBehavior],
+      });
+    } else {
+      document.body.innerHTML = `
+        <dom-module id="test-element">
+          <template>
+            <style>
+              #container {
+                height: 50px;
+              }
+            </style>
+            <div id="before"></div>
+            <div id="container" show-bottom-shadow$="[[showBottomShadow]]">
+            </div>
+            <div id="after"></div>
+          </template>
+        </dom-module>
+      `;
 
-    Polymer({
-      is: 'test-element',
+      Polymer({
+        is: 'test-element',
 
-      properties: {
-        showBottomShadow: Boolean,
-      },
+        properties: {
+          showBottomShadow: Boolean,
+        },
 
-      behaviors: [CrContainerShadowBehavior],
-    });
+        behaviors: [CrContainerShadowBehavior],
+      });
+    }
   });
 
   setup(function() {

chrome/test/data/webui/cr_elements/cr_elements_v3_browsertest.js

@@ -184,6 +184,18 @@ TEST_F('CrElementsRadioGroupV3Test', 'All', function() {
   mocha.run();
 });
 
+// eslint-disable-next-line no-var
+var CrElementsScrollableBehaviorV3Test = class extends CrElementsV3BrowserTest {
+  /** @override */
+  get browsePreload() {
+    return 'chrome://test?module=cr_elements/cr_scrollable_behavior_tests.m.js';
+  }
+};
+
+TEST_F('CrElementsScrollableBehaviorV3Test', 'All', function() {
+  mocha.run();
+});
+
 // eslint-disable-next-line no-var
 var CrElementsSearchFieldV3Test = class extends CrElementsV3BrowserTest {
   /** @override */

chrome/test/data/webui/cr_elements/cr_scrollable_behavior_tests.js

@@ -2,15 +2,24 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// clang-format off
+// #import {CrScrollableBehavior} from 'chrome://resources/cr_elements/cr_scrollable_behavior.m.js';
+// #import {Polymer, Base, flush, html} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+// #import {waitBeforeNextRender} from '../test_util.m.js';
+// clang-format on
+
 suite('cr-scrollable-behavior', function() {
   /** @type {CrScrollableListElement} */ let testElement;
   /** @type {HTMLDivElement} */ let container;
   /** @type {IronListElement} */ let ironList;
 
   suiteSetup(function() {
-    document.body.innerHTML = `
-      <dom-module id="test-element">
-        <template>
+    if (window.location.origin === 'chrome://test') {
+      // Polymer 3 setup
+      Polymer({
+        is: 'test-element',
+
+        _template: html`
           <style>
             #container {
               height: 30px;
@@ -24,24 +33,56 @@ suite('cr-scrollable-behavior', function() {
               </template>
             </iron-list>
           </div>
-        </template>
-      </dom-module>
-    `;
+        `,
 
-    Polymer({
-      is: 'test-element',
+        properties: {
+          items: {
+            type: Array,
+            value: function() {
+              return ['apple', 'bannana', 'cucumber', 'doughnut'];
+            },
+          },
+        },
 
-      properties: {
-        items: {
-          type: Array,
-          value: function() {
-            return ['apple', 'bannana', 'cucumber', 'doughnut'];
+        behaviors: [CrScrollableBehavior],
+      });
+    } else {
+      // Polymer 2 setup
+      document.body.innerHTML = `
+        <dom-module id="test-element">
+          <template>
+            <style>
+              #container {
+                height: 30px;
+                overflow-y: auto;
+              }
+            </style>
+            <div id="container" scrollable>
+              <iron-list scroll-target="container" items="[[items]]">
+                <template>
+                  <div>[[item]]</div>
+                </template>
+              </iron-list>
+            </div>
+          </template>
+        </dom-module>
+      `;
+
+      Polymer({
+        is: 'test-element',
+
+        properties: {
+          items: {
+            type: Array,
+            value: function() {
+              return ['apple', 'bannana', 'cucumber', 'doughnut'];
+            },
           },
         },
-      },
 
-      behaviors: [CrScrollableBehavior],
-    });
+        behaviors: [CrScrollableBehavior],
+      });
+    }
   });
 
   setup(function(done) {

ui/webui/resources/cr_elements/BUILD.gn

@@ -140,7 +140,10 @@ polymer_modulizer("search_highlight_style_css") {
 }
 
 js_modulizer("modulize") {
-  input_files = [ "cr_container_shadow_behavior.js" ]
+  input_files = [
+    "cr_container_shadow_behavior.js",
+    "cr_scrollable_behavior.js",
+  ]
   deps = []
 }
 
@@ -196,8 +199,11 @@ group("polymer3_elements") {
 }
 
 js_type_check("cr_elements_module_resources") {
-  uses_js_modules = true
-  deps = [ ":cr_container_shadow_behavior.m" ]
+  is_polymer3 = true
+  deps = [
+    ":cr_container_shadow_behavior.m",
+    ":cr_scrollable_behavior.m",
+  ]
 }
 
 js_library("cr_container_shadow_behavior.m") {
@@ -205,3 +211,14 @@ js_library("cr_container_shadow_behavior.m") {
   deps = [ "//ui/webui/resources/js:assert.m" ]
   extra_deps = [ ":modulize" ]
 }
+
+js_library("cr_scrollable_behavior.m") {
+  sources = [
+    "$root_gen_dir/ui/webui/resources/cr_elements/cr_scrollable_behavior.m.js",
+  ]
+  deps = [
+    "//third_party/polymer/v3_0/components-chromium/iron-list:iron-list",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+  ]
+  extra_deps = [ ":modulize" ]
+}

ui/webui/resources/cr_elements/cr_scrollable_behavior.js

@@ -34,8 +34,13 @@
  * will not be sized correctly.
  */
 
+// clang-format off
+// #import {beforeNextRender, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+// #import 'chrome://resources/polymer/v3_0/iron-list/iron-list.js';
+// clang-format on
+
 /** @polymerBehavior */
-const CrScrollableBehavior = {
+/* #export */ const CrScrollableBehavior = {
 
   /** @private {number|null} */
   intervalId_: null,

ui/webui/resources/cr_elements_resources_v3.grdp

@@ -101,6 +101,11 @@
          use_base_dir="false"
          type="BINDATA"
          compress="gzip" />
+  <include name="IDR_CR_ELEMENTS_CR_SCROLLABLE_BEHAVIOR_M_JS"
+         file="${root_gen_dir}/ui/webui/resources/cr_elements/cr_scrollable_behavior.m.js"
+         use_base_dir="false"
+         type="BINDATA"
+         compress="gzip" />
   <include name="IDR_CR_ELEMENTS_CR_SEARCH_FIELD_M_JS"
          file="${root_gen_dir}/ui/webui/resources/cr_elements/cr_search_field/cr_search_field.m.js"
          use_base_dir="false"