Distinguish between chat content and messages content.

Fixes a bug that prevented scrolling from working correctly

spec/chatbox.js

@@ -41,7 +41,7 @@
                     }).c('body').t('hello world').tree();
                 await _converse.handleMessageStanza(msg);
                 await u.waitUntil(() => view.content.querySelectorAll('.chat-msg').length);
-                expect(view.content.lastElementChild.textContent.trim().indexOf('hello world')).not.toBe(-1);
+                expect(view.msgs_container.lastElementChild.textContent.trim().indexOf('hello world')).not.toBe(-1);
                 done();
             }));
 

spec/messages.js

@@ -788,16 +788,16 @@
             expect(msg_obj.get('sender')).toEqual('them');
             expect(msg_obj.get('is_delayed')).toEqual(true);
             await u.waitUntil(() => chatbox.vcard.get('fullname') === 'Juliet Capulet')
-            expect(view.content.querySelector('.chat-msg .chat-msg__text').textContent).toEqual(message);
-            expect(view.content.querySelector('.chat-msg__time').textContent.match(/^[0-9][0-9]:[0-9][0-9]/)).toBeTruthy();
-            expect(view.content.querySelector('span.chat-msg__author').textContent.trim()).toBe('Juliet Capulet');
+            expect(view.msgs_container.querySelector('.chat-msg .chat-msg__text').textContent).toEqual(message);
+            expect(view.msgs_container.querySelector('.chat-msg__time').textContent.match(/^[0-9][0-9]:[0-9][0-9]/)).toBeTruthy();
+            expect(view.msgs_container.querySelector('span.chat-msg__author').textContent.trim()).toBe('Juliet Capulet');
 
-            expect(view.content.querySelectorAll('.date-separator').length).toEqual(1);
-            let day = view.content.querySelector('.date-separator');
+            expect(view.msgs_container.querySelectorAll('.date-separator').length).toEqual(1);
+            let day = view.msgs_container.querySelector('.date-separator');
             expect(day.getAttribute('class')).toEqual('message date-separator');
             expect(day.getAttribute('data-isodate')).toEqual(dayjs(one_day_ago.startOf('day')).toISOString());
 
-            let time = view.content.querySelector('time.separator-text');
+            let time = view.msgs_container.querySelector('time.separator-text');
             expect(time.textContent).toEqual(dayjs(one_day_ago.startOf('day')).format("dddd MMM Do YYYY"));
 
             message = 'This is a current message';
@@ -813,15 +813,15 @@
 
             expect(_converse.api.trigger).toHaveBeenCalledWith('message', jasmine.any(Object));
             // Check that there is a <time> element, with the required props.
-            expect(view.content.querySelectorAll('time.separator-text').length).toEqual(2); // There are now two time elements
+            expect(view.msgs_container.querySelectorAll('time.separator-text').length).toEqual(2); // There are now two time elements
 
             const message_date = new Date();
-            day = sizzle('.date-separator:last', view.content);
+            day = sizzle('.date-separator:last', view.msgs_container);
             expect(day.length).toEqual(1);
             expect(day[0].getAttribute('class')).toEqual('message date-separator');
             expect(day[0].getAttribute('data-isodate')).toEqual(dayjs(message_date).startOf('day').toISOString());
 
-            time = sizzle('time.separator-text:last', view.content).pop();
+            time = sizzle('time.separator-text:last', view.msgs_container).pop();
             expect(time.textContent).toEqual(dayjs(message_date).startOf('day').format("dddd MMM Do YYYY"));
 
             // Normal checks for the 2nd message
@@ -831,12 +831,12 @@
             expect(msg_obj.get('fullname')).toBeUndefined();
             expect(msg_obj.get('sender')).toEqual('them');
             expect(msg_obj.get('is_delayed')).toEqual(false);
-            const msg_txt = sizzle('.chat-msg:last .chat-msg__text', view.content).pop().textContent;
+            const msg_txt = sizzle('.chat-msg:last .chat-msg__text', view.msgs_container).pop().textContent;
             expect(msg_txt).toEqual(message);
 
