Grasscutters/mitmproxy
3
0
Fork 0
mirror of https://github.com/Grasscutters/mitmproxy.git synced 2024-11-26 02:10:59 +00:00
Code Issues Projects Releases Wiki Activity

[web] bug fixs

Browse Source
This commit is contained in:
Jason 2016-07-05 13:57:32 -04:00
commit 09ab2528f5
8 changed files with 90 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
web/src/js/components/ContentView.jsx
View File

@ -5,83 +5,61 @@ import * as ContentViews from './ContentView/ContentViews'
import * as MetaViews from './ContentView/MetaViews'
import ContentLoader from './ContentView/ContentLoader'
import ViewSelector from './ContentView/ViewSelector'
import { setContentView } from '../ducks/ui'
import { setContentView, setDisplayLarge } from '../ducks/ui'
class ContentView extends Component {
ContentView.propTypes = {
// It may seem a bit weird at the first glance:
// Every view takes the flow and the message as props, e.g.
// <Auto flow={flow} message={flow.request}/>
flow: React.PropTypes.object.isRequired,
message: React.PropTypes.object.isRequired,
}
static propTypes = {
// It may seem a bit weird at the first glance:
// Every view takes the flow and the message as props, e.g.
// <Auto flow={flow} message={flow.request}/>
flow: React.PropTypes.object.isRequired,
message: React.PropTypes.object.isRequired,
ContentView.isContentTooLarge = msg => msg.contentLength > 1024 * 1024 * (ContentViews.ViewImage.matches(msg) ? 10 : 0.2)
function ContentView({ flow, message, contentView, selectView, displayLarge }) {
if (message.contentLength === 0) {
return <MetaViews.ContentEmpty {...this.props}/>
}
constructor(props, context) {
super(props, context)
this.state = { displayLarge: false }
if (message.contentLength === null) {
return <MetaViews.ContentMissing {...this.props}/>
}
displayLarge() {
this.setState({ displayLarge: true })
if (!displayLarge && ContentView.isContentTooLarge(message)) {
return <MetaViews.ContentTooLarge {...this.props} onClick={() => this.props.setDisplayLarge(true)}/>
}
componentWillReceiveProps(nextProps) {
// @todo move to ui ducks
if (nextProps.message !== this.props.message) {
this.setState({ displayLarge: false })
}
}
const View = ContentViews[contentView]
isContentTooLarge(msg) {
return msg.contentLength > 1024 * 1024 * (ContentViews.ViewImage.matches(msg) ? 10 : 0.2)
}
render() {
const { flow, message, contentView, selectView } = this.props
const { displayLarge } = this.state
const View = ContentViews[contentView]
if (message.contentLength === 0) {
return <MetaViews.ContentEmpty {...this.props}/>
}
if (message.contentLength === null) {
return <MetaViews.ContentMissing {...this.props}/>
}
if (!displayLarge && this.isContentTooLarge(message)) {
return <MetaViews.ContentTooLarge {...this.props} onClick={this.displayLarge}/>
}
return (
<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}/>
&nbsp;
<a className="btn btn-default btn-xs" href={MessageUtils.getContentURL(flow, message)}>
<i className="fa fa-download"/>
</a>
</div>
return (
<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}/>
&nbsp;
<a className="btn btn-default btn-xs" href={MessageUtils.getContentURL(flow, message)}>
<i className="fa fa-download"/>
</a>
</div>
)
}
</div>
)
}
export default connect(
state => ({
contentView: state.ui.contentView,
displayLarge: state.ui.displayLarge,
}),
{
selectView: setContentView,
setDisplayLarge,
}
)(ContentView)

2
web/src/js/components/ContentView/MetaViews.jsx
View File

@ -1,5 +1,5 @@
import React from 'react'
import {formatSize} from '../../utils.js'
import { formatSize } from '../../utils.js'
export function ContentEmpty({ flow, message }) {
return (

5
web/src/js/components/Header/FilterInput.jsx
View File

@ -7,10 +7,6 @@ import FilterDocs from './FilterDocs'
export default class FilterInput extends Component {
static contextTypes = {
returnFocus: React.PropTypes.func,
}
constructor(props, context) {
super(props, context)
@ -91,7 +87,6 @@ export default class FilterInput extends Component {
blur() {
ReactDOM.findDOMNode(this.refs.input).blur()
this.context.returnFocus()
}
select() {

4
web/src/js/components/MainView.jsx
View File

@ -69,5 +69,7 @@ export default connect(
updateFlow: flowsActions.update,
},
undefined,
{ withRef: true }
{
withRef: true
}
)(MainView)

17
web/src/js/components/Prompt.jsx
View File

@ -4,23 +4,15 @@ import _ from 'lodash'
import {Key} from '../utils.js'
Prompt.contextTypes = {
returnFocus: PropTypes.func
}
Prompt.propTypes = {
options: PropTypes.array.isRequired,
done: PropTypes.func.isRequired,
prompt: PropTypes.string,
}
export default function Prompt({ prompt, done, options }, context) {
export default function Prompt({ prompt, done, options }) {
const opts = []
function keyTaken(k) {
return _.map(opts, 'key').includes(k)
}
for (let i = 0; i < options.length; i++) {
let opt = options[i]
if (_.isString(opt)) {
@ -35,7 +27,11 @@ export default function Prompt({ prompt, done, options }, context) {
}
opts.push(opt)
}
function keyTaken(k) {
return _.map(opts, 'key').includes(k)
}
function onKeyDown(event) {
event.stopPropagation()
event.preventDefault()
@ -44,7 +40,6 @@ export default function Prompt({ prompt, done, options }, context) {
return
}
done(key.key || false)
context.returnFocus()
}
return (

67
web/src/js/components/ProxyApp.jsx
View File

@ -12,79 +12,35 @@ import { Key } from '../utils.js'
class ProxyAppMain extends Component {
static childContextTypes = {
returnFocus: PropTypes.func.isRequired,
}
static contextTypes = {
router: PropTypes.object.isRequired,
}
constructor(props, context) {
super(props, context)
this.focus = this.focus.bind(this)
this.onKeyDown = this.onKeyDown.bind(this)
componentWillMount() {
this.props.appInit(this.context.router)
window.addEventListener('keydown', this.props.onKeyDown);
}
componentWillMount() {
this.props.appInit()
componentWillUnmount() {
this.props.appDestruct(this.context.router)
window.removeEventListener('keydown', this.props.onKeyDown);
}
componentWillReceiveProps(nextProps) {
if(nextProps.query === this.props.query && nextProps.flowId === this.props.flowId && nextProps.panel === this.props.panel) {
if (nextProps.query === this.props.query && nextProps.selectedFlowId === this.props.selectedFlowId && nextProps.panel === this.props.panel) {
return
}
if(nextProps.flowId) {
this.context.router.replace({ pathname: `/flows/${nextProps.flowId}/${nextProps.panel}`, query: nextProps.query })
if (nextProps.selectedFlowId) {
this.context.router.replace({ pathname: `/flows/${nextProps.selectedFlowId}/${nextProps.panel}`, query: nextProps.query })
} else {
this.context.router.replace({ pathname: '/flows', query: nextProps.query })
}
}
/**
* @todo listen to window's key events
*/
componentDidMount() {
this.focus()
}
componentWillUnmount() {
this.props.appDestruct()
}
/**
* @todo use props
*/
getChildContext() {
return { returnFocus: this.focus }
}
/**
* @todo remove it
*/
focus() {
document.activeElement.blur()
window.getSelection().removeAllRanges()
ReactDOM.findDOMNode(this).focus()
}
/**
* @todo move to actions
* @todo bind on window
*/
onKeyDown(e) {
if (e.ctrlKey) {
return
}
this.props.onKeyDown(e.keyCode, e.shiftKey)
e.preventDefault()
}
render() {
const { showEventLog, location, children, query } = this.props
return (
<div id="container" tabIndex="0" onKeyDown={this.onKeyDown}>
<div id="container" tabIndex="0">
<Header ref="header" query={query} />
{React.cloneElement(
children,
@ -102,10 +58,9 @@ class ProxyAppMain extends Component {
export default connect(
state => ({
showEventLog: state.eventLog.visible,
settings: state.settings.settings,
query: state.ui.query,
panel: state.ui.panel,
flowId: state.flows.views.main.selected[0]
selectedFlowId: state.flows.views.main.selected[0]
}),
{
appInit,

12
web/src/js/components/ValueEditor.jsx
View File

@ -4,27 +4,17 @@ import ValidateEditor from './ValueEditor/ValidateEditor'
export default class ValueEditor extends Component {
static contextTypes = {
returnFocus: PropTypes.func,
}
static propTypes = {
content: PropTypes.string.isRequired,
onDone: PropTypes.func.isRequired,
inline: PropTypes.bool,
}
constructor(props) {
super(props)
this.focus = this.focus.bind(this)
}
render() {
var tag = this.props.inline ? "span" : 'div'
var tag = this.props.inline ? 'span' : 'div'
return (
<ValidateEditor
{...this.props}
onStop={() => this.context.returnFocus()}
tag={tag}
/>
)

38
web/src/js/ducks/ui.js
View File

@ -4,15 +4,17 @@ import * as flowsActions from '../ducks/flows'
export const SET_ACTIVE_MENU = 'UI_SET_ACTIVE_MENU'
export const SET_CONTENT_VIEW = 'UI_SET_CONTENT_VIEW'
export const SET_SELECTED_INPUT = 'SET_SELECTED_INPUT'
export const UPDATE_QUERY = 'UPDATE_QUERY'
export const SELECT_TAB = 'SELECT_TAB'
export const SELECT_TAB_RELATIVE = 'SELECT_TAB_RELATIVE'
export const SET_PROMPT = 'SET_PROMPT'
export const SET_SELECTED_INPUT = 'UI_SET_SELECTED_INPUT'
export const UPDATE_QUERY = 'UI_UPDATE_QUERY'
export const SELECT_TAB = 'UI_SELECT_TAB'
export const SELECT_TAB_RELATIVE = 'UI_SELECT_TAB_RELATIVE'
export const SET_PROMPT = 'UI_SET_PROMPT'
export const SET_DISPLAY_LARGE = 'UI_SET_DISPLAY_LARGE'
const defaultState = {
activeMenu: 'Start',
selectedInput: null,
displayLarge: false,
promptOpen: false,
contentView: 'ViewAuto',
query: {},
@ -32,6 +34,7 @@ export default function reducer(state = defaultState, action) {
if (action.flowId && !action.currentSelection) {
return {
...state,
displayLarge: false,
activeMenu: 'Flow',
}
}
@ -39,11 +42,15 @@ export default function reducer(state = defaultState, action) {
if (!action.flowId && state.activeMenu === 'Flow') {
return {
...state,
displayLarge: false,
activeMenu: 'Start',
}
}
return state
return {
...state,
displayLarge: false,
}
case SET_CONTENT_VIEW:
return {
@ -88,6 +95,12 @@ export default function reducer(state = defaultState, action) {
promptOpen: action.open,
}
case SET_DISPLAY_LARGE:
return {
...state,
displayLarge: action.displayLarge,
}
default:
return state
}
@ -124,7 +137,17 @@ export function setPrompt(open) {
return { type: SET_PROMPT, open }
}
export function onKeyDown(key, shiftKey) {
export function setDisplayLarge(displayLarge) {
return { type: SET_DISPLAY_LARGE, displayLarge }
}
export function onKeyDown(e) {
if(e.ctrlKey) {
return () => {}
}
var key = e.keyCode
var shiftKey = e.shiftKey
e.preventDefault()
return (dispatch, getState) => {
switch (key) {
@ -235,6 +258,5 @@ export function onKeyDown(key, shiftKey) {
default:
return () => {}
}
event.preventDefault()
}
}