Remove unnecessary whitespace from code frames

Summary:
This removes common whitespace from a code frame to show more code. This is especially useful for heavily intended code that may not even be visible in the small window.

I am not 100% confident I wrote the right code because I'm under time pressure but it seems to work. I'm an intern and it's my last day.

Changelog: [Internal]

(Note: this ignores all push blocking failures!)

Reviewed By: rickhanlonii

Differential Revision: D18657572

fbshipit-source-id: 6b93999c4482891f2123d67005843ce5db0d2976

Libraries/LogBox/UI/AnsiHighlight.js

@@ -42,18 +42,43 @@ export default function Ansi({
   text: string,
   style: TextStyleProp,
 }): React.Node {
+  let commonWhitespaceLength = Infinity;
+  const parsedLines = text.split(/\n/).map(line =>
+    ansiToJson(line, {
+      json: true,
+      remove_empty: true,
+      use_classes: true,
+    }),
+  );
+
+  parsedLines.map(lines => {
+    // The third item on each line includes the whitespace of the source code.
+    // We are looking for the least amount of common whitespace to trim all lines.
+    // Example: Array [" ", " 96 |", "     text", ...]
+    const match = lines[2] && lines[2]?.content?.match(/^ +/);
+    const whitespaceLength = (match && match[0]?.length) || Infinity;
+    if (whitespaceLength < commonWhitespaceLength) {
+      commonWhitespaceLength = whitespaceLength;
+    }
+  });
+
+  const getText = (content, key) => {
+    if (key === 1) {
+      // Remove the vertical bar after line numbers
+      return content.replace(/\| $/, ' ');
+    } else if (key === 2 && commonWhitespaceLength < Infinity) {
+      // Remove common whitespace at the beginning of the line
+      return content.substr(commonWhitespaceLength);
+    } else {
+      return content;
+    }
+  };
+
   return (
     <View style={{flexDirection: 'column'}}>
-      {text.split(/\n/).map((line, i) => (
+      {parsedLines.map((items, i) => (
         <View style={{flexDirection: 'row'}} key={i}>
-          {ansiToJson(line, {
-            json: true,
-            remove_empty: true,
-            use_classes: true,
-          }).map((bundle, key) => {
-            // Remove the vertical bar after line numbers
-            const content =
-              key === 1 ? bundle.content.replace(/\| $/, ' ') : bundle.content;
+          {items.map((bundle, key) => {
             const textStyle =
               bundle.fg && COLORS[bundle.fg]
                 ? {
@@ -65,7 +90,7 @@ export default function Ansi({
                   };
             return (
               <Text style={[style, textStyle]} key={key}>
-                {content}
+                {getText(bundle.content, key)}
               </Text>
             );
           })}