Remove hover guideline in favor of showing guidelines for every nesting level
Brian Vaughn committed
May 30, 2019 at 14:17 UTC
a2a468743f99bdd08bd236ec9c7ec24b9756c6ac
8 files changed
+33
-84
src/devtools/views/Components/Components.js
+12
-15
@@ -3,7 +3,6 @@
3
import React, { Suspense } from 'react';
4
import Tree from './Tree';
5
import SelectedElement from './SelectedElement';
6
-import { HoveredElementContextController } from './HoveredElementContext';
6
import { InspectedElementContextController } from './InspectedElementContext';
7
import { OwnersListContextController } from './OwnersListContext';
8
import portaledContent from '../portaledContent';
@@ -15,21 +14,19 @@ function Components(_: {||}) {
14
// TODO Flex wrappers below should be user resizable.
15
return (
16
<OwnersListContextController>
18
- <HoveredElementContextController>
19
- <InspectedElementContextController>
20
- <div className={styles.Components}>
21
- <div className={styles.TreeWrapper}>
22
- <Tree />
23
- </div>
24
- <div className={styles.SelectedElementWrapper}>
25
- <Suspense fallback={<Loading />}>
26
- <SelectedElement />
27
- </Suspense>
28
- </div>
29
- <ModalDialog />
17
+ <InspectedElementContextController>
18
+ <div className={styles.Components}>
19
+ <div className={styles.TreeWrapper}>
20
+ <Tree />
21
</div>
31
- </InspectedElementContextController>
32
- </HoveredElementContextController>
22
+ <div className={styles.SelectedElementWrapper}>
23
+ <Suspense fallback={<Loading />}>
24
+ <SelectedElement />
25
+ </Suspense>
26
+ </div>
27
+ <ModalDialog />
28
+ </div>
29
+ </InspectedElementContextController>
30
</OwnersListContextController>
31
);
32
}
src/devtools/views/Components/Element.js
+13
-5
@@ -19,7 +19,6 @@ import Store from 'src/devtools/store';
19
import ButtonIcon from '../ButtonIcon';
20
import { createRegExp } from '../utils';
21
import { TreeDispatcherContext, TreeStateContext } from './TreeContext';
22
-import { HoveredElementSetIDContext } from './HoveredElementContext';
22
import { StoreContext } from '../context';
23
24
import type { ItemData } from './Tree';
@@ -39,7 +38,6 @@ export default function ElementView({ data, index, style }: Props) {
38
TreeStateContext
39
);
40
const dispatch = useContext(TreeDispatcherContext);
42
- const setHoveredElementID = useContext(HoveredElementSetIDContext);
41
42
const element =
43
ownerFlatTree !== null
@@ -121,10 +119,9 @@ export default function ElementView({ data, index, style }: Props) {
119
const handleMouseEnter = useCallback(() => {
120
setIsHovered(true);
121
if (id !== null) {
124
- setHoveredElementID(id);
122
onElementMouseEnter(id);
123
}
127
- }, [id, onElementMouseEnter, setHoveredElementID]);
124
+ }, [id, onElementMouseEnter]);
125
126
const handleMouseLeave = useCallback(() => {
127
setIsHovered(false);
@@ -164,7 +161,7 @@ export default function ElementView({ data, index, style }: Props) {
161
...style, // "style" comes from react-window
162
163
// Left padding presents the appearance of a nested tree structure.
167
- paddingLeft: `${depth * 0.75 + 0.25}rem`,
164
+ paddingLeft: '0.25rem',
165
166
// These style overrides enable the background color to fill the full visible width,
167
// when combined with the CSS tweaks in Tree.
@@ -176,6 +173,17 @@ export default function ElementView({ data, index, style }: Props) {
173
marginBottom: `-${style.height}px`,
174
}}
175
>
176
+ <div
177
+ style={{
178
+ width: `${depth * 0.75}rem`,
179
+ height: '100%',
180
+ backgroundSize: '0.75rem 1rem',
181
+ backgroundColor: 'transparent',
182
+ backgroundImage:
183
+ 'linear-gradient(to right, transparent 8px, var(--color-guideline) 8px, transparent 9px)',
184
+ backgroundRepeat: 'repeat',
185
+ }}
186
+ />
187
<span className={styles.ScrollAnchor} ref={scrollAnchorStartRef} />
188
{ownerID === null ? (
189
<ExpandCollapseToggle element={element} store={store} />
src/devtools/views/Components/Guidelines.css
+4
-9
@@ -1,19 +1,14 @@
1
-.GuidelineHovered,
2
-.GuidelineSelectedActive,
3
-.GuidelineSelectedInactive {
1
+.GuidelineActive,
2
+.GuidelineInactive {
3
width: 1px;
4
z-index: 2;
5
pointer-events: none;
6
}
7
9
-.GuidelineHovered {
10
- background-color: var(--color-guideline-hovered);
11
-}
12
-
13
-.GuidelineSelectedActive {
8
+.GuidelineActive {
9
background-color: var(--color-background-selected);
10
}
11
17
-.GuidelineSelectedInactive {
12
+.GuidelineInactive {
13
background-color: var(--color-background-inactive);
14
}
src/devtools/views/Components/Guidelines.js
+1
-11
@@ -1,7 +1,6 @@
1
// @flow
2
3
import React, { Fragment, useContext, useMemo } from 'react';
4
-import { HoveredElementIDContext } from './HoveredElementContext';
4
import { TreeStateContext } from './TreeContext';
5
import TreeFocusedContext from './TreeFocusedContext';
6
import { SettingsContext } from '../Settings/SettingsContext';
@@ -12,23 +11,14 @@ import Store from '../../store';
11
import styles from './Guidelines.css';
12
13
export default function Guidelines(_: {||}) {
15
- const hoveredElementID = useContext(HoveredElementIDContext);
14
const { selectedElementID } = useContext(TreeStateContext);
15
const treeFocused = useContext(TreeFocusedContext);
16
17
return (
18
<Fragment>
21
- {hoveredElementID !== selectedElementID && (
22
- <Guideline
23
- className={styles.GuidelineHovered}
24
- elementID={hoveredElementID}
25
- />
26
- )}
19
<Guideline
20
className={
29
- treeFocused
30
- ? styles.GuidelineSelectedActive
31
- : styles.GuidelineSelectedInactive
21
+ treeFocused ? styles.GuidelineActive : styles.GuidelineInactive
22
}
23
elementID={selectedElementID}
24
/>
src/devtools/views/Components/HoveredElementContext.js
deleted
-34
@@ -1,34 +0,0 @@
1
-// @flow
2
-
3
-import React, { createContext, useState } from 'react';
4
-
5
-type ID = number | null;
6
-type SetID = (id: ID) => void;
7
-
8
-const HoveredElementIDContext = createContext<ID>(null);
9
-HoveredElementIDContext.displayName = 'HoveredElementIDContext';
10
-
11
-const HoveredElementSetIDContext = createContext<SetID>(((null: any): SetID));
12
-HoveredElementSetIDContext.displayName = 'HoveredElementSetIDContext';
13
-
14
-type Props = {|
15
- children: React$Node,
16
-|};
17
-
18
-function HoveredElementContextController({ children }: Props) {
19
- const [hoveredElementID, setHoveredElementID] = useState<ID>(null);
20
-
21
- return (
22
- <HoveredElementIDContext.Provider value={hoveredElementID}>
23
- <HoveredElementSetIDContext.Provider value={setHoveredElementID}>
24
- {children}
25
- </HoveredElementSetIDContext.Provider>
26
- </HoveredElementIDContext.Provider>
27
- );
28
-}
29
-
30
-export {
31
- HoveredElementIDContext,
32
- HoveredElementSetIDContext,
33
- HoveredElementContextController,
34
-};
src/devtools/views/Components/Tree.js
-7
@@ -22,7 +22,6 @@ import SearchInput from './SearchInput';
22
import { ComponentFiltersModalContextController } from './ComponentFiltersModalContext';
23
import ToggleComponentFiltersModalButton from './ToggleComponentFiltersModalButton';
24
import ComponentFiltersModal from './ComponentFiltersModal';
25
-import { HoveredElementSetIDContext } from './HoveredElementContext';
25
import Guidelines from './Guidelines';
26
import TreeFocusedContext from './TreeFocusedContext';
27
@@ -326,7 +325,6 @@ export default function Tree(props: Props) {
325
326
function InnerElementType({ children, style, ...rest }) {
327
const { ownerID } = useContext(TreeStateContext);
329
- const setHoveredElementID = useContext(HoveredElementSetIDContext);
328
329
// The list may need to scroll horizontally due to deeply nested elements.
330
// We don't know the maximum scroll width up front, because we're windowing.
@@ -361,10 +359,6 @@ function InnerElementType({ children, style, ...rest }) {
359
setMinWidth(null);
360
}
361
364
- const handleMouseLeave = useCallback(() => {
365
- setHoveredElementID(null);
366
- }, [setHoveredElementID]);
367
-
362
// This style override enables the background color to fill the full visible width,
363
// when combined with the CSS tweaks in Element.
364
// A lot of options were considered; this seemed the one that requires the least code.
@@ -372,7 +366,6 @@ function InnerElementType({ children, style, ...rest }) {
366
return (
367
<div
368
className={styles.InnerElementType}
375
- onMouseLeave={handleMouseLeave}
369
style={{
370
...style,
371
display: 'inline-block',
src/devtools/views/Settings/SettingsContext.js
+1
-1
@@ -261,7 +261,7 @@ function updateThemeVariables(
261
updateStyleHelper(theme, 'color-dimmer', documentElements);
262
updateStyleHelper(theme, 'color-dimmest', documentElements);
263
updateStyleHelper(theme, 'color-expand-collapse-toggle', documentElements);
264
- updateStyleHelper(theme, 'color-guideline-hovered', documentElements);
264
+ updateStyleHelper(theme, 'color-guideline', documentElements);
265
updateStyleHelper(theme, 'color-jsx-arrow-brackets', documentElements);
266
updateStyleHelper(
267
theme,
src/devtools/views/root.css
+2
-2
@@ -42,7 +42,7 @@
42
--light-color-dimmer: #cfd1d5;
43
--light-color-dimmest: #eff0f1;
44
--light-color-expand-collapse-toggle: #777d88;
45
- --light-color-guideline-hovered: rgba(0, 0, 0, 0.1);
45
+ --light-color-guideline: rgba(0, 0, 0, 0.15);
46
--light-color-jsx-arrow-brackets: #333333;
47
--light-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
48
--light-color-modal-background: rgba(255, 255, 255, 0.75);
@@ -100,7 +100,7 @@
100
--dark-color-dimmer: #777d88;
101
--dark-color-dimmest: #4f5766;
102
--dark-color-expand-collapse-toggle: #8f949d;
103
- --dark-color-guideline-hovered: rgba(255, 255, 255, 0.1);
103
+ --dark-color-guideline: rgba(255, 255, 255, 0.15);
104
--dark-color-jsx-arrow-brackets: #777d88;
105
--dark-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
106
--dark-color-modal-background: rgba(0, 0, 0, 0.75);