diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.css b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.css index 6ef5583b8957c..b6c8022396d24 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.css +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.css @@ -31,11 +31,16 @@ } .Message { + cursor: default; overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap; } +.Message[data-expanded="true"] { + white-space: pre-wrap; +} + .ErrorBadge, .WarningBadge { display: inline-block; diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js index bae3a130ba9f0..7294646e11962 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js @@ -135,11 +135,20 @@ function ErrorOrWarningView({ count, message, }: ErrorOrWarningViewProps) { - // TODO Render .ErrorBadge or .WarningBadge if count > 1. + const [expanded, toggleExpanded] = React.useReducer( + currentlyExpanded => !currentlyExpanded, + false, + ); + return (