fix mitmproxy/mitmweb#25

web/src/js/components/ContentView.jsx

@@ -1,7 +1,7 @@
 import React, { Component, PropTypes } from 'react'
 import { MessageUtils } from '../flow/utils.js'
 import { ViewAuto, ViewImage } from './ContentView/ContentViews'
-import * as ContentErrors from './ContentView/ContentErrors'
+import * as MetaViews from './ContentView/MetaViews'
 import ContentLoader from './ContentView/ContentLoader'
 import ViewSelector from './ContentView/ViewSelector'
 
@@ -45,15 +45,15 @@ export default class ContentView extends Component {
         const { displayLarge, View } = this.state
 
         if (message.contentLength === 0) {
-            return <ContentErrors.ContentEmpty {...this.props}/>
+            return <MetaViews.ContentEmpty {...this.props}/>
         }
 
         if (message.contentLength === null) {
-            return <ContentErrors.ContentMissing {...this.props}/>
+            return <MetaViews.ContentMissing {...this.props}/>
         }
 
         if (!displayLarge && this.isContentTooLarge(message)) {
-            return <ContentErrors.ContentTooLarge {...this.props} onClick={this.displayLarge}/>
+            return <MetaViews.ContentTooLarge {...this.props} onClick={this.displayLarge}/>
         }
 
         return (

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

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

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

@@ -28,13 +28,9 @@ export function ConnectionInfo({ conn }) {
                     <td>Address:</td>
                     <td>{conn.address.address.join(':')}</td>
                 </tr>
-                {conn.sni ? (
+                {conn.sni && (
-                    <tr key="sni"></tr>
-                ) : (
                     <tr key="sni">
-                        <td>
+                        <td><abbr title="TLS Server Name Indication">TLS SNI:</abbr></td>
-                            <abbr title="TLS Server Name Indication">TLS SNI:</abbr>
-                        </td>
                         <td>{conn.sni}</td>
                     </tr>
                 )}

web/src/js/components/Prompt.jsx

@@ -35,6 +35,17 @@ export default function Prompt({ prompt, done, options }, context) {
         }
         opts.push(opt)
     }
+    
+    function onKeyDown(event) {
+        event.stopPropagation()
+        event.preventDefault()
+        const key = opts.find(opt => Key[opt.key.toUpperCase()] === event.keyCode)
+        if (!key && event.keyCode !== Key.ESC && event.keyCode !== Key.ENTER) {
+            return
+        }
+        done(key.key || false)
+        context.returnFocus()
+    }
 
     return (
         <div tabIndex="0" onKeyDown={onKeyDown} className="prompt-dialog">
@@ -57,15 +68,4 @@ export default function Prompt({ prompt, done, options }, context) {
             </div>
         </div>
     )
-
-    function onKeyDown(event) {
-        event.stopPropagation()
-        event.preventDefault()
-        const key = opts.find(opt => Key[opt.key.toUpperCase()] === event.keyCode)
-        if (!key && event.keyCode !== Key.ESC && event.keyCode !== Key.ENTER) {
-            return
-        }
-        done(key.key || false)
-        context.returnFocus()
-    }
 }