LogBox - Add app version and move meta info

Summary:
This diff adds a new API `setAppInfo` to add app version and engine to LogBox and changes the way they're displayed so that they're more subtle and visible for screenshots.

Changelog: [Internal]

Reviewed By: cpojer

Differential Revision: D18592992

fbshipit-source-id: 1c57b21fa9dca93029ffc92acf1287f3ee247f4d

Libraries/LogBox/Data/LogBoxData.js

@@ -56,8 +56,14 @@ export type WarningInfo = {|
 
 export type WarningFilter = (format: string) => WarningInfo;
 
+type AppInfo = $ReadOnly<{|
+  appVersion: string,
+  engine: string,
+|}>;
+
 const observers: Set<{observer: Observer}> = new Set();
 const ignorePatterns: Set<IgnorePattern> = new Set();
+let appInfo: ?() => AppInfo = null;
 let logs: LogBoxLogs = new Set();
 let updateTimeout = null;
 let _isDisabled = false;
@@ -295,6 +301,14 @@ export function setWarningFilter(filter: WarningFilter): void {
   warningFilter = filter;
 }
 
+export function setAppInfo(info: () => AppInfo): void {
+  appInfo = info;
+}
+
+export function getAppInfo(): ?AppInfo {
+  return appInfo != null ? appInfo() : null;
+}
+
 export function checkWarningFilter(format: string): WarningInfo {
   return warningFilter(format);
 }

Libraries/LogBox/Data/__tests__/LogBoxData-test.js

@@ -709,4 +709,18 @@ describe('LogBoxData', () => {
     expect(LogBoxData.isLogBoxErrorMessage(receivedErrorMessage)).toBe(true);
     expect(LogBoxData.isLogBoxErrorMessage('Some other error')).toBe(false);
   });
+
+  it('getAppInfo returns null without any function registered', () => {
+    expect(LogBoxData.getAppInfo()).toBe(null);
+  });
+
+  it('getAppInfo returns the registered app info', () => {
+    const info = {
+      appVersion: 'App Version',
+      engine: 'Hermes',
+    };
+
+    LogBoxData.setAppInfo(() => info);
+    expect(LogBoxData.getAppInfo()).toBe(info);
+  });
 });

Libraries/LogBox/UI/LogBoxInspector.js

@@ -22,7 +22,6 @@ import LogBoxInspectorFooter from './LogBoxInspectorFooter';
 import LogBoxInspectorMessageHeader from './LogBoxInspectorMessageHeader';
 import LogBoxInspectorReactFrames from './LogBoxInspectorReactFrames';
 import LogBoxInspectorStackFrames from './LogBoxInspectorStackFrames';
-import LogBoxInspectorMeta from './LogBoxInspectorMeta';
 import LogBoxInspectorHeader from './LogBoxInspectorHeader';
 import * as LogBoxStyle from './LogBoxStyle';
 
@@ -122,7 +121,6 @@ function LogBoxInspectorBody(props) {
           <LogBoxInspectorCodeFrame codeFrame={props.log.codeFrame} />
           <LogBoxInspectorReactFrames log={props.log} />
           <LogBoxInspectorStackFrames log={props.log} onRetry={props.onRetry} />
-          <LogBoxInspectorMeta />
         </ScrollView>
       </>
     );
@@ -139,7 +137,6 @@ function LogBoxInspectorBody(props) {
       <LogBoxInspectorCodeFrame codeFrame={props.log.codeFrame} />
       <LogBoxInspectorReactFrames log={props.log} />
       <LogBoxInspectorStackFrames log={props.log} onRetry={props.onRetry} />
-      <LogBoxInspectorMeta />
     </ScrollView>
   );
 }

Libraries/LogBox/UI/LogBoxInspectorCodeFrame.js

@@ -21,6 +21,7 @@ import LogBoxButton from './LogBoxButton';
 import openFileInEditor from '../../Core/Devtools/openFileInEditor';
 import stripAnsi from 'strip-ansi';
 import LogBoxInspectorSection from './LogBoxInspectorSection';
+import * as LogBoxData from '../Data/LogBoxData';
 type Props = $ReadOnly<{|
   codeFrame: ?CodeFrame,
 |}>;
@@ -41,7 +42,7 @@ function LogBoxInspectorCodeFrame(props: Props): React.Node {
   }
 
   return (
-    <LogBoxInspectorSection heading="Source">
+    <LogBoxInspectorSection heading="Source" action={<AppInfo />}>
       <View style={styles.box}>
         <View style={styles.frame}>
           <ScrollView horizontal>
@@ -69,6 +70,29 @@ function LogBoxInspectorCodeFrame(props: Props): React.Node {
   );
 }
 