-            expect(view.content.querySelector('.chat-msg:last-child .chat-msg__text').textContent).toEqual(message);
-            expect(view.content.querySelector('.chat-msg:last-child .chat-msg__time').textContent.match(/^[0-9][0-9]:[0-9][0-9]/)).toBeTruthy();
-            expect(view.content.querySelector('.chat-msg:last-child .chat-msg__author').textContent.trim()).toBe('Juliet Capulet');
+            expect(view.msgs_container.querySelector('.chat-msg:last-child .chat-msg__text').textContent).toEqual(message);
+            expect(view.msgs_container.querySelector('.chat-msg:last-child .chat-msg__time').textContent.match(/^[0-9][0-9]:[0-9][0-9]/)).toBeTruthy();
+            expect(view.msgs_container.querySelector('.chat-msg:last-child .chat-msg__author').textContent.trim()).toBe('Juliet Capulet');
             done();
         }));
 

spec/muc.js

@@ -522,7 +522,7 @@
                 await view.model.close();
                 await u.waitUntil(() => view.model.clearMessages.calls.count());
                 expect(view.model.messages.length).toBe(0);
-                expect(view.content.innerHTML).toBe('');
+                expect(view.msgs_container.innerHTML).toBe('');
                 done()
             }));
 
@@ -996,7 +996,7 @@
 
                 // XXX: hack so that we can test leave/enter of occupants
                 // who were already in the room when we joined.
