From c89200c05ce446a20c5551ce8686d01b454d5e28 Mon Sep 17 00:00:00 2001
From: Hristo Kanchev <hristokkanchev@gmail.com>
Date: Fri, 3 Apr 2020 12:12:48 +0200
Subject: [PATCH 1/5] [DevTools] - Highlight rendered by elements on hover.

---
 .../views/Components/SelectedElement.css      | 21 +++++++++++++++----
 .../views/Components/SelectedElement.js       | 12 ++++++-----
 2 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.css b/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.css
index d1bb28f19706e..efac27eaaaf2a 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.css
+++ b/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.css
@@ -82,7 +82,6 @@
 .Owner {
   border-radius: 0.25rem;
   padding: 0.125rem 0.25rem;
-  cursor: pointer;
   background: none;
   border: none;
   display: block;
@@ -107,12 +106,26 @@
 }
 
 .OwnerButton {
+  cursor: pointer;
+  width: 100%;
+  padding: 0;
+}
+
+.OwnerContent {
   display: flex;
   align-items: center;
-  margin-left: 0.5rem;
-  padding: 0;
+  padding-top: 0;
+  padding-right: 0;
+  padding-bottom: 0;
+  padding-left: 1rem;
+  width: 100%;
+  border-radius: 0.25rem;
+}
+
+.OwnerContent:hover {
+  background-color: var(--color-background-hover);
 }
 
 .ContextMenuIcon {
   margin-right: 0.5rem;
-}
\ No newline at end of file
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js b/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js
index f65b8e0a777e5..620d804bddbdb 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js
@@ -538,12 +538,14 @@ function OwnerView({
       className={styles.OwnerButton}
       disabled={!isInStore}
       onClick={handleClick}>
-      <span
-        className={`${styles.Owner} ${isInStore ? '' : styles.NotInStore}`}
-        title={displayName}>
-        {displayName}
+        <span className={styles.OwnerContent} >
+          <span
+            className={`${styles.Owner} ${isInStore ? '' : styles.NotInStore}`}
+            title={displayName}>
+            {displayName}
+          </span>
+          <Badge hocDisplayNames={hocDisplayNames} type={type} />
       </span>
-      <Badge hocDisplayNames={hocDisplayNames} type={type} />
     </Button>
   );
 }

From cb82782841b4b6aebf79e6ce511082ba8a32034a Mon Sep 17 00:00:00 2001
From: Hristo Kanchev <hristokkanchev@gmail.com>
Date: Fri, 3 Apr 2020 12:23:05 +0200
Subject: [PATCH 2/5] Fixed formatting issue.

---
 .../devtools/views/Components/SelectedElement.js   | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js b/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js
