From ed9a72553df91085021cc2a9187287ac73cc458c Mon Sep 17 00:00:00 2001
From: Maximilian Hils <git@maximilianhils.com>
Date: Sun, 26 Jun 2016 02:17:07 -0700
Subject: fix mitmproxy/mitmweb#25

---
 web/src/js/components/ContentView.jsx              |  8 +++----
 .../js/components/ContentView/ContentErrors.jsx    | 28 ----------------------
 web/src/js/components/ContentView/MetaViews.jsx    | 27 +++++++++++++++++++++
 web/src/js/components/FlowView/Details.jsx         |  8 ++-----
 web/src/js/components/Prompt.jsx                   | 22 ++++++++---------
 5 files changed, 44 insertions(+), 49 deletions(-)
 delete mode 100644 web/src/js/components/ContentView/ContentErrors.jsx
 create mode 100644 web/src/js/components/ContentView/MetaViews.jsx

(limited to 'web/src/js')

diff --git a/web/src/js/components/ContentView.jsx b/web/src/js/components/ContentView.jsx
index af3bffc1..1533684e 100644
--- a/web/src/js/components/ContentView.jsx
+++ b/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 (
diff --git a/web/src/js/components/ContentView/ContentErrors.jsx b/web/src/js/components/ContentView/ContentErrors.jsx
deleted file mode 100644
index 11594c7f..00000000
--- a/web/src/js/components/ContentView/ContentErrors.jsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react'
-import { ViewImage } from './ContentViews'
-import {formatSize} from '../../utils.js'
-
-export function ContentEmpty({ flow, message }) {
-    return (
-        <div className="alert alert-info">
-            No {flow.request === message ? 'request' : 'response'} content.
-        </div>
-    )
-}
-
-export function ContentMissing({ flow, message }) {
-    return (
-        <div className="alert alert-info">
-            {flow.request === message ? 'Request' : 'Response'} content missing.
-        </div>
-    )
-}
-
-export function ContentTooLarge({ message, onClick }) {
-    return (
-        <div className="alert alert-warning">
-            <button onClick={onClick} className="btn btn-xs btn-warning pull-right">Display anyway</button>
-            {formatSize(message.contentLength)} content size.
-        </div>
-    )
-}
diff --git a/web/src/js/components/ContentView/MetaViews.jsx b/web/src/js/components/ContentView/MetaViews.jsx
new file mode 100644
index 00000000..83720a13
--- /dev/null
+++ b/web/src/js/components/ContentView/MetaViews.jsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import {formatSize} from '../../utils.js'
+
+export function ContentEmpty({ flow, message }) {
+    return (
+        <div className="alert alert-info">
+            No {flow.request === message ? 'request' : 'response'} content.
+        </div>
+    )
+}
+
+export function ContentMissing({ flow, message }) {
+    return (
+        <div className="alert alert-info">
+            {flow.request === message ? 'Request' : 'Response'} content missing.
+        </div>
+    )
+}
+
+export function ContentTooLarge({ message, onClick }) {
+    return (
+        <div className="alert alert-warning">
+            <button onClick={onClick} className="btn btn-xs btn-warning pull-right">Display anyway</button>
+            {formatSize(message.contentLength)} content size.
+        </div>
+    )
+}
diff --git a/web/src/js/components/FlowView/Details.jsx b/web/src/js/components/FlowView/Details.jsx
index 78e68ecf..6a16a98e 100644
--- a/web/src/js/components/FlowView/Details.jsx
+++ b/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 ? (
-                    <tr key="sni"></tr>
-                ) : (
+                {conn.sni && (
                     <tr key="sni">
-                        <td>
-                            <abbr title="TLS Server Name Indication">TLS SNI:</abbr>
-                        </td>
+                        <td><abbr title="TLS Server Name Indication">TLS SNI:</abbr></td>
                         <td>{conn.sni}</td>
                     </tr>
                 )}
diff --git a/web/src/js/components/Prompt.jsx b/web/src/js/components/Prompt.jsx
index 701a0b85..e6564896 100755
--- a/web/src/js/components/Prompt.jsx
+++ b/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()
-    }
 }
-- 
cgit v1.2.3