diff --git a/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js b/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js index a94766d4f1235..1f3c339608098 100644 --- a/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js +++ b/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js @@ -52,7 +52,7 @@ type Props = { type: IconType, }; -const panelIcons = '0 -960 960 820'; +const panelIcons = '96 -864 768 768'; export default function ButtonIcon({className = '', type}: Props): React.Node { let pathData = null; let viewBox = '0 0 24 24'; diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.css b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.css index 3e042402a4c3a..227478649f9d7 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.css +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.css @@ -14,6 +14,14 @@ -webkit-font-smoothing: var(--font-smoothing); } +.VRule { + height: 20px; + width: 1px; + flex: 0 0 1px; + margin: 0 0.5rem; + background-color: var(--color-border); +} + .TreeWrapper { border-top: 1px solid var(--color-border); flex: 1 1 65%; @@ -107,13 +115,13 @@ .SuspenseTreeViewHeader { flex: 0 0 42px; padding: 0.5rem; - display: grid; - grid-template-columns: auto 1fr auto auto auto; + display: flex; align-items: flex-start; border-bottom: 1px solid var(--color-border); } .SuspenseBreadcrumbs { + flex: 1; /** * TODO: Switch to single item view on overflow like OwnerStack does. * OwnerStack has more constraints that make it easier so it won't be a 1:1 port. diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js index c7b53605b70a1..fb4235e2991e2 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js @@ -33,7 +33,7 @@ import { SuspenseTreeDispatcherContext, SuspenseTreeStateContext, } from './SuspenseTreeContext'; -import {StoreContext} from '../context'; +import {StoreContext, OptionsContext} from '../context'; import {TreeDispatcherContext} from '../Components/TreeContext'; import Button from '../Button'; import Tooltip from '../Components/reach-ui/tooltip'; @@ -41,6 +41,9 @@ import typeof { SyntheticEvent, SyntheticPointerEvent, } from 'react-dom-bindings/src/events/SyntheticEvent'; +import SettingsModal from 'react-devtools-shared/src/devtools/views/Settings/SettingsModal'; +import SettingsModalContextToggle from 'react-devtools-shared/src/devtools/views/Settings/SettingsModalContextToggle'; +import {SettingsModalContextController} from 'react-devtools-shared/src/devtools/views/Settings/SettingsModalContext'; type Orientation = 'horizontal' | 'vertical'; @@ -212,6 +215,7 @@ function ToggleInspectedElement({ } function SuspenseTab(_: {}) { + const {hideSettings} = useContext(OptionsContext); const [state, dispatch] = useReducer( layoutReducer, null, @@ -394,75 +398,82 @@ function SuspenseTab(_: {}) { }; return ( -
-
- {treeListDisabled ? null : ( - - )} - {treeListDisabled ? null : ( -