diff --git a/apps/sms/js/thread_ui.js b/apps/sms/js/thread_ui.js index d8034ef92b61..58078e63d2cd 100755 --- a/apps/sms/js/thread_ui.js +++ b/apps/sms/js/thread_ui.js @@ -55,6 +55,7 @@ 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, @@ -62,7 +63,10 @@ var ThreadUI = global.ThreadUI = { 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,11 +442,6 @@ 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(); }, @@ -453,9 +449,16 @@ var ThreadUI = global.ThreadUI = { 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) { diff --git a/apps/sms/test/unit/thread_ui_test.js b/apps/sms/test/unit/thread_ui_test.js index 790a4f4a6fc6..ad27558e2433 100755 --- a/apps/sms/test/unit/thread_ui_test.js +++ b/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')); }); }); });