Skip to content

Commit

Permalink
expandable values in scope table
Browse files Browse the repository at this point in the history
  • Loading branch information
@Glench
Glench committed Aug 13, 2018
1 parent 4b5c65f commit cea952d
Show file tree
Hide file tree
Showing 2 changed files with 140 additions and 18 deletions.
18 changes: 12 additions & 6 deletions mock_environment.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,11 @@ function prepare_current_file_to_act_as_server(file_src, names_of_interest) {
/* ----- REPLUGGER MOCK SERVER ----- */
const replugger_circular_json = require('circular-json');
const replugger_undescore = require('underscore');
function replugger_json_replacer(key, value) {
if (typeof value === 'function') {
return value.toLocaleString();
}
}
return value;
}
var replugger_output = {
Expand All @@ -39,13 +40,18 @@ process.stdin.on('data', function(buffer) {
} else if (data.startsWith('replugger_full_info:')) {
var name = data.replace(/^replugger_full_info:/, '');
try {
var output = eval(name)
var json_output = replugger_circular_json.stringify(output, replugger_json_replacer);
if (json_output === undefined) {
process.stdout.write('undefined\\n')
var output = eval(name);
if (typeof output === 'object') {
var json_output = '{';
_.each(output, function(value, key) {
var value = replugger_circular_json.stringify(value, replugger_json_replacer)
json_output += '"'+ key +'": '+ (value !== undefined ? value.slice(0, 100) : 'undefined') + ',,'
})
json_output += '}'
} else {
process.stdout.write(json_output+'\\n')
json_output = replugger_circular_json.stringify(output, replugger_json_replacer).slice(0,500);
}
process.stdout.write(json_output+'\\n')
} catch(e) {
process.stderr.write(e+'\\n')
}
Expand Down
140 changes: 128 additions & 12 deletions new_index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,13 +77,39 @@
}
#sidebar tbody td {
padding-left: 5px;
vertical-align: top;
}
#sidebar tbody td:nth-child(2) {
padding-left: 10px;
white-space: nowrap;
width: 100%; /* makes sure this column takes up as much space as it can */
}

#scope-table .CodeMirror {
background-color: transparent;
border: 0;
display: block;
width: 345px;
}

#scope-table .codemirror-container {
display: inline-block;
}
#scope-table .codemirror-container .CodeMirror {
height: 18px;
}
#scope-table .codemirror-container.codemirror-container-expanded .CodeMirror {
height: auto;
}
#scope-table .expand-arrow {
vertical-align: top;
color: #333;
font-size: .8em;
cursor: default;
display: inline-block;
padding-top: 6px;
}

#sidebar #current-line {
position: absolute;
bottom: 0;
Expand Down Expand Up @@ -150,6 +176,49 @@
<script src="node_modules/codemirror/addon/dialog/dialog.js"></script>
<script src="node_modules/codemirror/keymap/vim.js"></script>
<script src="node_modules/flow-parser/flow_parser.js" charset="utf-8"></script>
<script>
const React = require('react')
const ReactDOM = require('react-dom');
class ReactCodeMirror extends React.Component {
constructor(props) {
super(props)
this.updateStyle = this.updateStyle.bind(this);
this.codemirrorValueChanged = this.codemirrorValueChanged.bind(this);
}
componentDidMount() {
this.codemirrorInstance = CodeMirror.fromTextArea(this.refs.textarea, this.props.options)
this.codemirrorInstance.on('change', this.codemirrorValueChanged)
this.updateStyle();
}
updateStyle() {
if (this.props.style && this.props.style.height !== null) {
this.codemirrorInstance.getWrapperElement().style.height = this.props.style.height;
}
}
componentWillReceiveProps(nextProps) {
if (nextProps.options.value !== this.codemirrorInstance.getValue()) {
this.codemirrorInstance.setValue(nextProps.options.value);
}
}
componentDidUpdate(prevProps) {
this.updateStyle();
}
codemirrorValueChanged(doc, change) {
if (this.props.options.onChange && change.origin !== 'setValue') {
this.props.options.onChange(doc.getValue(), change);
}
}
componentWillUnmount() {
if (this.codemirrorInstance) {
this.codemirrorInstance.toTextArea();
}
}
render() {
return React.createElement('div', {className: this.props.className}, React.createElement('textarea', {ref: 'textarea', autoComplete: 'off', defaultValue: this.props.options.value}))
}
}

