CrTreeItem: Click handling fix

Click event target ends up being the tree-item regardless of where on
the item is clicked. Add separate handlers for the expand icons.

Bug: 1346541
Change-Id: I103ff8adea19e587c948d0356d18b7c0d47a49a5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3788233
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1028451}

chrome/test/data/webui/cr_elements/cr_tree_test.ts

@@ -136,4 +136,27 @@ suite('cr-tree', function() {
     assertFalse(bar.hasChildren);
     assertEquals(0, bar.items.length);
   });
+
+  test('expand on icon click', async () => {
+    tree.selectedItem = root;
+    assertFalse(root.expanded);
+    let whenExpand = eventToPromise('cr-tree-item-expand', tree);
+    const expand = root.shadowRoot!.querySelector<HTMLElement>('.expand-icon');
+    assertTrue(!!expand);
+    expand.click();
+    await whenExpand;
+
+    assertTrue(root.expanded);
+    assertFalse(bar.expanded);
+    whenExpand = eventToPromise('cr-tree-item-expand', tree);
+    const barExpand =
+        bar.shadowRoot!.querySelector<HTMLElement>('.expand-icon');
+    assertTrue(!!barExpand);
+    barExpand.click();
+
+    assertTrue(root.expanded);
+    assertTrue(bar.expanded);
+    // Selection isn't impacted by clicking the expand icon.
+    assertEquals(root, tree.selectedItem);
+  });
 });

ui/webui/resources/cr_elements/cr_tree/cr_tree_item.ts

@@ -56,9 +56,14 @@ export class CrTreeItemElement extends CrTreeBaseElement {
     this.labelElement.textContent = this.label_;
     this.toggleAttribute(SELECTED_ATTR, false);
     this.rowElement.setAttribute('aria-selected', 'false');
-    this.addEventListener('click', this.handleClick.bind(this));
-    this.addEventListener('mousedown', this.handleMouseDown.bind(this));
-    this.addEventListener('dblclick', this.handleDblClick.bind(this));
+    const expand = this.shadowRoot!.querySelector<HTMLElement>('.expand-icon');
+    assert(expand);
+    expand.addEventListener('click', this.handleExpandClick_.bind(this));
+    expand.addEventListener(
+        'mousedown', this.handleExpandMouseDown_.bind(this));
+    this.addEventListener('click', this.handleClick_.bind(this));
+    this.addEventListener('mousedown', this.handleMouseDown_.bind(this));
+    this.addEventListener('dblclick', this.handleDblClick_.bind(this));
   }
 
   override attributeChangedCallback(
@@ -182,30 +187,40 @@ export class CrTreeItemElement extends CrTreeBaseElement {
   }
 
   // Mouse event handlers
-  handleMouseDown(e: MouseEvent) {
+  private handleMouseDown_(e: MouseEvent) {
     if (e.button === 2) {  // right
-      this.handleClick(e);
+      this.handleClick_(e);
+    }
+  }
+
+  private handleExpandMouseDown_(e: MouseEvent) {
+    if (e.button === 2) {  // right
+      this.handleExpandClick_(e);
     }
   }
 
   /**
    * Handles double click events on the tree item.
    */
-  handleDblClick(e: Event) {
+  private handleDblClick_(e: Event) {
     const expanded = this.expanded;
     this.expanded = !expanded;
     e.stopPropagation();
   }
 
+  /**
+   * Called when the user clicks on a tree item's expand icon.
+   */
+  private handleExpandClick_(e: Event) {
+    this.expanded = !this.expanded;
+    e.stopPropagation();
+  }
+
   /**
    * Called when the user clicks on a tree item.
    */
-  handleClick(e: Event) {
-    if ((e.target as HTMLElement).classList.contains('expand-icon')) {
-      this.expanded = !this.expanded;
-    } else {
-      this.toggleAttribute(SELECTED_ATTR, true);
-    }
+  private handleClick_(e: Event) {
+    this.toggleAttribute(SELECTED_ATTR, true);
     e.stopPropagation();
   }