Merge branch 'master' into emoji

.gitignore

@@ -10,6 +10,7 @@
 .project
 .pydevproject
 analytics.js
+inverse-analytics.js
 .idea
 eggs
 .Python
@@ -49,19 +50,7 @@ develop-eggs
 .DS_Store
 
 # Builds
-dist/converse-no-dependencies.min.js
-dist/converse-no-locales-no-otr.js
-dist/converse-no-locales-no-otr.min.js
-dist/converse-no-otr.js
-dist/converse-no-otr.min.js
-dist/converse.min.js
-dist/inverse.min.js
-dist/converse-no-jquery.js
-dist/converse-no-jquery.min.js
-dist/converse-mobile.min.js
-dist/converse-muc-embedded.js
-dist/converse-muc-embedded.min.js
-
+dist/*
 css/*.map
 css/*.min.css
 .sv?

.travis.yml

@@ -1,7 +1,6 @@
 dist: trusty
 language: node_js
 cache:
-    bundler: true
     directories:
         - node_modules
 addons:

CHANGES.md

@@ -3,6 +3,8 @@
 ## 3.1.0 (Unreleased)
 
 - Add support for Emojis (uses <a href="https://www.emojione.com/">Emojione</a>).
+- Support for [XMPP-0313 Message Archive Management](https://xmpp.org/extensions/xep-0313.html)
+  has been upgraded to version 2. [jcbrand]
 - New non-core plugin `converse-singleton` which ensures that no more than
   one chat is visible at any given time. Used in the mobile build:
   `converse-mobile.js` and makes the unread messages counter possible there.

Makefile

@@ -1,16 +1,17 @@
 # You can set these variables from the command line.
+BABEL			?= node_modules/.bin/babel
 BOURBON_TEMPLATES = ./node_modules/bourbon/app/assets/stylesheets/ 
 BUILDDIR		= ./docs
 BUNDLE		  	?= ./.bundle/bin/bundle
+CHROMIUM		?= ./node_modules/.bin/run-headless-chromium
+CLEANCSS		?= ./node_modules/clean-css-cli/bin/cleancss --skip-rebase
+ESLINT		  	?= ./node_modules/.bin/eslint
 GRUNT		   	?= ./node_modules/.bin/grunt
 HTTPSERVE	   	?= ./node_modules/.bin/http-server
-ESLINT		  	?= ./node_modules/.bin/eslint
 PAPER		   	=
-CHROMIUM		?= ./node_modules/.bin/run-headless-chromium
-RJS			 	?= ./node_modules/.bin/r.js
 PO2JSON		 	?= ./node_modules/.bin/po2json
+RJS			 	?= ./node_modules/.bin/r.js
 SASS			?= ./.bundle/bin/sass
-CLEANCSS		?= ./node_modules/clean-css-cli/bin/cleancss --skip-rebase
 SPHINXBUILD	 	?= ./bin/sphinx-build
 SPHINXOPTS	  	=
 
@@ -147,6 +148,10 @@ css/mobile.min.css:: stamp-npm sass/*
 watch: stamp-bundler
 	$(SASS) --watch -I ./node_modules/bourbon/app/assets/stylesheets/ sass/converse.scss:css/converse.css sass/_muc_embedded.scss:css/converse-muc-embedded.css
 
+.PHONY: watchjs
+watchjs: stamp-npm
+	$(BABEL) --source-maps --watch=./src --out-dir=./build
+
 BUILDS = dist/converse.js \
 		 dist/converse.min.js \
          dist/inverse.js \

css/converse.css

@@ -1349,7 +1349,7 @@
   #converse-embedded-chat .button-cancel,
   #conversejs .button-cancel {
     color: white;
-    background-color: #D24E2B; }
+    background-color: #818479; }
   #converse-embedded-chat form.pure-form.converse-form,
   #conversejs form.pure-form.converse-form {
     background: white;
@@ -1448,7 +1448,7 @@
     float: left; }
   #converse-embedded-chat .chat-head.chat-head-chatbox,
   #conversejs .chat-head.chat-head-chatbox {
-    background-color: #E7A151; }
+    background-color: #3AA569; }
   #converse-embedded-chat .chat-head .user-custom-message,
   #conversejs .chat-head .user-custom-message {
     color: white;
@@ -1478,7 +1478,7 @@
   #converse-embedded-chat .chatbox-btn.button-on,
   #conversejs .chatbox-btn.button-on {
     background-color: white;
-    color: #E7A151; }
+    color: #3AA569; }
 #converse-embedded-chat .chatbox,
 #conversejs .chatbox {
   display: block;
@@ -1556,7 +1556,9 @@
       padding: 5px; }
     #converse-embedded-chat .chatbox .chat-body .chat-info,
     #conversejs .chatbox .chat-body .chat-info {
-      color: #D24E2B;
+      line-height: 14px;
+      color: #3AA569;
+      font-size: 12px;
       margin: 0.3em; }
       #converse-embedded-chat .chatbox .chat-body .chat-info.chat-event,
       #conversejs .chatbox .chat-body .chat-info.chat-event {
@@ -1572,35 +1574,31 @@
         margin-top: 1em; }
     #converse-embedded-chat .chatbox .chat-body .chat-image,
     #conversejs .chatbox .chat-body .chat-image {
-      max-width: 100%;
-      max-height: 100%; }
+      max-height: 24em;
+      max-width: 100%; }
     #converse-embedded-chat .chatbox .chat-body .chat-action,
     #conversejs .chatbox .chat-body .chat-action {
       font-style: italic; }
     #converse-embedded-chat .chatbox .chat-body .chat-message,
     #conversejs .chatbox .chat-body .chat-message {
       margin: 0.3em; }
-      #converse-embedded-chat .chatbox .chat-body .chat-message span,
-      #conversejs .chatbox .chat-body .chat-message span {
-        display: inline-block; }
-        #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-author,
-        #conversejs .chatbox .chat-body .chat-message span.chat-msg-author {
-          max-width: 100%;
-          font-weight: bold;
-          white-space: nowrap;
-          float: left;
-          text-overflow: ellipsis;
-          overflow: hidden; }
-        #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-them,
-        #conversejs .chatbox .chat-body .chat-message span.chat-msg-them {
-          color: #3AA569; }
-        #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-me,
-        #conversejs .chatbox .chat-body .chat-message span.chat-msg-me {
-          color: #578EA9; }
-        #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-content,
-        #conversejs .chatbox .chat-body .chat-message span.chat-msg-content {
-          max-width: 100%;
-          word-wrap: break-word; }
+      #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-author,
+      #conversejs .chatbox .chat-body .chat-message span.chat-msg-author {
+        font-weight: bold;
+        white-space: nowrap;
+        float: left;
+        text-overflow: ellipsis;
+        overflow: hidden; }
+      #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-them,
+      #conversejs .chatbox .chat-body .chat-message span.chat-msg-them {
+        color: #E77051; }
+      #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-me,
+      #conversejs .chatbox .chat-body .chat-message span.chat-msg-me {
+        color: #578EA9; }
+      #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-content,
+      #conversejs .chatbox .chat-body .chat-message span.chat-msg-content {
+        max-width: 100%;
+        word-wrap: break-word; }
     #converse-embedded-chat .chatbox .chat-body .delayed .chat-msg-them,
     #conversejs .chatbox .chat-body .delayed .chat-msg-them {
       color: #FB5D50; }
@@ -1612,12 +1610,13 @@
     position: absolute;
     width: 100%;
     cursor: pointer;
-    background-color: #E7A151;
+    background-color: #3AA569;
     color: #FCFDFD;
-    padding: 0.3em;
+    padding: 0.5em;
     font-size: 0.9em;
     text-align: center;
-    z-index: 20; }
+    z-index: 20;
+    white-space: nowrap; }
   #converse-embedded-chat .chatbox .chat-content,
   #conversejs .chatbox .chat-content {
     position: relative;
@@ -1649,7 +1648,6 @@
     border-bottom-left-radius: 4px;
     border-bottom-right-radius: 4px;
     background-clip: padding-box;
-    background: white;
     border-top: 1px solid #BBB;
     border: 0;
     margin: 0;
@@ -1680,7 +1678,7 @@
       left: 3px;
       width: -webkit-calc(100% - 6px);
       width: calc(100% - 6px);
-      background-color: #E7A151;
+      background-color: #3AA569;
       color: white;
       font-size: 80%;
       height: 27px;
@@ -1688,28 +1686,34 @@
     #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar,
     #conversejs .chatbox form.sendXMPPMessage .chat-toolbar {
       box-sizing: border-box;
-      font-size: 14px;
       margin: 0;
       padding: 5px;
       height: 25px;
       display: block;
-      background-color: #FFF5EE; }
+      background-color: #E7FBF0; }
       #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar a,
       #conversejs .chatbox form.sendXMPPMessage .chat-toolbar a {
         font-size: 14px;
-        color: #578EA9;
+        color: #818479;
         text-decoration: none;
         text-shadow: none; }
+      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toolbar-picker-panel a,
+      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toolbar-picker-panel a {
+        color: #578EA9; }
       #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text,
       #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text {
         font-size: 12px;
-        padding-right: 3px;
-        text-shadow: 0 1px 0 white; }
+        padding-right: 3px; }
       #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a,
       #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted,
       #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a,
       #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted {
-        color: #D24E2B; }
+        color: #818479; }
+        #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-picker-panel a,
+        #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted .toolbar-picker-panel a,
+        #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-picker-panel a,
+        #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted .toolbar-picker-panel a {
+          color: #578EA9; }
       #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unverified a,
       #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unverified,
       #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unverified a,
@@ -1759,7 +1763,7 @@
         margin-left: 0; }
       #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley,
       #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley {
-        color: #578EA9;
+        color: #818479;
         padding-left: 5px; }
         #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul,
         #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul {
@@ -1994,11 +1998,12 @@
           display: block;
           margin-left: 5px; }
         #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom p.room-info {
+          line-height: 16px;
           margin: 0;
-          padding: 0;
           display: block;
           white-space: normal; }
         #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom div.room-info {
+          padding: 0.3em 0;
           clear: left;
           width: 100%; }
   #conversejs #controlbox .dropdown {
@@ -2040,7 +2045,6 @@
     text-align: center;
     display: inline;
     overflow: hidden;
-    font-size: 12px;
     list-style-type: none;
     /* single tab */ }
     #conversejs #controlbox #controlbox-tabs li {
@@ -2064,7 +2068,7 @@
         text-align: center;
         text-decoration: none; }
         #conversejs #controlbox #controlbox-tabs li a.contacts-tab .msgs-indicator {
-          background-color: #E7A151; }
+          background-color: #3AA569; }
         #conversejs #controlbox #controlbox-tabs li a.rooms-tab .msgs-indicator {
           background-color: #E77051; }
         #conversejs #controlbox #controlbox-tabs li a .msgs-indicator {
@@ -2298,7 +2302,7 @@
           #conversejs #converse-roster .roster-contacts dd .open-chat.unread-msgs .contact-name {
             width: 70%; }
         #conversejs #converse-roster .roster-contacts dd .open-chat .msgs-indicator {
-          background-color: #E7A151;
+          background-color: #3AA569;
           opacity: 1;
           border-radius: 10%;
           padding: 0 0.2em;
@@ -2421,11 +2425,14 @@
       background-color: white;
       border-top: 0;
       width: 100%; }
+      #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-info,
+      #conversejs .chatroom .box-flyout .chatroom-body .chat-info {
+        color: #E77051; }
       #converse-embedded-chat .chatroom .box-flyout .chatroom-body .mentioned,
       #conversejs .chatroom .box-flyout .chatroom-body .mentioned {
         font-weight: bold; }
-      #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-msg-room,
-      #conversejs .chatroom .box-flyout .chatroom-body .chat-msg-room {
+      #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them,
+      #conversejs .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them {
         color: #3AA569; }
       #converse-embedded-chat .chatroom .box-flyout .chatroom-body .disconnect-msg,
       #conversejs .chatroom .box-flyout .chatroom-body .disconnect-msg {
@@ -2475,7 +2482,10 @@
           width: calc(30% - 1em); }
         #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul,
         #conversejs .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul {
-          padding: 0.2em; }
+          padding: 0; }
+          #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul li,
+          #conversejs .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul li {
+            padding: .5em; }
         #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul,
         #conversejs .chatroom .box-flyout .chatroom-body .occupants ul {
           padding: 0.3em 0;
