From d4a0a011cd67dc114efc2b5455ed5d97bf9fa31b Mon Sep 17 00:00:00 2001
From: Eugene Rodionov <git@theaqua.im>
Date: Thu, 23 Jul 2015 08:58:36 +0300
Subject: [PATCH 1/6] feat: clean up logmonitor

---
 src/react/DebugPanel.js      |  6 +--
 src/react/LogMonitor.js      | 79 +++++++++++++++++++-----------------
 src/react/LogMonitorEntry.js | 33 +++++----------
 3 files changed, 54 insertions(+), 64 deletions(-)

diff --git a/src/react/DebugPanel.js b/src/react/DebugPanel.js
index c87fff6c..d999c84d 100644
--- a/src/react/DebugPanel.js
+++ b/src/react/DebugPanel.js
@@ -12,17 +12,15 @@ export function getDefaultStyle(props) {
   return {
     position: 'fixed',
     zIndex: 999,
-    fontSize: 17,
     overflow: 'auto',
-    opacity: 0.92,
-    background: 'black',
+    background: 'rgb(27, 27, 27)',
     color: 'white',
     left: left ? 0 : undefined,
     right: right ? 0 : undefined,
     top: top ? 0 : undefined,
     bottom: bottom ? 0 : undefined,
     maxHeight: (bottom && top) ? '100%' : '20%',
-    maxWidth: (left && right) ? '100%' : '20%',
+    maxWidth: (left && right) ? '100%' : '25%',
     wordWrap: 'break-word'
   };
 }
diff --git a/src/react/LogMonitor.js b/src/react/LogMonitor.js
index bef5aab7..50202557 100644
--- a/src/react/LogMonitor.js
+++ b/src/react/LogMonitor.js
@@ -122,48 +122,51 @@ export default class LogMonitor {
         position: 'relative',
         padding: '1rem'
       }}>
-        <div>
-          <div style={{
-            paddingBottom: '.5rem'
-          }}>
-            <small>Press Ctrl+H to hide.</small>
+        <div style={{marginBottom: 40, fontSize: 12}}>
+          <div style={{float: 'left'}}>
+            {computedStates.length > 1 &&
+              <button onClick={::this.handleRollback} style={{
+                cursor: 'hand',
+                padding: '5px 7px',
+                border: '1px solid #eee',
+                display: 'inline-block'
+              }}>
+                Rollback
+              </button>
+            }
+            {Object.keys(skippedActions).some(key => skippedActions[key]) &&
+              <button onClick={::this.handleSweep} style={{
+                cursor: 'hand',
+                padding: '5px 7px',
+                border: '1px solid #eee',
+                display: 'inline-block'
+              }}>
+                Sweep
+              </button>
+            }
+            {computedStates.length > 1 &&
+              <button onClick={::this.handleCommit} style={{
+                cursor: 'hand',
+                padding: '5px 7px',
+                border: '1px solid #eee',
+                display: 'inline-block'
+              }}>
+                Commit
+              </button>
+            }
           </div>
-          <div>
-            <a onClick={::this.handleReset}
-               style={{ textDecoration: 'underline', cursor: 'hand' }}>
-              <small>Reset</small>
-            </a>
+          <div style={{float: 'right'}}>
+            <button onClick={::this.handleReset} style={{
+              cursor: 'hand',
+              padding: '5px 7px',
+              border: '1px solid #eee',
+              display: 'inline-block'
+            }}>
+              Reset
+            </button>
           </div>
         </div>
         {elements}
-        <div>
-          {computedStates.length > 1 &&
-            <a onClick={::this.handleRollback}
-               style={{ textDecoration: 'underline', cursor: 'hand' }}>
-              Rollback
-            </a>
-          }
-          {Object.keys(skippedActions).some(key => skippedActions[key]) &&
-            <span>
-              {' • '}
-              <a onClick={::this.handleSweep}
-                 style={{ textDecoration: 'underline', cursor: 'hand' }}>
-                Sweep
-              </a>
-            </span>
-          }
-          {computedStates.length > 1 &&
-            <span>
-              <span>
-              {' • '}
-              </span>
-              <a onClick={::this.handleCommit}
-                 style={{ textDecoration: 'underline', cursor: 'hand' }}>
-                Commit
-              </a>
-            </span>
-          }
-        </div>
       </div>
     );
   }
diff --git a/src/react/LogMonitorEntry.js b/src/react/LogMonitorEntry.js
index b122a64a..3524c8de 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.';
       }
