Merge remote-tracking branch 'origin/master'

css/converse.css

@@ -1199,7 +1199,8 @@
     animation-timing-function: ease; }
   #converse-embedded-chat .hidden,
   #conversejs .hidden {
-    opacity: 0; }
+    opacity: 0;
+    display: none; }
   #converse-embedded-chat .collapsed,
   #conversejs .collapsed {
     height: 0 !important;
@@ -2297,6 +2298,8 @@
   #conversejs .toggle-controlbox span {
     color: white; }
 
+#conversejs #controlbox #converse-register .button-cancel {
+  font-size: 90%; }
 #conversejs #controlbox .controlbox-pane {
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;

css/inverse.css

@@ -1199,7 +1199,8 @@
     animation-timing-function: ease; }
   #converse-embedded-chat .hidden,
   #conversejs .hidden {
-    opacity: 0; }
+    opacity: 0;
+    display: none; }
   #converse-embedded-chat .collapsed,
   #conversejs .collapsed {
     height: 0 !important;

package-lock.json

@@ -1002,6 +1002,12 @@
         "underscore": "1.8.3"
       }
     },
+    "backbone.nativeview": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/backbone.nativeview/-/backbone.nativeview-0.3.3.tgz",
+      "integrity": "sha1-dDNXM028kQKw2bsT3pFOCjXnvcQ=",
+      "dev": true
+    },
     "backbone.overview": {
       "version": "git+https://github.com/jcbrand/Backbone.Overview.git#2c37461bfa8d9e8bcf8284033d3242c57eafb52d",
       "dev": true,

package.json

@@ -36,6 +36,7 @@
     "awesomplete-avoid-xss": "^1.1.2",
     "backbone": "1.3.3",
     "backbone.browserStorage": "0.0.3",
+    "backbone.nativeview": "^0.3.3",
     "backbone.overview": "git+https://github.com/jcbrand/Backbone.Overview.git",
     "backbone.vdomview": "git+https://github.com/jcbrand/backbone.vdomview.git",
     "bootstrap": "^3.3.7",

sass/converse/_controlbox.scss

 #conversejs {
     #controlbox {
+        #converse-register {
+            .button-cancel {
+                font-size: 90%;
+            }
+        }
+
         .controlbox-pane {
             border-bottom-left-radius: $chatbox-border-radius;
             border-bottom-right-radius: $chatbox-border-radius;

spec/bookmarks.js

@@ -34,15 +34,15 @@
             spyOn(view, 'renderBookmarkForm').and.callThrough();
             spyOn(view, 'closeForm').and.callThrough();
 
-            var $bookmark = view.$el.find('.icon-pushpin');
-            $bookmark.click();
+            var $bookmark = $(view.el).find('.icon-pushpin');
+            $bookmark[0].click();
             expect(view.renderBookmarkForm).toHaveBeenCalled();
 
-            view.$el.find('.button-cancel').click();
+            view.el.querySelector('.button-cancel').click();
             expect(view.closeForm).toHaveBeenCalled();
             expect($bookmark.hasClass('on-button'), false);
 
-            $bookmark.click();
+            $bookmark[0].click();
             expect(view.renderBookmarkForm).toHaveBeenCalled();
 
             /* Client uploads data:
@@ -77,11 +77,11 @@
              *  </iq>
              */
             expect(view.model.get('bookmarked')).toBeFalsy();
-            var $form = view.$el.find('.chatroom-form');
+            var $form = $(view.el).find('.chatroom-form');
             $form.find('input[name="name"]').val('Play&apos;s the Thing');
             $form.find('input[name="autojoin"]').prop('checked', true);
             $form.find('input[name="nick"]').val('JC');
-            view.$el.find('.button-primary').click();
+            view.el.querySelector('.button-primary').click();
 
             expect(view.model.get('bookmarked')).toBeTruthy();
             expect($bookmark.hasClass('on-button'), true);
@@ -160,7 +160,7 @@
 
                 test_utils.openChatRoom(_converse, 'lounge', 'localhost', 'dummy');
                 var view = _converse.chatboxviews.get('lounge@localhost');
-                var $bookmark_icon = view.$('.icon-pushpin');
+                var $bookmark_icon = $(view.el.querySelector('.icon-pushpin'));
                 expect($bookmark_icon.hasClass('button-on')).toBeFalsy();
                 view.model.set('bookmarked', true);
                 expect($bookmark_icon.hasClass('button-on')).toBeTruthy();
@@ -188,7 +188,7 @@
                 });
                 expect(_converse.bookmarks.length).toBe(1);
                 expect(view.model.get('bookmarked')).toBeTruthy();
-                var $bookmark_icon = view.$('.icon-pushpin');
+                var $bookmark_icon = $(view.el.querySelector('.icon-pushpin'));
                 expect($bookmark_icon.hasClass('button-on')).toBeTruthy();
 
                 spyOn(_converse.connection, 'sendIQ').and.callFake(function (iq, callback, errback) {
@@ -196,7 +196,7 @@
                     IQ_id = sendIQ.bind(this)(iq, callback, errback);
                 });
                 spyOn(_converse.connection, 'getUniqueId').and.callThrough();
