From abc8ef3d5da8652e4741212d4da0d3fc72d70451 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 18 Jun 2019 11:37:29 -0700
Subject: [PATCH] Display unnamed custom hooks as 'Anonymous'

---
 src/devtools/views/Components/HooksTree.css | 11 +++++++++--
 src/devtools/views/Components/HooksTree.js  | 14 ++++++++++----
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/devtools/views/Components/HooksTree.css b/src/devtools/views/Components/HooksTree.css
index d82764c479..1304c276cc 100644
--- a/src/devtools/views/Components/HooksTree.css
+++ b/src/devtools/views/Components/HooksTree.css
@@ -24,11 +24,18 @@
   display: flex;
 }
 
-.Name {
-  color: var(--color-dim);
+.Name,
+.NameAnonymous {
   flex: 0 0 auto;
   user-select: none;
 }
+.Name {
+  color: var(--color-dim);
+}
+.NameAnonymous {
+  color: var(--color-dimmer);
+}
+
 .EditableName {
   color: var(--color-attribute-name);
   flex: 0 0 auto;
diff --git a/src/devtools/views/Components/HooksTree.js b/src/devtools/views/Components/HooksTree.js
index d1ab04778f..0c3b3e79b2 100644
--- a/src/devtools/views/Components/HooksTree.js
+++ b/src/devtools/views/Components/HooksTree.js
@@ -176,8 +176,11 @@ function HookView({
         <div className={styles.Hook}>
           <div className={styles.NameValueRow}>
             <ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
-            <span onClick={toggleIsOpen} className={styles.Name}>
-              {name}
+            <span
+              onClick={toggleIsOpen}
+              className={name !== '' ? styles.Name : styles.NameAnonymous}
+            >
+              {name || 'Anonymous'}
             </span>
           </div>
           <div className={styles.Children} hidden={!isOpen}>
@@ -197,8 +200,11 @@ function HookView({
         <div className={styles.Hook}>
           <div className={styles.NameValueRow}>
             <ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
-            <span onClick={toggleIsOpen} className={styles.Name}>
-              {name}
+            <span
+              onClick={toggleIsOpen}
+              className={name !== '' ? styles.Name : styles.NameAnonymous}
+            >
+              {name || 'Anonymous'}
             </span>{' '}
             {/* $FlowFixMe */}
             <span className={styles.Value}>{displayValue}</span>