Changes display of ForwardRef and Memo components

src/backend/renderer.js

@@ -462,7 +462,7 @@ export function attach(
         const functionName = getDisplayName(resolvedType.render, '');
         return (
           resolvedType.displayName ||
-          (functionName !== '' ? `ForwardRef(${functionName})` : 'ForwardRef')
+          (functionName !== '' ? functionName : 'ForwardRef')
         );
       case HostRoot:
         return null;
@@ -478,7 +478,7 @@ export function attach(
           return elementType.displayName;
         } else {
           const displayName = type.displayName || type.name;
-          return displayName ? `Memo(${displayName})` : 'Memo';
+          return displayName ? displayName : 'Memo';
         }
       default:
         const typeSymbol = getTypeSymbol(type);

src/devtools/views/Components/Element.css

@@ -73,3 +73,13 @@
   height: 1rem;
   color: var(--color-expand-collapse-toggle);
 }
+
+.Badge{
+  background: var(--color-component-name);
+  color: #000;
+  line-height: calc(var(--line-height-data) - 0.25rem);
+  padding: 0 0.55rem;
+  border-radius: 5px;
+  margin-left: 0.5rem;
+  font-size: calc(var(--font-size-monospace-normal) - 2px);
+}

src/devtools/views/Components/Element.js

@@ -9,7 +9,12 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { ElementTypeClass, ElementTypeFunction } from 'src/types';
+import {
+  ElementTypeClass,
+  ElementTypeFunction,
+  ElementTypeMemo,
+  ElementTypeForwardRef,
+} from 'src/types';
 import Store from 'src/devtools/store';
 import ButtonIcon from '../ButtonIcon';
 import { createRegExp } from '../utils';
@@ -134,6 +139,7 @@ export default function ElementView({ data, index, style }: Props) {
 
   const showDollarR =
     isSelected && (type === ElementTypeClass || type === ElementTypeFunction);
+  const showBadge = type === ElementTypeMemo || type === ElementTypeForwardRef;
 
   let className = styles.Element;
   if (isSelected) {
@@ -182,6 +188,11 @@ export default function ElementView({ data, index, style }: Props) {
       </span>
       {showDollarR && <span className={styles.DollarR}>&nbsp;== $r</span>}
       <span className={styles.ScrollAnchor} ref={scrollAnchorEndRef} />
+      {showBadge && (
+        <span className={styles.Badge}>
+          {type === ElementTypeMemo ? 'Memo' : 'ForwardRef'}
+        </span>
+      )}
     </div>
   );
 }