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,124 +2,110 @@
 // 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() {
-      /** @type {CrProfileAvatarSelectorElement} */
-      let avatarSelector = null;
-
-      /** @return {CrProfileAvatarSelectorElement} */
-      function createElement() {
-        const avatarSelector =
-            document.createElement('cr-profile-avatar-selector');
-        avatarSelector.avatars = [
-          {url: 'chrome://avatar1.png', label: 'avatar1'},
-          {url: 'chrome://avatar2.png', label: 'avatar2'},
-          {url: 'chrome://avatar3.png', label: 'avatar3'}
-        ];
-        return avatarSelector;
-      }
-
-      function getGridItems() {
-        return avatarSelector.$['avatar-grid'].querySelectorAll('.avatar');
-      }
-
-      setup(function() {
-        avatarSelector = createElement();
-        document.body.appendChild(avatarSelector);
-        Polymer.dom.flush();
-      });
-
-      teardown(function() {
-        avatarSelector.remove();
-      });
-
-      // Run in CrElementsProfileAvatarSelectorTest.All as a browser_test.
-      suite(TestNames.Basic, function() {
-        test('Displays avatars', function() {
-          assertEquals(3, getGridItems().length);
-        });
-
-        test('Can update avatars', function() {
-          avatarSelector.pop('avatars');
-          Polymer.dom.flush();
-          assertEquals(2, getGridItems().length);
-        });
-
-        test('No avatar is initially selected', function() {
-          assertFalse(!!avatarSelector.selectedAvatar);
-          getGridItems().forEach(function(item) {
-            assertFalse(item.classList.contains('iron-selected'));
-          });
-        });
-
-        test('Can select avatar', function() {
-          const items = getGridItems();
-
-          // Simulate tapping the third avatar.
-          items[2].click();
-          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() {
-        const selector = avatarSelector.$['avatar-grid'];
-        const items = getGridItems();
-
-        items[0].focus();
-        assertEquals(getDeepActiveElement(), items[0]);
-
-        MockInteractions.keyDownOn(items[0], 39, [], 'ArrowRight');
-        assertEquals(getDeepActiveElement(), items[1]);
-
-        MockInteractions.keyDownOn(items[0], 37, [], 'ArrowLeft');
-        assertEquals(getDeepActiveElement(), items[0]);
-
-        avatarSelector.ignoreModifiedKeyEvents = true;
-
-        MockInteractions.keyDownOn(items[0], 39, 'alt', 'ArrowRight');
-        assertEquals(getDeepActiveElement(), items[0]);
-
-        MockInteractions.keyDownOn(items[0], 39, 'ctrl', 'ArrowRight');
-        assertEquals(getDeepActiveElement(), items[0]);
-
-        MockInteractions.keyDownOn(items[0], 39, 'meta', 'ArrowRight');
-        assertEquals(getDeepActiveElement(), items[0]);
-
-        MockInteractions.keyDownOn(items[0], 39, 'shift', 'ArrowRight');
-        assertEquals(getDeepActiveElement(), items[0]);
-
-        // Test RTL case.
-        selector.dir = 'rtl';
-        MockInteractions.keyDownOn(items[0], 37, [], 'ArrowLeft');
-        assertEquals(getDeepActiveElement(), items[1]);
-
-        MockInteractions.keyDownOn(items[0], 37, [], 'ArrowLeft');
-        assertEquals(getDeepActiveElement(), items[2]);
-
-        MockInteractions.keyDownOn(items[0], 37, [], 'ArrowRight');
-        assertEquals(getDeepActiveElement(), items[1]);
-
-        MockInteractions.keyDownOn(items[0], 37, [], 'ArrowRight');
-        assertEquals(getDeepActiveElement(), items[0]);
-      });
-    });
+suite('cr-profile-avatar-selector', function() {
+  /** @type {CrProfileAvatarSelectorElement} */
+  let avatarSelector = null;
+
+  /** @return {CrProfileAvatarSelectorElement} */
+  function createElement() {
+    const avatarSelector = document.createElement('cr-profile-avatar-selector');
+    avatarSelector.avatars = [
+      {url: 'chrome://avatar1.png', label: 'avatar1'},
+      {url: 'chrome://avatar2.png', label: 'avatar2'},
+      {url: 'chrome://avatar3.png', label: 'avatar3'}
+    ];
+    return avatarSelector;
   }
 
-  return {
-    registerTests: registerTests,
-    TestNames: TestNames,
-  };
+  function getGridItems() {
+    return avatarSelector.$['avatar-grid'].querySelectorAll('.avatar');
+  }
+
+  setup(function() {
+    avatarSelector = createElement();
+    document.body.appendChild(avatarSelector);
+    Polymer.dom.flush();
+  });
+
+  teardown(function() {
+    avatarSelector.remove();
+  });
+
+  test('Displays avatars', function() {
+    assertEquals(3, getGridItems().length);
+  });
+
+  test('Can update avatars', function() {
+    avatarSelector.pop('avatars');
+    Polymer.dom.flush();
+    assertEquals(2, getGridItems().length);
+  });
+
+  test('No avatar is initially selected', function() {
+    assertFalse(!!avatarSelector.selectedAvatar);
+    getGridItems().forEach(function(item) {
+      assertFalse(item.classList.contains('iron-selected'));
+    });
+  });
+
+  test('Can select avatar', function() {
+    const items = getGridItems();
+
+    // Simulate tapping the third avatar.
+    items[2].click();
+    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'));
+  });
+
+  test('ignores modified key events', function() {
+    const selector = avatarSelector.$['avatar-grid'];
+    const items = getGridItems();
+
+    items[0].focus();
+    assertEquals(getDeepActiveElement(), items[0]);
+
+    MockInteractions.keyDownOn(items[0], 39, [], 'ArrowRight');
+    assertEquals(getDeepActiveElement(), items[1]);
+
+    MockInteractions.keyDownOn(items[0], 37, [], 'ArrowLeft');
+    assertEquals(getDeepActiveElement(), items[0]);
+
+    avatarSelector.ignoreModifiedKeyEvents = true;
+
+    MockInteractions.keyDownOn(items[0], 39, 'alt', 'ArrowRight');
+    assertEquals(getDeepActiveElement(), items[0]);
+
+    MockInteractions.keyDownOn(items[0], 39, 'ctrl', 'ArrowRight');
+    assertEquals(getDeepActiveElement(), items[0]);
+
+    MockInteractions.keyDownOn(items[0], 39, 'meta', 'ArrowRight');
+    assertEquals(getDeepActiveElement(), items[0]);
+
+    MockInteractions.keyDownOn(items[0], 39, 'shift', 'ArrowRight');
+    assertEquals(getDeepActiveElement(), items[0]);
+
+    // Test RTL case.
+    selector.dir = 'rtl';
+    MockInteractions.keyDownOn(items[0], 37, [], 'ArrowLeft');
+    assertEquals(getDeepActiveElement(), items[1]);
+
+    MockInteractions.keyDownOn(items[0], 37, [], 'ArrowLeft');
+    assertEquals(getDeepActiveElement(), items[2]);
+
+    MockInteractions.keyDownOn(items[0], 37, [], 'ArrowRight');
+    assertEquals(getDeepActiveElement(), items[1]);
+
+    MockInteractions.keyDownOn(items[0], 37, [], 'ArrowRight');
+    assertEquals(getDeepActiveElement(), items[0]);
+  });
 });

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,10 +65,9 @@ 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;
     if (direction === 'ArrowDown' || direction === 'ArrowUp') {
@@ -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"