-                view.content.innerHTML = '';
+                view.msgs_container.innerHTML = '';
 
                 presence = u.toStanza(
                     `<presence xmlns="jabber:client" to="romeo@montague.lit/orchard" type="unavailable" from="coven@chat.shakespeare.lit/fabio">

src/converse-chatview.js

@@ -199,7 +199,7 @@ converse.plugins.add('converse-chatview', {
                 this.listenTo(this.model.messages, 'add', this.onMessageAdded);
                 this.listenTo(this.model.messages, 'rendered', this.scrollDown);
                 this.model.messages.on('reset', () => {
-                    this.content.innerHTML = '';
+                    this.msgs_container.innerHTML = '';
                     this.removeAll();
                 });
 
@@ -248,8 +248,9 @@ converse.plugins.add('converse-chatview', {
                     )
                 );
                 render(result, this.el);
-                this.content = this.el.querySelector('.chat-content__messages');
+                this.content = this.el.querySelector('.chat-content');
                 this.csn = this.el.querySelector('.chat-content__notifications');
+                this.msgs_container = this.el.querySelector('.chat-content__messages');
                 this.renderChatStateNotification();
                 this.renderMessageForm();
                 this.renderHeading();
@@ -493,20 +494,20 @@ converse.plugins.add('converse-chatview', {
 
             showChatEvent (message) {
                 const isodate = (new Date()).toISOString();
-                this.content.insertAdjacentHTML(
+                this.msgs_container.insertAdjacentHTML(
                     'beforeend',
                     tpl_info({
                         'extra_classes': 'chat-event',
                         'message': message,
                         'isodate': isodate,
                     }));
-                this.insertDayIndicator(this.content.lastElementChild);
+                this.insertDayIndicator(this.msgs_container.lastElementChild);
                 this.scrollDown();
                 return isodate;
             },
 
             showErrorMessage (message) {
-                this.content.insertAdjacentHTML(
+                this.msgs_container.insertAdjacentHTML(
                     'beforeend',
                     tpl_error_message({'message': message, 'isodate': (new Date()).toISOString() })
                 );
@@ -566,12 +567,12 @@ converse.plugins.add('converse-chatview', {
              * @returns { Date }
              */
             getLastMessageDate (cutoff) {
-                const first_msg = u.getFirstChildElement(this.content, '.message:not(.chat-state-notification)');
+                const first_msg = u.getFirstChildElement(this.msgs_container, '.message:not(.chat-state-notification)');
                 const oldest_date = first_msg ? first_msg.getAttribute('data-isodate') : null;
                 if (oldest_date !== null && dayjs(oldest_date).isAfter(cutoff)) {
                     return null;
                 }
-                const last_msg = u.getLastChildElement(this.content, '.message:not(.chat-state-notification)');
+                const last_msg = u.getLastChildElement(this.msgs_container, '.message:not(.chat-state-notification)');
                 const most_recent_date = last_msg ? last_msg.getAttribute('data-isodate') : null;
                 if (most_recent_date === null) {
                     return null;
@@ -586,7 +587,7 @@ converse.plugins.add('converse-chatview', {
                  * upon element insertion.
                  */
                 const sel = '.message:not(.chat-state-notification)';
-                const msg_dates = sizzle(sel, this.content).map(e => e.getAttribute('data-isodate'));
+                const msg_dates = sizzle(sel, this.msgs_container).map(e => e.getAttribute('data-isodate'));
                 const cutoff_iso = cutoff.toISOString();
                 msg_dates.push(cutoff_iso);
                 msg_dates.sort();
@@ -639,7 +640,7 @@ converse.plugins.add('converse-chatview', {
 
             showHelpMessages (msgs, type='info', spinner) {
                 msgs.forEach(msg => {
-                    this.content.insertAdjacentHTML(
+                    this.msgs_container.insertAdjacentHTML(
                         'beforeend',
                         tpl_help_message({
                             'isodate': (new Date()).toISOString(),
@@ -669,7 +670,7 @@ converse.plugins.add('converse-chatview', {
              */
             insertMessage (view) {
                 if (view.model.get('type') === 'error') {
-                    const previous_msg_el = this.content.querySelector(`[data-msgid="${view.model.get('msgid')}"]`);
+                    const previous_msg_el = this.msgs_container.querySelector(`[data-msgid="${view.model.get('msgid')}"]`);
                     if (previous_msg_el) {
                         previous_msg_el.insertAdjacentElement('afterend', view.el);
                         return this.trigger('messageInserted', view.el);
@@ -679,9 +680,9 @@ converse.plugins.add('converse-chatview', {
                 const previous_msg_date = this.getLastMessageDate(current_msg_date);
 
                 if (previous_msg_date === null) {
-                    this.content.insertAdjacentElement('afterbegin', view.el);
+                    this.msgs_container.insertAdjacentElement('afterbegin', view.el);
                 } else {
-                    const previous_msg_el = sizzle(`[data-isodate="${previous_msg_date.toISOString()}"]:last`, this.content).pop();
+                    const previous_msg_el = sizzle(`[data-isodate="${previous_msg_date.toISOString()}"]:last`, this.msgs_container).pop();
                     if (view.model.get('type') === 'error' &&
                             u.hasClass('chat-error', previous_msg_el) &&
                             previous_msg_el.textContent === view.model.get('message')) {
@@ -865,14 +866,14 @@ converse.plugins.add('converse-chatview', {
                 if (_converse.view_mode === 'overlayed') {
                     // XXX: Chrome flexbug workaround. The .chat-content area
                     // doesn't resize when the textarea is resized to its original size.
-                    this.content.parentElement.style.display = 'none';
+                    this.msgs_container.parentElement.style.display = 'none';
                 }
                 textarea.removeAttribute('disabled');
                 u.removeClass('disabled', textarea);
 
                 if (_converse.view_mode === 'overlayed') {
                     // XXX: Chrome flexbug workaround.
-                    this.content.parentElement.style.display = '';
+                    this.msgs_container.parentElement.style.display = '';
                 }
 
                 // Suppress events, otherwise superfluous CSN gets set
@@ -1192,7 +1193,7 @@ converse.plugins.add('converse-chatview', {
                         text = __('%1$s is online', fullname);
                     }
                     if (text) {
-                        this.content.insertAdjacentHTML(
+                        this.msgs_container.insertAdjacentHTML(
                             'beforeend',
                             tpl_status_message({
                                 'message': text,

src/converse-headlines-view.js

@@ -165,7 +165,8 @@ converse.plugins.add('converse-headlines-view', {
                         }
                     ));
                 render(result, this.el);
-                this.content = this.el.querySelector('.chat-content__messages');
+                this.content = this.el.querySelector('.chat-content');
+                this.msgs_container = this.el.querySelector('.chat-content__messages');
                 return this;
             },
 

src/converse-muc-views.js

@@ -697,7 +697,7 @@ converse.plugins.add('converse-muc-views', {
                 this.listenTo(this.model.messages, 'change:edited', this.onMessageEdited);
                 this.listenTo(this.model.messages, 'rendered', this.scrollDown);
                 this.model.messages.on('reset', () => {
-                    this.content.innerHTML = '';
+                    this.msgs_container.innerHTML = '';
                     this.removeAll();
                 });
 
@@ -746,7 +746,8 @@ converse.plugins.add('converse-muc-views', {
                 }), this.el);
                 this.renderHeading();
                 this.renderBottomPanel();
-                this.content = this.el.querySelector('.chat-content__messages');
+                this.content = this.el.querySelector('.chat-content');
+                this.msgs_container = this.el.querySelector('.chat-content__messages');
                 this.csn = this.el.querySelector('.chat-content__notifications');
                 if (!_converse.muc_show_logs_before_join) {
                     this.model.session.get('connection_status') !== converse.ROOMSTATUS.ENTERED && this.showSpinner();
@@ -1847,23 +1848,10 @@ converse.plugins.add('converse-muc-views', {
                 u.showElement(container);
             },
 
-            getNotificationWithMessage (message) {
-                let el = this.content.lastElementChild;
-                while (el) {
-                    if (!u.hasClass(el, 'chat-info')) {
-                        return;
-                    }
-                    if (el.textContent === message) {
-                        return el;
-                    }
-                    el = el.previousElementSibling;
-                }
-            },
-
             removeEmptyHistoryFeedback () {
-                const el = this.content.firstElementChild;
+                const el = this.msgs_container.firstElementChild;
                 if (_converse.muc_show_logs_before_join && el && el.matches('.empty-history-feedback')) {
-                    this.content.removeChild(this.content.firstElementChild);
+                    this.msgs_container.removeChild(this.msgs_container.firstElementChild);
                 }
             },
 
@@ -1879,7 +1867,7 @@ converse.plugins.add('converse-muc-views', {
 
             insertNotification (message) {
                 this.removeEmptyHistoryFeedback();
-                this.content.insertAdjacentHTML(
+                this.msgs_container.insertAdjacentHTML(
                     'beforeend',
                     tpl_info({
                         'isodate': (new Date()).toISOString(),
@@ -1955,7 +1943,7 @@ converse.plugins.add('converse-muc-views', {
                 }
                 const nick = occupant.get('nick'),
                       stat = _converse.muc_show_join_leave_status ? occupant.get('status') : null,
-                      prev_info_el = this.getPreviousJoinOrLeaveNotification(this.content.lastElementChild, nick),
+                      prev_info_el = this.getPreviousJoinOrLeaveNotification(this.msgs_container.lastElementChild, nick),
                       data = prev_info_el?.dataset || {};
 
                 if (data.leave === nick) {
@@ -1972,9 +1960,9 @@ converse.plugins.add('converse-muc-views', {
                         'extra_classes': 'chat-event',
                         'message': message
                     };
-                    this.content.removeChild(prev_info_el);
-                    this.content.insertAdjacentHTML('beforeend', tpl_info(data));
-                    const el = this.content.lastElementChild;
+                    this.msgs_container.removeChild(prev_info_el);
+                    this.msgs_container.insertAdjacentHTML('beforeend', tpl_info(data));
+                    const el = this.msgs_container.lastElementChild;
                     setTimeout(() => u.addClass('fade-out', el), 5000);
                     setTimeout(() => el.parentElement && el.parentElement.removeChild(el), 5500);
                 } else {
@@ -1992,11 +1980,11 @@ converse.plugins.add('converse-muc-views', {
                         'message': message
                     };
                     if (prev_info_el) {
-                        this.content.removeChild(prev_info_el);
-                        this.content.insertAdjacentHTML('beforeend', tpl_info(data));
+                        this.msgs_container.removeChild(prev_info_el);
+                        this.msgs_container.insertAdjacentHTML('beforeend', tpl_info(data));
                     } else {
-                        this.content.insertAdjacentHTML('beforeend', tpl_info(data));
-                        this.insertDayIndicator(this.content.lastElementChild);
+                        this.msgs_container.insertAdjacentHTML('beforeend', tpl_info(data));
+                        this.insertDayIndicator(this.msgs_container.lastElementChild);
                     }
                 }
                 this.scrollDown();
@@ -2010,7 +1998,7 @@ converse.plugins.add('converse-muc-views', {
                 }
                 const nick = occupant.get('nick'),
                       stat = _converse.muc_show_join_leave_status ? occupant.get('status') : null,
-                      prev_info_el = this.getPreviousJoinOrLeaveNotification(this.content.lastElementChild, nick),
+                      prev_info_el = this.getPreviousJoinOrLeaveNotification(this.msgs_container.lastElementChild, nick),
                       dataset = prev_info_el?.dataset || {};
 
                 if (dataset.join === nick) {
@@ -2027,9 +2015,9 @@ converse.plugins.add('converse-muc-views', {
                         'extra_classes': 'chat-event',
                         'message': message
                     };
-                    this.content.removeChild(prev_info_el);
-                    this.content.insertAdjacentHTML('beforeend', tpl_info(data));
-                    const el = this.content.lastElementChild;
+                    this.msgs_container.removeChild(prev_info_el);
+                    this.msgs_container.insertAdjacentHTML('beforeend', tpl_info(data));
+                    const el = this.msgs_container.lastElementChild;
                     setTimeout(() => u.addClass('fade-out', el), 5000);
                     setTimeout(() => el.parentElement && el.parentElement.removeChild(el), 5500);
                 } else {
@@ -2047,11 +2035,11 @@ converse.plugins.add('converse-muc-views', {
                         'data_value': nick
                     }
                     if (prev_info_el) {
-                        this.content.removeChild(prev_info_el);
-                        this.content.insertAdjacentHTML('beforeend', tpl_info(data));
+                        this.msgs_container.removeChild(prev_info_el);
+                        this.msgs_container.insertAdjacentHTML('beforeend', tpl_info(data));
                     } else {
-                        this.content.insertAdjacentHTML('beforeend', tpl_info(data));
-                        this.insertDayIndicator(this.content.lastElementChild);
+                        this.msgs_container.insertAdjacentHTML('beforeend', tpl_info(data));
+                        this.insertDayIndicator(this.msgs_container.lastElementChild);
                     }
                 }
                 this.scrollDown();
@@ -2111,7 +2099,7 @@ converse.plugins.add('converse-muc-views', {
                 // replaced by the user's name.
                 // Example: Topic set by JC Brand
                 const message = subject.text ? __('Topic set by %1$s', author) : __('Topic cleared by %1$s', author);
-                this.content.insertAdjacentHTML(
+                this.msgs_container.insertAdjacentHTML(
                     'beforeend',
                     tpl_info({
                         'isodate': (new Date()).toISOString(),

tests/utils.js

@@ -314,7 +314,7 @@
 
     utils.clearChatBoxMessages = function (converse, jid) {
         const view = converse.chatboxviews.get(jid);
-        view.el.querySelector('.chat-content').innerHTML = '';
+        view.msgs_container.innerHTML = '';
         return view.model.messages.clearStore();
     };