Permalink
Browse files

Merge pull request #16380 from steveck-chung/message-bubble-timestamp

Bug 871432 - [sms][mms] display the received time inside the sms/mms box. r=julienw
  • Loading branch information...
2 parents cde26dc + 3c56239 commit 6786c63a1d46a351094bd9fcef43199b34a30390 @steveck-chung steveck-chung committed May 19, 2014
View
@@ -432,6 +432,7 @@ <h1 class="subject">
<progress class="${progressIndicatorClassName}"></progress>
</aside>
<p>${bodyHTML}</p>
+ <time data-time-update="true" data-time-only="true" data-time="${timestamp}"></time>
</div>
</section>
-->
@@ -705,7 +705,7 @@ var ThreadListUI = {
// Append 'time-update' state
headerDOM.dataset.timeUpdate = 'repeat';
headerDOM.dataset.time = timestamp;
- headerDOM.dataset.isThread = true;
+ headerDOM.dataset.dateOnly = true;
// Create UL DOM Element
var threadsContainerDOM = document.createElement('ul');
@@ -51,8 +51,6 @@ function thui_generateSmilSlides(slides, content) {
}
var ThreadUI = global.ThreadUI = {
- // Time buffer for the 'last-messages' set. In this case 10 min
- LAST_MESSAGES_BUFFERING_TIME: 10 * 60 * 1000,
CHUNK_SIZE: 10,
// duration of the notification that message type was converted
CONVERTED_MESSAGE_DURATION: 3000,
@@ -1097,32 +1095,8 @@ var ThreadUI = global.ThreadUI = {
getMessageContainer:
function thui_getMessageContainer(messageTimestamp, hidden) {
var startOfDayTimestamp = Utils.getDayDate(messageTimestamp);
- var now = Date.now();
- var messageContainer, header;
- // If timestamp belongs to [now, now - TimeBuffer]
- var lastMessageDelay = this.LAST_MESSAGES_BUFFERING_TIME;
- var isLastMessagesBlock =
- (messageTimestamp >= (now - lastMessageDelay));
-
- // Is there any container with our requirements?
- if (isLastMessagesBlock) {
- messageContainer = document.getElementById('last-messages');
- if (messageContainer) {
- var oldTimestamp = messageContainer.dataset.timestamp;
- var oldDayTimestamp = Utils.getDayDate(oldTimestamp);
- var shouldCreateNewBlock =
- (oldDayTimestamp !== startOfDayTimestamp) || // new day
- (oldTimestamp < messageTimestamp - lastMessageDelay); // too old
-
- if (shouldCreateNewBlock) {
- messageContainer.id = 'mc_' + Utils.getDayDate(oldTimestamp);
- messageContainer.dataset.timestamp = oldDayTimestamp;
- messageContainer = null;
- }
- }
- } else {
- messageContainer = document.getElementById('mc_' + startOfDayTimestamp);
- }
+ var header;
+ var messageContainer = document.getElementById('mc_' + startOfDayTimestamp);
if (messageContainer) {
header = messageContainer.previousElementSibling;
@@ -1141,39 +1115,18 @@ var ThreadUI = global.ThreadUI = {
// Append 'time-update' state
header.dataset.timeUpdate = 'repeat';
header.dataset.time = messageTimestamp;
+ header.dataset.dateOnly = true;
- // Add text
- if (isLastMessagesBlock) {
- var lastContainer = this.container.lastElementChild;
- if (lastContainer) {
- var lastDay = Utils.getDayDate(lastContainer.dataset.timestamp);
- if (lastDay === startOfDayTimestamp) {
- // same day -> show only the time
- header.dataset.timeOnly = 'true';
- }
- }
-
- messageContainer.id = 'last-messages';
- messageContainer.dataset.timestamp = messageTimestamp;
- } else {
- messageContainer.id = 'mc_' + startOfDayTimestamp;
- messageContainer.dataset.timestamp = startOfDayTimestamp;
- }
+ // Add timestamp text
+ messageContainer.id = 'mc_' + startOfDayTimestamp;
+ messageContainer.dataset.timestamp = startOfDayTimestamp;
if (hidden) {
header.classList.add('hidden');
} else {
TimeHeaders.update(header);
}
- // Where do I have to append the Container?
- // If is the 'last-messages' one should be the most recent one.
- if (isLastMessagesBlock) {
- this.container.appendChild(header);
- this.container.appendChild(messageContainer);
- return messageContainer;
- }
-
// In other case we have to look for the right place for appending
// the message
var insertBeforeContainer;
@@ -1192,14 +1145,6 @@ var ThreadUI = global.ThreadUI = {
insertBeforeContainer ? insertBeforeContainer.previousSibling : null);
this.container.insertBefore(header, messageContainer);
- // if the next container is the same date => we must update his header
- if (insertBeforeContainer) {
- var nextContainerTimestamp = insertBeforeContainer.dataset.timestamp;
- if (startOfDayTimestamp === Utils.getDayDate(nextContainerTimestamp)) {
- header = insertBeforeContainer.previousElementSibling;
- header.dataset.timeOnly = 'true';
- }
- }
return messageContainer;
},
@@ -1546,6 +1491,7 @@ var ThreadUI = global.ThreadUI = {
messageDOM.innerHTML = this.tmpl.message.interpolate({
id: String(message.id),
bodyHTML: bodyHTML,
+ timestamp: String(message.timestamp),
subject: String(message.subject),
// Incoming and outgoing messages are displayed using different
// backgrounds, therefore progress indicator should be styled differently.
@@ -1555,6 +1501,7 @@ var ThreadUI = global.ThreadUI = {
});
navigator.mozL10n.translate(messageDOM);
+ TimeHeaders.update(messageDOM.querySelector('time'));
var pElement = messageDOM.querySelector('p');
if (invalidEmptyContent) {
@@ -37,29 +37,29 @@
this.update(elements[i]);
}
},
- update: function th_update(header) {
- var ts = header.dataset.time;
+ update: function th_update(element) {
+ var ts = element.dataset.time;
if (!ts) {
return;
}
- var newHeader;
+ var newElement;
// only date
- if (header.dataset.isThread === 'true') {
- newHeader = Utils.getHeaderDate(ts);
+ if (element.dataset.dateOnly === 'true') {
+ newElement = Utils.getHeaderDate(ts);
// only time
- } else if (header.dataset.timeOnly === 'true') {
- newHeader = Utils.getFormattedHour(ts);
+ } else if (element.dataset.timeOnly === 'true') {
+ newElement = Utils.getFormattedHour(ts);
// date + time
} else {
- newHeader = Utils.getHeaderDate(ts) + ' ' + Utils.getFormattedHour(ts);
+ newElement = Utils.getHeaderDate(ts) + ' ' + Utils.getFormattedHour(ts);
}
- if (newHeader !== header.textContent) {
- header.textContent = newHeader;
+ if (newElement !== element.textContent) {
+ element.textContent = newElement;
}
}
};
@@ -418,12 +418,14 @@ section.has-carrier .article-list header:first-child {
display: none;
}
+/* Set padding bottom to 1 rem because .5rem is added by the line-height,
+ which adds up and gives 1.5rem for the whole visible bottom padding */
.article-list[data-type="list"] .message .bubble {
overflow: visible;
-moz-box-sizing: border-box;
max-width: calc(100% - 4rem);
height: 100%;
- padding: 1.5rem;
+ padding: 1.5rem 1.5rem 1rem;
background: #fff;
}
@@ -618,6 +620,17 @@ ul.message-list {
color: #FF4E00;
}
+.bubble time {
+ /* TODO: We might need to remove time element display: block in root.css */
+ display: block;
+
+ color: #000;
+ opacity: 0.7;
+ font-size: 1.4rem;
+ font-style: italic;
+ line-height: 2.3rem;
+}
+
/*
Styles for Edit mode in Messages Container
*/
@@ -2128,7 +2128,7 @@ suite('thread_ui.js >', function() {
oneHourFiveMinAgo = new Date(2013, 11, 31, 22, 54);
});
- suite('last message block alone today >', function() {
+ suite('latest block alone today >', function() {
var subject;
setup(function() {
@@ -2138,23 +2138,6 @@ suite('thread_ui.js >', function() {
test('New created block should have message-list class', function() {
assert.isTrue(subject.classList.contains('message-list'));
});
-
- test('has both the date and the time', function() {
- var header = subject.previousElementSibling;
- assert.notEqual(header.dataset.timeOnly, 'true');
- });
- });
-
- suite('last message block with another block today >', function() {
- var subject;
- setup(function() {
- ThreadUI.getMessageContainer(+elevenMinAgo);
- subject = ThreadUI.getMessageContainer(+fiveMinAgo);
- });
-
- test('has only the time', function() {
- assert.equal(subject.previousElementSibling.dataset.timeOnly, 'true');
- });
});
suite('2 recent messages, different days >', function() {
@@ -2189,17 +2172,18 @@ suite('thread_ui.js >', function() {
secondContainer = ThreadUI.getMessageContainer(Date.now());
});
- test('different containers', function() {
- assert.notEqual(secondContainer, firstContainer);
+ test('same containers', function() {
+ assert.equal(secondContainer, firstContainer);
});
- test('has only the time', function() {
- var secondHeader = secondContainer.previousElementSibling;
- assert.equal(secondHeader.dataset.timeOnly, 'true');
+ test('should have only 1 blocks', function() {
+ assert.equal(ThreadUI.container.querySelectorAll('header').length, 1);
+ assert.equal(ThreadUI.container.querySelectorAll('ul').length, 1);
});
- test('first container has now a start-of-the-day timestamp', function() {
- assert.notEqual(firstContainer.dataset.timestamp, firstTimestamp);
+
+ test('container has a start-of-the-day timestamp', function() {
+ assert.equal(firstContainer.dataset.timestamp, firstTimestamp);
});
});
@@ -2260,16 +2244,16 @@ suite('thread_ui.js >', function() {
});
});
- suite('4 blocks suite >', function() {
+ suite('3 blocks suite >', function() {
var lastYearContainer, yesterdayContainer;
var elevenMinContainer, fiveMinContainer;
var oneHourContainer, oneHourFiveContainer;
setup(function() {
yesterdayContainer = ThreadUI.getMessageContainer(+yesterday);
+ // Messages created today should be in the same block and last message
+ // block should not exist anymore
fiveMinContainer = ThreadUI.getMessageContainer(+fiveMinAgo);
- // this one is asked after the last message block to see if the
- // header are updated
elevenMinContainer = ThreadUI.getMessageContainer(+elevenMinAgo);
oneHourContainer = ThreadUI.getMessageContainer(+oneHourAgo);
oneHourFiveContainer = ThreadUI.getMessageContainer(+oneHourFiveMinAgo);
@@ -2278,17 +2262,16 @@ suite('thread_ui.js >', function() {
lastYearContainer = ThreadUI.getMessageContainer(+lastYear);
});
- test('should have 4 blocks', function() {
- assert.equal(ThreadUI.container.querySelectorAll('header').length, 4);
- assert.equal(ThreadUI.container.querySelectorAll('ul').length, 4);
+ test('should have 3 blocks', function() {
+ assert.equal(ThreadUI.container.querySelectorAll('header').length, 3);
+ assert.equal(ThreadUI.container.querySelectorAll('ul').length, 3);
});
test('should be in the correct order', function() {
var containers = ThreadUI.container.querySelectorAll('ul');
var expectedContainers = [
lastYearContainer,
yesterdayContainer,
- elevenMinContainer,
fiveMinContainer
];
@@ -2300,15 +2283,10 @@ suite('thread_ui.js >', function() {
test('some containers are the same', function() {
assert.equal(oneHourContainer, elevenMinContainer);
assert.equal(oneHourFiveContainer, elevenMinContainer);
+ assert.equal(fiveMinContainer, elevenMinContainer);
});
- test('last message block should not show the date', function() {
- // because there is another earlier block the same day
- var header = fiveMinContainer.previousElementSibling;
- assert.equal(header.dataset.timeOnly, 'true');
- });
-
- test('adding a new message in the last message block', function() {
+ test('adding a new message in the latest block', function() {
var twoMinAgo = new Date(2013, 11, 31, 23, 57);
var twoMinContainer = ThreadUI.getMessageContainer(+twoMinAgo);
assert.equal(twoMinContainer, fiveMinContainer);
@@ -2327,8 +2305,8 @@ suite('thread_ui.js >', function() {
container = ThreadUI.getMessageContainer(+yesterdayEarlier);
});
- test('still 4 blocks', function() {
- assert.equal(ThreadUI.container.querySelectorAll('header').length, 4);
+ test('still 3 blocks', function() {
+ assert.equal(ThreadUI.container.querySelectorAll('header').length, 3);
});
test('same container as the existing yesterday container', function() {
@@ -2397,8 +2375,10 @@ suite('thread_ui.js >', function() {
});
test('calls template with subject for MMS', function() {
+ var now = Date.now();
ThreadUI.buildMessageDOM({
id: '1',
+ timestamp: now,
subject: 'subject',
type: 'mms',
deliveryInfo: [],
@@ -2407,6 +2387,7 @@ suite('thread_ui.js >', function() {
assert.ok(ThreadUI.tmpl.message.interpolate.calledWith({
id: '1',
bodyHTML: '',
+ timestamp: '' + now,
subject: 'subject',
progressIndicatorClassName: ''
}));
@@ -28,7 +28,7 @@ suite('TimeHeaders > ', function() {
this.sinon.spy(TimeHeaders, 'update');
var additionalDataset = [
- 'data-is-thread="true"',
+ 'data-date-only="true"',
'data-hour-only="true"',
''
];
@@ -251,7 +251,7 @@ suite('TimeHeaders > ', function() {
});
test('date header', function() {
- subject.dataset.isThread = 'true';
+ subject.dataset.dateOnly = 'true';
TimeHeaders.update(subject);
var content = subject.textContent;

0 comments on commit 6786c63

Please sign in to comment.