Revert "Re-added indent lines"
This reverts commit 33432b037f2e539b3e7c479e594960e6fd60eaa3.
Brian Vaughn committed
May 31, 2019 at 14:41 UTC
19d95a1368076a5065449b6207d9b2351c1e9c44
4 files changed
+12
-61
src/devtools/views/Components/Element.js
+8
-23
@@ -39,12 +39,7 @@ export default function ElementView({ data, index, style }: Props) {
39
40
const [isHovered, setIsHovered] = useState(false);
41
42
- const {
43
- isNavigatingWithKeyboard,
44
- onElementMouseEnter,
45
- showIndentLines,
46
- treeFocused,
47
- } = data;
42
+ const { isNavigatingWithKeyboard, onElementMouseEnter, treeFocused } = data;
43
const id = element === null ? null : element.id;
44
const isSelected = selectedElementID === id;
45
@@ -105,24 +100,14 @@ export default function ElementView({ data, index, style }: Props) {
100
onMouseLeave={handleMouseLeave}
101
onMouseDown={handleMouseDown}
102
onDoubleClick={handleDoubleClick}
108
- style={style}
109
- >
110
- {depth > 0 && (
111
- <div
112
- style={{
113
- flex: `0 0 calc(${depth} * var(--indentation-size) - 0.5rem)`,
114
- marginLeft: '0.5rem', // Offset to align with collapse toggle
115
- height: '100%',
116
- backgroundSize: 'var(--indentation-size) 1rem',
117
- backgroundColor: 'transparent',
118
- backgroundRepeat: 'repeat',
119
- backgroundImage: showIndentLines
120
- ? 'linear-gradient(to right, var(--color-guideline) 0, transparent 1px'
121
- : '',
122
- }}
123
- />
124
- )}
103
+ style={{
104
+ ...style, // "style" comes from react-window
105
106
+ // Left padding presents the appearance of a nested tree structure.
107
+ // We must use padding rather than margin/left because of the selected background color.
108
+ paddingLeft: `calc(${depth} * var(--indentation-size))`,
109
+ }}
110
+ >
111
{ownerID === null ? (
112
<ExpandCollapseToggle element={element} store={store} />
113
) : null}
src/devtools/views/Components/Tree.js
+1
-4
@@ -32,7 +32,6 @@ export type ItemData = {|
32
isNavigatingWithKeyboard: boolean,
33
lastScrolledIDRef: { current: number | null },
34
onElementMouseEnter: (id: number) => void,
35
- showIndentLines: boolean,
35
treeFocused: boolean,
36
|};
37
@@ -60,7 +59,7 @@ export default function Tree(props: Props) {
59
60
const [treeFocused, setTreeFocused] = useState<boolean>(false);
61
63
- const { lineHeight, showIndentLines } = useContext(SettingsContext);
62
+ const { lineHeight } = useContext(SettingsContext);
63
64
// Make sure a newly selected element is visible in the list.
65
// This is helpful for things like the owners list and search.
@@ -264,7 +263,6 @@ export default function Tree(props: Props) {
263
isNavigatingWithKeyboard,
264
onElementMouseEnter: handleElementMouseEnter,
265
lastScrolledIDRef,
267
- showIndentLines,
266
treeFocused,
267
}),
268
[
@@ -272,7 +270,6 @@ export default function Tree(props: Props) {
270
isNavigatingWithKeyboard,
271
handleElementMouseEnter,
272
lastScrolledIDRef,
275
- showIndentLines,
273
treeFocused,
274
]
275
);
src/devtools/views/Settings/Settings.js
+3
-23
@@ -11,14 +11,9 @@ import styles from './Settings.css';
11
12
function Settings(_: {||}) {
13
const store = useContext(StoreContext);
14
- const {
15
- displayDensity,
16
- setDisplayDensity,
17
- showIndentLines,
18
- setShowIndentLines,
19
- theme,
20
- setTheme,
21
- } = useContext(SettingsContext);
14
+ const { displayDensity, setDisplayDensity, theme, setTheme } = useContext(
15
+ SettingsContext
16
+ );
17
18
const captureScreenshotsSubscription = useMemo(
19
() => ({
@@ -62,13 +57,6 @@ function Settings(_: {||}) {
57
[setTheme]
58
);
59
65
- const updateShowIndentLines = useCallback(
66
- ({ currentTarget }) => {
67
- setShowIndentLines(currentTarget.checked);
68
- },
69
- [setShowIndentLines]
70
- );
71
-
60
const updateCaptureScreenshotsWhileProfiling = useCallback(
61
({ currentTarget }) => {
62
store.captureScreenshots = currentTarget.checked;
@@ -155,14 +143,6 @@ function Settings(_: {||}) {
143
/>{' '}
144
Collapse newly added components by default
145
</label>
158
- <label className={styles.CheckboxOption}>
159
- <input
160
- type="checkbox"
161
- checked={showIndentLines}
162
- onChange={updateShowIndentLines}
163
- />{' '}
164
- Show indent lines
165
- </label>
146
</div>
147
148
{store.supportsCaptureScreenshots && (
src/devtools/views/Settings/SettingsContext.js
-11
@@ -16,9 +16,6 @@ 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
-
19
theme: Theme,
20
setTheme(value: Theme): void,
21
|};
@@ -47,10 +44,6 @@ function SettingsContextController({
44
'React::DevTools::displayDensity',
45
'compact'
46
);
50
- const [showIndentLines, setShowIndentLines] = useLocalStorage<boolean>(
51
- 'React::DevTools::showIndentLines',
52
- true
53
- );
47
const [theme, setTheme] = useLocalStorage<Theme>(
48
'React::DevTools::theme',
49
'auto'
@@ -133,8 +126,6 @@ function SettingsContextController({
126
setDisplayDensity,
127
theme,
128
setTheme,
136
- showIndentLines,
137
- setShowIndentLines,
129
lineHeight:
130
displayDensity === 'compact'
131
? compactLineHeight
@@ -144,9 +135,7 @@ function SettingsContextController({
135
comfortableLineHeight,
136
compactLineHeight,
137
displayDensity,
147
- showIndentLines,
138
setDisplayDensity,
149
- setShowIndentLines,
139
setTheme,
140
theme,
141
]