Revert `flexbox`, `column-reverse` changes

Unfortunately this doesn't work on Firefox and there's no proper
workaround. https://github.com/philipwalton/flexbugs/issues/108

Reverts:

Revert "Bugfix. Properly insert error messages and spinner"
This reverts commit 6a419cc1.

Revert "Use flexbox to keep the chat scrolled down"
This reverts commit dd91d3cc.

CHANGES.md

@@ -61,8 +61,6 @@
 - Removed events `statusChanged` and `statusMessageChanged`. Instead, you can
   listen on the `change:status` or `change:status\_message` events on
   `_converse.xmppstatus`.
-- Use flexbox instead of JavaScript to keep chat scrolled down. Due to this
-  change, messages are now inserted into the DOM in reverse order than before.
 
 ### API changes
 

sass/_chatbox.scss

@@ -207,8 +207,6 @@
             margin-bottom: 0.25em;
         }
         .chat-content {
-            display: flex;
-            flex-direction: column-reverse;
             padding: 1em 0;
             height: 100%;
             font-size: var(--message-font-size);

sass/_messages.scss

@@ -77,9 +77,10 @@
         }
 
         &.chat-msg {
-            display: flex;
+            display: inline-flex;
             width: 100%;
             flex-direction: row;
+            overflow: auto; // Ensures that content stays inside
             padding: 0.125rem 1rem;
 
             &.onload {
@@ -151,6 +152,7 @@
                 display: flex;
                 flex-direction: row;
                 justify-content: space-between;
+                width: 100%;
             }
 
             .chat-msg__message {
@@ -267,7 +269,7 @@
             }
             &.chat-msg--action {
                 .chat-msg__content {
-                    flex-wrap: wrap;
+                    flex-wrap: nowrap;
                     flex-direction: row;
                     justify-content: flex-start;
                 }

spec/chatbox.js

@@ -44,7 +44,7 @@
                     }).c('body').t('hello world').tree();
                 await _converse.chatboxes.onMessage(msg);
                 await test_utils.waitUntil(() => view.content.querySelectorAll('.chat-msg').length);
-                expect(view.content.firstElementChild.textContent.trim().indexOf('hello world')).not.toBe(-1);
+                expect(view.content.lastElementChild.textContent.trim().indexOf('hello world')).not.toBe(-1);
                 done();
             }));
 
@@ -78,22 +78,22 @@
                 message = '/me is as well';
                 await test_utils.sendMessage(view, message);
                 expect(view.el.querySelectorAll('.chat-msg--action').length).toBe(2);
-                await test_utils.waitUntil(() => sizzle('.chat-msg__author:first', view.el).pop().textContent.trim() === '**Romeo Montague');
-                const last_el = sizzle('.chat-msg__text:first', view.el).pop();
+                await test_utils.waitUntil(() => sizzle('.chat-msg__author:last', view.el).pop().textContent.trim() === '**Romeo Montague');
+                const last_el = sizzle('.chat-msg__text:last', view.el).pop();
                 expect(last_el.textContent).toBe('is as well');
                 expect(u.hasClass('chat-msg--followup', last_el)).toBe(false);
                 // Check that /me messages after a normal message don't
                 // get the 'chat-msg--followup' class.
                 message = 'This a normal message';
                 await test_utils.sendMessage(view, message);
-                let message_el = view.el.querySelector('.message:first-child');
+                let message_el = view.el.querySelector('.message:last-child');
                 expect(u.hasClass('chat-msg--followup', message_el)).toBeFalsy();
                 message = '/me wrote a 3rd person message';
                 await test_utils.sendMessage(view, message);
-                message_el = view.el.querySelector('.message:first-child');
+                message_el = view.el.querySelector('.message:last-child');
                 expect(view.el.querySelectorAll('.chat-msg--action').length).toBe(3);
