WebUI: Make CrElementsActionMenuTest.All pass in Polymer 2.

The semantics of document.activeElement and someElement.shadowRoot.activeElement
seem to have changed between Shadow DOM v0 and v1.

In V1 the following is possible:
someElement.shadowRoot.activeElement is null AND document.activeElement points to a child
belonging to |someElement|.

which does not seem to be the case for Shadow DOM v0.

Always recursing from document.activeElement seems more robust and works for both cases.

Bug: 875470
Change-Id: I53044c23bcfcfa85264b5154e635e44c05ce0f6f
Reviewed-on: https://chromium-review.googlesource.com/1208454Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#589049}

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

@@ -60,19 +60,19 @@ suite('CrActionMenu', function() {
   test('hidden or disabled items', function() {
     menu.showAt(dots);
     down();
-    assertEquals(menu.root.activeElement, items[0]);
+    assertEquals(getDeepActiveElement(), items[0]);
 
     menu.close();
     items[0].hidden = true;
     menu.showAt(dots);
     down();
-    assertEquals(menu.root.activeElement, items[1]);
+    assertEquals(getDeepActiveElement(), items[1]);
 
     menu.close();
     items[1].disabled = true;
     menu.showAt(dots);
     down();
-    assertEquals(menu.root.activeElement, items[2]);
+    assertEquals(getDeepActiveElement(), items[2]);
   });
 
   test('focus after down/up arrow', function() {
@@ -80,30 +80,30 @@ suite('CrActionMenu', function() {
 
     // The menu should be focused when shown, but not on any of the items.
     assertEquals(menu, document.activeElement);
-    assertNotEquals(items[0], menu.root.activeElement);
-    assertNotEquals(items[1], menu.root.activeElement);
-    assertNotEquals(items[2], menu.root.activeElement);
+    assertNotEquals(items[0], getDeepActiveElement());
+    assertNotEquals(items[1], getDeepActiveElement());
+    assertNotEquals(items[2], getDeepActiveElement());
 
     down();
-    assertEquals(items[0], menu.root.activeElement);
+    assertEquals(items[0], getDeepActiveElement());
     down();
-    assertEquals(items[1], menu.root.activeElement);
+    assertEquals(items[1], getDeepActiveElement());
     down();
-    assertEquals(items[2], menu.root.activeElement);
+    assertEquals(items[2], getDeepActiveElement());
     down();
-    assertEquals(items[0], menu.root.activeElement);
+    assertEquals(items[0], getDeepActiveElement());
     up();
-    assertEquals(items[2], menu.root.activeElement);
+    assertEquals(items[2], getDeepActiveElement());
     up();
-    assertEquals(items[1], menu.root.activeElement);
+    assertEquals(items[1], getDeepActiveElement());
     up();
-    assertEquals(items[0], menu.root.activeElement);
+    assertEquals(items[0], getDeepActiveElement());
     up();
-    assertEquals(items[2], menu.root.activeElement);
+    assertEquals(items[2], getDeepActiveElement());
 
     items[1].disabled = true;
     up();
-    assertEquals(items[0], menu.root.activeElement);
+    assertEquals(items[0], getDeepActiveElement());
   });
 
   test('pressing up arrow when no focus will focus last item', function() {
@@ -111,7 +111,7 @@ suite('CrActionMenu', function() {
     assertEquals(menu, document.activeElement);
 
     up();
-    assertEquals(items[items.length - 1], menu.root.activeElement);
+    assertEquals(items[items.length - 1], getDeepActiveElement());
   });
 
   test('can navigate to dynamically added items', function() {
@@ -123,16 +123,16 @@ suite('CrActionMenu', function() {
     menu.showAt(dots);
 
     down();
-    assertEquals(item, menu.root.activeElement);
+    assertEquals(item, getDeepActiveElement());
     down();
-    assertEquals(items[0], menu.root.activeElement);
+    assertEquals(items[0], getDeepActiveElement());
 
     // Can modify children while menu is open.
     menu.removeChild(item);
 
     up();
     // Focus should have wrapped around to final item.
-    assertEquals(items[2], menu.root.activeElement);
+    assertEquals(items[2], getDeepActiveElement());
   });
 
   test('close on resize', function() {
@@ -180,27 +180,27 @@ suite('CrActionMenu', function() {
     menu.showAt(dots);
 
     // Moving mouse on option 1 should focus it.
-    assertNotEquals(items[0], menu.root.activeElement);
+    assertNotEquals(items[0], getDeepActiveElement());
     makeMouseoverEvent(items[0]);
-    assertEquals(items[0], menu.root.activeElement);
+    assertEquals(items[0], getDeepActiveElement());
 
     // Moving mouse on the menu (not on option) should focus the menu.
     makeMouseoverEvent(menu);
-    assertNotEquals(items[0], menu.root.activeElement);
+    assertNotEquals(items[0], getDeepActiveElement());
     assertEquals(menu, document.activeElement);
 
     // Moving mouse on a disabled item should focus the menu.
     items[2].setAttribute('disabled', '');
     makeMouseoverEvent(items[2]);
-    assertNotEquals(items[2], menu.root.activeElement);
+    assertNotEquals(items[2], getDeepActiveElement());
     assertEquals(menu, document.activeElement);
 
     // Mouse movements should override keyboard focus.
     down();
     down();
-    assertEquals(items[1], menu.root.activeElement);
+    assertEquals(items[1], getDeepActiveElement());
     makeMouseoverEvent(items[0]);
-    assertEquals(items[0], menu.root.activeElement);
+    assertEquals(items[0], getDeepActiveElement());
   });
 
   test('items automatically given accessibility role', function() {

testing/buildbot/filters/webui_polymer2_interactive_ui_tests.filter

@@ -19,6 +19,5 @@ SettingsUIBrowserTest.All
 
 # TODO(dpapad): The following tests are failing with optimize_webui=true. Fix
 # them and move them to the list above.
--CrElementsActionMenuTest.All
 -CrElementsInputTest.All
 -MaterialBookmarksFocusTest.All

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

@@ -271,7 +271,7 @@ Polymer({
     var options = this.querySelectorAll('.dropdown-item');
     var numOptions = options.length;
     var focusedIndex =
-        Array.prototype.indexOf.call(options, this.root.activeElement);
+        Array.prototype.indexOf.call(options, getDeepActiveElement());
 
     // Handle case where nothing is focused and up is pressed.
     if (focusedIndex === -1 && step === -1)

ui/webui/resources/js/util.js

@@ -32,6 +32,18 @@ function getSVGElement(id) {
   return el ? assertInstanceof(el, Element) : null;
 }
 
+/**
+ * @return {?Element} The currently focused element (including elements that are
+ *     behind a shadow root), or null if nothing is focused.
+ */
+function getDeepActiveElement() {
+  var a = document.activeElement;
+  while (a && a.shadowRoot && a.shadowRoot.activeElement) {
+    a = a.shadowRoot.activeElement;
+  }
+  return a;
+}
+
 /**
  * Add an accessible message to the page that will be announced to
  * users who have spoken feedback on, but will be invisible to all