Polish some mouse interactions

src/devtools/views/Components/Element.js

@@ -190,6 +190,11 @@ function ExpandCollapseToggle({ element, store }: ExpandCollapseToggleProps) {
     [id, isCollapsed, store]
   );
 
+  const stopPropagation = useCallback(event => {
+    // Prevent the row from selecting
+    event.stopPropagation();
+  }, []);
+
   if (children.length === 0) {
     return <div className={styles.ExpandCollapseToggle} />;
   }
@@ -197,6 +202,7 @@ function ExpandCollapseToggle({ element, store }: ExpandCollapseToggleProps) {
   return (
     <div
       className={styles.ExpandCollapseToggle}
+      onMouseDown={stopPropagation}
       onClick={toggleCollapsed}
       onDoubleClick={swallowDoubleClick}
     >

src/devtools/views/Components/HooksTree.js

@@ -130,7 +130,7 @@ function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
         <div className={styles.Hook}>
           <div className={styles.NameValueRow}>
             <ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
-            <span onDoubleClick={toggleIsOpen} className={styles.Name}>
+            <span onClick={toggleIsOpen} className={styles.Name}>
               {name}
             </span>
           </div>
@@ -149,7 +149,7 @@ function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
         <div className={styles.Hook}>
           <div className={styles.NameValueRow}>
             <ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
-            <span onDoubleClick={toggleIsOpen} className={styles.Name}>
+            <span onClick={toggleIsOpen} className={styles.Name}>
               {name}
             </span>{' '}
             {/* $FlowFixMe */}

src/devtools/views/Components/KeyValue.js

@@ -115,7 +115,7 @@ export default function KeyValue({
           )}
           <span
             className={styles.Name}
-            onDoubleClick={hasChildren ? toggleIsOpen : undefined}
+            onClick={hasChildren ? toggleIsOpen : undefined}
           >
             {name}
           </span>
@@ -150,7 +150,7 @@ export default function KeyValue({
           )}
           <span
             className={styles.Name}
-            onDoubleClick={hasChildren ? toggleIsOpen : undefined}
+            onClick={hasChildren ? toggleIsOpen : undefined}
           >
             {name}
           </span>