initial commitHEADmaster

1 files changed, 2894 insertions, 0 deletions

diff --git a/src/fossil.page.chat.js b/src/fossil.page.chat.js
new file mode 100644
index 0000000..38d83ff
--- /dev/null
+++ b/src/fossil.page.chat.js
@@ -0,0 +1,2894 @@
+-/**
+   This file contains the client-side implementation of fossil's /chat
+   application.
+*/
+window.fossil.onPageLoad(function(){
+  const F = window.fossil, D = F.dom;
+  const E1 = function(selector){
+    const e = document.querySelector(selector);
+    if(!e) throw new Error("missing required DOM element: "+selector);
+    return e;
+  };
+
+  /**
+     Returns true if e is entirely within the bounds of the window's viewport.
+  */
+  const isEntirelyInViewport = function(e) {
+    const rect = e.getBoundingClientRect();
+    return (
+      rect.top >= 0 &&
+      rect.left >= 0 &&
+      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+    );
+  };
+
+  /**
+     Returns true if e's on-screen position vertically overlaps that
+     of element v's. Horizontal overlap is ignored (we don't need it
+     for our case).
+  */
+  const overlapsElemView = function(e,v) {
+    const r1 = e.getBoundingClientRect(),
+          r2 = v.getBoundingClientRect();
+    if(r1.top<=r2.bottom && r1.top>=r2.top) return true;
+    else if(r1.bottom<=r2.bottom && r1.bottom>=r2.top) return true;
+    return false;
+  };
+
+  const addAnchorTargetBlank = (e)=>D.attr(e, 'target','_blank');
+
+  /**
+     Returns an almost-ISO8601 form of Date object d.
+  */
+  const iso8601ish = function(d){
+    return d.toISOString()
+        .replace('T',' ').replace(/\.\d+/,'')
+        .replace('Z', ' zulu');
+  };
+  const pad2 = (x)=>('0'+x).substr(-2);
+  /** Returns the local time string of Date object d, defaulting
+      to the current time. */
+  const localTimeString = function ff(d){
+    d || (d = new Date());
+    return [
+      d.getFullYear(),'-',pad2(d.getMonth()+1/*sigh*/),
+      '-',pad2(d.getDate()),
+      ' ',pad2(d.getHours()),':',pad2(d.getMinutes()),
+      ':',pad2(d.getSeconds())
+    ].join('');
+  };
+
+  (function(){
+    let dbg = document.querySelector('#debugMsg');
+    if(dbg){
+      /* This can inadvertently influence our flexbox layouts, so move
+         it out of the way. */
+      D.append(document.body,dbg);
+    }
+  })();
+  /* Returns a list of DOM elements which "frame" the chat UI. These
+     elements are considered to _not_ be part of the chat UI and that
+     info is used for sizing the chat UI. In chat-only mode, these are
+     the elements that get hidden. */
+  const GetFramingElements = function() {
+    return document.querySelectorAll([
+      "body > header",
+      "body > nav.mainmenu",
+      "body > footer",
+      "#debugMsg"
+    ].join(','));
+  };
+  const ForceResizeKludge = (function(){
+    /* Workaround for Safari mayhem regarding use of vh CSS units....
+       We tried to use vh units to set the content area size for the
+       chat layout, but Safari chokes on that, so we calculate that
+       height here: 85% when in "normal" mode and 95% in chat-only
+       mode. Larger than ~95% is too big for Firefox on Android,
+       causing the input area to move off-screen.
+
+       While we're here, we also use this to cap the max-height
+       of the input field so that pasting huge text does not scroll
+       the upper area of the input widget off-screen. */
+    const elemsToCount = GetFramingElements();
+    const contentArea = E1('div.content');
+    const bcl = document.body.classList;
+    const resized = function f(){
+      if(f.$disabled) return;
+      const wh = window.innerHeight,
+            com = bcl.contains('chat-only-mode');
+      var ht;
+      var extra = 0;
+      if(com){
+        ht = wh;
+      }else{
+        elemsToCount.forEach((e)=>e ? extra += D.effectiveHeight(e) : false);
+        ht = wh - extra;
+      }
+      f.chat.e.inputX.style.maxHeight = (ht/2)+"px";
+      /* ^^^^ this is a middle ground between having no size cap
+         on the input field and having a fixed arbitrary cap. */;
+      contentArea.style.height =
+        contentArea.style.maxHeight = [
+          "calc(", (ht>=100 ? ht : 100), "px",
+          " - 0.65em"/*fudge value*/,")"
+          /* ^^^^ hypothetically not needed, but both Chrome/FF on
+             Linux will force scrollbars on the body if this value is
+             too small; current value is empirically selected. */
+        ].join('');
+      if(false){
+        console.debug("resized.",wh, extra, ht,
+                      window.getComputedStyle(contentArea).maxHeight,
+                      contentArea);
+        console.debug("Set input max height to: ",
+                      f.chat.e.inputX.style.maxHeight);
+      }
+    };
+    resized.$disabled = true/*gets deleted when setup is finished*/;
+    window.addEventListener('resize', F.debounce(resized, 250), false);
+    return resized;
+  })();
+  fossil.FRK = ForceResizeKludge/*for debugging*/;
+  const Chat = ForceResizeKludge.chat = (function(){
+    const cs = { // the "Chat" object (result of this function)
+      beVerbose: false
+      //!!window.location.hostname.match("localhost")
+      /* if true then certain, mostly extraneous, error messages and
+         log messages may be sent to the console. */,
+      playedBeep: false /* used for the beep-once setting */,
+      e:{/*map of certain DOM elements.*/
+        messageInjectPoint: E1('#message-inject-point'),
+        pageTitle: E1('head title'),
+        loadOlderToolbar: undefined /* the load-posts toolbar (dynamically created) */,
+        inputArea: E1("#chat-input-area"),
+        inputLineWrapper: E1('#chat-input-line-wrapper'),
+        fileSelectWrapper: E1('#chat-input-file-area'),
+        viewMessages: E1('#chat-messages-wrapper'),
+        viewZoom: E1('#chat-zoom'),
+        zoomContent: E1('#chat-zoom-content'),
+        zoomMarker: E1('#chat-zoom-marker'),
+        btnSubmit: E1('#chat-button-submit'),
+        btnAttach: E1('#chat-button-attach'),
+        inputX: E1('#chat-input-field-x'),
+        input1: E1('#chat-input-field-single'),
+        inputM: E1('#chat-input-field-multi'),
+        inputFile: E1('#chat-input-file'),
+        contentDiv: E1('div.content'),
+        viewConfig: E1('#chat-config'),
+        viewPreview: E1('#chat-preview'),
+        previewContent: E1('#chat-preview-content'),
+        viewSearch: E1('#chat-search'),
+        searchContent: E1('#chat-search-content'),
+        btnPreview: E1('#chat-button-preview'),
+        views: document.querySelectorAll('.chat-view'),
+        activeUserListWrapper: E1('#chat-user-list-wrapper'),
+        activeUserList: E1('#chat-user-list'),
+        eMsgPollError: undefined /* current connection error MessageMidget */,
+        pollErrorMarker: document.body /* element to toggle 'connection-error' CSS class on */
+      },
+      me: F.user.name,
+      mxMsg: F.config.chat.initSize ? -F.config.chat.initSize : -50,
+      mnMsg: undefined/*lowest message ID we've seen so far (for history loading)*/,
+      pageIsActive: 'visible'===document.visibilityState,
+      changesSincePageHidden: 0,
+      notificationBubbleColor: 'white',
+      totalMessageCount: 0, // total # of inbound messages
+      //! Number of messages to load for the history buttons
+      loadMessageCount: Math.abs(F.config.chat.initSize || 20),
+      ajaxInflight: 0,
+      usersLastSeen:{
+        /* Map of user names to their most recent message time
+           (JS Date object). Only messages received by the chat client
+           are considered. */
+        /* Reminder: to convert a Julian time J to JS:
+           new Date((J - 2440587.5) * 86400000) */
+      },
+      filterState:{
+        activeUser: undefined,
+        match: function(uname){
+          return this.activeUser===uname || !this.activeUser;
+        }
+      },
+      /**
+         The timer object is used to control connection throttling
+         when connection errors arrise. It starts off with a polling
+         delay of $initialDelay ms. If there's a connection error,
+         that gets bumped by some value for each subsequent error, up
+         to some max value.
+
+         The timing of resetting the delay when service returns is,
+         because of the long-poll connection and our lack of low-level
+         insight into the connection at this level, a bit wonky.
+      */
+      timer:{
+        /* setTimeout() ID for (delayed) starting a Chat.poll(), so
+           that it runs at controlled intervals (which change when a
+           connection drops and recovers). */
+        tidPendingPoll: undefined,
+        tidClearPollErr: undefined /*setTimeout() timer id for
+                                     reconnection determination. See
+                                     clearPollErrOnWait(). */,
+        $initialDelay: 1000 /* initial polling interval (ms) */,
+        currentDelay: 1000 /* current polling interval */,
+        maxDelay: 60000 * 5 /* max interval when backing off for
+                              connection errors */,
+        minDelay: 5000 /* minimum delay time for a back-off/retry
+                          attempt. */,
+        errCount: 0 /* Current poller connection error count */,
+        minErrForNotify: 4 /* Don't warn for connection errors until this
+                              many have occurred */,
+        pollTimeout: (1 && window.location.hostname.match(
+          "localhost" /*presumably local dev mode*/
+        )) ? 15000
+          : (+F.config.chat.pollTimeout>0
+             ? (1000 * (F.config.chat.pollTimeout - Math.floor(F.config.chat.pollTimeout * 0.1)))
+             /* ^^^^^^^^^^^^ we want our timeouts to be slightly shorter
+                than the server's so that we can distingished timed-out
+                polls on our end from HTTP errors (if the server times
+                out). */
+             : 30000),
+        /** Returns a random fudge value for reconnect attempt times,
+            intended to keep the /chat server from getting hammered if
+            all clients which were just disconnected all reconnect at
+            the same instant. */
+        randomInterval: function(factor){
+          return Math.floor(Math.random() * factor);
+        },
+        /** Increments the reconnection delay, within some min/max range. */
+        incrDelay: function(){
+          if( this.maxDelay > this.currentDelay ){
+            if(this.currentDelay < this.minDelay){
+              this.currentDelay = this.minDelay + this.randomInterval(this.minDelay);
+            }else{
+              this.currentDelay = this.currentDelay*2 + this.randomInterval(this.currentDelay);
+            }
+          }
+          return this.currentDelay;
+        },
+        /** Resets the delay counter to v || its initial value. */
+        resetDelay: function(ms=0){
+          return this.currentDelay = ms || this.$initialDelay;
+        },
+        /** Returns true if the timer is set to delayed mode. */
+        isDelayed: function(){
+          return (this.currentDelay > this.$initialDelay) ? this.currentDelay : 0;
+        },
+        /**
+           Cancels any in-progress pending-poll timer and starts a new
+           one with the given delay, defaulting to this.resetDelay().
+        */
+        startPendingPollTimer: function(delay){
+          this.cancelPendingPollTimer().tidPendingPoll
+            = setTimeout( Chat.poll, delay || Chat.timer.resetDelay() );
+          return this;
+        },
+        /**
+           Cancels any still-active timer set to trigger the next
+           Chat.poll().
+        */
+        cancelPendingPollTimer: function(){
+          if( this.tidPendingPoll ){
+            clearTimeout(this.tidPendingPoll);
+            this.tidPendingPoll = 0;
+          }
+          return this;
+        },
+        /**
+           Cancels any pending reconnection attempt back-off timer..
+        */
+        cancelReconnectCheckTimer: function(){
+          if( this.tidClearPollErr ){
+            clearTimeout(this.tidClearPollErr);
+            this.tidClearPollErr = 0;
+          }
+          return this;
+        }
+      },
+      /**
+         Gets (no args) or sets (1 arg) the current input text field
+         value, taking into account single- vs multi-line input. The
+         getter returns a trim()'d string and the setter returns this
+         object. As a special case, if arguments[0] is a boolean
+         value, it behaves like a getter and, if arguments[0]===true
+         it clears the input field before returning.
+      */
+      inputValue: function(/*string newValue | bool clearInputField*/){
+        const e = this.inputElement();
+        if(arguments.length && 'boolean'!==typeof arguments[0]){
+          if(e.isContentEditable) e.innerText = arguments[0];
+          else e.value = arguments[0];
+          return this;
+        }
+        const rc = e.isContentEditable ? e.innerText : e.value;
+        if( true===arguments[0] ){
+          if(e.isContentEditable) e.innerText = '';
+          else e.value = '';
+        }
+        return rc && rc.trim();
+      },
+      /** Asks the current user input field to take focus. Returns this. */
+      inputFocus: function(){
+        this.inputElement().focus();
+        return this;
+      },
+      /** Returns the current message input element. */
+      inputElement: function(){
+        return this.e.inputFields[this.e.inputFields.$currentIndex];
+      },
+      /** Enables (if yes is truthy) or disables all elements in
+       * this.disableDuringAjax. */
+      enableAjaxComponents: function(yes){
+        D[yes ? 'enable' : 'disable'](this.disableDuringAjax);
+        return this;
+      },
+      /* Must be called before any API is used which starts ajax traffic.
+         If this call represents the currently only in-flight ajax request,
+         all DOM elements in this.disableDuringAjax are disabled.
+         We cannot do this via a central API because (1) window.fetch()'s
+         Promise-based API seemingly makes that impossible and (2) the polling
+         technique holds ajax requests open for as long as possible. A call
+         to this method obligates the caller to also call ajaxEnd().
+
+         This must NOT be called for the chat-polling API except, as a
+         special exception, the very first one which fetches the
+         initial message list.
+      */
+      ajaxStart: function(){
+        if(1===++this.ajaxInflight){
+          this.enableAjaxComponents(false);
+        }
+      },
+      /* Must be called after any ajax-related call for which
+         ajaxStart() was called, regardless of success or failure. If
+         it was the last such call (as measured by calls to
+         ajaxStart() and ajaxEnd()), elements disabled by a prior call
+         to ajaxStart() will be re-enabled. */
+      ajaxEnd: function(){
+        if(0===--this.ajaxInflight){
+          this.enableAjaxComponents(true);
+        }
+      },
+      disableDuringAjax: [
+        /* List of DOM elements disable while ajax traffic is in
+           transit. Must be populated before ajax starts. We do this
+           to avoid various race conditions in the UI and long-running
+           network requests. */
+      ],
+      /** Either scrolls .message-widget element eMsg into view
+          immediately or, if it represents an inlined image, delays
+          the scroll until the image is loaded, at which point it will
+          scroll to either the newest message, if one is set or to
+          eMsg (the liklihood is good, at least on initial page load,
+          that the image won't be loaded until other messages have
+          been injected). */
+      scheduleScrollOfMsg: function(eMsg){
+        if(1===+eMsg.dataset.hasImage){
+          eMsg.querySelector('img').addEventListener(
+            'load', ()=>(this.e.newestMessage || eMsg).scrollIntoView(false)
+          );
+        }else{
+          eMsg.scrollIntoView(false);
+        }
+        return this;
+      },
+      /* Injects DOM element e as a new row in the chat, at the oldest
+         end of the list if atEnd is truthy, else at the newest end of
+         the list. */
+      injectMessageElem: function f(e, atEnd){
+        const mip = atEnd ? this.e.loadOlderToolbar : this.e.messageInjectPoint,
+              holder = this.e.viewMessages,
+              prevMessage = this.e.newestMessage;
+        if(!this.filterState.match(e.dataset.xfrom)){
+          e.classList.add('hidden');
+        }
+        if(atEnd){
+          const fe = mip.nextElementSibling;
+          if(fe) mip.parentNode.insertBefore(e, fe);
+          else D.append(mip.parentNode, e);
+        }else{
+          D.append(holder,e);
+          this.e.newestMessage = e;
+        }
+        if(!atEnd && !this._isBatchLoading
+           && e.dataset.xfrom!==this.me
+           && (prevMessage
+               ? !this.messageIsInView(prevMessage)
+               : false)){
+          /* If a new non-history message arrives while the user is
+             scrolled elsewhere, do not scroll to the latest
+             message, but gently alert the user that a new message
+             has arrived. */
+          if(!f.btnDown){
+            f.btnDown = D.button("⇣⇣⇣");
+            f.btnDown.addEventListener('click',()=>this.scrollMessagesTo(1),false);
+          }
+          F.toast.message(f.btnDown," New message has arrived.");
+        }else if(!this._isBatchLoading && e.dataset.xfrom===Chat.me){
+          this.scheduleScrollOfMsg(e);
+        }else if(!this._isBatchLoading){
+          /* When a message from someone else arrives, we have to
+             figure out whether or not to scroll it into view. Ideally
+             we'd just stuff it in the UI and let the flexbox layout
+             DTRT, but Safari has expressed, in no uncertain terms,
+             some disappointment with that approach, so we'll
+             heuristicize it: if the previous last message is in view,
+             assume the user is at or near the input element and
+             scroll this one into view. If that message is NOT in
+             view, assume the user is up reading history somewhere and
+             do NOT scroll because doing so would interrupt
+             them. There are middle grounds here where the user will
+             experience a slight UI jolt, but this heuristic mostly
+             seems to work out okay. If there was no previous message,
+             assume we don't have any messages yet and go ahead and
+             scroll this message into view (noting that that scrolling
+             is hypothetically a no-op in such cases).
+
+             The wrench in these works are posts with IMG tags, as
+             those images are loaded async and the element does not
+             yet have enough information to know how far to scroll!
+             For such cases we have to delay the scroll until the
+             image loads (and we hope it does so before another
+             message arrives).
+          */
+          if(1===+e.dataset.hasImage){
+            e.querySelector('img').addEventListener('load',()=>e.scrollIntoView());
+          }else if(!prevMessage || (prevMessage && isEntirelyInViewport(prevMessage))){
+            e.scrollIntoView(false);
+          }
+        }
+      },
+      /** Returns true if chat-only mode is enabled. */
+      isChatOnlyMode: ()=>document.body.classList.contains('chat-only-mode'),
+      /**
+         Enters (if passed a truthy value or no arguments) or leaves
+         "chat-only" mode. That mode hides the page's header and
+         footer, leaving only the chat application visible to the
+         user.
+      */
+      chatOnlyMode: function f(yes){
+        if(undefined === f.elemsToToggle){
+          f.elemsToToggle = [];
+          GetFramingElements().forEach((e)=>f.elemsToToggle.push(e));
+        }
+        if(!arguments.length) yes = true;
+        if(yes === this.isChatOnlyMode()) return this;
+        if(yes){
+          D.addClass(f.elemsToToggle, 'hidden');
+          D.addClass(document.body, 'chat-only-mode');
+          document.body.scroll(0,document.body.height);
+        }else{
+          D.removeClass(f.elemsToToggle, 'hidden');
+          D.removeClass(document.body, 'chat-only-mode');
+        }
+        ForceResizeKludge();
+        return this;
+      },
+      /** Tries to scroll the message area to...
+          <0 = top of the message list, >0 = bottom of the message list,
+          0 == the newest message (normally the same position as >1).
+      */
+      scrollMessagesTo: function(where){
+        if(where<0){
+          Chat.e.viewMessages.scrollTop = 0;
+        }else if(where>0){
+          Chat.e.viewMessages.scrollTop = Chat.e.viewMessages.scrollHeight;
+        }else if(Chat.e.newestMessage){
+          Chat.e.newestMessage.scrollIntoView(false);
+        }
+      },
+      toggleChatOnlyMode: function(){
+        return this.chatOnlyMode(!this.isChatOnlyMode());
+      },
+      messageIsInView: function(e){
+        return e ? overlapsElemView(e, this.e.viewMessages) : false;
+      },
+      settings:{
+        get: (k,dflt)=>F.storage.get(k,dflt),
+        getBool: (k,dflt)=>F.storage.getBool(k,dflt),
+        set: function(k,v){
+          F.storage.set(k,v);
+          F.page.dispatchEvent('chat-setting',{key: k, value: v});
+        },
+        /* Toggles the boolean setting specified by k. Returns the
+           new value.*/
+        toggle: function(k){
+          const v = this.getBool(k);
+          this.set(k, !v);
+          return !v;
+        },
+        addListener: function(setting, f){
+          F.page.addEventListener('chat-setting', function(ev){
+            if(ev.detail.key===setting) f(ev.detail);
+          }, false);
+        },
+        /* Default values of settings. These are used for initializing
+           the setting event listeners and config view UI. */
+        defaults:{
+          /* When on, inbound images are displayed inlined, else as a
+             link to download the image. */
+          "images-inline": !!F.config.chat.imagesInline,
+          /* When on, ctrl-enter sends messages, else enter and
+             ctrl-enter both send them. */
+          "edit-ctrl-send": false,
+          /* When on, the edit field starts as a single line and
+             expands as the user types, and the relevant buttons are
+             laid out in a compact form. When off, the edit field and
+             buttons are larger. */
+          "edit-compact-mode": true,
+          /* See notes for this setting in fossil.page.wikiedit.js.
+             Both /wikiedit and /fileedit share this persistent config
+             option under the same storage key. */
+          "edit-shift-enter-preview":
+            F.storage.getBool('edit-shift-enter-preview', true),
+          /* When on, sets the font-family on messages and the edit
+             field to monospace. */
+          "monospace-messages": false,
+          /* When on, non-chat UI elements (page header/footer) are
+             hidden */
+          "chat-only-mode": false,
+          /* When set to a URI, it is assumed to be an audio file,
+             which gets played when new messages arrive. When true,
+             the first entry in the audio file selection list will be
+             used. */
+          "audible-alert": true,
+          /*
+           */
+          "beep-once": false,
+          /* When on, show the list of "active" users - those from
+             whom we have messages in the currently-loaded history
+             (noting that deletions are also messages). */
+          "active-user-list": false,
+          /* When on, the [active-user-list] setting includes the
+             timestamp of each user's most recent message. */
+          "active-user-list-timestamps": false,
+          /* When on, the [audible-alert] is played for one's own
+             messages, else it is only played for other users'
+             messages. */
+          "alert-own-messages": false,
+          /* "Experimental mode" input: use a contenteditable field
+             for input. This is generally more comfortable to use,
+             and more modern, than plain text input fields, but
+             the list of browser-specific quirks and bugs is...
+             not short. */
+          "edit-widget-x": false
+        }
+      },
+      /** Plays a new-message notification sound IF the audible-alert
+          setting is true, else this is a no-op. Returns this.
+      */
+      playNewMessageSound: function f(){
+        if(f.uri){
+          if(!cs.pageIsActive
+             /* ^^^ this could also arguably apply when chat is visible */
+             && this.playedBeep && this.settings.getBool('beep-once',false)){
+            return;
+          }
+          try{
+            this.playedBeep = true;
+            if(!f.audio) f.audio = new Audio(f.uri);
+            f.audio.currentTime = 0;
+            f.audio.play();
+          }catch(e){
+            console.error("Audio playblack failed.", f.uri, e);
+          }
+        }
+        return this;
+      },
+      /**
+         Sets the current new-message audio alert URI (must be a
+         repository-relative path which responds with an audio
+         file). Pass a falsy value to disable audio alerts. Returns
+         this.
+      */
+      setNewMessageSound: function f(uri){
+        this.playedBeep = false;
+        delete this.playNewMessageSound.audio;
+        this.playNewMessageSound.uri = uri;
+        this.settings.set('audible-alert', uri);
+        return this;
+      },
+      /**
+         Expects e to be one of the elements in this.e.views.
+         The 'hidden' class is removed from e and added to
+         all other elements in that list. Returns e.
+      */
+      setCurrentView: function(e){
+        if(e===this.e.currentView){
+          return e;
+        }
+        if( e!==this.e.viewZoom && this.e.zoomedMsg ){
+          this.zoomMessage(null, e);
+          return this.e.currentView;
+        }
+        this.e.views.forEach(function(E){
+          if(e!==E) D.addClass(E,'hidden');
+        });
+        this.e.currentView = e;
+        if(this.e.currentView.$beforeShow) this.e.currentView.$beforeShow();
+        D.removeClass(e,'hidden');
+        this.animate(this.e.currentView, 'anim-fade-in-fast');
+        return this.e.currentView;
+      },
+
+      /**
+         Makes message element eMsg the content of this.e.viewZoom.
+      */
+      zoomMessage: function(eMsg,nextView){
+        const marker = this.e.zoomMarker;
+        if( !eMsg || eMsg===this.e.zoomedMsg ){
+          if( this.e.zoomedMsg ){
+            marker.parentNode.insertBefore(this.e.zoomedMsg, marker);
+            delete this.e.zoomedMsg;
+          }
+          this.setCurrentView(nextView || this.e.viewMessages);
+          return;
+        }
+        console.log("zoom message",eMsg);
+        if( this.e.zoomedMsg ){
+          marker.parentNode.insertBefore(this.e.zoomedMsg, marker);
+        }
+        this.e.viewMessages.insertBefore(marker, eMsg);
+        this.e.zoomContent.appendChild(eMsg);
+        this.e.zoomedMsg = eMsg;
+        this.setCurrentView(this.e.viewZoom);
+      },
+      /**
+         Updates the "active user list" view if we are not currently
+         batch-loading messages and if the active user list UI element
+         is active.
+      */
+      updateActiveUserList: function callee(){
+        if(this._isBatchLoading
+           || this.e.activeUserListWrapper.classList.contains('hidden')){
+          return this;
+        }else if(!callee.sortUsersSeen){
+          /** Array.sort() callback. Expects an array of user names and
+              sorts them in last-received message order (newest first). */
+          const self = this;
+          callee.sortUsersSeen = function(l,r){
+            l = self.usersLastSeen[l];
+            r = self.usersLastSeen[r];
+            if(l && r) return r - l;
+            else if(l) return -1;
+            else if(r) return 1;
+            else return 0;
+          };
+          callee.addUserElem = function(u){
+            const uSpan = D.addClass(D.span(), 'chat-user');
+            const uDate = self.usersLastSeen[u];
+            if(self.filterState.activeUser===u){
+              uSpan.classList.add('selected');
+            }
+            uSpan.dataset.uname = u;
+            D.append(uSpan, u, "\n",
+                     D.append(
+                       D.addClass(D.span(),'timestamp'),
+                       localTimeString(uDate)//.substr(5/*chop off year*/)
+                     ));
+            if(uDate.$uColor){
+              uSpan.style.backgroundColor = uDate.$uColor;
+            }
+            D.append(self.e.activeUserList, uSpan);
+          };
+        }
+        //D.clearElement(this.e.activeUserList);
+        D.remove(this.e.activeUserList.querySelectorAll('.chat-user'));
+        Object.keys(this.usersLastSeen).sort(
+          callee.sortUsersSeen
+        ).forEach(callee.addUserElem);
+        return this;
+      },
+      /** Show or hide the active user list. Returns this object. */
+      showActiveUserList: function(yes){
+        if(0===arguments.length) yes = true;
+        this.e.activeUserListWrapper.classList[
+          yes ? 'remove' : 'add'
+        ]('hidden');
+        D.removeClass(Chat.e.activeUserListWrapper, 'collapsed');
+        if(Chat.e.activeUserListWrapper.classList.contains('hidden')){
+          /* When hiding this element, undo all filtering */
+          Chat.setUserFilter(false);
+          /*Ideally we'd scroll the final message into view
+            now, but because viewMessages is currently hidden behind
+            viewConfig, scrolling is a no-op. */
+          Chat.scrollMessagesTo(1);
+        }else{
+          Chat.updateActiveUserList();
+          Chat.animate(Chat.e.activeUserListWrapper, 'anim-flip-v');
+        }
+        return this;
+      },
+      showActiveUserTimestamps: function(yes){
+        if(0===arguments.length) yes = true;
+        this.e.activeUserList.classList[yes ? 'add' : 'remove']('timestamps');
+        return this;
+      },
+      /**
+         Applies user name filter to all current messages, or clears
+         the filter if uname is falsy.
+      */
+      setUserFilter: function(uname){
+        this.filterState.activeUser = uname;
+        const mw = this.e.viewMessages.querySelectorAll('.message-widget');
+        const self = this;
+        let eLast;
+        if(!uname){
+          D.removeClass(Chat.e.viewMessages.querySelectorAll('.message-widget.hidden'),
+                        'hidden');
+        }else{
+          mw.forEach(function(w){
+            if(self.filterState.match(w.dataset.xfrom)){
+              w.classList.remove('hidden');
+              eLast = w;
+            }else{
+              w.classList.add('hidden');
+            }
+          });
+        }
+        if(eLast) eLast.scrollIntoView(false);
+        else this.scrollMessagesTo(1);
+        cs.e.activeUserList.querySelectorAll('.chat-user').forEach(function(e){
+          e.classList[uname===e.dataset.uname ? 'add' : 'remove']('selected');
+        });
+        return this;
+      },
+
+      /**
+         If animations are enabled, passes its arguments
+         to D.addClassBriefly(), else this is a no-op.
+         If cb is a function, it is called after the
+         CSS class is removed. Returns this object;
+      */
+      animate: function f(e,a,cb){
+        if(!f.$disabled){
+          D.addClassBriefly(e, a, 0, cb);
+        }
+        return this;
+      }
+    }/*Chat object*/;
+    cs.e.inputFields = [ cs.e.input1, cs.e.inputM, cs.e.inputX ];
+    cs.e.inputFields.$currentIndex = 0;
+    cs.e.inputFields.forEach(function(e,ndx){
+      if(ndx===cs.e.inputFields.$currentIndex) D.removeClass(e,'hidden');
+      else D.addClass(e,'hidden');
+    });
+    if(D.attr(cs.e.inputX,'contenteditable','plaintext-only').isContentEditable){
+      cs.$browserHasPlaintextOnly = true;
+    }else{
+      /* contenteditable="plaintext-only" is a latecomer, not
+         supported in FF until version 136. */
+      cs.$browserHasPlaintextOnly = false;
+      D.attr(cs.e.inputX,'contenteditable','true');
+    }
+    cs.animate.$disabled = true;
+    F.fetch.beforesend = ()=>cs.ajaxStart();
+    F.fetch.aftersend = ()=>cs.ajaxEnd();
+    cs.pageTitleOrig = cs.e.pageTitle.innerText;
+    const qs = (e)=>document.querySelector(e);
+    const argsToArray = function(args){
+      return Array.prototype.slice.call(args,0);
+    };
+    /**
+       Reports an error via console.error() and as a toast message.
+       Accepts any argument types valid for fossil.toast.error().
+    */
+    cs.reportError = function(/*msg args*/){
+      const args = argsToArray(arguments);
+      console.error("chat error:",args);
+      F.toast.error.apply(F.toast, args);
+    };
+
+    let InternalMsgId = 0;
+    /**
+       Reports an error in the form of a new message in the chat
+       feed. All arguments are appended to the message's content area
+       using fossil.dom.append(), so may be of any type supported by
+       that function.
+    */
+    cs.reportErrorAsMessage = function f(/*msg args*/){
+      const args = argsToArray(arguments).map(function(v){
+        return (v instanceof Error) ? v.message : v;
+      });
+      if(Chat.beVerbose){
+        console.error("chat error:",args);
+      }
+      const d = new Date().toISOString(),
+            mw = new this.MessageWidget({
+              isError: true,
+              xfrom: undefined,
+              msgid: "error-"+(++InternalMsgId),
+              mtime: d,
+              lmtime: d,
+              xmsg: args
+            });
+      this.injectMessageElem(mw.e.body);
+      mw.scrollIntoView();
+      return mw;
+    };
+
+    /**
+       For use by the connection poller to send a "connection
+       restored" message.
+    */
+    cs.reportReconnection = function f(/*msg args*/){
+      const args = argsToArray(arguments).map(function(v){
+        return (v instanceof Error) ? v.message : v;
+      });
+      const d = new Date().toISOString(),
+            mw = new this.MessageWidget({
+              isError: false,
+              xfrom: undefined,
+              msgid: "reconnect-"+(++InternalMsgId),
+              mtime: d,
+              lmtime: d,
+              xmsg: args
+            });
+      this.injectMessageElem(mw.e.body);
+      mw.scrollIntoView();
+      return mw;
+    };
+
+    cs.getMessageElemById = function(id){
+      return qs('[data-msgid="'+id+'"]');
+    };
+
+    /** Finds the last .message-widget element and returns it or
+        the undefined value if none are found. */
+    cs.fetchLastMessageElem = function(){
+      const msgs = document.querySelectorAll('.message-widget');
+      var rc;
+      if(msgs.length){
+        rc = this.e.newestMessage = msgs[msgs.length-1];
+      }
+      return rc;
+    };
+
+    /**
+       LOCALLY deletes a message element by the message ID or passing
+       the .message-row element. Returns true if it removes an element,
+       else false.
+    */
+    cs.deleteMessageElem = function(id, silent){
+      var e;
+      if(id instanceof HTMLElement){
+        e = id;
+        id = e.dataset.msgid;
+        delete e.dataset.msgid;
+        if( e?.dataset?.alsoRemove ){
+          const xId = e.dataset.alsoRemove;
+          delete e.dataset.alsoRemove;
+          this.deleteMessageElem( xId );
+        }
+      }else if(id instanceof Chat.MessageWidget) {
+        if( this.e.eMsgPollError === e ){
+          this.e.eMsgPollError = undefined;
+        }
+        if(id.e?.body){
+          this.deleteMessageElem(id.e.body);
+        }
+        return;
+      } else{
+        e = this.getMessageElemById(id);
+      }
+      if(e && id){
+        D.remove(e);
+        if(e===this.e.newestMessage){
+          this.fetchLastMessageElem();
+        }
+        if( !silent ){
+          F.toast.message("Deleted message "+id+".");
+        }
+      }
+      return !!e;
+    };
+
+    /**
+       Toggles the given message between its parsed and plain-text
+       representations. It requires a server round-trip to collect the
+       plain-text form but caches it for subsequent toggles.
+
+       Expects the ID of a currently-loaded message or a
+       message-widget DOM elment from which it can extract an id.
+       This is an async operation the first time it's passed a given
+       message and synchronous on subsequent calls for that
+       message. It is a no-op if id does not resolve to a loaded
+       message.
+    */
+    cs.toggleTextMode = function(id){
+      var e;
+      if(id instanceof HTMLElement){
+        e = id;
+        id = e.dataset.msgid;
+      }else{
+        e = this.getMessageElemById(id);
+      }
+      if(!e || !id) return false;
+      else if(e.$isToggling) return;
+      e.$isToggling = true;
+      const content = e.querySelector('.content-target');
+      if(!content){
+        console.warn("Should not be possible: trying to toggle text",
+                     "mode of a message with no .content-target.", e);
+        return;
+      }
+      if(!content.$elems){
+        content.$elems = [
+          content.firstElementChild, // parsed elem
+          undefined // plaintext elem
+        ];
+      }else if(content.$elems[1]){
+        // We have both content types. Simply toggle them.
+        const child = (
+          content.firstElementChild===content.$elems[0]
+            ? content.$elems[1]
+            : content.$elems[0]
+        );
+        D.clearElement(content);
+        if(child===content.$elems[1]){
+          /* When showing the unformatted version, inject a
+             copy-to-clipboard button. This is a workaround for
+             mouse-copying from that field collecting twice as many
+             newlines as it should (for unknown reasons). */
+          const cpId = 'copy-to-clipboard-'+id;
+          /* ^^^ copy button element ID, needed for LABEL element
+             pairing.  Recall that we destroy all child elements of
+             `content` each time we hit this block, so we can reuse
+             that element ID on subsequent toggles. */
+          const btnCp = D.attr(D.addClass(D.button(),'copy-button'), 'id', cpId);
+          F.copyButton(btnCp, {extractText: ()=>child._xmsgRaw});
+          const lblCp = D.label(cpId, "Copy unformatted text");
+          D.append(content, D.append(D.addClass(D.span(), 'nobr'), btnCp, lblCp));
+        }
+        delete e.$isToggling;
+        D.append(content, child);
+        return;
+      }
+      // We need to fetch the plain-text version...
+      const self = this;
+      F.fetch('chat-fetch-one',{
+        urlParams:{ name: id, raw: true},
+        responseType: 'json',
+        onload: function(msg){
+          reportConnectionOkay('chat-fetch-one');
+          content.$elems[1] = D.append(D.pre(),msg.xmsg);
+          content.$elems[1]._xmsgRaw = msg.xmsg/*used for copy-to-clipboard feature*/;
+          self.toggleTextMode(e);
+        },
+        aftersend:function(){
+          delete e.$isToggling;
+          Chat.ajaxEnd();
+        }
+      });
+      return true;
+    };
+
+    /** Given a .message-row element, this function returns whethe the
+        current user may, at least hypothetically, delete the message
+        globally.  A user may always delete a local copy of a
+        post. The server may trump this, e.g. if the login has been
+        cancelled after this page was loaded.
+    */
+    cs.userMayDelete = function(eMsg){
+      return +eMsg.dataset.msgid>0
+        && (this.me === eMsg.dataset.xfrom
+            || F.user.isAdmin/*will be confirmed server-side*/);
+    };
+
+    /** Returns a new Error() object encapsulating state from the given
+        fetch() response promise. */
+    cs._newResponseError = function(response){
+      return new Error([
+        "HTTP status ", response.status,": ",response.url,": ",
+        response.statusText].join(''));
+    };
+
+    /** Helper for reporting HTTP-level response errors via fetch().
+        If response.ok then response.json() is returned, else an Error
+        is thrown. */
+    cs._fetchJsonOrError = function(response){
+      if(response.ok) return response.json();
+      else throw cs._newResponseError(response);
+    };
+
+    /**
+       Removes the given message ID from the local chat record and, if
+       the message was posted by this user OR this user in an
+       admin/setup, also submits it for removal on the remote.
+
+       id may optionally be a DOM element, in which case it must be a
+       .message-row element.
+    */
+    cs.deleteMessage = function(id){
+      var e;
+      if(id instanceof HTMLElement){
+        e = id;
+        id = e.dataset.msgid;
+      }else{
+        e = this.getMessageElemById(id);
+      }
+      if(!(e instanceof HTMLElement)) return;
+      if(this.userMayDelete(e)){
+        F.fetch("chat-delete/" + id, {
+          responseType: 'json',
+          onload:(r)=>{
+            reportConnectionOkay('chat-delete');
+            this.deleteMessageElem(r);
+          },
+          onerror:(err)=>this.reportErrorAsMessage(err)
+        });
+      }else{
+        this.deleteMessageElem(id);
+      }
+    };
+    document.addEventListener('visibilitychange', function(ev){
+      cs.pageIsActive = ('visible' === document.visibilityState);
+      cs.playedBeep = false;
+      if(cs.pageIsActive){
+        cs.e.pageTitle.innerText = cs.pageTitleOrig;
+        if(document.activeElement!==cs.inputElement()){
+          /* An attempt to resolve usability problem reported by Joe
+             M. where the Pale Moon browser is giving input focus to
+             the Preview button. The down-side of this is that it will
+             deselect any text which was previously selected on this
+             page. This also, unfortunately, places the focus at the
+             start of the element, rather than the last cursor position
+             (like a textarea would). */
+          setTimeout(()=>cs.inputFocus(), 0);
+        }
+      }
+    }, true);
+    cs.setCurrentView(cs.e.viewMessages);
+
+    cs.e.activeUserList.addEventListener('click', function f(ev){
+      /* Filter messages on a user clicked in activeUserList */
+      ev.stopPropagation();
+      ev.preventDefault();
+      let eUser = ev.target;
+      while(eUser!==this && !eUser.classList.contains('chat-user')){
+        eUser = eUser.parentNode;
+      }
+      if(eUser==this || !eUser) return false;
+      const uname = eUser.dataset.uname;
+      let eLast;
+      cs.setCurrentView(cs.e.viewMessages);
+      if(eUser.classList.contains('selected')){
+        /* If currently selected, toggle filter off */
+        eUser.classList.remove('selected');
+        cs.setUserFilter(false);
+        delete f.$eSelected;
+      }else{
+        if(f.$eSelected) f.$eSelected.classList.remove('selected');
+        f.$eSelected = eUser;
+        eUser.classList.add('selected');
+        cs.setUserFilter(uname);
+      }
+      return false;
+    }, false);
+    return cs;
+  })()/*Chat initialization*/;
+
+
+  /** Returns the first .message-widget element in DOM element
+      e's lineage. */
+  const findMessageWidgetParent = function(e){
+    while( e && !e.classList.contains('message-widget')){
+      e = e.parentNode;
+    }
+    return e;
+  };
+
+  /**
+     Custom widget type for rendering messages (one message per
+     instance). These are modelled after FIELDSET elements but we
+     don't use FIELDSET because of cross-browser inconsistencies in
+     features of the FIELDSET/LEGEND combination, e.g. inability to
+     align legends via CSS in Firefox and clicking-related
+     deficiencies in Safari.
+  */
+  Chat.MessageWidget = (function(){
+    /**
+       Constructor. If passed an argument, it is passed to
+       this.setMessage() after initialization.
+    */
+    const ctor = function(){
+      this.e = {
+        body: D.addClass(D.div(), 'message-widget'),
+        tab: D.addClass(D.div(), 'message-widget-tab'),
+        content: D.addClass(D.div(), 'message-widget-content')
+      };
+      D.append(this.e.body, this.e.tab, this.e.content);
+      this.e.tab.setAttribute('role', 'button');
+      if(arguments.length){
+        this.setMessage(arguments[0]);
+      }
+    };
+    /* Left-zero-pad a number to at least 2 digits */
+    const dowMap = {
+      /* Map of Date.getDay() values to weekday names. */
+      0: "Sunday", 1: "Monday", 2: "Tuesday",
+      3: "Wednesday", 4: "Thursday", 5: "Friday",
+      6: "Saturday"
+    };
+    /* Given a Date, returns the timestamp string used in the "tab"
+       part of message widgets. If longFmt is true then a verbose
+       format is used, else a brief format is used. The returned string
+       is in client-local time. */
+    const theTime = function(d, longFmt=false){
+      const li = [];
+      if( longFmt ){
+        li.push(
+          d.getFullYear(),
+          '-', pad2(d.getMonth()+1),
+          '-', pad2(d.getDate()),
+          ' ',
+          d.getHours(), ":",
+          (d.getMinutes()+100).toString().slice(1,3)
+        );
+      }else{
+        li.push(
+          d.getHours(),":",
+          (d.getMinutes()+100).toString().slice(1,3),
+          ' ', dowMap[d.getDay()]
+        );
+      }
+      return li.join('');
+    };
+
+    /**
+       Returns true if this page believes it can embed a view of the
+       file wrapped by the given message object, else returns false.
+    */
+    const canEmbedFile = function f(msg){
+      if(!f.$rx){
+        f.$rx = /\.((html?)|(txt)|(md)|(wiki)|(pikchr))$/i;
+        f.$specificTypes = [
+          /* Mime types we know we can embed, sans image/... */
+          'text/plain',
+          'text/html',
+          'text/x-markdown',
+          /* Firefox sends text/markdown when uploading .md files */
+          'text/markdown',
+          'text/x-pikchr',
+          'text/x-fossil-wiki'
+          /* Add more as we discover which ones Firefox won't
+             force the user to try to download. */
+        ];
+      }
+      if(msg.fmime){
+        if(msg.fmime.startsWith("image/")
+           || f.$specificTypes.indexOf(msg.fmime)>=0){
+          return true;
+        }
+      }
+      return (msg.fname && f.$rx.test(msg.fname));
+    };
+
+    /**
+      Returns true if the given message object "should"
+      be embedded in fossil-rendered form instead of
+      raw content form. This is only intended to be passed
+      message objects for which canEmbedFile() returns true.
+    */
+    const shouldFossilRenderEmbed = function f(msg){
+      if(!f.$rx){
+        f.$rx = /\.((md)|(wiki)|(pikchr))$/i;
+        f.$specificTypes = [
+          'text/x-markdown',
+          'text/markdown' /* Firefox-uploaded md files */,
+          'text/x-pikchr',
+          'text/x-fossil-wiki'
+        ];
+      }
+      if(msg.fmime){
+        if(f.$specificTypes.indexOf(msg.fmime)>=0) return true;
+      }
+      return msg.fname && f.$rx.test(msg.fname);
+    };
+
+    const adjustIFrameSize = function(msgObj){
+      const iframe = msgObj.e.iframe;
+      const body = iframe.contentWindow.document.querySelector('body');
+      if(body && !body.style.fontSize){
+        /** _Attempt_ to force the iframe to inherit the message's text size
+            if the body has no explicit size set. On desktop systems
+            the size is apparently being inherited in that case, but on mobile
+            not. */
+        body.style.fontSize = window.getComputedStyle(msgObj.e.content).fontSize;
+      }
+      if('' === iframe.style.maxHeight){
+        /* Resize iframe height to fit the content. Workaround: if we
+           adjust the iframe height while it's hidden then its height
+           is 0, so we must briefly unhide it. */
+        const isHidden = iframe.classList.contains('hidden');
+        if(isHidden) D.removeClass(iframe, 'hidden');
+        iframe.style.maxHeight = iframe.style.height
+          = iframe.contentWindow.document.documentElement.scrollHeight + 'px';
+        if(isHidden) D.addClass(iframe, 'hidden');
+      }
+    };
+
+    ctor.prototype = {
+      scrollIntoView: function(){
+        this.e.content.scrollIntoView();
+      },
+      //remove: function(silent){Chat.deleteMessageElem(this, silent);},
+      setMessage: function(m){
+        const ds = this.e.body.dataset;
+        ds.timestamp = m.mtime;
+        ds.lmtime = m.lmtime;
+        ds.msgid = m.msgid;
+        ds.xfrom = m.xfrom || '';
+        if(m.xfrom === Chat.me){
+          D.addClass(this.e.body, 'mine');
+        }
+        if(m.uclr){
+          this.e.content.style.backgroundColor = m.uclr;
+          this.e.tab.style.backgroundColor = m.uclr;
+        }
+        const d = new Date(m.mtime);
+        D.clearElement(this.e.tab);
+        var contentTarget = this.e.content;
+        var eXFrom /* element holding xfrom name */;
+        if(m.xfrom){
+          eXFrom = D.append(D.addClass(D.span(), 'xfrom'), m.xfrom);
+          const wrapper = D.append(
+            D.span(), eXFrom,
+            ' ',
+            D.append(D.addClass(D.span(), 'msgid'),
+                     '#' + (m.msgid||'???')),
+            (m.isSearchResult ? ' ' : ' @ '),
+            D.append(D.addClass(D.span(), 'timestamp'),
+                     theTime(d,!!m.isSearchResult))
+          );
+          D.append(this.e.tab, wrapper);
+        }else{/*notification*/
+          D.addClass(this.e.body, 'notification');
+          if(m.isError){
+            D.addClass([contentTarget, this.e.tab], 'error');
+          }
+          D.append(
+            this.e.tab,
+            D.append(D.code(), 'notification @ ',theTime(d,false))
+          );
+        }
+        if( m.xfrom && m.fsize>0 ){
+          if( m.fmime
+              && m.fmime.startsWith("image/")
+              && Chat.settings.getBool('images-inline',true)
+            ){
+            const extension = m.fname.split('.').pop();
+            contentTarget.appendChild(D.img("chat-download/" + m.msgid +(
+              extension ? ('.'+extension) : ''/*So that IMG tag mimetype guessing works*/
+            )));
+            ds.hasImage = 1;
+          }else{
+            // Add a download link.
+            const downloadUri = window.fossil.rootPath+
+                  'chat-download/' + m.msgid+'/'+encodeURIComponent(m.fname);
+            const w = D.addClass(D.div(), 'attachment-link');
+            const a = D.a(downloadUri,
+              // ^^^ add m.fname to URL to cause downloaded file to have that name.
+              "(" + m.fname + " " + m.fsize + " bytes)"
+            )
+            D.attr(a,'target','_blank');
+            D.append(w, a);
+            if(canEmbedFile(m)){
+              /* Add an option to embed HTML attachments in an iframe. The primary
+                 use case is attached diffs. */
+              const shouldFossilRender = shouldFossilRenderEmbed(m);
+              const downloadArgs = shouldFossilRender ? '?render' : '';
+              D.addClass(contentTarget, 'wide');
+              const embedTarget = this.e.content;
+              const self = this;
+              const btnEmbed = D.attr(D.checkbox("1", false), 'id',
+                                      'embed-'+ds.msgid);
+              const btnLabel = D.label(btnEmbed, shouldFossilRender
+                                       ? "Embed (fossil-rendered)" : "Embed");
+              /* Maintenance reminder: do not disable the toggle
+                 button while the content is loading because that will
+                 cause it to get stuck in disabled mode if the browser
+                 decides that loading the content should prompt the
+                 user to download it, rather than embed it in the
+                 iframe. */
+              btnEmbed.addEventListener('change',function(){
+                if(self.e.iframe){
+                  if(btnEmbed.checked){
+                    D.removeClass(self.e.iframe, 'hidden');
+                    if(self.e.$iframeLoaded) adjustIFrameSize(self);
+                  }
+                  else D.addClass(self.e.iframe, 'hidden');
+                  return;
+                }
+                const iframe = self.e.iframe = document.createElement('iframe');
+                D.append(embedTarget, iframe);
+                iframe.addEventListener('load', function(){
+                  self.e.$iframeLoaded = true;
+                  adjustIFrameSize(self);
+                });
+                iframe.setAttribute('src', downloadUri + downloadArgs);
+              });
+              D.append(w, btnEmbed, btnLabel);
+            }
+            contentTarget.appendChild(w);
+          }
+        }
+        if(m.xmsg){
+          if(m.fsize>0){
+            /* We have file/image content, so need another element for
+               the message text. */
+            contentTarget = D.div();
+            D.append(this.e.content, contentTarget);
+          }
+          D.addClass(contentTarget, 'content-target'
+                     /*target element for the 'toggle text mode' feature*/);
+          // The m.xmsg text comes from the same server as this script and
+          // is guaranteed by that server to be "safe" HTML - safe in the
+          // sense that it is not possible for a malefactor to inject HTML
+          // or javascript or CSS.  The m.xmsg content might contain
+          // hyperlinks, but otherwise it will be markup-free.  See the
+          // chat_format_to_html() routine in the server for details.
+          //
+          // Hence, even though innerHTML is normally frowned upon, it is
+          // perfectly safe to use in this context.
+          if(m.xmsg && 'string' !== typeof m.xmsg){
+            // Used by Chat.reportErrorAsMessage()
+            D.append(contentTarget, m.xmsg);
+          }else{
+            contentTarget.innerHTML = m.xmsg;
+            contentTarget.querySelectorAll('a').forEach(addAnchorTargetBlank);
+            if(F.pikchr){
+              F.pikchr.addSrcView(contentTarget.querySelectorAll('svg.pikchr'));
+            }
+          }
+        }
+        //console.debug("tab",this.e.tab);
+        //console.debug("this.e.tab.firstElementChild",this.e.tab.firstElementChild);
+        this.e.tab.firstElementChild.addEventListener('click', this._handleLegendClicked, false);
+        /*if(eXFrom){
+          eXFrom.addEventListener('click', ()=>this.e.tab.click(), false);
+        }*/
+        return this;
+      },
+      /* Event handler for clicking .message-user elements to show their
+         timestamps and a set of actions. */
+      _handleLegendClicked: function f(ev){
+        if(!f.popup){
+          /* "Popup" widget */
+          f.popup = {
+            e: D.addClass(D.div(), 'chat-message-popup'),
+            refresh:function(){
+              const eMsg = this.$eMsg/*.message-widget element*/;
+              if(!eMsg) return;
+              D.clearElement(this.e);
+              const d = new Date(eMsg.dataset.timestamp);
+              if(d.getMinutes().toString()!=="NaN"){
+                // Date works, render informative timestamps
+                const xfrom = eMsg.dataset.xfrom || 'server';
+                D.append(this.e,
+                         D.append(D.span(), localTimeString(d)," ",Chat.me," time"),
+                         D.append(D.span(), iso8601ish(d)));
+                if(eMsg.dataset.lmtime && xfrom!==Chat.me){
+                  D.append(this.e,
+                           D.append(D.span(), localTime8601(
+                             new Date(eMsg.dataset.lmtime)
+                           ).replace('T',' ')," ",xfrom," time"));
+                }
+              }else{
+                /* This might not be necessary any more: it was
+                   initially caused by Safari being stricter than
+                   other browsers on its time string input, and that
+                   has since been resolved by emiting a stricter
+                   format. */
+                // Date doesn't work, so dumb it down...
+                D.append(this.e, D.append(D.span(), eMsg.dataset.timestamp," zulu"));
+              }
+              const toolbar = D.addClass(D.div(), 'toolbar', 'hide-in-zoom');
+              D.append(this.e, toolbar);
+              const self = this;
+
+              const btnDeleteLocal = D.button("Delete locally");
+              D.append(toolbar, btnDeleteLocal);
+              btnDeleteLocal.addEventListener('click', function(){
+                self.hide();
+                Chat.deleteMessageElem(eMsg)
+              });
+              if( eMsg.classList.contains('notification') ){
+                const btnDeletePoll = D.button("Delete /chat notifications?");
+                D.append(toolbar, btnDeletePoll);
+                btnDeletePoll.addEventListener('click', function(){
+                  self.hide();
+                  Chat.e.viewMessages.querySelectorAll(
+                    '.message-widget.notification:not(.resend-message)'
+                  ).forEach(e=>Chat.deleteMessageElem(e, true));
+                });
+              }
+              if(Chat.userMayDelete(eMsg)){
+                const btnDeleteGlobal = D.button("Delete globally");
+                D.append(toolbar, btnDeleteGlobal);
+                F.confirmer(btnDeleteGlobal,{
+                  pinSize: true,
+                  ticks: F.config.confirmerButtonTicks,
+                  confirmText: "Confirm delete?",
+                  onconfirm:function(){
+                    self.hide();
+                    Chat.deleteMessage(eMsg);
+                  }
+                });
+              }
+              const toolbar3 = D.addClass(D.div(), 'toolbar', 'hide-in-zoom');
+              D.append(this.e, toolbar3);
+              D.append(toolbar3, D.button(
+                "Locally remove all previous messages",
+                function(){
+                  self.hide();
+                  Chat.mnMsg = +eMsg.dataset.msgid;
+                  var e = eMsg.previousElementSibling;
+                  while(e && e.classList.contains('message-widget')){
+                    const n = e.previousElementSibling;
+                    D.remove(e);
+                    e = n;
+                  }
+                  eMsg.scrollIntoView();
+                }
+              ));
+              const toolbar2 = D.addClass(D.div(), 'toolbar');
+              D.append(this.e, toolbar2);
+              if(eMsg.querySelector('.content-target')){
+                /* ^^^ messages with only an embedded image have no
+                   .content-target area. */
+                D.append(toolbar2, D.button(
+                  "Toggle text mode", function(){
+                    self.hide();
+                    Chat.toggleTextMode(eMsg);
+                  }));
+              }
+              if(eMsg.dataset.xfrom){
+                /* Add a link to the /timeline filtered on this user. */
+                const timelineLink = D.attr(
+                  D.a(F.repoUrl('timeline',{
+                    u: eMsg.dataset.xfrom,
+                    y: 'a'
+                  }), "User's Timeline"),
+                  'target', '_blank'
+                );
+                D.append(toolbar2, timelineLink);
+                if(Chat.filterState.activeUser &&
+                   Chat.filterState.match(eMsg.dataset.xfrom)){
+                  /* Add a button to clear user filter and jump to
+                     this message in its original context. */
+                  D.append(
+                    this.e,
+                    D.append(
+                      D.addClass(D.div(), 'toolbar'),
+                      D.button(
+                        "Message in context",
+                        function(){
+                          self.hide();
+                          Chat.setUserFilter(false);
+                          eMsg.scrollIntoView(false);
+                          Chat.animate(
+                            eMsg.firstElementChild, 'anim-flip-h'
+                            //eMsg.firstElementChild, 'anim-flip-v'
+                            //eMsg.childNodes, 'anim-rotate-360'
+                            //eMsg.childNodes, 'anim-flip-v'
+                            //eMsg, 'anim-flip-v'
+                          );
+                        })
+                    )
+                  );
+                }/*jump-to button*/
+              }
+              const btnZoom = D.button("Zoom");
+              D.append(toolbar2, btnZoom);
+              btnZoom.addEventListener('click', function(){
+                Chat.zoomMessage(eMsg);
+              });
+              const tab = eMsg.querySelector('.message-widget-tab');
+              D.append(tab, this.e);
+              D.removeClass(this.e, 'hidden');
+              Chat.animate(this.e, 'anim-fade-in-fast');
+            }/*refresh()*/,
+            hide: function(){
+              delete this.$eMsg;
+              D.addClass(this.e, 'hidden');
+              D.clearElement(this.e);
+            },
+            show: function(tgtMsg){
+              if(tgtMsg === this.$eMsg){
+                this.hide();
+                return;
+              }
+              this.$eMsg = tgtMsg;
+              this.refresh();
+            }
+          }/*f.popup*/;
+        }/*end static init*/
+        const theMsg = findMessageWidgetParent(ev.target);
+        if(theMsg) f.popup.show(theMsg);
+      }/*_handleLegendClicked()*/
+    };
+    return ctor;
+  })()/*MessageWidget*/;
+
+  /**
+     A widget for loading more messages (context) around a /chat-query
+     result message.
+  */
+  Chat.SearchCtxLoader = (function(){
+    const nMsgContext = 5;
+    const zUpArrow = '\u25B2';
+    const zDownArrow = '\u25BC';
+    const ctor = function(o){
+
+      /* iFirstInTable:
+      **   msgid of first row in chatfts table.
+      **
+      ** iLastInTable:
+      **   msgid of last row in chatfts table.
+      **
+      ** iPrevId:
+      **   msgid of message immediately above this spacer. Or 0 if this
+      **   spacer is above all results.
+      **
+      ** iNextId:
+      **   msgid of message immediately below this spacer. Or 0 if this
+      **   spacer is below all results.
+      **
+      ** bIgnoreClick:
+      **   ignore any clicks if this is true. This is used to ensure there
+      **   is only ever one request belonging to this widget outstanding
+      **   at any time.
+      */
+      this.o = {
+        iFirstInTable: o.first,
+        iLastInTable: o.last,
+        iPrevId: o.previd,
+        iNextId: o.nextid,
+        bIgnoreClick: false
+      };
+
+      this.e = {
+        body:    D.addClass(D.div(), 'spacer-widget'),
+        up:      D.addClass(
+          D.button(zDownArrow+' Load '+nMsgContext+' more '+zDownArrow),
+          'up'
+        ),
+        down:    D.addClass(
+          D.button(zUpArrow+' Load '+nMsgContext+' more '+zUpArrow),
+          'down'
+        ),
+        all:     D.addClass(D.button('Load More'), 'all')
+      };
+      D.append( this.e.body, this.e.up, this.e.down, this.e.all );
+      const ms = this;
+      this.e.up.addEventListener('click', ()=>ms.load_messages(false));
+      this.e.down.addEventListener('click', ()=>ms.load_messages(true));
+      this.e.all.addEventListener('click', ()=>ms.load_messages( (ms.o.iPrevId==0) ));
+      this.set_button_visibility();
+    };
+
+    ctor.prototype = {
+      set_button_visibility: function() {
+        if( !this.e ) return;
+        const o = this.o;
+
+        const iPrevId = (o.iPrevId!=0) ? o.iPrevId : o.iFirstInTable-1;
+        const iNextId = (o.iNextId!=0) ? o.iNextId : o.iLastInTable+1;
+        let nDiff = (iNextId - iPrevId) - 1;
+
+        for( const x of [this.e.up, this.e.down, this.e.all] ){
+          if( x ) D.addClass(x, 'hidden');
+        }
+        let nVisible = 0;
+        if( nDiff>0 ){
+          if( nDiff>nMsgContext && (o.iPrevId==0 || o.iNextId==0) ){
+            nDiff = nMsgContext;
+          }
+
+          if( nDiff<=nMsgContext && o.iPrevId!=0 && o.iNextId!=0 ){
+            D.removeClass(this.e.all, 'hidden');
+            ++nVisible;
+            this.e.all.innerText = (
+              zUpArrow + " Load " + nDiff + " more " + zDownArrow
+            );
+          }else{
+            if( o.iPrevId!=0 ){
+              ++nVisible;
+              D.removeClass(this.e.up, 'hidden');
+            }else if( this.e.up ){
+              if( this.e.up.parentNode ) D.remove(this.e.up);
+              delete this.e.up;
+            }
+            if( o.iNextId!=0 ){
+              ++nVisible;
+              D.removeClass(this.e.down, 'hidden');
+            }else if( this.e.down ){
+              if( this.e.down.parentNode ) D.remove( this.e.down );
+              delete this.e.down;
+            }
+          }
+        }
+        if( !nVisible ){
+          /* The DOM elements can now be disposed of. */
+          for( const x of [this.e.up, this.e.down, this.e.all, this.e.body] ){
+            if( x?.parentNode ) D.remove(x);
+          }
+          delete this.e;
+        }
+      },
+
+      load_messages: function(bDown) {
+        if( this.bIgnoreClick ) return;
+
+        var iFirst = 0;           /* msgid of first message to fetch */
+        var nFetch = 0;           /* Number of messages to fetch */
+        var iEof = 0;             /* last msgid in spacers range, plus 1 */
+
+        const e = this.e, o = this.o;
+        this.bIgnoreClick = true;
+
+        /* Figure out the required range of messages. */
+        if( bDown ){
+          iFirst = this.o.iNextId - nMsgContext;
+          if( iFirst<this.o.iFirstInTable ){
+            iFirst = this.o.iFirstInTable;
+          }
+        }else{
+          iFirst = this.o.iPrevId+1;
+        }
+        nFetch = nMsgContext;
+        iEof = (this.o.iNextId > 0) ? this.o.iNextId : this.o.iLastInTable+1;
+        if( iFirst+nFetch>iEof ){
+          nFetch = iEof - iFirst;
+        }
+        const ms = this;
+        F.fetch("chat-query",{
+          urlParams:{
+            q: '',
+            n: nFetch,
+            i: iFirst
+          },
+          responseType: "json",
+          onload:function(jx){
+            reportConnectionOkay('chat-query');
+            if( bDown ) jx.msgs.reverse();
+            jx.msgs.forEach((m) => {
+              m.isSearchResult = true;
+              var mw = new Chat.MessageWidget(m);
+              if( bDown ){
+                /* Inject the message below this object's body, or
+                   append it to Chat.e.searchContent if this element
+                   is the final one in its parent (Chat.e.searchContent). */
+                const eAnchor = e.body.nextElementSibling;
+                if( eAnchor ) Chat.e.searchContent.insertBefore(mw.e.body, eAnchor);
+                else D.append(Chat.e.searchContent, mw.e.body);
+              }else{
+                Chat.e.searchContent.insertBefore(mw.e.body, e.body);
+              }
+            });
+            if( bDown ){
+              o.iNextId -= jx.msgs.length;
+            }else{
+              o.iPrevId += jx.msgs.length;
+            }
+            ms.set_button_visibility();
+            ms.bIgnoreClick = false;
+          }
+        });
+      }
+    };
+
+    return ctor;
+  })() /*SearchCtxLoader*/;
+
+  const BlobXferState = (function(){
+    /* State for paste and drag/drop */
+    const bxs = {
+      dropDetails: document.querySelector('#chat-drop-details'),
+      blob: undefined,
+      clear: function(){
+        this.blob = undefined;
+        D.clearElement(this.dropDetails);
+        Chat.e.inputFile.value = "";
+      }
+    };
+    /** Updates the paste/drop zone with details of the pasted/dropped
+        data. The argument must be a Blob or Blob-like object (File) or
+        it can be falsy to reset/clear that state.*/
+    const updateDropZoneContent = bxs.updateDropZoneContent = function(blob){
+      //console.debug("updateDropZoneContent()",blob);
+      const dd = bxs.dropDetails;
+      bxs.blob = blob;
+      D.clearElement(dd);
+      if(!blob){
+        Chat.e.inputFile.value = '';
+        return;
+      }
+      D.append(dd, "Attached: ", blob.name,
+               D.br(), "Size: ",blob.size);
+      const btn = D.button("Cancel");
+      D.append(dd, D.br(), btn);
+      btn.addEventListener('click', ()=>updateDropZoneContent(), false);
+      if(blob.type && (blob.type.startsWith("image/") || blob.type==='BITMAP')){
+        const img = D.img();
+        D.append(dd, D.br(), img);
+        const reader = new FileReader();
+        reader.onload = (e)=>img.setAttribute('src', e.target.result);
+        reader.readAsDataURL(blob);
+      }
+    };
+    Chat.e.inputFile.addEventListener('change', function(ev){
+      updateDropZoneContent(this?.files[0])
+    });
+    /* Handle image paste from clipboard. TODO: figure out how we can
+       paste non-image binary data as if it had been selected via the
+       file selection element. */
+    const pasteListener = function(event){
+      const items = event.clipboardData.items,
+            item = items[0];
+      //console.debug("paste event",event.target,item,event);
+      //console.debug("paste event item",item);
+      if(item && item.type && ('file'===item.kind || 'BITMAP'===item.type)){
+        updateDropZoneContent(false/*clear prev state*/);
+        updateDropZoneContent(item.getAsFile());
+        event.stopPropagation();
+        event.preventDefault(true);
+        return false;
+      }
+      /* else continue propagating */
+    };
+    document.addEventListener('paste', pasteListener, true);
+    if(window.Selection && window.Range && !Chat.$browserHasPlaintextOnly){
+      /* Acrobatics to keep *some* installations of Firefox
+         from pasting formatting into contenteditable fields.
+         This also works on Chrome, but chrome has the
+         contenteditable=plaintext-only property which does this
+         for us. */
+      Chat.e.inputX.addEventListener(
+        'paste',
+        function(ev){
+          if (ev.clipboardData && ev.clipboardData.getData) {
+            const pastedText = ev.clipboardData.getData('text/plain');
+            const selection = window.getSelection();
+            if (!selection.rangeCount) return false;
+            selection.deleteFromDocument(/*remove selected content*/);
+            selection.getRangeAt(0).insertNode(document.createTextNode(pastedText));
+            selection.collapseToEnd(/*deselect pasted text and set cursor at the end*/);
+            ev.preventDefault();
+            return false;
+          }
+        }, false);
+    }
+    const noDragDropEvents = function(ev){
+      /* contenteditable tries to do its own thing with dropped data,
+         which is not compatible with how we use it, so... */
+      ev.dataTransfer.effectAllowed = 'none';
+      ev.dataTransfer.dropEffect = 'none';
+      ev.preventDefault();
+      ev.stopPropagation();
+      return false;
+    };
+    ['drop','dragenter','dragleave','dragend'].forEach(
+      (k)=>Chat.e.inputX.addEventListener(k, noDragDropEvents, false)
+    );
+    return bxs;
+  })()/*drag/drop/paste*/;
+
+  const localTime8601 = function(d){
+    return [
+      d.getYear()+1900, '-', pad2(d.getMonth()+1), '-', pad2(d.getDate()),
+      'T', pad2(d.getHours()),':', pad2(d.getMinutes()),':',pad2(d.getSeconds())
+    ].join('');
+  };
+
+  /**
+     Called by Chat.submitMessage() when message sending failed. Injects a fake message
+     containing the content and attachment of the failed message and gives the user buttons
+     to discard it or edit and retry.
+   */
+  const recoverFailedMessage = function(state){
+    const w = D.addClass(D.div(), 'failed-message');
+    D.append(w, D.append(
+      D.span(),"This message was not successfully sent to the server:"
+    ));
+    if(state.msg){
+      const ta = D.textarea();
+      ta.value = state.msg;
+      ta.setAttribute('readonly','true');
+      D.append(w,ta);
+    }
+    if(state.blob){
+      D.append(w,D.append(D.span(),"Attachment: ",(state.blob.name||"unnamed")));
+      //console.debug("blob = ",state.blob);
+    }
+    const buttons = D.addClass(D.div(), 'buttons');
+    D.append(w, buttons);
+    D.append(buttons, D.button("Discard message?", function(){
+      const theMsg = findMessageWidgetParent(w);
+      if(theMsg) Chat.deleteMessageElem(theMsg);
+    }));
+    D.append(buttons, D.button("Edit message and try again?", function(){
+      if(state.msg) Chat.inputValue(state.msg);
+      if(state.blob) BlobXferState.updateDropZoneContent(state.blob);
+      const theMsg = findMessageWidgetParent(w);
+      if(theMsg) Chat.deleteMessageElem(theMsg);
+    }));
+    D.addClass(Chat.reportErrorAsMessage(w).e.body, "resend-message");
+  };
+
+  /* Assume the connection has been established, reset the
+     Chat.timer.tidClearPollErr, and (if showMsg and
+     !!Chat.e.eMsgPollError) alert the user that the outage appears to
+     be over. Also schedule Chat.poll() to run in the very near
+     future. */
+  const reportConnectionOkay = function(dbgContext, showMsg = true){
+    if(Chat.beVerbose){
+      console.warn('reportConnectionOkay', dbgContext,
+                   'Chat.e.pollErrorMarker classes =',
+                   Chat.e.pollErrorMarker.classList,
+                   'Chat.timer.tidClearPollErr =',Chat.timer.tidClearPollErr,
+                   'Chat.timer =',Chat.timer);
+    }
+    if( Chat.timer.errCount ){
+      D.removeClass(Chat.e.pollErrorMarker, 'connection-error');
+      Chat.timer.errCount = 0;
+    }
+    Chat.timer.cancelReconnectCheckTimer().startPendingPollTimer();
+    if( Chat.e.eMsgPollError ) {
+      const oldErrMsg = Chat.e.eMsgPollError;
+      Chat.e.eMsgPollError = undefined;
+      if( showMsg ){
+        if(Chat.beVerbose){
+          console.log("Poller Connection restored.");
+        }
+        const m = Chat.reportReconnection("Poller connection restored.");
+        if( oldErrMsg ){
+          D.remove(oldErrMsg.e?.body.querySelector('button.retry-now'));
+        }
+        m.e.body.dataset.alsoRemove = oldErrMsg?.e?.body?.dataset?.msgid;
+        D.addClass(m.e.body,'poller-connection');
+      }
+    }
+  };
+
+  /**
+     Submits the contents of the message input field (if not empty)
+     and/or the file attachment field to the server. If both are
+     empty, this is a no-op.
+
+     If the current view is the history search, this instead sends the
+     input text to that widget.
+  */
+  Chat.submitMessage = function f(){
+    if(!f.spaces){
+      f.spaces = /\s+$/;
+      f.markdownContinuation = /\\\s+$/;
+      f.spaces2 = /\s{3,}$/;
+    }
+    switch( this.e.currentView ){
+      case this.e.viewSearch: this.submitSearch();
+        return;
+      default: break;
+    }
+    this.setCurrentView(this.e.viewMessages);
+    const fd = new FormData();
+    const fallback = {msg: this.inputValue()};
+    var msg = fallback.msg;
+    if(msg && (msg.indexOf('\n')>0 || f.spaces.test(msg))){
+      /* Cosmetic: trim most whitespace from the ends of lines to try to
+         keep copy/paste from terminals, especially wide ones, from
+         forcing a horizontal scrollbar on all clients. This breaks
+         markdown's use of blackslash-space-space for paragraph
+         continuation, but *not* doing this affects all clients every
+         time someone pastes in console copy/paste from an affected
+         platform. We seem to have narrowed to the console pasting
+         problem to users of tmux together with certain apps (vim, at
+         a minimum). Most consoles don't behave that way.
+
+         We retain two trailing spaces so that markdown conventions
+         which use end-of-line spacing aren't broken by this
+         stripping.
+      */
+      const xmsg = msg.split('\n');
+      xmsg.forEach(function(line,ndx){
+        if(!f.markdownContinuation.test(line)){
+          xmsg[ndx] = line.replace(f.spaces2, '  ');
+        }
+      });
+      msg = xmsg.join('\n');
+    }
+    if(msg) fd.set('msg',msg);
+    const file = BlobXferState.blob || this.e.inputFile.files[0];
+    if(file) fd.set("file", file);
+    if( !msg && !file ) return;
+    fallback.blob = file;
+    const self = this;
+    fd.set("lmtime", localTime8601(new Date()));
+    F.fetch("chat-send",{
+      payload: fd,
+      responseType: 'text',
+      onerror:function(err){
+        self.reportErrorAsMessage(err);
+        recoverFailedMessage(fallback);
+      },
+      onload:function(txt){
+        reportConnectionOkay('chat-send');
+        if(!txt) return/*success response*/;
+        try{
+          const json = JSON.parse(txt);
+          self.newContent({msgs:[json]});
+        }catch(e){
+          self.reportError(e);
+        }
+        recoverFailedMessage(fallback);
+      }
+    });
+    BlobXferState.clear();
+    Chat.inputValue("").inputFocus();
+  };
+
+  const inputWidgetKeydown = function f(ev){
+    if(!f.$toggleCtrl){
+      f.$toggleCtrl = function(currentMode){
+        currentMode = !currentMode;
+        Chat.settings.set('edit-ctrl-send', currentMode);
+      };
+      f.$toggleCompact = function(currentMode){
+        currentMode = !currentMode;
+        Chat.settings.set('edit-compact-mode', currentMode);
+      };
+    }
+    if(13 !== ev.keyCode) return;
+    const text = Chat.inputValue().trim();
+    const ctrlMode = Chat.settings.getBool('edit-ctrl-send', false);
+    //console.debug("Enter key event:", ctrlMode, ev.ctrlKey, ev.shiftKey, ev);
+    if(ev.shiftKey){
+      ev.preventDefault();
+      ev.stopPropagation();
+      /* Shift-enter will run preview mode UNLESS the input field is empty
+         AND (preview or search mode) is active, in which cases it will
+         switch back to message view. */
+      if(!text &&
+         (Chat.e.currentView===Chat.e.viewPreview
+          | Chat.e.currentView===Chat.e.viewSearch)){
+        Chat.setCurrentView(Chat.e.viewMessages);
+      }else if(!text){
+        const compactMode = Chat.settings.getBool('edit-compact-mode', false);
+        f.$toggleCompact(compactMode);
+      }else if(Chat.settings.getBool('edit-shift-enter-preview', true)){
+        Chat.e.btnPreview.click();
+      }
+      return false;
+    }
+    if(ev.ctrlKey && !text && !BlobXferState.blob){
+      /* Ctrl-enter on empty input field(s) toggles Enter/Ctrl-enter mode */
+      ev.preventDefault();
+      ev.stopPropagation();
+      f.$toggleCtrl(ctrlMode);
+      return false;
+    }
+    if(!ctrlMode && ev.ctrlKey && text){
+      //console.debug("!ctrlMode && ev.ctrlKey && text.");
+      /* Ctrl-enter in Enter-sends mode SHOULD, with this logic add a
+         newline, but that is not happening, for unknown reasons
+         (possibly related to this element being a contenteditable DIV
+         instead of a textarea). Forcibly appending a newline do the
+         input area does not work, also for unknown reasons, and would
+         only be suitable when we're at the end of the input.
+
+         Strangely, this approach DOES work for shift-enter, but we
+         need shift-enter as a hotkey for preview mode.
+      */
+      //return;
+      // return here "should" cause newline to be added, but that doesn't work
+    }
+    if((!ctrlMode && !ev.ctrlKey) || (ev.ctrlKey/* && ctrlMode*/)){
+      /* Ship it! */
+      ev.preventDefault();
+      ev.stopPropagation();
+      Chat.submitMessage();
+      return false;
+    }
+  };
+  Chat.e.inputFields.forEach(
+    (e)=>e.addEventListener('keydown', inputWidgetKeydown, false)
+  );
+  Chat.e.btnSubmit.addEventListener('click',(e)=>{
+    e.preventDefault();
+    Chat.submitMessage();
+    return false;
+  });
+  Chat.e.btnAttach.addEventListener(
+    'click', ()=>Chat.e.inputFile.click(), false);
+
+  (function(){/*Set up #chat-button-settings and related bits */
+    if(window.innerWidth<window.innerHeight){
+      // Must be set up before config view is...
+      /* Alignment of 'my' messages: right alignment is conventional
+         for mobile chat apps but can be difficult to read in wide
+         windows (desktop/tablet landscape mode), so we default to a
+         layout based on the apparent "orientation" of the window:
+         tall vs wide. Can be toggled via settings. */
+      document.body.classList.add('my-messages-right');
+    }
+    const settingsButton = document.querySelector('#chat-button-settings');
+    const optionsMenu = E1('#chat-config-options');
+    const eToggleView = function(ev){
+      ev.preventDefault();
+      ev.stopPropagation();
+      Chat.setCurrentView(Chat.e.currentView===Chat.e.viewConfig
+                          ? Chat.e.viewMessages : Chat.e.viewConfig);
+      return false;
+    };
+    D.attr(settingsButton, 'role', 'button').addEventListener('click', eToggleView, false);
+    Chat.e.viewConfig.querySelector('button.action-close').addEventListener('click', eToggleView, false);
+
+    /** Internal acrobatics to allow certain settings toggles to access
+        related toggles. */
+    const namedOptions = {
+      activeUsers:{
+        label: "Show active users list",
+        hint: "List users who have messages in the currently-loaded chat history.",
+        boolValue: 'active-user-list'
+      }
+    };
+    if(1){
+      /* Per user request, toggle the list of users on and off if the
+         legend element is tapped. */
+      const optAu = namedOptions.activeUsers;
+      optAu.theLegend = Chat.e.activeUserListWrapper.firstElementChild/*LEGEND*/;
+      optAu.theList = optAu.theLegend.nextElementSibling/*user list container*/;
+      optAu.theLegend.addEventListener('click',function(){
+        D.toggleClass(Chat.e.activeUserListWrapper, 'collapsed');
+        if(!Chat.e.activeUserListWrapper.classList.contains('collapsed')){
+          Chat.animate(optAu.theList,'anim-flip-v');
+        }
+      }, false);
+    }/*namedOptions.activeUsers additional setup*/
+    /* Settings menu entries... they are presented in the order listed
+       here, so the most frequently-needed ones "should" (arguably) be
+       closer to the start of this list. */
+    /**
+       Settings ops structure:
+
+       label: string for the UI
+
+       boolValue: string (name of Chat.settings setting) or a function
+       which returns true or false. If it is a string, it gets
+       replaced by a function which returns
+       Chat.settings.getBool(thatString) and the string gets assigned
+       to the persistentSetting property of this object.
+
+       select: SELECT element (instead of boolValue)
+
+       callback: optional handler to call after setting is modified.
+       Its "this" is the options object. If this object has a
+       boolValue string or a persistentSetting property, the argument
+       passed to the callback is a settings object in the form {key:K,
+       value:V}. If this object does not have boolValue string or
+       persistentSetting then the callback is passed an event object
+       in response to the config option's UI widget being activated,
+       normally a 'change' event.
+
+       children: [array of settings objects]. These get listed under
+       this element and indented slightly for visual grouping. Only
+       one level of indention is supported.
+
+       Elements which only have a label and maybe a hint and
+       children can be used as headings.
+
+       If a setting has a boolValue set, that gets rendered as a
+       checkbox which toggles the given persistent setting (if
+       boolValue is a string) AND listens for changes to that setting
+       fired via Chat.settings.set() so that the checkbox can stay in
+       sync with external changes to that setting. Various Chat UI
+       elements stay in sync with the config UI via those settings
+       events. The checkbox element gets added to the options object
+       so that the callback() can reference it via this.checkbox.
+    */
+    const settingsOps = [{
+      label: "Chat Configuration Options",
+      hint: F.storage.isTransient()
+        ? "Local store is unavailable. These settings are transient."
+        : ["Most of these settings are persistent via ",
+           F.storage.storageImplName(), ": ",
+           F.storage.storageHelpDescription()].join('')
+    },{
+      label: "Editing Options...",
+      hint: ["These options are all recommended but some misinteract",
+             "with specific browsers or software keyboards so they",
+             "are not enabled by default."
+            ].join(' '),
+      children:[{
+        label: "Chat-only mode",
+        hint: "Toggle the page between normal fossil view and chat-only view.",
+        boolValue: 'chat-only-mode'
+      },{
+        label: "Ctrl-enter to Send",
+        hint: [
+          "When on, only Ctrl-Enter will send messages and Enter adds ",
+          "blank lines. When off, both Enter and Ctrl-Enter send. ",
+          "When the input field has focus and is empty ",
+          "then Ctrl-Enter toggles this setting."
+        ].join(''),
+        boolValue: 'edit-ctrl-send'
+      },{
+        label: "Compact mode",
+        hint: [
+          "Toggle between a space-saving or more spacious writing area. ",
+          "When the input field has focus and is empty ",
+          "then Shift-Enter may (depending on the current view) toggle this setting."
+        ].join(''),
+        boolValue: 'edit-compact-mode'
+      },{
+        label: "Use 'contenteditable' editing mode",
+        boolValue: 'edit-widget-x',
+        hint: [
+          "When enabled, chat input uses a so-called 'contenteditable' ",
+          "field. Though generally more comfortable and modern than ",
+          "plain-text input fields, browser-specific quirks and bugs ",
+          "may lead to frustration. Ideal for mobile devices."
+        ].join('')
+      },{
+        label: "Shift-enter to preview",
+        hint: ["Use shift-enter to preview being-edited messages. ",
+               "This is normally desirable but some software-mode ",
+               "keyboards misinteract with this, in which cases it can be ",
+               "disabled."],
+        boolValue: 'edit-shift-enter-preview'
+      }]
+    },{
+      label: "Appearance Options...",
+      children:[{
+        label: "Left-align my posts",
+        hint: "Default alignment of your own messages is selected "
+          + "based on the window width/height ratio.",
+        boolValue: ()=>!document.body.classList.contains('my-messages-right'),
+        callback: function f(){
+          document.body.classList[
+            this.checkbox.checked ? 'remove' : 'add'
+          ]('my-messages-right');
+        }
+      },{
+        label: "Monospace message font",
+        hint: "Use monospace font for message and input text.",
+        boolValue: 'monospace-messages',
+        callback: function(setting){
+          document.body.classList[
+            setting.value ? 'add' : 'remove'
+          ]('monospace-messages');
+        }
+      },{
+        label: "Show images inline",
+        hint: "When enabled, attached images are shown inline, "+
+          "else they appear as a download link.",
+        boolValue: 'images-inline'
+      }]
+    }];
+
+    /** Set up selection list of notification sounds. */
+    if(1){
+      const selectSound = D.select();
+      D.option(selectSound, "", "(no audio)");
+      const firstSoundIndex = selectSound.options.length;
+      F.config.chat.alerts.forEach((a)=>D.option(selectSound, a));
+      if(true===Chat.settings.getBool('audible-alert')){
+        /* This setting used to be a plain bool. If we encounter
+           such a setting, take the first sound in the list. */
+        selectSound.selectedIndex = firstSoundIndex;
+      }else{
+        selectSound.value = Chat.settings.get('audible-alert','<none>');
+        if(selectSound.selectedIndex<0){
+          /* Missing file - removed after this setting was
+            applied. Fall back to the first sound in the list. */
+          selectSound.selectedIndex = firstSoundIndex;
+        }
+      }
+      Chat.setNewMessageSound(selectSound.value);
+      settingsOps.push({
+        label: "Sound Options...",
+        hint: "How to enable audio playback is browser-specific!",
+        children:[{
+          hint: "Audio alert",
+          select: selectSound,
+          callback: function(ev){
+            const v = ev.target.value;
+            Chat.setNewMessageSound(v);
+            F.toast.message("Audio notifications "+(v ? "enabled" : "disabled")+".");
+            if(v) setTimeout(()=>Chat.playNewMessageSound(), 0);
+          }
+        },{
+          label: "Notify only once when away",
+          hint: "Notify only for the first message received after chat is hidden from view.",
+          boolValue: 'beep-once'
+        },{
+          label: "Play notification for your own messages",
+          hint: "When enabled, the audio notification will be played for all messages, "+
+            "including your own. When disabled only messages from other users "+
+            "will trigger a notification.",
+          boolValue: 'alert-own-messages'
+        }]
+      });
+    }/*audio notification config*/
+    settingsOps.push({
+      label: "Active User List...",
+      hint: [
+        "/chat cannot track active connections, but it can tell ",
+        "you who has posted recently..."].join(''),
+      children:[
+        namedOptions.activeUsers,{
+          label: "Timestamps in active users list",
+          indent: true,
+          hint: "Show most recent message timestamps in the active user list.",
+          boolValue: 'active-user-list-timestamps'
+        }
+      ]
+    });
+    /**
+       Build UI for config options...
+    */
+    settingsOps.forEach(function f(op,indentOrIndex){
+      const menuEntry = D.addClass(D.div(), 'menu-entry');
+      if(true===indentOrIndex) D.addClass(menuEntry, 'child');
+      const label = op.label
+            ? D.append(D.label(),op.label) : undefined;
+      const labelWrapper = D.addClass(D.div(), 'label-wrapper');
+      var hint;
+      if(op.hint){
+        hint = D.append(D.addClass(D.label(),'hint'),op.hint);
+      }
+      if(op.hasOwnProperty('select')){
+        const col0 = D.addClass(D.span(/*empty, but for spacing*/),
+                                'toggle-wrapper');
+        D.append(menuEntry, labelWrapper, col0);
+        D.append(labelWrapper, op.select);
+        if(hint) D.append(labelWrapper, hint);
+        if(label) D.append(label);
+        if(op.callback){
+          op.select.addEventListener('change', (ev)=>op.callback(ev), false);
+        }
+      }else if(op.hasOwnProperty('boolValue')){
+        if(undefined === f.$id) f.$id = 0;
+        ++f.$id;
+        if('string' ===typeof op.boolValue){
+          const key = op.boolValue;
+          op.boolValue = ()=>Chat.settings.getBool(key);
+          op.persistentSetting = key;
+        }
+        const check = op.checkbox
+              = D.attr(D.checkbox(1, op.boolValue()),
+                       'aria-label', op.label);
+        const id = 'cfgopt'+f.$id;
+        const col0 = D.addClass(D.span(), 'toggle-wrapper');
+        check.checked = op.boolValue();
+        op.checkbox = check;
+        D.attr(check, 'id', id);
+        if(hint) D.attr(hint, 'for', id);
+        D.append(menuEntry, labelWrapper, col0);
+        D.append(col0, check);
+        if(label){
+          D.attr(label, 'for', id);
+          D.append(labelWrapper, label);
+        }
+        if(hint) D.append(labelWrapper, hint);
+      }else{
+        if(op.callback){
+          menuEntry.addEventListener('click', (ev)=>op.callback(ev));
+        }
+        D.append(menuEntry, labelWrapper);
+        if(label) D.append(labelWrapper, label);
+        if(hint) D.append(labelWrapper, hint);
+      }
+      D.append(optionsMenu, menuEntry);
+      if(op.persistentSetting){
+        Chat.settings.addListener(
+          op.persistentSetting,
+          function(setting){
+            if(op.checkbox) op.checkbox.checked = !!setting.value;
+            else if(op.select) op.select.value = setting.value;
+            if(op.callback) op.callback(setting);
+          }
+        );
+        if(op.checkbox){
+          op.checkbox.addEventListener(
+            'change', function(){
+              Chat.settings.set(op.persistentSetting, op.checkbox.checked)
+            }, false);
+        }
+      }else if(op.callback && op.checkbox){
+        op.checkbox.addEventListener('change', (ev)=>op.callback(ev), false);
+      }
+      if(op.children){
+        D.addClass(menuEntry, 'parent');
+        op.children.forEach((x)=>f(x,true));
+      }
+    });
+  })()/*#chat-button-settings setup*/;
+
+  (function(){
+    /* Install default settings... must come after
+       chat-button-settings setup so that the listeners which that
+       installs are notified via the properties getting initialized
+       here. */
+    Chat.settings.addListener('monospace-messages',function(s){
+      document.body.classList[s.value ? 'add' : 'remove']('monospace-messages');
+    })
+    Chat.settings.addListener('active-user-list',function(s){
+      Chat.showActiveUserList(s.value);
+    });
+    Chat.settings.addListener('active-user-list-timestamps',function(s){
+      Chat.showActiveUserTimestamps(s.value);
+    });
+    Chat.settings.addListener('chat-only-mode',function(s){
+      Chat.chatOnlyMode(s.value);
+    });
+    Chat.settings.addListener('edit-widget-x',function(s){
+      let eSelected;
+      if(s.value){
+        if(Chat.e.inputX===Chat.inputElement()) return;
+        eSelected = Chat.e.inputX;
+      }else{
+        eSelected = Chat.settings.getBool('edit-compact-mode')
+          ? Chat.e.input1 : Chat.e.inputM;
+      }
+      const v = Chat.inputValue();
+      Chat.inputValue('');
+      Chat.e.inputFields.forEach(function(e,ndx){
+        if(eSelected===e){
+          Chat.e.inputFields.$currentIndex = ndx;
+          D.removeClass(e, 'hidden');
+        }
+        else D.addClass(e,'hidden');
+      });
+      Chat.inputValue(v);
+      eSelected.focus();
+    });
+    Chat.settings.addListener('edit-compact-mode',function(s){
+      if(Chat.e.inputX!==Chat.inputElement()){
+        /* Text field/textarea mode: swap them if needed.
+           Compact mode of inputX is toggled via CSS. */
+        const a = s.value
+              ? [Chat.e.input1, Chat.e.inputM, 0]
+              : [Chat.e.inputM, Chat.e.input1, 1];
+        const v = Chat.inputValue();
+        Chat.inputValue('');
+        Chat.e.inputFields.$currentIndex = a[2];
+        Chat.inputValue(v);
+        D.removeClass(a[0], 'hidden');
+        D.addClass(a[1], 'hidden');
+      }
+      Chat.e.inputLineWrapper.classList[
+        s.value ? 'add' : 'remove'
+      ]('compact');
+      Chat.e.inputFields[Chat.e.inputFields.$currentIndex].focus();
+    });
+    Chat.settings.addListener('edit-ctrl-send',function(s){
+      const label = (s.value ? "Ctrl-" : "")+"Enter submits message.";
+      Chat.e.inputFields.forEach((e)=>{
+        const v = e.dataset.placeholder0 + " " +label;
+        if(e.isContentEditable) e.dataset.placeholder = v;
+        else D.attr(e,'placeholder',v);
+      });
+      Chat.e.btnSubmit.title = label;
+    });
+    const valueKludges = {
+      /* Convert certain string-format values to other types... */
+      "false": false,
+      "true": true
+    };
+    Object.keys(Chat.settings.defaults).forEach(function(k){
+      var v = Chat.settings.get(k,Chat);
+      if(Chat===v) v = Chat.settings.defaults[k];
+      if(valueKludges.hasOwnProperty(v)) v = valueKludges[v];
+      Chat.settings.set(k,v)
+      /* fires event listeners so that the Config area checkboxes
+         get in sync */;
+    });
+  })();
+
+  (function(){/*set up message preview*/
+    const btnPreview = Chat.e.btnPreview;
+    Chat.setPreviewText = function(t){
+      this.setCurrentView(this.e.viewPreview);
+      this.e.previewContent.innerHTML = t;
+      this.e.viewPreview.querySelectorAll('a').forEach(addAnchorTargetBlank);
+      this.inputFocus();
+    };
+    Chat.e.viewPreview.querySelector('button.action-close').
+      addEventListener('click', ()=>Chat.setCurrentView(Chat.e.viewMessages), false);
+    let previewPending = false;
+    const elemsToEnable = [btnPreview, Chat.e.btnSubmit, Chat.e.inputFields];
+    const submit = function(ev){
+      ev.preventDefault();
+      ev.stopPropagation();
+      if(previewPending) return false;
+      const txt = Chat.inputValue();
+      if(!txt){
+        Chat.setPreviewText('');
+        previewPending = false;
+        return false;
+      }
+      const fd = new FormData();
+      fd.append('content', txt);
+      fd.append('filename','chat.md'
+                /*filename needed for mimetype determination*/);
+      fd.append('render_mode',F.page.previewModes.wiki);
+      F.fetch('ajax/preview-text',{
+        payload: fd,
+        onload: function(html){
+          reportConnectionOkay('ajax/preview-text');
+          Chat.setPreviewText(html);
+          F.pikchr.addSrcView(Chat.e.viewPreview.querySelectorAll('svg.pikchr'));
+        },
+        onerror: function(e){
+          F.fetch.onerror(e);
+          Chat.setPreviewText("ERROR: "+(
+            e.message || 'Unknown error fetching preview!'
+          ));
+        },
+        beforesend: function(){
+          D.disable(elemsToEnable);
+          Chat.ajaxStart();
+          previewPending = true;
+          Chat.setPreviewText("Loading preview...");
+        },
+        aftersend:function(){
+          previewPending = false;
+          Chat.ajaxEnd();
+          D.enable(elemsToEnable);
+        }
+      });
+      return false;
+    };
+    btnPreview.addEventListener('click', submit, false);
+  })()/*message preview setup*/;
+
+  (function(){/*Set up #chat-search and related bits */
+    const btn = document.querySelector('#chat-button-search');
+    D.attr(btn, 'role', 'button').addEventListener('click', function(ev){
+      ev.preventDefault();
+      ev.stopPropagation();
+      const msg = Chat.inputValue();
+      if( Chat.e.currentView===Chat.e.viewSearch ){
+        if( msg ) Chat.submitSearch();
+        else Chat.setCurrentView(Chat.e.viewMessages);
+      }else{
+        Chat.setCurrentView(Chat.e.viewSearch);
+        if( msg ) Chat.submitSearch();
+      }
+      return false;
+    }, false);
+    Chat.e.viewSearch.querySelector('button.action-clear').addEventListener('click', function(ev){
+      ev.preventDefault();
+      ev.stopPropagation();
+      Chat.clearSearch(true);
+      Chat.setCurrentView(Chat.e.viewMessages);
+      return false;
+    }, false);
+    Chat.e.viewSearch.querySelector('button.action-close').addEventListener('click', function(ev){
+      ev.preventDefault();
+      ev.stopPropagation();
+      Chat.setCurrentView(Chat.e.viewMessages);
+      return false;
+    }, false);
+  })()/*search view setup*/;
+
+  (function(){/*Set up the zoom view */
+    Chat.e.viewZoom.querySelector('button.action-close').addEventListener('click', function(ev){
+      ev.preventDefault();
+      ev.stopPropagation();
+      Chat.zoomMessage(null);
+      return false;
+    }, false);
+  })()/*zoom view setup*/;
+
+  /** Callback for poll() to inject new content into the page.  jx ==
+      the response from /chat-poll. If atEnd is true, the message is
+      appended to the end of the chat list (for loading older
+      messages), else the beginning (the default). */
+  const newcontent = function f(jx,atEnd){
+    if(!f.processPost){
+      /** Processes chat message m, placing it either the start (if atEnd
+          is falsy) or end (if atEnd is truthy) of the chat history. atEnd
+          should only be true when loading older messages. */
+      f.processPost = function(m,atEnd){
+        ++Chat.totalMessageCount;
+        if( m.msgid>Chat.mxMsg ) Chat.mxMsg = m.msgid;
+        if( !Chat.mnMsg || m.msgid<Chat.mnMsg) Chat.mnMsg = m.msgid;
+        if(m.xfrom && m.mtime){
+          const d = new Date(m.mtime);
+          const uls = Chat.usersLastSeen[m.xfrom];
+          if(!uls || uls<d){
+            d.$uColor = m.uclr;
+            Chat.usersLastSeen[m.xfrom] = d;
+          }
+        }
+        if( m.mdel ){
+          /* A record deletion notice. */
+          Chat.deleteMessageElem(m.mdel);
+          return;
+        }
+        if(!Chat._isBatchLoading
+           && (Chat.me!==m.xfrom
+               || Chat.settings.getBool('alert-own-messages'))){
+          Chat.playNewMessageSound();
+        }
+        const row = new Chat.MessageWidget(m);
+        Chat.injectMessageElem(row.e.body,atEnd);
+        if(m.isError){
+          Chat._gotServerError = m;
+        }
+      }/*processPost()*/;
+    }/*end static init*/
+    jx.msgs.forEach((m)=>f.processPost(m,atEnd));
+    Chat.updateActiveUserList();
+    if('visible'===document.visibilityState){
+      if(Chat.changesSincePageHidden){
+        Chat.changesSincePageHidden = 0;
+        Chat.e.pageTitle.innerText = Chat.pageTitleOrig;
+      }
+    }else{
+      Chat.changesSincePageHidden += jx.msgs.length;
+      if(jx.msgs.length){
+        Chat.e.pageTitle.innerText = '[*] '+Chat.pageTitleOrig;
+      }
+    }
+  }/*newcontent()*/;
+  Chat.newContent = newcontent;
+
+  (function(){
+    /** Add toolbar for loading older messages. We use a FIELDSET here
+        because a fieldset is the only parent element type which can
+        automatically enable/disable its children by
+        enabling/disabling the parent element. */
+    const loadLegend = D.legend("Load...");
+    const toolbar = Chat.e.loadOlderToolbar = D.attr(
+      D.fieldset(loadLegend), "id", "load-msg-toolbar"
+    );
+    Chat.disableDuringAjax.push(toolbar);
+    /* Loads the next n oldest messages, or all previous history if n is negative. */
+    const loadOldMessages = function(n){
+      Chat.e.viewMessages.classList.add('loading');
+      Chat._isBatchLoading = true;
+      const scrollHt = Chat.e.viewMessages.scrollHeight,
+            scrollTop = Chat.e.viewMessages.scrollTop;
+      F.fetch("chat-poll",{
+        urlParams:{
+          before: Chat.mnMsg,
+          n: n
+        },
+        responseType: 'json',
+        onerror:function(err){
+          Chat.reportErrorAsMessage(err);
+          Chat._isBatchLoading = false;
+        },
+        onload:function(x){
+          reportConnectionOkay('loadOldMessages()');
+          let gotMessages = x.msgs.length;
+          newcontent(x,true);
+          Chat._isBatchLoading = false;
+          Chat.updateActiveUserList();
+          if(Chat._gotServerError){
+            Chat._gotServerError = false;
+            return;
+          }
+          if(n<0/*we asked for all history*/
+             || 0===gotMessages/*we found no history*/
+             || (n>0 && gotMessages<n /*we got fewer history entries than requested*/)
+             || (n===0 && gotMessages<Chat.loadMessageCount
+                 /*we asked for default amount and got fewer than that.*/)){
+            /* We've loaded all history. Permanently disable the
+               history-load toolbar and keep it from being re-enabled
+               via the ajaxStart()/ajaxEnd() mechanism... */
+            const div = Chat.e.loadOlderToolbar.querySelector('div');
+            D.append(D.clearElement(div), "All history has been loaded.");
+            D.addClass(Chat.e.loadOlderToolbar, 'all-done');
+            const ndx = Chat.disableDuringAjax.indexOf(Chat.e.loadOlderToolbar);
+            if(ndx>=0) Chat.disableDuringAjax.splice(ndx,1);
+            Chat.e.loadOlderToolbar.disabled = true;
+          }
+          if(gotMessages > 0){
+            F.toast.message("Loaded "+gotMessages+" older messages.");
+            /* Return scroll position to where it was when the history load
+               was requested, per user request */
+            Chat.e.viewMessages.scrollTo(
+              0, Chat.e.viewMessages.scrollHeight - scrollHt + scrollTop
+            );
+          }
+        },
+        aftersend:function(){
+          Chat.e.viewMessages.classList.remove('loading');
+          Chat.ajaxEnd();
+        }
+      });
+    };
+    const wrapper = D.div(); /* browsers don't all properly handle >1 child in a fieldset */;
+    D.append(toolbar, wrapper);
+    var btn = D.button("Previous "+Chat.loadMessageCount+" messages");
+    D.append(wrapper, btn);
+    btn.addEventListener('click',()=>loadOldMessages(Chat.loadMessageCount));
+    btn = D.button("All previous messages");
+    D.append(wrapper, btn);
+    btn.addEventListener('click',()=>loadOldMessages(-1));
+    D.append(Chat.e.viewMessages, toolbar);
+    toolbar.disabled = true /*will be enabled when msg load finishes */;
+  })()/*end history loading widget setup*/;
+
+  /**
+     Clears the search result view. If addInstructions is true it adds
+     text to that view instructing the user to enter their query into
+     the message-entry widget (noting that that widget has text
+     implying that it's only for submitting a message, which isn't
+     exactly true when the search view is active).
+
+     Returns the DOM element which wraps all of the chat search
+     result elements.
+  */
+  Chat.clearSearch = function(addInstructions=false){
+    const e = D.clearElement( this.e.searchContent );
+    if(addInstructions){
+      D.append(e, "Enter search terms in the message field. "+
+               "Use #NNNNN to search for the message with ID NNNNN.");
+    }
+    return e;
+  };
+  Chat.clearSearch(true);
+  /**
+     Submits a history search using the main input field's current
+     text. It is assumed that Chat.e.viewSearch===Chat.e.currentView.
+  */
+  Chat.submitSearch = function(){
+    const term = this.inputValue(true);
+    const eMsgTgt = this.clearSearch(true);
+    if( !term ) return;
+    D.append( eMsgTgt, "Searching for ",term," ...");
+    const fd = new FormData();
+    fd.set('q', term);
+    F.fetch(
+      "chat-query", {
+        payload: fd,
+        responseType: 'json',
+        onerror:function(err){
+          Chat.setCurrentView(Chat.e.viewMessages);
+          Chat.reportErrorAsMessage(err);
+        },
+        onload:function(jx){
+          reportConnectionOkay('submitSearch()');
+          let previd = 0;
+          D.clearElement(eMsgTgt);
+          jx.msgs.forEach((m)=>{
+            m.isSearchResult = true;
+            const mw = new Chat.MessageWidget(m);
+            const spacer = new Chat.SearchCtxLoader({
+              first: jx.first,
+              last: jx.last,
+              previd: previd,
+              nextid: m.msgid
+            });
+            if( spacer.e ) D.append( eMsgTgt, spacer.e.body );
+            D.append( eMsgTgt, mw.e.body );
+            previd = m.msgid;
+          });
+          if( jx.msgs.length ){
+            const spacer = new Chat.SearchCtxLoader({
+              first: jx.first,
+              last: jx.last,
+              previd: previd,
+              nextid: 0
+            });
+            if( spacer.e ) D.append( eMsgTgt, spacer.e.body );
+          }else{
+            D.append( D.clearElement(eMsgTgt),
+                      'No search results found for: ',
+                      term );
+          }
+        }
+      }
+    );
+  }/*Chat.submitSearch()*/;
+
+  /*
+    To be called from F.fetch('chat-poll') beforesend() handler.  If
+    we're currently in delayed-retry mode and a connection is
+    started, try to reset the delay after N time waiting on that
+    connection. The fact that the connection is waiting to respond,
+    rather than outright failing, is a good hint that the outage is
+    over and we can reset the back-off timer.
+
+    Without this, recovery of a connection error won't be reported
+    until after the long-poll completes by either receiving new
+    messages or timing out. Once a long-poll is in progress, though,
+    we "know" that it's up and running again, so can update the UI and
+    connection timer to reflect that. That's the job this function
+    does.
+
+    Only one of these asynchronous checks will ever be active
+    concurrently and only if Chat.timer.isDelayed() is true. i.e. if
+    this timer is active or Chat.timer.isDelayed() is false, this is a
+    no-op.
+  */
+  const chatPollBeforeSend = function(){
+    //console.warn('chatPollBeforeSend outer', Chat.timer.tidClearPollErr, Chat.timer.currentDelay);
+    if( !Chat.timer.tidClearPollErr && Chat.timer.isDelayed() ){
+      Chat.timer.tidClearPollErr = setTimeout(()=>{
+        //console.warn('chatPollBeforeSend inner');
+        Chat.timer.tidClearPollErr = 0;
+        if( poll.running ){
+          /* This chat-poll F.fetch() is still underway, so let's
+             assume the connection is back up until/unless it times
+             out or breaks again. */
+          reportConnectionOkay('chatPollBeforeSend', true);
+        }
+      }, Chat.timer.$initialDelay * 4/*kinda arbitrary: not too long for UI wait and
+                                       not too short as to make connection unlikely. */ );
+    }
+  };
+
+  /**
+     Deal with the last poll() response and maybe re-start poll().
+  */
+  const afterPollFetch = function f(err){
+    if(true===f.isFirstCall){
+      f.isFirstCall = false;
+      Chat.ajaxEnd();
+      Chat.e.viewMessages.classList.remove('loading');
+      setTimeout(function(){
+        Chat.scrollMessagesTo(1);
+      }, 250);
+    }
+    Chat.timer.cancelPendingPollTimer();
+    if(Chat._gotServerError){
+      Chat.reportErrorAsMessage(
+        "Shutting down chat poller due to server-side error. ",
+        "Reload this page to reactivate it."
+      );
+    } else {
+      if( err && Chat.beVerbose ){
+        console.error("afterPollFetch:",err.name,err.status,err.message);
+      }
+      if( !err || 'timeout'===err.name/*(probably) long-poll expired*/ ){
+        /* Restart the poller immediately. */
+        reportConnectionOkay('afterPollFetch '+err, false);
+      }else{
+        /* Delay a while before trying again, noting that other Chat
+           APIs may try and succeed at connections before this timer
+           resolves, in which case they'll clear this timeout and the
+           UI message about the outage. */
+        let delay;
+        D.addClass(Chat.e.pollErrorMarker, 'connection-error');
+        if( ++Chat.timer.errCount < Chat.timer.minErrForNotify ){
+          delay = Chat.timer.resetDelay(
+            (Chat.timer.minDelay * Chat.timer.errCount)
+              + Chat.timer.randomInterval(Chat.timer.minDelay)
+          );
+          if(Chat.beVerbose){
+            console.warn("Ignoring polling error #",Chat.timer.errCount,
+                         "for another",delay,"ms" );
+          }
+        } else {
+          delay = Chat.timer.incrDelay();
+          //console.warn("afterPollFetch Chat.e.eMsgPollError",Chat.e.eMsgPollError);
+          const msg = "Poller connection error. Retrying in "+delay+ " ms.";
+          /* Replace the current/newest connection error widget. We could also
+             just update its body with the new message, but then its timestamp
+             never updates. OTOH, if we replace the message, we lose the
+             start time of the outage in the log. It seems more useful to
+             update the timestamp so that it doesn't look like it's hung. */
+          if( Chat.e.eMsgPollError ){
+            Chat.deleteMessageElem(Chat.e.eMsgPollError, false);
+          }
+          const theMsg = Chat.e.eMsgPollError = Chat.reportErrorAsMessage(msg);
+          D.addClass(Chat.e.eMsgPollError.e.body,'poller-connection');
+          /* Add a "retry now" button */
+          const btnDel = D.addClass(D.button("Retry now"), 'retry-now');
+          const eParent = Chat.e.eMsgPollError.e.content;
+          D.append(eParent, " ", btnDel);
+          btnDel.addEventListener('click', function(){
+            D.remove(btnDel);
+            D.append(eParent, D.text("retrying..."));
+            Chat.timer.cancelPendingPollTimer().currentDelay =
+              Chat.timer.resetDelay() +
+              1  /*workaround for showing the "connection restored"
+                   message, as the +1 will cause
+                   Chat.timer.isDelayed() to be true.*/;
+            poll();
+          });
+          //Chat.playNewMessageSound();// browser complains b/c this wasn't via human interaction
+        }
+        Chat.timer.startPendingPollTimer(delay);
+      }
+    }
+  };
+  afterPollFetch.isFirstCall = true;
+
+  /**
+     Initiates, if it's not already running, a single long-poll
+     request to the /chat-poll endpoint. In the handling of that
+     response, it end up will psuedo-recursively calling itself via
+     the response-handling process. Despite being async, the implied
+     returned Promise is meaningless.
+  */
+  const poll = Chat.poll = async function f(){
+    if(f.running) return;
+    f.running = true;
+    Chat._isBatchLoading = f.isFirstCall;
+    if(true===f.isFirstCall){
+      f.isFirstCall = false;
+      f.pendingOnError = undefined;
+      Chat.ajaxStart();
+      Chat.e.viewMessages.classList.add('loading');
+      /*
+        We manager onerror() results in poll() in a roundabout
+        manner: when an onerror() arrives, we stash it aside
+        for a moment before processing it.
+
+        This level of indirection is necessary to be able to
+        unambiguously identify client-timeout-specific polling errors
+        from other errors. Timeouts are always announced in pairs of
+        an HTTP 0 and something we can unambiguously identify as a
+        timeout (in that order). When we receive an HTTP error we put
+        it into this queue.  If an ontimeout() call arrives before
+        this error is handled, this error is ignored.  If, however, an
+        HTTP error is seen without an accompanying timeout, we handle
+        it from here.
+
+        It's kinda like in the curses C API, where you to match
+        ALT-X by first getting an ESC event, then an X event, but
+        this one is a lot less explicable. (It's almost certainly a
+        mis-handling bug in F.fetch(), but it has so far eluded my
+        eyes.)
+      */
+      f.delayPendingOnError = function(err){
+        if( f.pendingOnError ){
+          const x = f.pendingOnError;
+          f.pendingOnError = undefined;
+          afterPollFetch(x);
+        }
+      };
+    }
+    F.fetch("chat-poll",{
+      timeout: Chat.timer.pollTimeout,
+      urlParams:{
+        name: Chat.mxMsg
+      },
+      responseType: "json",
+      // Disable the ajax start/end handling for this long-polling op:
+      beforesend: chatPollBeforeSend,
+      aftersend: function(){
+        poll.running = false;
+      },
+      ontimeout: function(err){
+        f.pendingOnError = undefined /*strip preceding non-timeout error, if any*/;
+        afterPollFetch(err);
+      },
+      onerror:function(err){
+        Chat._isBatchLoading = false;
+        if(Chat.beVerbose){
+          console.error("poll.onerror:",err.name,err.status,JSON.stringify(err));
+        }
+        f.pendingOnError = err;
+        setTimeout(f.delayPendingOnError, 100);
+      },
+      onload:function(y){
+        reportConnectionOkay('poll.onload', true);
+        newcontent(y);
+        if(Chat._isBatchLoading){
+          Chat._isBatchLoading = false;
+          Chat.updateActiveUserList();
+        }
+        afterPollFetch();
+      }
+    });
+  }/*poll()*/;
+  poll.isFirstCall = true;
+  Chat._gotServerError = poll.running = false;
+  if( window.fossil.config.chat.fromcli ){
+    Chat.chatOnlyMode(true);
+  }
+  Chat.timer.startPendingPollTimer();
+  delete ForceResizeKludge.$disabled;
+  ForceResizeKludge();
+  Chat.animate.$disabled = false;
+  setTimeout( ()=>Chat.inputFocus(), 0 );
+  F.page.chat = Chat/* enables testing the APIs via the dev tools */;
+});