-                $bookmark_icon.click();
+                $bookmark_icon[0].click();
                 expect(view.toggleBookmark).toHaveBeenCalled();
                 expect($bookmark_icon.hasClass('button-on')).toBeFalsy();
                 expect(_converse.bookmarks.length).toBe(0);
@@ -409,7 +409,6 @@
                     }
                 }).length).toBe(1);
 
-                _converse.chatboxviews.get('controlbox').$('#chatrooms dl.bookmarks').html('');
                 var stanza = $iq({'to': _converse.connection.jid, 'type':'result', 'id':IQ_id})
                     .c('pubsub', {'xmlns': Strophe.NS.PUBSUB})
                         .c('items', {'node': 'storage:bookmarks'})
@@ -463,7 +462,6 @@
                         return true;
                     }
                 }).length).toBe(1);
-                _converse.chatboxviews.get('controlbox').$('#chatrooms dl.bookmarks').html('');
                 var stanza = $iq({'to': _converse.connection.jid, 'type':'result', 'id':IQ_id})
                     .c('pubsub', {'xmlns': Strophe.NS.PUBSUB})
                         .c('items', {'node': 'storage:bookmarks'})
@@ -485,10 +483,10 @@
                     expect($('#chatrooms dl.bookmarks').hasClass('collapsed')).toBeFalsy();
                     expect($('#chatrooms dl.bookmarks dd:visible').length).toBe(1);
                     expect(_converse.bookmarksview.list_model.get('toggle-state')).toBe(_converse.OPENED);
-                    $('#chatrooms .bookmarks-toggle').click();
+                    $('#chatrooms .bookmarks-toggle')[0].click();
                     expect($('#chatrooms dl.bookmarks').hasClass('collapsed')).toBeTruthy();
                     expect(_converse.bookmarksview.list_model.get('toggle-state')).toBe(_converse.CLOSED);
-                    $('#chatrooms .bookmarks-toggle').click();
+                    $('#chatrooms .bookmarks-toggle')[0].click();
                     expect($('#chatrooms dl.bookmarks').hasClass('collapsed')).toBeFalsy();
                     expect($('#chatrooms dl.bookmarks dd:visible').length).toBe(1);
                     expect(_converse.bookmarksview.list_model.get('toggle-state')).toBe(_converse.OPENED);

spec/controlbox.js

@@ -23,7 +23,7 @@
             spyOn(_converse, 'emit');
             // Redelegate so that the spies are now registered as the event handlers (specifically for 'onClick')
             _converse.controlboxtoggle.delegateEvents();
-            $('.toggle-controlbox').click();
+            document.querySelector('.toggle-controlbox').click();
             expect(_converse.controlboxtoggle.onClick).toHaveBeenCalled();
             expect(_converse.controlboxtoggle.showControlBox).toHaveBeenCalled();
             expect(_converse.emit).toHaveBeenCalledWith('controlBoxOpened', jasmine.any(Object));
@@ -40,8 +40,8 @@
 
                 test_utils.openControlBox();
                 var view = _converse.xmppstatusview;
-                expect(view.$el.find('a.choose-xmpp-status').hasClass('online')).toBe(true);
-                expect(view.$el.find('a.choose-xmpp-status').attr('data-value')).toBe('I am online');
+                expect($(view.el).find('a.choose-xmpp-status').hasClass('online')).toBe(true);
+                expect($(view.el).find('a.choose-xmpp-status').attr('data-value')).toBe('I am online');
                 done();
             }));
 
@@ -56,17 +56,17 @@
                 spyOn(view, 'setStatus').and.callThrough();
                 spyOn(_converse, 'emit');
                 view.delegateEvents(); // We need to rebind all events otherwise our spy won't be called
-                view.$el.find('a.choose-xmpp-status').click();
+                view.el.querySelector('a.choose-xmpp-status').click();
                 expect(view.toggleOptions).toHaveBeenCalled();
                 spyOn(view, 'updateStatusUI').and.callThrough();
                 view.initialize(); // Rebind events for spy
-                $(view.$el.find('.dropdown dd ul li a')[1]).click(); // Change status to "dnd"
+                $(view.el).find('.dropdown dd ul li a')[1].click(); // Change status to "dnd"
                 expect(view.setStatus).toHaveBeenCalled();
                 expect(_converse.emit).toHaveBeenCalledWith('statusChanged', 'dnd');
                 expect(view.updateStatusUI).toHaveBeenCalled();
-                expect(view.$el.find('a.choose-xmpp-status').hasClass('online')).toBe(false);
-                expect(view.$el.find('a.choose-xmpp-status').hasClass('dnd')).toBe(true);
-                expect(view.$el.find('a.choose-xmpp-status').attr('data-value')).toBe('I am busy');
+                expect($(view.el).find('a.choose-xmpp-status').hasClass('online')).toBe(false);
+                expect($(view.el).find('a.choose-xmpp-status').hasClass('dnd')).toBe(true);
+                expect($(view.el).find('a.choose-xmpp-status').attr('data-value')).toBe('I am busy');
                 done();
             }));
 
