open in editor button for yellow box

Summary:
Here is the demo https://www.dropbox.com/s/ljh7f9654sqgdqc/demo.mov?dl=0
Closes https://github.com/facebook/react-native/pull/8418

Differential Revision: D3499515

Pulled By: frantic

fbshipit-source-id: 1bd4cd79770f1bf1b82723ad803359df177ca3c5

Libraries/Inspector/ElementProperties.js

@@ -24,7 +24,7 @@ var {fetch} = require('fetch');
 
 var flattenStyle = require('flattenStyle');
 var mapWithSeparator = require('mapWithSeparator');
-var getDevServer = require('getDevServer');
+var openFileInEditor = require('openFileInEditor');
 
 var ElementProperties = React.createClass({
   propTypes: {
@@ -52,7 +52,7 @@ var ElementProperties = React.createClass({
       openFileButton = (
         <TouchableHighlight
           style={styles.openButton}
-          onPress={this._openFile.bind(null, fileName, lineNumber)}>
+          onPress={openFileInEditor.bind(null, fileName, lineNumber)}>
           <Text style={styles.openButtonTitle} numberOfLines={1}>
             {fileNameShort}:{lineNumber}
           </Text>
@@ -95,13 +95,6 @@ var ElementProperties = React.createClass({
       </TouchableWithoutFeedback>
     );
   },
-
-  _openFile: function(fileName: string, lineNumber: number) {
-    fetch(getDevServer().url + 'open-stack-frame', {
-      method: 'POST',
-      body: JSON.stringify({file: fileName, lineNumber}),
-    });
-  },
 });
 
 function getInstanceName(instance) {

Libraries/JavaScriptAppEngine/Initialization/openFileInEditor.js

@@ -0,0 +1,23 @@
+/**
+ * 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 openFileInEditor
+ * @flow
+ */
+'use strict';
+
+const getDevServer = require('getDevServer');
+
+function openFileInEditor(file: string, lineNumber: number) {
+  fetch(getDevServer().url + 'open-stack-frame', {
+    method: 'POST',
+    body: JSON.stringify({file, lineNumber}),
+  });
+}
+
+module.exports = openFileInEditor;

Libraries/ReactIOS/YellowBox.js

@@ -19,6 +19,7 @@ const StyleSheet = require('StyleSheet');
 const infoLog = require('infoLog');
 const parseErrorStack = require('parseErrorStack');
 const symbolicateStackTrace = require('symbolicateStackTrace');
+const openFileInEditor = require('openFileInEditor');
 
 import type EmitterSubscription from 'EmitterSubscription';
 import type {StackFrame} from 'parseErrorStack';
@@ -172,12 +173,21 @@ const WarningRow = ({count, warning, onPress}) => {
 type StackRowProps = { frame: StackFrame };
 const StackRow = ({frame}: StackRowProps) => {
   const Text = require('Text');
-  const fileParts = frame.file.split('/');
+  const TouchableHighlight = require('TouchableHighlight');
+  const {file, lineNumber} = frame;
+  const fileParts = file.split('/');
   const fileName = fileParts[fileParts.length - 1];
+
   return (
-    <Text style={styles.inspectorCountText}>
-      {`${fileName}:${frame.lineNumber}`}
-    </Text>
+    <TouchableHighlight
+      activeOpacity={0.5}
+      style={styles.openInEditorButton}
+      underlayColor="transparent"
+      onPress={openFileInEditor.bind(null, file, lineNumber)}>
+      <Text style={styles.inspectorCountText}>
+        {fileName}:{lineNumber}
+      </Text>
+    </TouchableHighlight>
   );
 };
 
@@ -220,7 +230,7 @@ const WarningInspector = ({
           <TouchableHighlight
             activeOpacity={0.5}
             onPress={toggleStacktrace}
-            style={styles.stacktraceButton}
+            style={styles.toggleStacktraceButton}
             underlayColor="transparent">
             <Text style={styles.inspectorButtonText}>
               {stacktraceVisible ? 'Hide' : 'Show'} Stacktrace
@@ -394,7 +404,7 @@ var styles = StyleSheet.create({
     padding: 22,
     backgroundColor: backgroundColor(1),
   },
-  stacktraceButton: {
+  toggleStacktraceButton: {
     flex: 1,
     padding: 5,
   },
@@ -411,6 +421,10 @@ var styles = StyleSheet.create({
     flex: 1,
     paddingTop: 5,
   },
+  openInEditorButton: {
+    paddingTop: 5,
+    paddingBottom: 5,
+  },
   inspectorCount: {
     padding: 15,
     paddingBottom: 0,