@@ -77,14 +77,14 @@ export default class LogMonitorEntry {
 
     return (
       <div style={{
-        textDecoration: collapsed ? 'line-through' : 'none'
+        textDecoration: collapsed ? 'line-through' : 'none',
+        borderBottom: '1px solid #333',
+        paddingBottom: '1em'
       }}>
         <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) ? 'hand' : 'default',
@@ -94,27 +94,16 @@ export default class LogMonitorEntry {
         </a>
 
         {!collapsed &&
-          <p style={{
-            textAlign: 'center',
-            transform: 'rotate(180deg)'
-          }}>
-            ⇧
-          </p>
-        }
-
-        {!collapsed &&
-          <div style={{
-            paddingBottom: '1em',
-            paddingTop: '1em',
-            color: 'lightyellow'
+          <pre style={{
+            backgroundColor: '#fff',
+            color: '#111',
+            padding: 10,
+            marginTop: 10,
+            fontSize: 15
           }}>
             {this.printState(state, error)}
-          </div>
+          </pre>
         }
-
-        <hr style={{
-          marginBottom: '2em'
-        }} />
       </div>
     );
   }

From 63c81be804886a6c006c964559cf5320cabfbcea Mon Sep 17 00:00:00 2001
From: Eugene Rodionov <git@theaqua.im>
Date: Thu, 23 Jul 2015 09:01:14 +0300
Subject: [PATCH 2/6] fix: add tip of Ctrl-H

---
 src/react/LogMonitor.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/react/LogMonitor.js b/src/react/LogMonitor.js
index 50202557..d1624224 100644
--- a/src/react/LogMonitor.js
+++ b/src/react/LogMonitor.js
@@ -120,7 +120,8 @@ export default class LogMonitor {
       <div style={{
         fontFamily: 'monospace',
         position: 'relative',
-        padding: '1rem'
+        padding: '1rem',
+        height: '100%'
       }}>
         <div style={{marginBottom: 40, fontSize: 12}}>
           <div style={{float: 'left'}}>
@@ -167,6 +168,7 @@ export default class LogMonitor {
           </div>
         </div>
         {elements}
+        <p style={{bottom: 0, position: 'absolute'}}>Tip: Ctrl-H to hide</p>
       </div>
     );
   }

From dc2355ae3d1c3944e57f4dc065acb86d7e922038 Mon Sep 17 00:00:00 2001
From: Eugene Rodionov <git@theaqua.im>
Date: Thu, 23 Jul 2015 09:02:52 +0300
Subject: [PATCH 3/6] fix: #25

---
 src/react/LogMonitor.js      | 8 ++++----
 src/react/LogMonitorEntry.js | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/react/LogMonitor.js b/src/react/LogMonitor.js
index d1624224..1e385803 100644
--- a/src/react/LogMonitor.js
+++ b/src/react/LogMonitor.js
@@ -127,7 +127,7 @@ export default class LogMonitor {
           <div style={{float: 'left'}}>
             {computedStates.length > 1 &&
               <button onClick={::this.handleRollback} style={{
-                cursor: 'hand',
+                cursor: 'pointer',
                 padding: '5px 7px',
                 border: '1px solid #eee',
                 display: 'inline-block'
@@ -137,7 +137,7 @@ export default class LogMonitor {
             }
             {Object.keys(skippedActions).some(key => skippedActions[key]) &&
               <button onClick={::this.handleSweep} style={{
-                cursor: 'hand',
+                cursor: 'pointer',
                 padding: '5px 7px',
                 border: '1px solid #eee',
                 display: 'inline-block'
@@ -147,7 +147,7 @@ export default class LogMonitor {
             }
             {computedStates.length > 1 &&
               <button onClick={::this.handleCommit} style={{
-                cursor: 'hand',
+                cursor: 'pointer',
                 padding: '5px 7px',
                 border: '1px solid #eee',
                 display: 'inline-block'
@@ -158,7 +158,7 @@ export default class LogMonitor {
           </div>
           <div style={{float: 'right'}}>
             <button onClick={::this.handleReset} style={{
-              cursor: 'hand',
+              cursor: 'pointer',
               padding: '5px 7px',
               border: '1px solid #eee',
               display: 'inline-block'
diff --git a/src/react/LogMonitorEntry.js b/src/react/LogMonitorEntry.js
index 3524c8de..c110b3a7 100644
--- a/src/react/LogMonitorEntry.js
+++ b/src/react/LogMonitorEntry.js
@@ -87,7 +87,7 @@ export default class LogMonitorEntry {
              display: 'block',
              paddingTop: '1em',
              color: `rgb(${r}, ${g}, ${b})`,
-             cursor: (index > 0) ? 'hand' : 'default',
+             cursor: (index > 0) ? 'pointer' : 'default',
              WebkitUserSelect: 'none'
            }}>
           {JSON.stringify(action)}

From 76572dcbec28bc4732190dc65c3c1304df34f26c Mon Sep 17 00:00:00 2001
From: Eugene Rodionov <git@theaqua.im>
Date: Thu, 23 Jul 2015 09:05:35 +0300
Subject: [PATCH 4/6] fix: remove tip about Ctrl-H

---
 src/react/LogMonitor.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/react/LogMonitor.js b/src/react/LogMonitor.js
index 1e385803..57ada792 100644
--- a/src/react/LogMonitor.js
+++ b/src/react/LogMonitor.js
@@ -120,7 +120,7 @@ export default class LogMonitor {
       <div style={{
         fontFamily: 'monospace',
         position: 'relative',
-        padding: '1rem',
+        padding: '1rem 1rem 0 1rem',
         height: '100%'
       }}>
         <div style={{marginBottom: 40, fontSize: 12}}>
@@ -168,7 +168,6 @@ export default class LogMonitor {
           </div>
         </div>
         {elements}
-        <p style={{bottom: 0, position: 'absolute'}}>Tip: Ctrl-H to hide</p>
       </div>
     );
   }

From 1975e0f17701b1672a03a498cd6c4ea9f1b4165b Mon Sep 17 00:00:00 2001
From: Eugene Rodionov <git@theaqua.im>
Date: Thu, 23 Jul 2015 09:16:05 +0300
Subject: [PATCH 5/6] fix: reset buttons styles

---
 src/react/LogMonitor.js | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/react/LogMonitor.js b/src/react/LogMonitor.js
index 57ada792..f02395ef 100644
--- a/src/react/LogMonitor.js
+++ b/src/react/LogMonitor.js
@@ -130,7 +130,10 @@ export default class LogMonitor {
                 cursor: 'pointer',
                 padding: '5px 7px',
                 border: '1px solid #eee',
-                display: 'inline-block'
+                display: 'inline-block',
+                backgroundColor: 'transparent',
+                color: '#eee',
+                fontFamily: 'monospace'
               }}>
                 Rollback
               </button>
@@ -140,7 +143,10 @@ export default class LogMonitor {
                 cursor: 'pointer',
                 padding: '5px 7px',
                 border: '1px solid #eee',
-                display: 'inline-block'
+                display: 'inline-block',
+                backgroundColor: 'transparent',
+                color: '#eee',
+                fontFamily: 'monospace'
               }}>
                 Sweep
               </button>
@@ -150,7 +156,10 @@ export default class LogMonitor {
                 cursor: 'pointer',
                 padding: '5px 7px',
                 border: '1px solid #eee',
-                display: 'inline-block'
+                display: 'inline-block',
+                backgroundColor: 'transparent',
+                color: '#eee',
+                fontFamily: 'monospace'
               }}>
                 Commit
               </button>
@@ -161,7 +170,10 @@ export default class LogMonitor {
               cursor: 'pointer',
               padding: '5px 7px',
               border: '1px solid #eee',
-              display: 'inline-block'
+              display: 'inline-block',
+              backgroundColor: 'transparent',
+              color: '#eee',
+              fontFamily: 'monospace'
             }}>
               Reset
             </button>

From 55f70550b62d5618ca6eb2310940563c0b1b6ac0 Mon Sep 17 00:00:00 2001
From: Eugene Rodionov <git@theaqua.im>
Date: Thu, 23 Jul 2015 09:16:43 +0300
Subject: [PATCH 6/6] =?UTF-8?q?fix:=20maxWidth=20=E2=86=92=20width?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/react/DebugPanel.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/react/DebugPanel.js b/src/react/DebugPanel.js
index d999c84d..8827db26 100644
--- a/src/react/DebugPanel.js
+++ b/src/react/DebugPanel.js
@@ -20,7 +20,7 @@ export function getDefaultStyle(props) {
     top: top ? 0 : undefined,
     bottom: bottom ? 0 : undefined,
     maxHeight: (bottom && top) ? '100%' : '20%',
-    maxWidth: (left && right) ? '100%' : '25%',
+    width: (left && right) ? '100%' : '25%',
     wordWrap: 'break-word'
   };
 }