@      <strong>Tap the title</strong> of this widget to toggle
  @      the list on and off.
  @     </span>
  @     <span>Active users (sorted by last message time)</span>
  @   </div>
  @   <div id='chat-user-list'></div>
  @ </div>
  @ <button id='chat-clear-filter' class='hidden'>Clear filter</button>
  @ <div id='chat-preview' class='hidden chat-view'>
  @  <header>Preview: (<a href='%R/md_rules' target='_blank'>markdown reference</a>)</header>
  @  <div id='chat-preview-content' class='message-widget-content'></div>
  @  <div id='chat-preview-buttons'><button id='chat-preview-close'>Close Preview</button></div>
  @ </div>
  @ <div id='chat-config' class='hidden chat-view'>
  @ <div id='chat-config-options'></div>

        contentDiv: E1('div.content'),
        viewConfig: E1('#chat-config'),
        viewPreview: E1('#chat-preview'),
        previewContent: E1('#chat-preview-content'),
        btnPreview: E1('#chat-preview-button'),
        views: document.querySelectorAll('.chat-view'),
        activeUserListWrapper: E1('#chat-user-list-wrapper'),
        activeUserList: E1('#chat-user-list'),
        btnClearFilter: E1('#chat-clear-filter')
      },
      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) */
      },
      filter: {
        user:{
          activeTag: undefined,
          match: function(uname){
            return !this.activeTag || this.activeTag===uname;
          },
          matchElem: function(e){
            return !this.activeTag || this.activeTag===e.dataset.xfrom;
          }
        },
        hashtag:{
          activeTag: undefined,
          match: function(tag){
            return !this.activeTag || tag===this.activeTag;
          },
          matchElem: function(e){
            return !this.activeTag
              || !!e.querySelector('[data-hashtag='+this.activeTag+']');
          }
        },
        current: undefined/*gets set to current active filter*/
      },
      /** 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 string and the setter returns this object. */
      inputValue: function(){
        const e = this.inputElement();
        if(arguments.length){

      /* 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.filter.current
           && !this.filter.current.matchElem(e)){
          e.classList.add('hidden');
        }
        if(atEnd){
          const fe = mip.nextElementSibling;
          if(fe) mip.parentNode.insertBefore(e, fe);
          else D.append(mip.parentNode, e);
        }else{

            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.filter.user.activeTag===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*/)

        //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;
      },
      /**
         For each Chat.MessageWidget element (X.message-widget) for
         which predicate(elem) returns true, the 'hidden' class is
         removed from that message. For all others, 'hidden' is
         added. If predicate is falsy, 'hidden' is removed from all
         elements. After filtering, it will try to scroll the last
         not-filtered-out message into view, but exactly where it
         scrolls into view (top, middle, button) is
         unpredictable. Returns this object.

         The argument may optionally be an object from this.filter,
         in which case its matchElem() method becomes the predicate.

         Note that this does not encapsulate certain filter-specific
         logic which applies changes to elements other than the
         main message list or this.e.btnClearFilter.
      */
      applyMessageFilter: function(predicate){
        const self = this;
        let eLast;
        console.debug("applyMessageFilter(",predicate,")");
        if(!predicate){
          D.removeClass(this.e.viewMessages.querySelectorAll('.message-widget.hidden'),
                        'hidden');
          D.addClass(this.e.btnClearFilter, 'hidden');
        }else if('function'!==typeof predicate
                && predicate.matchElem){
          /* assume Chat.filter object */
          const p = predicate;
          predicate = (e)=>p.matchElem(e);
        }
        if(predicate){
          this.e.viewMessages.querySelectorAll('.message-widget').forEach(function(e){
            if(predicate(e)){
              e.classList.remove('hidden');
              eLast = e;
            }else{
              e.classList.add('hidden');
            }
          });
          D.removeClass(this.e.btnClearFilter, 'hidden');
        }
        if(eLast) eLast.scrollIntoView(false);
        else this.scrollMessagesTo(1);
        return this;
      },
      /**
         Clears the current message filter, if any, and clears the
         activeTag property of all members of this.filter. Returns
         this object. This also unfortunately performs some
         filter-type-specific logic which we have not yet managed to
         encapsulate more cleanly.
       */
      clearFilters: function(){
        if(!this.filter.current) return this;
        this.filter.current = undefined;
        this.applyMessageFilter(false);
        const self = this;
        Object.keys(this.filter).forEach(function(k){
          const f = self.filter[k];
          if(f) f.activeTag = undefined;
        });
        this.e.activeUserList.querySelectorAll('.chat-user').forEach(
          /*Unfortante filter-specific logic*/
          (e)=>e.classList.remove('selected')
        );
        return this;
      },
      /**
         Applies user name filter to all current messages, or clears
         the filter if uname is falsy.
      */
      setUserFilter: function(uname){
        if(!uname || (this.filter.current
                      && this.filter.current!==this.filter.user)){
          this.clearFilters();
        }
        this.filter.user.activeTag = uname;
        if(uname) this.applyMessageFilter(this.filter.user);
        this.filter.current = uname ? this.filter.user : undefined;
        const self = this;





        this.e.activeUserList.querySelectorAll('.chat-user').forEach(function(e){
          e.classList[
            self.filter.user.activeTag===e.dataset.uname
              ? 'add' : 'remove'

          ]('selected');
        });
        return this;
      },
      /**
         Applies a hashtag filter to all current messages, or clears
         the filter if tag is falsy.
      */
      setHashtagFilter: function(tag){
        if(!tag || (this.filter.current
                    && this.filter.current!==this.filter.hashtag)){
          this.clearFilters();
        }

        this.filter.hashtag.activeTag = tag;


        if(tag) this.applyMessageFilter(this.filter.hashtag);
        this.filter.current = tag ? this.filter.hashtag : undefined;
        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

      const uname = eUser.dataset.uname;
      let eLast;
      cs.setCurrentView(cs.e.viewMessages);
      if(eUser.classList.contains('selected')){
        /* If curently selected, toggle filter off */
        eUser.classList.remove('selected');
        cs.setUserFilter(false);

      }else{


        eUser.classList.add('selected');
        cs.setUserFilter(uname);
      }
      return false;
    }, false);

    cs.e.btnClearFilter.addEventListener('click',function(){
      D.addClass(this,'hidden');
      cs.clearFilters();
    }, false);
    return cs;
  })()/*Chat initialization*/;

  /** To be passed each MessageWidget's top-level DOM element
      after initial processing of the message, to set up
      hashtag references. */
  const setupHashtags = function f(elem){
    if(!f.$click){
      f.$click = function(ev){
        const tag = ev.target.dataset.hashtag;
        if(tag){
          console.debug("hashtag = ",tag);
          Chat.setHashtagFilter(
            tag===Chat.filter.hashtag.activeTag
              ? false : tag
          );
        }
      };
    }
    elem.querySelectorAll('[data-hashtag]').forEach(function(e){
      e.dataset.hashtag = e.dataset.hashtag.toLowerCase();
      e.addEventListener('click', f.$click, false);
    })
  };

  /**
     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

          // perfectly safe to use in this context.
          if(m.xmsg instanceof Array){
            // Used by Chat.reportErrorAsMessage()
            D.append(contentTarget, m.xmsg);
          }else{
            contentTarget.innerHTML = m.xmsg;
            contentTarget.querySelectorAll('a').forEach(addAnchorTargetBlank);
            setupHashtags(contentTarget);
            if(F.pikchr){
              F.pikchr.addSrcView(contentTarget.querySelectorAll('svg.pikchr'));
            }
          }
        }
        this.e.tab.firstElementChild.addEventListener('click', this._handleLegendClicked, false);
        /*if(eXFrom){

                  D.a(F.repoUrl('timeline',{
                    u: eMsg.dataset.xfrom,
                    y: 'a'
                  }), "User's Timeline"),
                  'target', '_blank'
                );
                D.append(toolbar2, timelineLink);
                if(Chat.filter.current){

                  /* Add a button to clear 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.clearFilters();
                          eMsg.scrollIntoView(false);

                          Chat.animate(eMsg.firstElementChild, 'anim-flip-h');





                        })
                    )
                  );
                }/*jump-to button*/
              }
              const tab = eMsg.querySelector('.message-widget-tab');
              D.append(tab, this.e);

        label: "Show active users list",
        boolValue: ()=>!Chat.e.activeUserListWrapper.classList.contains('hidden'),
        persistentSetting: 'active-user-list',
        callback: function(){
          D.toggleClass(Chat.e.activeUserListWrapper,'hidden');
          D.removeClass(Chat.e.activeUserListWrapper, 'collapsed');
          if(Chat.e.activeUserListWrapper.classList.contains('hidden')){
            /* When hiding this element, undo user filtering */
            if(Chat.filter.current === Chat.filter.user){
              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');

body.chat #chat-user-list:not(.timestamps) .timestamp {
  display: none;
}
body.chat #chat-user-list .chat-user.selected {
  font-weight: bold;
  text-decoration: underline;
}

body.chat span[data-hashtag] {
  font-family: monospace;
  text-decoration: underline;
  cursor: pointer;
}

body.chat #chat-clear-filter {
  margin: 0.25em 0.5em;
}

body.chat .anim-rotate-360 {
  animation: rotate-360 750ms linear;
}
@keyframes rotate-360 {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }

  from { transform: rotateX(0deg); }
  to { transform: rotateX(360deg); }
}
body.chat .anim-fade-in {
  animation: fade-in 750ms linear;
}
body.chat .anim-fade-in-fast {
  animation: fade-in 300ms linear;
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
body.chat .anim-fade-out-fast {
  animation: fade-out 300ms linear;
}
@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}