Fix linting errors and failing tests

css/converse.css

@@ -1759,11 +1759,12 @@
       padding: 0.25em;
       height: 25px;
       display: block;
-      background-color: #50c282; }
+      background-color: #50c282;
+      color: white; }
       #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar a,
       #conversejs .chatbox .sendXMPPMessage .chat-toolbar a {
-        font-size: 16px;
         color: white;
+        font-size: 16px;
         text-decoration: none;
         text-shadow: none; }
       #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a,
@@ -1857,14 +1858,11 @@
         #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu,
         #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu {
           color: white; }
-        #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley,
-        #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley {
-          padding-left: 5px; }
-          #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
-          #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover,
-          #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
-          #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover {
-            background-color: #DCF9F6; }
+        #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
+        #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover,
+        #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
+        #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover {
+          background-color: #DCF9F6; }
         #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul,
         #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul {
           z-index: 99; }
@@ -2764,14 +2762,14 @@
         #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .button-primary,
         #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .button-primary {
           background-color: #E77051; }
-  #converse-embedded-chat .chatroom form.sendXMPPMessage .chat-toolbar,
-  #conversejs .chatroom form.sendXMPPMessage .chat-toolbar {
-    background-color: #FFECE7; }
-  #converse-embedded-chat .chatroom form.sendXMPPMessage .chat-textarea,
-  #conversejs .chatroom form.sendXMPPMessage .chat-textarea {
+  #converse-embedded-chat .chatroom .sendXMPPMessage .chat-toolbar,
+  #conversejs .chatroom .sendXMPPMessage .chat-toolbar {
+    background-color: #ed957e; }
+  #converse-embedded-chat .chatroom .sendXMPPMessage .chat-textarea,
+  #conversejs .chatroom .sendXMPPMessage .chat-textarea {
     border-bottom-right-radius: 0; }
-  #converse-embedded-chat .chatroom form.sendXMPPMessage .send-button,
-  #conversejs .chatroom form.sendXMPPMessage .send-button {
+  #converse-embedded-chat .chatroom .sendXMPPMessage .send-button,
+  #conversejs .chatroom .sendXMPPMessage .send-button {
     background-color: #E77051; }
   #converse-embedded-chat .chatroom .room-invite .invited-contact,
   #conversejs .chatroom .room-invite .invited-contact {

css/inverse.css

@@ -1824,11 +1824,12 @@ body {
       padding: 0.25em;
       height: 29px;
       display: block;
-      background-color: #50c282; }
+      background-color: #50c282;
+      color: white; }
       #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar a,
       #conversejs .chatbox .sendXMPPMessage .chat-toolbar a {
-        font-size: 18px;
         color: white;
+        font-size: 18px;
         text-decoration: none;
         text-shadow: none; }
       #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a,
@@ -1922,14 +1923,11 @@ body {
         #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu,
         #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu {
           color: white; }
-        #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley,
-        #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley {
-          padding-left: 5px; }
-          #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
-          #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover,
-          #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
-          #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover {
-            background-color: #DCF9F6; }
+        #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
+        #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover,
+        #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
+        #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover {
+          background-color: #DCF9F6; }
         #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul,
         #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul {
           z-index: 99; }
@@ -2021,13 +2019,13 @@ body {
   #conversejs .chatbox .chat-title {
     font-size: 26px;
     line-height: 26px; }
-  #conversejs .chatbox form.sendXMPPMessage ul {
+  #conversejs .chatbox .sendXMPPMessage ul {
     width: 100%; }
-  #conversejs .chatbox form.sendXMPPMessage .toggle-smiley {
+  #conversejs .chatbox .sendXMPPMessage .toggle-smiley {
     padding-left: 0.5em; }
-    #conversejs .chatbox form.sendXMPPMessage .toggle-smiley ul.emoji-toolbar .emoji-category-picker {
+    #conversejs .chatbox .sendXMPPMessage .toggle-smiley ul.emoji-toolbar .emoji-category-picker {
       margin-right: 5em; }
-    #conversejs .chatbox form.sendXMPPMessage .toggle-smiley ul.emoji-toolbar .emoji-category {
+    #conversejs .chatbox .sendXMPPMessage .toggle-smiley ul.emoji-toolbar .emoji-category {
       padding-left: 10px;
       padding-right: 10px; }
 
