web: upgrade to react 0.13

libmproxy/web/static/app.js

@@ -478,31 +478,43 @@ var StickyHeadMixin = {
 
 var Navigation = _.extend({}, ReactRouter.Navigation, {
     setQuery: function (dict) {
-        var q = this.context.getCurrentQuery();
+        var q = this.context.router.getCurrentQuery();
         for(var i in dict){
             if(dict.hasOwnProperty(i)){
                 q[i] = dict[i] || undefined; //falsey values shall be removed.
             }
         }
         q._ = "_"; // workaround for https://github.com/rackt/react-router/pull/957
-        this.replaceWith(this.context.getCurrentPath(), this.context.getCurrentParams(), q);
+        this.replaceWith(this.context.router.getCurrentPath(), this.context.router.getCurrentParams(), q);
     },
     replaceWith: function(routeNameOrPath, params, query) {
         if(routeNameOrPath === undefined){
-            routeNameOrPath = this.context.getCurrentPath();
+            routeNameOrPath = this.context.router.getCurrentPath();
         }
         if(params === undefined){
-            params = this.context.getCurrentParams();
+            params = this.context.router.getCurrentParams();
         }
         if(query === undefined) {
-            query = this.context.getCurrentQuery();
+            query = this.context.router.getCurrentQuery();
         }
 
-        // FIXME: react-router is just broken.
-        ReactRouter.Navigation.replaceWith.call(this, routeNameOrPath, params, query);
+        // FIXME: react-router is just broken,
+        // we hopefully just need to wait for the next release with https://github.com/rackt/react-router/pull/957.
+        this.context.router.replaceWith(routeNameOrPath, params, query);
+    }
+});
+
+// react-router is fairly good at changing its API regularly.
+// We keep the old method for now - if it should turn out that their changes are permanent,
+// we may remove this mixin and access react-router directly again.
+var State = _.extend({}, ReactRouter.State, {
+    getQuery: function(){
+        return this.context.router.getCurrentQuery();
+    },
+    getParams: function(){
+        return this.context.router.getCurrentParams();
     }
 });
-_.extend(Navigation.contextTypes, ReactRouter.State.contextTypes);
 
 var Splitter = React.createClass({displayName: "Splitter",
     getDefaultProps: function () {
@@ -610,7 +622,7 @@ var Splitter = React.createClass({displayName: "Splitter",
 });
 
 module.exports = {
-    State: ReactRouter.State, // keep here - react-router is pretty buggy, we may need workarounds in the future.
+    State: State,
     Navigation: Navigation,
     StickyHeadMixin: StickyHeadMixin,
     AutoScrollMixin: AutoScrollMixin,
@@ -2166,15 +2178,17 @@ var Header = React.createClass({displayName: "Header",
     },
     render: function () {
         var header = header_entries.map(function (entry, i) {
-            var classes = React.addons.classSet({
-                active: entry == this.state.active
-            });
+            var className;
+            if(entry === this.state.active){
+                className = "active";
+            } else {
+                className = "";
+            }
             return (
                 React.createElement("a", {key: i, 
                     href: "#", 
-                    className: classes, 
-                    onClick: this.handleClick.bind(this, entry)
-                }, 
+                    className: className, 
+                    onClick: this.handleClick.bind(this, entry)}, 
                      entry.title
                 )
             );

libmproxy/web/static/vendor.css

@@ -945,12 +945,24 @@ th {
 .glyphicon-bitcoin:before {
   content: "\e227";
 }
+.glyphicon-btc:before {
+  content: "\e227";
+}
+.glyphicon-xbt:before {
+  content: "\e227";
+}
 .glyphicon-yen:before {
   content: "\00a5";
 }
+.glyphicon-jpy:before {
+  content: "\00a5";
+}
 .glyphicon-ruble:before {
   content: "\20bd";
 }
+.glyphicon-rub:before {
+  content: "\20bd";
+}
 .glyphicon-scale:before {
   content: "\e230";
 }
@@ -1147,6 +1159,9 @@ hr {
   overflow: visible;
   clip: auto;
 }
+[role="button"] {
+  cursor: pointer;
+}
 h1,
 h2,
 h3,
@@ -2548,10 +2563,13 @@ output {
 .form-control[disabled],
 .form-control[readonly],
 fieldset[disabled] .form-control {
-  cursor: not-allowed;
   background-color: #eeeeee;
   opacity: 1;
 }
+.form-control[disabled],
+fieldset[disabled] .form-control {
+  cursor: not-allowed;
+}
 textarea.form-control {
   height: auto;
 }
@@ -2618,6 +2636,7 @@ input[type="search"] {
 }
 .radio-inline,
 .checkbox-inline {
+  position: relative;
   display: inline-block;
   padding-left: 20px;
   margin-bottom: 0;
@@ -2654,6 +2673,7 @@ fieldset[disabled] .checkbox label {
   padding-top: 7px;
   padding-bottom: 7px;
   margin-bottom: 0;
+  min-height: 34px;
 }
 .form-control-static.input-lg,
 .form-control-static.input-sm {
@@ -2695,6 +2715,7 @@ select[multiple].form-group-sm .form-control {
   padding: 5px 10px;
   font-size: 12px;
   line-height: 1.5;
+  min-height: 32px;
 }
 .input-lg {
   height: 46px;
@@ -2731,6 +2752,7 @@ select[multiple].form-group-lg .form-control {
   padding: 10px 16px;
   font-size: 18px;
   line-height: 1.3333333;
+  min-height: 38px;
 }
 .has-feedback {
   position: relative;
@@ -3348,11 +3370,9 @@ input[type="button"].btn-block {
 }
 .collapse {
   display: none;
-  visibility: hidden;
 }
 .collapse.in {
   display: block;
-  visibility: visible;
 }
 tr.collapse.in {
   display: table-row;
@@ -3377,7 +3397,7 @@ tbody.collapse.in {
   height: 0;
   margin-left: 2px;
   vertical-align: middle;
-  border-top: 4px solid;
+  border-top: 4px dashed;
   border-right: 4px solid transparent;
   border-left: 4px solid transparent;
 }
@@ -4016,11 +4036,9 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 }
 .tab-content > .tab-pane {
   display: none;
-  visibility: hidden;
 }
 .tab-content > .active {
   display: block;
-  visibility: visible;
 }
 .nav-tabs .dropdown-menu {
   margin-top: -1px;
@@ -4062,7 +4080,6 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   }
   .navbar-collapse.collapse {
     display: block !important;
-    visibility: visible !important;
     height: auto !important;
     padding-bottom: 0;
     overflow: visible !important;
@@ -4791,7 +4808,8 @@ a.label:focus {
   position: relative;
   top: -1px;
 }
-.btn-xs .badge {
+.btn-xs .badge,
+.btn-group-xs > .btn .badge {
   top: 0;
   padding: 1px 5px;
 }
@@ -5614,10 +5632,10 @@ a.list-group-item-danger.active:focus {
   width: 100%;
   border: 0;
 }
-.embed-responsive.embed-responsive-16by9 {
+.embed-responsive-16by9 {
   padding-bottom: 56.25%;
 }
-.embed-responsive.embed-responsive-4by3 {
+.embed-responsive-4by3 {
   padding-bottom: 75%;
 }
 .well {
@@ -5678,7 +5696,7 @@ button.close {
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: 1040;
+  z-index: 1050;
   -webkit-overflow-scrolling: touch;
   outline: 0;
 }
@@ -5719,10 +5737,12 @@ button.close {
   outline: 0;
 }
 .modal-backdrop {
-  position: absolute;
+  position: fixed;
   top: 0;
   right: 0;
+  bottom: 0;
   left: 0;
+  z-index: 1040;
   background-color: #000000;
 }
 .modal-backdrop.fade {
@@ -5793,7 +5813,6 @@ button.close {
   position: absolute;
   z-index: 1070;
   display: block;
-  visibility: visible;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 12px;
   font-weight: normal;
@@ -6316,7 +6335,6 @@ button.close {
 }
 .hidden {
   display: none !important;
-  visibility: hidden !important;
 }
 .affix {
   position: fixed;