CrProfileAvatarSelector: Migrate to Polymer 3

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

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

chrome/test/data/webui/BUILD.gn

@@ -40,6 +40,7 @@ js2gtest("interactive_ui_tests_js_webui") {
     "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_expand_button_focus_tests.m.js",
     "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_icon_button_focus_tests.m.js",
     "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_input_test.m.js",
+    "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_profile_avatar_selector_tests.m.js",
     "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_tabs_test.m.js",
     "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_toggle_test.m.js",
     "$root_gen_dir/chrome/test/data/webui/cr_elements/iron_list_focus_test.m.js",

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

@@ -22,6 +22,7 @@ js_modulizer("modulize") {
     "cr_link_row_tests.js",
     "cr_policy_indicator_tests.js",
     "cr_policy_indicator_behavior_tests.js",
+    "cr_profile_avatar_selector_tests.js",
     "cr_radio_button_test.js",
     "cr_radio_group_test.js",
     "cr_scrollable_behavior_tests.js",

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

@@ -55,30 +55,6 @@ TEST_F('CrElementsLazyRenderTest', 'All', function() {
   mocha.run();
 });
 
-/**
- * @constructor
- * @extends {CrElementsBrowserTest}
- */
-function CrElementsProfileAvatarSelectorTest() {}
-
-CrElementsProfileAvatarSelectorTest.prototype = {
-  __proto__: CrElementsBrowserTest.prototype,
-
-  /** @override */
-  browsePreload: 'chrome://resources/cr_elements/cr_profile_avatar_selector/' +
-      'cr_profile_avatar_selector.html',
-
-  /** @override */
-  extraLibraries: CrElementsBrowserTest.prototype.extraLibraries.concat([
-    'cr_profile_avatar_selector_tests.js',
-  ]),
-};
-
-TEST_F('CrElementsProfileAvatarSelectorTest', 'All', function() {
-  cr_profile_avatar_selector.registerTests();
-  mocha.grep(cr_profile_avatar_selector.TestNames.Basic).run();
-});
-
 /**
  * @constructor
  * @extends {CrElementsBrowserTest}

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

@@ -32,9 +32,9 @@ TEST_F('CrElementsActionMenuTest', 'All', function() {
   mocha.run();
 });
 
-function CrElementsProfileAvatarSelectorFocusTest() {}
+function CrElementsProfileAvatarSelectorTest() {}
 
-CrElementsProfileAvatarSelectorFocusTest.prototype = {
+CrElementsProfileAvatarSelectorTest.prototype = {
   __proto__: CrElementsFocusTest.prototype,
 
   /** @override */
@@ -46,9 +46,8 @@ CrElementsProfileAvatarSelectorFocusTest.prototype = {
   ]),
 };
 
