From a2a468743f99bdd08bd236ec9c7ec24b9756c6ac Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Thu, 30 May 2019 14:17:12 -0700 Subject: [PATCH] Remove hover guideline in favor of showing guidelines for every nesting level --- src/devtools/views/Components/Components.js | 27 +++++++-------- src/devtools/views/Components/Element.js | 18 +++++++--- src/devtools/views/Components/Guidelines.css | 13 +++---- src/devtools/views/Components/Guidelines.js | 12 +------ .../views/Components/HoveredElementContext.js | 34 ------------------- src/devtools/views/Components/Tree.js | 7 ---- .../views/Settings/SettingsContext.js | 2 +- src/devtools/views/root.css | 4 +-- 8 files changed, 33 insertions(+), 84 deletions(-) delete mode 100644 src/devtools/views/Components/HoveredElementContext.js diff --git a/src/devtools/views/Components/Components.js b/src/devtools/views/Components/Components.js index 395087a21d..3ed317a101 100644 --- a/src/devtools/views/Components/Components.js +++ b/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 ( - - -
-
- -
-
- }> - - -
- + +
+
+
- - +
+ }> + + +
+ +
+ ); } diff --git a/src/devtools/views/Components/Element.js b/src/devtools/views/Components/Element.js index 020de1d5c8..f0c0efa4dd 100644 --- a/src/devtools/views/Components/Element.js +++ b/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`, }} > +
{ownerID === null ? ( diff --git a/src/devtools/views/Components/Guidelines.css b/src/devtools/views/Components/Guidelines.css index f558a66551..1ab29e1d16 100644 --- a/src/devtools/views/Components/Guidelines.css +++ b/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); } diff --git a/src/devtools/views/Components/Guidelines.js b/src/devtools/views/Components/Guidelines.js index f8397fd654..30332ea9bf 100644 --- a/src/devtools/views/Components/Guidelines.js +++ b/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 ( - {hoveredElementID !== selectedElementID && ( - - )} diff --git a/src/devtools/views/Components/HoveredElementContext.js b/src/devtools/views/Components/HoveredElementContext.js deleted file mode 100644 index 161fd1f620..0000000000 --- a/src/devtools/views/Components/HoveredElementContext.js +++ /dev/null @@ -1,34 +0,0 @@ -// @flow - -import React, { createContext, useState } from 'react'; - -type ID = number | null; -type SetID = (id: ID) => void; - -const HoveredElementIDContext = createContext(null); -HoveredElementIDContext.displayName = 'HoveredElementIDContext'; - -const HoveredElementSetIDContext = createContext(((null: any): SetID)); -HoveredElementSetIDContext.displayName = 'HoveredElementSetIDContext'; - -type Props = {| - children: React$Node, -|}; - -function HoveredElementContextController({ children }: Props) { - const [hoveredElementID, setHoveredElementID] = useState(null); - - return ( - - - {children} - - - ); -} - -export { - HoveredElementIDContext, - HoveredElementSetIDContext, - HoveredElementContextController, -}; diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js index 0a6ac0fa4b..d7d3404754 100644 --- a/src/devtools/views/Components/Tree.js +++ b/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 (