Show full message on click

eps1lon · Dec 16, 2020 · 92ebd81 · 92ebd81
1 parent 5719f31
commit 92ebd81
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/...t-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.css b/...t-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/...ct-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js b/...ct-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>
   );
 }