Permalink
Browse files

open in editor button for yellow box

Summary:
Here is the demo https://www.dropbox.com/s/ljh7f9654sqgdqc/demo.mov?dl=0
Closes #8418

Differential Revision: D3499515

Pulled By: frantic

fbshipit-source-id: 1bd4cd79770f1bf1b82723ad803359df177ca3c5
  • Loading branch information...
1 parent 91ff686 commit c65eb4ef19ae07e99ff5c6f172bcd431ba05d6b8 @skv-headless skv-headless committed with Facebook Github Bot Jul 13, 2016
@@ -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) {
@@ -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;
@@ -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,

1 comment on commit c65eb4e

@alexprice91

Great! Thanks!

Please sign in to comment.