From 26106a4b9de506d9cd08c11070d7327acd5d094c Mon Sep 17 00:00:00 2001
From: Lucas Cordeiro <ecdb.lucas@gmail.com>
Date: Tue, 9 Apr 2019 15:39:47 -0300
Subject: [PATCH 1/2] Add check for inactive window on selected element

---
 src/devtools/views/Components/Element.css     |  6 +++-
 src/devtools/views/Components/Element.js      | 36 ++++++++++++++++++-
 .../views/Settings/SettingsContext.js         |  1 +
 src/devtools/views/root.css                   |  2 ++
 4 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/src/devtools/views/Components/Element.css b/src/devtools/views/Components/Element.css
index 4f1748c9c1..5a0c9c210c 100644
--- a/src/devtools/views/Components/Element.css
+++ b/src/devtools/views/Components/Element.css
@@ -1,5 +1,6 @@
 .Element,
-.SelectedElement {
+.SelectedElement,
+.InactiveElement {
   border-radius: 0.25em;
   white-space: nowrap;
   line-height: var(--line-height-data);
@@ -11,6 +12,9 @@
 .Element:hover {
   background-color: var(--color-hover-background);
 }
+.InactiveElement {
+  background-color: var(--color-inactive-background);
+}
 
 .SelectedElement {
   background-color: var(--color-selected-background);
diff --git a/src/devtools/views/Components/Element.js b/src/devtools/views/Components/Element.js
index 01f983c217..8de6eb63dc 100644
--- a/src/devtools/views/Components/Element.js
+++ b/src/devtools/views/Components/Element.js
@@ -2,8 +2,10 @@
 
 import React, {
   Fragment,
+  useState,
   useCallback,
   useContext,
+  useEffect,
   useLayoutEffect,
   useMemo,
   useRef,
@@ -35,6 +37,8 @@ export default function ElementView({ data, index, style }: Props) {
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
+  const [windowFocused, setWindowFocused] = useState<boolean>(true);
+
   const element = getElementAtIndex(index);
 
   const id = element === null ? null : element.id;
@@ -49,6 +53,30 @@ export default function ElementView({ data, index, style }: Props) {
 
   const ref = useRef<HTMLSpanElement | null>(null);
 
+  useEffect(() => {
+    if (ref.current === null || !isSelected) {
+      return () => {};
+    }
+
+    const handleFocus = () => {
+      setWindowFocused(true);
+    };
+
+    const handleBlur = () => {
+      setWindowFocused(false);
+    };
+
+    const ownerDocument = ref.current.ownerDocument.defaultView;
+
+    ownerDocument.addEventListener('focus', handleFocus);
+    ownerDocument.addEventListener('blur', handleBlur);
+
+    return () => {
+      ownerDocument.removeEventListener('focus', handleFocus);
+      ownerDocument.removeEventListener('blur', handleBlur);
+    };
+  }, [isSelected]);
+
   // The tree above has its own autoscrolling, but it only works for rows.
   // However, even when the row gets into the viewport, the component name
   // 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) {
 
   return (
     <div
-      className={isSelected ? styles.SelectedElement : styles.Element}
+      className={
+        isSelected && windowFocused
+          ? styles.SelectedElement
+          : isSelected
+          ? styles.InactiveElement
+          : styles.Element
+      }
       onMouseEnter={handleMouseEnter}
       onMouseDown={handleMouseDown}
       onDoubleClick={handleDoubleClick}
diff --git a/src/devtools/views/Settings/SettingsContext.js b/src/devtools/views/Settings/SettingsContext.js
index d6f3ba4a9a..44244f38df 100644
--- a/src/devtools/views/Settings/SettingsContext.js
+++ b/src/devtools/views/Settings/SettingsContext.js
@@ -223,6 +223,7 @@ function updateThemeVariables(
   updateStyleHelper(theme, 'color-dimmer', documentElements);
   updateStyleHelper(theme, 'color-dimmest', documentElements);
   updateStyleHelper(theme, 'color-hover-background', documentElements);
+  updateStyleHelper(theme, 'color-inactive-background', documentElements);
   updateStyleHelper(theme, 'color-jsx-arrow-brackets', documentElements);
   updateStyleHelper(
     theme,
diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index c2b2432145..884ff3e0d4 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -34,6 +34,7 @@
   --light-color-dimmer: #cfd1d5;
   --light-color-dimmest: #eff0f1;
   --light-color-hover-background: #ebf1fb;
+  --light-color-inactive-background: #ccc;
   --light-color-jsx-arrow-brackets: #333333;
   --light-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
   --light-color-modal-background: rgba(255, 255, 255, 0.75);
@@ -78,6 +79,7 @@
   --dark-color-dimmer: #777d88;
   --dark-color-dimmest: #4f5766;
   --dark-color-hover-background: #3d424a;
+  --dark-color-inactive-background: #44474c;
   --dark-color-jsx-arrow-brackets: #777d88;
   --dark-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
   --dark-color-modal-background: rgba(0, 0, 0, 0.75);

From 1c57ca0a1c00705a679e26bc6950d2bf28ec9e82 Mon Sep 17 00:00:00 2001
From: Lucas Cordeiro <ecdb.lucas@gmail.com>
Date: Tue, 9 Apr 2019 18:58:10 -0300
Subject: [PATCH 2/2] Use focus state from elements tree instead of
 ownerDocument

---
 src/devtools/views/Components/Element.js | 31 ++-----------------
 src/devtools/views/Components/Tree.js    | 38 ++++++++++++++++++++++--
 2 files changed, 38 insertions(+), 31 deletions(-)

diff --git a/src/devtools/views/Components/Element.js b/src/devtools/views/Components/Element.js
index 8de6eb63dc..22b8d04e05 100644
--- a/src/devtools/views/Components/Element.js
+++ b/src/devtools/views/Components/Element.js
@@ -2,10 +2,8 @@
 
 import React, {
   Fragment,
-  useState,
   useCallback,
   useContext,
-  useEffect,
   useLayoutEffect,
   useMemo,
   useRef,
@@ -37,13 +35,12 @@ export default function ElementView({ data, index, style }: Props) {
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
-  const [windowFocused, setWindowFocused] = useState<boolean>(true);
-
   const element = getElementAtIndex(index);
 
   const id = element === null ? null : element.id;
   const isSelected = selectedElementID === id;
   const lastScrolledIDRef = data.lastScrolledIDRef;
+  const treeFocused = data.treeFocused;
 
   const handleDoubleClick = useCallback(() => {
     if (id !== null) {
@@ -53,30 +50,6 @@ export default function ElementView({ data, index, style }: Props) {
 
   const ref = useRef<HTMLSpanElement | null>(null);
 
-  useEffect(() => {
-    if (ref.current === null || !isSelected) {
-      return () => {};
-    }
-
-    const handleFocus = () => {
-      setWindowFocused(true);
-    };
-
-    const handleBlur = () => {
-      setWindowFocused(false);
-    };
-
-    const ownerDocument = ref.current.ownerDocument.defaultView;
-
-    ownerDocument.addEventListener('focus', handleFocus);
-    ownerDocument.addEventListener('blur', handleBlur);
-
-    return () => {
-      ownerDocument.removeEventListener('focus', handleFocus);
-      ownerDocument.removeEventListener('blur', handleBlur);
-    };
-  }, [isSelected]);
-
   // The tree above has its own autoscrolling, but it only works for rows.
   // However, even when the row gets into the viewport, the component name
   // might be too far left or right on the screen. Adjust it in this case.
@@ -147,7 +120,7 @@ export default function ElementView({ data, index, style }: Props) {
   return (
     <div
       className={
-        isSelected && windowFocused
+        isSelected && treeFocused
           ? styles.SelectedElement
           : isSelected
           ? styles.InactiveElement
diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index b97ff5a9cf..a4f1b1797f 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -1,6 +1,7 @@
 // @flow
 
 import React, {
+  useState,
   useCallback,
   useContext,
   useEffect,
@@ -27,6 +28,7 @@ export type ItemData = {|
   numElements: number,
   getElementAtIndex: (index: number) => Element | null,
   lastScrolledIDRef: { current: number | null },
+  treeFocused: boolean,
 |};
 
 type Props = {||};
@@ -46,6 +48,9 @@ export default function Tree(props: Props) {
   // $FlowFixMe https://github.com/facebook/flow/issues/7341
   const listRef = useRef<FixedSizeList<ItemData> | null>(null);
   const treeRef = useRef<HTMLDivElement | null>(null);
+  const elementsRef = useRef<HTMLDivElement | null>(null);
+
+  const [treeFocused, setTreeFocused] = useState<boolean>(false);
 
   const { lineHeight } = useContext(SettingsContext);
 
@@ -112,6 +117,30 @@ export default function Tree(props: Props) {
     selectPreviousElementInTree,
   ]);
 
+  useEffect(() => {
+    if (elementsRef.current === null) {
+      return () => {};
+    }
+
+    const handleFocusIn = () => {
+      setTreeFocused(true);
+    };
+
+    const handleFocusOut = () => {
+      setTreeFocused(false);
+    };
+
+    const elementsElement = elementsRef.current;
+
+    elementsElement.addEventListener('focusin', handleFocusIn);
+    elementsElement.addEventListener('focusout', handleFocusOut);
+
+    return () => {
+      elementsElement.removeEventListener('focusin', handleFocusIn);
+      elementsElement.removeEventListener('focusout', handleFocusOut);
+    };
+  }, []);
+
   // Let react-window know to re-render any time the underlying tree data changes.
   // This includes the owner context, since it controls a filtered view of the tree.
   const itemData = useMemo<ItemData>(
@@ -120,8 +149,9 @@ export default function Tree(props: Props) {
       numElements,
       getElementAtIndex,
       lastScrolledIDRef,
+      treeFocused,
     }),
-    [baseDepth, numElements, getElementAtIndex, lastScrolledIDRef]
+    [baseDepth, numElements, getElementAtIndex, lastScrolledIDRef, treeFocused]
   );
 
   const handleMouseLeave = useCallback(() => {
@@ -134,7 +164,11 @@ export default function Tree(props: Props) {
         {ownerStack.length > 0 ? <OwnersStack /> : <SearchInput />}
         <InspectHostNodesToggle />
       </div>
-      <div className={styles.AutoSizerWrapper} onMouseLeave={handleMouseLeave}>
+      <div
+        className={styles.AutoSizerWrapper}
+        onMouseLeave={handleMouseLeave}
+        ref={elementsRef}
+      >
         <AutoSizer>
           {({ height, width }) => (
             // $FlowFixMe https://github.com/facebook/flow/issues/7341