Web UI Polymer 3: Port cr-action-menu

- Autogenerate Polymer 3 cr-action-menu and test
- Autogenerate modulized focus_row.js, since cr-action-menu depends on
it
- Add cr-action-menu to demo page
- Script changes, required to allow cr-action-menu to export its enum

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

chrome/browser/resources/print_preview/polymer3/demo.js

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'chrome://resources/cr_elements/cr_action_menu/cr_action_menu.m.js';
 import 'chrome://resources/cr_elements/cr_button/cr_button.m.js';
 import 'chrome://resources/cr_elements/cr_checkbox/cr_checkbox.m.js';
 import 'chrome://resources/cr_elements/cr_dialog/cr_dialog.m.js';
@@ -49,8 +50,14 @@ class HelloPolymer3Element extends PolymerElement {
 
       <cr-toolbar id="toolbar" page-name="Polymer 3 Demo"
           search-prompt="Search">
-        <cr-icon-button iron-icon="cr:more-vert"></cr-icon-button>
+        <cr-icon-button iron-icon="cr:more-vert" on-click="showActionMenu_">
+        </cr-icon-button>
       </cr-toolbar>
+      <cr-action-menu>
+        <button class="dropdown-item">Hello</button>
+        <button class="dropdown-item">Action</button>
+        <button class="dropdown-item">Menu</button>
+      </cr-action-menu>
 
       <cr-checkbox checked="{{checkboxChecked_}}">
         [[checkboxChecked_]]
@@ -203,6 +210,14 @@ class HelloPolymer3Element extends PolymerElement {
   onExpand_() {
     this.expanded_ = !this.expanded_;
   }
+
+  /**
+   * @param {!Event} e
+   * @private
+   */
+  showActionMenu_(e) {
+    this.shadowRoot.querySelector('cr-action-menu').showAt(e.target);
+  }
 }  // class HelloPolymer3
 
 customElements.define('hello-polymer3', HelloPolymer3Element);

chrome/test/data/webui/BUILD.gn

@@ -32,6 +32,7 @@ js2gtest("interactive_ui_tests_js_webui") {
     "//chrome/browser/ui",
   ]
   data = [
+    "$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",
     "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_icon_button_focus_tests.m.js",

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

@@ -6,6 +6,7 @@ import("//ui/webui/resources/tools/js_modulizer.gni")
 
 js_modulizer("modulize") {
   input_files = [
+    "cr_action_menu_test.js",
     "cr_button_tests.js",
     "cr_checkbox_test.js",
     "cr_container_shadow_behavior_test.js",
@@ -28,6 +29,8 @@ js_modulizer("modulize") {
     "cr_view_manager_test.js",
   ]
   namespace_rewrites = [
+    "cr.isMac|isMac",
+    "cr.isWindows|isWindows",
     "MockInteractions.blur|blur",
     "MockInteractions.downAndUp|downAndUp",
     "MockInteractions.keyDownOn|keyDownOn",

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

@@ -2,6 +2,18 @@
 // 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_action_menu/cr_action_menu.m.js';
+// #import 'chrome://resources/cr_elements/cr_checkbox/cr_checkbox.m.js';
+//
+// #import {AnchorAlignment} from 'chrome://resources/cr_elements/cr_action_menu/anchor_alignment.m.js';
+// #import {eventToPromise, flushTasks} from 'chrome://test/test_util.m.js';
+// #import {getDeepActiveElement} from 'chrome://resources/js/util.m.js';
+// #import {keyDownOn} from 'chrome://resources/polymer/v3_0/iron-test-helpers/mock-interactions.js';
+// #import {isMac, isWindows} from 'chrome://resources/js/cr.m.js';
+// #import {Polymer, html} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+// clang-format on
+
 /**
  * @fileoverview Tests for cr-action-menu element. Runs as an interactive UI
  * test, since many of these tests check focus behavior.
@@ -27,8 +39,9 @@ suite('CrActionMenu', function() {
 
   /** @override */
   suiteSetup(() => {
-    return PolymerTest.importHtml(
-        'chrome://resources/cr_elements/cr_checkbox/cr_checkbox.html');
+    /* #ignore */ return PolymerTest.importHtml(
+        /* #ignore */ 'chrome://resources/cr_elements/cr_checkbox/' +
+        /* #ignore */ 'cr_checkbox.html');
   });
 
   setup(function() {
@@ -489,7 +502,7 @@ suite('CrActionMenu', function() {
         </style>
         <test-element></test-element>`;
 
-      testElement = document.querySelector('test-element');
+      const testElement = document.querySelector('test-element');
       menu = testElement.root.querySelector('cr-action-menu');
       dialog = menu.getDialog();
       dots = testElement.root.querySelector('#dots');

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

@@ -28,6 +28,18 @@ var CrElementsV3FocusTest = class extends PolymerInteractiveUITest {
   }
 };
 
+// eslint-disable-next-line no-var
+var CrElementsActionMenuV3Test = class extends CrElementsV3FocusTest {
+  /** @override */
+  get browsePreload() {
+    return 'chrome://test?module=cr_elements/cr_action_menu_test.m.js';
+  }
+};
+
+TEST_F('CrElementsActionMenuV3Test', 'All', function() {
+  mocha.run();
+});
+
 // eslint-disable-next-line no-var
 var CrElementsCheckboxV3Test = class extends CrElementsV3FocusTest {
   /** @override */

ui/webui/resources/cr_elements/BUILD.gn

@@ -32,6 +32,7 @@ group("closure_compile") {
 
     # Targets for auto-generated Polymer 3 JS Modules
     ":cr_elements_module_resources",
+    "cr_action_menu:closure_compile_module",
     "cr_button:closure_compile_module",
     "cr_checkbox:closure_compile_module",
     "cr_dialog:closure_compile_module",
@@ -134,6 +135,8 @@ group("polymer3_elements") {
     ":modulize",
     ":shared_style_css_module",
     ":shared_vars_css_module",
+    "cr_action_menu:cr_action_menu_module",
+    "cr_action_menu:modulize",
     "cr_button:cr_button_module",
     "cr_checkbox:cr_checkbox_module",
     "cr_dialog:cr_dialog_module",

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

@@ -3,6 +3,8 @@
 # found in the LICENSE file.
 
 import("//third_party/closure_compiler/compile_js.gni")
+import("//tools/polymer/polymer.gni")
+import("../../tools/js_modulizer.gni")
 
 js_type_check("closure_compile") {
   deps = [
@@ -24,3 +26,63 @@ js_library("cr_action_menu") {
   ]
   externs_list = [ "$externs_path/pending.js" ]
 }
+
+js_modulizer("modulize") {
+  input_files = [ "anchor_alignment.js" ]
+  deps = []
+}
+
+polymer_modulizer("cr_action_menu") {
+  js_file = "cr_action_menu.js"
+  html_file = "cr_action_menu.html"
+  html_type = "dom-module"
+  namespace_rewrites = [
+    "cr.ui.focusWithoutInk|focusWithoutInk",
+    "cr.ui.FocusRow|FocusRow",
+    "cr.isMac|isMac",
+    "cr.isWindows|isWindows",
+    "Polymer.dom|dom",
+  ]
+  auto_imports = [
+    "ui/webui/resources/html/polymer.html|dom,html,Polymer",
+    "ui/webui/resources/html/assert.html|assert",
+    "ui/webui/resources/html/cr.html|isMac, isWindows",
+    "ui/webui/resources/cr_elements/cr_action_menu/anchor_alignment.html|AnchorAlignment",
+    "ui/webui/resources/html/cr/ui/focus_row.html|FocusRow",
+    "ui/webui/resources/html/cr/ui/focus_without_ink.html|focusWithoutInk",
+    "ui/webui/resources/html/util.html|getDeepActiveElement, hasKeyModifiers",
+  ]
+}
+
+js_type_check("closure_compile_module") {
+  is_polymer3 = true
+  deps = [
+    ":anchor_alignment.m",
+    ":cr_action_menu.m",
+  ]
+}
+
+js_library("anchor_alignment.m") {
+  sources = [
+    "$root_gen_dir/ui/webui/resources/cr_elements/cr_action_menu/anchor_alignment.m.js",
+  ]
+  deps = []
+  extra_deps = [ ":modulize" ]
+}
+
+js_library("cr_action_menu.m") {
+  sources = [
+    "$root_gen_dir/ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu.m.js",
+  ]
+  deps = [
+    ":anchor_alignment.m",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/js:assert.m",
+    "//ui/webui/resources/js:cr.m",
+    "//ui/webui/resources/js:util.m",
+    "//ui/webui/resources/js/cr/ui:focus_row.m",
+    "//ui/webui/resources/js/cr/ui:focus_without_ink.m",
+  ]
+  extra_deps = [ ":cr_action_menu_module" ]
+  externs_list = [ "$externs_path/pending.js" ]
+}

ui/webui/resources/cr_elements/cr_action_menu/anchor_alignment.js

@@ -6,7 +6,7 @@
  * @enum {number}
  * @const
  */
-const AnchorAlignment = {
+/* #export */ const AnchorAlignment = {
   BEFORE_START: -2,
   AFTER_START: -1,
   CENTER: 0,

ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu.html

 <link rel="import" href="../../html/polymer.html">
 
 <link rel="import" href="../../html/assert.html">
+<link rel="import" href="../../html/cr.html">
 <link rel="import" href="../../html/cr/ui/focus_row.html">
 <link rel="import" href="../../html/cr/ui/focus_without_ink.html">
 <link rel="import" href="../../html/util.html">

ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu.js

@@ -171,7 +171,7 @@ Polymer({
    * @return {!HTMLDialogElement}
    */
   getDialog: function() {
-    return this.$.dialog;
+    return /** @type {!HTMLDialogElement} */ (this.$.dialog);
   },
 
   /** @private */

ui/webui/resources/cr_elements_resources_v3.grdp

 <?xml version="1.0" encoding="utf-8"?>
 <grit-part>
   <!-- Polymer 3.0 Elements -->
+  <include name="IDR_CR_ELEMENTS_CR_ACTION_MENU_ANCHOR_ALIGNMENT_M_JS"
+         file="${root_gen_dir}/ui/webui/resources/cr_elements/cr_action_menu/anchor_alignment.m.js"
+         use_base_dir="false"
+         type="BINDATA"
+         compress="gzip" />
+  <include name="IDR_CR_ELEMENTS_CR_ACTION_MENU_M_JS"
+         file="${root_gen_dir}/ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu.m.js"
+         use_base_dir="false"
+         type="BINDATA"
+         compress="gzip" />
   <include name="IDR_CR_ELEMENTS_CR_BUTTON_M_JS"
          file="${root_gen_dir}/ui/webui/resources/cr_elements/cr_button/cr_button.m.js"
          use_base_dir="false"

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

@@ -269,13 +269,19 @@ js_library("tree") {
 js_modulizer("modulize") {
   input_files = [
     "focus_outline_manager.js",
+    "focus_row.js",
     "focus_without_ink.js",
   ]
+  namespace_rewrites = [
+    "cr.ui.FocusRow|FocusRow",
+    "cr.ui.FocusRowDelegate|FocusRowDelegate",
+  ]
 }
 
 js_type_check("ui_resources_modules") {
   deps = [
     ":focus_outline_manager.m",
+    ":focus_row.m",
     ":focus_without_ink.m",
   ]
 }
@@ -287,6 +293,18 @@ js_library("focus_outline_manager.m") {
   extra_deps = [ ":modulize" ]
 }
 
+js_library("focus_row.m") {
+  deps = [
+    "../..:assert.m",
+    "../..:event_tracker.m",
+    "../..:util.m",
+  ]
+  sources = [
+    "$root_gen_dir/ui/webui/resources/js/cr/ui/focus_row.m.js",
+  ]
+  extra_deps = [ ":modulize" ]
+}
+
 js_library("focus_without_ink.m") {
   deps = [
     "../..:assert.m",

ui/webui/resources/js/cr/ui/focus_row.js

@@ -2,6 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// clang-format off
+// #import {assert, assertInstanceof} from 'chrome://resources/js/assert.m.js'
+// #import {EventTracker} from 'chrome://resources/js/event_tracker.m.js'
+// #import {hasKeyModifiers, isRTL} from 'chrome://resources/js/util.m.js'
+// clang-format on
+
 cr.define('cr.ui', function() {
   /**
    * A class to manage focus between given horizontally arranged elements.
@@ -15,7 +21,7 @@ cr.define('cr.ui', function() {
    * changes to a node inside |this.boundary_|. If |boundary| isn't specified,
    * any focus change deactivates the row.
    */
-  class FocusRow {
+  /* #export */ class FocusRow {
     /**
      * @param {!Element} root The root of this focus row. Focus classes are
      *     applied to |root| and all added elements must live within |root|.
@@ -140,7 +146,7 @@ cr.define('cr.ui', function() {
      * @protected
      */
     getCustomEquivalent(sampleElement) {
-      return assert(this.getFirstFocusable());
+      return /** @type {!Element} */ (assert(this.getFirstFocusable()));
     }
 
     /**
@@ -304,7 +310,7 @@ cr.define('cr.ui', function() {
 
 
   /** @interface */
-  class FocusRowDelegate {
+  /* #export */ class FocusRowDelegate {
     /**
      * Called when a key is pressed while on a FocusRow's item. If true is
      * returned, further processing is skipped.
@@ -328,6 +334,7 @@ cr.define('cr.ui', function() {
     getCustomEquivalent(sampleElement) {}
   }
 
+  // #cr_define_end
   return {
     FocusRow,
     FocusRowDelegate,

ui/webui/resources/webui_resources.grd

@@ -89,6 +89,9 @@ without changes to the corresponding grd file. -->
       <include name="IDR_WEBUI_JS_CR_UI_FOCUS_OUTLINE_MANAGER_M_JS"
                file="${root_gen_dir}/ui/webui/resources/js/cr/ui/focus_outline_manager.m.js"
                use_base_dir="false" type="BINDATA" compress="gzip" />
+      <include name="IDR_WEBUI_JS_CR_UI_FOCUS_ROW_M_JS"
+               file="${root_gen_dir}/ui/webui/resources/js/cr/ui/focus_row.m.js"
+               use_base_dir="false" type="BINDATA" compress="gzip" />
       <include name="IDR_WEBUI_JS_CR_UI_FOCUS_WITHOUT_INK_M_JS"
                file="${root_gen_dir}/ui/webui/resources/js/cr/ui/focus_without_ink.m.js"
                use_base_dir="false" type="BINDATA" compress="gzip" />