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

@@ -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>