From ec89ae88b69b5c111ae468ba90d2f8feed2eaabb Mon Sep 17 00:00:00 2001
From: Subhan <subhan.naeem@smartface.io>
Date: Mon, 13 May 2019 18:57:24 +0200
Subject: [PATCH] Changes display of ForwardRef and Memo components

---
 src/backend/renderer.js                   |  4 ++--
 src/devtools/views/Components/Element.css | 10 ++++++++++
 src/devtools/views/Components/Element.js  | 13 ++++++++++++-
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/backend/renderer.js b/src/backend/renderer.js
index b76ce8a7d6..cafe9b703b 100644
--- a/src/backend/renderer.js
+++ b/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);
diff --git a/src/devtools/views/Components/Element.css b/src/devtools/views/Components/Element.css
index da7a214de5..ed1176739e 100644
--- a/src/devtools/views/Components/Element.css
+++ b/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);
+}
\ No newline at end of file
diff --git a/src/devtools/views/Components/Element.js b/src/devtools/views/Components/Element.js
index 79b015e85c..0f3bb34a7a 100644
--- a/src/devtools/views/Components/Element.js
+++ b/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>
   );
 }