Added HOC badge to owners stack breadcrumbs

src/devtools/views/Components/Element.css

@@ -38,8 +38,8 @@
     --color-component-badge-background-inverted
   );
   --color-jsx-arrow-brackets: var(--color-jsx-arrow-brackets-inverted);
-  --color-attribute-name: var(--color-background-hover);
-  --color-attribute-value: var(--color-component-name-inverted);
+  --color-attribute-name: var(--color-attribute-name-inverted);
+  --color-attribute-value: var(--color-attribute-value-inverted);
   --color-expand-collapse-toggle: var(--color-component-name-inverted);
 }
 

src/devtools/views/Components/OwnersStack.css

@@ -13,6 +13,8 @@
   font-size: var(--font-size-monospace-normal);
   user-select: none;
   white-space: nowrap;
+  display: flex;
+  align-items: center;
 }
 
 .Component[data-reach-menu-item][data-selected],
@@ -96,3 +98,7 @@
 .NotInStore:hover {
   color: var(--color-dimmest);
 }
+
+.Badge {
+  margin-left: 0.25rem;
+}

src/devtools/views/Components/OwnersStack.js

@@ -13,10 +13,12 @@ import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import Toggle from '../Toggle';
+import Badge from './Badge';
 import { OwnersListContext } from './OwnersListContext';
 import { TreeDispatcherContext, TreeStateContext } from './TreeContext';
 import { useIsOverflowing } from '../hooks';
 import { StoreContext } from '../context';
+import { ElementTypeMemo, ElementTypeForwardRef } from 'src/types';
 
 import type { Owner } from './types';
 
@@ -237,7 +239,7 @@ type ElementViewProps = {
 function ElementView({ isSelected, owner, selectOwner }: ElementViewProps) {
   const store = useContext(StoreContext);
 
-  const { displayName } = owner;
+  const { displayName, hocDisplayNames, type } = owner;
   const isInStore = store.containsElement(owner.id);
 
   const handleChange = useCallback(() => {
@@ -246,6 +248,16 @@ function ElementView({ isSelected, owner, selectOwner }: ElementViewProps) {
     }
   }, [isInStore, selectOwner, owner]);
 
+  // TODO Maybe factor this into a shared util method?
+  let badge = null;
+  if (hocDisplayNames !== null) {
+    badge = hocDisplayNames.length === 1 ? hocDisplayNames[0] : '…';
+  } else if (type === ElementTypeMemo) {
+    badge = 'Memo';
+  } else if (type === ElementTypeForwardRef) {
+    badge = 'ForwardRef';
+  }
+
   return (
     <Toggle
       className={`${styles.Component} ${isInStore ? '' : styles.NotInStore}`}
@@ -253,6 +265,8 @@ function ElementView({ isSelected, owner, selectOwner }: ElementViewProps) {
       onChange={handleChange}
     >
       {displayName}
+
+      <Badge className={styles.Badge}>{badge}</Badge>
     </Toggle>
   );
 }

src/devtools/views/Settings/SettingsContext.js

@@ -200,7 +200,9 @@ function updateThemeVariables(
   documentElements: DocumentElements
 ): void {
   updateStyleHelper(theme, 'color-attribute-name', documentElements);
+  updateStyleHelper(theme, 'color-attribute-name-inverted', documentElements);
   updateStyleHelper(theme, 'color-attribute-value', documentElements);
+  updateStyleHelper(theme, 'color-attribute-value-inverted', documentElements);
   updateStyleHelper(theme, 'color-attribute-editable-value', documentElements);
   updateStyleHelper(theme, 'color-background', documentElements);
   updateStyleHelper(theme, 'color-background-hover', documentElements);

src/devtools/views/root.css

@@ -5,7 +5,9 @@
 
   /* Light theme */
   --light-color-attribute-name: #ef6632;
+  --light-color-attribute-name-inverted: rgba(255, 255, 255, 0.7);
   --light-color-attribute-value: #1a1aa6;
+  --light-color-attribute-value-inverted: #ffffff;
   --light-color-attribute-editable-value: #1a1aa6;
   --light-color-background: #ffffff;
   --light-color-background-hover: rgba(0, 136, 250, 0.1);
@@ -64,7 +66,9 @@
 
   /* Dark theme */
   --dark-color-attribute-name: #9d87d2;
+  --dark-color-attribute-name-inverted: #282828;
   --dark-color-attribute-value: #cedae0;
+  --dark-color-attribute-value-inverted: #ffffff;
   --dark-color-attribute-editable-value: yellow;
   --dark-color-background: #282c34;
   --dark-color-background-hover: rgba(255, 255, 255, 0.1);