@@ -2534,8 +2544,7 @@
       #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container,
       #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container {
         background-color: white;
-        border-bottom-left-radius: 4px;
-        border-bottom-right-radius: 4px;
+        border-radius: 4px;
         border: 0;
         color: #818479;
         font-size: 14px;
@@ -2559,6 +2568,12 @@
         #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=button],
         #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=submit] {
           margin: 0 0.5em; }
+        #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 {
     border-bottom-right-radius: 0; }
@@ -2572,7 +2587,15 @@
     border: 1px solid #999; }
 
 #conversejs .chatbox.headlines .chat-head.chat-head-chatbox {
-  background-color: #3AA569; }
+  background-color: #E7A151; }
+#conversejs .chatbox.headlines .chat-body {
+  background-color: #E7A151;
+  border-radius: 4px; }
+  #conversejs .chatbox.headlines .chat-body .chat-message span.chat-msg-them {
+    color: #D2842B; }
+#conversejs .chatbox.headlines .chat-content {
+  height: 100%;
+  border-radius: 4px; }
 
 #conversejs #minimized-chats {
   border-top-left-radius: 4px;
@@ -2685,7 +2708,6 @@
     left: 1em;
     width: 0;
     height: 0;
-    padding: .4em;
     background: white;
     border: inherit;
     border-right: 0;
@@ -2697,22 +2719,22 @@
     text-overflow: ellipsis;
     overflow-x: hidden;
     position: relative;
-    padding: .2em .5em;
     cursor: pointer; }
   #converse-embedded-chat div.awesomplete > ul > li:hover,
   #conversejs div.awesomplete > ul > li:hover {
-    background: #b8d3e0;
-    color: black; }
+    background: #E77051;
+    color: white; }
   #converse-embedded-chat div.awesomplete > ul > li[aria-selected="true"],
   #conversejs div.awesomplete > ul > li[aria-selected="true"] {
     background: #3d6d8f;
     color: white; }
   #converse-embedded-chat div.awesomplete mark,
   #conversejs div.awesomplete mark {
-    background: #eaff00; }
+    background: #FFB9A7; }
   #converse-embedded-chat div.awesomplete li:hover mark,
   #conversejs div.awesomplete li:hover mark {
-    background: #b5d100; }
+    background: #A53214;
+    color: white; }
   #converse-embedded-chat div.awesomplete li[aria-selected="true"] mark,
   #conversejs div.awesomplete li[aria-selected="true"] mark {
     background: #3d6b00;

css/inverse.css

@@ -1341,7 +1341,7 @@
   #converse-embedded-chat .button-primary,
   #conversejs .button-primary {
     color: white;
-    background-color: #3AA569; }
+    background-color: #E7A151; }
   #converse-embedded-chat .button-secondary,
   #conversejs .button-secondary {
     color: white;
@@ -1349,7 +1349,7 @@
   #converse-embedded-chat .button-cancel,
   #conversejs .button-cancel {
     color: white;
-    background-color: #D24E2B; }
+    background-color: #818479; }
   #converse-embedded-chat form.pure-form.converse-form,
   #conversejs form.pure-form.converse-form {
     background: white;
@@ -1483,7 +1483,7 @@ body {
 #conversejs .chat-head {
   color: #ffffff;
   font-size: 100%;
-  height: 55px;
+  height: 62px;
   margin: 0;
   padding: 0.5em;
   position: relative; }
@@ -1494,7 +1494,7 @@ body {
     float: left; }
   #converse-embedded-chat .chat-head.chat-head-chatbox,
   #conversejs .chat-head.chat-head-chatbox {
-    background-color: #E7A151; }
+    background-color: #3AA569; }
   #converse-embedded-chat .chat-head .user-custom-message,
   #conversejs .chat-head .user-custom-message {
     color: white;
@@ -1524,7 +1524,7 @@ body {
   #converse-embedded-chat .chatbox-btn.button-on,
   #conversejs .chatbox-btn.button-on {
     background-color: white;
-    color: #E7A151; }
+    color: #3AA569; }
 #converse-embedded-chat .chatbox,
 #conversejs .chatbox {
   display: block;
@@ -1582,8 +1582,8 @@ body {
     border-bottom-right-radius: 7px;
     border-top: 0;
     height: 289px;
-    height: -webkit-calc(100% - 55px);
-    height: calc(100% - 55px); }
+    height: -webkit-calc(100% - 62px);
+    height: calc(100% - 62px); }
     @media screen and (max-height: 450px) {
       #converse-embedded-chat .chatbox .chat-body,
       #conversejs .chatbox .chat-body {
@@ -1602,7 +1602,9 @@ body {
       padding: 5px; }
     #converse-embedded-chat .chatbox .chat-body .chat-info,
     #conversejs .chatbox .chat-body .chat-info {
-      color: #D24E2B;
+      line-height: 20px;
+      color: #3AA569;
+      font-size: 14px;
       margin: 0.3em; }
       #converse-embedded-chat .chatbox .chat-body .chat-info.chat-event,
       #conversejs .chatbox .chat-body .chat-info.chat-event {
@@ -1618,35 +1620,31 @@ body {
         margin-top: 1em; }
     #converse-embedded-chat .chatbox .chat-body .chat-image,
     #conversejs .chatbox .chat-body .chat-image {
-      max-width: 100%;
-      max-height: 100%; }
+      max-height: 24em;
+      max-width: 100%; }
     #converse-embedded-chat .chatbox .chat-body .chat-action,
     #conversejs .chatbox .chat-body .chat-action {
       font-style: italic; }
     #converse-embedded-chat .chatbox .chat-body .chat-message,
     #conversejs .chatbox .chat-body .chat-message {
       margin: 0.3em; }
-      #converse-embedded-chat .chatbox .chat-body .chat-message span,
-      #conversejs .chatbox .chat-body .chat-message span {
-        display: inline-block; }
-        #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-author,
-        #conversejs .chatbox .chat-body .chat-message span.chat-msg-author {
-          max-width: 100%;
-          font-weight: bold;
-          white-space: nowrap;
-          float: left;
-          text-overflow: ellipsis;
-          overflow: hidden; }
-        #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-them,
-        #conversejs .chatbox .chat-body .chat-message span.chat-msg-them {
-          color: #3AA569; }
-        #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-me,
-        #conversejs .chatbox .chat-body .chat-message span.chat-msg-me {
-          color: #578EA9; }
-        #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-content,
-        #conversejs .chatbox .chat-body .chat-message span.chat-msg-content {
-          max-width: 100%;
-          word-wrap: break-word; }
+      #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-author,
+      #conversejs .chatbox .chat-body .chat-message span.chat-msg-author {
+        font-weight: bold;
+        white-space: nowrap;
+        float: left;
+        text-overflow: ellipsis;
+        overflow: hidden; }
+      #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-them,
+      #conversejs .chatbox .chat-body .chat-message span.chat-msg-them {
+        color: #E77051; }
+      #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-me,
+      #conversejs .chatbox .chat-body .chat-message span.chat-msg-me {
+        color: #578EA9; }
+      #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-content,
+      #conversejs .chatbox .chat-body .chat-message span.chat-msg-content {
+        max-width: 100%;
+        word-wrap: break-word; }
     #converse-embedded-chat .chatbox .chat-body .delayed .chat-msg-them,
     #conversejs .chatbox .chat-body .delayed .chat-msg-them {
       color: #FB5D50; }
@@ -1658,12 +1656,13 @@ body {
     position: absolute;
     width: 100%;
     cursor: pointer;
-    background-color: #E7A151;
+    background-color: #3AA569;
     color: #FCFDFD;
-    padding: 0.3em;
+    padding: 0.5em;
     font-size: 0.9em;
     text-align: center;
-    z-index: 20; }
+    z-index: 20;
+    white-space: nowrap; }
   #converse-embedded-chat .chatbox .chat-content,
   #conversejs .chatbox .chat-content {
     position: relative;
@@ -1675,10 +1674,10 @@ body {
     background-color: #ffffff;
     line-height: 1.3em;
     height: 206px;
-    height: calc(100% - 96px); }
+    height: calc(100% - 100px); }
   #converse-embedded-chat .chatbox .chat-content-sendbutton,
   #conversejs .chatbox .chat-content-sendbutton {
-    height: calc(100% - 128px); }
+    height: calc(100% - 132px); }
   #converse-embedded-chat .chatbox .dropdown,
   #conversejs .chatbox .dropdown {
     /* status dropdown styles */
@@ -1695,13 +1694,12 @@ body {
     border-bottom-left-radius: 7px;
     border-bottom-right-radius: 7px;
     background-clip: padding-box;
-    background: white;
     border-top: 1px solid #BBB;
     border: 0;
     margin: 0;
     padding: 0;
     position: relative;
-    height: 95px;
+    height: 99px;
     min-width: 100%; }
     @media screen and (max-height: 450px) {
       #converse-embedded-chat .chatbox form.sendXMPPMessage,
@@ -1726,7 +1724,7 @@ body {
       left: 3px;
       width: -webkit-calc(100% - 6px);
       width: calc(100% - 6px);
-      background-color: #E7A151;
+      background-color: #3AA569;
       color: white;
       font-size: 80%;
       height: 27px;
@@ -1734,28 +1732,34 @@ body {
     #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar,
     #conversejs .chatbox form.sendXMPPMessage .chat-toolbar {
       box-sizing: border-box;
-      font-size: 16px;
       margin: 0;
       padding: 5px;
-      height: 25px;
+      height: 29px;
       display: block;
-      background-color: #FFF5EE; }
+      background-color: #E7FBF0; }
       #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar a,
       #conversejs .chatbox form.sendXMPPMessage .chat-toolbar a {
         font-size: 16px;
-        color: #578EA9;
+        color: #818479;
         text-decoration: none;
         text-shadow: none; }
+      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toolbar-picker-panel a,
+      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toolbar-picker-panel a {
+        color: #578EA9; }
       #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text,
       #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text {
         font-size: 12px;
-        padding-right: 3px;
-        text-shadow: 0 1px 0 white; }
+        padding-right: 3px; }
       #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a,
       #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted,
       #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a,
       #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted {
-        color: #D24E2B; }
+        color: #818479; }
+        #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-picker-panel a,
+        #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted .toolbar-picker-panel a,
+        #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-picker-panel a,
+        #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted .toolbar-picker-panel a {
+          color: #578EA9; }
       #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unverified a,
       #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unverified,
       #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unverified a,
@@ -1805,7 +1809,7 @@ body {
         margin-left: 0; }
       #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley,
       #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley {
-        color: #578EA9;
+        color: #818479;
         padding-left: 5px; }
         #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul,
         #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul {
@@ -1876,8 +1880,8 @@ body {
   font-size: 18px;
   margin: 0 0.3em; }
 #conversejs .flyout {
-  border: 1em solid #E7A151;
-  border-top: 0.8em solid #E7A151;
+  border: 1.2em solid #3AA569;
+  border-top: 0.8em solid #3AA569;
   border-radius: 0;
   bottom: 0; }
 #conversejs .chat-head {
@@ -1886,7 +1890,7 @@ body {
   #conversejs .chat-head .user-custom-message {
     font-size: 66%;
     height: auto;
-    line-height: 16px; }
+    line-height: 22px; }
   #conversejs .chat-head.chat-head-chatbox .close-chatbox-button {
     display: none; }
   #conversejs .chat-head .avatar {
@@ -1898,15 +1902,19 @@ body {
   width: calc(100% - 250px);
   margin: 0; }
   #conversejs .chatbox .box-flyout {
-    background-color: #E7A151;
+    background-color: #3AA569;
     width: -webkit-calc(100% - 250px);
     width: calc(100% - 250px);
     box-shadow: none;
     min-width: auto; }
   #conversejs .chatbox .chat-body {
-    background-color: #E7A151;
+    background-color: #3AA569;
     border-top-left-radius: 7px;
     border-top-right-radius: 7px; }
+    #conversejs .chatbox .chat-body .chat-message {
+      font-size: 14px;
+      line-height: 20px;
+      margin: 0.5em 0; }
   #conversejs .chatbox .chat-content {
     padding: 0 1em 1em 1em;
     border-top-left-radius: 7px;
