Display unnamed custom hooks as 'Anonymous'

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;

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>