WebUI: Port cr.ui.FocusRowBehavior to Polymer 3.

This is in preparation of migratincg WebUI pages that depend on
it (History, Downloads, Settings) to Polymer3.

Bug: 1022215
Change-Id: I536beb13fa639ad6ecf20d2b414c5bd23f5032f8
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1912799Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org>
Auto-Submit: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#714724}

chrome/test/data/webui/BUILD.gn

@@ -16,6 +16,7 @@ js2gtest("interactive_ui_tests_js_webui") {
     "cr_elements/cr_elements_v3_focus_test.js",
     "cr_focus_outline_manager_test.js",
     "cr_focus_row_behavior_interactive_test.js",
+    "cr_focus_row_behavior_v3_interactive_test.js",
     "extensions/cr_extensions_interactive_ui_tests.js",
     "history/history_focus_test.js",
     "print_preview/print_preview_interactive_ui_tests.js",
@@ -33,6 +34,7 @@ js2gtest("interactive_ui_tests_js_webui") {
     "//chrome/browser/ui",
   ]
   data = [
+    "$root_gen_dir/chrome/test/data/webui/cr_focus_row_behavior_test.m.js",
     "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_action_menu_test.m.js",
     "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_checkbox_test.m.js",
     "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_expand_button_focus_tests.m.js",
@@ -294,5 +296,14 @@ js_modulizer("modulize_local") {
     "mock_timer.js",
     "test_browser_proxy.js",
     "test_util.js",
+    "cr_focus_row_behavior_test.js",
+  ]
+  namespace_rewrites = [
+    "cr.ui.FocusRowBehavior|FocusRowBehavior",
+    "MockInteractions.down|down",
+    "MockInteractions.pressAndReleaseKeyOn|pressAndReleaseKeyOn",
+    "MockInteractions.up|up",
+    "test_util.eventToPromise|eventToPromise",
+    "test_util.waitAfterNextRender|waitAfterNextRender",
   ]
 }

chrome/test/data/webui/cr_focus_row_behavior_test.js

@@ -2,6 +2,14 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// clang-format off
+// #import {down, up, pressAndReleaseKeyOn} from 'chrome://resources/polymer/v3_0/iron-test-helpers/mock-interactions.js'
+// #import {eventToPromise, waitAfterNextRender} from 'chrome://test/test_util.m.js';
+// #import {FocusRowBehavior} from 'chrome://resources/js/cr/ui/focus_row_behavior.m.js';
+// #import {getDeepActiveElement} from 'chrome://resources/js/util.m.js';
+// #import {Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+// clang-format on
+
 suite('cr-focus-row-behavior-test', function() {
   /** @type {FocusableIronListItemElement} */ let testElement;
 

chrome/test/data/webui/cr_focus_row_behavior_v3_interactive_test.js

+// Copyright 2019 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.
+
+// Polymer BrowserTest fixture.
+GEN_INCLUDE(['//chrome/test/data/webui/polymer_interactive_ui_test.js']);
+
+/**
+ * Test fixture for FocusRowBehavior.
+ * @constructor
+ * @extends {PolymerInteractiveUITest}
+ */
+var CrFocusRowBehaviorV3Test = class extends PolymerInteractiveUITest {
+  /** @override */
+  get browsePreload() {
+    return 'chrome://test?module=cr_focus_row_behavior_test.m.js';
+  }
+
+  /** @override */
+  get webuiHost() {
+    return 'dummyurl';
+  }
+
+  /** @override */
+  get extraLibraries() {
+    return [
+      '//third_party/mocha/mocha.js',
+      '//chrome/test/data/webui/mocha_adapter.js',
+    ];
+  }
+};
+
+TEST_F('CrFocusRowBehaviorV3Test', 'FocusTest', function() {
+  mocha.run();
+});

ui/webui/resources/cr_polymer_resources_v3.grdp

 <?xml version="1.0" encoding="utf-8"?>
 <grit-part>
+  <include name="IDR_WEBUI_JS_CR_UI_FOCUS_ROW_BEHAVIOR_M_JS"
+           file="${root_gen_dir}/ui/webui/resources/js/cr/ui/focus_row_behavior.m.js"
+           use_base_dir="false" type="BINDATA" compress="gzip" />
   <include name="IDR_WEBUI_JS_I18N_BEHAVIOR_M_JS"
            file="${root_gen_dir}/ui/webui/resources/js/i18n_behavior.m.js"
            use_base_dir="false" type="BINDATA" compress="gzip" />

ui/webui/resources/js/cr/ui/BUILD.gn

@@ -262,20 +262,24 @@ js_modulizer("modulize") {
     "drag_wrapper.js",
     "focus_outline_manager.js",
     "focus_row.js",
+    "focus_row_behavior.js",
     "focus_without_ink.js",
   ]
   namespace_rewrites = [
     "cr.ui.DragWrapperDelegate|DragWrapperDelegate",
     "cr.ui.FocusRowDelegate|FocusRowDelegate",
     "cr.ui.FocusRow|FocusRow",
+    "cr.ui.focusWithoutInk|focusWithoutInk",
   ]
 }
 
 js_type_check("ui_resources_modules") {
+  is_polymer3 = true
   deps = [
     ":drag_wrapper.m",
     ":focus_outline_manager.m",
     ":focus_row.m",
+    ":focus_row_behavior.m",
     ":focus_without_ink.m",
   ]
 }
@@ -306,6 +310,19 @@ js_library("focus_row.m") {
   extra_deps = [ ":modulize" ]
 }
 
+js_library("focus_row_behavior.m") {
+  deps = [
+    ":focus_row.m",
+    ":focus_without_ink.m",
+    "../..:assert.m",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+  ]
+  sources = [
+    "$root_gen_dir/ui/webui/resources/js/cr/ui/focus_row_behavior.m.js",
+  ]
+  extra_deps = [ ":modulize" ]
+}
+
 js_library("focus_without_ink.m") {
   deps = [
     "../..:assert.m",

ui/webui/resources/js/cr/ui/focus_row_behavior.js

@@ -2,6 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// clang-format off
+// #import {afterNextRender} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+// #import {assert} from 'chrome://resources/js/assert.m.js';
+// #import {focusWithoutInk} from './focus_without_ink.m.js';
+// #import {FocusRow, FocusRowDelegate} from './focus_row.m.js';
+// clang-format on
+
 cr.define('cr.ui', function() {
   /** @implements {cr.ui.FocusRowDelegate} */
   class FocusRowBehaviorDelegate {
@@ -86,7 +93,7 @@ cr.define('cr.ui', function() {
    *
    * @polymerBehavior
    */
-  const FocusRowBehavior = {
+  /* #export */ const FocusRowBehavior = {
     properties: {
       /** @private {cr.ui.VirtualFocusRow} */
       row_: Object,
@@ -368,6 +375,7 @@ cr.define('cr.ui', function() {
     },
   };
 
+  // #cr_define_end
   return {
     FocusRowBehaviorDelegate,
     VirtualFocusRow,