Show indent lines preference
Brian Vaughn committed
May 30, 2019 at 14:30 UTC
c0f686eed9bf18d3015160229145e829f31a66cc
4 files changed
+43
-7
src/devtools/views/Components/Element.js
+5
-3
@@ -48,9 +48,10 @@ export default function ElementView({ data, index, style }: Props) {
48
49
const {
50
lastScrolledIDRef,
51
- treeFocused,
51
isNavigatingWithKeyboard,
52
onElementMouseEnter,
53
+ showIndentLines,
54
+ treeFocused,
55
} = data;
56
const id = element === null ? null : element.id;
57
const isSelected = selectedElementID === id;
@@ -179,8 +180,9 @@ export default function ElementView({ data, index, style }: Props) {
180
height: '100%',
181
backgroundSize: '0.75rem 1rem',
182
backgroundColor: 'transparent',
182
- backgroundImage:
183
- 'linear-gradient(to right, transparent 8px, var(--color-guideline) 8px, transparent 9px)',
183
+ backgroundImage: showIndentLines
184
+ ? 'linear-gradient(to right, transparent 8px, var(--color-guideline) 8px, transparent 9px)'
185
+ : '',
186
backgroundRepeat: 'repeat',
187
}}
188
/>
src/devtools/views/Components/Tree.js
+4
-1
@@ -32,6 +32,7 @@ export type ItemData = {|
32
isNavigatingWithKeyboard: boolean,
33
lastScrolledIDRef: { current: number | null },
34
onElementMouseEnter: (id: number) => void,
35
+ showIndentLines: boolean,
36
treeFocused: boolean,
37
|};
38
@@ -59,7 +60,7 @@ export default function Tree(props: Props) {
60
61
const [treeFocused, setTreeFocused] = useState<boolean>(false);
62
62
- const { lineHeight } = useContext(SettingsContext);
63
+ const { lineHeight, showIndentLines } = useContext(SettingsContext);
64
65
// Make sure a newly selected element is visible in the list.
66
// This is helpful for things like the owners list and search.
@@ -263,6 +264,7 @@ export default function Tree(props: Props) {
264
isNavigatingWithKeyboard,
265
onElementMouseEnter: handleElementMouseEnter,
266
lastScrolledIDRef,
267
+ showIndentLines,
268
treeFocused,
269
}),
270
[
@@ -270,6 +272,7 @@ export default function Tree(props: Props) {
272
isNavigatingWithKeyboard,
273
handleElementMouseEnter,
274
lastScrolledIDRef,
275
+ showIndentLines,
276
treeFocused,
277
]
278
);
src/devtools/views/Settings/Settings.js
+23
-3
@@ -11,9 +11,14 @@ import styles from './Settings.css';
11
12
function Settings(_: {||}) {
13
const store = useContext(StoreContext);
14
- const { displayDensity, setDisplayDensity, theme, setTheme } = useContext(
15
- SettingsContext
16
- );
14
+ const {
15
+ displayDensity,
16
+ setDisplayDensity,
17
+ showIndentLines,
18
+ setShowIndentLines,
19
+ theme,
20
+ setTheme,
21
+ } = useContext(SettingsContext);
22
23
const captureScreenshotsSubscription = useMemo(
24
() => ({
@@ -57,6 +62,13 @@ function Settings(_: {||}) {
62
[setTheme]
63
);
64
65
+ const updateShowIndentLines = useCallback(
66
+ ({ currentTarget }) => {
67
+ setShowIndentLines(currentTarget.checked);
68
+ },
69
+ [setShowIndentLines]
70
+ );
71
+
72
const updateCaptureScreenshotsWhileProfiling = useCallback(
73
({ currentTarget }) => {
74
store.captureScreenshots = currentTarget.checked;
@@ -143,6 +155,14 @@ function Settings(_: {||}) {
155
/>{' '}
156
Collapse newly added components by default
157
</label>
158
+ <label className={styles.CheckboxOption}>
159
+ <input
160
+ type="checkbox"
161
+ checked={showIndentLines}
162
+ onChange={updateShowIndentLines}
163
+ />{' '}
164
+ Show indent lines
165
+ </label>
166
</div>
167
168
{store.supportsCaptureScreenshots && (
src/devtools/views/Settings/SettingsContext.js
+11
@@ -16,6 +16,9 @@ type Context = {|
16
// Specified as a separate prop so it can trigger a re-render of FixedSizeList.
17
lineHeight: number,
18
19
+ showIndentLines: boolean,
20
+ setShowIndentLines: (value: boolean) => void,
21
+
22
theme: Theme,
23
setTheme(value: Theme): void,
24
|};
@@ -44,6 +47,10 @@ function SettingsContextController({
47
'React::DevTools::displayDensity',
48
'compact'
49
);
50
+ const [showIndentLines, setShowIndentLines] = useLocalStorage<boolean>(
51
+ 'React::DevTools::showIndentLines',
52
+ true
53
+ );
54
const [theme, setTheme] = useLocalStorage<Theme>(
55
'React::DevTools::theme',
56
'auto'
@@ -126,6 +133,8 @@ function SettingsContextController({
133
setDisplayDensity,
134
theme,
135
setTheme,
136
+ showIndentLines,
137
+ setShowIndentLines,
138
lineHeight:
139
displayDensity === 'compact'
140
? compactLineHeight
@@ -135,7 +144,9 @@ function SettingsContextController({
144
comfortableLineHeight,
145
compactLineHeight,
146
displayDensity,
147
+ showIndentLines,
148
setDisplayDensity,
149
+ setShowIndentLines,
150
setTheme,
151
theme,
152
]