Refactored badges to share code and show +count

src/devtools/views/Components/Badge.css

@@ -9,3 +9,9 @@
   font-family: var(--font-family-monospace);
   font-size: var(--font-size-monospace-small);
 }
+
+.ExtraLabel {
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-small);
+  color: var(--color-component-badge-count);
+}

src/devtools/views/Components/Badge.js

@@ -1,17 +1,47 @@
 // @flow
 
-import React from 'react';
+import React, { Fragment } from 'react';
+import { ElementTypeMemo, ElementTypeForwardRef } from 'src/types';
 import styles from './Badge.css';
 
+import type { ElementType } from 'src/types';
+
 type Props = {|
-  children: string | null,
   className?: string,
+  hocDisplayNames: Array<string> | null,
+  type: ElementType,
 |};
 
-export default function Badge({ children, className }: Props) {
-  if (children === null) {
+export default function Badge({ className, hocDisplayNames, type }: Props) {
+  let hocDisplayName = null;
+  let totalBadgeCount = 0;
+  let typeLabel = null;
+
+  if (hocDisplayNames !== null) {
+    hocDisplayName = hocDisplayNames[0];
+    totalBadgeCount += hocDisplayNames.length;
+  }
+
+  if (type === ElementTypeMemo) {
+    typeLabel = 'Memo';
+    totalBadgeCount++;
+  } else if (type === ElementTypeForwardRef) {
+    typeLabel = 'ForwardRef';
+    totalBadgeCount++;
+  }
+
+  if (hocDisplayNames === null && typeLabel === null) {
     return null;
   }
 
-  return <div className={`${styles.Badge} ${className || ''}`}>{children}</div>;
+  return (
+    <Fragment>
+      <div className={`${styles.Badge} ${className || ''}`}>
+        {hocDisplayName || typeLabel}
+      </div>
+      {totalBadgeCount > 1 && (
+        <div className={styles.ExtraLabel}>+{totalBadgeCount}</div>
+      )}
+    </Fragment>
+  );
 }

src/devtools/views/Components/Element.css

@@ -37,6 +37,7 @@
   --color-component-badge-background: var(
     --color-component-badge-background-inverted
   );
+  --color-component-badge-count: var(--color-component-badge-count-inverted);
   --color-jsx-arrow-brackets: var(--color-jsx-arrow-brackets-inverted);
   --color-attribute-name: var(--color-attribute-name-inverted);
   --color-attribute-value: var(--color-attribute-value-inverted);

src/devtools/views/Components/Element.js

@@ -7,7 +7,6 @@ import React, {
   useMemo,
   useState,
 } from 'react';
-import { ElementTypeMemo, ElementTypeForwardRef } from 'src/types';
 import Store from 'src/devtools/store';
 import Badge from './Badge';
 import ButtonIcon from '../ButtonIcon';
@@ -89,16 +88,6 @@ export default function ElementView({ data, index, style }: Props) {
     type,
   } = ((element: any): Element);
 
-  // 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';
-  }
-
   let className = styles.Element;
   if (isSelected) {
     className = treeFocused
@@ -139,7 +128,11 @@ export default function ElementView({ data, index, style }: Props) {
         </Fragment>
       )}
       <span className={styles.Bracket}>&gt;</span>
-      <Badge className={styles.Badge}>{badge}</Badge>
+      <Badge
+        className={styles.Badge}
+        hocDisplayNames={hocDisplayNames}
+        type={type}
+      />
       <span className={styles.Padding} />
     </div>
   );

src/devtools/views/Components/HocBadges.css

@@ -7,3 +7,15 @@
   );
   user-select: none;
 }
+
+.Badge {
+  display: inline-block;
+  background-color: var(--color-component-badge-background);
+  color: var(--color-text);
+  padding: 0.125rem 0.25rem;
+  line-height: normal;
+  border-radius: 0.125rem;
+  margin-right: 0.25rem;
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-small);
+}

src/devtools/views/Components/HocBadges.js

@@ -27,10 +27,12 @@ export default function HocBadges({ element }: Props) {
 
   return (
     <div className={styles.HocBadges}>
-      <Badge>{typeBadge}</Badge>
+      {typeBadge !== null && <div className={styles.Badge}>{typeBadge}</div>}
       {hocDisplayNames !== null &&
         hocDisplayNames.map(hocDisplayName => (
-          <Badge key={hocDisplayName}>{hocDisplayName}</Badge>
+          <div key={hocDisplayName} className={styles.Badge}>
+            {hocDisplayName}
+          </div>
         ))}
     </div>
   );

src/devtools/views/Components/OwnersStack.css

@@ -101,4 +101,4 @@
 
 .Badge {
   margin-left: 0.25rem;
-}
+}

src/devtools/views/Components/OwnersStack.js

@@ -18,7 +18,6 @@ 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';
 
@@ -248,16 +247,6 @@ 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}`}
@@ -266,7 +255,11 @@ function ElementView({ isSelected, owner, selectOwner }: ElementViewProps) {
     >
       {displayName}
 
-      <Badge className={styles.Badge}>{badge}</Badge>
+      <Badge
+        className={styles.Badge}
+        hocDisplayNames={hocDisplayNames}
+        type={type}
+      />
     </Toggle>
   );
 }

src/devtools/views/Components/SelectedElement.js

@@ -350,15 +350,6 @@ function OwnerView({
     [dispatch, id]
   );
 
-  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 (
     <Button
       key={id}
@@ -372,7 +363,7 @@ function OwnerView({
       >
         {displayName}
       </span>
-      <Badge>{badge}</Badge>
+      <Badge hocDisplayNames={hocDisplayNames} type={type} />
     </Button>
   );
 }

src/devtools/views/Settings/SettingsContext.js

@@ -259,6 +259,12 @@ function updateThemeVariables(
     'color-component-badge-background-inverted',
     documentElements
   );
+  updateStyleHelper(theme, 'color-component-badge-count', documentElements);
+  updateStyleHelper(
+    theme,
+    'color-component-badge-count-inverted',
+    documentElements
+  );
   updateStyleHelper(theme, 'color-dim', documentElements);
   updateStyleHelper(theme, 'color-dimmer', documentElements);
   updateStyleHelper(theme, 'color-dimmest', documentElements);

src/devtools/views/root.css

@@ -40,6 +40,8 @@
   --light-color-component-name-inverted: #ffffff;
   --light-color-component-badge-background: rgba(0, 0, 0, 0.15);
   --light-color-component-badge-background-inverted: rgba(255, 255, 255, 0.25);
+  --light-color-component-badge-count: #777d88;
+  --light-color-component-badge-count-inverted: rgba(255, 255, 255, 0.7);
   --light-color-dim: #777d88;
   --light-color-dimmer: #cfd1d5;
   --light-color-dimmest: #eff0f1;
@@ -98,9 +100,11 @@
   --dark-color-commit-gradient-9: #febc38;
   --dark-color-commit-gradient-text: #000000;
   --dark-color-component-name: #61dafb;
-  --dark-color-component-name-inverted: ##282828;
+  --dark-color-component-name-inverted: #282828;
   --dark-color-component-badge-background: rgba(255, 255, 255, 0.25);
   --dark-color-component-badge-background-inverted: rgba(0, 0, 0, 0.25);
+  --dark-color-component-badge-count: #8f949d;
+  --dark-color-component-badge-count-inverted: rgba(255, 255, 255, 0.7);
   --dark-color-dim: #8f949d;
   --dark-color-dimmer: #777d88;
   --dark-color-dimmest: #4f5766;