Remove hover guideline in favor of showing guidelines for every nesting level

src/devtools/views/Components/Components.js

@@ -3,7 +3,6 @@
 import React, { Suspense } from 'react';
 import Tree from './Tree';
 import SelectedElement from './SelectedElement';
-import { HoveredElementContextController } from './HoveredElementContext';
 import { InspectedElementContextController } from './InspectedElementContext';
 import { OwnersListContextController } from './OwnersListContext';
 import portaledContent from '../portaledContent';
@@ -15,21 +14,19 @@ function Components(_: {||}) {
   // TODO Flex wrappers below should be user resizable.
   return (
     <OwnersListContextController>
-      <HoveredElementContextController>
-        <InspectedElementContextController>
-          <div className={styles.Components}>
-            <div className={styles.TreeWrapper}>
-              <Tree />
-            </div>
-            <div className={styles.SelectedElementWrapper}>
-              <Suspense fallback={<Loading />}>
-                <SelectedElement />
-              </Suspense>
-            </div>
-            <ModalDialog />
+      <InspectedElementContextController>
+        <div className={styles.Components}>
+          <div className={styles.TreeWrapper}>
+            <Tree />
           </div>
-        </InspectedElementContextController>
-      </HoveredElementContextController>
+          <div className={styles.SelectedElementWrapper}>
+            <Suspense fallback={<Loading />}>
+              <SelectedElement />
+            </Suspense>
+          </div>
+          <ModalDialog />
+        </div>
+      </InspectedElementContextController>
     </OwnersListContextController>
   );
 }

src/devtools/views/Components/Element.js

@@ -19,7 +19,6 @@ import Store from 'src/devtools/store';
 import ButtonIcon from '../ButtonIcon';
 import { createRegExp } from '../utils';
 import { TreeDispatcherContext, TreeStateContext } from './TreeContext';
-import { HoveredElementSetIDContext } from './HoveredElementContext';
 import { StoreContext } from '../context';
 
 import type { ItemData } from './Tree';
@@ -39,7 +38,6 @@ export default function ElementView({ data, index, style }: Props) {
     TreeStateContext
   );
   const dispatch = useContext(TreeDispatcherContext);
-  const setHoveredElementID = useContext(HoveredElementSetIDContext);
 
   const element =
     ownerFlatTree !== null