+function AppInfo() {
+  const appInfo = LogBoxData.getAppInfo();
+  if (appInfo == null) {
+    return null;
+  }
+
+  return (
+    <Text style={appInfoStyles.text}>
+      {appInfo.appVersion} ({appInfo.engine})
+    </Text>
+  );
+}
+
+const appInfoStyles = StyleSheet.create({
+  text: {
+    color: LogBoxStyle.getTextColor(0.4),
+    fontSize: 12,
+    lineHeight: 12,
+    flex: 0,
+    flexGrow: 0,
+  },
+});
+
 const styles = StyleSheet.create({
   box: {
     backgroundColor: LogBoxStyle.getBackgroundColor(),

Libraries/LogBox/UI/LogBoxInspectorMeta.js

@@ -1,70 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow strict-local
- * @format
- */
-
-'use strict';
-
-import * as React from 'react';
-import StyleSheet from '../../StyleSheet/StyleSheet';
-import Text from '../../Text/Text';
-import View from '../../Components/View/View';
-import Platform from '../../Utilities/Platform';
-import * as LogBoxStyle from './LogBoxStyle';
-import LogBoxInspectorSection from './LogBoxInspectorSection';
-type Props = $ReadOnly<{||}>;
-
-function LogBoxInspectorMeta(props: Props): React.Node {
-  return (
-    <LogBoxInspectorSection heading="Meta">
-      <View style={metaStyles.body}>
-        <View style={metaStyles.bodyItem}>
-          <Text style={metaStyles.bodyText}>Platform</Text>
-          <Text style={metaStyles.bodyText}>Engine</Text>
-        </View>
-        <View style={metaStyles.bodyItem}>
-          {/* TODO: Determine engine correctly */}
-          <Text style={[metaStyles.bodyText, metaStyles.bodyTextRight]}>
-            {Platform.OS === 'android' ? 'Android' : 'iOS'}
-          </Text>
-          <Text style={[metaStyles.bodyText, metaStyles.bodyTextRight]}>
-            {global.HermesInternal ? 'Hermes' : 'Unknown'}
-          </Text>
-        </View>
-      </View>
-    </LogBoxInspectorSection>
-  );
-}
-
-const metaStyles = StyleSheet.create({
-  body: {
-    paddingLeft: 25,
-    paddingRight: 25,
-    paddingBottom: 20,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-  bodyItem: {
-    flex: 0,
-  },
-  bodyText: {
-    color: LogBoxStyle.getTextColor(0.5),
-    fontSize: 14,
-    paddingTop: 3,
-    paddingBottom: 3,
-    includeFontPadding: false,
-    lineHeight: 20,
-    flex: 0,
-    flexGrow: 0,
-  },
-  bodyTextRight: {
-    textAlign: 'right',
-  },
-});
-
-export default LogBoxInspectorMeta;

Libraries/LogBox/UI/__tests__/LogBoxInspectorMeta-test.js

@@ -1,24 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @format
- * @emails oncall+react_native
- * @flow
- */
-
-'use strict';
-
-const React = require('react');
-const LogBoxInspectorMeta = require('../LogBoxInspectorMeta').default;
-const render = require('../../../../jest/renderer');
-
-describe('LogBoxInspectorMeta', () => {
-  it('should render meta information', () => {
-    const output = render.shallowRender(<LogBoxInspectorMeta />);
-
-    expect(output).toMatchSnapshot();
-  });
-});

Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorCodeFrame-test.js.snap

@@ -2,6 +2,7 @@
 
 exports[`LogBoxInspectorCodeFrame should render a code frame 1`] = `
 <LogBoxInspectorSection
+  action={<AppInfo />}
   heading="Source"
 >
   <View

Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorMeta-test.js.snap

@@ -1,110 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`LogBoxInspectorMeta should render meta information 1`] = `
-<LogBoxInspectorSection
-  heading="Meta"
->
-  <View
-    style={
-      Object {
-        "flexDirection": "row",
-        "justifyContent": "space-between",
-        "paddingBottom": 20,
-        "paddingLeft": 25,
-        "paddingRight": 25,
-      }
-    }
-  >
-    <View
-      style={
-        Object {
-          "flex": 0,
-        }
-      }
-    >
-      <Text
-        style={
-          Object {
-            "color": "rgba(255, 255, 255, 0.5)",
-            "flex": 0,
-            "flexGrow": 0,
-            "fontSize": 14,
-            "includeFontPadding": false,
-            "lineHeight": 20,
-            "paddingBottom": 3,
-            "paddingTop": 3,
-          }
-        }
-      >
-        Platform
-      </Text>
-      <Text
-        style={
-          Object {
-            "color": "rgba(255, 255, 255, 0.5)",
-            "flex": 0,
-            "flexGrow": 0,
-            "fontSize": 14,
-            "includeFontPadding": false,
-            "lineHeight": 20,
-            "paddingBottom": 3,
-            "paddingTop": 3,
-          }
-        }
-      >
-        Engine
-      </Text>
-    </View>
-    <View
-      style={
-        Object {
-          "flex": 0,
-        }
-      }
-    >
-      <Text
-        style={
-          Array [
-            Object {
-              "color": "rgba(255, 255, 255, 0.5)",
-              "flex": 0,
-              "flexGrow": 0,
-              "fontSize": 14,
-              "includeFontPadding": false,
-              "lineHeight": 20,
-              "paddingBottom": 3,
-              "paddingTop": 3,
-            },
-            Object {
-              "textAlign": "right",
-            },
-          ]
-        }
-      >
-        iOS
-      </Text>
-      <Text
-        style={
-          Array [
-            Object {
-              "color": "rgba(255, 255, 255, 0.5)",
-              "flex": 0,
-              "flexGrow": 0,
-              "fontSize": 14,
-              "includeFontPadding": false,
-              "lineHeight": 20,
-              "paddingBottom": 3,
-              "paddingTop": 3,
-            },
-            Object {
-              "textAlign": "right",
-            },
-          ]
-        }
-      >
-        Unknown
-      </Text>
-    </View>
-  </View>
-</LogBoxInspectorSection>
-`;