Fix Chrome/Firefox inconsistencies with sorting

Author: Philipp Heckel

server/static/css/app.css

@@ -278,8 +278,9 @@ li {
 
 #detail #detailMain {
     max-width: 900px;
-    margin: 0 auto 50px auto;
+    margin: 0 auto;
     position: relative; /* required for close button's "position: absolute" */
+    padding-bottom: 50px; /* Chrome and Firefox behave differently regarding bottom margin */
 }
 
 #detail #detailCloseButton {

server/static/js/app.js

@@ -73,7 +73,7 @@ const subscribeInternal = (topic, persist, delaySec) => {
         eventSource.onmessage = (e) => {
             const event = JSON.parse(e.data);
             topics[topic]['messages'].push(event);
-            topics[topic]['messages'].sort((a, b) => { return a.time < b.time; }) // Newest first
+            topics[topic]['messages'].sort((a, b) => { return a.time < b.time ? 1 : -1; }); // Newest first
             if (currentTopic === topic) {
                 rerenderDetailView();
             }
@@ -123,7 +123,7 @@ const fetchCachedMessages = async (topic) => {
         const message = JSON.parse(line);
         topics[topic]['messages'].push(message);
     }
-    topics[topic]['messages'].sort((a, b) => { return a.time < b.time; }) // Newest first
+    topics[topic]['messages'].sort((a, b) => { return a.time < b.time ? 1 : -1; }); // Newest first
 };
 
 const showDetail = (topic) => {
@@ -258,27 +258,23 @@ if (!window["Notification"] || !window["EventSource"]) {
 // Reset UI
 topicField.value = "";
 
-// (Temporarily) subscribe topic if we navigated to /sometopic URL
-const match = location.pathname.match(/^\/([-_a-zA-Z0-9]{1,64})$/) // Regex must match Go & Android app!
-if (match) {
-    currentTopic = match[1];
-    subscribeInternal(currentTopic, false,0);
-}
-
 // Restore topics
-const storedTopics = localStorage.getItem('topics');
+const storedTopics = JSON.parse(localStorage.getItem('topics') || "[]");
 if (storedTopics) {
-    const storedTopicsArray = JSON.parse(storedTopics);
-    storedTopicsArray.forEach((topic) => { subscribeInternal(topic, true, 0); });
-    if (storedTopicsArray.length === 0) {
+    storedTopics.forEach((topic) => { subscribeInternal(topic, true, 0); });
+    if (storedTopics.length === 0) {
         topicsHeader.style.display = 'none';
     }
-    if (currentTopic) {
-        currentTopicUnsubscribeOnClose = !storedTopicsArray.includes(currentTopic);
-    }
 } else {
     topicsHeader.style.display = 'none';
-    if (currentTopic) {
+}
+
+// (Temporarily) subscribe topic if we navigated to /sometopic URL
+const match = location.pathname.match(/^\/([-_a-zA-Z0-9]{1,64})$/) // Regex must match Go & Android app!
+if (match) {
+    currentTopic = match[1];
+    if (!storedTopics.includes(currentTopic)) {
+        subscribeInternal(currentTopic, false,0);
         currentTopicUnsubscribeOnClose = true;
     }
 }