@@ -82,15 +82,15 @@
                 spyOn(view, 'renderStatusChangeForm').and.callThrough();
                 spyOn(_converse, 'emit');
                 view.delegateEvents(); // We need to rebind all events otherwise our spy won't be called
-                view.$el.find('a.change-xmpp-status-message').click();
+                view.el.querySelector('a.change-xmpp-status-message').click();
                 expect(view.renderStatusChangeForm).toHaveBeenCalled();
                 var msg = 'I am happy';
-                view.$el.find('input.custom-xmpp-status').val(msg);
-                view.$el.submit();
+                view.el.querySelector('input.custom-xmpp-status').value = msg;
+                view.el.querySelector('[type="submit"]').click();
                 expect(view.setStatusMessage).toHaveBeenCalled();
                 expect(_converse.emit).toHaveBeenCalledWith('statusMessageChanged', msg);
-                expect(view.$el.find('a.choose-xmpp-status').hasClass('online')).toBe(true);
-                expect(view.$el.find('a.choose-xmpp-status').attr('data-value')).toBe(msg);
+                expect($(view.el).find('a.choose-xmpp-status').hasClass('online')).toBe(true);
+                expect($(view.el).find('a.choose-xmpp-status').attr('data-value')).toBe(msg);
                 done();
             }));
         });
@@ -106,10 +106,10 @@
             var panel = _converse.chatboxviews.get('controlbox').contactspanel;
             spyOn(panel, 'toggleContactForm').and.callThrough();
             panel.delegateEvents(); // We need to rebind all events otherwise our spy won't be called
-            panel.$el.find('a.toggle-xmpp-contact-form').click();
+            panel.el.querySelector('a.toggle-xmpp-contact-form').click();
             expect(panel.toggleContactForm).toHaveBeenCalled();
             // XXX: Awaiting more tests, close it again for now...
-            panel.$el.find('a.toggle-xmpp-contact-form').click();
+            panel.el.querySelector('a.toggle-xmpp-contact-form').click();
             done();
         }));
 
@@ -135,10 +135,10 @@
                 fullname: mock.pend_names[0]
             });
             test_utils.waitUntil(function () {
-                return _converse.rosterview.$el.find('.roster-group li:visible').length;
+                return $(_converse.rosterview.el).find('.roster-group li:visible').length;
             }, 700).then(function () {
                 // Checking that only one entry is created because both JID is same (Case sensitive check)
-                expect(_converse.rosterview.$el.find('li:visible').length).toBe(1);
+                expect($(_converse.rosterview.el).find('li:visible').length).toBe(1);
                 expect(_converse.rosterview.update).toHaveBeenCalled();
                 done();
             });
@@ -154,7 +154,7 @@
 
             test_utils.openControlBox();
             var cbview = _converse.chatboxviews.get('controlbox');
-            var $panels = cbview.$el.find('.controlbox-panes');
+            var $panels = $(cbview.el).find('.controlbox-panes');
             expect($panels.children().length).toBe(2);
             expect($panels.children().first().attr('id')).toBe('users');
             expect($panels.children().first().is(':visible')).toBe(true);
@@ -170,11 +170,11 @@
 
             test_utils.openControlBox();
             var cbview = _converse.chatboxviews.get('controlbox');
-            var $tabs = cbview.$el.find('#controlbox-tabs');
+            var $tabs = $(cbview.el).find('#controlbox-tabs');
             expect(cbview.model.get('active-panel')).toBe('users');
-            $tabs.find('li').last().find('a').click();
+            $tabs.find('li').last().find('a')[0].click();
             expect(cbview.model.get('active-panel')).toBe('chatrooms');
-            $tabs.find('li').first().find('a').click();
+            $tabs.find('li').first().find('a')[0].click();
             expect(cbview.model.get('active-panel')).toBe('users');
             done();
         }));

