Added 'back to owner' button when owners stack is collapsed

src/devtools/views/ButtonIcon.js

@@ -4,7 +4,6 @@ import React from 'react';
 import styles from './ButtonIcon.css';
 
 export type IconType =
-  | 'back'
   | 'cancel'
   | 'close'
   | 'collapsed'
@@ -33,9 +32,6 @@ type Props = {|
 export default function ButtonIcon({ type }: Props) {
   let pathData = null;
   switch (type) {
-    case 'back':
-      pathData = PATH_BACK;
-      break;
     case 'cancel':
       pathData = PATH_CANCEL;
       break;
@@ -115,12 +111,6 @@ export default function ButtonIcon({ type }: Props) {
   );
 }
 
-const PATH_BACK = `
-  M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9
-  2-2V5c0-1.1-.9-2-2-2zm-3 12.59L17.59 17 14 13.41 10.41 17 9 15.59 12.59 12 9 8.41
-  10.41 7 14 10.59 17.59 7 19 8.41 15.41 12 19 15.59z
-`;
-
 const PATH_CANCEL = `
   M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69
   16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z

src/devtools/views/Components/OwnersStack.css

@@ -47,7 +47,6 @@
   border: none;
   background: var(--color-button-background);
   color: var(--color-button);
-  margin-right: 0.5rem;
 }
 .MenuButtonContent {
   display: inline-flex;

src/devtools/views/Components/OwnersStack.js

@@ -1,5 +1,6 @@
 // @flow
 import React, {
+  Fragment,
   useCallback,
   useContext,
   useLayoutEffect,
@@ -53,21 +54,25 @@ export default function OwnerStack() {
     <div className={styles.OwnerStack}>
       <div className={styles.Bar} ref={elementsBarRef}>
         {isOverflowing && (
-          <ElementsDropdown
-            ownerStack={ownerStack}
-            ownerStackIndex={ownerStackIndex}
-          />
+          <Fragment>
+            <ElementsDropdown
+              ownerStack={ownerStack}
+              ownerStackIndex={ownerStackIndex}
+            />
+            <BackToOwnerButton
+              ownerStack={ownerStack}
+              ownerStackIndex={ownerStackIndex}
+            />
+            <ElementView
+              id={ownerStack[((ownerStackIndex: any): number)]}
+              index={ownerStackIndex}
+            />
+          </Fragment>
         )}
-        {isOverflowing ? (
-          <ElementView
-            id={ownerStack[((ownerStackIndex: any): number)]}
-            index={ownerStackIndex}
-          />
-        ) : (
+        {!isOverflowing &&
           ownerStack.map((id, index) => (
             <ElementView key={id} id={id} index={index} />
-          ))
-        )}
+          ))}
       </div>
       <div className={styles.VRule} />
       <Button
@@ -149,3 +154,36 @@ function ElementView({ id, index }: ElementViewProps) {
     </Toggle>
   );
 }
+
+type BackToOwnerButtonProps = {|
+  ownerStack: Array<number>,
+  ownerStackIndex: number | null,
+|};
+function BackToOwnerButton({
+  ownerStack,
+  ownerStackIndex,
+}: BackToOwnerButtonProps) {
+  const store = useContext(StoreContext);
+  const dispatch = useContext(TreeDispatcherContext);
+
+  if (ownerStackIndex === null || ownerStackIndex === 0) {
+    return null;
+  }
+
+  const ownerID = ownerStack[ownerStackIndex - 1];
+  const owner = store.getElementByID(ownerID);
+
+  return (
+    <Button
+      onClick={() =>
+        dispatch({
+          type: 'SELECT_OWNER',
+          payload: ownerID,
+        })
+      }
+      title={`Back to ${(owner !== null && owner.displayName) || 'owner'}`}
+    >
+      <ButtonIcon type="previous" />
+    </Button>
+  );
+}