@@ -121,10 +119,9 @@ export default function ElementView({ data, index, style }: Props) {
   const handleMouseEnter = useCallback(() => {
     setIsHovered(true);
     if (id !== null) {
-      setHoveredElementID(id);
       onElementMouseEnter(id);
     }
-  }, [id, onElementMouseEnter, setHoveredElementID]);
+  }, [id, onElementMouseEnter]);
 
   const handleMouseLeave = useCallback(() => {
     setIsHovered(false);
@@ -164,7 +161,7 @@ export default function ElementView({ data, index, style }: Props) {
         ...style, // "style" comes from react-window
 
         // Left padding presents the appearance of a nested tree structure.
-        paddingLeft: `${depth * 0.75 + 0.25}rem`,
+        paddingLeft: '0.25rem',
 
         // These style overrides enable the background color to fill the full visible width,
         // when combined with the CSS tweaks in Tree.
@@ -176,6 +173,17 @@ export default function ElementView({ data, index, style }: Props) {
         marginBottom: `-${style.height}px`,
       }}
     >
+      <div
+        style={{
+          width: `${depth * 0.75}rem`,
+          height: '100%',
+          backgroundSize: '0.75rem 1rem',
+          backgroundColor: 'transparent',
+          backgroundImage:
+            'linear-gradient(to right, transparent 8px, var(--color-guideline) 8px, transparent 9px)',
+          backgroundRepeat: 'repeat',
+        }}
+      />
       <span className={styles.ScrollAnchor} ref={scrollAnchorStartRef} />
       {ownerID === null ? (
         <ExpandCollapseToggle element={element} store={store} />

src/devtools/views/Components/Guidelines.css

@@ -1,19 +1,14 @@
-.GuidelineHovered,
-.GuidelineSelectedActive,
-.GuidelineSelectedInactive {
+.GuidelineActive,
+.GuidelineInactive {
   width: 1px;
   z-index: 2;
   pointer-events: none;
 }
 
-.GuidelineHovered {
-  background-color: var(--color-guideline-hovered);
-}
-
-.GuidelineSelectedActive {
+.GuidelineActive {
   background-color: var(--color-background-selected);
 }
 
-.GuidelineSelectedInactive {
+.GuidelineInactive {
   background-color: var(--color-background-inactive);
 }

src/devtools/views/Components/Guidelines.js

@@ -1,7 +1,6 @@
 // @flow
 
 import React, { Fragment, useContext, useMemo } from 'react';
-import { HoveredElementIDContext } from './HoveredElementContext';
 import { TreeStateContext } from './TreeContext';
 import TreeFocusedContext from './TreeFocusedContext';
 import { SettingsContext } from '../Settings/SettingsContext';
@@ -12,23 +11,14 @@ import Store from '../../store';
 import styles from './Guidelines.css';
 
 export default function Guidelines(_: {||}) {
-  const hoveredElementID = useContext(HoveredElementIDContext);
   const { selectedElementID } = useContext(TreeStateContext);
   const treeFocused = useContext(TreeFocusedContext);
 
   return (
     <Fragment>
-      {hoveredElementID !== selectedElementID && (
-        <Guideline
-          className={styles.GuidelineHovered}
-          elementID={hoveredElementID}
-        />
-      )}
       <Guideline
         className={
-          treeFocused
-            ? styles.GuidelineSelectedActive
-            : styles.GuidelineSelectedInactive
+          treeFocused ? styles.GuidelineActive : styles.GuidelineInactive
         }
         elementID={selectedElementID}
       />

src/devtools/views/Components/HoveredElementContext.js

@@ -1,34 +0,0 @@
-// @flow
-
-import React, { createContext, useState } from 'react';
-
-type ID = number | null;
-type SetID = (id: ID) => void;
-
-const HoveredElementIDContext = createContext<ID>(null);
-HoveredElementIDContext.displayName = 'HoveredElementIDContext';
-
-const HoveredElementSetIDContext = createContext<SetID>(((null: any): SetID));
-HoveredElementSetIDContext.displayName = 'HoveredElementSetIDContext';
-
-type Props = {|
-  children: React$Node,
-|};
-
-function HoveredElementContextController({ children }: Props) {
-  const [hoveredElementID, setHoveredElementID] = useState<ID>(null);
-
-  return (
-    <HoveredElementIDContext.Provider value={hoveredElementID}>
-      <HoveredElementSetIDContext.Provider value={setHoveredElementID}>
-        {children}
-      </HoveredElementSetIDContext.Provider>
-    </HoveredElementIDContext.Provider>
-  );
-}
-
-export {
-  HoveredElementIDContext,
-  HoveredElementSetIDContext,
-  HoveredElementContextController,
-};

src/devtools/views/Components/Tree.js

@@ -22,7 +22,6 @@ import SearchInput from './SearchInput';
 import { ComponentFiltersModalContextController } from './ComponentFiltersModalContext';
 import ToggleComponentFiltersModalButton from './ToggleComponentFiltersModalButton';
 import ComponentFiltersModal from './ComponentFiltersModal';
-import { HoveredElementSetIDContext } from './HoveredElementContext';
 import Guidelines from './Guidelines';
 import TreeFocusedContext from './TreeFocusedContext';
 
@@ -326,7 +325,6 @@ export default function Tree(props: Props) {
 
 function InnerElementType({ children, style, ...rest }) {
   const { ownerID } = useContext(TreeStateContext);
-  const setHoveredElementID = useContext(HoveredElementSetIDContext);
 
   // The list may need to scroll horizontally due to deeply nested elements.
   // We don't know the maximum scroll width up front, because we're windowing.
@@ -361,10 +359,6 @@ function InnerElementType({ children, style, ...rest }) {
     setMinWidth(null);
   }
 
-  const handleMouseLeave = useCallback(() => {
-    setHoveredElementID(null);
-  }, [setHoveredElementID]);
-
   // This style override enables the background color to fill the full visible width,
   // when combined with the CSS tweaks in Element.
   // A lot of options were considered; this seemed the one that requires the least code.
@@ -372,7 +366,6 @@ function InnerElementType({ children, style, ...rest }) {
   return (
     <div
       className={styles.InnerElementType}
-      onMouseLeave={handleMouseLeave}
       style={{
         ...style,
         display: 'inline-block',

src/devtools/views/Settings/SettingsContext.js

@@ -261,7 +261,7 @@ function updateThemeVariables(
   updateStyleHelper(theme, 'color-dimmer', documentElements);
   updateStyleHelper(theme, 'color-dimmest', documentElements);
   updateStyleHelper(theme, 'color-expand-collapse-toggle', documentElements);
-  updateStyleHelper(theme, 'color-guideline-hovered', documentElements);
+  updateStyleHelper(theme, 'color-guideline', documentElements);
   updateStyleHelper(theme, 'color-jsx-arrow-brackets', documentElements);
   updateStyleHelper(
     theme,

src/devtools/views/root.css

@@ -42,7 +42,7 @@
   --light-color-dimmer: #cfd1d5;
   --light-color-dimmest: #eff0f1;
   --light-color-expand-collapse-toggle: #777d88;
-  --light-color-guideline-hovered: rgba(0, 0, 0, 0.1);
+  --light-color-guideline: rgba(0, 0, 0, 0.15);
   --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);
@@ -100,7 +100,7 @@
   --dark-color-dimmer: #777d88;
   --dark-color-dimmest: #4f5766;
   --dark-color-expand-collapse-toggle: #8f949d;
-  --dark-color-guideline-hovered: rgba(255, 255, 255, 0.1);
+  --dark-color-guideline: rgba(255, 255, 255, 0.15);
   --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);