Add check for inactive window on selected element
Lucas Cordeiro committed
Apr 9, 2019 at 15:39 UTC
26106a4b9de506d9cd08c11070d7327acd5d094c
4 files changed
+43
-2
src/devtools/views/Components/Element.css
+5
-1
@@ -1,5 +1,6 @@
1
.Element,
2
-.SelectedElement {
2
+.SelectedElement,
3
+.InactiveElement {
4
border-radius: 0.25em;
5
white-space: nowrap;
6
line-height: var(--line-height-data);
@@ -11,6 +12,9 @@
12
.Element:hover {
13
background-color: var(--color-hover-background);
14
}
15
+.InactiveElement {
16
+ background-color: var(--color-inactive-background);
17
+}
18
19
.SelectedElement {
20
background-color: var(--color-selected-background);
src/devtools/views/Components/Element.js
+35
-1
@@ -2,8 +2,10 @@
2
3
import React, {
4
Fragment,
5
+ useState,
6
useCallback,
7
useContext,
8
+ useEffect,
9
useLayoutEffect,
10
useMemo,
11
useRef,
@@ -35,6 +37,8 @@ export default function ElementView({ data, index, style }: Props) {
37
const bridge = useContext(BridgeContext);
38
const store = useContext(StoreContext);
39
40
+ const [windowFocused, setWindowFocused] = useState<boolean>(true);
41
+
42
const element = getElementAtIndex(index);
43
44
const id = element === null ? null : element.id;
@@ -49,6 +53,30 @@ export default function ElementView({ data, index, style }: Props) {
53
54
const ref = useRef<HTMLSpanElement | null>(null);
55
56
+ useEffect(() => {
57
+ if (ref.current === null || !isSelected) {
58
+ return () => {};
59
+ }
60
+
61
+ const handleFocus = () => {
62
+ setWindowFocused(true);
63
+ };
64
+
65
+ const handleBlur = () => {
66
+ setWindowFocused(false);
67
+ };
68
+
69
+ const ownerDocument = ref.current.ownerDocument.defaultView;
70
+
71
+ ownerDocument.addEventListener('focus', handleFocus);
72
+ ownerDocument.addEventListener('blur', handleBlur);
73
+
74
+ return () => {
75
+ ownerDocument.removeEventListener('focus', handleFocus);
76
+ ownerDocument.removeEventListener('blur', handleBlur);
77
+ };
78
+ }, [isSelected]);
79
+
80
// The tree above has its own autoscrolling, but it only works for rows.
81
// However, even when the row gets into the viewport, the component name
82
// might be too far left or right on the screen. Adjust it in this case.
@@ -118,7 +146,13 @@ export default function ElementView({ data, index, style }: Props) {
146
147
return (
148
<div
121
- className={isSelected ? styles.SelectedElement : styles.Element}
149
+ className={
150
+ isSelected && windowFocused
151
+ ? styles.SelectedElement
152
+ : isSelected
153
+ ? styles.InactiveElement
154
+ : styles.Element
155
+ }
156
onMouseEnter={handleMouseEnter}
157
onMouseDown={handleMouseDown}
158
onDoubleClick={handleDoubleClick}
src/devtools/views/Settings/SettingsContext.js
+1
@@ -223,6 +223,7 @@ function updateThemeVariables(
223
updateStyleHelper(theme, 'color-dimmer', documentElements);
224
updateStyleHelper(theme, 'color-dimmest', documentElements);
225
updateStyleHelper(theme, 'color-hover-background', documentElements);
226
+ updateStyleHelper(theme, 'color-inactive-background', documentElements);
227
updateStyleHelper(theme, 'color-jsx-arrow-brackets', documentElements);
228
updateStyleHelper(
229
theme,
src/devtools/views/root.css
+2
@@ -34,6 +34,7 @@
34
--light-color-dimmer: #cfd1d5;
35
--light-color-dimmest: #eff0f1;
36
--light-color-hover-background: #ebf1fb;
37
+ --light-color-inactive-background: #ccc;
38
--light-color-jsx-arrow-brackets: #333333;
39
--light-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
40
--light-color-modal-background: rgba(255, 255, 255, 0.75);
@@ -78,6 +79,7 @@
79
--dark-color-dimmer: #777d88;
80
--dark-color-dimmest: #4f5766;
81
--dark-color-hover-background: #3d424a;
82
+ --dark-color-inactive-background: #44474c;
83
--dark-color-jsx-arrow-brackets: #777d88;
84
--dark-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
85
--dark-color-modal-background: rgba(0, 0, 0, 0.75);