index 620d804bddbdb..25cf06ba8a372 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js
@@ -538,13 +538,13 @@ function OwnerView({
       className={styles.OwnerButton}
       disabled={!isInStore}
       onClick={handleClick}>
-        <span className={styles.OwnerContent} >
-          <span
-            className={`${styles.Owner} ${isInStore ? '' : styles.NotInStore}`}
-            title={displayName}>
-            {displayName}
-          </span>
-          <Badge hocDisplayNames={hocDisplayNames} type={type} />
+      <span className={styles.OwnerContent}>
+        <span
+          className={`${styles.Owner} ${isInStore ? '' : styles.NotInStore}`}
+          title={displayName}>
+          {displayName}
+        </span>
+        <Badge hocDisplayNames={hocDisplayNames} type={type} />
       </span>
     </Button>
   );

From c3f880c81e35734a8be948f67f4f2e088182c7cc Mon Sep 17 00:00:00 2001
From: Hristo Kanchev <hristokkanchev@gmail.com>
Date: Fri, 3 Apr 2020 17:26:10 +0200
Subject: [PATCH 3/5] DevTools - Extracted highlight logic to custom hook.
 Added highlight support for rendered by elements.

---
 .../views/Components/SelectedElement.js       | 13 ++++++-
 .../src/devtools/views/Components/Tree.js     | 29 ++++------------
 .../src/devtools/views/hooks.js               | 34 +++++++++++++++++++
 3 files changed, 53 insertions(+), 23 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js b/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js
index 25cf06ba8a372..987c9edbb1c9d 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js
@@ -26,6 +26,7 @@ import ViewElementSourceContext from './ViewElementSourceContext';
 import NativeStyleEditor from './NativeStyleEditor';
 import Toggle from '../Toggle';
 import Badge from './Badge';
+import {useHighlightNativeElement} from '../hooks';
 import {
   ComponentFilterElementType,
   ElementTypeClass,
@@ -522,6 +523,10 @@ function OwnerView({
   type,
 }: OwnerViewProps) {
   const dispatch = useContext(TreeDispatcherContext);
+  const {
+    highlightNativeElement,
+    clearHighlightNativeElement,
+  } = useHighlightNativeElement();
 
   const handleClick = useCallback(
     () =>
@@ -532,12 +537,18 @@ function OwnerView({
     [dispatch, id],
   );
 
+  const onMouseEnter = () => highlightNativeElement(id);
+
+  const onMouseLeave = () => clearHighlightNativeElement();
+
   return (
     <Button
       key={id}
       className={styles.OwnerButton}
       disabled={!isInStore}
-      onClick={handleClick}>
+      onClick={handleClick}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}>
       <span className={styles.OwnerContent}>
         <span
           className={`${styles.Owner} ${isInStore ? '' : styles.NotInStore}`}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Tree.js b/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
index 43114cd4d9659..dc0d5bb3dd630 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
@@ -30,6 +30,7 @@ import SearchInput from './SearchInput';
 import SettingsModalContextToggle from 'react-devtools-shared/src/devtools/views/Settings/SettingsModalContextToggle';
 import SelectedTreeHighlight from './SelectedTreeHighlight';
 import TreeFocusedContext from './TreeFocusedContext';
+import {useHighlightNativeElement} from '../hooks';
 
 import styles from './Tree.css';
 
@@ -61,6 +62,10 @@ export default function Tree(props: Props) {
   const [isNavigatingWithKeyboard, setIsNavigatingWithKeyboard] = useState(
     false,
   );
+  const {
+    highlightNativeElement,
+    clearHighlightNativeElement,
+  } = useHighlightNativeElement();
   const treeRef = useRef<HTMLDivElement | null>(null);
   const focusTargetRef = useRef<HTMLDivElement | null>(null);
 
@@ -205,24 +210,6 @@ export default function Tree(props: Props) {
     [dispatch, selectedElementID],
   );
 
-  const highlightNativeElement = useCallback(
-    (id: number) => {
-      const element = store.getElementByID(id);
-      const rendererID = store.getRendererIDForElement(id);
-      if (element !== null && rendererID !== null) {
-        bridge.send('highlightNativeElement', {
-          displayName: element.displayName,
-          hideAfterTimeout: false,
-          id,
-          openNativeElementsPanel: false,
-          rendererID,
-          scrollIntoView: false,
-        });
-      }
-    },
-    [store, bridge],
-  );
-
   // If we switch the selected element while using the keyboard,
   // start highlighting it in the DOM instead of the last hovered node.
   const searchRef = useRef({searchIndex, searchResults});
@@ -240,7 +227,7 @@ export default function Tree(props: Props) {
       if (selectedElementID !== null) {
         highlightNativeElement(selectedElementID);
       } else {
-        bridge.send('clearNativeElementHighlight');
+        clearHighlightNativeElement();
       }
     }
   }, [
@@ -270,9 +257,7 @@ export default function Tree(props: Props) {
     setIsNavigatingWithKeyboard(false);
   }, []);
 
-  const handleMouseLeave = useCallback(() => {
-    bridge.send('clearNativeElementHighlight');
-  }, [bridge]);
+  const handleMouseLeave = clearHighlightNativeElement;
 
   // 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.
diff --git a/packages/react-devtools-shared/src/devtools/views/hooks.js b/packages/react-devtools-shared/src/devtools/views/hooks.js
index cace5451df589..3af0ceaeb29ad 100644
--- a/packages/react-devtools-shared/src/devtools/views/hooks.js
+++ b/packages/react-devtools-shared/src/devtools/views/hooks.js
@@ -14,11 +14,13 @@ import {
   useLayoutEffect,
   useReducer,
   useState,
+  useContext,
 } from 'react';
 import {
   localStorageGetItem,
   localStorageSetItem,
 } from 'react-devtools-shared/src/storage';
+import {StoreContext, BridgeContext} from './context';
 import {sanitizeForParse, smartParse, smartStringify} from '../utils';
 
 type ACTION_RESET = {|
@@ -301,3 +303,35 @@ export function useSubscription<Value>({
 
   return state.value;
 }
+
+export function useHighlightNativeElement() {
+  const bridge = useContext(BridgeContext);
+  const store = useContext(StoreContext);
+
+  const highlightNativeElement = useCallback(
+    (id: number) => {
+      const element = store.getElementByID(id);
+      const rendererID = store.getRendererIDForElement(id);
+      if (element !== null && rendererID !== null) {
+        bridge.send('highlightNativeElement', {
+          displayName: element.displayName,
+          hideAfterTimeout: false,
+          id,
+          openNativeElementsPanel: false,
+          rendererID,
+          scrollIntoView: false,
+        });
+      }
+    },
+    [store, bridge],
+  );
+
+  const clearHighlightNativeElement = useCallback(() => {
+    bridge.send('clearNativeElementHighlight');
+  }, [bridge]);
+
+  return {
+    highlightNativeElement,
+    clearHighlightNativeElement,
+  };
+}

From 787fbb2c55b08bc732a423b34907218df9657fe1 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Fri, 3 Apr 2020 10:41:02 -0700
Subject: [PATCH 4/5] Removed unnecessary padding style

---
 .../src/devtools/views/Components/SelectedElement.css          | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.css b/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.css
index efac27eaaaf2a..eaf5ac4a33a3c 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.css
+++ b/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.css
@@ -114,9 +114,6 @@
 .OwnerContent {
   display: flex;
   align-items: center;
-  padding-top: 0;
-  padding-right: 0;
-  padding-bottom: 0;
   padding-left: 1rem;
   width: 100%;
   border-radius: 0.25rem;

From 61b229a68fc3206e00fcb4755090865b485b89aa Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Fri, 3 Apr 2020 10:41:19 -0700
Subject: [PATCH 5/5] Removed unnecessary wrapper function.

---
 .../src/devtools/views/Components/SelectedElement.js            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js b/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js
index 987c9edbb1c9d..5424d35039cb3 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js
@@ -539,7 +539,7 @@ function OwnerView({
 
   const onMouseEnter = () => highlightNativeElement(id);
 
-  const onMouseLeave = () => clearHighlightNativeElement();
+  const onMouseLeave = clearHighlightNativeElement;
 
   return (
     <Button