@@ -2928,14 +2926,14 @@ body {
         #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .button-primary,
         #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .button-primary {
           background-color: #E77051; }
-  #converse-embedded-chat .chatroom form.sendXMPPMessage .chat-toolbar,
-  #conversejs .chatroom form.sendXMPPMessage .chat-toolbar {
-    background-color: #FFECE7; }
-  #converse-embedded-chat .chatroom form.sendXMPPMessage .chat-textarea,
-  #conversejs .chatroom form.sendXMPPMessage .chat-textarea {
+  #converse-embedded-chat .chatroom .sendXMPPMessage .chat-toolbar,
+  #conversejs .chatroom .sendXMPPMessage .chat-toolbar {
+    background-color: #ed957e; }
+  #converse-embedded-chat .chatroom .sendXMPPMessage .chat-textarea,
+  #conversejs .chatroom .sendXMPPMessage .chat-textarea {
     border-bottom-right-radius: 0; }
-  #converse-embedded-chat .chatroom form.sendXMPPMessage .send-button,
-  #conversejs .chatroom form.sendXMPPMessage .send-button {
+  #converse-embedded-chat .chatroom .sendXMPPMessage .send-button,
+  #conversejs .chatroom .sendXMPPMessage .send-button {
     background-color: #E77051; }
   #converse-embedded-chat .chatroom .room-invite .invited-contact,
   #conversejs .chatroom .room-invite .invited-contact {

sass/_chatbox.scss

@@ -298,9 +298,10 @@
                 height: $toolbar-height;
                 display: block;
                 background-color: lighten($chat-head-color, 10%);
+                color: white;
                 a {
-                    font-size: $font-size-large;
                     color: white;
+                    font-size: $font-size-large;
                     text-decoration: none;
                     text-shadow: none;
                 }
@@ -395,7 +396,6 @@
                         color: white;
                     }
                     &.toggle-smiley {
-                        padding-left: 5px;
                         .emoji-toolbar {
                             .emoji-category-picker,
                             .emoji-skintone-picker {

sass/_chatrooms.scss

@@ -227,9 +227,9 @@
             }
         }
 
-        form.sendXMPPMessage {
+        .sendXMPPMessage {
             .chat-toolbar {
-                background-color: $chatroom-toolbar-color;
+                background-color: lighten($chatroom-head-color, 10%);
             }
             .chat-textarea {
                 border-bottom-right-radius: 0;

sass/inverse/_chatbox.scss

@@ -65,7 +65,7 @@
             line-height: $font-size-huge;
         }
 
-        form.sendXMPPMessage {
+        .sendXMPPMessage {
             ul {
                 width: 100%;
             }

spec/chatbox.js

@@ -419,7 +419,7 @@
                     expect(view).toBeDefined();
                     var $toolbar = $(view.el).find('ul.chat-toolbar');
                     expect($toolbar.length).toBe(1);
-                    expect($toolbar.children('li').length).toBe(3);
+                    expect($toolbar.children('li').length).toBe(4);
                     done();
                 }));
 

src/converse-chatview.js

@@ -345,7 +345,8 @@
                             'show_send_button': _converse.show_send_button,
                             'show_spoiler_button': _converse.visible_toolbar_buttons.spoiler,
                             'show_textarea': true,
-                            'show_toolbar': _converse.show_toolbar
+                            'show_toolbar': _converse.show_toolbar,
+                            'unread_msgs': __('You have unread messages')
                         }));
                     this.renderToolbar();
                 },
@@ -1077,11 +1078,15 @@
                     return this;
                 },
 
+                renderEmojiPicker () {
+                    this.emoji_picker_view.render();
+                },
+
                 insertEmojiPicker () {
-                    var toggle = this.el.querySelector('.toggle-smiley');
-                    if (!_.isNull(toggle)) {
-                        toggle.innerHTML = '';
-                        toggle.appendChild(this.emoji_picker_view.render().el);
+                    var picker_el = this.el.querySelector('.emoji-picker');
+                    if (!_.isNull(picker_el)) {
+                        picker_el.innerHTML = '';
+                        picker_el.appendChild(this.emoji_picker_view.el);
                     }
                 },
 
@@ -1105,7 +1110,7 @@
                     }
                     this.setChatState(_converse.ACTIVE);
                     this.scrollDown();
-                    this.renderToolbar();
+                    this.renderEmojiPicker();
                     if (focus) {
                         this.focus();
                     }