-                expect(sizzle('.chat-msg__text:first', view.el).pop().textContent).toBe('wrote a 3rd person message');
-                expect(u.isVisible(sizzle('.chat-msg__author:first', view.el).pop())).toBeTruthy();
+                expect(sizzle('.chat-msg__text:last', view.el).pop().textContent).toBe('wrote a 3rd person message');
+                expect(u.isVisible(sizzle('.chat-msg__author:last', view.el).pop())).toBeTruthy();
                 expect(u.hasClass('chat-msg--followup', message_el)).toBeFalsy();
                 done();
             }));
@@ -267,7 +267,7 @@
                 const jid = el.textContent.replace(/ /g,'.').toLowerCase() + '@montague.lit';
                 spyOn(_converse.api, "trigger");
                 el.click();
-                await test_utils.waitUntil(() => _converse.api.trigger.calls.count(), 1000);
+                await test_utils.waitUntil(() => _converse.api.trigger.calls.count(), 500);
                 expect(_converse.chatboxes.length).toEqual(2);
                 expect(_converse.api.trigger).toHaveBeenCalledWith('chatBoxFocused', jasmine.any(Object));
                 done();

spec/omemo.js

@@ -208,7 +208,7 @@
             _converse.connection._dataRecv(test_utils.createRequest(stanza));
             await new Promise((resolve, reject) => view.once('messageInserted', resolve));
             expect(view.model.messages.length).toBe(2);
-            expect(view.el.querySelectorAll('.chat-msg__body')[0].textContent.trim())
+            expect(view.el.querySelectorAll('.chat-msg__body')[1].textContent.trim())
                 .toBe('This is an encrypted message from the contact');
 
             // #1193 Check for a received message without <body> tag
@@ -228,7 +228,7 @@
             await new Promise((resolve, reject) => view.once('messageInserted', resolve));
             await test_utils.waitUntil(() => view.model.messages.length > 1);
             expect(view.model.messages.length).toBe(3);
-            expect(view.el.querySelectorAll('.chat-msg__body')[0].textContent.trim())
+            expect(view.el.querySelectorAll('.chat-msg__body')[2].textContent.trim())
                 .toBe('Another received encrypted message without fallback');
             done();
         }));

src/converse-muc-views.js

