Added toggle button to Tree > Element views

src/devtools/views/ButtonIcon.js

@@ -7,8 +7,10 @@ export type IconType =
   | 'back'
   | 'cancel'
   | 'close'
+  | 'collapsed'
   | 'copy'
   | 'down'
+  | 'expanded'
   | 'export'
   | 'filter'
   | 'import'
@@ -40,12 +42,18 @@ export default function ButtonIcon({ type }: Props) {
     case 'close':
       pathData = PATH_CLOSE;
       break;
+    case 'collapsed':
+      pathData = PATH_COLLAPSED;
+      break;
     case 'copy':
       pathData = PATH_COPY;
       break;
     case 'down':
       pathData = PATH_DOWN;
       break;
+    case 'expanded':
+      pathData = PATH_EXPANDED;
+      break;
     case 'export':
       pathData = PATH_EXPORT;
       break;
@@ -121,6 +129,8 @@ const PATH_CANCEL = `
 const PATH_CLOSE =
   'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z';
 
+const PATH_COLLAPSED = 'M10 17l5-5-5-5v10z';
+
 const PATH_COPY = `
   M3 13h2v-2H3v2zm0 4h2v-2H3v2zm2 4v-2H3a2 2 0 0 0 2 2zM3 9h2V7H3v2zm12 12h2v-2h-2v2zm4-18H9a2 2 0 0 0-2
   2v10a2 2 0 0 0 2 2h10c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12H9V5h10v10zm-8 6h2v-2h-2v2zm-4 0h2v-2H7v2z
@@ -128,6 +138,8 @@ const PATH_COPY = `
 
 const PATH_DOWN = 'M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z';
 
+const PATH_EXPANDED = 'M7 10l5 5 5-5z';
+
 const PATH_EXPORT = 'M15.82,2.14v7H21l-9,9L3,9.18H8.18v-7ZM3,20.13H21v1.73H3Z';
 
 const PATH_FILTER = 'M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z';

src/devtools/views/Components/Element.css

@@ -7,6 +7,8 @@
   align-items: center;
   cursor: default;
   user-select: none;
+
+  --color-expand-collapse-toggle: var(--color-dim);
 }
 .Element:hover {
   background-color: var(--color-hover-background);
@@ -21,6 +23,7 @@
   --color-jsx-arrow-brackets: var(--color-jsx-arrow-brackets-inverted);
   --color-attribute-name: var(--color-hover-background);
   --color-attribute-value: var(--color-component-name-inverted);
+  --color-expand-collapse-toggle: var(--color-component-name-inverted);
 }
 
 .DollarR {
@@ -55,3 +58,10 @@
 .CurrentHighlight {
   background-color: var(--color-search-match-current);
 }
+
+.ExpandCollapseToggle {
+  display: inline-flex;
+  width: 1rem;
+  height: 1rem;
+  color: var(--color-expand-collapse-toggle);
+}

src/devtools/views/Components/Element.js

@@ -9,6 +9,8 @@ import React, {
   useRef,
 } from 'react';
 import { ElementTypeClass, ElementTypeFunction } from 'src/devtools/types';
+import Store from 'src/devtools/store';
+import ButtonIcon from '../ButtonIcon';
 import { createRegExp } from '../utils';
 import { TreeContext } from './TreeContext';
 import { BridgeContext, StoreContext } from '../context';
@@ -75,8 +77,6 @@ export default function ElementView({ data, index, style }: Props) {
     }
   }, [id, isSelected, lastScrolledIDRef]);
 
-  // TODO Add click and key handlers for toggling element open/close state.
-
   const handleMouseDown = useCallback(
     ({ metaKey }) => {
       if (id !== null) {
@@ -114,8 +114,6 @@ export default function ElementView({ data, index, style }: Props) {
   const showDollarR =
     isSelected && (type === ElementTypeClass || type === ElementTypeFunction);
 
-  // TODO styles.SelectedElement is 100% width but it doesn't take horizontal overflow into account.
-
   return (
     <div
       className={isSelected ? styles.SelectedElement : styles.Element}
@@ -138,6 +136,7 @@ export default function ElementView({ data, index, style }: Props) {
         marginBottom: `-${style.height}px`,
       }}
     >
+      <ExpandCollapseToggle element={element} store={store} />
       <span className={styles.Component} ref={ref}>
         <DisplayName displayName={displayName} id={((id: any): number)} />
         {key && (
@@ -152,6 +151,45 @@ export default function ElementView({ data, index, style }: Props) {
   );
 }
 
+// Prevent double clicks on toggle from drilling into the owner list.
+const swallowDoubleClick = event => {
+  event.preventDefault();
+  event.stopPropagation();
+};
+
+type ExpandCollapseToggleProps = {|
+  element: Element,
+  store: Store,
+|};
+
+function ExpandCollapseToggle({ element, store }: ExpandCollapseToggleProps) {
+  const { children, id, isCollapsed } = element;
+
+  const toggleCollapsed = useCallback(
+    event => {
+      event.preventDefault();
+      event.stopPropagation();
+
+      store.toggleIsCollapsed(id, !isCollapsed);
+    },
+    [id, isCollapsed, store]
+  );
+
+  if (children.length === 0) {
+    return <div className={styles.ExpandCollapseToggle} />;
+  }
+
+  return (
+    <div
+      className={styles.ExpandCollapseToggle}
+      onClick={toggleCollapsed}
+      onDoubleClick={swallowDoubleClick}
+    >
+      <ButtonIcon type={isCollapsed ? 'collapsed' : 'expanded'} />
+    </div>
+  );
+}
+
 type DisplayNameProps = {|
   displayName: string | null,
   id: number,