dashboard: indicate console following

1 files changed, 16 insertions, 1 deletions

diff --git a/src/api/dashboard/dashboard.html b/src/api/dashboard/dashboard.html
index f286615..8b62181 100644
--- a/src/api/dashboard/dashboard.html
+++ b/src/api/dashboard/dashboard.html
@@ -90,6 +90,10 @@
   section h2 .rates span { text-align: right; }
   section h2 .rates span.unit { text-align: left; }
   section.collapsed h2 .rates { display: none; }
+  /* After the console's filter: that it follows new messages (scrolled to the bottom). */
+  section h2 .following { font-size: 12px; text-transform: none; letter-spacing: 0;
+    margin-left: 1em; font-style: italic; }
+  section.collapsed h2 .following { display: none; }
   /* The right column dragged off to the side: the map takes the width. */
   @media (min-width: 901px) {
     main.right-hidden > section:not(#map) { display: none; }
@@ -273,7 +277,7 @@
   <div id="column-hint" class="note">Drag the space left of these boxes to the right to
     hide the column.</div>
   <section id="console-box">
-    <h2>Console <label class="choice" title="Only the messages with the node or over the link in focus (clicked on the map or in the peers); all while nothing is"><input type="checkbox" id="console-filter">filter selected</label><span id="console-rates" class="rates" title="Messages and bytes per second sent and received, as load averages are: over the last 1, 5 and 15 minutes (exponentially weighted), since the page was opened; with the filter, those with the node or over the link in focus"></span></h2>
+    <h2>Console <label class="choice" title="Only the messages with the node or over the link in focus (clicked on the map or in the peers); all while nothing is"><input type="checkbox" id="console-filter">filter selected</label><span id="console-following" class="following" title="Scrolled to the bottom: new messages are scrolled to as they come; scroll up to stop">following…</span><span id="console-rates" class="rates" title="Messages and bytes per second sent and received, as load averages are: over the last 1, 5 and 15 minutes (exponentially weighted), since the page was opened; with the filter, those with the node or over the link in focus"></span></h2>
     <div class="scroll" id="console-scroll"><div id="console" class="console"></div>
       <div id="console-none" class="note" hidden>No information available</div></div>
   </section>
@@ -2153,12 +2157,23 @@ function messagesArrived(messages) {
   while (log.childElementCount > CONSOLE_LINES) log.firstElementChild.remove();
   filterConsole();
   if (following) scroll.scrollTop = scroll.scrollHeight;
+  showFollowing();
 }
+// `following…` while the console is at its bottom: it scrolls to new messages then
+// (`messagesArrived`); scrolled up, it stays where it is.
+const consoleScroll = document.getElementById("console-scroll");
+function showFollowing() {
+  const scroll = consoleScroll;
+  document.getElementById("console-following").hidden =
+    scroll.scrollTop + scroll.clientHeight < scroll.scrollHeight - 4;
+}
+consoleScroll.addEventListener("scroll", showFollowing, { passive: true });
 function showConsole() {
   document.getElementById("console").replaceChildren(...consoleMessages.map(consoleLine));
   filterConsole();
   const scroll = document.getElementById("console-scroll");
   scroll.scrollTop = scroll.scrollHeight;
+  showFollowing();
 }
 function drawFlows() {
   flowFrame = null;