WebUI: Fix cr.ui.List to accept children other than LI

In Files app we added a title inside the list, when clicking in the
title it throws an exception in the assertInstanceof() in
getListItemAncestor().

This CL fixes getListItemAncestor() to not raise in this condition,
instead it returns null as the description says. It also fixes event
handlers that calls this function to check if it has returned null.

Test: browser_tests --gtest_filter="WebUIResourceBrowserTest.ListTest"
Bug: 1063184
Change-Id: Icf92cc30bb0a346c7e19660f847a994286abfea6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2111252
Commit-Queue: Luciano Pacheco <lucmult@chromium.org>
Commit-Queue: calamity <calamity@chromium.org>
Reviewed-by: calamity <calamity@chromium.org>
Auto-Submit: Luciano Pacheco <lucmult@chromium.org>
Cr-Commit-Position: refs/heads/master@{#752381}

chrome/test/data/webui/list_test.html

@@ -27,6 +27,40 @@ function testClearPinnedItem() {
                list.querySelectorAll('li')[0].textContent);
 }
 
+function testClickOutsideListItem() {
+  const list = document.createElement('ul');
+  list.style.position = 'absolute';
+  list.style.width = '800px';
+  list.style.height = '800px';
+  cr.ui.List.decorate(list);
+  document.body.appendChild(list);
+
+  // Add a header inside the list.
+  const header = document.createElement('h1');
+  header.innerText = 'Title inside the list';
+  list.appendChild(header);
+
+  const model = new cr.ui.ArrayDataModel(['Item A', 'Item B']);
+  list.dataModel = model;
+
+  list.redraw();
+
+  const item = list.querySelector('li');
+  const span = document.createElement('span');
+  span.innerText = 'some text';
+  item.appendChild(span);
+
+  // Non-LI children should return null.
+  assertEquals(null, list.getListItemAncestor(header));
+
+  // It should return null for the list itself.
+  assertEquals(null, list.getListItemAncestor(list));
+
+  // Anything inside a LI should return the LI itself.
+  assertEquals(item, list.getListItemAncestor(item));
+  assertEquals(item, list.getListItemAncestor(span));
+}
+
 </script>
 
 </body>

ui/webui/resources/js/cr/ui/list.js

@@ -526,6 +526,9 @@ cr.define('cr.ui', function() {
       }
 
       target = this.getListItemAncestor(target);
+      if (!target) {
+        return;
+      }
 
       const index = this.getIndexOfListItem(target);
       this.selectionController_.handlePointerDownUp(e, index);
@@ -570,7 +573,8 @@ cr.define('cr.ui', function() {
       while (container && container.parentNode !== this) {
         container = container.parentNode;
       }
-      return container && assertInstanceof(container, HTMLLIElement);
+
+      return (container instanceof HTMLLIElement ? container : null);
     },
 
     /**
@@ -614,6 +618,9 @@ cr.define('cr.ui', function() {
       }
 
       target = this.getListItemAncestor(target);
+      if (!target) {
+        return;
+      }
 
       const index = this.getIndexOfListItem(target);
       this.selectionController_.handleTouchEvents(e, index);
@@ -1375,6 +1382,9 @@ cr.define('cr.ui', function() {
   function handleMouseDown(e) {
     e.target = /** @type {!HTMLElement} */ (e.target);
     const listItem = this.getListItemAncestor(e.target);
+    if (!listItem) {
+      return;
+    }
     const wasSelected = listItem && listItem.selected;
     this.handlePointerDownUp_(e);