Style, theme, and button CSS cleanup
Brian Vaughn committed
Feb 14, 2019 at 13:20 UTC
b167dd339bc84a22e4c96b36977512af676b09f0
13 files changed
+141
-203
src/devtools/views/Button.css
new
+26
@@ -0,0 +1,26 @@
1
+.Button {
2
+ border: none;
3
+ background: var(--color-button-background);
4
+ color: var(--color-button);
5
+ border-radius: 0.25rem;
6
+ display: inline-flex;
7
+ align-items: center;
8
+ padding: 0.25rem;
9
+ cursor: pointer;
10
+ flex: 0 0 auto;
11
+}
12
+.Button:hover {
13
+ background: var(--color-button-background-hover);
14
+ color: var(--color-button-hover);
15
+}
16
+.Button:active,
17
+.Button:focus {
18
+ background: var(--color-button-background-focus);
19
+ color: var(--color-button-focus);
20
+ outline: none;
21
+}
22
+.Button:disabled {
23
+ background: var(--color-button-background);
24
+ color: var(--color-button-disabled);
25
+ cursor: default;
26
+}
src/devtools/views/Button.js
new
+13
@@ -0,0 +1,13 @@
1
+// @flow
2
+
3
+import React from 'react';
4
+
5
+import styles from './Button.css';
6
+
7
+type Props = {
8
+ className?: string,
9
+};
10
+
11
+export default function Button({ className, ...rest }: Props) {
12
+ return <button className={`${styles.Button} ${className || ''}`} {...rest} />;
13
+}
src/devtools/views/Element.css
+4
-7
@@ -18,16 +18,13 @@
18
19
/* Invert colors */
20
--color-component-name: var(--color-component-name-inverted);
21
- --color-arrow: var(--color-arrow-inverted);
22
- --color-tree-jsx-arrow-brackets: var(
23
- --color-tree-jsx-arrow-brackets-inverted
24
- );
21
+ --color-jsx-arrow-brackets: var(--color-jsx-arrow-brackets-inverted);
22
--color-attribute-name: var(--color-tree-node-hover);
23
--color-attribute-value: var(--color-component-name-inverted);
24
}
25
26
.DollarR {
30
- color: var(--color-tree-jsx-arrow-brackets);
27
+ color: var(--color-jsx-arrow-brackets);
28
}
29
30
.Component {
@@ -36,12 +33,12 @@
33
.Component:before {
34
white-space: nowrap;
35
content: '<';
39
- color: var(--color-tree-jsx-arrow-brackets);
36
+ color: var(--color-jsx-arrow-brackets);
37
}
38
.Component:after {
39
white-space: nowrap;
40
content: '>';
44
- color: var(--color-tree-jsx-arrow-brackets);
41
+ color: var(--color-jsx-arrow-brackets);
42
}
43
44
.AttributeName {
src/devtools/views/OwnersStack.css
-18
@@ -5,24 +5,6 @@
5
overflow-x: auto;
6
}
7
8
-.IconButton {
9
- border: none;
10
- background: none;
11
- display: inline-flex;
12
- align-items: center;
13
- padding: 0.25rem;
14
- cursor: pointer;
15
- color: var(--color-button);
16
- flex: 0 0 auto;
17
-}
18
-.IconButton:hover {
19
- color: var(--color-button-hover);
20
-}
21
-.IconButton:disabled {
22
- color: var(--color-dimmer);
23
- cursor: default;
24
-}
25
-
8
.Component,
9
.FocusedComponent {
10
padding: 0.25rem;
src/devtools/views/OwnersStack.js
+3
-2
@@ -1,6 +1,7 @@
1
// @flow
2
3
import React, { useCallback, useContext } from 'react';
4
+import Button from './Button';
5
import ButtonIcon from './ButtonIcon';
6
import { TreeContext } from './TreeContext';
7
import { StoreContext } from './context';
@@ -19,13 +20,13 @@ export default function OwnerStack() {
20
21
return (
22
<div className={styles.OwnerStack}>
22
- <button
23
+ <Button
24
className={styles.IconButton}
25
onClick={resetOwnerStack}
26
title="Back to tree view"
27
>
28
<ButtonIcon type="close" />
28
- </button>
29
+ </Button>
30
<div className={styles.VRule} />
31
{elements}
32
</div>
src/devtools/views/SearchInput.css
-18
@@ -25,24 +25,6 @@
25
font-size: var(--font-size-sans-normal);
26
}
27
28
-.IconButton {
29
- border: none;
30
- background: none;
31
- display: inline-flex;
32
- align-items: center;
33
- padding: 0.25rem;
34
- cursor: pointer;
35
- color: var(--color-button);
36
- flex: 0 0 auto;
37
-}
38
-.IconButton:hover {
39
- color: var(--color-button-hover);
40
-}
41
-.IconButton:disabled {
42
- color: var(--color-dimmer);
43
- cursor: default;
44
-}
45
-
28
.LeftVRule,
29
.RightVRule {
30
height: 20px;
src/devtools/views/SearchInput.js
+7
-6
@@ -2,6 +2,7 @@
2
3
import React, { useCallback, useContext, useEffect, useRef } from 'react';
4
import { TreeContext } from './TreeContext';
5
+import Button from './Button';
6
import ButtonIcon from './ButtonIcon';
7
import Icon from './Icon';
8
@@ -74,30 +75,30 @@ export default function SearchInput(props: Props) {
75
</span>
76
)}
77
<div className={styles.LeftVRule} />
77
- <button
78
+ <Button
79
className={styles.IconButton}
80
disabled={!searchText}
81
onClick={goToPreviousSearchResult}
82
title="Scroll to previous search result"
83
>
84
<ButtonIcon type="up" />
84
- </button>
85
- <button
85
+ </Button>
86
+ <Button
87
className={styles.IconButton}
88
disabled={!searchText}
89
onClick={goToNextSearchResult}
90
title="Scroll to next search result"
91
>
92
<ButtonIcon type="down" />
92
- </button>
93
- <button
93
+ </Button>
94
+ <Button
95
className={styles.IconButton}
96
disabled={!searchText}
97
onClick={resetSearch}
98
title="Reset search"
99
>
100
<ButtonIcon type="close" />
100
- </button>
101
+ </Button>
102
<div className={styles.RightVRule} />
103
</div>
104
);
src/devtools/views/SelectedElement.css
+2
-16
@@ -16,20 +16,6 @@
16
padding: 0.5rem;
17
}
18
19
-.IconButton {
20
- flex: 0 0 auto;
21
- border: none;
22
- background: none;
23
- display: inline-flex;
24
- align-items: center;
25
- padding: 0.25rem;
26
- cursor: pointer;
27
- color: var(--color-button);
28
-}
29
-.IconButton:hover {
30
- color: var(--color-button-hover);
31
-}
32
-
19
.SelectedComponentName {
20
flex: 1 1 auto;
21
overflow: hidden;
@@ -51,13 +37,13 @@
37
.Owner:before {
38
white-space: nowrap;
39
content: '<';
54
- color: var(--color-tree-jsx-arrow-brackets);
40
+ color: var(--color-jsx-arrow-brackets);
41
}
42
.Component:after,
43
.Owner:after {
44
white-space: nowrap;
45
content: '>';
60
- color: var(--color-tree-jsx-arrow-brackets);
46
+ color: var(--color-jsx-arrow-brackets);
47
}
48
49
.Component {
src/devtools/views/SelectedElement.js
+5
-4
@@ -9,6 +9,7 @@ import React, {
9
} from 'react';
10
import { TreeContext } from './TreeContext';
11
import { BridgeContext, StoreContext } from './context';
12
+import Button from './Button';
13
import ButtonIcon from './ButtonIcon';
14
import HooksTree from './HooksTree';
15
import InspectedElementTree from './InspectedElementTree';
@@ -64,20 +65,20 @@ export default function SelectedElement(_: Props) {
65
</div>
66
</div>
67
67
- <button
68
+ <Button
69
className={styles.IconButton}
70
onClick={handleClick}
71
title="Highlight this element in the page"
72
>
73
<ButtonIcon type="view-dom" />
73
- </button>
74
+ </Button>
75
{source !== null && (
75
- <button
76
+ <Button
77
className={styles.IconButton}
78
title="View source for this element"
79
>
80
<ButtonIcon type="view-source" />
80
- </button>
81
+ </Button>
82
)}
83
</div>
84
src/devtools/views/SettingsContext.js
+32
-76
@@ -103,86 +103,42 @@ function setStyleVariable(name: string, value: string) {
103
(document.documentElement: any).style.setProperty(name, value);
104
}
105
106
+function updateStyleHelper(themeKey: string, style: string) {
107
+ setStyleVariable(`--${style}`, `var(--${themeKey}-${style})`);
108
+}
109
+
110
function updateDisplayDensity(displayDensity: DisplayDensity): void {
107
- setStyleVariable(
108
- '--font-size-monospace-normal',
109
- `var(--${displayDensity}-font-size-monospace-normal)`
110
- );
111
- setStyleVariable(
112
- '--font-size-monospace-large',
113
- `var(--${displayDensity}-font-size-monospace-large)`
114
- );
115
- setStyleVariable(
116
- '--font-size-sans-normal',
117
- `var(--${displayDensity}-font-size-sans-normal)`
118
- );
119
- setStyleVariable(
120
- '--font-size-sans-large',
121
- `var(--${displayDensity}-font-size-sans-large)`
122
- );
123
- setStyleVariable(
124
- '--line-height-data',
125
- `var(--${displayDensity}-line-height-data)`
126
- );
111
+ updateStyleHelper(displayDensity, 'font-size-monospace-normal');
112
+ updateStyleHelper(displayDensity, 'font-size-monospace-large');
113
+ updateStyleHelper(displayDensity, 'font-size-sans-normal');
114
+ updateStyleHelper(displayDensity, 'font-size-sans-large');
115
+ updateStyleHelper(displayDensity, 'line-height-data');
116
}
117
118
function updateThemeVariables(theme: Theme): void {
130
- setStyleVariable('--color-arrow', `var(--theme-${theme}-arrow)`);
131
- setStyleVariable(
132
- '--color-arrow-inverted',
133
- `var(--theme-${theme}-arrow-inverted)`
134
- );
135
- setStyleVariable(
136
- '--color-attribute-name',
137
- `var(--theme-${theme}-attribute-name)`
138
- );
139
- setStyleVariable(
140
- '--color-attribute-value',
141
- `var(--theme-${theme}-attribute-value)`
142
- );
143
- setStyleVariable('--color-background', `var(--theme-${theme}-background)`);
144
- setStyleVariable('--color-border', `var(--theme-${theme}-color-border)`);
145
- setStyleVariable('--color-button', `var(--theme-${theme}-button)`);
146
- setStyleVariable(
147
- '--color-button-hover',
148
- `var(--theme-${theme}-button-hover)`
149
- );
150
- setStyleVariable(
151
- '--color-component-name',
152
- `var(--theme-${theme}-component-name)`
153
- );
154
- setStyleVariable(
155
- '--color-component-name-inverted',
156
- `var(--theme-${theme}-component-name-inverted)`
157
- );
158
- setStyleVariable('--color-dim', `var(--theme-${theme}-dim)`);
159
- setStyleVariable('--color-dimmer', `var(--theme-${theme}-dimmer)`);
160
- setStyleVariable('--color-dimmest', `var(--theme-${theme}-dimmest)`);
161
- setStyleVariable(
162
- '--color-search-match',
163
- `var(--theme-${theme}-search-match)`
164
- );
165
- setStyleVariable(
166
- '--color-search-match-current',
167
- `var(--theme-${theme}-search-match-current)`
168
- );
169
- setStyleVariable('--color-text-color', `var(--theme-${theme}-text-color)`);
170
- setStyleVariable(
171
- '--color-tree-jsx-arrow-brackets',
172
- `var(--theme-${theme}-jsx-arrow-brackets)`
173
- );
174
- setStyleVariable(
175
- '--color-tree-jsx-arrow-brackets-inverted',
176
- `var(--theme-${theme}-jsx-arrow-brackets-inverted)`
177
- );
178
- setStyleVariable(
179
- '--color-tree-node-selected',
180
- `var(--theme-${theme}-tree-node-selected)`
181
- );
182
- setStyleVariable(
183
- '--color-tree-node-hover',
184
- `var(--theme-${theme}-tree-node-hover)`
185
- );
119
+ updateStyleHelper(theme, 'color-attribute-name');
120
+ updateStyleHelper(theme, 'color-attribute-value');
121
+ updateStyleHelper(theme, 'color-background');
122
+ updateStyleHelper(theme, 'color-border');
123
+ updateStyleHelper(theme, 'color-button-background');
124
+ updateStyleHelper(theme, 'color-button-background-focus');
125
+ updateStyleHelper(theme, 'color-button-background-hover');
126
+ updateStyleHelper(theme, 'color-button');
127
+ updateStyleHelper(theme, 'color-button-disabled');
128
+ updateStyleHelper(theme, 'color-button-focus');
129
+ updateStyleHelper(theme, 'color-button-hover');
130
+ updateStyleHelper(theme, 'color-component-name');
131
+ updateStyleHelper(theme, 'color-component-name-inverted');
132
+ updateStyleHelper(theme, 'color-dim');
133
+ updateStyleHelper(theme, 'color-dimmer');
134
+ updateStyleHelper(theme, 'color-dimmest');
135
+ updateStyleHelper(theme, 'color-search-match');
136
+ updateStyleHelper(theme, 'color-search-match-current');
137
+ updateStyleHelper(theme, 'color-text-color');
138
+ updateStyleHelper(theme, 'color-jsx-arrow-brackets');
139
+ updateStyleHelper(theme, 'color-jsx-arrow-brackets-inverted');
140
+ updateStyleHelper(theme, 'color-tree-node-selected');
141
+ updateStyleHelper(theme, 'color-tree-node-hover');
142
}
143
144
export { SettingsContext, SettingsContextController };
src/devtools/views/Tree.css
-14
@@ -26,17 +26,3 @@
26
font-size: var(--font-size-monospace-normal);
27
line-height: var(--line-height-data);
28
}
29
-
30
-.IconButton {
31
- border: none;
32
- background: none;
33
- display: inline-flex;
34
- align-items: center;
35
- padding: 0.25rem;
36
- cursor: pointer;
37
- color: var(--color-button);
38
- flex: 0 0 auto;
39
-}
40
-.IconButton:hover {
41
- color: var(--color-button-hover);
42
-}
src/devtools/views/Tree.js
+3
-2
@@ -11,6 +11,7 @@ import AutoSizer from 'react-virtualized-auto-sizer';
11
import { FixedSizeList } from 'react-window';
12
import { TreeContext } from './TreeContext';
13
import { SettingsContext } from './SettingsContext';
14
+import Button from './Button';
15
import ButtonIcon from './ButtonIcon';
16
import Element from './Element';
17
import OwnersStack from './OwnersStack';
@@ -86,12 +87,12 @@ export default function Tree(props: Props) {
87
<div className={styles.Tree}>
88
<div className={styles.SearchInput}>
89
{ownerStack.length > 0 ? <OwnersStack /> : <SearchInput />}
89
- <button
90
+ <Button
91
className={styles.IconButton}
92
title="Select an element in the page to inspect it"
93
>
94
<ButtonIcon type="search" />
94
- </button>
95
+ </Button>
96
</div>
97
<div className={styles.AutoSizerWrapper}>
98
<AutoSizer>
src/devtools/views/root.css
+46
-40
@@ -4,48 +4,54 @@
4
*/
5
6
/* Light theme */
7
- --theme-light-arrow: #777d88;
8
- --theme-light-arrow-inverted: #ffffff;
9
- --theme-light-attribute-name: #ef6632;
10
- --theme-light-attribute-value: #1a1aa6;
11
- --theme-light-background: #ffffff;
12
- --theme-light-button: #0088fa;
13
- --theme-light-button-hover: #3578e5;
14
- --theme-light-color-border: #eeeeee;
15
- --theme-light-component-name: #8155cb;
16
- --theme-light-component-name-inverted: #ffffff;
17
- --theme-light-dim: #777d88;
18
- --theme-light-dimmer: #cfd1d5;
19
- --theme-light-dimmest: #eff0f1;
20
- --theme-light-jsx-arrow-brackets: #333333;
21
- --theme-light-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
22
- --theme-light-search-match: yellow;
23
- --theme-light-search-match-current: #f7923b;
24
- --theme-light-text-color: #000000;
25
- --theme-light-tree-node-selected: #0088fa;
26
- --theme-light-tree-node-hover: #ebf1fb;
7
+ --light-color-attribute-name: #ef6632;
8
+ --light-color-attribute-value: #1a1aa6;
9
+ --light-color-background: #ffffff;
10
+ --light-color-button-background: #ffffff;
11
+ --light-color-button-background-focus: #ebf1fb;
12
+ --light-color-button-background-hover: #ffffff;
13
+ --light-color-button: #0088fa;
14
+ --light-color-button-disabled: #cfd1d5;
15
+ --light-color-button-focus: #3578e5;
16
+ --light-color-button-hover: #3578e5;
17
+ --light-color-border: #eeeeee;
18
+ --light-color-component-name: #8155cb;
19
+ --light-color-component-name-inverted: #ffffff;
20
+ --light-color-dim: #777d88;
21
+ --light-color-dimmer: #cfd1d5;
22
+ --light-color-dimmest: #eff0f1;
23
+ --light-color-jsx-arrow-brackets: #333333;
24
+ --light-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
25
+ --light-color-search-match: yellow;
26
+ --light-color-search-match-current: #f7923b;
27
+ --light-color-text-color: #000000;
28
+ --light-color-tree-node-selected: #0088fa;
29
+ --light-color-tree-node-hover: #ebf1fb;
30
31
/* Dark theme */
29
- --theme-dark-arrow: #777d88;
30
- --theme-dark-arrow-inverted: #282828;
31
- --theme-dark-attribute-name: #9d87d2;
32
- --theme-dark-attribute-value: #cedae0;
33
- --theme-dark-background: #282c34;
34
- --theme-dark-button: #61dafb;
35
- --theme-dark-button-hover: #a2e9fc;
36
- --theme-dark-color-border: #3d424a;
37
- --theme-dark-component-name: #61dafb;
38
- --theme-dark-component-name-inverted: ##282828;
39
- --theme-dark-dim: #8f949d;
40
- --theme-dark-dimmer: #777d88;
41
- --theme-dark-dimmest: #4f5766;
42
- --theme-dark-jsx-arrow-brackets: #777d88;
43
- --theme-dark-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
44
- --theme-dark-search-match: yellow;
45
- --theme-dark-search-match-current: #f7923b;
46
- --theme-dark-text-color: #ffffff;
47
- --theme-dark-tree-node-selected: #178fb9;
48
- --theme-dark-tree-node-hover: #3d424a;
32
+ --dark-color-attribute-name: #9d87d2;
33
+ --dark-color-attribute-value: #cedae0;
34
+ --dark-color-background: #282c34;
35
+ --dark-color-button-background: #282c34;
36
+ --dark-color-button-background-focus: #3d424a;
37
+ --dark-color-button-background-hover: #282c34;
38
+ --dark-color-button: #61dafb;
39
+ --dark-color-button-disabled: #777d88;
40
+ --dark-color-button-focus: #a2e9fc;
41
+ --dark-color-button-hover: #a2e9fc;
42
+ --dark-color-border: #3d424a;
43
+ --dark-color-component-name: #61dafb;
44
+ --dark-color-component-name-inverted: ##282828;
45
+ --dark-color-dim: #8f949d;
46
+ --dark-color-dimmer: #777d88;
47
+ --dark-color-dimmest: #4f5766;
48
+ --dark-color-jsx-arrow-brackets: #777d88;
49
+ --dark-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
50
+ --dark-color-search-match: yellow;
51
+ --dark-color-search-match-current: #f7923b;
52
+ --dark-color-text-color: #ffffff;
53
+ --dark-color-tree-node-selected: #178fb9;
54
+ --dark-color-tree-node-hover: #3d424a;
55
56
/* Compact density */
57
--compact-font-size-monospace-normal: 11px;