Misc cleanup and prep for dark mode CSS
Brian Vaughn committed
Feb 12, 2019 at 09:45 UTC
8e5a35b7629bdc7dbd219910f1bf679c922e798c
9 files changed
+65
-14
src/devtools/views/ButtonIcon.css
-1
@@ -1,6 +1,5 @@
1
.ButtonIcon {
2
width: 1rem;
3
height: 1rem;
4
- margin: 0 0.25rem;
4
fill: currentColor;
5
}
src/devtools/views/Elements.css
+1
@@ -4,6 +4,7 @@
4
display: flex;
5
flex-direction: row;
6
background-color: var(--color-background);
7
+ color: var(--color-text-color);
8
font-family: var(--font-family-sans);
9
}
10
src/devtools/views/Icon.js
+12
-3
@@ -4,15 +4,19 @@ import React from 'react';
4
import styles from './Icon.css';
5
6
type Props = {|
7
- type: 'arrow',
7
+ className?: string,
8
+ type: 'arrow' | 'search',
9
|};
10
10
-export default function Icon({ type }: Props) {
11
+export default function Icon({ className = '', type }: Props) {
12
let pathData = null;
13
switch (type) {
14
case 'arrow':
15
pathData = PATH_ARROW;
16
break;
17
+ case 'search':
18
+ pathData = PATH_SEARCH;
19
+ break;
20
default:
21
console.warn(`Unsupported type "${type}" specified for Icon`);
22
break;
@@ -21,7 +25,7 @@ export default function Icon({ type }: Props) {
25
return (
26
<svg
27
xmlns="http://www.w3.org/2000/svg"
24
- className={styles.Icon}
28
+ className={`${styles.Icon} ${className}`}
29
width="24"
30
height="24"
31
viewBox="0 0 24 24"
@@ -33,3 +37,8 @@ export default function Icon({ type }: Props) {
37
}
38
39
const PATH_ARROW = 'M8 5v14l11-7z';
40
+const PATH_SEARCH = `
41
+ M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91
42
+ 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99
43
+ 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z
44
+`;
src/devtools/views/SearchInput.css
+8
-4
@@ -9,11 +9,15 @@
9
font-size: 1rem;
10
outline: none;
11
border: none;
12
- background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
13
- background-repeat: no-repeat;
14
- background-position: left center;
15
- background-size: 16px 16px;
12
+ background-color: var(--color-background);
13
+ color: var(--color-text-color);
14
padding-left: 1.5rem;
15
+ margin-left: -1rem;
16
+}
17
+
18
+.InputIcon {
19
+ pointer-events: none;
20
+ z-index: 2;
21
}
22
23
.IndexLabel {
src/devtools/views/SearchInput.js
+2
@@ -3,6 +3,7 @@
3
import React, { useCallback, useContext, useEffect, useRef } from 'react';
4
import { TreeContext } from './TreeContext';
5
import ButtonIcon from './ButtonIcon';
6
+import Icon from './Icon';
7
8
import styles from './SearchInput.css';
9
@@ -57,6 +58,7 @@ export default function SearchInput(props: Props) {
58
59
return (
60
<div className={styles.SearchInput}>
61
+ <Icon className={styles.InputIcon} type="search" />
62
<input
63
className={styles.Input}
64
onKeyPress={handleInputKeyPress}
src/devtools/views/SelectedElement.js
+6
-1
@@ -98,6 +98,7 @@ type InspectedElementViewProps = {|
98
99
function InspectedElementView({ inspectedElement }: InspectedElementViewProps) {
100
let { context, hooks, owners, props, state } = inspectedElement;
101
+ const { ownerStack } = useContext(TreeContext);
102
103
return (
104
<div className={styles.InspectedElement}>
@@ -106,7 +107,7 @@ function InspectedElementView({ inspectedElement }: InspectedElementViewProps) {
107
<HooksTree hooksTree={hooks} />
108
<InspectedElementTree label="context" data={context} />
109
109
- {owners !== null && owners.length > 0 && (
110
+ {ownerStack.length === 0 && owners !== null && owners.length > 0 && (
111
<div className={styles.Owners}>
112
<div>owner stack</div>
113
{owners.map(owner => (
@@ -182,10 +183,14 @@ function useInspectedElement(id: number | null): InspectedElement | null {
183
184
const onInspectedElement = (inspectedElement: InspectedElement) => {
185
if (inspectedElement && inspectedElement.id !== idRef.current) {
186
+ // TODO Is this sufficient? Will this leak?
187
// Ignore bridge updates about previously selected elements.
188
return;
189
}
190
191
+ // TODO I think there's a bug here with stale state or a bad listener.
192
+ // "Cannot read property 'inspectElement' of undefined"
193
+
194
if (inspectedElement !== null) {
195
inspectedElement.context = hydrateHelper(inspectedElement.context);
196
inspectedElement.hooks = hydrateHelper(inspectedElement.hooks);
src/devtools/views/Tree.js
+4
-1
@@ -80,7 +80,10 @@ export default function Tree(props: Props) {
80
);
81
82
const itemSize = parseInt(
83
- getComputedStyle(document.body).getPropertyValue('--line-height-data')
83
+ getComputedStyle((document.body: any)).getPropertyValue(
84
+ '--line-height-data'
85
+ ),
86
+ 10
87
);
88
89
return (
src/devtools/views/TreeContext.js
+8
-2
@@ -327,6 +327,8 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
327
_ownerFlatTree,
328
} = state;
329
330
+ let prevSelectedElementIndex = selectedElementIndex;
331
+
332
switch (type) {
333
case 'HANDLE_STORE_MUTATION':
334
if (ownerStack.length > 0) {
@@ -351,6 +353,7 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
353
case 'RESET_OWNER_STACK':
354
ownerStack = [];
355
ownerStackIndex = null;
356
+ selectedElementIndex = null;
357
_ownerFlatTree = null;
358
break;
359
case 'SELECT_ELEMENT_AT_INDEX':
@@ -383,6 +386,10 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
386
case 'SELECT_OWNER':
387
ownerStackIndex = ownerStack.indexOf(payload);
388
389
+ // Always force reset selection to be the top of the new owner tree.
390
+ selectedElementIndex = 0;
391
+ prevSelectedElementIndex = null;
392
+
393
// If this owner is already in the current stack, just select it.
394
// Otherwise, create a new stack.
395
if (ownerStackIndex < 0) {
@@ -396,7 +403,6 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
403
): any): Element).ownerID;
404
}
405
ownerStackIndex = ownerStack.length - 1;
399
- selectedElementIndex = 0;
406
407
if (searchText !== '') {
408
searchIndex = null;
@@ -435,7 +441,7 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
441
}
442
443
// Keep selected item ID and index in sync.
438
- if (selectedElementIndex !== state.selectedElementIndex) {
444
+ if (selectedElementIndex !== prevSelectedElementIndex) {
445
if (selectedElementIndex === null) {
446
selectedElementID = null;
447
} else if (_ownerFlatTree !== null) {
src/devtools/views/root.css
+24
-2
@@ -16,11 +16,32 @@
16
--theme-light-jsx-arrow-brackets: #333333;
17
--theme-light-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
18
--theme-light-search-match: yellow;
19
- --theme-light-search-match-current: orange;
19
+ --theme-light-search-match-current: #f7923b;
20
+ --theme-light-text-color: #000000;
21
--theme-light-tree-node-selected: #0088fa;
22
--theme-light-tree-node-hover: #ebf1fb;
23
23
- /* TODO Dark theme */
24
+ /* Dark theme */
25
+ --theme-dark-arrow: #777d88;
26
+ --theme-dark-arrow-inverted: #23272f;
27
+ --theme-dark-attribute-name: #9d87d2;
28
+ --theme-dark-attribute-value: #cedae0;
29
+ --theme-dark-background: #23272f;
30
+ --theme-dark-button: #4dbba6;
31
+ --theme-dark-button-hover: #80d4c4;
32
+ --theme-dark-color-border: #303846;
33
+ --theme-dark-component-name: #4dbba6;
34
+ --theme-dark-component-name-inverted: ##23272f;
35
+ --theme-dark-dim: #8f949d;
36
+ --theme-dark-dimmer: #777d88;
37
+ --theme-dark-dimmest: #4f5766;
38
+ --theme-dark-jsx-arrow-brackets: #777d88;
39
+ --theme-dark-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
40
+ --theme-dark-search-match: yellow;
41
+ --theme-dark-search-match-current: #f7923b;
42
+ --theme-dark-text-color: #ffffff;
43
+ --theme-dark-tree-node-selected: #31a38d;
44
+ --theme-dark-tree-node-hover: #23272f;
45
46
/* "theme" values referenced by other stylesheets */
47
--color-arrow: var(--theme-light-arrow);
@@ -38,6 +59,7 @@
59
--color-dimmest: var(--theme-light-dimmest);
60
--color-search-match: var(--theme-light-search-match);
61
--color-search-match-current: var(--theme-light-search-match-current);
62
+ --color-text-color: var(--theme-light-text-color);
63
--color-tree-jsx-arrow-brackets: var(--theme-light-jsx-arrow-brackets);
64
--color-tree-jsx-arrow-brackets-inverted: var(
65
--theme-light-jsx-arrow-brackets-inverted