refactor(devtools): prevent dblclick on the expand arrow to show the …

…element panel (#54912) This will improve the UX PR Close #54912
angular · Apr 25, 2024 · 4a33efa · 4a33efa
1 parent 5530c5e
commit 4a33efa
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 13 deletions.
diff --git a/...src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.html b/...src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.html
@@ -21,19 +21,21 @@
       (mouseleave)="removeHighlight()"
       [style.padding-left]="15 + 15 * node.level + 'px'"
     >
-    <div class="tree-node-info">
-      @if (node.expandable) {
-        <button
-          [style.left]="15 * node.level + 'px'"
-          (click)="treeControl.toggle(node)"
-          [attr.aria-label]="'toggle ' + node.name"
-        >
-          <mat-icon class="mat-icon-rtl-mirror">
-            {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}
-          </mat-icon>
-        </button>
-      }
-      <span class="element-name" [class.angular-element]="isElement(node)">{{ node.name }}</span>
+      <div class="tree-node-info">
+        @if (node.expandable) {
+          <!-- We stop propagration on dblClick to prevent to show the element panel -->
+          <button
+            [style.left]="15 * node.level + 'px'"
+            (click)="treeControl.toggle(node)"
+            (dblclick)="stopPropagation($event)"
+            [attr.aria-label]="'toggle ' + node.name"
+          >
+            <mat-icon class="mat-icon-rtl-mirror">
+              {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}
+            </mat-icon>
+          </button>
+        }
+        <span class="element-name" [class.angular-element]="isElement(node)">{{ node.name }}</span>
 
       @if (node.directives) {
         <span class="dir-names">[{{ node.directives }}]</span>

diff --git a/...s/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.ts b/...s/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.ts
@@ -344,6 +344,10 @@ export class DirectiveForestComponent {
     }
   }
 
+  stopPropagation(event: Event): void {
+    event.stopPropagation();
+  }
+
   private _findMatchedNodes(): number[] {
     const indexesOfMatchedNodes: number[] = [];
     for (let i = 0; i < this.dataSource.data.length; i++) {