diff options
author | Maximilian Hils <git@maximilianhils.com> | 2016-07-20 14:35:20 -0700 |
---|---|---|
committer | Maximilian Hils <git@maximilianhils.com> | 2016-07-20 14:35:20 -0700 |
commit | 8b2a5cad2dd3a8fa28091eafab9e1aebbaae3865 (patch) | |
tree | 1ac0a27ce65cddb183668e6b395839d6f289a09f /web/src/js/components | |
parent | b27db1fc812b5b9935599caf5d0a2cdfe34d7322 (diff) | |
parent | 281f20ef1e9ac33a7e210ba562eb2914f6d187e6 (diff) | |
download | mitmproxy-8b2a5cad2dd3a8fa28091eafab9e1aebbaae3865.tar.gz mitmproxy-8b2a5cad2dd3a8fa28091eafab9e1aebbaae3865.tar.bz2 mitmproxy-8b2a5cad2dd3a8fa28091eafab9e1aebbaae3865.zip |
Merge remote-tracking branch 'origin/flow_editing'
Diffstat (limited to 'web/src/js/components')
-rw-r--r-- | web/src/js/components/ContentView.jsx | 54 | ||||
-rw-r--r-- | web/src/js/components/ContentView/ContentViews.jsx | 1 | ||||
-rw-r--r-- | web/src/js/components/FlowView/FlowEditorButton.jsx | 39 | ||||
-rw-r--r-- | web/src/js/components/FlowView/Messages.jsx | 22 | ||||
-rw-r--r-- | web/src/js/components/common/Button.jsx | 8 | ||||
-rw-r--r-- | web/src/js/components/common/CodeEditor.jsx | 30 | ||||
-rw-r--r-- | web/src/js/components/common/Splitter.jsx | 1 |
7 files changed, 133 insertions, 22 deletions
diff --git a/web/src/js/components/ContentView.jsx b/web/src/js/components/ContentView.jsx index 6a982a5d..766de26f 100644 --- a/web/src/js/components/ContentView.jsx +++ b/web/src/js/components/ContentView.jsx @@ -5,7 +5,8 @@ import * as ContentViews from './ContentView/ContentViews' import * as MetaViews from './ContentView/MetaViews' import ContentLoader from './ContentView/ContentLoader' import ViewSelector from './ContentView/ViewSelector' -import { setContentView, setDisplayLarge } from '../ducks/ui' +import { setContentView, setDisplayLarge, setModifiedFlowContent } from '../ducks/ui' +import CodeEditor from './common/CodeEditor' ContentView.propTypes = { // It may seem a bit weird at the first glance: @@ -18,7 +19,7 @@ ContentView.propTypes = { ContentView.isContentTooLarge = msg => msg.contentLength > 1024 * 1024 * (ContentViews.ViewImage.matches(msg) ? 10 : 0.2) function ContentView(props) { - const { flow, message, contentView, selectView, displayLarge, setDisplayLarge } = props + const { flow, message, contentView, selectView, displayLarge, setDisplayLarge, onContentChange, isFlowEditorOpen, setModifiedFlowContent } = props if (message.contentLength === 0) { return <MetaViews.ContentEmpty {...props}/> @@ -36,20 +37,43 @@ function ContentView(props) { return ( <div> - {View.textView ? ( + {isFlowEditorOpen ? ( <ContentLoader flow={flow} message={message}> - <View content="" /> - </ContentLoader> - ) : ( - <View flow={flow} message={message} /> + <CodeEditor content="" onChange={content =>{setModifiedFlowContent(content)}}/> + </ContentLoader> + ): ( + <div> + {View.textView ? ( + <ContentLoader flow={flow} message={message}> + <View content="" /> + </ContentLoader> + ) : ( + <View flow={flow} message={message} /> + )} + <div className="view-options text-center"> + <ViewSelector onSelectView={selectView} active={View} message={message}/> + + <a className="btn btn-default btn-xs" + href={MessageUtils.getContentURL(flow, message)} + title="Download the content of the flow."> + <i className="fa fa-download"/> + </a> + + <a className="btn btn-default btn-xs" + onClick={() => ContentView.fileInput.click()} + title="Upload a file to replace the content." + > + <i className="fa fa-upload"/> + </a> + <input + ref={ref => ContentView.fileInput = ref} + className="hidden" + type="file" + onChange={e => {if(e.target.files.length > 0) onContentChange(e.target.files[0])}} + /> + </div> + </div> )} - <div className="view-options text-center"> - <ViewSelector onSelectView={selectView} active={View} message={message}/> - - <a className="btn btn-default btn-xs" href={MessageUtils.getContentURL(flow, message)}> - <i className="fa fa-download"/> - </a> - </div> </div> ) } @@ -58,9 +82,11 @@ export default connect( state => ({ contentView: state.ui.contentView, displayLarge: state.ui.displayLarge, + isFlowEditorOpen : state.ui.isFlowEditorOpen }), { selectView: setContentView, setDisplayLarge, + setModifiedFlowContent } )(ContentView) diff --git a/web/src/js/components/ContentView/ContentViews.jsx b/web/src/js/components/ContentView/ContentViews.jsx index b0297dcc..82ee0adc 100644 --- a/web/src/js/components/ContentView/ContentViews.jsx +++ b/web/src/js/components/ContentView/ContentViews.jsx @@ -2,6 +2,7 @@ import React, { PropTypes } from 'react' import ContentLoader from './ContentLoader' import { MessageUtils } from '../../flow/utils.js' + const views = [ViewAuto, ViewImage, ViewJSON, ViewRaw] ViewImage.regex = /^image\/(png|jpe?g|gif|vnc.microsoft.icon|x-icon)$/i diff --git a/web/src/js/components/FlowView/FlowEditorButton.jsx b/web/src/js/components/FlowView/FlowEditorButton.jsx new file mode 100644 index 00000000..3d0d1d16 --- /dev/null +++ b/web/src/js/components/FlowView/FlowEditorButton.jsx @@ -0,0 +1,39 @@ +import React, { PropTypes, Component } from 'react' +import { connect } from 'react-redux' + +import {closeFlowEditor} from '../../ducks/ui.js' +import {openFlowEditor} from '../../ducks/ui.js' + +FlowEditorButton.propTypes = { + isFlowEditorOpen: PropTypes.bool.isRequired, + content: PropTypes.string.isRequired, + onContentChange: PropTypes.func.isRequired +} + +function FlowEditorButton ({ isFlowEditorOpen, closeFlowEditor, openFlowEditor, onContentChange, content }) { + return ( + <div className="edit-flow-container"> + {isFlowEditorOpen ? + <a className="edit-flow" onClick={() => {onContentChange(content); closeFlowEditor()}}> + <i className="fa fa-check"/> + </a> + : + <a className="edit-flow" onClick={() => openFlowEditor()}> + <i className="fa fa-pencil"/> + </a> + } + </div> + ) +} + +export default connect( + state => ({ + isFlowEditorOpen: state.ui.isFlowEditorOpen, + content: state.ui.modifiedFlow.content + }), + { + closeFlowEditor, + openFlowEditor + + } +)(FlowEditorButton) diff --git a/web/src/js/components/FlowView/Messages.jsx b/web/src/js/components/FlowView/Messages.jsx index 9295f97c..2f03c712 100644 --- a/web/src/js/components/FlowView/Messages.jsx +++ b/web/src/js/components/FlowView/Messages.jsx @@ -6,6 +6,9 @@ import { Key, formatTimeStamp } from '../../utils.js' import ContentView from '../ContentView' import ValueEditor from '../ValueEditor' import Headers from './Headers' +import * as flowActions from '../../ducks/flows' +import FlowEditorButton from './FlowEditorButton' + class RequestLine extends Component { @@ -76,20 +79,25 @@ class ResponseLine extends Component { } export class Request extends Component { - - render() { + render() { const { flow, updateFlow } = this.props + let onContentChange = content => flowActions.updateContent(this.props.flow, content, "request") return ( <section className="request"> + <FlowEditorButton onContentChange={onContentChange}/> <RequestLine ref="requestLine" flow={flow} updateFlow={updateFlow} /> <Headers ref="headers" message={flow.request} onChange={headers => updateFlow({ request: { headers } })} /> + <hr/> - <ContentView flow={flow} message={flow.request}/> + <ContentView flow={flow} + onContentChange={onContentChange} + message={flow.request} + /> </section> ) } @@ -116,11 +124,14 @@ export class Request extends Component { export class Response extends Component { + render() { const { flow, updateFlow } = this.props + let onContentChange = content => flowActions.updateContent(this.props.flow, content, "response") return ( <section className="response"> + <FlowEditorButton onContentChange={onContentChange}/> <ResponseLine ref="responseLine" flow={flow} updateFlow={updateFlow} /> <Headers ref="headers" @@ -128,7 +139,10 @@ export class Response extends Component { onChange={headers => updateFlow({ response: { headers } })} /> <hr/> - <ContentView flow={flow} message={flow.response}/> + <ContentView flow={flow} + onContentChange={onContentChange} + message={flow.response} + /> </section> ) } diff --git a/web/src/js/components/common/Button.jsx b/web/src/js/components/common/Button.jsx index 574288df..cd01af22 100644 --- a/web/src/js/components/common/Button.jsx +++ b/web/src/js/components/common/Button.jsx @@ -2,7 +2,8 @@ import React, { PropTypes } from 'react' Button.propTypes = { onClick: PropTypes.func.isRequired, - text: PropTypes.string.isRequired + text: PropTypes.string, + icon: PropTypes.string } export default function Button({ onClick, text, icon, disabled }) { @@ -10,9 +11,8 @@ export default function Button({ onClick, text, icon, disabled }) { <div className={"btn btn-default"} onClick={onClick} disabled={disabled}> - <i className={"fa fa-fw " + icon}/> - - {text} + {icon && (<i className={"fa fa-fw " + icon}/> )} + {text && text} </div> ) } diff --git a/web/src/js/components/common/CodeEditor.jsx b/web/src/js/components/common/CodeEditor.jsx new file mode 100644 index 00000000..5b2305a8 --- /dev/null +++ b/web/src/js/components/common/CodeEditor.jsx @@ -0,0 +1,30 @@ +import React, { Component, PropTypes } from 'react' +import { render } from 'react-dom'; +import Codemirror from 'react-codemirror'; + + +export default class CodeEditor extends Component{ + static propTypes = { + content: PropTypes.string.isRequired, + onChange: PropTypes.func.isRequired, + } + + constructor(props){ + super(props) + } + + componentWillMount(){ + this.props.onChange(this.props.content) + } + + render() { + let options = { + lineNumbers: true + }; + return ( + <div onKeyDown={e => e.stopPropagation()}> + <Codemirror value={this.props.content} onChange={this.props.onChange} options={options}/> + </div> + ) + } +} diff --git a/web/src/js/components/common/Splitter.jsx b/web/src/js/components/common/Splitter.jsx index 9d22b6fd..bd4fb3d2 100644 --- a/web/src/js/components/common/Splitter.jsx +++ b/web/src/js/components/common/Splitter.jsx @@ -12,6 +12,7 @@ export default class Splitter extends Component { this.state = { applied: false, startX: false, startY: false } this.onMouseMove = this.onMouseMove.bind(this) + this.onMouseDown = this.onMouseDown.bind(this) this.onMouseUp = this.onMouseUp.bind(this) this.onDragEnd = this.onDragEnd.bind(this) } |