autoscroll sidebar log

static-data/www/shared/sidebar/sidebar.css

@@ -6,4 +6,9 @@
     padding-left: 1em;
     padding-top: 5px;
     font-size: 1em;
+}
+
+#logfileOutput{
+    max-height: 700px;
+    overflow-y: scroll;
 }

static-data/www/shared/sidebar/sidebar.html

@@ -20,8 +20,8 @@
             Add Peer
           </a>
         </div>
-        <pre id="logfileOutput"></pre>
       </div>
+      <pre id="logfileOutput"></pre>
     </div>
   </div>
 </div>

static-data/www/shared/sidebar/sidebar.js

@@ -10,7 +10,12 @@ fetch('/shared/sidebar/sidebar.html', {
     sidebarAddPeerRegister()
 })
 
+var sidebarActive = false
 var lastLogOffset = 0
+
+var logActive = false
+
+
 async function showLog(){
         fetch('/readfileoffset/onionr.log?offset=' + lastLogOffset, {
             method: 'GET',
@@ -20,8 +25,12 @@ async function showLog(){
         .then((resp) => resp.json())
         .then(function(resp){
             lastLogOffset = resp['new_offset']
-            document.getElementById('logfileOutput').innerText += resp.data.replace(
+            var logfileOutputEl = document.getElementById('logfileOutput')
+            logfileOutputEl.innerText += resp.data.replace(
                 /[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g, '')
+            if (!logActive){
+                logfileOutputEl.scrollTop = logfileOutputEl.scrollHeight;
+            }
         })
 }
 
@@ -72,11 +81,20 @@ function sidebarAddPeerRegister(){
 
 window.addEventListener("keydown", function(event) {
     var refreshSideBarInterval = null
+    document.getElementById('logfileOutput').onmouseenter = function(e){
+        logActive = true
+    }
+    document.getElementById('logfileOutput').onmouseleave = function(e){
+        logActive = false
+    }
+
     document.getElementsByClassName('closeSidebar')[0].onclick = function(){
+        sidebarActive = false
         clearInterval(sidebarLogInterval)
         clearInterval(refreshSideBarInterval)
     }
     if (event.key === "s"){
+        sidebarActive = true
         if (document.activeElement.nodeName == "TEXTAREA" || document.activeElement.nodeName == "INPUT"){
             if (! document.activeElement.hasAttribute("readonly")){
                 return