From 92ebd817278e1024094c02995a4f7a586777ef4f Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Wed, 16 Dec 2020 20:18:21 +0100
Subject: [PATCH] Show full message on click

---
 .../InspectedElementErrorsAndWarningsTree.css       |  5 +++++
 .../InspectedElementErrorsAndWarningsTree.js        | 13 +++++++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)

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 (
     <div className={className}>
       {count > 1 && <div className={badgeClassName}>{count}</div>}
-      <div className={styles.Message}>{message}</div>
+      <div
+        className={styles.Message}
+        data-expanded={expanded}
+        onClick={toggleExpanded}>
+        {message}
+      </div>
     </div>
   );
 }