spec/converse.js

 (function (root, factory) {
     define([
+        "jquery.noconflict",
         "jasmine",
         "converse-core",
         "mock",
         "test-utils"], factory);
-} (this, function (jasmine, converse, mock, test_utils) {
+} (this, function ($, jasmine, converse, mock, test_utils) {
     var b64_sha1 = converse.env.b64_sha1;
     var _ = converse.env._;
 
@@ -292,7 +293,7 @@
                     expect(box instanceof Object).toBeTruthy();
                     expect(box.model.get('box_id')).toBe(b64_sha1(jid));
                     chatboxview = _converse.chatboxviews.get(jid);
-                    expect(chatboxview.$el.is(':visible')).toBeTruthy();
+                    expect($(chatboxview.el).is(':visible')).toBeTruthy();
                     // Test for multiple JIDs
                     var jid2 = mock.cur_names[1].replace(/ /g,'.').toLowerCase() + '@localhost';
                     test_utils.openChatBoxFor(_converse, jid2);
@@ -320,7 +321,7 @@
                     ['close', 'endOTR', 'focus', 'get', 'initiateOTR', 'is_chatroom', 'maximize', 'minimize', 'open', 'set']
                 );
                 chatboxview = _converse.chatboxviews.get(jid);
-                expect(chatboxview.$el.is(':visible')).toBeTruthy();
+                expect($(chatboxview.el).is(':visible')).toBeTruthy();
                 // Test for multiple JIDs
                 var jid2 = mock.cur_names[1].replace(/ /g,'.').toLowerCase() + '@localhost';
                 var list = _converse.api.chats.open([jid, jid2]);

spec/minchats.js

 (function (root, factory) {
-    define(["jasmine", "mock", "converse-core", "test-utils"], factory);
-} (this, function (jasmine, mock, converse, test_utils) {
+    define(["jquery.noconflict", "jasmine", "mock", "converse-core", "test-utils"], factory);
+} (this, function ($, jasmine, mock, converse, test_utils) {
     var _ = converse.env._;
     var $msg = converse.env.$msg;
 
@@ -22,10 +22,10 @@
             test_utils.openChatBoxFor(_converse, contact_jid);
             chatview = _converse.chatboxviews.get(contact_jid);
             expect(chatview.model.get('minimized')).toBeFalsy();
-            expect(_converse.minimized_chats.$el.is(':visible')).toBeFalsy();
-            chatview.$el.find('.toggle-chatbox-button').click();
+            expect($(_converse.minimized_chats.el).is(':visible')).toBeFalsy();
+            chatview.el.querySelector('.toggle-chatbox-button').click();
             expect(chatview.model.get('minimized')).toBeTruthy();
-            expect(_converse.minimized_chats.$el.is(':visible')).toBeTruthy();
+            expect($(_converse.minimized_chats.el).is(':visible')).toBeTruthy();
             expect(_converse.minimized_chats.keys().length).toBe(1);
             expect(_converse.minimized_chats.keys()[0]).toBe(contact_jid);
 
@@ -33,9 +33,9 @@
             test_utils.openChatBoxFor(_converse, contact_jid);
             chatview = _converse.chatboxviews.get(contact_jid);
             expect(chatview.model.get('minimized')).toBeFalsy();
-            chatview.$el.find('.toggle-chatbox-button').click();
+            chatview.el.querySelector('.toggle-chatbox-button').click();
             expect(chatview.model.get('minimized')).toBeTruthy();
-            expect(_converse.minimized_chats.$el.is(':visible')).toBeTruthy();
+            expect($(_converse.minimized_chats.el).is(':visible')).toBeTruthy();
             expect(_converse.minimized_chats.keys().length).toBe(2);
             expect(_.includes(_converse.minimized_chats.keys(), contact_jid)).toBeTruthy();
             done();
@@ -55,17 +55,17 @@
             var contact_jid = mock.cur_names[0].replace(/ /g,'.').toLowerCase() + '@localhost';
             test_utils.openChatBoxFor(_converse, contact_jid);
             var chatview = _converse.chatboxviews.get(contact_jid);
-            expect(_converse.minimized_chats.$el.is(':visible')).toBeFalsy();
+            expect($(_converse.minimized_chats.el).is(':visible')).toBeFalsy();
             chatview.model.set({'minimized': true});
-            expect(_converse.minimized_chats.$el.is(':visible')).toBeTruthy();
+            expect($(_converse.minimized_chats.el).is(':visible')).toBeTruthy();
             expect(_converse.minimized_chats.keys().length).toBe(1);
             expect(_converse.minimized_chats.keys()[0]).toBe(contact_jid);
-            expect(_converse.minimized_chats.$('.minimized-chats-flyout').is(':visible')).toBeTruthy();
+            expect($(_converse.minimized_chats.el.querySelector('.minimized-chats-flyout')).is(':visible')).toBeTruthy();
             expect(_converse.minimized_chats.toggleview.model.get('collapsed')).toBeFalsy();
-            _converse.minimized_chats.$('#toggle-minimized-chats').click();
+            _converse.minimized_chats.el.querySelector('#toggle-minimized-chats').click();
 
             return test_utils.waitUntil(function () {
-                return _converse.minimized_chats.$('.minimized-chats-flyout').is(':visible');
+                return $(_converse.minimized_chats.el.querySelector('.minimized-chats-flyout')).is(':visible');
             }, 500).then(function () {
                 expect(_converse.minimized_chats.toggleview.model.get('collapsed')).toBeTruthy();
                 done();
@@ -85,7 +85,7 @@
 
             var i, contact_jid, chatview, msg;
             _converse.minimized_chats.toggleview.model.set({'collapsed': true});
-            expect(_converse.minimized_chats.toggleview.$('.unread-message-count').is(':visible')).toBeFalsy();
+            expect($(_converse.minimized_chats.toggleview.el.querySelector('.unread-message-count')).is(':visible')).toBeFalsy();
             for (i=0; i<3; i++) {
                 contact_jid = mock.cur_names[i].replace(/ /g,'.').toLowerCase() + '@localhost';
                 test_utils.openChatBoxFor(_converse, contact_jid);
@@ -99,8 +99,8 @@
                 }).c('body').t('This message is sent to a minimized chatbox').up()
                 .c('active', {'xmlns': 'http://jabber.org/protocol/chatstates'}).tree();
                 _converse.chatboxes.onMessage(msg);
-                expect(_converse.minimized_chats.toggleview.$('.unread-message-count').is(':visible')).toBeTruthy();
-                expect(_converse.minimized_chats.toggleview.$('.unread-message-count').text()).toBe((i+1).toString());
+                expect($(_converse.minimized_chats.toggleview.el.querySelector('.unread-message-count')).is(':visible')).toBeTruthy();
+                expect($(_converse.minimized_chats.toggleview.el.querySelector('.unread-message-count')).text()).toBe((i+1).toString());
             }
             // Chat state notifications don't increment the unread messages counter
             // <composing> state
@@ -110,7 +110,7 @@
                 type: 'chat',
                 id: (new Date()).getTime()
             }).c('composing', {'xmlns': 'http://jabber.org/protocol/chatstates'}).tree());
-            expect(_converse.minimized_chats.toggleview.$('.unread-message-count').text()).toBe((i).toString());
+            expect($(_converse.minimized_chats.toggleview.el.querySelector('.unread-message-count')).text()).toBe((i).toString());
 
             // <paused> state
             _converse.chatboxes.onMessage($msg({
@@ -119,7 +119,7 @@
                 type: 'chat',
                 id: (new Date()).getTime()
             }).c('paused', {'xmlns': 'http://jabber.org/protocol/chatstates'}).tree());
-            expect(_converse.minimized_chats.toggleview.$('.unread-message-count').text()).toBe((i).toString());
+            expect($(_converse.minimized_chats.toggleview.el.querySelector('.unread-message-count')).text()).toBe((i).toString());
 
             // <gone> state
             _converse.chatboxes.onMessage($msg({
@@ -128,7 +128,7 @@
                 type: 'chat',
                 id: (new Date()).getTime()
             }).c('gone', {'xmlns': 'http://jabber.org/protocol/chatstates'}).tree());
-            expect(_converse.minimized_chats.toggleview.$('.unread-message-count').text()).toBe((i).toString());
+            expect($(_converse.minimized_chats.toggleview.el.querySelector('.unread-message-count')).text()).toBe((i).toString());
 
             // <inactive> state
             _converse.chatboxes.onMessage($msg({
@@ -137,7 +137,7 @@
                 type: 'chat',
                 id: (new Date()).getTime()
             }).c('inactive', {'xmlns': 'http://jabber.org/protocol/chatstates'}).tree());
-            expect(_converse.minimized_chats.toggleview.$('.unread-message-count').text()).toBe((i).toString());
+            expect($(_converse.minimized_chats.toggleview.el.querySelector('.unread-message-count')).text()).toBe((i).toString());
             done();
         }));
 
@@ -163,8 +163,8 @@
                     }).c('body').t(message).tree();
                 view.handleMUCMessage(msg);
 