</script>
<script type="text/javascript">

const $ = require('jquery');
Expand All @@ -158,10 +227,9 @@
const {dialog} = require('electron').remote;
const exec = require('child_process').exec;
const {spawn, spawnSync} = require('child_process')
const React = require('react')
const ReactDOM = require('react-dom');
const _ = require('underscore')


function assert(condition) {
if (!condition) {
console.error('assert called! going into debugger...')
Expand Down Expand Up @@ -214,7 +282,7 @@
// - implement 'ask for sub-parts of current line'

// Tricky things to deal with:
// - since we're using stdout/stderr to communicate, any time the program writes to those streams it gets confused for a server message. console.log messes up REPLugger
// - since we're using stdout/stderr to communicate, any time the original program writes to those streams it gets confused for a server message. console.log messes up REPLugger, for example
// - how do we get the correct value of 'this' in different scopes?

// TODO: get command+o working
Expand Down Expand Up @@ -321,6 +389,8 @@
}
scopes = null;
values = {};
expanded_values = {};

function run(current_file_src, line_number) {
console.log('running...')
if (!mock_server) {
Expand Down Expand Up @@ -376,6 +446,17 @@
error_callback_queue.push(error);
mock_server.stdin.write(`replugger_summary_info: ${name}\n`)
}
function get_full(name, success, error) {
success = success || function(data) {
console.log(name, '=', data)
}
error = error || function(data) {
console.log('failed to get', name, ':', data)
}
success_callback_queue.push(success);
error_callback_queue.push(error);
mock_server.stdin.write(`replugger_full_info: ${name}\n`)
}

const Mousetrap = require('mousetrap');
// Mousetrap.bind('command+g', () => { run(main_editor.getValue(), main_editor.getCursor().line+1)})
Expand All @@ -395,11 +476,12 @@
class Value extends React.Component {
constructor(props) {
super(props);
this.state = {editing: false, value: props.value}
this.state = {expanded: false, value: props.value}
this.edit = this.edit.bind(this);
this.change = this.change.bind(this);
this.blur = this.blur.bind(this);
this.keydown = this.keydown.bind(this);
this.click_arrow = this.click_arrow.bind(this);
}
change(evt) {
this.setState({value: evt.target.value})
Expand All @@ -425,15 +507,49 @@
run_and_render();
}
}
click_arrow(evt) {
evt.preventDefault();
console.log('getting...', this.props.name)
if (this.state.expanded) {
delete expanded_values[this.props.name]
} else {
get_full(this.props.name, function(value) {
expanded_values[this.props.name] = value.replace('{', '{\n').replace(/,,/g, ',\n').replace(/"function/g, 'function').replace(/"class/g, 'class');
render_scope_table()
}.bind(this),
function(value) {
throw 'error expanding value for name: '+this.props.name
}.bind(this)
)
}
this.setState({expanded: !this.state.expanded})
}
render() {
return React.createElement('input', {
value: this.state.value,
readOnly: !this.state.editing,
onChange: this.change,
onDoubleClick: this.edit,
// onBlur: this.blur,
onKeyDown: this.keydown,
})
var value = this.props.name in expanded_values ? expanded_values[this.props.name] : this.state.value;
if (value.startsWith('"function') || value.startsWith('"class')) {
value = value.slice(1).slice(0,-1);
}
var should_expand = false;
if (value.startsWith('{')) {
should_expand = true;
}
if (value == '[]') {
should_expand = false;
} else if (value.startsWith('[')) {
should_expand = true;
}
return [
!should_expand ? null :
React.createElement('span', {className: 'expand-arrow', key: '>', onMouseDown: this.click_arrow}, this.state.expanded ? '▼' : '▶'),
React.createElement(ReactCodeMirror, {
key: 'codemirror',
className: 'codemirror-container ' + (this.state.expanded ? 'codemirror-container-expanded' : ''),
options: {
value: value,
mode: 'javascript',
},
})
]
}
}

Expand Down

0 comments on commit cea952d

Please sign in to comment.