messages.html

<script>

  function rateGetterRetry(elem) {
    elem.onclick = null;
    $(elem).removeClass("removeRow");
    $(".retry").html("retrying...");
    require('electron').ipcRenderer.send("rateGetterRetry");
  }

  function addMessageRow(msg) {
    $("#messages").append(`<div class='message'><span class='eventTime'>[${msg.timestamp}]</span> ${msg.text}</div>`);
    if($("#messages div").length > 10) {
      $("#messages").find("div:first").remove();
    }
    $("#messages").scrollTop($("#messages")[0].scrollHeight);
  }
  
  function downloadUpdate() {
    require('electron').ipcRenderer.send("download-update");
  }
  function applyUpdate() {
    require('electron').ipcRenderer.send("apply-update");
  }

  require('electron').ipcRenderer.on("message", (event, msg) => {
    addMessageRow(msg);
  });
  
  $("document").ready(() => {
    
    const opn = require('opn');
    $(document).on("click", "a.opn-link", (event) => {
      var target = "" + event.target;
      event.preventDefault();      
      opn(target);      
    });
    
    $("#messages").hover(
      () => { 
        $("#messages").css('height', 'auto') 
      },
      () => { 
        $("#messages").css('height', '40px');
        $("#messages").scrollTop($("#messages")[0].scrollHeight);
      }
    );
    var messages = require('electron').remote.getGlobal("messages");
    for(var i = 0; i < messages.length; i++) {
      addMessageRow(messages[i]);
    }
    $("#messages").scrollTop($("#messages")[0].scrollHeight);
  });
  
</script>