change import of prop-types

mitmproxy/tools/web/static/app.css

@@ -226,14 +226,28 @@ header menu {
 }
 .filter-input .popover {
   top: 27px;
+  left: 43px;
   display: block;
   max-width: none;
   opacity: 0.9;
 }
+@media (max-width: 767px) {
+  .filter-input .popover {
+    top: 16px;
+    left: 29px;
+    right: 2px;
+  }
+}
 .filter-input .popover .popover-content {
   max-height: 500px;
   overflow-y: auto;
 }
+.filter-input .popover .popover-content tr {
+  cursor: pointer;
+}
+.filter-input .popover .popover-content tr:hover {
+  background-color: rgba(193, 215, 235, 0.5) !important;
+}
 .flow-table {
   width: 100%;
   overflow-y: scroll;
@@ -358,8 +372,7 @@ header menu {
   background-color: #F2F2F2;
 }
 .flow-detail section {
-  display: flex;
-  flex-direction: column;
+  overflow-y: scroll;
 }
 .flow-detail section > article {
   overflow: auto;
@@ -790,11 +803,8 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
   cursor: default;
   z-index: 4;
 }
-.CodeMirror-gutter-wrapper {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
+.CodeMirror-gutter-wrapper ::selection { background-color: transparent }
+.CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent }
 
 .CodeMirror-lines {
   cursor: text;
@@ -839,6 +849,8 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
 
 .CodeMirror-widget {}
 
+.CodeMirror-rtl pre { direction: rtl; }
+
 .CodeMirror-code {
   outline: none;
 }

web/package.json

@@ -25,6 +25,7 @@
     "classnames": "^2.2.5",
     "lodash": "^4.17.4",
     "react": "^15.4.2",
+    "prop-types": "^15.5.0",
     "react-codemirror": "^0.3.0",
     "react-dom": "^15.4.2",
     "react-redux": "^5.0.2",

web/src/js/components/ContentView.jsx

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import * as ContentViews from './ContentView/ContentViews'
 import * as MetaViews from './ContentView/MetaViews'
@@ -11,8 +12,8 @@ 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,
+    flow: PropTypes.object.isRequired,
+    message: PropTypes.object.isRequired,
 }
 
 ContentView.isContentTooLarge = msg => msg.contentLength > 1024 * 1024 * (ContentViews.ViewImage.matches(msg) ? 10 : 0.2)

web/src/js/components/ContentView/CodeEditor.jsx

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import Codemirror from 'react-codemirror';
 
 

web/src/js/components/ContentView/ContentLoader.jsx

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import { MessageUtils } from '../../flow/utils.js'
 
 export default View => class extends React.Component {

web/src/js/components/ContentView/ContentViewOptions.jsx

@@ -1,12 +1,13 @@
-import React, { PropTypes } from 'react'
+import React  from 'react'
+import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import ViewSelector from './ViewSelector'
 import UploadContentButton from './UploadContentButton'
 import DownloadContentButton from './DownloadContentButton'
 
 ContentViewOptions.propTypes = {
-    flow: React.PropTypes.object.isRequired,
-    message: React.PropTypes.object.isRequired,
+    flow: PropTypes.object.isRequired,
+    message: PropTypes.object.isRequired,
 }
 
 function ContentViewOptions({ flow, message, uploadContent, readonly, contentViewDescription }) {

web/src/js/components/ContentView/ContentViews.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes, Component } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { setContentViewDescription, setContent } from '../../ducks/ui/flow'
 import ContentLoader from './ContentLoader'
@@ -21,7 +22,7 @@ function ViewImage({ flow, message }) {
 }
 
 Edit.propTypes = {
-    content: React.PropTypes.string.isRequired,
+    content: PropTypes.string.isRequired,
 }
 
 function Edit({ content, onChange }) {

web/src/js/components/ContentView/DownloadContentButton.jsx

@@ -1,5 +1,5 @@
 import { MessageUtils } from "../../flow/utils"
-import { PropTypes } from 'react'
+import PropTypes from 'prop-types'
 
 DownloadContentButton.propTypes = {
     flow: PropTypes.object.isRequired,

web/src/js/components/ContentView/ShowFullContentButton.jsx

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { render } from 'react-dom';
 import Button from '../common/Button';

web/src/js/components/ContentView/UploadContentButton.jsx

@@ -1,4 +1,4 @@
-import { PropTypes } from 'react'
+import PropTypes from 'prop-types'
 import FileChooser from '../common/FileChooser'
 
 UploadContentButton.propTypes = {

web/src/js/components/ContentView/ViewSelector.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes, Component } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { setContentView } from '../../ducks/ui/flow';
 import Dropdown from '../common/Dropdown'

web/src/js/components/EventLog.jsx

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { toggleFilter, toggleVisibility } from '../ducks/eventLog'
 import ToggleButton from './common/ToggleButton'

web/src/js/components/EventLog/EventList.jsx

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import ReactDOM from 'react-dom'
 import shallowEqual from 'shallowequal'
 import AutoScroll from '../helpers/AutoScroll'

web/src/js/components/FlowTable.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import ReactDOM from 'react-dom'
 import shallowEqual from 'shallowequal'
 import AutoScroll from './helpers/AutoScroll'

web/src/js/components/FlowTable/FlowRow.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import columns from './FlowColumns'
 import { pure } from '../../utils'

web/src/js/components/FlowTable/FlowTableHead.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import React  from 'react'
+import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import classnames from 'classnames'
 import columns from './FlowColumns'
@@ -7,8 +8,8 @@ import { setSort } from '../../ducks/flows'
 
 FlowTableHead.propTypes = {
     setSort: PropTypes.func.isRequired,
-    sortDesc: React.PropTypes.bool.isRequired,
-    sortColumn: React.PropTypes.string,
+    sortDesc: PropTypes.bool.isRequired,
+    sortColumn: PropTypes.string,
 }
 
 function FlowTableHead({ sortColumn, sortDesc, setSort }) {

web/src/js/components/FlowView/Headers.jsx

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import ReactDOM from 'react-dom'
 import ValueEditor from '../ValueEditor/ValueEditor'
 import { Key } from '../../utils'

web/src/js/components/FlowView/Messages.jsx

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 
 

web/src/js/components/FlowView/Nav.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import React  from 'react'
+import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import classnames from 'classnames'
 

web/src/js/components/FlowView/ToggleEdit.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes, Component } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 
 import { startEdit, stopEdit } from '../../ducks/ui/flow'

web/src/js/components/Footer.jsx

@@ -1,9 +1,10 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { formatSize } from '../utils.js'
 
 Footer.propTypes = {
-    settings: React.PropTypes.object.isRequired,
+    settings: PropTypes.object.isRequired,
 }
 
 function Footer({ settings }) {

web/src/js/components/Header.jsx

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import classnames from 'classnames'
 import MainMenu from './Header/MainMenu'

web/src/js/components/Header/FileMenu.jsx

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import FileChooser from '../common/FileChooser'
 import Dropdown, {Divider} from '../common/Dropdown'

web/src/js/components/Header/FilterInput.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes, Component } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import ReactDOM from 'react-dom'
 import classnames from 'classnames'
 import { Key } from '../../utils.js'

web/src/js/components/Header/FlowMenu.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React  from "react"
+import PropTypes from 'prop-types'
 import { connect } from "react-redux"
 import Button from "../common/Button"
 import { MessageUtils } from "../../flow/utils.js"

web/src/js/components/Header/MainMenu.jsx

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from "react"
+import React, { Component } from "react"
+import PropTypes from 'prop-types'
 import { connect } from "react-redux"
 import FilterInput from "./FilterInput"
 import { update as updateSettings } from "../../ducks/settings"

web/src/js/components/Header/MenuToggle.jsx

@@ -1,4 +1,4 @@
-import { PropTypes } from "react"
+import PropTypes from 'prop-types'
 import { connect } from "react-redux"
 import { update as updateSettings } from "../../ducks/settings"
 import { toggleVisibility } from "../../ducks/eventLog"

web/src/js/components/Header/OptionMenu.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React  from "react"
+import PropTypes from 'prop-types'
 import { connect } from "react-redux"
 import { SettingsToggle, EventlogToggle } from "./MenuToggle"
 import DocsLink from "../common/DocsLink"

web/src/js/components/MainView.jsx

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import Splitter from './common/Splitter'
 import FlowTable from './FlowTable'

web/src/js/components/Prompt.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import React  from 'react'
+import PropTypes from 'prop-types'
 import ReactDOM from 'react-dom'
 import _ from 'lodash'
 

web/src/js/components/ProxyApp.jsx

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 
 import { onKeyDown } from '../ducks/ui/keyboard'

web/src/js/components/ValueEditor/ValidateEditor.jsx

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import ValueEditor from './ValueEditor'
 import classnames from 'classnames'
 

web/src/js/components/ValueEditor/ValueEditor.jsx

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import _ from "lodash"
 import classnames from 'classnames'
 

web/src/js/components/common/Button.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from 'prop-types'
 import classnames from "classnames"
 
 Button.propTypes = {

web/src/js/components/common/Dropdown.jsx

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
 export const Divider = () => <hr className="divider"/>

web/src/js/components/common/FileChooser.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import React  from 'react'
+import PropTypes from 'prop-types'
 
 FileChooser.propTypes = {
     icon: PropTypes.string,

web/src/js/components/common/ToggleButton.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import React  from 'react'
+import PropTypes from 'prop-types'
 
 ToggleButton.propTypes = {
     checked: PropTypes.bool.isRequired,

web/src/js/components/common/ToggleInputButton.jsx

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import { Key } from '../../utils'
 

web/src/js/filt/filt.js

@@ -1953,7 +1953,7 @@ module.exports = (function() {
     function domain(regex){
         regex = new RegExp(regex, "i");
         function domainFilter(flow){
-            return flow.request && regex.test(flow.request.host);
+            return flow.request && (regex.test(flow.request.host) || regex.test(flow.request.pretty_host));
         }
         domainFilter.desc = "domain matches " + regex;
         return domainFilter;