Bug 952109 - [message] Subject. The banner informing the user that th…

…e maximum length of subject has been reached obscures the subject text field r=schung

apps/sms/js/thread_ui.js

@@ -55,14 +55,18 @@ var ThreadUI = global.ThreadUI = {
   // duration of the notification that message type was converted
   CONVERTED_MESSAGE_DURATION: 3000,
   IMAGE_RESIZE_DURATION: 3000,
+  BANNER_DURATION: 2000,
   // delay between 2 counter updates while composing a message
   UPDATE_DELAY: 500,
   recipients: null,
   // Set to |true| when in edit mode
   inEditMode: false,
   inThread: false,
   isNewMessageNoticeShown: false,
-  _updateTimeout: null,
+  timeouts: {
+    update: null,
+    subjectLengthNotice: null
+  },
   init: function thui_init() {
     var templateIds = [
       'message',
@@ -102,10 +106,7 @@ var ThreadUI = global.ThreadUI = {
     // Changes on subject input can change the type of the message
     // and size of fields
     this.subjectInput.addEventListener(
-      'keypress', this.onSubjectKeypress.bind(this)
-    );
-    this.subjectInput.addEventListener(
-      'focus', this.onSubjectFocus.bind(this)
+      'keyup', this.onSubjectKeyUp.bind(this)
     );
     this.subjectInput.addEventListener(
       'blur', this.onSubjectBlur.bind(this)
@@ -257,7 +258,7 @@ var ThreadUI = global.ThreadUI = {
     // Initialized here, but used in ThreadUI.cleanFields
     this.previousHash = null;
 
-    this._updateTimeout = null;
+    this.timeouts.update = null;
 
     // Cache fixed measurement while init
     var inputStyle = window.getComputedStyle(this.input);
@@ -431,7 +432,7 @@ var ThreadUI = global.ThreadUI = {
     }
   },
 
-  onSubjectKeypress: function thui_onSubjectKeypress(event) {
+  onSubjectKeyUp: function thui_onSubjectKeyUp(event) {
     Compose.updateType();
     // Handling user warning for max character reached
     // Only show the warning when the subject field has the focus
@@ -441,21 +442,23 @@ var ThreadUI = global.ThreadUI = {
       this.hideMaxLengthNotice();
     }
   },
-  onSubjectFocus: function thui_onSubjectFocus() {
-    if (this.subjectInput.value.length === Compose.SUBJECT_MAX_LENGTH) {
-      this.showMaxLengthNotice('messages-max-subject-length-text');
-    }
-  },
   onSubjectBlur: function thui_onSubjectBlur() {
     this.hideMaxLengthNotice();
   },
   showMaxLengthNotice: function thui_showMaxLengthNotice(l10nKey) {
     navigator.mozL10n.localize(
       this.maxLengthNotice.querySelector('p'), l10nKey);
     this.maxLengthNotice.classList.remove('hide');
+    if (this.timeouts.subjectLengthNotice) {
+      clearTimeout(this.timeouts.subjectLengthNotice);
+    }
+    this.timeouts.subjectLengthNotice =
+      setTimeout(this.hideMaxLengthNotice.bind(this), this.BANNER_DURATION);
   },
   hideMaxLengthNotice: function thui_hideMaxLengthNotice() {
     this.maxLengthNotice.classList.add('hide');
+    this.timeouts.subjectLengthNotice &&
+      clearTimeout(this.timeouts.subjectLengthNotice);
   },
 
   assimilateRecipients: function thui_assimilateRecipients() {
@@ -927,8 +930,8 @@ var ThreadUI = global.ThreadUI = {
       return this.updateCounterForMms();
     } else {
       Compose.lock = false;
-      if (this._updateTimeout === null) {
-        this._updateTimeout = setTimeout(this.updateCounterForSms.bind(this),
+      if (this.timeouts.update === null) {
+        this.timeouts.update = setTimeout(this.updateCounterForSms.bind(this),
             this.UPDATE_DELAY);
       }
       return true;
@@ -943,7 +946,7 @@ var ThreadUI = global.ThreadUI = {
     // returning in a different order, which would actually display old
     // information, is very tiny, so we should be good without adding another
     // lock.
-    this._updateTimeout = null;
+    this.timeouts.update = null;
     this.hideMaxLengthNotice();
     this.updateSmsSegmentLimit((function segmentLimitCallback(overLimit) {
       if (overLimit) {

apps/sms/test/unit/thread_ui_test.js

@@ -1088,10 +1088,28 @@ suite('thread_ui.js >', function() {
     });
 
     suite('when trying to pass the limit...', function() {
+      var clock;
       setup(function() {
+        clock = this.sinon.useFakeTimers();
         subject.value = '1234567890123456789012345678901234567890'; // 40 char
+        clock.tick(0);
         // Event is launched on keypress
-        subject.dispatchEvent(new CustomEvent('keypress'));
+        subject.dispatchEvent(new CustomEvent('keyup'));
+      });
+
+      teardown(function() {
+        clock.restore();
+      });
+
+      test('should create a timeout', function() {
+        assert.isFalse(!ThreadUI.timeouts.subjectLengthNotice);
+      });
+
+      test('banner should be hidden after an amount of secs.', function(done) {
+        assert.isFalse(banner.classList.contains('hide'));
+        clock.tick(3100);
+        assert.isTrue(banner.classList.contains('hide'));
+        done();
       });
 
       test('should be visible', function() {
@@ -1108,10 +1126,10 @@ suite('thread_ui.js >', function() {
         assert.isTrue(banner.classList.contains('hide'));
       });
 
-      test('should be visible if focus comes back', function() {
+      test('should not be visible if focus comes back.', function() {
         subject.dispatchEvent(new CustomEvent('blur'));
         subject.dispatchEvent(new CustomEvent('focus'));
-        assert.isFalse(banner.classList.contains('hide'));
+        assert.isTrue(banner.classList.contains('hide'));
       });
     });
   });