From c86a6809cbdca8d6f20e0834a04a13ecd61f9f35 Mon Sep 17 00:00:00 2001
From: Pritesh Nandgaonkar <prit91@fb.com>
Date: Fri, 21 Jun 2019 03:40:18 -0700
Subject: [PATCH] Stacktrace rows now wrap into other line as it made difficult
 to read it with scroll bars

Summary:
When the stack trace is too long its difficult to read the stack trace as the scroll bar shows up. This diff makes the stack trace text to wrap onto the next line, inorder to avoid scrolling. Look at the attached image, to understand the bug.

{F162756039}

Reviewed By: passy

Differential Revision: D15921226

fbshipit-source-id: f7320951ccdcf531f4276088e3f3ee0f552ab2fc
---
 src/plugins/crash_reporter/index.js | 36 +++++++++++++++++++++++------
 1 file changed, 29 insertions(+), 7 deletions(-)

diff --git a/src/plugins/crash_reporter/index.js b/src/plugins/crash_reporter/index.js
index 32964e3f2..d485d3350 100644
--- a/src/plugins/crash_reporter/index.js
+++ b/src/plugins/crash_reporter/index.js
@@ -21,7 +21,6 @@ import {
   getPersistedState,
   BaseDevice,
   shouldParseAndroidLog,
-  StackTrace,
   Text,
   colors,
   Toolbar,
@@ -115,6 +114,9 @@ const Value = styled(Text)({
   maxHeight: 200,
   flexGrow: 1,
   textOverflow: 'ellipsis',
+  whiteSpace: 'normal',
+  wordWrap: 'break-word',
+  lineHeight: 2,
   marginLeft: 8,
   marginRight: 8,
   overflow: 'hidden',
@@ -167,6 +169,11 @@ const StyledSelect = styled(Select)({
   maxWidth: 200,
 });
 
+const StackTraceContainer = styled(FlexColumn)({
+  backgroundColor: colors.greyStackTraceTint,
+  flexShrink: 0,
+});
+
 export function getNewPersisitedStateFromCrashLog(
   persistedState: ?PersistedState,
   persistingPlugin: Class<FlipperDevicePlugin<> | FlipperPlugin<>>,
@@ -483,6 +490,24 @@ class HeaderRow extends Component<HeaderRowProps> {
   }
 }
 
+type StackTraceComponentProps = {
+  stacktrace: string,
+};
+
+class StackTraceComponent extends Component<StackTraceComponentProps> {
+  render() {
+    const {stacktrace} = this.props;
+    return (
+      <StackTraceContainer>
+        <Padder paddingTop={8} paddingBottom={2} paddingLeft={8}>
+          <Value code={true}>{stacktrace}</Value>
+        </Padder>
+        <Line />
+      </StackTraceContainer>
+    );
+  }
+}
+
 export default class CrashReporterPlugin extends FlipperDevicePlugin<
   State,
   void,
@@ -722,12 +747,9 @@ export default class CrashReporterPlugin extends FlipperDevicePlugin<
                 },
               ]}>
               <Line />
-              <StackTrace
-                children={children}
-                isCrash={false}
-                padded={false}
-                backgroundColor={colors.greyStackTraceTint}
-              />
+              {children.map(child => {
+                return <StackTraceComponent stacktrace={child.message} />;
+              })}
             </ContextMenu>
           </ScrollableColumn>
         </FlexColumn>