Add some stall stuff as settings to native animated example

Reviewed By: fkgozali

Differential Revision: D3817885

fbshipit-source-id: 047f806411982aafdf7420eebadff063f56fee69

Examples/UIExplorer/js/NativeAnimationsExample.js

@@ -123,6 +123,52 @@ class ValueListenerExample extends React.Component {
   }
 }
 
+const UIExplorerSettingSwitchRow = require('UIExplorerSettingSwitchRow');
+class InternalSettings extends React.Component {
+  _stallInterval: ?number;
+  state: {busyTime: number | string, filteredStall: number};
+  render() {
+    return (
+      <View>
+        <UIExplorerSettingSwitchRow
+          initialValue={false}
+          label="Force JS Stalls"
+          onEnable={() => {
+            this._stallInterval = setInterval(() => {
+              const start = Date.now();
+              console.warn('burn CPU');
+              while ((Date.now() - start) < 100) {}
+            }, 300);
+          }}
+          onDisable={() => {
+            clearInterval(this._stallInterval || 0);
+          }}
+        />
+        <UIExplorerSettingSwitchRow
+          initialValue={false}
+          label="Track JS Stalls"
+          onEnable={() => {
+            require('JSEventLoopWatchdog').install({thresholdMS: 25});
+            this.setState({busyTime: '<none>'});
+            require('JSEventLoopWatchdog').addHandler({
+              onStall: ({busyTime}) => this.setState((state) => ({
+                busyTime,
+                filteredStall: (state.filteredStall || 0) * 0.97 + busyTime * 0.03,
+              })),
+            });
+          }}
+          onDisable={() => {
+            console.warn('Cannot disable yet....');
+          }}
+        />
+        {this.state && <Text>
+          JS Stall filtered: {Math.round(this.state.filteredStall)}, last: {this.state.busyTime}
+        </Text>}
+      </View>
+    );
+  }
+}
+
 const styles = StyleSheet.create({
   row: {
     padding: 10,
@@ -147,8 +193,7 @@ exports.examples = [
       return (
           <Tester
             type="timing"
-            config={{ duration: 1000 }}
+            config={{ duration: 1000 }}>
-          >
             {anim => (
               <Animated.View
                 style={[
@@ -198,8 +243,7 @@ exports.examples = [
       return (
           <Tester
             type="timing"
-            config={{ duration: 1000 }}
+            config={{ duration: 1000 }}>
-          >
             {anim => (
               <Animated.View
                 style={[
@@ -243,8 +287,7 @@ exports.examples = [
       return (
         <Tester
           type="timing"
-          config={{ duration: 1000 }}
+          config={{ duration: 1000 }}>
-        >
           {anim => (
             <Animated.View
               style={[
@@ -273,8 +316,7 @@ exports.examples = [
       return (
         <Tester
           type="timing"
-          config={{ duration: 1000 }}
+          config={{ duration: 1000 }}>
-        >
           {anim => (
             <Animated.View
               style={[
@@ -296,8 +338,7 @@ exports.examples = [
       return (
         <Tester
           type="timing"
-          config={{ duration: 1000 }}
+          config={{ duration: 1000 }}>
-        >
           {anim => (
             <Animated.View
               style={[
@@ -326,8 +367,7 @@ exports.examples = [
       return (
         <Tester
           type="spring"
-          config={{ bounciness: 0 }}
+          config={{ bounciness: 0 }}>
-        >
           {anim => (
             <Animated.View
               style={[
@@ -355,8 +395,7 @@ exports.examples = [
         <Tester
           type="decay"
           config={{ velocity: 0.5 }}
-          reverseConfig={{ velocity: -0.5 }}
+          reverseConfig={{ velocity: -0.5 }}>
-        >
           {anim => (
             <Animated.View
               style={[
@@ -383,4 +422,12 @@ exports.examples = [
       );
     },
   },
+  {
+    title: 'Internal Settings',
+    render: function() {
+      return (
+        <InternalSettings />
+      );
+    },
+  },
 ];

Examples/UIExplorer/js/UIExplorerSettingSwitchRow.js

@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule UIExplorerSettingSwitchRow
+ * @flow
+ */
+'use strict';
+
+const React = require('React');
+const StyleSheet = require('StyleSheet');
+const Switch = require('Switch');
+const Text = require('Text');
+const UIExplorerStatePersister = require('./UIExplorerStatePersister');
+const View = require('View');
+
+class UIExplorerSettingSwitchRow extends React.Component {
+  componentWillReceiveProps(newProps) {
+    const {onEnable, onDisable, persister} = this.props;
+    if (newProps.persister.state !== persister.state) {
+      newProps.persister.state ? onEnable() : onDisable();
+    }
+  }
+  render() {
+    const {label, persister} = this.props;
+    return (
+      <View style={styles.row}>
+        <Text>{label}</Text>
+        <Switch
+          value={persister.state}
+          onValueChange={(value) => {
+            persister.setState(() => value);
+          }}
+        />
+      </View>
+    );
+  }
+}
+const styles = StyleSheet.create({
+  row: {
+    padding: 10,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+});
+UIExplorerSettingSwitchRow = UIExplorerStatePersister.createContainer(UIExplorerSettingSwitchRow, {
+  cacheKeySuffix: ({label}) => 'Switch:' + label,
+  getInitialState: ({initialValue}) => initialValue,
+});
+module.exports = UIExplorerSettingSwitchRow;

Libraries/Interaction/JSEventLoopWatchdog.js

@@ -11,11 +11,12 @@
  */
 'use strict';
 
+const infoLog = require('infoLog');
 const performanceNow = require('fbjs/lib/performanceNow');
 
 type Handler = {
   onIterate?: () => void,
-  onStall: (params: {lastInterval: number}) => string,
+  onStall: (params: {lastInterval: number, busyTime: number}) => ?string,
 };
 
 /**
@@ -35,7 +36,7 @@ const JSEventLoopWatchdog = {
     return {stallCount, totalStallTime, longestStall, acceptableBusyTime};
   },
   reset: function() {
-    console.log('JSEventLoopWatchdog: reset');
+    infoLog('JSEventLoopWatchdog: reset');
     totalStallTime = 0;
     stallCount = 0;
     longestStall = 0;
@@ -62,9 +63,9 @@ const JSEventLoopWatchdog = {
         let msg = `JSEventLoopWatchdog: JS thread busy for ${busyTime}ms. ` +
           `${totalStallTime}ms in ${stallCount} stalls so far. `;
         handlers.forEach((handler) => {
-          msg += handler.onStall({lastInterval});
+          msg += handler.onStall({lastInterval, busyTime}) || '';
         });
-        console.log(msg);
+        infoLog(msg);
       }
       handlers.forEach((handler) => {
         handler.onIterate && handler.onIterate();