Bug 954246 - Display the character count while typing a tweet, r=clokep.

im/content/conversation.xml

@@ -194,6 +194,8 @@
      </method>
 
      <field name="_statusText">""</field>
+     <field name="_statusTextEnd">""</field>
+     <field name="_statusTextEndIsError">false</field>
 
      <!-- This is used when we want to remove close the conversation binding
      without closing the associated PurpleConversation.
@@ -467,14 +469,24 @@
 
         var inputBox = this.editor;
         if (event.keyCode != 13) {
-          if (!this._conv.isChat)
-            setTimeout(function () {
-              // By the time the timeout is executed, the conversation may have
-              // been closed.
-              if (!this._conv)
-                return;
+          setTimeout((function () {
+            // By the time the timeout is executed, the conversation may have
+            // been closed.
+            if (!this._conv)
+              return;
 
-              let text = inputBox.value;
+            let text = inputBox.value;
+
+            let maxLength = this._conv.account.maxMessageLength;
+            if (maxLength) {
+              let left = maxLength - text.length;
+              // 200 is a 'magic' constant to avoid showing big numbers.
+              this._statusTextEnd = left < 200 ? left.toString() : "";
+              this._statusTextEndIsError = left < 0;
+              this.displayStatusText();
+            }
+
+            if (!this._conv.isChat)
               // try to avoid sending typing notifications when the user is
               // typing a command in the conversation.
               // These checks are not perfect (especially if non-existing
@@ -484,13 +496,15 @@
               else
                 if (/^\/me /.test(text))
                   this._conv.sendTyping(text.length - 4);
-            }, 0);
+          }).bind(this), 0);
           return;
         }
 
         if (!event.ctrlKey && !event.shiftKey && !event.altKey) {
-          this.sendMsg(inputBox.value);
+          // Prevent the default action before calling sendMsg to avoid having
+          // a line break inserted in the textbox if sendMsg throws.
           event.preventDefault();
+          this.sendMsg(inputBox.value);
         }
         else if (!event.shiftKey)
           this.addString("\n");
@@ -503,6 +517,10 @@
       <![CDATA[
         var inputBox = this.editor;
         inputBox.value = "";
+        this._statusTextEnd = "";
+        this._statusTextEndIsError = false;
+        this.displayStatusText();
+
         let overflow = "";
         if (TextboxSize.autoResize) {
           let currHeight = parseInt(inputBox.parentNode.height);
@@ -925,8 +943,12 @@
          if (!this.tab.selected)
            return;
 
-         if ("XULBrowserWindow" in window)
+         if ("XULBrowserWindow" in window) {
            window.XULBrowserWindow.setStatus(this._statusText);
+           if ("setStatusEnd" in window.XULBrowserWindow)
+             window.XULBrowserWindow.setStatusEnd(this._statusTextEnd,
+                                                  this._statusTextEndIsError);
+         }
        ]]>
        </body>
      </method>

im/content/instantbird.js

@@ -185,6 +185,16 @@ var XULBrowserWindow = {
     return originalTarget;
   },
 
+  setStatusEnd: function (aStatusEndText, aError) {
+    let field = document.getElementById("statusbar-display-end");
+    field.label = aStatusEndText;
+    field.hidden = !aStatusEndText;
+    if (aError)
+      field.setAttribute("error", "true");
+    else
+      field.removeAttribute("error");
+  },
+
   updateStatusField: function () {
     var text = this.overLink || this.status || this.jsStatus || this.jsDefaultStatus || this.defaultStatus;
 

im/content/instantbird.xul

@@ -211,5 +211,6 @@
 
   <statusbar id="convWindow-statusbar">
     <statusbarpanel id="statusbar-display" label="" crop="end" flex="1"/>
+    <statusbarpanel id="statusbar-display-end" label=""/>
   </statusbar>
 </window>

im/themes/instantbird.css

@@ -60,6 +60,15 @@ statusbarpanel {
 }
 %endif
 
+#statusbar-display-end > .statusbarpanel-text {
+  -moz-margin-end: 0;
+}
+
+#statusbar-display-end[error] {
+  color: red;
+  font-weight: bold;
+}
+
 %ifndef XP_MACOSX
 notification > hbox {
   border: none !important;

purple/purplexpcom/src/jsProtoHelper.jsm

@@ -221,6 +221,7 @@ const ForwardAccountPrototype = {
   get noFontSizes() this._base.noFontSizes,
   get noUrlDesc() this._base.noUrlDesc,
   get noImages() this._base.noImages,
+  get maxMessageLength() this._base.maxMessageLength,
 
   // grep attribute purpleIAccount.idl |grep -v readonly |sed 's/.* //;s/;//;s/\(.*\)/  set \1(val) { this._base.\1 = val; },/'
   set autoLogin(val) { this._base.autoLogin = val; },

purple/purplexpcom/src/twitter.js

@@ -55,15 +55,21 @@ Conversation.prototype = {
   __proto__: GenericConvChatPrototype,
   unInit: function() { delete this.account._timeline; },
   sendMsg: function (aMsg) {
+    if (aMsg.length > this.account.maxMessageLength) {
+      this.writeError("Status is over 140 characters.");
+      throw Cr.NS_ERROR_INVALID_ARG;
+    }
     this.account.tweet(aMsg, this.onSentCallback, function(aException, aData) {
       let error = "";
       try {
         error = "(" + JSON.parse(aData).error + ") ";
       } catch(e) {}
-      let msg = "An error " + error + "occured while sending: " + aMsg;
-      this.writeMessage("twitter.com", msg, {system: true});
+      this.writeError("An error " + error + "occured while sending: " + aMsg);
     }, this);
   },
+  writeError: function(aErrorMessage) {
+    this.writeMessage("twitter.com", aErrorMessage, {system: true});
+  },
   onSentCallback: function(aData) {
     let tweet = JSON.parse(aData);
     if (tweet.user.screen_name != this.account.name)
@@ -101,6 +107,8 @@ Account.prototype = {
   __proto__: GenericAccountPrototype,
 
   get HTMLEnabled() false,
+  get maxMessageLength() 140,
+
   consumerKey: "TSuyS1ieRAkB3qWv8yyEw",
   consumerSecret: "DKtKaSf5a7pBNhdBsSZHTnI5Y03hRlPFYWmb4xXBlkU",
   completionURI: "http://oauthcallback.local/",