@@ -470,6 +470,7 @@ converse.plugins.add('converse-muc-views', {
                 this.initDebounced();
 
                 this.model.messages.on('add', this.onMessageAdded, this);
+                this.model.messages.on('rendered', this.scrollDown, this);
                 this.model.messages.on('reset', () => {
                     this.content.innerHTML = '';
                     this.removeAll();
@@ -679,6 +680,7 @@ converse.plugins.add('converse-muc-views', {
                     this.model.clearUnreadMsgCounter();
                     this.model.save();
                 }
+                this.scrollDown();
                 this.renderEmojiPicker();
             },
 
@@ -706,6 +708,7 @@ converse.plugins.add('converse-muc-views', {
                 } else if (conn_status === converse.ROOMSTATUS.ENTERED) {
                     this.hideSpinner();
                     this.setChatState(_converse.ACTIVE);
+                    this.scrollDown();
                     if (_converse.auto_focus) {
                         this.focus();
                     }
@@ -763,6 +766,7 @@ converse.plugins.add('converse-muc-views', {
                     ev.stopPropagation();
                 }
                 this.model.save({'hidden_occupants': true});
+                this.scrollDown();
             },
 
             toggleOccupants (ev) {
@@ -774,6 +778,7 @@ converse.plugins.add('converse-muc-views', {
                     ev.stopPropagation();
                 }
                 this.model.save({'hidden_occupants': !this.model.get('hidden_occupants')});
+                this.scrollDown();
             },
 
             onOccupantClicked (ev) {
@@ -1321,7 +1326,7 @@ converse.plugins.add('converse-muc-views', {
                         return;
                     }
                     if (!dayjs(el.getAttribute('data-isodate')).isSame(new Date(), "day")) {
-                        el = el.nextElementSibling;
+                        el = el.previousElementSibling;
                         continue;
                     }
                     if (data.join === nick ||
@@ -1330,7 +1335,7 @@ converse.plugins.add('converse-muc-views', {
                             data.joinleave === nick) {
                         return el;
                     }
-                    el = el.nextElementSibling;
+                    el = el.previousElementSibling;
                 }
             },
 
@@ -1341,7 +1346,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.firstElementChild, nick),
+                      prev_info_el = this.getPreviousJoinOrLeaveNotification(this.content.lastElementChild, nick),
                       data = _.get(prev_info_el, 'dataset', {});
 
                 if (data.leave === nick) {
@@ -1359,8 +1364,8 @@ converse.plugins.add('converse-muc-views', {
                         'message': message
                     };
                     this.content.removeChild(prev_info_el);
-                    this.content.insertAdjacentHTML('afterBegin', tpl_info(data));
-                    const el = this.content.firstElementChild;
+                    this.content.insertAdjacentHTML('beforeend', tpl_info(data));
+                    const el = this.content.lastElementChild;
                     setTimeout(() => u.addClass('fade-out', el), 5000);
                     setTimeout(() => el.parentElement && el.parentElement.removeChild(el), 5500);
                 } else {
@@ -1379,12 +1384,13 @@ converse.plugins.add('converse-muc-views', {
                     };
                     if (prev_info_el) {
                         this.content.removeChild(prev_info_el);
-                        this.content.insertAdjacentHTML('afterBegin', tpl_info(data));
+                        this.content.insertAdjacentHTML('beforeend', tpl_info(data));
                     } else {
-                        this.content.insertAdjacentHTML('afterBegin', tpl_info(data));
-                        this.insertDayIndicator(this.content.firstElementChild);
+                        this.content.insertAdjacentHTML('beforeend', tpl_info(data));
+                        this.insertDayIndicator(this.content.lastElementChild);
                     }
                 }
+                this.scrollDown();
             },
 
             showLeaveNotification (occupant) {
@@ -1395,7 +1401,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.firstElementChild, nick),
+                      prev_info_el = this.getPreviousJoinOrLeaveNotification(this.content.lastElementChild, nick),
                       dataset = _.get(prev_info_el, 'dataset', {});
 
                 if (dataset.join === nick) {
@@ -1413,8 +1419,8 @@ converse.plugins.add('converse-muc-views', {
                         'message': message
                     };
                     this.content.removeChild(prev_info_el);
-                    this.content.insertAdjacentHTML('afterBegin', tpl_info(data));
-                    const el = this.content.firstElementChild;
+                    this.content.insertAdjacentHTML('beforeend', tpl_info(data));
+                    const el = this.content.lastElementChild;
                     setTimeout(() => u.addClass('fade-out', el), 5000);
                     setTimeout(() => el.parentElement && el.parentElement.removeChild(el), 5500);
                 } else {
@@ -1433,12 +1439,13 @@ converse.plugins.add('converse-muc-views', {
                     }
                     if (prev_info_el) {
                         this.content.removeChild(prev_info_el);
-                        this.content.insertAdjacentHTML('afterBegin', tpl_info(data));
+                        this.content.insertAdjacentHTML('beforeend', tpl_info(data));
                     } else {
-                        this.content.insertAdjacentHTML('afterBegin', tpl_info(data));
-                        this.insertDayIndicator(this.content.firstElementChild);
+                        this.content.insertAdjacentHTML('beforeend', tpl_info(data));
+                        this.insertDayIndicator(this.content.lastElementChild);
                     }
                 }
+                this.scrollDown();
             },
 
             renderAfterTransition () {
@@ -1453,6 +1460,7 @@ converse.plugins.add('converse-muc-views', {
                 } else {
                     u.showElement(this.el.querySelector('.chat-area'));
                     u.showElement(this.el.querySelector('.occupants'));
+                    this.scrollDown();
                 }
             },
 
@@ -1502,6 +1510,7 @@ converse.plugins.add('converse-muc-views', {
                             'render_message': true
                         }));
                 }
+                this.scrollDown();
             }
         });