Merge a97597bca1 into cf329e8b84

html/console.html

@@ -39,7 +39,10 @@
         <div class="pure-u-1-4"><legend><b>Console</b></legend></div>
         <div class="pure-u-3-4"></div>
       </div>
+      <div class="fullscreen-box">
+        <div class="fullscreen-control"></div>
         <pre class="console flex-fill" id="console">--- No Content ---</pre>
+      </div>
       <div>
         <div class="pure-g">
           <div class="pure-u-1-4"><legend><b>Console entry</b></legend></div>
@@ -97,6 +100,12 @@
         );
     });
     
+    $(".fullscreen-control")[0].addEventListener("click", function(e) {
+      e.preventDefault();
+      var fbc = this.parentNode.classList;
+      fbc[fbc.contains("full") ? "remove" : "add"].call(fbc, "full");
+    });
+
     ajaxJson('GET', "/console/baud",
       function(data) { $("#baud-sel").value = data.rate; },
       function(s, st) { showNotification(st); }

html/log.html

@@ -1,4 +1,4 @@
-  <div id="main">
+<div id="main">
   <div class="header">
     <h1>Debug Log</h1>
   </div>
@@ -19,15 +19,18 @@
         <a id="dbg-on1" class="dbg-btn pure-button" href="#">on uart1</a>
       </p>
     </div>
+    <div class="fullscreen-box">
+      <div class="fullscreen-control"></div>
       <pre id="console" class="console" style="margin-top: 0px;"></pre>
     </div>
   </div>
 </div>
+</div>
 
 <script type="text/javascript">console_url = "/log/text"</script>
 <script src="console.js"></script>
 <script type="text/javascript">
-  onLoad(function() {
+onLoad(function() {
   fetchText(100, false);
 
   $("#refresh-button").addEventListener("click", function(e) {
@@ -45,6 +48,12 @@
       );
   });
   
+  $(".fullscreen-control")[0].addEventListener("click", function(e) {
+    e.preventDefault();
+    var fbc = this.parentNode.classList;
+    fbc[fbc.contains("full") ? "remove" : "add"].call(fbc, "full");
+  });
+
   ["auto", "off", "on0", "on1"].forEach(function(mode) {
     bnd($('#dbg-'+mode), "click", function(el) {
       ajaxJsonSpin('POST', "/log/dbg?mode="+mode,
@@ -55,6 +64,6 @@
   });
 
   ajaxJson('GET', "/log/dbg", function(data) { showDbgMode(data.mode); }, function() {});
-  });
+});
 </script>
 </body></html>

html/style.css

@@ -69,7 +69,7 @@ a:hover {
 }
 .click-to-edit span:active, .click-to-edit div:active {
     box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset;
-    border-color: #000\9;
+    border-color: #000;
 }
 /* Firefox: Get rid of the inner focus border */
 .click-to-edit span::-moz-focus-inner,
@@ -248,14 +248,59 @@ input.inline {
   margin-left: 0.5em;
 }
 
+/* Console fullscreen */
+.fullscreen-box {
+  position: relative;
+}
+
+.fullscreen-box.full {
+  position: fixed;
+  height: 100vh;
+  width: 100vw;
+  left: 0;
+  top: 0;
+  z-index: 1001;
+}
+
+.fullscreen-box > .fullscreen-control {
+  position: absolute;
+  border-radius: 2px;
+  top: 16px;
+  right: 16px;
+  width: 1em;
+  height: 1em;
+  text-align: center;
+  background: #00000025;
+  padding: 15px;
+  line-height: 1em;
+  color: #fff;
+  cursor: pointer;
+}
+
+.fullscreen-box > .fullscreen-control::before {
+  content: "F";
+}
+
+.fullscreen-box.full > .fullscreen-control::before {
+  content: "X";
+}
+
+.fullscreen-box > pre.console {
+  height: 500px;
+}
+
+.fullscreen-box.full > pre.console {
+  height: 100vh;
+}
+
 /* Text console */
 pre.console {
+  box-sizing: border-box;
   background-color: #663300;
   border-radius: 5px;
   border: 0px solid #000000;
   color: #66ff66;
   padding: 5px;
-  overflow: scroll;
   margin: 0px;
 }