From daf029fca2557fd1e6d756b5322acf2b9e7cc9cd Mon Sep 17 00:00:00 2001
From: Patrick Burtchaell <patrick@pburtchaell.com>
Date: Sun, 19 Jul 2015 10:21:53 -0500
Subject: [PATCH] Show monitor when isVisible is true

---
 src/react/DebugPanel.js |  1 -
 src/react/LogMonitor.js | 86 +++++++++++++++++++++++------------------
 2 files changed, 49 insertions(+), 38 deletions(-)

diff --git a/src/react/DebugPanel.js b/src/react/DebugPanel.js
index 6dac89f4..a7306e95 100644
--- a/src/react/DebugPanel.js
+++ b/src/react/DebugPanel.js
@@ -17,7 +17,6 @@ export function getDefaultStyle(props) {
     opacity: 0.92,
     background: 'black',
     color: 'white',
-    padding: '1em',
     left: left ? 0 : undefined,
     right: right ? 0 : undefined,
     top: top ? 0 : undefined,
diff --git a/src/react/LogMonitor.js b/src/react/LogMonitor.js
index d265e09a..57ac1054 100644
--- a/src/react/LogMonitor.js
+++ b/src/react/LogMonitor.js
@@ -105,47 +105,59 @@ export default class LogMonitor {
       );
     }
 
-    return (
-      <div style={{
-        fontFamily: 'monospace',
-        position: 'relative'
-      }}>
-        <div>
-          <a onClick={::this.handleReset}
-             style={{ textDecoration: 'underline', cursor: 'hand' }}>
-            Reset
-          </a>
-        </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}
+    if (this.props.monitorState.isVisible === true) {
+      return (
+        <div style={{
+          fontFamily: 'monospace',
+          position: 'relative',
+          padding: '1rem'
+        }}>
+          <div>
+            <div style={{
+              paddingBottom: '.5rem'
+            }}>
+              <small>Press `ctl+h` to hide.</small>
+            </div>
+            <div>
+              <a onClick={::this.handleReset}
                  style={{ textDecoration: 'underline', cursor: 'hand' }}>
-                Sweep
+                <small>Reset</small>
               </a>
-            </span>
-          }
-          {computedStates.length > 1 &&
-            <span>
+            </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>
-              <a onClick={::this.handleCommit}
-                 style={{ textDecoration: 'underline', cursor: 'hand' }}>
-                Commit
-              </a>
-            </span>
-          }
+            }
+            {computedStates.length > 1 &&
+              <span>
+                <span>
+                {' • '}
+                </span>
+                <a onClick={::this.handleCommit}
+                   style={{ textDecoration: 'underline', cursor: 'hand' }}>
+                  Commit
+                </a>
+              </span>
+            }
+          </div>
         </div>
-      </div>
-    );
+      );
+    }
+
+    return false;
   }
 }