Bug 813689 - [SMS] Characters counter in SMS application

apps/sms/index.html

@@ -23,6 +23,7 @@
     <link rel="resource" type="application/l10n" href="locales/locales.ini">
     <link rel="resource" type="application/l10n" href="shared/locales/date.ini">
     <!-- Shared code -->
+    <script type="text/javascript" src="shared/js/settings_listener.js"></script>
     <script type="text/javascript" src="shared/js/async_storage.js"></script>
     <script type="text/javascript" src="shared/js/l10n.js"></script>
     <script type="text/javascript" src="shared/js/l10n_date.js"></script>
@@ -113,7 +114,7 @@ <h1 id="header-text" data-l10n-id="messages" aria-hidden="true">Messages</h1>
         <article id="messages-container" class="view-body" data-type="list">
         </article>
         <form role="search" id="new-sms-form" class="bottom new-sms-form">
-          <button id="send-message" disabled data-l10n-id="send" type="submit">SEND</button>
+          <button id="send-message" disabled data-l10n-id="send" type="submit">Send</button>
           <p>
             <textarea type="text" id="message-to-send" name="message-to-send" placeholder="Message" data-l10n-id="composeMessage"></textarea>
           </p>

apps/sms/js/sms.js

@@ -724,6 +724,9 @@ var ThreadUI = {
     return this.sendForm = document.getElementById('new-sms-form');
   },
 
+  // Does the operator force 7-bit encoding
+  is7BitEncoding: false,
+
   init: function thui_init() {
     this.sendButton.addEventListener('click', this.sendMessage.bind(this));
 
@@ -763,15 +766,23 @@ var ThreadUI = {
     this.editForm.addEventListener('submit', this);
     this.telForm.addEventListener('submit', this);
     this.sendForm.addEventListener('submit', this);
+
+    var self = this;
+    SettingsListener.observe('ril.sms.strict7BitEncoding.enabled',
+                             function onSMSEncodingChange(value) {
+      self.is7BitEncoding = !!value;
+    });
   },
 
   enableSend: function thui_enableSend() {
     if (window.location.hash == '#new' && this.contactInput.value.length == 0) {
       this.sendButton.disabled = true;
+      this.updateCounter();
       return;
     }
 
     this.sendButton.disabled = !(this.input.value.length > 0);
+    this.updateCounter();
   },
 
   scrollViewToBottom: function thui_scrollViewToBottom(animateFromPos) {
@@ -793,6 +804,52 @@ var ThreadUI = {
     }).bind(this), 100);
   },
 
+  has7BitOnlyCharacters: function thui_has7BitOnluCharacter(value) {
+    for (var i = 0; i < value.length; i++) {
+      if (value.charCodeAt(i) >= 128) {
+        return false;
+      }
+    }
+
+    return true;
+  },
+
+  updateCounter: function thui_updateCount(evt) {
+    var value = this.input.value;
+
+    // In theory the maximum concatenated number of SMS is 255.
+    var kMaxConcatenatedMessages = 255;
+    var excessive = false;
+
+    // A sms can hold 140 bytes of data or 134 bytes of data depending
+    // if it is a single or concatenated sms. To be fun the numbers of
+    // sms also depends on the character encoding of the message.
+    if (this.is7BitEncoding || this.has7BitOnlyCharacters(value)) {
+      var kMaxCharsIfSingle = 160; // (140 * 8) / 7 = 160.
+      var kMaxCharsIfMultiple = 153; // ((140 - 6) / 7 ~= 153.
+    } else {
+      var kMaxCharsIfSingle = 70; // (140 * 8) / 16 = 70.
+      var kMaxCharsIfMultiple = 67; // ((140 - 6) / 16 = 67.
+    }
+
+    var counter = '';
+    var length = value.length;
+    if ((length / kMaxCharsIfSingle) > 1) {
+      var charsLeft = kMaxCharsIfMultiple - (length % kMaxCharsIfMultiple);
+      var smsCount = Math.ceil(length / kMaxCharsIfMultiple);
+      counter = charsLeft + '/' + smsCount;
+
+      // Make sure the current number of sms is not bigger than the maximum
+      // theorical number of sms that can be concatenate.
+      if (smsCount > kMaxConcatenatedMessages) {
+        excessive = true;
+      }
+    }
+
+    this.sendButton.dataset.counter = counter;
+    this.sendButton.disabled = excessive;
+  },
+
   updateInputHeight: function thui_updateInputHeight() {
     var input = this.input;
     var inputCss = window.getComputedStyle(input, null);

apps/sms/style/sms.css

@@ -465,6 +465,15 @@ form.bottom[role="search"].new-sms-form {
   background: #008aaa;
 }
 
+#send-message:before {
+  content: attr(data-counter);
+  font-size: 1.2rem;
+  color: #606060;
+  position: absolute;
+  right: 1.5rem;
+  bottom: 2.4rem;
+}
+
 #message-to-send {
   padding: 0.4rem 0 0.4rem 0.4rem;
   line-height: 2rem;