@@ -1934,7 +1942,7 @@ body {
     border-top-left-radius: 7px;
     border-top-right-radius: 7px;
     color: white;
-    height: 55px;
+    height: 62px;
     margin: 0;
     padding: 6px 6px 6px 0; }
     @media screen and (max-height: 450px) {
@@ -2074,11 +2082,12 @@ body {
           display: block;
           margin-left: 5px; }
         #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom p.room-info {
+          line-height: 22px;
           margin: 0;
-          padding: 0;
           display: block;
           white-space: normal; }
         #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom div.room-info {
+          padding: 0.3em 0;
           clear: left;
           width: 100%; }
   #conversejs #controlbox .dropdown {
@@ -2120,7 +2129,6 @@ body {
     text-align: center;
     display: inline;
     overflow: hidden;
-    font-size: 12px;
     list-style-type: none;
     /* single tab */ }
     #conversejs #controlbox #controlbox-tabs li {
@@ -2138,13 +2146,13 @@ body {
         color: #818479;
         display: block;
         font-size: 14px;
-        height: 54px;
-        line-height: 54px;
+        height: 61px;
+        line-height: 61px;
         margin: 0;
         text-align: center;
         text-decoration: none; }
         #conversejs #controlbox #controlbox-tabs li a.contacts-tab .msgs-indicator {
-          background-color: #E7A151; }
+          background-color: #3AA569; }
         #conversejs #controlbox #controlbox-tabs li a.rooms-tab .msgs-indicator {
           background-color: #E77051; }
         #conversejs #controlbox #controlbox-tabs li a .msgs-indicator {
@@ -2159,7 +2167,7 @@ body {
         #conversejs #controlbox #controlbox-tabs li a.current, #conversejs #controlbox #controlbox-tabs li a.current:hover {
           box-shadow: none;
           border-bottom: 0;
-          height: 55px;
+          height: 62px;
           cursor: default;
           color: #818479; }
   #conversejs #controlbox .fancy-dropdown {
@@ -2274,14 +2282,13 @@ body {
     margin: 10% 0 0 0;
     color: #387592; }
   #conversejs #controlbox #login-dialog .converse-form, #conversejs #controlbox #register .converse-form {
-    margin-top: 4em; }
+    margin: 4em 30% 0 30%; }
   #conversejs #controlbox.fullscreen {
     width: 100%; }
     #conversejs #controlbox.fullscreen .box-flyout {
       width: 100%; }
   #conversejs #controlbox .box-flyout {
     border: 0;
-    background-color: white;
     min-width: 250px;
     width: 200px;
     z-index: 1;
@@ -2289,7 +2296,7 @@ body {
   #conversejs #controlbox .controlbox-head {
     height: 63px;
     padding: 6px 0 6px 0;
-    margin-top: 0.2em; }
+    margin-top: 0.5em; }
   #conversejs #controlbox #converse-register, #conversejs #controlbox #converse-login {
     margin: 30%;
     margin-top: 15%; }
@@ -2417,7 +2424,7 @@ body {
           #conversejs #converse-roster .roster-contacts dd .open-chat.unread-msgs .contact-name {
             width: 70%; }
         #conversejs #converse-roster .roster-contacts dd .open-chat .msgs-indicator {
-          background-color: #E7A151;
+          background-color: #3AA569;
           opacity: 1;
           border-radius: 10%;
           padding: 0 0.2em;
@@ -2445,7 +2452,7 @@ body {
         #conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact .open-chat .req-contact-name {
           width: 100%; }
       #conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact .req-contact-name {
-        line-height: 16px;
+        line-height: 22px;
         width: 69%;
         padding: 0; }
       #conversejs #converse-roster .roster-contacts dd.current-xmpp-contact span {
@@ -2474,7 +2481,7 @@ body {
         #conversejs #converse-roster .roster-contacts dd a.remove-xmpp-contact:hover {
           color: #818479; }
   #conversejs #converse-roster span.pending-contact-name {
-    line-height: 16px;
+    line-height: 22px;
     width: 100%; }
 
 #conversejs #controlbox #chatrooms .bookmarks-list dl.rooms-list.bookmarks dd.available-chatroom a.open-room {
@@ -2538,16 +2545,19 @@ body {
       height: 289px;
       border-bottom-left-radius: 7px;
       border-bottom-right-radius: 7px;
-      height: -webkit-calc(100% - 55px);
-      height: calc(100% - 55px);
+      height: -webkit-calc(100% - 62px);
+      height: calc(100% - 62px);
       background-color: white;
       border-top: 0;
       width: 100%; }
+      #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-info,
+      #conversejs .chatroom .box-flyout .chatroom-body .chat-info {
+        color: #E77051; }
       #converse-embedded-chat .chatroom .box-flyout .chatroom-body .mentioned,
       #conversejs .chatroom .box-flyout .chatroom-body .mentioned {
         font-weight: bold; }
-      #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-msg-room,
-      #conversejs .chatroom .box-flyout .chatroom-body .chat-msg-room {
+      #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them,
+      #conversejs .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them {
         color: #3AA569; }
       #converse-embedded-chat .chatroom .box-flyout .chatroom-body .disconnect-msg,
       #conversejs .chatroom .box-flyout .chatroom-body .disconnect-msg {
@@ -2597,7 +2607,10 @@ body {
           width: calc(30% - 1em); }
         #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul,
         #conversejs .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul {
-          padding: 0.2em; }
+          padding: 0; }
+          #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul li,
+          #conversejs .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul li {
+            padding: .5em; }
         #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul,
         #conversejs .chatroom .box-flyout .chatroom-body .occupants ul {
           padding: 0.3em 0;
@@ -2652,19 +2665,18 @@ body {
                   background-color: orange; }
             #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.moderator,
             #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.moderator {
-              color: #D24E2B; }
+              color: #E77051; }
       #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container,
       #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container {
         background-color: white;
-        border-bottom-left-radius: 7px;
-        border-bottom-right-radius: 7px;
+        border-radius: 7px;
         border: 0;
         color: #818479;
         font-size: 16px;
         height: 289px;
         width: 100%;
-        height: -webkit-calc(100% - 55px);
-        height: calc(100% - 55px);
+        height: -webkit-calc(100% - 62px);
+        height: calc(100% - 62px);
         overflow-y: auto;
         position: absolute; }
         #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .validation-message,
@@ -2681,6 +2693,12 @@ body {
         #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=button],
         #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=submit] {
           margin: 0 0.5em; }
+        #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 {
     border-bottom-right-radius: 0; }
@@ -2694,7 +2712,7 @@ body {
     border: 1px solid #999; }
 
 #conversejs .chat-head-chatroom {
-  height: 55px;
+  height: 62px;
   font-size: 20px; }
   #conversejs .chat-head-chatroom .close-chatbox-button:before {
     content: "\e601"; }
@@ -2706,7 +2724,7 @@ body {
   width: calc(100% - 250px); }
   #conversejs .chatroom .box-flyout {
     background-color: #E77051;
-    border: 1em solid #E77051;
+    border: 1.2em solid #E77051;
     border-top: 0.8em solid #E77051;
     width: -webkit-calc(100% - 250px);
     width: calc(100% - 250px); }
@@ -2733,10 +2751,6 @@ body {
           width: 25%;
           width: -webkit-calc(30% - 2em);
           width: calc(30% - 2em); }
-        #conversejs .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul {
-          padding: 0.5em; }
-          #conversejs .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul li {
-            padding: 0.3em 0; }
         #conversejs .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list {
           height: -webkit-calc(100% - 212px);
           height: calc(100% - 212px); }
@@ -2749,10 +2763,23 @@ body {
     margin: 0 0 0.5em -1px; }
 
 #conversejs .chatbox.headlines .chat-head.chat-head-chatbox {
-  background-color: #3AA569; }
+  background-color: #E7A151; }
+#conversejs .chatbox.headlines .chat-body {
+  background-color: #E7A151;
+  border-radius: 7px; }
+  #conversejs .chatbox.headlines .chat-body .chat-message span.chat-msg-them {
+    color: #D2842B; }
+#conversejs .chatbox.headlines .chat-content {
+  height: 100%;
+  border-radius: 7px; }
+
+#conversejs .chatbox.headlines .box-flyout {
+  background-color: #E7A151; }
+#conversejs .chatbox.headlines .chat-head.chat-head-chatbox {
+  background-color: #E7A151; }
 #conversejs .chatbox.headlines .flyout {
-  border: 1em solid #3AA569;
-  border-top: 0.8em solid #3AA569; }
+  border: 1.2em solid #E7A151;
+  border-top: 0.8em solid #E7A151; }
 
 #converse-embedded-chat,
 #conversejs {
@@ -2814,7 +2841,6 @@ body {
     left: 1em;
     width: 0;
     height: 0;
-    padding: .4em;
     background: white;
     border: inherit;
     border-right: 0;
@@ -2826,22 +2852,22 @@ body {
     text-overflow: ellipsis;
     overflow-x: hidden;
     position: relative;
-    padding: .2em .5em;
     cursor: pointer; }
   #converse-embedded-chat div.awesomplete > ul > li:hover,
   #conversejs div.awesomplete > ul > li:hover {
-    background: #b8d3e0;
-    color: black; }
+    background: #E77051;
+    color: white; }
   #converse-embedded-chat div.awesomplete > ul > li[aria-selected="true"],
   #conversejs div.awesomplete > ul > li[aria-selected="true"] {
     background: #3d6d8f;
     color: white; }
   #converse-embedded-chat div.awesomplete mark,
   #conversejs div.awesomplete mark {
-    background: #eaff00; }
+    background: #FFB9A7; }
   #converse-embedded-chat div.awesomplete li:hover mark,
   #conversejs div.awesomplete li:hover mark {
-    background: #b5d100; }
+    background: #A53214;
+    color: white; }
   #converse-embedded-chat div.awesomplete li[aria-selected="true"] mark,
   #conversejs div.awesomplete li[aria-selected="true"] mark {
     background: #3d6b00;

inverse.html

@@ -7,34 +7,24 @@
     <link rel="shortcut icon" type="image/ico" href="css/images/favicon.ico"/>
     <link type="text/css" rel="stylesheet" media="screen" href="css/inverse.css" />
     <![if gte IE 9]>
-	<script src="dist/inverse.min.js"></script>
+	<script src="dist/inverse.js"></script>
     <![endif]>
 </head>
 <body>
     <div class="content">
         <div class="inner-content">
-        <h1 class="brand-heading"><i class="icon-conversejs"></i> inVerse</h1>
-        <p class="no-chats">
-            You don't have any chats open.<br/></br/>
-            Start a new conversation by clicking on a contact or a room in the left navigation.
-        </p>
+            <h1 class="brand-heading"><i class="icon-conversejs"></i> inVerse</h1>
         </div>
     </div>
 <script>
     converse.initialize({
         authentication: 'login',
         auto_away: 300,
-        i18n: 'en',
-        auto_join_rooms: ['eee@conference.opkode.com'],
-        notify_all_room_messages: [
-            'discuss@conference.conversejs.org'
-        ],
         blacklisted_plugins: ['converse-minimize', 'converse-dragresize', 'converse-otr'],
         whitelisted_plugins: ['converse-inverse', 'converse-singleton'],
         auto_reconnect: true,
         bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
         message_archiving: 'always',
-        debug: true
     });
 </script>
 </body>

package.json

@@ -51,7 +51,7 @@
     "grunt-json": "^0.2.0",
     "http-server": "^0.10.0",
     "install": "^0.8.5",
-    "jasmine": "2.5.3",
+    "jasmine-core": "2.6.4",
     "jed": "0.5.4",
     "jquery": "2.2.3",
     "jquery-easing": "0.0.1",
@@ -68,7 +68,7 @@
     "run-headless-chromium": "^0.1.1",
     "sinon": "^2.1.0",
     "snyk": "^1.21.2",
-    "strophe.js": "1.2.13",
+    "strophe.js": "1.2.14",
     "strophejs-plugin-disco": "0.0.1",
     "strophejs-plugin-ping": "0.0.1",
     "strophejs-plugin-register": "0.0.1",

sass/_awesomplete.scss

@@ -61,7 +61,6 @@
         top: -.43em;
         left: 1em;
         width: 0; height: 0;
-        padding: .4em;
         background: white;
         border: inherit;
         border-right: 0;
@@ -74,13 +73,12 @@
         text-overflow: ellipsis;
         overflow-x: hidden;
         position: relative;
