Merge branch 'inactive-window' of https://github.com/lucasecdb/react-devtools-experimental into lucasecdb-inactive-window

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);
@@ -13,6 +14,9 @@
 .Element:hover {
   background-color: var(--color-hover-background);
 }
+.InactiveElement {
+  background-color: var(--color-inactive-background);
+}
 
 .SelectedElement {
   background-color: var(--color-selected-background);

src/devtools/views/Components/Element.js

@@ -43,6 +43,7 @@ export default function ElementView({ data, index, style }: Props) {
   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) {
@@ -117,7 +118,13 @@ export default function ElementView({ data, index, style }: Props) {
 
   return (
     <div
-      className={isSelected ? styles.SelectedElement : styles.Element}
+      className={
+        isSelected && treeFocused
+          ? styles.SelectedElement
+          : isSelected
+          ? styles.InactiveElement
+          : styles.Element
+      }
       onMouseEnter={handleMouseEnter}
       onMouseDown={handleMouseDown}
       onDoubleClick={handleDoubleClick}

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 = {||};
@@ -48,6 +50,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);
 
@@ -142,6 +147,30 @@ export default function Tree(props: Props) {
     store,
   ]);
 
+  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>(
@@ -150,8 +179,9 @@ export default function Tree(props: Props) {
       numElements,
       getElementAtIndex,
       lastScrolledIDRef,
+      treeFocused,
     }),
-    [baseDepth, numElements, getElementAtIndex, lastScrolledIDRef]
+    [baseDepth, numElements, getElementAtIndex, lastScrolledIDRef, treeFocused]
   );
 
   const handleMouseLeave = useCallback(() => {
@@ -164,7 +194,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

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,

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);