{"parents":["dbe68f7a6763f79d61b87ab2abe26aeb976fbc45"],"commit":{"authorEmail":"bvaughn@fb.com","authoredAt":"2019-05-08T10:50:32-07:00","subject":"Add toggle-suspense button to all elements","revision":"703706b40f4b2de3906b3f311f16d6b433e84e0f","authorName":"Brian Vaughn","shortRevision":"703706b40f"},"body":"This button is disabled if the renderer returns canToggleSuspense=false.","patch":"diff --git a\/src\/devtools\/views\/ButtonIcon.js b\/src\/devtools\/views\/ButtonIcon.js\nindex 6e67143f89..b24b35ceeb 100644\n--- a\/src\/devtools\/views\/ButtonIcon.js\n+++ b\/src\/devtools\/views\/ButtonIcon.js\n@@ -25,6 +25,7 @@ export type IconType =\n | 'save'\n | 'search'\n | 'settings'\n+ | 'suspend'\n | 'undo'\n | 'up'\n | 'view-dom'\n@@ -101,6 +102,9 @@ export default function ButtonIcon({ className = '', type }: Props) {\n case 'settings':\n pathData = PATH_SETTINGS;\n break;\n+ case 'suspend':\n+ pathData = PATH_SUSPEND;\n+ break;\n case 'undo':\n pathData = PATH_UNDO;\n break;\n@@ -212,6 +216,11 @@ const PATH_SETTINGS = `\n .49-.18l1.6-2.77c.1-.18.06-.39-.1-.51l-1.67-1.32zM10 13c-1.65 0-3-1.35-3-3s1.35-3 3-3 3 1.35 3 3-1.35 3-3 3z\n `;\n \n+const PATH_SUSPEND = `\n+ M15 1H9v2h6V1zm-4 13h2V8h-2v6zm8.03-6.61l1.42-1.42c-.43-.51-.9-.99-1.41-1.41l-1.42 1.42C16.07 4.74 14.12 4 12 4c-4.97\n+ 0-9 4.03-9 9s4.02 9 9 9 9-4.03 9-9c0-2.12-.74-4.07-1.97-5.61zM12 20c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z\n+`;\n+\n const PATH_UNDO = `\n M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88\n 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z\ndiff --git a\/src\/devtools\/views\/Components\/Components.css b\/src\/devtools\/views\/Components\/Components.css\nindex 775b1faef1..0cecdd9056 100644\n--- a\/src\/devtools\/views\/Components\/Components.css\n+++ b\/src\/devtools\/views\/Components\/Components.css\n@@ -1,4 +1,5 @@\n .Components {\n+ position: relative;\n width: 100%;\n height: 100%;\n display: flex;\ndiff --git a\/src\/devtools\/views\/Components\/Components.js b\/src\/devtools\/views\/Components\/Components.js\nindex bce5941af0..dd4b775431 100644\n--- a\/src\/devtools\/views\/Components\/Components.js\n+++ b\/src\/devtools\/views\/Components\/Components.js\n@@ -5,6 +5,7 @@ import Tree from '.\/Tree';\n import SelectedElement from '.\/SelectedElement';\n import { InspectedElementContextController } from '.\/InspectedElementContext';\n import portaledContent from '..\/portaledContent';\n+import { ModalDialog } from '..\/ModalDialog';\n \n import styles from '.\/Components.css';\n \n@@ -22,6 +23,7 @@ function Components(_: {||}) {\n <\/Suspense>\n <\/InspectedElementContextController>\n <\/div>\n+ \n <\/div>\n );\n }\ndiff --git a\/src\/devtools\/views\/Components\/SelectedElement.css b\/src\/devtools\/views\/Components\/SelectedElement.css\nindex c67d40a2ec..97c909d280 100644\n--- a\/src\/devtools\/views\/Components\/SelectedElement.css\n+++ b\/src\/devtools\/views\/Components\/SelectedElement.css\n@@ -83,3 +83,7 @@\n color: var(--color-dimmer);\n font-style: italic;\n }\n+\n+.CannotSuspendWarningMessage {\n+ font-size: var(--font-size-sans-large);\n+}\ndiff --git a\/src\/devtools\/views\/Components\/SelectedElement.js b\/src\/devtools\/views\/Components\/SelectedElement.js\nindex 8740480a98..f3902ac067 100644\n--- a\/src\/devtools\/views\/Components\/SelectedElement.js\n+++ b\/src\/devtools\/views\/Components\/SelectedElement.js\n@@ -6,11 +6,13 @@ import { BridgeContext, StoreContext } from '..\/context';\n import Button from '..\/Button';\n import ButtonIcon from '..\/ButtonIcon';\n import HooksTree from '.\/HooksTree';\n+import { ModalDialogContext } from '..\/ModalDialog';\n import InspectedElementTree from '.\/InspectedElementTree';\n import { InspectedElementContext } from '.\/InspectedElementContext';\n import ViewElementSourceContext from '.\/ViewElementSourceContext';\n-import styles from '.\/SelectedElement.css';\n+import Toggle from '..\/Toggle';\n import {\n+ ComponentFilterElementType,\n ElementTypeClass,\n ElementTypeForwardRef,\n ElementTypeFunction,\n@@ -18,15 +20,19 @@ import {\n ElementTypeSuspense,\n } from 'src\/types';\n \n+import styles from '.\/SelectedElement.css';\n+\n import type { Element, InspectedElement } from '.\/types';\n \n export type Props = {||};\n \n export default function SelectedElement(_: Props) {\n const { inspectedElementID } = useContext(TreeStateContext);\n+ const dispatch = useContext(TreeDispatcherContext);\n const viewElementSource = useContext(ViewElementSourceContext);\n const bridge = useContext(BridgeContext);\n const store = useContext(StoreContext);\n+ const { dispatch: modalDialogDispatch } = useContext(ModalDialogContext);\n \n const { read } = useContext(InspectedElementContext);\n \n@@ -72,6 +78,63 @@ export default function SelectedElement(_: Props) {\n }\n }, [inspectedElementID, viewElementSource]);\n \n+ const canViewSource =\n+ inspectedElement &&\n+ inspectedElement.canViewSource &&\n+ viewElementSource !== null;\n+\n+ const isSuspended =\n+ element !== null &&\n+ element.type === ElementTypeSuspense &&\n+ inspectedElement != null &&\n+ inspectedElement.state != null;\n+\n+ const canToggleSuspense =\n+ inspectedElement != null && inspectedElement.canToggleSuspense;\n+\n+ \/\/ TODO (suspense toggle) Would be nice to eventually use a two setState pattern here as well.\n+ const toggleSuspended = useCallback(() => {\n+ let nearestSuspenseElement = null;\n+ let currentElement = element;\n+ while (currentElement !== null) {\n+ if (currentElement.type === ElementTypeSuspense) {\n+ nearestSuspenseElement = currentElement;\n+ break;\n+ } else if (currentElement.parentID > 0) {\n+ currentElement = store.getElementByID(currentElement.parentID);\n+ } else {\n+ currentElement = null;\n+ }\n+ }\n+\n+ \/\/ If we didn't find a Suspense ancestor, we can't suspend.\n+ \/\/ Instead we can show a warning to the user.\n+ if (nearestSuspenseElement === null) {\n+ modalDialogDispatch({\n+ type: 'SHOW',\n+ content: ,\n+ });\n+ } else {\n+ const nearestSuspenseElementID = nearestSuspenseElement.id;\n+\n+ \/\/ If we're suspending from an arbitary (non-Suspense) component, select the nearest Suspense element in the Tree.\n+ \/\/ This way when the fallback UI is shown and the current element is hidden, something meaningful is selected.\n+ if (nearestSuspenseElement !== element) {\n+ dispatch({\n+ type: 'SELECT_ELEMENT_BY_ID',\n+ payload: nearestSuspenseElementID,\n+ });\n+ }\n+\n+ \/\/ Toggle suspended\n+ bridge.send('overrideSuspense', {\n+ id: nearestSuspenseElementID,\n+ rendererID: store.getRendererIDForElement(nearestSuspenseElementID),\n+ forceFallback: !isSuspended,\n+ });\n+ }\n+ }, [bridge, dispatch, element, isSuspended, modalDialogDispatch, store]);\n+\n if (element === null) {\n return (\n

\n@@ -80,11 +143,6 @@ export default function SelectedElement(_: Props) {\n );\n }\n \n- const canViewSource =\n- inspectedElement &&\n- inspectedElement.canViewSource &&\n- viewElementSource !== null;\n-\n return (\n

\n@@ -94,6 +152,20 @@ export default function SelectedElement(_: Props) {\n <\/div>\n <\/div>\n \n+ {canToggleSuspense && (\n+ \n+ \n+ <\/Toggle>\n+ )}\n \n );\n }\n+\n+function CannotSuspendWarningMessage() {\n+ const store = useContext(StoreContext);\n+ const areSuspenseElementsHidden = !!store.componentFilters.find(\n+ filter =>\n+ filter.type === ComponentFilterElementType &&\n+ filter.value === ElementTypeSuspense &&\n+ filter.isEnabled\n+ );\n+\n+ \/\/ Has the user filted out Suspense nodes from the tree?\n+ \/\/ If so, the selected element might actually be in a Suspense tree after all.\n+ if (areSuspenseElementsHidden) {\n+ return (\n+

\n+ Suspended state cannot be toggled while Suspense components are hidden.\n+ Disable the filter and try agan.\n+ <\/div>\n+ );\n+ } else {\n+ return (\n+

\n+ The selected element is not within a Suspense container. Suspending it\n+ would cause an error.\n+ <\/div>\n+ );\n+ }\n+}\ndiff --git a\/src\/devtools\/views\/Components\/ToggleCommitFilterModalButton.css b\/src\/devtools\/views\/Components\/ToggleComponentFiltersModalButton.css\nsimilarity index 100%\nrename from src\/devtools\/views\/Components\/ToggleCommitFilterModalButton.css\nrename to src\/devtools\/views\/Components\/ToggleComponentFiltersModalButton.css\ndiff --git a\/src\/devtools\/views\/Components\/ToggleComponentFiltersModalButton.js b\/src\/devtools\/views\/Components\/ToggleComponentFiltersModalButton.js\nindex e3031b4e60..189454d349 100644\n--- a\/src\/devtools\/views\/Components\/ToggleComponentFiltersModalButton.js\n+++ b\/src\/devtools\/views\/Components\/ToggleComponentFiltersModalButton.js\n@@ -8,11 +8,11 @@ import Toggle from '..\/Toggle';\n import ButtonIcon from '..\/ButtonIcon';\n import Store from 'src\/devtools\/store';\n \n-import styles from '.\/ToggleCommitFilterModalButton.css';\n+import styles from '.\/ToggleComponentFiltersModalButton.css';\n \n import type { ComponentFilter } from 'src\/types';\n \n-export default function ToggleCommitFilterModalButton() {\n+export default function ToggleComponentFiltersModalButton() {\n const store = useContext(StoreContext);\n \n const { isModalShowing, setIsModalShowing } = useContext(\ndiff --git a\/src\/devtools\/views\/DevTools.js b\/src\/devtools\/views\/DevTools.js\nindex 53ac73eaa4..1efc67a707 100644\n--- a\/src\/devtools\/views\/DevTools.js\n+++ b\/src\/devtools\/views\/DevTools.js\n@@ -16,6 +16,7 @@ import { SettingsContextController } from '.\/Settings\/SettingsContext';\n import { TreeContextController } from '.\/Components\/TreeContext';\n import ViewElementSourceContext from '.\/Components\/ViewElementSourceContext';\n import { ProfilerContextController } from '.\/Profiler\/ProfilerContext';\n+import { ModalDialogContextController } from '.\/ModalDialog';\n import ReactLogo from '.\/ReactLogo';\n \n import styles from '.\/DevTools.css';\n@@ -116,62 +117,64 @@ export default function DevTools({\n return (\n \n \n- \n- \n- \n- \n-

\n- {showTabBar && (\n-

\n- \n- \n- {process.env.DEVTOOLS_VERSION}\n- <\/span>\n-

\n- \n+ \n+ \n+ \n+ \n+

\n+ {showTabBar && (\n+

\n+ \n+ \n+ {process.env.DEVTOOLS_VERSION}\n+ <\/span>\n+

\n+ \n+ <\/div>\n+ )}\n+ \n+ \n+ <\/div>\n+ \n+ \n <\/div>\n- )}\n- \n- \n- <\/div>\n- \n- \n- <\/div>\n- \n- \n+ \n+ \n+ <\/div>\n <\/div>\n- <\/div>\n- <\/ProfilerContextController>\n- <\/TreeContextController>\n- <\/ViewElementSourceContext.Provider>\n- <\/SettingsContextController>\n+ <\/ProfilerContextController>\n+ <\/TreeContextController>\n+ <\/ViewElementSourceContext.Provider>\n+ <\/SettingsContextController>\n+ <\/ModalDialogContextController>\n <\/StoreContext.Provider>\n <\/BridgeContext.Provider>\n );\ndiff --git a\/src\/devtools\/views\/Profiler\/ImportFailedModal.css b\/src\/devtools\/views\/ModalDialog.css\nsimilarity index 77%\nrename from src\/devtools\/views\/Profiler\/ImportFailedModal.css\nrename to src\/devtools\/views\/ModalDialog.css\nindex ec0416caf1..f1971b6fab 100644\n--- a\/src\/devtools\/views\/Profiler\/ImportFailedModal.css\n+++ b\/src\/devtools\/views\/ModalDialog.css\n@@ -13,6 +13,7 @@\n .Dialog {\n position: relative;\n z-index: 3;\n+ width: 25rem;\n min-width: 20rem;\n max-width: 100%;\n display: inline-block;\n@@ -22,18 +23,12 @@\n border-radius: 0.25rem;\n }\n \n-.Header {\n+.Title {\n font-size: var(--font-size-sans-large);\n margin-bottom: 0.5rem;\n }\n \n .Buttons {\n text-align: right;\n-}\n-\n-.ErrorMessage {\n- margin: 0.5rem 0;\n- color: var(--color-dim);\n- font-family: var(--font-family-monospace);\n- font-size: var(--font-size-monospace-normal);\n+ margin-top: 0.5rem;\n }\ndiff --git a\/src\/devtools\/views\/ModalDialog.js b\/src\/devtools\/views\/ModalDialog.js\nnew file mode 100644\nindex 0000000000..b9ca5cc974\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/ModalDialog.js\n@@ -0,0 +1,121 @@\n+\/\/ @flow\n+\n+import React, {\n+ createContext,\n+ useCallback,\n+ useContext,\n+ useMemo,\n+ useReducer,\n+ useRef,\n+} from 'react';\n+import Button from '.\/Button';\n+import { useModalDismissSignal } from '.\/hooks';\n+\n+import styles from '.\/ModalDialog.css';\n+\n+type DIALOG_ACTION_HIDE = {|\n+ type: 'HIDE',\n+|};\n+type DIALOG_ACTION_SHOW = {|\n+ type: 'SHOW',\n+ content: React$Node,\n+ title?: React$Node | null,\n+|};\n+\n+type Action = DIALOG_ACTION_HIDE | DIALOG_ACTION_SHOW;\n+\n+type Dispatch = (action: Action) => void;\n+\n+type State = {|\n+ content: React$Node | null,\n+ isVisible: boolean,\n+ title: React$Node | null,\n+|};\n+\n+type ModalDialogContextType = {|\n+ ...State,\n+ dispatch: Dispatch,\n+|};\n+\n+const ModalDialogContext = createContext(\n+ ((null: any): ModalDialogContextType)\n+);\n+ModalDialogContext.displayName = 'ModalDialogContext';\n+\n+function dialogReducer(state, action) {\n+ switch (action.type) {\n+ case 'HIDE':\n+ return {\n+ content: null,\n+ isVisible: false,\n+ title: null,\n+ };\n+ case 'SHOW':\n+ return {\n+ content: action.content,\n+ isVisible: true,\n+ title: action.title || null,\n+ };\n+ default:\n+ throw new Error(`Invalid action \"${action.type}\"`);\n+ }\n+}\n+\n+type Props = {|\n+ children: React$Node,\n+|};\n+\n+function ModalDialogContextController({ children }: Props) {\n+ const [state, dispatch] = useReducer(dialogReducer, {\n+ content: null,\n+ isVisible: false,\n+ title: null,\n+ });\n+\n+ const value = useMemo(\n+ () => ({\n+ content: state.content,\n+ isVisible: state.isVisible,\n+ title: state.title,\n+ dispatch,\n+ }),\n+ [state, dispatch]\n+ );\n+\n+ return (\n+ \n+ {children}\n+ <\/ModalDialogContext.Provider>\n+ );\n+}\n+\n+function ModalDialog(_: {||}) {\n+ const { isVisible } = useContext(ModalDialogContext);\n+ return isVisible ? : null;\n+}\n+\n+function ModalDialogImpl(_: {||}) {\n+ const { content, dispatch, title } = useContext(ModalDialogContext);\n+ const dismissModal = useCallback(() => dispatch({ type: 'HIDE' }), [\n+ dispatch,\n+ ]);\n+ const modalRef = useRef(null);\n+\n+ useModalDismissSignal(modalRef, dismissModal);\n+\n+ return (\n+

\n+

\n+ {title !== null &&

{title}<\/div>}\n+ {content}\n+

\n+

dillon1000/react

Files changed