-        padding: .2em .5em;
         cursor: pointer;
     }
     
     div.awesomplete > ul > li:hover {
-        background: hsl(200, 40%, 80%);
-        color: black;
+        background: $red;
+        color: $inverse-link-color;
     }
     
     div.awesomplete > ul > li[aria-selected="true"] {
@@ -89,11 +87,12 @@
     }
     
     div.awesomplete mark {
-        background: hsl(65, 100%, 50%);
+        background: $lightest-red;
     }
     
     div.awesomplete li:hover mark {
-        background: hsl(68, 100%, 41%);
+        background: $darkest-red;
+        color: $inverse-link-color;
     }
     
     div.awesomplete li[aria-selected="true"] mark {

sass/_chatbox.scss

@@ -131,7 +131,9 @@
                 padding: 5px;
             }
             .chat-info {
-                color: $warning-color;
+                line-height: $line-height-small;
+                color: $chat-head-color;
+                font-size: $font-size-small;
                 margin: 0.3em;
                 &.chat-event {
                     clear: left;
@@ -147,8 +149,8 @@
                 }
             }
             .chat-image {
+                max-height: 24em;
                 max-width: 100%;
-                max-height: 100%;
             }
             .chat-action {
                 font-style: italic;
@@ -156,9 +158,7 @@
             .chat-message {
                 margin: 0.3em;
                 span {
-                    display: inline-block;
                     &.chat-msg-author {
-                        max-width: 100%;
                         font-weight: bold;
                         white-space: nowrap;
                         float: left;
@@ -192,10 +192,11 @@
             cursor: pointer;
             background-color: $chat-head-color;
             color: $light-background-color;
-            padding: 0.3em;
+            padding: 0.5em;
             font-size: 0.9em;
             text-align: center;
             z-index: 20;
+            white-space: nowrap;
         }
         .chat-content {
             position: relative;
@@ -226,7 +227,6 @@
             -webkit-background-clip: padding-box;
             @include border-bottom-radius($chatbox-border-radius);
             background-clip: padding-box;
-            background: white;
             border-top: 1px solid #BBB;
             border: 0;
             margin: 0;
@@ -261,7 +261,6 @@
             }
             .chat-toolbar {
                 box-sizing: border-box;
-                font-size: $font-size;
                 margin: 0;
                 padding: 5px;
                 height: $toolbar-height;
@@ -269,18 +268,27 @@
                 background-color: $toolbar-color;
                 a {
                     font-size: $font-size;
-                    color: $link-color;
+                    color: $text-color;
                     text-decoration: none;
                     text-shadow: none;
                 }
+                .toolbar-picker-panel {
+                    a {
+                        color: $link-color;
+                    }
+                }
                 .chat-toolbar-text {
                     font-size: 12px;
                     padding-right: 3px;
-                    text-shadow: 0 1px 0 white
                 }
                 .unencrypted a,
                 .unencrypted {
-                    color: $warning-color;
+                    color: $text-color;
+                    .toolbar-picker-panel {
+                        a {
+                            color: $link-color;
+                        }
+                    }
                 }
                 .unverified a,
                 .unverified {
@@ -326,7 +334,7 @@
                     margin-left: 0;
                 }
                 .toggle-smiley {
-                    color: $link-color;
+                    color: $text-color;
                     padding-left: 5px;
                     ul {
                         &.emoji-category-picker {

sass/_chatrooms.scss

@@ -62,11 +62,16 @@
                 background-color: white;
                 border-top: 0;
                 width: 100%;
+                .chat-info {
+                    color: $chatroom-head-color;
+                }
                 .mentioned {
                     font-weight: bold;
                 }
-                .chat-msg-room {
-                    color: $message-them-color;
+                .chat-message {
+                    .chat-msg-them {
+                        color: $chatroom-message-them-color;
+                    }
                 }
                 .disconnect-msg {
                     padding: 2em 2em 0 2em;
@@ -115,7 +120,10 @@
                     }
                     .awesomplete {
                         ul {
-                            padding: 0.2em;
+                            padding: 0;
+                            li {
+                                padding: .5em;
+                            }
                         }
                     }
                     ul {
@@ -175,8 +183,7 @@
                 }
                 .chatroom-form-container {
                     background-color: white;
-                    border-bottom-left-radius: $chatbox-border-radius;
-                    border-bottom-right-radius: $chatbox-border-radius;
+                    border-radius: $chatbox-border-radius;
                     border: 0;
                     color: $text-color;
                     font-size: $font-size;
@@ -200,11 +207,17 @@
                     input[type=submit] {
                         margin: 0 0.5em;
                     }
+                    .button-primary {
+                        background-color: $chatroom-head-color;
+                    }
                 }
             }
         }
 
         form.sendXMPPMessage {
+            .chat-toolbar {
+                background-color: $chatroom-toolbar-color;
+            }
             .chat-textarea {
                 border-bottom-right-radius: 0;
             }

sass/_controlbox.scss

@@ -202,12 +202,13 @@
                             margin-left: 5px;
                         }
                         p.room-info {
+                            line-height: $line-height;
                             margin: 0;
-                            padding: 0;
                             display: block;
                             white-space: normal;
                         }
                         div.room-info {
+                            padding: 0.3em 0;
                             clear: left;
                             width: 100%;
                         }
@@ -271,7 +272,6 @@
             text-align: center;
             display: inline;
             overflow: hidden;
-            font-size: 12px;
             list-style-type: none;
 
             /* single tab */

sass/_core.scss

@@ -181,7 +181,7 @@
     }
     .button-cancel {
         color: white;
-        background-color: $warning-color;
+        background-color: $text-color;
     }
 
     form {

sass/_headline.scss

@@ -5,6 +5,21 @@
                 background-color: $headline-head-color;
             }
         }
+        .chat-body {
+            background-color: $headline-head-color;
+            border-radius: $chatbox-border-radius;
+            .chat-message {
+                span {
+                    &.chat-msg-them {
+                        color: $dark-orange;
+                    }
+                }
+            }
+        }
+        .chat-content {
+            height: 100%;
+            border-radius: $chatbox-border-radius;
+        }
     }
 }
 

sass/converse/_variables.scss

@@ -26,7 +26,10 @@ $orange: #E7A151;
 $dark-orange: #D2842B;
 $darkest-orange: #A56214;
 
-$lightest-green: #8DD8AE;
+$greenish-white: #E7FBF0;
+$reddish-white: #FFECE7;
+
+$lightest-green: #BCEDD1;
 $light-green: #5CBC86;
 $green: #3AA569;
 $dark-green: #1E9652;
@@ -48,14 +51,14 @@ $chat-textarea-height: 70px !default;
 $send-button-height: 27px !default;
 $send-button-margin: 3px !default;
 
-$message-them-color: $green !default;
+$message-them-color: $red !default;
 
 $emoji_height : 24px !default;
 
 $roster-height: 194px !default;
 $roster-item-height: 60px !default;
 
-$chat-head-color: $orange !default;
+$chat-head-color: $green !default;
 $chat-head-text-color: white !default;
 $chat-head-inverse-text-color: white !default;
 $chat-head-height: 55px !default;
@@ -75,9 +78,6 @@ $warning-color: $dark-red !default;
 $light-background-border-color: #B1BFC4 !default;
 $light-background-color: #FCFDFD !default;
 
-$toolbar-height: 25px !default;
-$toolbar-color: #FFF5EE !default;
-
 $moderator-color: $dark-red !default;
 $online-color: $green !default;
 $error-color: $darkest-red !default;
@@ -96,6 +96,10 @@ $font-size: 14px !default;
 $font-size-large: 16px !default;
 $legend-font-size: 16px !default;
 
+$toolbar-height: 25px !default;
+$toolbar-color: $greenish-white !default;
+
+$line-height-small:  14px !default;
 $line-height:  16px !default;
 
 $controlbox-width: 200px !default;
@@ -114,8 +118,10 @@ $chatroom-width: 300px !default;
 $chatroom-head-color: $red !default;
 $chatroom-color-light: $light-red !default;
 $chatroom-color-dark: $darkest-red !default;
+$chatroom-message-them-color: $green !default;
+$chatroom-toolbar-color: $reddish-white !default;
 
-$headline-head-color: $green !default;
+$headline-head-color: $orange !default;
 
 $box-close-button-padding-top: 4px !default;
 $box-close-button-padding-bottom: 4px !default;

sass/inverse/_chatbox.scss

@@ -4,7 +4,7 @@
         margin: 0 0.3em;
     }
     .flyout {
-        border: 1em solid $chat-head-color;
+        border: $flyout-padding solid $chat-head-color;
         border-top: 0.8em solid $chat-head-color;
         border-radius: 0;
         bottom: 0;
@@ -41,6 +41,12 @@
             background-color: $chat-head-color;
             border-top-left-radius: $chatbox-border-radius;
             border-top-right-radius: $chatbox-border-radius;
+
+            .chat-message {
+                font-size: $font-size-small;
+                line-height: $line-height-small;
+                margin: 0.5em 0;
+            }
         }
         .chat-content {
             padding: 0 $padding $padding $padding;

sass/inverse/_chatrooms.scss

@@ -15,7 +15,7 @@
         @include calc(width, '100% - #{$controlbox-width}');
         .box-flyout {
             background-color: $chatroom-head-color;
-            border: 1em solid $chatroom-head-color;
+            border: $flyout-padding solid $chatroom-head-color;
             border-top: 0.8em solid $chatroom-head-color;
             @include calc(width, '100% - #{$controlbox-width}');
             .chatroom-body {
@@ -45,14 +45,6 @@
                         width: 25%;
                         @include calc(width, '30% - 2em');
                     }
-                    .awesomplete {
-                        ul {
-                            padding: 0.5em;
-                            li {
-                                padding: 0.3em 0;
-                            }
-                        }
-                    }
                     ul {
                         &.occupant-list {
                             @include calc(height, '100% - 212px');

sass/inverse/_controlbox.scss

@@ -12,7 +12,7 @@
                 color: $blue;
             }
             .converse-form {
-                margin-top: 4em;
+                margin: 4em 30% 0 30%;
             }
         }
 
@@ -24,7 +24,6 @@
         }
         .box-flyout {
             border: 0;
-            background-color: white;
             min-width: $controlbox-width;
             width: 200px;
             z-index: 1;
@@ -33,7 +32,7 @@
         .controlbox-head {
             height: $controlbox-head-height;
             padding: 6px 0 6px 0;
-            margin-top: 0.2em;
+            margin-top: 0.5em;
         }
         #converse-register, #converse-login {
             margin: 30%;

sass/inverse/_headline.scss

@@ -1,12 +1,15 @@
 #conversejs {
     .chatbox.headlines {
+        .box-flyout {
+            background-color: $headline-head-color;
+        }
         .chat-head {
             &.chat-head-chatbox {
                 background-color: $headline-head-color;
             }
         }
         .flyout {
-            border: 1em solid $headline-head-color;
+            border: $flyout-padding solid $headline-head-color;
             border-top: 0.8em solid $headline-head-color;
         }
     }

sass/inverse/_variables.scss

@@ -26,7 +26,10 @@ $orange: #E7A151;
 $dark-orange: #D2842B;
 $darkest-orange: #A56214;
 
-$lightest-green: #8DD8AE;
+$greenish-white: #E7FBF0;
+$reddish-white: #FFECE7;
+
+$lightest-green: #E7FBF0;
 $light-green: #5CBC86;
 $green: #3AA569;
 $dark-green: #1E9652;
@@ -44,22 +47,24 @@ $light-text-color: #A8ABA1 !default;
 $border-color: #CCC !default;
 $icon-color: $blue !default;
 $save-button-color: $green !default;
-$chat-textarea-height: 70px !default;
 $send-button-height: 27px !default;
 $send-button-margin: 3px !default;
 
-$message-them-color: $green !default;
+$message-them-color: $red !default;
 
 $emoji_height : 24px !default;
 
 $roster-height: 194px !default;
 $roster-item-height: 30px !default;
 
-$chat-head-color: $orange !default;
+$flyout-padding: 1.2em;
+
+$chat-head-color: $green !default;
 $chat-head-text-color: white !default;
 $chat-head-inverse-text-color: white !default;
-$chat-head-height: 55px !default;
-$chatroom-head-height: 55px !default;
+$chat-head-height: 62px !default;
+
+$chat-textarea-height: 70px !default;
 
 $input-focus-color: #1A9707 !default;
 $highlight-color: #DCF9F6 !default;
@@ -67,19 +72,16 @@ $highlight-color: #DCF9F6 !default;
 $controlbox-dropdown-height: 30px !default;
 $controlbox-head-color: $light-blue !default;
 $controlbox-head-height: 63px !default;
-$controlbox-pane-padding: 1.2em !default;
+$controlbox-pane-padding: $flyout-padding !default;
 
-$primary-color: $green !default;
+$primary-color: $orange !default;
 $secondary-color: $blue !default;
 $warning-color: $dark-red !default;
 
 $light-background-border-color: #B1BFC4 !default;
 $light-background-color: #FCFDFD !default;
 
-$toolbar-height: 25px !default;
-$toolbar-color: #FFF5EE !default;
-
-$moderator-color: $dark-red !default;
+$moderator-color: $red !default;
 $online-color: $green !default;
 $error-color: $darkest-red !default;
 
@@ -98,7 +100,11 @@ $font-size-large: 18px !default;
 $font-size-huge: 26px !default;
 $legend-font-size: 18px !default;
 
-$line-height:  16px !default;
+$toolbar-height: 29px !default;
+$toolbar-color: $greenish-white !default;
+
+$line-height-small:  20px !default;
+$line-height:  22px !default;
 
 $controlbox-width: 250px !default;
 $chat-width: 100% !default;
@@ -114,12 +120,15 @@ $small-mobile-chat-height: 300px !default;
 
 $font-path: "../fonticons/fonts/" !default;
 
+$chatroom-head-height: 62px !default;
 $chatroom-width: 300px !default;
 $chatroom-head-color: $red !default;
 $chatroom-color-light: $light-red !default;
 $chatroom-color-dark: $darkest-red !default;
+$chatroom-message-them-color: $green !default;
+$chatroom-toolbar-color: $reddish-white !default;
 
-$headline-head-color: $green !default;
+$headline-head-color: $orange !default;
 
 $box-close-button-padding-top: 4px !default;
 $box-close-button-padding-bottom: 4px !default;

sass/inverse/inverse.scss

@@ -21,5 +21,6 @@
 @import "bookmarks";
 @import "../chatrooms";
 @import "chatrooms";
+@import "../headline";
 @import "headline";
 @import "../awesomplete"

spec/bookmarks.js

@@ -2,13 +2,14 @@
 
 (function (root, factory) {
     define([
+        "jasmine",
         "jquery",
         "converse-core",
         "utils",
         "mock",
         "test-utils"
         ], factory);
-} (this, function ($, converse, utils, mock, test_utils) {
+} (this, function (jasmine, $, converse, utils, mock, test_utils) {
     "use strict";
     var $iq = converse.env.$iq,
         Strophe = converse.env.Strophe,

spec/chatbox.js

@@ -1,11 +1,12 @@
 (function (root, factory) {
     define([
+        "jasmine",
         "utils",
         "converse-core",
         "mock",
         "test-utils"
         ], factory);
-} (this, function (utils, converse, mock, test_utils) {
+} (this, function (jasmine, utils, converse, mock, test_utils) {
     "use strict";
     var _ = converse.env._;
     var $ = converse.env.jQuery;

spec/chatroom.js

@@ -1,6 +1,6 @@
 (function (root, factory) {
-    define(["mock", "converse-core", "test-utils", "utils" ], factory);
-} (this, function (mock, converse, test_utils, utils) {
+    define(["jasmine", "mock", "converse-core", "test-utils", "utils" ], factory);
+} (this, function (jasmine, mock, converse, test_utils, utils) {
     var _ = converse.env._;
     var $ = converse.env.jQuery;
     var $pres = converse.env.$pres;
@@ -996,8 +996,7 @@
                 });
                 test_utils.openAndEnterChatRoom(_converse, 'lounge', 'localhost', 'dummy');
                 var view = _converse.chatboxviews.get('lounge@localhost');
-                view.close();
-                view.model.destroy(); // Manually calling this, otherwise we have to mock stanzas.
+                view.close(); // Hack, otherwise we have to mock stanzas.
 
                 var name = mock.cur_names[0];
                 var from_jid = name.replace(/ /g,'.').toLowerCase() + '@localhost';

spec/controlbox.js

@@ -1,6 +1,6 @@
 (function (root, factory) {
-    define(["mock", "converse-core", "test-utils"], factory);
-} (this, function (mock, converse, test_utils) {
+    define(["jasmine", "mock", "converse-core", "test-utils"], factory);
+} (this, function (jasmine, mock, converse, test_utils) {
     var _ = converse.env._;
     var $ = converse.env.jQuery;
     var $pres = converse.env.$pres;

spec/converse.js

@@ -1,9 +1,10 @@
 (function (root, factory) {
     define([
+        "jasmine",
         "converse-core",
         "mock",
         "test-utils"], factory);
-} (this, function (converse, mock, test_utils) {
+} (this, function (jasmine, converse, mock, test_utils) {
     var b64_sha1 = converse.env.b64_sha1;
     var _ = converse.env._;
     var $ = converse.env.jQuery;

spec/disco.js

@@ -1,10 +1,11 @@
 (function (root, factory) {
     define([
+        "jasmine",
         "jquery",
         "converse-core",
         "mock",
         "test-utils"], factory);
-} (this, function ($, converse, mock, test_utils) {
+} (this, function (jasmine, $, converse, mock, test_utils) {
     "use strict";
     var Strophe = converse.env.Strophe;
 

spec/eventemitter.js

@@ -1,6 +1,6 @@
 (function (root, factory) {
-    define(["mock", "converse-core", "test-utils"], factory);
-} (this, function (mock, converse, test_utils) {
+    define(["jasmine", "mock", "converse-core", "test-utils"], factory);
+} (this, function (jasmine, mock, converse, test_utils) {
 
     return describe("The _converse Event Emitter", function() {
 

spec/headline.js

@@ -1,12 +1,13 @@
 (function (root, factory) {
     define([
+        "jasmine",
         "jquery",
         "converse-core",
         "utils",
         "mock",
         "test-utils"
         ], factory);
-} (this, function ($, converse, utils, mock, test_utils) {
+} (this, function (jasmine, $, converse, utils, mock, test_utils) {
     "use strict";
     var $msg = converse.env.$msg,
         _ = converse.env._;

spec/mam.js

@@ -1,6 +1,6 @@
 (function (root, factory) {
-    define(["mock", "converse-core", "test-utils"], factory);
-} (this, function (mock, converse, test_utils) {
+    define(["jasmine", "mock", "converse-core", "test-utils"], factory);
+} (this, function (jasmine, mock, converse, test_utils) {
     "use strict";
     var _ = converse.env._;
     var $ = converse.env.jQuery;
@@ -28,7 +28,7 @@
                 _converse.api.archive.query();
                 var queryid = $(sent_stanza.toString()).find('query').attr('queryid');
                 expect(sent_stanza.toString()).toBe(
-                    "<iq type='set' xmlns='jabber:client' id='"+IQ_id+"'><query xmlns='urn:xmpp:mam:0' queryid='"+queryid+"'/></iq>");
+                    "<iq type='set' xmlns='jabber:client' id='"+IQ_id+"'><query xmlns='urn:xmpp:mam:2' queryid='"+queryid+"'/></iq>");
             }));
 
            it("can be used to query for all messages to/from a particular JID", mock.initConverse(function (_converse) {
@@ -45,10 +45,10 @@
                 var queryid = $(sent_stanza.toString()).find('query').attr('queryid');
                 expect(sent_stanza.toString()).toBe(
                     "<iq type='set' xmlns='jabber:client' id='"+IQ_id+"'>"+
-                        "<query xmlns='urn:xmpp:mam:0' queryid='"+queryid+"'>"+
+                        "<query xmlns='urn:xmpp:mam:2' queryid='"+queryid+"'>"+
                             "<x xmlns='jabber:x:data' type='submit'>"+
                             "<field var='FORM_TYPE' type='hidden'>"+
-                                "<value>urn:xmpp:mam:0</value>"+
+                                "<value>urn:xmpp:mam:2</value>"+
                             "</field>"+
                             "<field var='with'>"+
                                 "<value>juliet@capulet.lit</value>"+
@@ -79,10 +79,10 @@
                 var queryid = $(sent_stanza.toString()).find('query').attr('queryid');
                 expect(sent_stanza.toString()).toBe(
                     "<iq type='set' xmlns='jabber:client' id='"+IQ_id+"'>"+
-                        "<query xmlns='urn:xmpp:mam:0' queryid='"+queryid+"'>"+
+                        "<query xmlns='urn:xmpp:mam:2' queryid='"+queryid+"'>"+
                             "<x xmlns='jabber:x:data' type='submit'>"+
                             "<field var='FORM_TYPE' type='hidden'>"+
-                                "<value>urn:xmpp:mam:0</value>"+
+                                "<value>urn:xmpp:mam:2</value>"+
                             "</field>"+
                             "<field var='start'>"+
                                 "<value>"+moment(start).format()+"</value>"+
@@ -120,10 +120,10 @@
                 var queryid = $(sent_stanza.toString()).find('query').attr('queryid');
                 expect(sent_stanza.toString()).toBe(
                     "<iq type='set' xmlns='jabber:client' id='"+IQ_id+"'>"+
-                        "<query xmlns='urn:xmpp:mam:0' queryid='"+queryid+"'>"+
+                        "<query xmlns='urn:xmpp:mam:2' queryid='"+queryid+"'>"+
                             "<x xmlns='jabber:x:data' type='submit'>"+
                             "<field var='FORM_TYPE' type='hidden'>"+
-                                "<value>urn:xmpp:mam:0</value>"+
+                                "<value>urn:xmpp:mam:2</value>"+
                             "</field>"+
                             "<field var='start'>"+
                                 "<value>"+moment(start).format()+"</value>"+
@@ -149,10 +149,10 @@
                 var queryid = $(sent_stanza.toString()).find('query').attr('queryid');
                 expect(sent_stanza.toString()).toBe(
                     "<iq type='set' xmlns='jabber:client' id='"+IQ_id+"'>"+
-                        "<query xmlns='urn:xmpp:mam:0' queryid='"+queryid+"'>"+
+                        "<query xmlns='urn:xmpp:mam:2' queryid='"+queryid+"'>"+
                             "<x xmlns='jabber:x:data' type='submit'>"+
                                 "<field var='FORM_TYPE' type='hidden'>"+
-                                    "<value>urn:xmpp:mam:0</value>"+
+                                    "<value>urn:xmpp:mam:2</value>"+
                                 "</field>"+
                                 "<field var='start'>"+
                                     "<value>"+moment(start).format()+"</value>"+
@@ -185,10 +185,10 @@
                 var queryid = $(sent_stanza.toString()).find('query').attr('queryid');
                 expect(sent_stanza.toString()).toBe(
                     "<iq type='set' xmlns='jabber:client' id='"+IQ_id+"'>"+
-                        "<query xmlns='urn:xmpp:mam:0' queryid='"+queryid+"'>"+
+                        "<query xmlns='urn:xmpp:mam:2' queryid='"+queryid+"'>"+
                             "<x xmlns='jabber:x:data' type='submit'>"+
                                 "<field var='FORM_TYPE' type='hidden'>"+
-                                    "<value>urn:xmpp:mam:0</value>"+
+                                    "<value>urn:xmpp:mam:2</value>"+
                                 "</field>"+
                                 "<field var='start'>"+
                                     "<value>"+moment(start).format()+"</value>"+
@@ -217,10 +217,10 @@
                 var queryid = $(sent_stanza.toString()).find('query').attr('queryid');
                 expect(sent_stanza.toString()).toBe(
                     "<iq type='set' xmlns='jabber:client' id='"+IQ_id+"'>"+
-                        "<query xmlns='urn:xmpp:mam:0' queryid='"+queryid+"'>"+
+                        "<query xmlns='urn:xmpp:mam:2' queryid='"+queryid+"'>"+
                             "<x xmlns='jabber:x:data' type='submit'>"+
                                 "<field var='FORM_TYPE' type='hidden'>"+
-                                    "<value>urn:xmpp:mam:0</value>"+
+                                    "<value>urn:xmpp:mam:2</value>"+
                                 "</field>"+
                             "</x>"+
                             "<set xmlns='http://jabber.org/protocol/rsm'>"+
@@ -254,10 +254,10 @@
                 var queryid = $(sent_stanza.toString()).find('query').attr('queryid');
                 expect(sent_stanza.toString()).toBe(
                     "<iq type='set' xmlns='jabber:client' id='"+IQ_id+"'>"+
-                        "<query xmlns='urn:xmpp:mam:0' queryid='"+queryid+"'>"+
+                        "<query xmlns='urn:xmpp:mam:2' queryid='"+queryid+"'>"+
                             "<x xmlns='jabber:x:data' type='submit'>"+
                                 "<field var='FORM_TYPE' type='hidden'>"+
-                                    "<value>urn:xmpp:mam:0</value>"+
+                                    "<value>urn:xmpp:mam:2</value>"+
                                 "</field>"+
                                 "<field var='with'>"+
                                     "<value>romeo@montague.lit</value>"+
@@ -289,27 +289,22 @@
                 _converse.api.archive.query({'with': 'romeo@capulet.lit', 'max':'10'}, callback);
                 var queryid = $(sent_stanza.toString()).find('query').attr('queryid');
 
-                // Send the result stanza, so that the callback is called.
-                var stanza = $iq({'type': 'result', 'id': IQ_id});
-                _converse.connection._dataRecv(test_utils.createRequest(stanza));
-
-                /* <message id='aeb213' to='juliet@capulet.lit/chamber'>
-                 *   <result xmlns='urn:xmpp:mam:0' queryid='f27' id='28482-98726-73623'>
-                 *     <forwarded xmlns='urn:xmpp:forward:0'>
-                 *       <delay xmlns='urn:xmpp:delay' stamp='2010-07-10T23:08:25Z'/>
-                 *       <message
-                 *         to='juliet@capulet.lit/balcony'
-                 *         from='romeo@montague.lit/orchard'
-                 *         type='chat'
-                 *         xmlns='jabber:client'>
-                 *         <body>Call me but love, and I'll be new baptized; Henceforth I never will be Romeo.</body>
-                 *       </message>
-                 *     </forwarded>
-                 *   </result>
-                 * </message>
+                /*  <message id='aeb213' to='juliet@capulet.lit/chamber'>
+                 *  <result xmlns='urn:xmpp:mam:2' queryid='f27' id='28482-98726-73623'>
+                 *      <forwarded xmlns='urn:xmpp:forward:0'>
+                 *      <delay xmlns='urn:xmpp:delay' stamp='2010-07-10T23:08:25Z'/>
+                 *      <message xmlns='jabber:client'
+                 *          to='juliet@capulet.lit/balcony'
+                 *          from='romeo@montague.lit/orchard'
+                 *          type='chat'>
+                 *          <body>Call me but love, and I'll be new baptized; Henceforth I never will be Romeo.</body>
+                 *      </message>
+                 *      </forwarded>
+                 *  </result>
+                 *  </message>
                  */
                 var msg1 = $msg({'id':'aeb213', 'to':'juliet@capulet.lit/chamber'})
-                            .c('result',  {'xmlns': 'urn:xmpp:mam:0', 'queryid':queryid, 'id':'28482-98726-73623'})
+                            .c('result',  {'xmlns': 'urn:xmpp:mam:2', 'queryid':queryid, 'id':'28482-98726-73623'})
                                 .c('forwarded', {'xmlns':'urn:xmpp:forward:0'})
                                     .c('delay', {'xmlns':'urn:xmpp:delay', 'stamp':'2010-07-10T23:08:25Z'}).up()
                                     .c('message', {
@@ -321,7 +316,7 @@
                 _converse.connection._dataRecv(test_utils.createRequest(msg1));
 
                 var msg2 = $msg({'id':'aeb213', 'to':'juliet@capulet.lit/chamber'})
-                            .c('result',  {'xmlns': 'urn:xmpp:mam:0', 'queryid':queryid, 'id':'28482-98726-73624'})
+                            .c('result',  {'xmlns': 'urn:xmpp:mam:2', 'queryid':queryid, 'id':'28482-98726-73624'})
                                 .c('forwarded', {'xmlns':'urn:xmpp:forward:0'})
                                     .c('delay', {'xmlns':'urn:xmpp:delay', 'stamp':'2010-07-10T23:08:25Z'}).up()
                                     .c('message', {
@@ -332,23 +327,23 @@
                                     .c('body').t("Henceforth I never will be Romeo.");
                 _converse.connection._dataRecv(test_utils.createRequest(msg2));
 
-                /* Send a <fin> message to indicate the end of the result set.
+                /* Send an <iq> stanza to indicate the end of the result set.
                  *
-                 * <message>
-                 *     <fin xmlns='urn:xmpp:mam:0' complete='true'>
-                 *         <set xmlns='http://jabber.org/protocol/rsm'>
-                 *             <first index='0'>23452-4534-1</first>
-                 *             <last>390-2342-22</last>
-                 *             <count>16</count>
-                 *         </set>
-                 *     </fin>
-                 * </message>
+                 * <iq type='result' id='juliet1'>
+                 *     <fin xmlns='urn:xmpp:mam:2'>
+                 *     <set xmlns='http://jabber.org/protocol/rsm'>
+                 *         <first index='0'>28482-98726-73623</first>
+                 *         <last>09af3-cc343-b409f</last>
+                 *         <count>20</count>
+                 *     </set>
+                 * </iq>
                  */
-                stanza = $msg().c('fin', {'xmlns': 'urn:xmpp:mam:0', 'queryid':queryid, 'complete': 'true'})
-                            .c('set',  {'xmlns': 'http://jabber.org/protocol/rsm'})
-                                .c('first', {'index': '0'}).t('23452-4534-1').up()
-                                .c('last').t('390-2342-22').up()
-                                .c('count').t('16');
+                var stanza = $iq({'type': 'result', 'id': IQ_id})
+                    .c('fin', {'xmlns': 'urn:xmpp:mam:2'})
+                        .c('set',  {'xmlns': 'http://jabber.org/protocol/rsm'})
+                            .c('first', {'index': '0'}).t('23452-4534-1').up()
+                            .c('last').t('09af3-cc343-b409f').up()
+                            .c('count').t('16');
                 _converse.connection._dataRecv(test_utils.createRequest(stanza));
 
                 expect(callback).toHaveBeenCalled();
@@ -360,7 +355,7 @@
                 expect(args[1].max).toBe('10');
                 expect(args[1].count).toBe('16');
                 expect(args[1].first).toBe('23452-4534-1');
-                expect(args[1].last).toBe('390-2342-22');
+                expect(args[1].last).toBe('09af3-cc343-b409f');
            }));
 
         });
@@ -386,11 +381,11 @@
                 expect(_converse.connection.sendIQ).toHaveBeenCalled();
                 expect(sent_stanza.toLocaleString()).toBe(
                     "<iq type='get' xmlns='jabber:client' id='"+IQ_id+"'>"+
-                        "<prefs xmlns='urn:xmpp:mam:0'/>"+
+                        "<prefs xmlns='urn:xmpp:mam:2'/>"+
                     "</iq>"
                 );
 
-                /* Example 15. Server responds with current preferences
+                /* Example 20. Server responds with current preferences
                  *
                  * <iq type='result' id='juliet2'>
                  *   <prefs xmlns='urn:xmpp:mam:0' default='roster'>
@@ -410,7 +405,7 @@
                 expect(_converse.connection.sendIQ.calls.count()).toBe(2);
                 expect(sent_stanza.toString()).toBe(
                     "<iq type='set' xmlns='jabber:client' id='"+IQ_id+"'>"+
-                        "<prefs xmlns='urn:xmpp:mam:0' default='never'>"+
+                        "<prefs xmlns='urn:xmpp:mam:2' default='never'>"+
                             "<always><jid>romeo@montague.lit</jid></always>"+
                             "<never><jid>montague@montague.lit</jid></never>"+
                         "</prefs>"+

spec/minchats.js

@@ -1,6 +1,6 @@
 (function (root, factory) {
-    define(["mock", "converse-core", "test-utils"], factory);
-} (this, function (mock, converse, test_utils) {
+    define(["jasmine", "mock", "converse-core", "test-utils"], factory);
+} (this, function (jasmine, mock, converse, test_utils) {
     var _ = converse.env._;
     var $msg = converse.env.$msg;
 

spec/notification.js

@@ -1,6 +1,6 @@
 (function (root, factory) {
-    define(["mock", "converse-core", "test-utils", "utils"], factory);
-} (this, function (mock, converse, test_utils, utils) {
+    define(["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;

spec/otr.js

@@ -1,6 +1,6 @@
 (function (root, factory) {
-    define(["mock", "converse-core", "test-utils"], factory);
-} (this, function (mock, converse, test_utils) {
+    define(["jasmine", "mock", "converse-core", "test-utils"], factory);
+} (this, function (jasmine, mock, converse, test_utils) {
     var $ = converse.env.jQuery;
     var Strophe = converse.env.Strophe;
     var b64_sha1 = converse.env.b64_sha1;

spec/ping.js

@@ -1,6 +1,6 @@
 (function (root, factory) {
-    define(["mock", "converse-core", "test-utils", "converse-ping"], factory);
-} (this, function (mock, test_utils) {
+    define(["jasmine", "mock", "converse-core", "test-utils", "converse-ping"], factory);
+} (this, function (jasmine, mock, test_utils) {
     "use strict";
 
     describe("XMPP Ping", function () {

spec/presence.js

@@ -2,12 +2,13 @@
 /*eslint dot-notation: "off"*/
 (function (root, factory) {
     define([
+        "jasmine",
         "jquery",
         "converse-core",
         "mock",
         "test-utils",
         "lodash"], factory);
-} (this, function ($, converse, mock, test_utils, _) {
+} (this, function (jasmine, $, converse, mock, test_utils, _) {
     "use strict";
     var Strophe = converse.env.Strophe;
     var $iq = converse.env.$iq;

spec/protocol.js

@@ -1,10 +1,11 @@
 (function (root, factory) {
     define([
+        "jasmine",
         "jquery",
         "converse-core",
         "mock",
         "test-utils"], factory);
-} (this, function ($, converse, mock, test_utils) {
+} (this, function (jasmine, $, converse, mock, test_utils) {
     "use strict";
     var Strophe = converse.env.Strophe;
     var $iq = converse.env.$iq;

spec/register.js

@@ -1,6 +1,6 @@
 (function (root, factory) {
-    define(["mock", "converse-core", "test-utils"], factory);
-} (this, function (mock, converse, test_utils) {
+    define(["jasmine", "mock", "converse-core", "test-utils"], factory);
+} (this, function (jasmine, mock, converse, test_utils) {
     var $ = converse.env.jQuery;
     var Strophe = converse.env.Strophe;
     var $iq = converse.env.$iq;

spec/roomslist.js

@@ -1,6 +1,6 @@
 (function (root, factory) {
-    define(["mock", "converse-core", "converse-roomslist", "test-utils"], factory);
-} (this, function (mock, converse, roomslist, test_utils) {
+    define(["jasmine", "mock", "converse-core", "converse-roomslist", "test-utils"], factory);
+} (this, function (jasmine, mock, converse, roomslist, test_utils) {
     var _ = converse.env._;
     var $msg = converse.env.$msg;
 

spec/utils.js

@@ -1,5 +1,5 @@
 (function (root, factory) {
-    define(["jasmine-html", "converse-core"], factory);
+    define(["jasmine", "converse-core"], factory);
 } (this, function (jasmine, converse) {
     var utils = converse.env.utils,
         _ = converse.env._;

spec/xmppstatus.js

@@ -1,6 +1,6 @@
 (function (root, factory) {
-    define(["mock", "converse-core", "test-utils"], factory);
-} (this, function (mock, converse, test_utils) {
+    define(["jasmine", "mock", "converse-core", "test-utils"], factory);
+} (this, function (jasmine, mock, converse, test_utils) {
     var $ = converse.env.jQuery;
 
     return describe("The XMPPStatus model", function() {

src/converse-chatview.js

@@ -96,6 +96,7 @@
                 show_toolbar: true,
                 time_format: 'HH:mm',
                 visible_toolbar_buttons: {
+                    'emoji': true,
                     'emoticons': true,
                     'call': false,
                     'clear': true
@@ -782,6 +783,7 @@
                         'show_call_button': _converse.visible_toolbar_buttons.call,
                         'show_clear_button': _converse.visible_toolbar_buttons.clear,
                         'show_emoticons': _converse.visible_toolbar_buttons.emoticons,
+                        'use_emoji': _converse.visible_toolbar_buttons.emoji,
                     });
                 },
 
@@ -844,9 +846,7 @@
                 },
 
                 afterShown: function (focus) {
-                    if (this.model.collection.browserStorage) {
-                        // Without a connection, we haven't yet initialized
-                        // localstorage
+                    if (utils.isPersistableModel(this.model)) {
                         this.model.save();
                     }
                     this.setChatState(_converse.ACTIVE);
@@ -899,17 +899,15 @@
                         });
                         return;
                     }
+                    var scrolled = true;
                     var is_at_bottom =
                         (this.$content.scrollTop() + this.$content.innerHeight()) >=
                             this.$content[0].scrollHeight-10;
                     if (is_at_bottom) {
-                        this.model.save('scrolled', false);
+                        scrolled = false;
                         this.onScrolledDown();
-                    } else {
-                        // We're not at the bottom of the chat area, so we mark
-                        // that the box is in a scrolled-up state.
-                        this.model.save('scrolled', true);
                     }
+                    utils.safeSave(this.model, {'scrolled': scrolled});
                 }, 150),
 
                 viewUnreadMessages: function () {

src/converse-core.js

@@ -192,7 +192,7 @@
         Strophe.addNamespace('CSI', 'urn:xmpp:csi:0');
         Strophe.addNamespace('DELAY', 'urn:xmpp:delay');
         Strophe.addNamespace('HINTS', 'urn:xmpp:hints');
-        Strophe.addNamespace('MAM', 'urn:xmpp:mam:0');
+        Strophe.addNamespace('MAM', 'urn:xmpp:mam:2');
         Strophe.addNamespace('NICK', 'http://jabber.org/protocol/nick');
         Strophe.addNamespace('PUBSUB', 'http://jabber.org/protocol/pubsub');
         Strophe.addNamespace('ROSTERX', 'http://jabber.org/protocol/rosterx');
@@ -577,13 +577,15 @@
         };
 
         this.logOut = function () {
+            _converse.chatboxviews.closeAllChatBoxes();
+            _converse.clearSession();
+
             _converse.setDisconnectionCause(_converse.LOGOUT, undefined, true);
             if (!_.isUndefined(_converse.connection)) {
                 _converse.connection.disconnect();
+            } else {
+                _converse._tearDown();
             }
-            _converse.chatboxviews.closeAllChatBoxes();
-            _converse.clearSession();
-            _converse._tearDown();
             _converse.emit('logout');
         };
 
@@ -2067,7 +2069,9 @@
                         "Either when calling converse.initialize, or when calling " +
                         "_converse.api.user.login.");
                 }
-                this.connection.reset();
+                if (!this.connection.reconnecting) {
+                    this.connection.reset();
+                }
                 this.connection.connect(this.jid.toLowerCase(), null, this.onConnectStatusChanged);
             } else if (this.authentication === _converse.LOGIN) {
                 var password = _.isNil(credentials) ? (_converse.connection.pass || this.password) : credentials.password;
@@ -2086,7 +2090,9 @@
                 } else {
                     this.jid = Strophe.getBareJidFromJid(this.jid).toLowerCase()+'/'+resource;
                 }
-                this.connection.reset();
+                if (!this.connection.reconnecting) {
+                    this.connection.reset();
+                }
                 this.connection.connect(this.jid, password, this.onConnectStatusChanged);
             }
         };

src/converse-mam.js

@@ -125,6 +125,23 @@
             },
 
             ChatRoomView: {
+
+                initialize: function () {
+                    var _converse = this.__super__._converse;
+                    this.__super__.initialize.apply(this, arguments);
+                    this.model.on('change:mam_enabled', function () {
+                        // Fetch messages again if we find out that mam has
+                        // been enabled (because the first attempt would then
+                        // have failed.
+                        this.fetchArchivedMessages({
+                            'before': '', // Page backwards from the most recent message
+                            'with': this.model.get('jid'),
+                            'max': _converse.archived_messages_page_size
+                        });
+                        this.model.save({'mam_initialized': true});
+                    }, this);
+                },
+
                 render: function () {
                     var result = this.__super__.render.apply(this, arguments);
                     if (!this.disable_mam) {
@@ -150,7 +167,6 @@
                      * Then, upon receiving them, call onChatRoomMessage
                      * so that they are displayed inside it.
                      */
-                    var that = this;
                     var _converse = this.__super__._converse;
                     if (!_converse.features.findWhere({'var': Strophe.NS.MAM})) {
                         _converse.log(
@@ -162,6 +178,8 @@
                         return;
                     }
                     this.addSpinner();
+
+                    var that = this;
                     _converse.api.archive.query(_.extend(options, {'groupchat': true}),
                         function (messages) {
                             that.clearSpinner();
@@ -216,18 +234,13 @@
                     callback = options;
                     errback = callback;
                 }
-                /*
-                if (!_converse.features.findWhere({'var': Strophe.NS.MAM})) {
-                    _converse.log('This server does not support XEP-0313, Message Archive Management');
-                    errback(null);
-                    return;
-                }
-                */
                 var queryid = _converse.connection.getUniqueId();
                 var attrs = {'type':'set'};
                 if (!_.isUndefined(options) && options.groupchat) {
                     if (!options['with']) {
-                        throw new Error('You need to specify a "with" value containing the chat room JID, when querying groupchat messages.');
+                        throw new Error(
+                            'You need to specify a "with" value containing '+
+                            'the chat room JID, when querying groupchat messages.');
                     }
                     attrs.to = options['with'];
                 }
@@ -258,23 +271,31 @@
                     }
                 }
 
-                if (_.isFunction(callback)) {
-                    _converse.connection.addHandler(function (message) {
-                        var $msg = $(message), rsm,
-                            $fin = $msg.find('fin[xmlns="'+Strophe.NS.MAM+'"]');
-                        if ($fin.length && $fin.attr('queryid') === queryid) {
-                            rsm = new Strophe.RSM({xml: $fin.find('set')[0]});
-                            _.extend(rsm, _.pick(options, ['max']));
-                            _.extend(rsm, _.pick(options, MAM_ATTRIBUTES));
+                var message_handler = _converse.connection.addHandler(function (message) {
+                    var result = message.querySelector('result');
+                    if (!_.isNull(result) && result.getAttribute('queryid') === queryid) {
+                        messages.push(message);
+                    }
+                    return true;
+                }, Strophe.NS.MAM);
+
+                _converse.connection.sendIQ(
+                    stanza,
+                    function (iq) {
+                        _converse.connection.deleteHandler(message_handler);
+                        if (_.isFunction(callback)) {
+                            var set = iq.querySelector('set');
+                            var rsm = new Strophe.RSM({xml: set});
+                            _.extend(rsm, _.pick(options, _.concat(MAM_ATTRIBUTES, ['max'])));
                             callback(messages, rsm);
-                            return false; // We've received all messages, decommission this handler
-                        } else if (queryid === $msg.find('result').attr('queryid')) {
-                            messages.push(message);
                         }
-                        return true;
-                    }, Strophe.NS.MAM);
-                }
-                _converse.connection.sendIQ(stanza, null, errback, _converse.message_archiving_timeout);
+                    },
+                    function () {
+                        _converse.connection.deleteHandler(message_handler);
+                        if (_.isFunction(errback)) { errback.apply(this, arguments); }
+                    },
+                    _converse.message_archiving_timeout
+                );
             };
 
             _.extend(_converse.api, {

src/converse-minimize.js

@@ -26,6 +26,7 @@
     "use strict";
     var $ = converse.env.jQuery,
         _ = converse.env._,
+        utils = converse.env.utils,
         Backbone = converse.env.Backbone,
         b64_sha1 = converse.env.b64_sha1,
         moment = converse.env.moment;
@@ -70,14 +71,14 @@
                 },
 
                 maximize: function () {
-                    this.save({
+                    utils.safeSave(this, {
                         'minimized': false,
                         'time_opened': moment().valueOf()
                     });
                 },
 
                 minimize: function () {
-                    this.save({
+                    utils.safeSave(this, {
                         'minimized': true,
                         'time_minimized': moment().format()
                     });

src/converse-muc.js

@@ -134,6 +134,14 @@
             //
             // New functions which don't exist yet can also be added.
 
+            _tearDown: function () {
+                var rooms = this.chatboxes.where({'type': CHATROOMS_TYPE});
+                _.each(rooms, function (room) {
+                    utils.safeSave(room, {'connection_status': ROOMSTATUS.DISCONNECTED});
+                });
+                this.__super__._tearDown.call(this, arguments);
+            },
+
             Features: {
                 addClientFeatures: function () {
                     var _converse = this.__super__._converse;
@@ -411,8 +419,10 @@
                 },
 
                 clearUnreadMsgCounter: function() {
-                    this.save({'num_unread': 0});
-                    this.save({'num_unread_general': 0});
+                    utils.safeSave(this, {
+                        'num_unread': 0,
+                        'num_unread_general': 0
+                    });
                 }
             });
 
@@ -1226,14 +1236,16 @@
                     return this;
                 },
 
-                cleanup: function () {
-                    if (this.model.collection && this.model.collection.browserStorage) {
-                        this.model.save('connection_status', ROOMSTATUS.DISCONNECTED);
-                    } else {
-                        this.model.set('connection_status', ROOMSTATUS.DISCONNECTED);
+                sendUnavailablePresence: function (exit_msg) {
+                    var presence = $pres({
+                        type: "unavailable",
+                        from: _converse.connection.jid,
+                        to: this.getRoomJIDAndNick()
+                    });
+                    if (exit_msg !== null) {
+                        presence.c("status", exit_msg);
                     }
-                    this.removeHandlers();
-                    _converse.ChatBoxView.prototype.close.apply(this, arguments);
+                    _converse.connection.sendPresence(presence);
                 },
 
                 leave: function(exit_msg) {
@@ -1246,26 +1258,15 @@
                     this.hide();
                     this.occupantsview.model.reset();
                     this.occupantsview.model.browserStorage._clear();
-                    if (!_converse.connection.connected ||
-                            this.model.get('connection_status') === ROOMSTATUS.DISCONNECTED) {
-                        // Don't send out a stanza if we're not connected.
-                        this.cleanup();
-                        return;
-                    }
-                    var presence = $pres({
-                        type: "unavailable",
-                        from: _converse.connection.jid,
-                        to: this.getRoomJIDAndNick()
-                    });
-                    if (exit_msg !== null) {
-                        presence.c("status", exit_msg);
+                    if (_converse.connection.connected) {
+                        this.sendUnavailablePresence(exit_msg);
                     }
-                    _converse.connection.sendPresence(
-                        presence,
-                        this.cleanup.bind(this),
-                        this.cleanup.bind(this),
-                        2000
+                    utils.safeSave(
+                        this.model,
+                        {'connection_status': ROOMSTATUS.DISCONNECTED}
                     );
+                    this.removeHandlers();
+                    _converse.ChatBoxView.prototype.close.apply(this, arguments);
                 },
 
                 renderConfigurationForm: function (stanza) {
@@ -1276,7 +1277,8 @@
                      * either submitted the form, or canceled it.
                      *
                      * Parameters:
-                     *  (XMLElement) stanza: The IQ stanza containing the room config.
+                     *  (XMLElement) stanza: The IQ stanza containing the room
+                     *      config.
                      */
                     var that = this,
                         $body = this.$('.chatroom-body');
@@ -2785,7 +2787,9 @@
                 _converse.chatboxviews.each(function (view) {
                     if (view.model.get('type') === CHATROOMS_TYPE) {
                         view.model.save('connection_status', ROOMSTATUS.DISCONNECTED);
+                        view.registerHandlers();
                         view.join();
+                        view.fetchMessages();
                     }
                 });
             };

src/templates/brand_heading.html

@@ -1 +1,4 @@
-<h1 class="brand-heading"><i class="icon-conversejs"></i> inVerse</h1>
+<span>
+    <h1 class="brand-heading"><i class="icon-conversejs"></i> inVerse</h1>
+    <p><a href="https://conversejs.org">Open Source</a> XMPP chat client</p>
+<span>

src/templates/chatroom_toolbar.html

@@ -1,6 +1,25 @@
 {[ if (show_emoticons)  { ]}
     <li class="toggle-smiley icon-happy" title="{{{label_insert_smiley}}}">
+    {[ if (use_emoji)  { ]}
         <ul class="emoji-picker"></ul>
+    {[ } ]}
+    {[ if (!use_emoji)  { ]}
+        <ul class="toolbar-picker-panel">
+            <li><a class="icon-smiley" href="#" data-emoticon=":)"></a></li>
+            <li><a class="icon-wink" href="#" data-emoticon=";)"></a></li>
+            <li><a class="icon-grin" href="#" data-emoticon=":D"></a></li>
+            <li><a class="icon-tongue" href="#" data-emoticon=":P"></a></li>
+            <li><a class="icon-cool" href="#" data-emoticon="8)"></a></li>
+            <li><a class="icon-evil" href="#" data-emoticon=">:)"></a></li>
+            <li><a class="icon-confused" href="#" data-emoticon=":S"></a></li>
+            <li><a class="icon-wondering" href="#" data-emoticon=":\"></a></li>
+            <li><a class="icon-angry" href="#" data-emoticon=">:("></a></li>
+            <li><a class="icon-sad" href="#" data-emoticon=":("></a></li>
+            <li><a class="icon-shocked" href="#" data-emoticon=":O"></a></li>
+            <li><a class="icon-thumbs-up" href="#" data-emoticon="(^.^)b"></a></li>
+            <li><a class="icon-heart" href="#" data-emoticon="<3"></a></li>
+        </ul>
+    {[ } ]}
     </li>
 {[ } ]}
 {[ if (show_call_button)  { ]}

src/templates/registration_form.html

@@ -1,6 +1,3 @@
 <p class="provider-title">{{{domain}}}</p>
-<a href='https://xmpp.net/result.php?domain={{{domain}}}&amp;type=client'>
-    <img class="provider-score" src='https://xmpp.net/badge.php?domain={{{domain}}}' alt='xmpp.net score' />
-</a>
 <p class="title">{{{title}}}</p>
 <p class="instructions">{{{instructions}}}</p>

src/templates/toolbar.html

@@ -1,5 +1,26 @@
 {[ if (show_emoticons)  { ]}
-    <li class="toggle-smiley icon-happy" title="{{{label_insert_smiley}}}"></li>
+    <li class="toggle-smiley icon-happy" title="{{{label_insert_smiley}}}">
+    {[ if (use_emoji)  { ]}
+        <ul class="emoji-picker"></ul>
+    {[ } ]}
+    {[ if (!use_emoji)  { ]}
+        <ul class="toolbar-picker-panel">
+            <li><a class="icon-smiley" href="#" data-emoticon=":)"></a></li>
+            <li><a class="icon-wink" href="#" data-emoticon=";)"></a></li>
+            <li><a class="icon-grin" href="#" data-emoticon=":D"></a></li>
+            <li><a class="icon-tongue" href="#" data-emoticon=":P"></a></li>
+            <li><a class="icon-cool" href="#" data-emoticon="8)"></a></li>
+            <li><a class="icon-evil" href="#" data-emoticon=">:)"></a></li>
+            <li><a class="icon-confused" href="#" data-emoticon=":S"></a></li>
+            <li><a class="icon-wondering" href="#" data-emoticon=":\"></a></li>
+            <li><a class="icon-angry" href="#" data-emoticon=">:("></a></li>
+            <li><a class="icon-sad" href="#" data-emoticon=":("></a></li>
+            <li><a class="icon-shocked" href="#" data-emoticon=":O"></a></li>
+            <li><a class="icon-thumbs-up" href="#" data-emoticon="(^.^)b"></a></li>
+            <li><a class="icon-heart" href="#" data-emoticon="<3"></a></li>
+        </ul>
+    </li>
+    {[ } ]}
 {[ } ]}
 {[ if (show_call_button)  { ]}
 <li class="toggle-call"><a class="icon-phone" title="{{{label_start_call}}}"></a></li>

src/templates/toolbar_otr.html

@@ -13,7 +13,7 @@
         {[ if (otr_status == FINISHED) { ]}
             <span class="icon-unlocked"></span>
         {[ } ]}
-        <ul class="hidden">
+        <ul class="toolbar-picker-panel">
             {[ if (otr_status == UNENCRYPTED) { ]}
                <li><a class="start-otr" href="#">{{{label_start_encrypted_conversation}}}</a></li>
             {[ } ]}

src/utils.js

@@ -540,5 +540,17 @@
         }
         return this.emojis_by_category;
     }
+
+    utils.isPersistableModel = function (model) {
+        return model.collection && model.collection.browserStorage;
+    }
+
+    utils.safeSave = function (model, attributes) {
+        if (utils.isPersistableModel(model)) {
+            model.save(attributes);
+        } else {
+            model.set(attributes);
+        }
+    }
     return utils;
 }));

tests/console-reporter.js

@@ -0,0 +1,146 @@
+(function (root, factory) {
+    define([], factory);
+} (this, function () {
+    "use strict";
+
+    var noopTimer = {
+        start: function () {},
+        elapsed: function () { return 0; }
+    };
+
+    function ConsoleReporter (options) {
+        var timer = noopTimer,
+            specCount,
+            failureCount,
+            failedSpecs = [],
+            pendingCount,
+            ansi = {
+                green: '\x1B[32m',
+                red: '\x1B[31m',
+                yellow: '\x1B[33m',
+                none: '\x1B[0m'
+            },
+            failedSuites = [];
+
+        var print = function print (message) {
+            console.log(message + '\x03\b');
+        }
+
+        this.jasmineStarted = function () {
+            specCount = 0;
+            failureCount = 0;
+            pendingCount = 0;
+            print('Started');
+            printNewline();
+            timer.start();
+        };
+
+        this.jasmineDone = function () {
+            print("jasmineDone");
+            printNewline();
+            for (var i = 0; i < failedSpecs.length; i++) {
+                specFailureDetails(failedSpecs[i]);
+            }
+
+            if(specCount > 0) {
+                printNewline();
+                var specCounts = specCount + ' ' + plural('spec', specCount) + ', ' +
+                        failureCount + ' ' + plural('failure', failureCount);
+                if (pendingCount) {
+                    specCounts += ', ' + pendingCount + ' pending ' + plural('spec', pendingCount);
+                }
+                print(specCounts);
+            } else {
+                print('No specs found');
+            }
+
+            printNewline();
+            var seconds = timer.elapsed() / 1000;
+            print('Finished in ' + seconds + ' ' + plural('second', seconds));
+            printNewline();
+            for (i = 0; i < failedSuites.length; i++) {
+                suiteFailureDetails(failedSuites[i]);
+            }
+            var exitCode = failureCount === 0 ? 0 : 1;
+            console.info('All tests completed!' + exitCode);
+        };
+
+        this.specDone = function (result) {
+            specCount++;
+            if (result.status == 'pending') {
+                pendingCount++;
+                print(colored('yellow', '*'));
+                return;
+            }
+            if (result.status == 'passed') {
+                print(colored('green', '.'));
+                return;
+            }
+            if (result.status == 'failed') {
+                failureCount++;
+                failedSpecs.push(result);
+                print(colored('red', 'F'));
+            }
+        };
+
+        this.suiteDone = function (result) {
+            if (result.failedExpectations && result.failedExpectations.length > 0) {
+                failureCount++;
+                failedSuites.push(result);
+            }
+        };
+        return this;
+
+        function printNewline() {
+            print('\n');
+        }
+
+        function colored (color, str) {
+            return ansi[color] + str + ansi.none;
+        }
+
+        function plural (str, count) {
+            return count == 1 ? str : str + 's';
+        }
+
+        function repeat (thing, times) {
+            var arr = [];
+            for (var i = 0; i < times; i++) {
+                arr.push(thing);
+            }
+            return arr;
+        }
+
+        function indent (str, spaces) {
+            var lines = (str || '').split('\n');
+            var newArr = [];
+            for (var i = 0; i < lines.length; i++) {
+                newArr.push(repeat(' ', spaces).join('') + lines[i]);
+            }
+            return newArr.join('\n');
+        }
+
+        function specFailureDetails (result) {
+            printNewline();
+            print(result.fullName);
+            for (var i = 0; i < result.failedExpectations.length; i++) {
+                var failedExpectation = result.failedExpectations[i];
+                printNewline();
+                print(indent(failedExpectation.message, 2));
+                print(indent(failedExpectation.stack, 2));
+            }
+            printNewline();
+        }
+
+        function suiteFailureDetails (result) {
+            for (var i = 0; i < result.failedExpectations.length; i++) {
+                printNewline();
+                print(colored('red', 'An error was thrown in an afterAll'));
+                printNewline();
+                print(colored('red', 'AfterAll ' + result.failedExpectations[i].message));
+            }
+            printNewline();
+        }
+    }
+    return ConsoleReporter;
+}));

tests/runner.js

@@ -6,52 +6,32 @@ config.paths['wait-until-promise'] = "node_modules/wait-until-promise/index";
 config.paths['test-utils'] = "tests/utils";
 config.paths.sinon = "node_modules/sinon/pkg/sinon";
 config.paths.transcripts = "converse-logs/converse-logs";
-config.paths.jasmine = "node_modules/jasmine-core/lib/jasmine-core/jasmine";
-config.paths.boot = "node_modules/jasmine-core/lib/jasmine-core/boot";
+config.paths["jasmine-core"] = "node_modules/jasmine-core/lib/jasmine-core/jasmine";
+config.paths.jasmine = "node_modules/jasmine-core/lib/jasmine-core/boot";
 config.paths["jasmine-console"] = "node_modules/jasmine-core/lib/console/console";
+config.paths["console-reporter"] = "tests/console-reporter";
 config.paths["jasmine-html"] = "node_modules/jasmine-core/lib/jasmine-core/jasmine-html";
-// config.paths["console-runner"] = "node_modules/phantom-jasmine/lib/console-runner";
 config.shim.jasmine = {
     exports: 'window.jasmineRequire'
 };
 config.shim['jasmine-html'] = {
-    deps: ['jasmine'],
+    deps: ['jasmine-core'],
     exports: 'window.jasmineRequire'
 };
 config.shim['jasmine-console'] = {
-    deps: ['jasmine'],
+    deps: ['jasmine-core'],
     exports: 'window.jasmineRequire'
 };
-config.shim.boot = {
-    deps: ['jasmine', 'jasmine-html', 'jasmine-console'],
+config.shim.jasmine = {
+    deps: ['jasmine-core', 'jasmine-html', 'jasmine-console'],
     exports: 'window.jasmine'
 };
-
 require.config(config);
 
-// Polyfill 'bind' which is not available in phantomjs < 2.0
-if (!Function.prototype.bind) {
-    Function.prototype.bind = function (oThis) {
-        if (typeof this !== "function") {
-            // closest thing possible to the ECMAScript 5 internal IsCallable function
-            throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
-        }
-        var aArgs = Array.prototype.slice.call(arguments, 1),
-            fToBind = this,
-            fNOP = function () {},
-            fBound = function () {
-            return fToBind.apply(this instanceof fNOP && oThis ? this : oThis,
-                aArgs.concat(Array.prototype.slice.call(arguments)));
-            };
-        fNOP.prototype = this.prototype;
-        fBound.prototype = new fNOP();
-        return fBound;
-    };
-}
-
 var specs = [
     //"spec/transcripts",
     // "spec/profiling",
+    "jasmine",
     "spec/utils",
     "spec/converse",
     "spec/bookmarks",
@@ -73,31 +53,16 @@ var specs = [
     "spec/register"
 ];
 
-require(['jquery', 'mock', 'boot', 'sinon', 'wait-until-promise'],
-        function($, mock, jasmine, sinon, waitUntilPromise) {
+require(['console-reporter', 'mock', 'sinon', 'wait-until-promise', 'pluggable'],
+        function(ConsoleReporter, mock, sinon, waitUntilPromise, pluggable) {
     window.sinon = sinon;
     window.waitUntilPromise = waitUntilPromise['default'];
     window.localStorage.clear();
     window.sessionStorage.clear();
-
-    var jasmineEnv = jasmine.getEnv();
-    var ConsoleReporter = window.jasmineRequire.ConsoleReporter();
-    var consoleReporter = new ConsoleReporter({
-        print: function print(message) {
-            console.log(message + '\x03\b');
-        },
-        onComplete: function onComplete(isSuccess) {
-            var exitCode = isSuccess ? 0 : 1;
-            console.info('All tests completed!' + exitCode);
-        },
-        showColors: true
-    });
-    jasmineEnv.addReporter(consoleReporter);
-
     // Load the specs
-    require(specs, function () {
-        // Initialize the HTML Reporter and execute the environment (setup by `boot.js`)
-        // http://stackoverflow.com/questions/19240302/does-jasmine-2-0-really-not-work-with-require-js
+    require(specs, function (jasmine) {
+        var jasmineEnv = jasmine.getEnv();
+        jasmineEnv.addReporter(new ConsoleReporter());
         window.onload();
     });
 });