Added HOC badge to owners stack breadcrumbs
Brian Vaughn committed
Jun 1, 2019 at 18:05 UTC
6a69a6e9918dfdcc63b41312ebe9982789953bae
5 files changed
+29
-3
src/devtools/views/Components/Element.css
+2
-2
@@ -38,8 +38,8 @@
38
--color-component-badge-background-inverted
39
);
40
--color-jsx-arrow-brackets: var(--color-jsx-arrow-brackets-inverted);
41
- --color-attribute-name: var(--color-background-hover);
42
- --color-attribute-value: var(--color-component-name-inverted);
41
+ --color-attribute-name: var(--color-attribute-name-inverted);
42
+ --color-attribute-value: var(--color-attribute-value-inverted);
43
--color-expand-collapse-toggle: var(--color-component-name-inverted);
44
}
45
src/devtools/views/Components/OwnersStack.css
+6
@@ -13,6 +13,8 @@
13
font-size: var(--font-size-monospace-normal);
14
user-select: none;
15
white-space: nowrap;
16
+ display: flex;
17
+ align-items: center;
18
}
19
20
.Component[data-reach-menu-item][data-selected],
@@ -96,3 +98,7 @@
98
.NotInStore:hover {
99
color: var(--color-dimmest);
100
}
101
+
102
+.Badge {
103
+ margin-left: 0.25rem;
104
+}
\ No newline at end of file
src/devtools/views/Components/OwnersStack.js
+15
-1
@@ -13,10 +13,12 @@ import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
13
import Button from '../Button';
14
import ButtonIcon from '../ButtonIcon';
15
import Toggle from '../Toggle';
16
+import Badge from './Badge';
17
import { OwnersListContext } from './OwnersListContext';
18
import { TreeDispatcherContext, TreeStateContext } from './TreeContext';
19
import { useIsOverflowing } from '../hooks';
20
import { StoreContext } from '../context';
21
+import { ElementTypeMemo, ElementTypeForwardRef } from 'src/types';
22
23
import type { Owner } from './types';
24
@@ -237,7 +239,7 @@ type ElementViewProps = {
239
function ElementView({ isSelected, owner, selectOwner }: ElementViewProps) {
240
const store = useContext(StoreContext);
241
240
- const { displayName } = owner;
242
+ const { displayName, hocDisplayNames, type } = owner;
243
const isInStore = store.containsElement(owner.id);
244
245
const handleChange = useCallback(() => {
@@ -246,6 +248,16 @@ function ElementView({ isSelected, owner, selectOwner }: ElementViewProps) {
248
}
249
}, [isInStore, selectOwner, owner]);
250
251
+ // TODO Maybe factor this into a shared util method?
252
+ let badge = null;
253
+ if (hocDisplayNames !== null) {
254
+ badge = hocDisplayNames.length === 1 ? hocDisplayNames[0] : '…';
255
+ } else if (type === ElementTypeMemo) {
256
+ badge = 'Memo';
257
+ } else if (type === ElementTypeForwardRef) {
258
+ badge = 'ForwardRef';
259
+ }
260
+
261
return (
262
<Toggle
263
className={`${styles.Component} ${isInStore ? '' : styles.NotInStore}`}
@@ -253,6 +265,8 @@ function ElementView({ isSelected, owner, selectOwner }: ElementViewProps) {
265
onChange={handleChange}
266
>
267
{displayName}
268
+
269
+ <Badge className={styles.Badge}>{badge}</Badge>
270
</Toggle>
271
);
272
}
src/devtools/views/Settings/SettingsContext.js
+2
@@ -200,7 +200,9 @@ function updateThemeVariables(
200
documentElements: DocumentElements
201
): void {
202
updateStyleHelper(theme, 'color-attribute-name', documentElements);
203
+ updateStyleHelper(theme, 'color-attribute-name-inverted', documentElements);
204
updateStyleHelper(theme, 'color-attribute-value', documentElements);
205
+ updateStyleHelper(theme, 'color-attribute-value-inverted', documentElements);
206
updateStyleHelper(theme, 'color-attribute-editable-value', documentElements);
207
updateStyleHelper(theme, 'color-background', documentElements);
208
updateStyleHelper(theme, 'color-background-hover', documentElements);
src/devtools/views/root.css
+4
@@ -5,7 +5,9 @@
5
6
/* Light theme */
7
--light-color-attribute-name: #ef6632;
8
+ --light-color-attribute-name-inverted: rgba(255, 255, 255, 0.7);
9
--light-color-attribute-value: #1a1aa6;
10
+ --light-color-attribute-value-inverted: #ffffff;
11
--light-color-attribute-editable-value: #1a1aa6;
12
--light-color-background: #ffffff;
13
--light-color-background-hover: rgba(0, 136, 250, 0.1);
@@ -64,7 +66,9 @@
66
67
/* Dark theme */
68
--dark-color-attribute-name: #9d87d2;
69
+ --dark-color-attribute-name-inverted: #282828;
70
--dark-color-attribute-value: #cedae0;
71
+ --dark-color-attribute-value-inverted: #ffffff;
72
--dark-color-attribute-editable-value: yellow;
73
--dark-color-background: #282c34;
74
--dark-color-background-hover: rgba(255, 255, 255, 0.1);