src/converse-controlbox.js

@@ -688,7 +688,7 @@
                     ev.preventDefault();
                     const input = ev.target.querySelector('input');
                     const jid = input.value;
-                    if (!jid || _.filter(jid.split('@')).length < 2) {
+                    if (!jid || _.compact(jid.split('@')).length < 2) {
                         this.el.querySelector('.search-xmpp div').innerHTML =
                             this.generateAddContactHTML({
                                 error_message: __('Please enter a valid XMPP address'),

src/converse-muc.js

@@ -486,8 +486,7 @@
                 },
 
                 renderChatArea () {
-                    /* Render the UI container in which chat room messages will
-                     * appear.
+                    /* Render the UI container in which chat room messages will appear.
                      */
                     if (_.isNull(this.el.querySelector('.chat-area'))) {
                         const container_el = this.el.querySelector('.chatroom-body');
@@ -583,8 +582,8 @@
                 afterConnected () {
                     if (this.model.get('connection_status') === converse.ROOMSTATUS.ENTERED) {
                         this.setChatState(_converse.ACTIVE);
-                        this.renderEmojiPicker();
                         this.scrollDown();
+                        this.renderEmojiPicker();
                         this.focus();
                     }
                 },
@@ -2488,7 +2487,7 @@
                     evt.preventDefault();
                     const el = evt.target.querySelector('input.invited-contact'),
                           jid = el.value;
-                    if (!jid || _.filter(jid.split('@')).length < 2) {
+                    if (!jid || _.compact(jid.split('@')).length < 2) {
                         evt.target.outerHTML = tpl_chatroom_invite({
                             'error_message': __('Please enter a valid XMPP username'),
                             'label_invitation': __('Invite'),

src/templates/chatroom_toolbar.html

@@ -1,7 +1,8 @@
 {[ if (o.use_emoji)  { ]}
-    <li class="toggle-smiley icon-happy" title="{{{o.label_insert_smiley}}}">
-        <ul class="emoji-picker"></ul>
-    </li>
+<li class="toggle-toolbar-menu toggle-smiley">
+    <a class="icon-happy" title="{{{o.label_insert_smiley}}}"></a>
+    <span class="emoji-picker"></span>
+</li>
 {[ } ]}
 {[ if (o.show_call_button)  { ]}
 <li class="toggle-call"><a class="icon-phone" title="{{{o.label_start_call}}}"></a></li>

src/templates/toolbar.html

@@ -1,13 +1,14 @@
 {[ if (o.use_emoji)  { ]}
-<li class="toggle-toolbar-menu toggle-smiley icon-happy" title="{{{o.label_insert_smiley}}}">
-    <ul class="emoji-picker"></ul>
+<li class="toggle-toolbar-menu toggle-smiley">
+    <a class="icon-happy" title="{{{o.label_insert_smiley}}}"></a>
+    <span class="emoji-picker"></span>
 </li>
 {[ } ]}
 {[ if (o.show_spoiler_button)  { ]}
 <li class="toggle-compose-spoiler">
     <a class="
-        {[ if (o.sending_spoiler)  { ]} icon-eye-blocked {[ } ]}
-        {[ if (!o.sending_spoiler)  { ]} icon-eye {[ } ]}"
+        {[ if (o.composing_spoiler)  { ]} icon-eye-blocked {[ } ]}
+        {[ if (!o.composing_spoiler)  { ]} icon-eye {[ } ]}"
         title="{{ o.label_toggle_spoiler }}"></a>
 </li>
 {[ } ]}

src/utils.js

@@ -364,7 +364,7 @@
     };
 
     u.isValidJID = function (jid) {
-        return _.filter(jid.split('@')).length === 2 && !jid.startsWith('@') && !jid.endsWith('@');
+        return _.compact(jid.split('@')).length === 2 && !jid.startsWith('@') && !jid.endsWith('@');
     };
 
     u.isValidMUCJID = function (jid) {

tests/utils.js

@@ -68,7 +68,10 @@
     utils.closeControlBox = function () {
         var controlbox = document.querySelector("#controlbox");
         if (u.isVisible(controlbox)) {
-            controlbox.querySelector(".close-chatbox-button").click();
+            var button = controlbox.querySelector(".close-chatbox-button");
+            if (!_.isNull(button)) {
+                button.click();
+            }
         }
         return this;
     };