-                expect(_converse.minimized_chats.toggleview.$('.unread-message-count').is(':visible')).toBeTruthy();
-                expect(_converse.minimized_chats.toggleview.$('.unread-message-count').text()).toBe('1');
+                expect($(_converse.minimized_chats.toggleview.el.querySelector('.unread-message-count')).is(':visible')).toBeTruthy();
+                expect($(_converse.minimized_chats.toggleview.el.querySelector('.unread-message-count')).text()).toBe('1');
                 done();
             });
         }));

spec/notification.js

 (function (root, factory) {
-    define(["jasmine", "mock", "converse-core", "test-utils", "utils"], factory);
-} (this, function (jasmine, mock, converse, test_utils, utils) {
+    define(["jquery.noconflict", "jasmine", "mock", "converse-core", "test-utils", "utils"], factory);
+} (this, function ($, jasmine, mock, converse, test_utils, utils) {
     "use strict";
     var _ = converse.env._;
     var $msg = converse.env.$msg;
@@ -46,7 +46,7 @@
                         test_utils.createContacts(_converse, 'current');
                         test_utils.openAndEnterChatRoom(_converse, 'lounge', 'localhost', 'dummy').then(function () {
                             var view = _converse.chatboxviews.get('lounge@localhost');
-                            if (!view.$el.find('.chat-area').length) { view.renderChatArea(); }
+                            if (!$(view.el).find('.chat-area').length) { view.renderChatArea(); }
                             var no_notification = false;
                             if (typeof window.Notification === 'undefined') {
                                 no_notification = true;
@@ -165,7 +165,7 @@
                         _converse.play_sounds = true;
                         spyOn(_converse, 'playSoundNotification');
                         var view = _converse.chatboxviews.get('lounge@localhost');
-                        if (!view.$el.find('.chat-area').length) { view.renderChatArea(); }
+                        if (!$(view.el).find('.chat-area').length) { view.renderChatArea(); }
                         var text = 'This message will play a sound because it mentions dummy';
                         var message = $msg({
                             from: 'lounge@localhost/otheruser',

spec/protocol.js

@@ -84,7 +84,7 @@
                     expect(_.isNull(form)).toBeTruthy();
 
                     // Click the "Add a contact" link.
-                    panel.$('.toggle-xmpp-contact-form').click();
+                    panel.el.querySelector('.toggle-xmpp-contact-form').click();
 
                     // Check that the form appears
                     form = panel.el.querySelector('form.add-xmpp-contact');
@@ -92,8 +92,8 @@
                     expect(_.includes(form.parentElement.classList, 'collapsed')).toBeFalsy();
 
                     // Fill in the form and submit
-                    $(form).find('input').val('contact@example.org');
-                    $(form).submit();
+                    form.querySelector('input').value = 'contact@example.org';
+                    form.querySelector('[type="submit"]').click();
 
                     /* In preparation for being able to render the contact in the
                     * user's client interface and for the server to keep track of the
@@ -496,7 +496,7 @@
 
                     var $header = $('a:contains("My contacts")');
                     // remove the first user
-                    $($header.parent().find('li .remove-xmpp-contact').get(0)).click();
+                    $header.parent().find('li .remove-xmpp-contact').get(0).click();
                     expect(window.confirm).toHaveBeenCalled();
 
                     /* Section 8.6 Removing a Roster Item and Cancelling All

src/config.js

@@ -20,9 +20,10 @@ require.config({
         "babel":                    "node_modules/requirejs-babel/babel-5.8.34.min",
         "backbone":                 "node_modules/backbone/backbone",
         "backbone.browserStorage":  "node_modules/backbone.browserStorage/backbone.browserStorage",
+        "backbone.nativeview":      "node_modules/backbone.nativeview/backbone.nativeview",
         "backbone.noconflict":      "src/backbone.noconflict",
-        "backbone.overview":        "node_modules/backbone.overview/dist/backbone.overview",
         "backbone.orderedlistview": "node_modules/backbone.overview/dist/backbone.orderedlistview",
+        "backbone.overview":        "node_modules/backbone.overview/dist/backbone.overview",
         "backbone.vdomview":        "node_modules/backbone.vdomview/dist/backbone.vdomview",
         "emojione":                 "node_modules/emojione/lib/js/emojione",
         "es6-promise":              "node_modules/es6-promise/dist/es6-promise.auto",

src/converse-bookmarks.js

@@ -385,7 +385,7 @@
                 }
             });
 
-            _converse.BookmarksView = Backbone.View.extend({
+            _converse.BookmarksView = Backbone.NativeView.extend({
                 tagName: 'div',
                 className: 'bookmarks-list rooms-list-container hidden',
                 events: {
@@ -491,7 +491,7 @@
 
                 toggleBookmarksList (ev) {
                     if (ev && ev.preventDefault) { ev.preventDefault(); }
-                    if (u.hasClass(ev.target, 'icon-opened')) {
+                    if (u.hasClass('icon-opened', ev.target)) {
                         u.slideIn(this.el.querySelector('.bookmarks'));
                         this.list_model.save({'toggle-state': _converse.CLOSED});
                         ev.target.classList.remove("icon-opened");

src/converse-chatview.js

@@ -142,7 +142,7 @@
                 }
             });
 
-            _converse.EmojiPickerView = Backbone.View.extend({
+            _converse.EmojiPickerView = Backbone.NativeView.extend({
                 className: 'emoji-picker-container toolbar-menu collapsed',
                 events: {
                     'click .emoji-category-picker li.emoji-category': 'chooseCategory',
@@ -231,7 +231,7 @@
                 }
             });
 
-            _converse.ChatBoxHeading = Backbone.View.extend({
+            _converse.ChatBoxHeading = Backbone.NativeView.extend({
 
                 initialize () {
                     this.model.on('change:image', this.render, this);
@@ -259,7 +259,7 @@
                 }
             });
 
-            _converse.ChatBoxView = Backbone.View.extend({
+            _converse.ChatBoxView = Backbone.NativeView.extend({
                 length: 200,
                 className: 'chatbox hidden',
                 is_chatroom: false,  // Leaky abstraction from MUC
@@ -425,8 +425,8 @@
                 getPreviousMessageElement (el) {
                     let prev_msg_el = el.previousSibling;
                     while (!_.isNull(prev_msg_el) &&
-                            !u.hasClass(prev_msg_el, 'message') &&
-                            !u.hasClass(prev_msg_el, 'chat-info')) {
+                            !u.hasClass('message', prev_msg_el) &&
+                            !u.hasClass('chat-info', prev_msg_el)) {
                         prev_msg_el = prev_msg_el.previousSibling
                     }
                     return prev_msg_el;
@@ -435,8 +435,8 @@
                 getLastMessageElement () {
                     let last_msg_el = this.content.lastElementChild;
                     while (!_.isNull(last_msg_el) &&
-                            !u.hasClass(last_msg_el, 'message') &&
-                            !u.hasClass(last_msg_el, 'chat-info')) {
+                            !u.hasClass('message', last_msg_el) &&
+                            !u.hasClass('chat-info', last_msg_el)) {
                         last_msg_el = last_msg_el.previousSibling
                     }
                     return last_msg_el;
@@ -445,8 +445,8 @@
                 getFirstMessageElement () {
                     let first_msg_el = this.content.firstElementChild;
                     while (!_.isNull(first_msg_el) &&
-                            !u.hasClass(first_msg_el, 'message') &&
-                            !u.hasClass(first_msg_el, 'chat-info')) {
+                            !u.hasClass('message', first_msg_el) &&
+                            !u.hasClass('chat-info', first_msg_el)) {
                         first_msg_el = first_msg_el.nextSibling
                     }
                     return first_msg_el;
@@ -860,6 +860,9 @@
                 },
 
                 toggleEmojiMenu (ev) {
+                    if (u.hasClass('insert-emoji', ev.target)) {
+                        return;
+                    }
                     if (!_.isUndefined(ev)) {
                         ev.stopPropagation();
                         if (ev.target.classList.contains('emoji-category-picker') ||

src/converse-controlbox.js

@@ -539,7 +539,7 @@
             });
 
 
-            _converse.ContactsPanel = Backbone.View.extend({
+            _converse.ContactsPanel = Backbone.NativeView.extend({
                 tagName: 'div',
                 className: 'controlbox-pane',
                 id: 'users',
@@ -699,7 +699,7 @@
             });
 
 
-            _converse.ControlBoxToggle = Backbone.View.extend({
+            _converse.ControlBoxToggle = Backbone.NativeView.extend({
                 tagName: 'a',
                 className: 'toggle-controlbox hidden',
                 id: 'toggle-controlbox',

src/converse-core.js

@@ -16,6 +16,7 @@
             "strophe",
             "pluggable",
             "backbone.noconflict",
+            "backbone.nativeview",
             "backbone.browserStorage"
     ], factory);
 }(this, function (sizzle, Promise, _, polyfill, i18n, utils, moment, Strophe, pluggable, Backbone) {

src/converse-headline.js

@@ -96,7 +96,7 @@
                 },
 
                 render () {
-                    this.$el.attr('id', this.model.get('box_id'))
+                    this.el.setAttribute('id', this.model.get('box_id'))
                     this.el.innerHTML = tpl_chatbox(
                         _.extend(this.model.toJSON(), {
                                 info_close: '',

src/converse-minimize.js

@@ -330,7 +330,7 @@
 
             _converse.api.promises.add('minimizedChatsInitialized');
 
-            _converse.MinimizedChatBoxView = Backbone.View.extend({
+            _converse.MinimizedChatBoxView = Backbone.NativeView.extend({
                 tagName: 'div',
                 className: 'chat-head',
                 events: {
@@ -497,7 +497,7 @@
             });
 
 
-            _converse.MinimizedChatsToggleView = Backbone.View.extend({
+            _converse.MinimizedChatsToggleView = Backbone.NativeView.extend({
                 el: '#toggle-minimized-chats',
 
                 initialize () {

src/converse-muc.js

@@ -415,7 +415,7 @@
             });
 
             _converse.ChatRoomView = _converse.ChatBoxView.extend({
-                /* Backbone View which renders a chat room, based upon the view
+                /* Backbone.NativeView which renders a chat room, based upon the view
                  * for normal one-on-one chat boxes.
                  */
                 length: 300,
@@ -506,7 +506,7 @@
                 },
 
                 createOccupantsView () {
-                    /* Create the ChatRoomOccupantsView Backbone.View
+                    /* Create the ChatRoomOccupantsView Backbone.NativeView
                      */
                     const model = new _converse.ChatRoomOccupants();
                     model.chatroomview = this;
@@ -2549,8 +2549,8 @@
                 },
             });
 
-            _converse.RoomsPanel = Backbone.View.extend({
-                /* Backbone View which renders the "Rooms" tab and accompanying
+            _converse.RoomsPanel = Backbone.NativeView.extend({
+                /* Backbone.NativeView which renders the "Rooms" tab and accompanying
                  * panel in the control box.
                  *
                  * In this panel, chat rooms can be listed, joined and new rooms

src/converse-profile.js

@@ -35,7 +35,7 @@
             const { _converse } = this,
                 { __ } = _converse;
 
-            _converse.XMPPStatusView = Backbone.View.extend({
+            _converse.XMPPStatusView = Backbone.NativeView.extend({
                 el: "form#set-xmpp-status",
                 events: {
                     "click a.choose-xmpp-status": "toggleOptions",
@@ -108,7 +108,7 @@
 
                 setStatus (ev) {
                     ev.preventDefault();
-                    const value = ev.currentTarget.getAttribute('data-value');
+                    const value = ev.target.getAttribute('data-value');
                     if (value === 'logout') {
                         _converse.logOut();
                     } else {

src/converse-register.js

@@ -167,7 +167,7 @@
                 }
             });
 
-            _converse.RegisterPanel = Backbone.View.extend({
+            _converse.RegisterPanel = Backbone.NativeView.extend({
                 tagName: 'div',
                 id: "converse-register-panel",
                 className: 'controlbox-pane fade-in',

src/converse-roomslist.js

@@ -48,7 +48,7 @@
                 }
             });
 
-            _converse.RoomsListView = Backbone.View.extend({
+            _converse.RoomsListView = Backbone.NativeView.extend({
                 tagName: 'div',
                 className: 'open-rooms-list rooms-list-container',
                 events: {

src/converse-rosterview.js

@@ -272,7 +272,7 @@
                 }
             });
 
-            _converse.RosterContactView = Backbone.View.extend({
+            _converse.RosterContactView = Backbone.NativeView.extend({
                 tagName: 'li',
                 className: 'hidden',
 

src/utils.js

@@ -161,7 +161,7 @@
         return obj;
     };
 
-    u.slideInAllElements = function (elements, duration=600) {
+    u.slideInAllElements = function (elements, duration=300) {
         return Promise.all(
             _.map(
                 elements,
@@ -178,7 +178,7 @@
         }
     };
 
-    u.hasClass = function (el, className) {
+    u.hasClass = function (className, el) {
         return _.includes(el.classList, className);
     };
 
@@ -208,7 +208,7 @@
                 resolve();
                 return;
             }
-            if (!u.hasClass(el, 'collapsed') && !u.hasClass(el, 'hidden')) {
+            if (!u.hasClass('collapsed', el) && !u.hasClass('hidden', el)) {
                 resolve();
                 return;
             }

tests/utils.js

@@ -6,6 +6,7 @@
     var $pres = converse_api.env.$pres;
     var $iq = converse_api.env.$iq;
     var Strophe = converse_api.env.Strophe;
+    var u = converse_api.env.utils;
     var utils = {};
 
     if (typeof window.Promise === 'undefined') {
@@ -54,21 +55,20 @@
     };
 
     utils.openControlBox = function () {
-        var $toggle = $(".toggle-controlbox");
-        if (!$("#controlbox").is(':visible')) {
-            if (!$toggle.is(':visible')) {
-                $toggle[0].classList.remove('hidden');
-                $toggle.click();
-            } else {
-                $toggle.click();
+        var toggle = document.querySelector(".toggle-controlbox");
+        if (!u.isVisible(document.querySelector("#controlbox"))) {
+            if (!u.isVisible(toggle)) {
+                u.removeClass('hidden', toggle);
             }
+            toggle.click();
         }
         return this;
     };
 
     utils.closeControlBox = function () {
-        if ($("#controlbox").is(':visible')) {
-            $("#controlbox").find(".close-chatbox-button").click();
+        var controlbox = document.querySelector("#controlbox");
+        if (u.isVisible(controlbox)) {
+            controlbox.querySelector(".close-chatbox-button").click();
         }
         return this;
     };
@@ -76,15 +76,15 @@
     utils.openContactsPanel = function (converse) {
         this.openControlBox(converse);
         var cbview = converse.chatboxviews.get('controlbox');
-        var $tabs = cbview.$el.find('#controlbox-tabs');
-        $tabs.find('li').first().find('a').click();
+        var $tabs = $(cbview.el).find('#controlbox-tabs');
+        $tabs.find('li').first().find('a')[0].click();
     };
 
     utils.openRoomsPanel = function (converse) {
         utils.openControlBox();
         var cbview = converse.chatboxviews.get('controlbox');
-        var $tabs = cbview.$el.find('#controlbox-tabs');
-        $tabs.find('li').last().find('a').click();
+        var $tabs = $(cbview.el).find('#controlbox-tabs');
+        $tabs.find('li').last().find('a')[0].click();
     };
 
     utils.openChatBoxes = function (converse, amount) {
@@ -105,9 +105,9 @@
         this.openControlBox(_converse);
         this.openRoomsPanel(_converse);
         var roomspanel = _converse.chatboxviews.get('controlbox').roomspanel;
-        roomspanel.$el.find('input.new-chatroom-name').val(room);
-        roomspanel.$el.find('input.new-chatroom-server').val(server);
-        roomspanel.$el.find('form').submit();
+        roomspanel.el.querySelector('input.new-chatroom-name').value = room;
+        roomspanel.el.querySelector('input.new-chatroom-server').value = server;
+        roomspanel.el.querySelector('form input[type="submit"]').click();
         this.closeControlBox(_converse);
     };
 
@@ -170,7 +170,7 @@
 
     utils.clearChatBoxMessages = function (converse, jid) {
         var view = converse.chatboxviews.get(jid);
-        view.$el.find('.chat-content').empty();
+        $(view.el).find('.chat-content').empty();
         view.model.messages.reset();
         view.model.messages.browserStorage._clear();
     };
@@ -254,8 +254,12 @@
     }
 
     utils.sendMessage = function (chatboxview, message) {
-        chatboxview.$el.find('.chat-textarea').val(message);
-        chatboxview.$el.find('textarea.chat-textarea').trigger($.Event('keypress', {keyCode: 13}));
+        chatboxview.el.querySelector('.chat-textarea').value = message;
+        chatboxview.keyPressed({
+            target: chatboxview.el.querySelector('textarea.chat-textarea'),
+            preventDefault: _.noop,
+            keyCode: 13
+        });
     };
     return utils;
 }));