Add timing/benchmarking fascility and UI (#1128)

src/StoreHydrator.js

@@ -3,7 +3,7 @@ import React, { PureComponent } from 'react';
 import { Provider } from 'react-redux';
 
 import store, { restore } from './store';
-
+import timing from './utils/timing';
 import LoadingScreen from './start/LoadingScreen';
 import Providers from './Providers';
 
@@ -17,7 +17,9 @@ export default class StoreHydrator extends PureComponent {
   };
 
   componentWillMount() {
+    timing.start('Store hydration');
     restore(() => {
+      timing.end('Store hydration');
       this.setState({ isHydrated: true });
     });
   }

src/i18n/translations/messages_en.json

@@ -71,5 +71,6 @@
   "Diagnostics": "Diagnostics",
   "Toggle compose tools": "Toggle compose tools",
   "Terms of service": "Terms of service",
-  "Privacy policy": "Privacy policy"
+  "Privacy policy": "Privacy policy",
+  "Timing": "Timing"
 }

src/nav/AppNavigator.js

@@ -16,6 +16,7 @@ import LoadingScreen from '../start/LoadingScreen';
 import SettingsScreen from '../settings/SettingsScreen';
 import LanguageScreen from '../settings/LanguageScreen';
 import DiagnosticsScreen from '../settings/DiagnosticsScreen';
+import TimingScreen from '../settings/TimingScreen';
 import LightboxScreen from '../lightbox/LightboxScreen';
 import GroupScreen from '../group/GroupScreen';
 
@@ -38,6 +39,7 @@ export default StackNavigator(
     lightbox: { screen: LightboxScreen },
     group: { screen: GroupScreen },
     diagnostics: { screen: DiagnosticsScreen },
+    timing: { screen: TimingScreen },
   },
   {
     initialRouteName: 'main',

src/nav/navActions.js

@@ -53,3 +53,5 @@ export const navigateToCreateGroup = (): Action =>
 
 export const navigateToDiagnostics = (): Action =>
   NavigationActions.navigate({ routeName: 'diagnostics' });
+
+export const navigateToTiming = (): Action => NavigationActions.navigate({ routeName: 'timing' });

src/settings/SettingsCard.js

@@ -13,7 +13,7 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   divider: {
-    height: 30,
+    height: 16,
   },
   padding: {
     padding: 16,
@@ -74,6 +74,8 @@ export default class SettingsCard extends PureComponent {
         <OptionButton label="Language" onPress={actions.navigateToLanguage} />
         <View style={styles.divider} />
         <OptionButton label="Diagnostics" onPress={actions.navigateToDiagnostics} />
+        <View style={styles.divider} />
+        <OptionButton label="Timing" onPress={actions.navigateToTiming} />
         <View style={styles.padding}>
           <WebLink label="Terms of service" href="/terms/" />
           <WebLink label="Privacy policy" href="/privacy/" />

src/settings/TimeItem.js

@@ -0,0 +1,43 @@
+/* @flow */
+import React, { PureComponent } from 'react';
+import { StyleSheet, View } from 'react-native';
+import format from 'date-fns/format';
+import differenceInMilliseconds from 'date-fns/difference_in_milliseconds';
+
+import { RawLabel } from '../common';
+
+const styles = StyleSheet.create({
+  item: {
+    padding: 16,
+    borderBottomWidth: 1,
+    borderColor: 'rgba(127, 127, 127, 0.25)',
+  },
+  label: {
+    fontWeight: 'bold',
+  },
+  value: {
+    opacity: 0.9,
+  },
+});
+
+export default class TimeItem extends PureComponent {
+  props: {
+    text: string,
+    start: Date,
+    end: Date,
+  };
+
+  render() {
+    const { text, start, end } = this.props;
+    const startStr = format(start, 'HH:mm:ss'); // eslint-disable-line
+    const durationStr = differenceInMilliseconds(end, start);
+    const timingStr = `Start: ${startStr}   Duration: ${durationStr} ms`;
+
+    return (
+      <View style={styles.item}>
+        <RawLabel style={styles.label} text={text} />
+        <RawLabel style={styles.value} text={timingStr} />
+      </View>
+    );
+  }
+}

src/settings/TimingScreen.js

@@ -0,0 +1,21 @@
+/* @flow */
+import React, { PureComponent } from 'react';
+import { FlatList } from 'react-native';
+
+import { Screen } from '../common';
+import TimeItem from './TimeItem';
+import timing from '../utils/timing';
+
+export default class TimingScreen extends PureComponent {
+  render() {
+    return (
+      <Screen title="Timing">
+        <FlatList
+          data={timing.log}
+          keyExtractor={item => item}
+          renderItem={({ item }) => <TimeItem text={item.text} start={item.start} end={item.end} />}
+        />
+      </Screen>
+    );
+  }
+}

src/types.js

@@ -428,3 +428,9 @@ export type RenderedSectionDescriptor = {
 };
 
 export type DraftState = { string: string };
+
+export type TimingItem = {
+  text: string,
+  start: Date,
+  end: Date,
+};

src/utils/timing.js

@@ -0,0 +1,31 @@
+/* @flow */
+import { TimingItem } from '../types';
+
+const timingMap = {};
+const log: TimingItem[] = [];
+
+const start = (key: string) => {
+  timingMap[key] = Date.now();
+};
+
+const end = (key: string) => {
+  if (timingMap[key]) {
+    log.push({
+      text: key,
+      start: timingMap[key],
+      end: Date.now(),
+    });
+    delete timingMap[key];
+  } else {
+    log.push({
+      text: key,
+      end: Date.now(),
+    });
+  }
+};
+
+export default {
+  start,
+  end,
+  log,
+};