From dffe84ec04c5a594488238695f63864f756fffca Mon Sep 17 00:00:00 2001
From: bkniffler <bkniffler@me.com>
Date: Mon, 3 Aug 2015 21:58:18 +0200
Subject: [PATCH 1/6] Beautify JSON, use <pre>

---
 src/react/LogMonitorEntry.js | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/react/LogMonitorEntry.js b/src/react/LogMonitorEntry.js
index 25b4cc83..92dd3459 100644
--- a/src/react/LogMonitorEntry.js
+++ b/src/react/LogMonitorEntry.js
@@ -49,7 +49,7 @@ export default class LogMonitorEntry {
     let errorText = error;
     if (!errorText) {
       try {
-        return JSON.stringify(this.props.select(state));
+        return JSON.stringify(this.props.select(state), null, 2);
       } catch (err) {
         errorText = 'Error selecting state.';
       }
@@ -76,8 +76,10 @@ export default class LogMonitorEntry {
     const { r, g, b } = colorFromString(action.type);
 
     return (
-      <div style={{
-        textDecoration: collapsed ? 'line-through' : 'none'
+      <pre style={{
+        textDecoration: collapsed ? 'line-through' : 'none',
+        backgroundColor: "transparent",
+        border: "0px"
       }}>
         <a onClick={::this.handleActionClick}
            style={{
@@ -90,13 +92,15 @@ export default class LogMonitorEntry {
              cursor: (index > 0) ? 'pointer' : 'default',
              WebkitUserSelect: 'none'
            }}>
-          {JSON.stringify(action)}
+          {JSON.stringify(action, null, 2)}
         </a>
 
         {!collapsed &&
           <p style={{
             textAlign: 'center',
-            transform: 'rotate(180deg)'
+            transform: 'rotate(180deg)',
+            color: 'lightyellow',
+            fontSize: "2em"
           }}>
             ⇧
           </p>
@@ -115,7 +119,7 @@ export default class LogMonitorEntry {
         <hr style={{
           marginBottom: '2em'
         }} />
-      </div>
+      </pre>
     );
   }
 }

From dba48a61289dbb65d198db3f0fdec2d149d2b03c Mon Sep 17 00:00:00 2001
From: Benjamin Kniffler <bkniffler@me.com>
Date: Wed, 5 Aug 2015 02:06:31 +0200
Subject: [PATCH 2/6] Ugly code inc, only a draft; timeline-view and horizontal
 scrolling

---
 src/react/LogMonitor.js      |   7 +-
 src/react/LogMonitorEntry.js | 222 +++++++++++++++++++++++------------
 src/react/timeline.less      | 191 ++++++++++++++++++++++++++++++
 3 files changed, 345 insertions(+), 75 deletions(-)
 create mode 100644 src/react/timeline.less

diff --git a/src/react/LogMonitor.js b/src/react/LogMonitor.js
index 99691c9b..d3e05636 100644
--- a/src/react/LogMonitor.js
+++ b/src/react/LogMonitor.js
@@ -1,6 +1,9 @@
 import React, { PropTypes, findDOMNode } from 'react';
 import LogMonitorEntry from './LogMonitorEntry';
 
+if(BROWSER){
+   require("./timeline.less");
+}
 export default class LogMonitor {
   constructor() {
     window.addEventListener('keydown', ::this.handleKeyPress);
@@ -135,7 +138,9 @@ export default class LogMonitor {
             </a>
           </div>
         </div>
-        {elements}
+         <ul className="timeline">
+            {elements}
+         </ul>
         <div>
           {computedStates.length > 1 &&
             <a onClick={::this.handleRollback}
diff --git a/src/react/LogMonitorEntry.js b/src/react/LogMonitorEntry.js
index 92dd3459..07bae1e9 100644
--- a/src/react/LogMonitorEntry.js
+++ b/src/react/LogMonitorEntry.js
@@ -1,82 +1,142 @@
-import React, { PropTypes } from 'react';
+import React, { PropTypes, Component } from 'react';
 
 function hsvToRgb(h, s, v) {
-  const i = Math.floor(h);
-  const f = h - i;
-  const p = v * (1 - s);
-  const q = v * (1 - f * s);
-  const t = v * (1 - (1 - f) * s);
-  const mod = i % 6;
-  const r = [v, q, p, p, t, v][mod];
-  const g = [t, v, v, q, p, p][mod];
-  const b = [p, p, t, v, v, q][mod];
+   const i = Math.floor(h);
+   const f = h - i;
+   const p = v * (1 - s);
+   const q = v * (1 - f * s);
+   const t = v * (1 - (1 - f) * s);
+   const mod = i % 6;
+   const r = [v, q, p, p, t, v][mod];
+   const g = [t, v, v, q, p, p][mod];
+   const b = [p, p, t, v, v, q][mod];
 
-  return {
-    r: Math.round(r * 255),
-    g: Math.round(g * 255),
-    b: Math.round(b * 255)
-  };
+   return {
+      r: Math.round(r * 255),
+      g: Math.round(g * 255),
+      b: Math.round(b * 255)
+   };
 }
 
 function colorFromString(token) {
-  const splitToken = token.split('');
-  const finalToken = splitToken.concat(splitToken.reverse());
+   const splitToken = token.split('');
+   const finalToken = splitToken.concat(splitToken.reverse());
 
-  const number = finalToken.reduce(
-    (sum, char) => sum + char.charCodeAt(0),
-    0
-  ) * Math.abs(Math.sin(token.length));
+   const number = finalToken.reduce(
+         (sum, char) => sum + char.charCodeAt(0),
+         0
+      ) * Math.abs(Math.sin(token.length));
 
-  const h = Math.round((number * (180 / Math.PI) * token.length) % 360);
-  const s = number % 100 / 100;
-  const v = 1;
+   const h = Math.round((number * (180 / Math.PI) * token.length) % 360);
+   const s = number % 100 / 100;
+   const v = 1;
 
-  return hsvToRgb(h, s, v);
+   return hsvToRgb(h, s, v);
 }
 
-export default class LogMonitorEntry {
-  static propTypes = {
-    index: PropTypes.number.isRequired,
-    state: PropTypes.object.isRequired,
-    action: PropTypes.object.isRequired,
-    select: PropTypes.func.isRequired,
-    error: PropTypes.string,
-    onActionClick: PropTypes.func.isRequired,
-    collapsed: PropTypes.bool
-  };
-
-  printState(state, error) {
-    let errorText = error;
-    if (!errorText) {
-      try {
-        return JSON.stringify(this.props.select(state), null, 2);
-      } catch (err) {
-        errorText = 'Error selecting state.';
+export default class LogMonitorEntry extends Component {
+   constructor(props) {
+      super(props);
+      this.state = {
+         maximized: false,
+         time: new Date()
       }
-    }
+   }
 
-    return (
-      <span style={{
+   static propTypes = {
+      index: PropTypes.number.isRequired,
+      state: PropTypes.object.isRequired,
+      action: PropTypes.object.isRequired,
+      select: PropTypes.func.isRequired,
+      error: PropTypes.string,
+      onActionClick: PropTypes.func.isRequired,
+      collapsed: PropTypes.bool
+   };
+
+   printState(state, error) {
+      let errorText = error;
+      if (!errorText) {
+         try {
+            return JSON.stringify(this.props.select(state), null, 2);
+         } catch (err) {
+            errorText = 'Error selecting state.';
+         }
+      }
+
+      return (
+         <span style={{
         fontStyle: 'italic'
       }}>
         ({errorText})
       </span>
-    );
-  }
+      );
+   }
 
-  handleActionClick() {
-    const { index, onActionClick } = this.props;
-    if (index > 0) {
-      onActionClick(index);
-    }
-  }
+   handleCollapseClick() {
+      const { index, onActionClick } = this.props;
+      if (index > 0) {
+         onActionClick(index);
+      }
+   }
 
-  render() {
-    const { index, error, action, state, collapsed } = this.props;
-    const { r, g, b } = colorFromString(action.type);
+   handleMaximizeClick() {
+      const { maximized } = this.state;
+      this.setState({maximized: !maximized});
+   }
 
-    return (
-      <pre style={{
+   render() {
+      const { index, error, action, state, collapsed } = this.props;
+      const { maximized, time } = this.state;
+      if (!action.type) {
+         return null;
+      }
+      const { r, g, b } = colorFromString(action.type);
+
+      return (
+         <li className="timeline-inverted">
+            <a className="timeline-badge" onClick={::this.handleCollapseClick} href="javascript:;">
+               <i className={"fa fa-" + (collapsed ? "ban" : "check")}></i>
+            </a>
+            {maximized ?
+               <div className="timeline-panel" style={{whiteSpace: "nowrap", overflow: "auto"}}>
+                  <div style={{display: "table", tableLayout: "fixed", width: "100%"}}>
+                     <div style={{ width: "400px", display: "table-cell"}}>
+                        <a className="timeline-heading" onClick={::this.handleMaximizeClick} href="javascript:;">
+                          <pre className="timeline-pre">
+                             <a style={{color: `rgb(${r}, ${g}, ${b})`,}}>
+                                <i className="fa fa-minus-square"></i>
+                                {JSON.stringify(action, null, 2)}
+                             </a>
+                          </pre>
+                        </a>
+
+                        <div className="timeline-body">
+                          <pre className="timeline-pre">
+                             {this.printState(state, error)}
+                          </pre>
+                        </div>
+                     </div>
+                  </div>
+               </div> :
+               <div className="timeline-panel">
+                  <a class="timeline-heading" onClick={::this.handleMaximizeClick} href="javascript:;">
+                     <h4 class="timeline-title" style={{color: `rgb(${r}, ${g}, ${b})`,}}>
+                        <i className="fa fa-plus-square"></i>
+                        {" " + action.type}
+                     </h4>
+                     <p>
+                        <small className="text-muted">
+                           <i className="fa fa-clock-o"></i>
+                           {" " + getTimestring(time)}
+                        </small>
+                     </p>
+                  </a>
+               </div>
+            }
+         </li>
+      );
+      return (
+         <pre style={{
         textDecoration: collapsed ? 'line-through' : 'none',
         backgroundColor: "transparent",
         border: "0px"
@@ -92,34 +152,48 @@ export default class LogMonitorEntry {
              cursor: (index > 0) ? 'pointer' : 'default',
              WebkitUserSelect: 'none'
            }}>
-          {JSON.stringify(action, null, 2)}
+           {JSON.stringify(action, null, 2)}
         </a>
 
-        {!collapsed &&
-          <p style={{
+            {!collapsed &&
+            <p style={{
             textAlign: 'center',
             transform: 'rotate(180deg)',
             color: 'lightyellow',
             fontSize: "2em"
           }}>
-            ⇧
-          </p>
-        }
+               ⇧
+            </p>
+            }
 
-        {!collapsed &&
-          <div style={{
+            {!collapsed &&
+            <div style={{
             paddingBottom: '1em',
             paddingTop: '1em',
             color: 'lightyellow'
           }}>
-            {this.printState(state, error)}
-          </div>
-        }
+               {this.printState(state, error)}
+            </div>
+            }
 
-        <hr style={{
+            <hr style={{
           marginBottom: '2em'
-        }} />
+        }}/>
       </pre>
-    );
-  }
+      );
+   }
+}
+function getTimestring(d) {
+   var x = document.getElementById("demo");
+   var h = addZero(d.getHours(), 2);
+   var m = addZero(d.getMinutes(), 2);
+   var s = addZero(d.getSeconds(), 2);
+   var ms = addZero(d.getMilliseconds(), 3);
+   return h + ":" + m + ":" + s + ":" + ms;
+}
+function addZero(x, n) {
+   if (x.toString().length < n) {
+      x = "0" + x;
+   }
+   return x;
 }
diff --git a/src/react/timeline.less b/src/react/timeline.less
new file mode 100644
index 00000000..628b4224
--- /dev/null
+++ b/src/react/timeline.less
@@ -0,0 +1,191 @@
+.timeline {
+   list-style: none;
+   padding: 20px 0 20px;
+   position: relative;
+}
+
+.timeline-pre {
+   background-color: transparent;
+   color: white;
+   border: 0;
+   margin: 0;
+   padding: 0;
+}
+
+.timeline:before {
+   top: 0;
+   bottom: 0;
+   position: absolute;
+   content: " ";
+   width: 3px;
+   background-color: #eeeeee;
+   left: 20px;
+   margin-left: -1.5px;
+}
+
+.timeline > li {
+   margin-bottom: 20px;
+   position: relative;
+}
+
+.timeline > li:before,
+.timeline > li:after {
+   content: " ";
+   display: table;
+}
+
+.timeline > li:after {
+   clear: both;
+}
+
+.timeline > li:before,
+.timeline > li:after {
+   content: " ";
+   display: table;
+}
+
+.timeline > li:after {
+   clear: both;
+}
+
+.timeline > li > .timeline-panel {
+   width: 80%;
+   float: left;
+   border: 1px solid #d4d4d4;
+   border-radius: 2px;
+   padding: 5px;
+   position: relative;
+   -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
+   box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
+}
+
+.timeline > li > .timeline-panel:before {
+   position: absolute;
+   top: 26px;
+   right: -15px;
+   display: inline-block;
+   border-top: 15px solid transparent;
+   border-left: 15px solid #ccc;
+   border-right: 0 solid #ccc;
+   border-bottom: 15px solid transparent;
+   content: " ";
+}
+
+.timeline > li > .timeline-panel:after {
+   position: absolute;
+   top: 27px;
+   right: -14px;
+   display: inline-block;
+   border-top: 14px solid transparent;
+   border-left: 14px solid #fff;
+   border-right: 0 solid #fff;
+   border-bottom: 14px solid transparent;
+   content: " ";
+}
+
+.timeline > li > .timeline-badge {
+   color: #fff;
+   width: 50px;
+   height: 50px;
+   line-height: 50px;
+   font-size: 1.4em;
+   text-align: center;
+   position: absolute;
+   top: 16px;
+   left: 20px;
+   margin-left: -25px;
+   background-color: #999999;
+   z-index: 100;
+   border-top-right-radius: 50%;
+   border-top-left-radius: 50%;
+   border-bottom-right-radius: 50%;
+   border-bottom-left-radius: 50%;
+}
+
+.timeline > li.timeline-inverted > .timeline-panel {
+   float: right;
+}
+
+.timeline > li.timeline-inverted > .timeline-panel:before {
+   border-left-width: 0;
+   border-right-width: 15px;
+   left: -15px;
+   right: auto;
+}
+
+.timeline > li.timeline-inverted > .timeline-panel:after {
+   border-left-width: 0;
+   border-right-width: 14px;
+   left: -14px;
+   right: auto;
+}
+
+.timeline-badge.primary {
+   background-color: #2e6da4 !important;
+}
+
+.timeline-badge.success {
+   background-color: #3f903f !important;
+}
+
+.timeline-badge.warning {
+   background-color: #f0ad4e !important;
+}
+
+.timeline-badge.danger {
+   background-color: #d9534f !important;
+}
+
+.timeline-badge.info {
+   background-color: #5bc0de !important;
+}
+
+.timeline-title {
+   margin-top: 0;
+   //color: inherit;
+}
+
+.timeline-body > p,
+.timeline-body > ul {
+   margin-bottom: 0;
+}
+
+.timeline-body > p + p {
+   margin-top: 5px;
+}
+
+@media (max-width: 767px) {
+   ul.timeline:before {
+      left: 40px;
+   }
+
+   ul.timeline > li > .timeline-panel {
+      width: calc(100% - 90px);
+      width: -moz-calc(100% - 90px);
+      width: -webkit-calc(100% - 90px);
+   }
+
+   ul.timeline > li > .timeline-badge {
+      left: 15px;
+      margin-left: 0;
+      top: 16px;
+   }
+
+   ul.timeline > li > .timeline-panel {
+      float: right;
+   }
+
+   ul.timeline > li > .timeline-panel:before {
+      border-left-width: 0;
+      border-right-width: 15px;
+      left: -15px;
+      right: auto;
+   }
+
+   ul.timeline > li > .timeline-panel:after {
+      border-left-width: 0;
+      border-right-width: 14px;
+      left: -14px;
+      right: auto;
+   }
+}

From e159133a21a0f2ce759bb7c13c549852797f5b47 Mon Sep 17 00:00:00 2001
From: Benjamin Kniffler <bkniffler@me.com>
Date: Wed, 5 Aug 2015 02:46:32 +0200
Subject: [PATCH 3/6] Another ugly coded draft, without the timeline, action &
 state separately expandable

---
 src/react/LogMonitor.js      |   2 +-
 src/react/LogMonitorEntry.js |  72 +++++++++--------
 src/react/timeline.less      | 146 +++++------------------------------
 3 files changed, 60 insertions(+), 160 deletions(-)

diff --git a/src/react/LogMonitor.js b/src/react/LogMonitor.js
index d3e05636..904d61b5 100644
--- a/src/react/LogMonitor.js
+++ b/src/react/LogMonitor.js
@@ -138,7 +138,7 @@ export default class LogMonitor {
             </a>
           </div>
         </div>
-         <ul className="timeline">
+         <ul className="redux-timeline">
             {elements}
          </ul>
         <div>
diff --git a/src/react/LogMonitorEntry.js b/src/react/LogMonitorEntry.js
index 07bae1e9..3ce04b55 100644
--- a/src/react/LogMonitorEntry.js
+++ b/src/react/LogMonitorEntry.js
@@ -39,7 +39,7 @@ export default class LogMonitorEntry extends Component {
       super(props);
       this.state = {
          maximized: false,
-         time: new Date()
+         maximizedBody: false
       }
    }
 
@@ -83,56 +83,60 @@ export default class LogMonitorEntry extends Component {
       const { maximized } = this.state;
       this.setState({maximized: !maximized});
    }
+   handleMaximizeBodyClick() {
+      const { maximizedBody } = this.state;
+      this.setState({maximizedBody: !maximizedBody});
+   }
 
    render() {
       const { index, error, action, state, collapsed } = this.props;
-      const { maximized, time } = this.state;
+      const { maximized, maximizedBody } = this.state;
       if (!action.type) {
          return null;
       }
       const { r, g, b } = colorFromString(action.type);
 
       return (
-         <li className="timeline-inverted">
-            <a className="timeline-badge" onClick={::this.handleCollapseClick} href="javascript:;">
+         <li className="redux-timeline-inverted">
+            {/*<a className="timeline-badge" onClick={::this.handleCollapseClick} href="javascript:;">
                <i className={"fa fa-" + (collapsed ? "ban" : "check")}></i>
-            </a>
-            {maximized ?
-               <div className="timeline-panel" style={{whiteSpace: "nowrap", overflow: "auto"}}>
-                  <div style={{display: "table", tableLayout: "fixed", width: "100%"}}>
-                     <div style={{ width: "400px", display: "table-cell"}}>
-                        <a className="timeline-heading" onClick={::this.handleMaximizeClick} href="javascript:;">
-                          <pre className="timeline-pre">
+            </a>*/}
+            <div className="redux-timeline-panel" style={{whiteSpace: "nowrap", overflow: "auto"}}>
+               <div style={{display: "table", tableLayout: "fixed", width: "100%"}}>
+                  <div style={{ width: "400px", display: "table-cell"}}>
+                     <a className="redux-timeline-heading" onClick={::this.handleCollapseClick} href="javascript:;">
+                        <i className={"fa fa-" + (collapsed ? "ban" : "check")}></i>
+                        {!collapsed ? " Enabled" : " Disabled"}
+                     </a>
+                     <a className="redux-timeline-heading" onClick={::this.handleMaximizeClick} href="javascript:;">
+                        {!maximized ?
+                           (<h4 class="redux-timeline-title" style={{color: `rgb(${r}, ${g}, ${b})`,}}>
+                              <i className="fa fa-plus-square"></i>
+                              {" " + action.type}
+                           </h4>) :
+                           (<pre className="redux-timeline-pre">
                              <a style={{color: `rgb(${r}, ${g}, ${b})`,}}>
                                 <i className="fa fa-minus-square"></i>
                                 {JSON.stringify(action, null, 2)}
                              </a>
-                          </pre>
-                        </a>
-
-                        <div className="timeline-body">
-                          <pre className="timeline-pre">
+                          </pre>)
+                        }
+                     </a>
+                     <a className="redux-timeline-body" onClick={::this.handleMaximizeBodyClick} href="javascript:;">
+                        {!maximizedBody ?
+                           (<h4 class="redux-timeline-title" style={{color: "white"}}>
+                              <i className="fa fa-plus-square"></i>
+                              {" State: object {...}"}
+                           </h4>) :
+                           (<pre className="redux-timeline-pre">
+                              <i className="fa fa-minus-square"></i>
                              {this.printState(state, error)}
-                          </pre>
-                        </div>
-                     </div>
+                           </pre>)
+                        }
+                     </a>
                   </div>
-               </div> :
-               <div className="timeline-panel">
-                  <a class="timeline-heading" onClick={::this.handleMaximizeClick} href="javascript:;">
-                     <h4 class="timeline-title" style={{color: `rgb(${r}, ${g}, ${b})`,}}>
-                        <i className="fa fa-plus-square"></i>
-                        {" " + action.type}
-                     </h4>
-                     <p>
-                        <small className="text-muted">
-                           <i className="fa fa-clock-o"></i>
-                           {" " + getTimestring(time)}
-                        </small>
-                     </p>
-                  </a>
                </div>
-            }
+            </div>
          </li>
       );
       return (
diff --git a/src/react/timeline.less b/src/react/timeline.less
index 628b4224..6fc3b49c 100644
--- a/src/react/timeline.less
+++ b/src/react/timeline.less
@@ -1,10 +1,10 @@
-.timeline {
+.redux-timeline {
    list-style: none;
    padding: 20px 0 20px;
    position: relative;
 }
 
-.timeline-pre {
+.redux-timeline-pre {
    background-color: transparent;
    color: white;
    border: 0;
@@ -12,44 +12,33 @@
    padding: 0;
 }
 
-.timeline:before {
-   top: 0;
-   bottom: 0;
-   position: absolute;
-   content: " ";
-   width: 3px;
-   background-color: #eeeeee;
-   left: 20px;
-   margin-left: -1.5px;
-}
-
-.timeline > li {
+.redux-timeline > li {
    margin-bottom: 20px;
    position: relative;
 }
 
-.timeline > li:before,
-.timeline > li:after {
+.redux-timeline > li:before,
+.redux-timeline > li:after {
    content: " ";
    display: table;
 }
 
-.timeline > li:after {
+.redux-timeline > li:after {
    clear: both;
 }
 
-.timeline > li:before,
-.timeline > li:after {
+.redux-timeline > li:before,
+.redux-timeline > li:after {
    content: " ";
    display: table;
 }
 
-.timeline > li:after {
+.redux-timeline > li:after {
    clear: both;
 }
 
-.timeline > li > .timeline-panel {
-   width: 80%;
+.redux-timeline > li > .redux-timeline-panel {
+   width: 100%;
    float: left;
    border: 1px solid #d4d4d4;
    border-radius: 2px;
@@ -59,133 +48,40 @@
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
 }
 
-.timeline > li > .timeline-panel:before {
-   position: absolute;
-   top: 26px;
-   right: -15px;
-   display: inline-block;
-   border-top: 15px solid transparent;
-   border-left: 15px solid #ccc;
-   border-right: 0 solid #ccc;
-   border-bottom: 15px solid transparent;
-   content: " ";
-}
-
-.timeline > li > .timeline-panel:after {
-   position: absolute;
-   top: 27px;
-   right: -14px;
-   display: inline-block;
-   border-top: 14px solid transparent;
-   border-left: 14px solid #fff;
-   border-right: 0 solid #fff;
-   border-bottom: 14px solid transparent;
-   content: " ";
-}
-
-.timeline > li > .timeline-badge {
-   color: #fff;
-   width: 50px;
-   height: 50px;
-   line-height: 50px;
-   font-size: 1.4em;
-   text-align: center;
-   position: absolute;
-   top: 16px;
-   left: 20px;
-   margin-left: -25px;
-   background-color: #999999;
-   z-index: 100;
-   border-top-right-radius: 50%;
-   border-top-left-radius: 50%;
-   border-bottom-right-radius: 50%;
-   border-bottom-left-radius: 50%;
-}
-
-.timeline > li.timeline-inverted > .timeline-panel {
+.redux-timeline > li.redux-timeline-inverted > .redux-timeline-panel {
    float: right;
 }
 
-.timeline > li.timeline-inverted > .timeline-panel:before {
-   border-left-width: 0;
-   border-right-width: 15px;
-   left: -15px;
-   right: auto;
-}
-
-.timeline > li.timeline-inverted > .timeline-panel:after {
-   border-left-width: 0;
-   border-right-width: 14px;
-   left: -14px;
-   right: auto;
-}
-
-.timeline-badge.primary {
+.redux-timeline-badge.primary {
    background-color: #2e6da4 !important;
 }
 
-.timeline-badge.success {
+.redux-timeline-badge.success {
    background-color: #3f903f !important;
 }
 
-.timeline-badge.warning {
+.redux-timeline-badge.warning {
    background-color: #f0ad4e !important;
 }
 
-.timeline-badge.danger {
+.redux-timeline-badge.danger {
    background-color: #d9534f !important;
 }
 
-.timeline-badge.info {
+.redux-timeline-badge.info {
    background-color: #5bc0de !important;
 }
 
-.timeline-title {
+.redux-timeline-title {
    margin-top: 0;
    //color: inherit;
 }
 
-.timeline-body > p,
-.timeline-body > ul {
+.redux-timeline-body > p,
+.redux-timeline-body > ul {
    margin-bottom: 0;
 }
 
-.timeline-body > p + p {
+.redux-timeline-body > p + p {
    margin-top: 5px;
 }
-
-@media (max-width: 767px) {
-   ul.timeline:before {
-      left: 40px;
-   }
-
-   ul.timeline > li > .timeline-panel {
-      width: calc(100% - 90px);
-      width: -moz-calc(100% - 90px);
-      width: -webkit-calc(100% - 90px);
-   }
-
-   ul.timeline > li > .timeline-badge {
-      left: 15px;
-      margin-left: 0;
-      top: 16px;
-   }
-
-   ul.timeline > li > .timeline-panel {
-      float: right;
-   }
-
-   ul.timeline > li > .timeline-panel:before {
-      border-left-width: 0;
-      border-right-width: 15px;
-      left: -15px;
-      right: auto;
-   }
-
-   ul.timeline > li > .timeline-panel:after {
-      border-left-width: 0;
-      border-right-width: 14px;
-      left: -14px;
-      right: auto;
-   }
-}

From 1a227489e3e87c91ddc41bf3818eb93bbd9b00f1 Mon Sep 17 00:00:00 2001
From: Benjamin Kniffler <bkniffler@me.com>
Date: Wed, 5 Aug 2015 03:13:43 +0200
Subject: [PATCH 4/6] Polished code, ready for processing (i guess)

---
 src/react/LogMonitor.js          |   4 +-
 src/react/LogMonitorEntries.less |  43 ++++++++++
 src/react/LogMonitorEntry.js     | 131 ++++++++++---------------------
 src/react/timeline.less          |  87 --------------------
 4 files changed, 86 insertions(+), 179 deletions(-)
 create mode 100644 src/react/LogMonitorEntries.less
 delete mode 100644 src/react/timeline.less

diff --git a/src/react/LogMonitor.js b/src/react/LogMonitor.js
index 904d61b5..ec3dc0dc 100644
--- a/src/react/LogMonitor.js
+++ b/src/react/LogMonitor.js
@@ -2,7 +2,7 @@ import React, { PropTypes, findDOMNode } from 'react';
 import LogMonitorEntry from './LogMonitorEntry';
 
 if(BROWSER){
-   require("./timeline.less");
+   require("./LogMonitorEntries.less");
 }
 export default class LogMonitor {
   constructor() {
@@ -138,7 +138,7 @@ export default class LogMonitor {
             </a>
           </div>
         </div>
-         <ul className="redux-timeline">
+         <ul className="redux-devtool-entries">
             {elements}
          </ul>
         <div>
diff --git a/src/react/LogMonitorEntries.less b/src/react/LogMonitorEntries.less
new file mode 100644
index 00000000..9eeff48a
--- /dev/null
+++ b/src/react/LogMonitorEntries.less
@@ -0,0 +1,43 @@
+.redux-devtool-entries {
+   list-style: none;
+   padding: 20px 0 20px;
+   position: relative;
+   pre {
+      background-color: transparent;
+      color: white;
+      border: 0;
+      margin: 0;
+      padding: 0;
+   }
+   > li {
+      margin-bottom: 20px;
+      position: relative;
+   }
+   > li:before, > li:after {
+      content: " ";
+      display: table;
+   }
+   > li:after {
+      clear: both;
+   }
+   > li:before, > li:after {
+      content: " ";
+      display: table;
+   }
+   > li:after {
+      clear: both;
+   }
+   .wrap-1{
+      whiteSpace: nowrap;
+      overflow: auto;
+   }
+   .wrap-2{
+      display: table;
+      tableLayout: fixed;
+      width: 100%;
+   }
+   .wrap-3{
+      width: 400px;
+      display: table-cell;
+   }
+}
diff --git a/src/react/LogMonitorEntry.js b/src/react/LogMonitorEntry.js
index 3ce04b55..a258e51d 100644
--- a/src/react/LogMonitorEntry.js
+++ b/src/react/LogMonitorEntry.js
@@ -38,8 +38,8 @@ export default class LogMonitorEntry extends Component {
    constructor(props) {
       super(props);
       this.state = {
-         maximized: false,
-         maximizedBody: false
+         maximizedAction: false,
+         maximizedState: false
       }
    }
 
@@ -79,112 +79,63 @@ export default class LogMonitorEntry extends Component {
       }
    }
 
-   handleMaximizeClick() {
-      const { maximized } = this.state;
-      this.setState({maximized: !maximized});
-   }
-   handleMaximizeBodyClick() {
-      const { maximizedBody } = this.state;
-      this.setState({maximizedBody: !maximizedBody});
-   }
-
    render() {
       const { index, error, action, state, collapsed } = this.props;
-      const { maximized, maximizedBody } = this.state;
+      const { maximizedAction, maximizedState } = this.state;
       if (!action.type) {
          return null;
       }
       const { r, g, b } = colorFromString(action.type);
+      const colorStyle = {color: `rgb(${r}, ${g}, ${b})`};
+
+      // Heading
+      let headingComponent = !maximizedAction ? (
+         <h4 style={{color: `rgb(${r}, ${g}, ${b})`,}}>
+            <i className="fa fa-plus-square"></i>
+            {" " + action.type}
+         </h4>
+      ) : (
+         <pre>
+           <a style={colorStyle}>
+              <i className="fa fa-minus-square"></i>
+              {JSON.stringify(action, null, 2)}
+           </a>
+        </pre>
+      );
+
+      // State
+      let stateComponent = !maximizedState ? (
+         <h4 style={{color: "white"}}>
+            <i className="fa fa-plus-square"></i>
+            {" State: object {...}"}
+         </h4>
+      ) : (
+         <pre>
+            <i className="fa fa-minus-square"></i>
+            {this.printState(state, error)}
+         </pre>
+      );
 
       return (
-         <li className="redux-timeline-inverted">
-            {/*<a className="timeline-badge" onClick={::this.handleCollapseClick} href="javascript:;">
-               <i className={"fa fa-" + (collapsed ? "ban" : "check")}></i>
-            </a>*/}
-            <div className="redux-timeline-panel" style={{whiteSpace: "nowrap", overflow: "auto"}}>
-               <div style={{display: "table", tableLayout: "fixed", width: "100%"}}>
-                  <div style={{ width: "400px", display: "table-cell"}}>
-                     <a className="redux-timeline-heading" onClick={::this.handleCollapseClick} href="javascript:;">
+         <li>
+            <div className={"wrap-1"}>
+               <div className={"wrap-2"}>
+                  <div className={"wrap-3"}>
+                     <a onClick={::this.handleCollapseClick} href="javascript:;">
                         <i className={"fa fa-" + (collapsed ? "ban" : "check")}></i>
                         {!collapsed ? " Enabled" : " Disabled"}
                      </a>
-                     <a className="redux-timeline-heading" onClick={::this.handleMaximizeClick} href="javascript:;">
-                        {!maximized ?
-                           (<h4 class="redux-timeline-title" style={{color: `rgb(${r}, ${g}, ${b})`,}}>
-                              <i className="fa fa-plus-square"></i>
-                              {" " + action.type}
-                           </h4>) :
-                           (<pre className="redux-timeline-pre">
-                             <a style={{color: `rgb(${r}, ${g}, ${b})`,}}>
-                                <i className="fa fa-minus-square"></i>
-                                {JSON.stringify(action, null, 2)}
-                             </a>
-                          </pre>)
-                        }
+                     <a onClick={()=>this.setState({maximizedAction: !maximizedAction})} href="javascript:;">
+                        {headingComponent}
                      </a>
-                     <a className="redux-timeline-body" onClick={::this.handleMaximizeBodyClick} href="javascript:;">
-                        {!maximizedBody ?
-                           (<h4 class="redux-timeline-title" style={{color: "white"}}>
-                              <i className="fa fa-plus-square"></i>
-                              {" State: object {...}"}
-                           </h4>) :
-                           (<pre className="redux-timeline-pre">
-                              <i className="fa fa-minus-square"></i>
-                             {this.printState(state, error)}
-                           </pre>)
-                        }
+                     <a onClick={()=>this.setState({maximizedState: !maximizedState})} href="javascript:;">
+                        {stateComponent}
                      </a>
                   </div>
                </div>
             </div>
          </li>
       );
-      return (
-         <pre style={{
-        textDecoration: collapsed ? 'line-through' : 'none',
-        backgroundColor: "transparent",
-        border: "0px"
-      }}>
-        <a onClick={::this.handleActionClick}
-           style={{
-             opacity: collapsed ? 0.5 : 1,
-             marginTop: '1em',
-             display: 'block',
-             paddingBottom: '1em',
-             paddingTop: '1em',
-             color: `rgb(${r}, ${g}, ${b})`,
-             cursor: (index > 0) ? 'pointer' : 'default',
-             WebkitUserSelect: 'none'
-           }}>
-           {JSON.stringify(action, null, 2)}
-        </a>
-
-            {!collapsed &&
-            <p style={{
-            textAlign: 'center',
-            transform: 'rotate(180deg)',
-            color: 'lightyellow',
-            fontSize: "2em"
-          }}>
-               ⇧
-            </p>
-            }
-
-            {!collapsed &&
-            <div style={{
-            paddingBottom: '1em',
-            paddingTop: '1em',
-            color: 'lightyellow'
-          }}>
-               {this.printState(state, error)}
-            </div>
-            }
-
-            <hr style={{
-          marginBottom: '2em'
-        }}/>
-      </pre>
-      );
    }
 }
 function getTimestring(d) {
diff --git a/src/react/timeline.less b/src/react/timeline.less
deleted file mode 100644
index 6fc3b49c..00000000
--- a/src/react/timeline.less
+++ /dev/null
@@ -1,87 +0,0 @@
-.redux-timeline {
-   list-style: none;
-   padding: 20px 0 20px;
-   position: relative;
-}
-
-.redux-timeline-pre {
-   background-color: transparent;
-   color: white;
-   border: 0;
-   margin: 0;
-   padding: 0;
-}
-
-.redux-timeline > li {
-   margin-bottom: 20px;
-   position: relative;
-}
-
-.redux-timeline > li:before,
-.redux-timeline > li:after {
-   content: " ";
-   display: table;
-}
-
-.redux-timeline > li:after {
-   clear: both;
-}
-
-.redux-timeline > li:before,
-.redux-timeline > li:after {
-   content: " ";
-   display: table;
-}
-
-.redux-timeline > li:after {
-   clear: both;
-}
-
-.redux-timeline > li > .redux-timeline-panel {
-   width: 100%;
-   float: left;
-   border: 1px solid #d4d4d4;
-   border-radius: 2px;
-   padding: 5px;
-   position: relative;
-   -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
-   box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
-}
-
-.redux-timeline > li.redux-timeline-inverted > .redux-timeline-panel {
-   float: right;
-}
-
-.redux-timeline-badge.primary {
-   background-color: #2e6da4 !important;
-}
-
-.redux-timeline-badge.success {
-   background-color: #3f903f !important;
-}
-
-.redux-timeline-badge.warning {
-   background-color: #f0ad4e !important;
-}
-
-.redux-timeline-badge.danger {
-   background-color: #d9534f !important;
-}
-
-.redux-timeline-badge.info {
-   background-color: #5bc0de !important;
-}
-
-.redux-timeline-title {
-   margin-top: 0;
-   //color: inherit;
-}
-
-.redux-timeline-body > p,
-.redux-timeline-body > ul {
-   margin-bottom: 0;
-}
-
-.redux-timeline-body > p + p {
-   margin-top: 5px;
-}

From ea57dd92aafbc0eb782e03c46c68de1d2b9d3808 Mon Sep 17 00:00:00 2001
From: Benjamin Kniffler <bkniffler@me.com>
Date: Wed, 5 Aug 2015 09:53:51 +0200
Subject: [PATCH 5/6] Inline styles instead of .less

---
 src/react/LogMonitor.js          | 11 +++++---
 src/react/LogMonitorEntries.less | 43 --------------------------------
 src/react/LogMonitorEntry.js     | 37 ++++++++++++++++++++++-----
 3 files changed, 38 insertions(+), 53 deletions(-)
 delete mode 100644 src/react/LogMonitorEntries.less

diff --git a/src/react/LogMonitor.js b/src/react/LogMonitor.js
index ec3dc0dc..7e4e71ec 100644
--- a/src/react/LogMonitor.js
+++ b/src/react/LogMonitor.js
@@ -1,9 +1,12 @@
 import React, { PropTypes, findDOMNode } from 'react';
 import LogMonitorEntry from './LogMonitorEntry';
 
-if(BROWSER){
-   require("./LogMonitorEntries.less");
-}
+const ulStyle = {
+   listStyle: "none",
+   padding: "20px 0 20px",
+   position: "relative"
+};
+
 export default class LogMonitor {
   constructor() {
     window.addEventListener('keydown', ::this.handleKeyPress);
@@ -138,7 +141,7 @@ export default class LogMonitor {
             </a>
           </div>
         </div>
-         <ul className="redux-devtool-entries">
+         <ul style={ulStyle}>
             {elements}
          </ul>
         <div>
diff --git a/src/react/LogMonitorEntries.less b/src/react/LogMonitorEntries.less
deleted file mode 100644
index 9eeff48a..00000000
--- a/src/react/LogMonitorEntries.less
+++ /dev/null
@@ -1,43 +0,0 @@
-.redux-devtool-entries {
-   list-style: none;
-   padding: 20px 0 20px;
-   position: relative;
-   pre {
-      background-color: transparent;
-      color: white;
-      border: 0;
-      margin: 0;
-      padding: 0;
-   }
-   > li {
-      margin-bottom: 20px;
-      position: relative;
-   }
-   > li:before, > li:after {
-      content: " ";
-      display: table;
-   }
-   > li:after {
-      clear: both;
-   }
-   > li:before, > li:after {
-      content: " ";
-      display: table;
-   }
-   > li:after {
-      clear: both;
-   }
-   .wrap-1{
-      whiteSpace: nowrap;
-      overflow: auto;
-   }
-   .wrap-2{
-      display: table;
-      tableLayout: fixed;
-      width: 100%;
-   }
-   .wrap-3{
-      width: 400px;
-      display: table-cell;
-   }
-}
diff --git a/src/react/LogMonitorEntry.js b/src/react/LogMonitorEntry.js
index a258e51d..9890b01d 100644
--- a/src/react/LogMonitorEntry.js
+++ b/src/react/LogMonitorEntry.js
@@ -1,5 +1,30 @@
 import React, { PropTypes, Component } from 'react';
 
+const preStyle = {
+   backgroundColor: "transparent",
+   color: "white",
+   border: 0,
+   margin: 0,
+   padding: 0
+};
+const liStyle = {
+   marginBottom: "20px",
+   position: "relative"
+};
+const wrap1Style = {
+   whiteSpace: "nowrap",
+   overflow: "auto"
+};
+const wrap2Style = {
+   display: "table",
+   tableLayout: "fixed",
+   width: "100%"
+};
+const wrap3Style = {
+   width: "800px",
+   display: "table-cell"
+};
+
 function hsvToRgb(h, s, v) {
    const i = Math.floor(h);
    const f = h - i;
@@ -95,7 +120,7 @@ export default class LogMonitorEntry extends Component {
             {" " + action.type}
          </h4>
       ) : (
-         <pre>
+         <pre style={preStyle}>
            <a style={colorStyle}>
               <i className="fa fa-minus-square"></i>
               {JSON.stringify(action, null, 2)}
@@ -110,17 +135,17 @@ export default class LogMonitorEntry extends Component {
             {" State: object {...}"}
          </h4>
       ) : (
-         <pre>
+         <pre style={preStyle}>
             <i className="fa fa-minus-square"></i>
             {this.printState(state, error)}
          </pre>
       );
 
       return (
-         <li>
-            <div className={"wrap-1"}>
-               <div className={"wrap-2"}>
-                  <div className={"wrap-3"}>
+         <li style={liStyle}>
+            <div style={wrap1Style}>
+               <div style={wrap2Style}>
+                  <div style={wrap3Style}>
                      <a onClick={::this.handleCollapseClick} href="javascript:;">
                         <i className={"fa fa-" + (collapsed ? "ban" : "check")}></i>
                         {!collapsed ? " Enabled" : " Disabled"}

From e993425245a2881c28fe7fd27bd7b445264277cf Mon Sep 17 00:00:00 2001
From: Benjamin Kniffler <bkniffler@me.com>
Date: Wed, 5 Aug 2015 10:40:46 +0200
Subject: [PATCH 6/6] Remove bootstrap/fontawesome dependencies, use +/-
 characters and unicode check/cross

---
 src/react/LogMonitorEntry.js | 43 ++++++++++++++++++++++--------------
 1 file changed, 26 insertions(+), 17 deletions(-)

diff --git a/src/react/LogMonitorEntry.js b/src/react/LogMonitorEntry.js
index 9890b01d..23438ef4 100644
--- a/src/react/LogMonitorEntry.js
+++ b/src/react/LogMonitorEntry.js
@@ -7,6 +7,13 @@ const preStyle = {
    margin: 0,
    padding: 0
 };
+const h4Style = {
+   fontWeight: 500,
+   lineHeight: 1.1,
+   fontSize: "18px",
+   marginTop: "10px",
+   marginBottom: "10px"
+}
 const liStyle = {
    marginBottom: "20px",
    position: "relative"
@@ -21,6 +28,10 @@ const wrap2Style = {
    width: "100%"
 };
 const wrap3Style = {
+   width: "100%",
+   display: "table-cell"
+};
+const wrap3StyleMax = {
    width: "800px",
    display: "table-cell"
 };
@@ -113,45 +124,43 @@ export default class LogMonitorEntry extends Component {
       const { r, g, b } = colorFromString(action.type);
       const colorStyle = {color: `rgb(${r}, ${g}, ${b})`};
 
+
       // Heading
-      let headingComponent = !maximizedAction ? (
-         <h4 style={{color: `rgb(${r}, ${g}, ${b})`,}}>
-            <i className="fa fa-plus-square"></i>
-            {" " + action.type}
+      const actionComponent = !maximizedAction ? (
+         <h4 style={{...h4Style, color: `rgb(${r}, ${g}, ${b})`,}}>
+            {"+ " + action.type}
          </h4>
       ) : (
          <pre style={preStyle}>
            <a style={colorStyle}>
-              <i className="fa fa-minus-square"></i>
-              {JSON.stringify(action, null, 2)}
+              {"- " + JSON.stringify(action, null, 2)}
            </a>
         </pre>
       );
 
-      // State
-      let stateComponent = !maximizedState ? (
-         <h4 style={{color: "white"}}>
-            <i className="fa fa-plus-square"></i>
-            {" State: object {...}"}
+      // Action
+      const stateComponent = !maximizedState ? (
+         <h4 style={{...h4Style, color: "white"}}>
+            {"+ State: object {...}"}
          </h4>
       ) : (
          <pre style={preStyle}>
-            <i className="fa fa-minus-square"></i>
-            {this.printState(state, error)}
+            {"- " + this.printState(state, error)}
          </pre>
       );
 
+      const collapsedComponent = !collapsed ? <span>&#10004; Enabled</span> : <span>&#10008; Disabled</span>;
+
       return (
          <li style={liStyle}>
             <div style={wrap1Style}>
                <div style={wrap2Style}>
-                  <div style={wrap3Style}>
+                  <div style={maximizedAction || maximizedState ? wrap3StyleMax : wrap3Style}>
                      <a onClick={::this.handleCollapseClick} href="javascript:;">
-                        <i className={"fa fa-" + (collapsed ? "ban" : "check")}></i>
-                        {!collapsed ? " Enabled" : " Disabled"}
+                        {collapsedComponent}
                      </a>
                      <a onClick={()=>this.setState({maximizedAction: !maximizedAction})} href="javascript:;">
-                        {headingComponent}
+                        {actionComponent}
                      </a>
                      <a onClick={()=>this.setState({maximizedState: !maximizedState})} href="javascript:;">
                         {stateComponent}