-TEST_F('CrElementsProfileAvatarSelectorFocusTest', 'All', function() {
-  cr_profile_avatar_selector.registerTests();
-  mocha.grep(cr_profile_avatar_selector.TestNames.Focus).run();
+TEST_F('CrElementsProfileAvatarSelectorTest', 'All', function() {
+  mocha.run();
 });
 
 /**

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

@@ -94,6 +94,19 @@ TEST_F('CrElementsInputV3Test', 'MAYBE_All', function() {
   mocha.run();
 });
 
+// eslint-disable-next-line no-var
+var CrElementsProfileAvatarSelectorV3Test =
+    class extends CrElementsV3FocusTest {
+  /** @override */
+  get browsePreload() {
+    return 'chrome://test?module=cr_elements/cr_profile_avatar_selector_tests.m.js';
+  }
+};
+
+TEST_F('CrElementsProfileAvatarSelectorV3Test', 'All', function() {
+  mocha.run();
+});
+
 // eslint-disable-next-line no-var
 var CrElementsTabsV3Test = class extends CrElementsV3FocusTest {
   /** @override */

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

@@ -2,22 +2,21 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// clang-format off
+// #import 'chrome://resources/cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector.m.js';
+// #import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+// #import {keyDownOn} from 'chrome://resources/polymer/v3_0/iron-test-helpers/mock-interactions.js';
+// #import {getDeepActiveElement} from 'chrome://resources/js/util.m.js';
+// clang-format on
+
 /** @fileoverview Suite of tests for cr-profile-avatar-selector. */
-cr.define('cr_profile_avatar_selector', function() {
-  const TestNames = {
-    Basic: 'basic',
-    Focus: 'Ignores modified key events',
-  };
-
-  function registerTests() {
-    suite('cr-profile-avatar-selector', function() {
+suite('cr-profile-avatar-selector', function() {
   /** @type {CrProfileAvatarSelectorElement} */
   let avatarSelector = null;
 
   /** @return {CrProfileAvatarSelectorElement} */
   function createElement() {
-        const avatarSelector =
-            document.createElement('cr-profile-avatar-selector');
+    const avatarSelector = document.createElement('cr-profile-avatar-selector');
     avatarSelector.avatars = [
       {url: 'chrome://avatar1.png', label: 'avatar1'},
       {url: 'chrome://avatar2.png', label: 'avatar2'},
@@ -40,8 +39,6 @@ cr.define('cr_profile_avatar_selector', function() {
     avatarSelector.remove();
   });
 
-      // Run in CrElementsProfileAvatarSelectorTest.All as a browser_test.
-      suite(TestNames.Basic, function() {
   test('Displays avatars', function() {
     assertEquals(3, getGridItems().length);
   });
@@ -64,17 +61,13 @@ cr.define('cr_profile_avatar_selector', function() {
 
     // Simulate tapping the third avatar.
     items[2].click();
-          assertEquals(
-              'chrome://avatar3.png', avatarSelector.selectedAvatar.url);
+    assertEquals('chrome://avatar3.png', avatarSelector.selectedAvatar.url);
     assertFalse(items[0].classList.contains('iron-selected'));
     assertFalse(items[1].classList.contains('iron-selected'));
     assertTrue(items[2].classList.contains('iron-selected'));
   });
-      });
 
-      // Run in CrElementsProfileAvatarSelectorFocusTest.All as an
-      // interactive_ui_test.
-      test(TestNames.Focus, function() {
+  test('ignores modified key events', function() {
     const selector = avatarSelector.$['avatar-grid'];
     const items = getGridItems();
 
@@ -115,11 +108,4 @@ cr.define('cr_profile_avatar_selector', function() {
     MockInteractions.keyDownOn(items[0], 37, [], 'ArrowRight');
     assertEquals(getDeepActiveElement(), items[0]);
   });
-    });
-  }
-
-  return {
-    registerTests: registerTests,
-    TestNames: TestNames,
-  };
 });

ui/webui/resources/cr_elements/BUILD.gn

@@ -44,6 +44,7 @@ group("closure_compile") {
     "cr_input:closure_compile_module",
     "cr_lazy_render:closure_compile_module",
     "cr_link_row:closure_compile_module",
+    "cr_profile_avatar_selector:closure_compile_module",
     "cr_radio_button:closure_compile_module",
     "cr_radio_group:closure_compile_module",
     "cr_search_field:closure_compile_module",
@@ -170,6 +171,7 @@ group("polymer3_elements") {
     "cr_input:polymer3_elements",
     "cr_lazy_render:cr_lazy_render_module",
     "cr_link_row:cr_link_row_module",
+    "cr_profile_avatar_selector:polymer3_elements",
     "cr_radio_button:polymer3_elements",
     "cr_radio_group:cr_radio_group_module",
     "cr_search_field:polymer3_elements",

ui/webui/resources/cr_elements/cr_profile_avatar_selector/BUILD.gn

@@ -3,6 +3,7 @@
 # found in the LICENSE file.
 
 import("//third_party/closure_compiler/compile_js.gni")
+import("//tools/polymer/polymer.gni")
 
 js_type_check("closure_compile") {
   deps = [
@@ -24,3 +25,59 @@ js_library("cr_profile_avatar_selector_grid") {
     "//ui/webui/resources/js:util",
   ]
 }
+
+group("polymer3_elements") {
+  deps = [
+    ":cr_profile_avatar_selector_grid_module",
+    ":cr_profile_avatar_selector_module",
+  ]
+}
+
+polymer_modulizer("cr_profile_avatar_selector") {
+  js_file = "cr_profile_avatar_selector.js"
+  html_file = "cr_profile_avatar_selector.html"
+  html_type = "dom-module"
+  namespace_rewrites = [ "cr.icon.getImage|getImage" ]
+  auto_imports = [
+    "ui/webui/resources/html/assert.html|assert",
+    "ui/webui/resources/html/icon.html|getImage",
+  ]
+}
+
+polymer_modulizer("cr_profile_avatar_selector_grid") {
+  js_file = "cr_profile_avatar_selector_grid.js"
+  html_file = "cr_profile_avatar_selector_grid.html"
+  html_type = "dom-module"
+  auto_imports = [
+    "ui/webui/resources/html/assert.html|assert",
+    "ui/webui/resources/html/util.html|hasKeyModifiers",
+  ]
+}
+
+js_type_check("closure_compile_module") {
+  is_polymer3 = true
+  deps = [
+    ":cr_profile_avatar_selector.m",
+    ":cr_profile_avatar_selector_grid.m",
+  ]
+}
+
+js_library("cr_profile_avatar_selector.m") {
+  sources = [ "$root_gen_dir/ui/webui/resources/cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector.m.js" ]
+  deps = [
+    ":cr_profile_avatar_selector_grid.m",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/js:icon.m",
+  ]
+  extra_deps = [ ":cr_profile_avatar_selector_module" ]
+}
+
+js_library("cr_profile_avatar_selector_grid.m") {
+  sources = [ "$root_gen_dir/ui/webui/resources/cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector_grid.m.js" ]
+  deps = [
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/js:assert.m",
+    "//ui/webui/resources/js:util.m",
+  ]
+  extra_deps = [ ":cr_profile_avatar_selector_grid_module" ]
+}

ui/webui/resources/cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector_grid.js

@@ -65,9 +65,8 @@ Polymer({
     const rows = Math.ceil(items.length / rowSize);
     const gridSize = rows * rowSize;
 
-    const focusIndex =
-        Array.prototype.slice.call(items).findIndex(function(item) {
-          return Polymer.dom(item).getOwnerRoot().activeElement === item;
+    const focusIndex = Array.prototype.slice.call(items).findIndex(item => {
+      return this.parentNode.activeElement === item;
     });
 
     let nextItem = null;
@@ -93,6 +92,6 @@ Polymer({
     }
 
     nextItem.focus();
-    assert(Polymer.dom(nextItem).getOwnerRoot().activeElement === nextItem);
+    assert(this.parentNode.activeElement === nextItem);
   }
 });

ui/webui/resources/cr_elements_resources_v3.grdp

@@ -81,6 +81,16 @@
          use_base_dir="false"
          type="BINDATA"
          compress="gzip" />
+  <include name="IDR_CR_ELEMENTS_CR_PROFILE_AVATAR_SELECTOR_M_JS"
+         file="${root_gen_dir}/ui/webui/resources/cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector.m.js"
+         use_base_dir="false"
+         type="BINDATA"
+         compress="gzip" />
+  <include name="IDR_CR_ELEMENTS_CR_PROFILE_AVATAR_SELECTOR_GRID_M_JS"
+         file="${root_gen_dir}/ui/webui/resources/cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector_grid.m.js"
+         use_base_dir="false"
+         type="BINDATA"
+         compress="gzip" />
   <include name="IDR_CR_ELEMENTS_CR_RADIO_BUTTON_M_JS"
          file="${root_gen_dir}/ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button.m.js"
          use_base_dir="false"