Display unnamed custom hooks as 'Anonymous'
Brian Vaughn committed
Jun 18, 2019 at 11:37 UTC
abc8ef3d5da8652e4741212d4da0d3fc72d70451
2 files changed
+19
-6
src/devtools/views/Components/HooksTree.css
+9
-2
@@ -24,11 +24,18 @@
24
display: flex;
25
}
26
27
-.Name {
28
- color: var(--color-dim);
27
+.Name,
28
+.NameAnonymous {
29
flex: 0 0 auto;
30
user-select: none;
31
}
32
+.Name {
33
+ color: var(--color-dim);
34
+}
35
+.NameAnonymous {
36
+ color: var(--color-dimmer);
37
+}
38
+
39
.EditableName {
40
color: var(--color-attribute-name);
41
flex: 0 0 auto;
src/devtools/views/Components/HooksTree.js
+10
-4
@@ -176,8 +176,11 @@ function HookView({
176
<div className={styles.Hook}>
177
<div className={styles.NameValueRow}>
178
<ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
179
- <span onClick={toggleIsOpen} className={styles.Name}>
180
- {name}
179
+ <span
180
+ onClick={toggleIsOpen}
181
+ className={name !== '' ? styles.Name : styles.NameAnonymous}
182
+ >
183
+ {name || 'Anonymous'}
184
</span>
185
</div>
186
<div className={styles.Children} hidden={!isOpen}>
@@ -197,8 +200,11 @@ function HookView({
200
<div className={styles.Hook}>
201
<div className={styles.NameValueRow}>
202
<ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
200
- <span onClick={toggleIsOpen} className={styles.Name}>
201
- {name}
203
+ <span
204
+ onClick={toggleIsOpen}
205
+ className={name !== '' ? styles.Name : styles.NameAnonymous}
206
+ >
207
+ {name || 'Anonymous'}
208
</span>{' '}
209
{/* $FlowFixMe */}
210
<span className={styles.Value}>{displayValue}</span>