Update message bubble timestamps as needed

Display format consistent with Android:

* relative time for everything from today
* Day of week + time for within the past 7 days
* Static Month Day time for everything older

Each timestamp will only update as often as needed to stay accurate,
which is once a minute, once an hour, once a week, or never.

// FREEBIE

background.html

@@ -77,7 +77,7 @@
           <div class='attachments'></div>
           <p class="content">{{ message }}</p>
           <div class='meta'>
-            <span class='timestamp'>{{ timestamp }}</span>
+            <span class='timestamp' data-timestamp={{ timestamp }}></span>
             <span class='status hide'></span>
           </div>
       </div>
@@ -325,6 +325,7 @@
   <script type="text/javascript" src="js/views/attachment_view.js"></script>
   <script type="text/javascript" src="js/views/key_conflict_dialogue_view.js"></script>
   <script type="text/javascript" src="js/views/error_view.js"></script>
+  <script type="text/javascript" src="js/views/timestamp_view.js"></script>
   <script type="text/javascript" src="js/views/message_view.js"></script>
   <script type="text/javascript" src="js/views/key_verification_view.js"></script>
   <script type="text/javascript" src="js/views/message_detail_view.js"></script>

js/views/message_view.js

@@ -17,6 +17,7 @@
             this.listenTo(this.model, 'destroy', this.remove);
             this.listenTo(this.model, 'pending', this.renderPending);
             this.listenTo(this.model, 'done', this.renderDone);
+            this.timeStampView = new Whisper.MessageTimestampView();
         },
         events: {
             'click .timestamp': 'select',
@@ -67,11 +68,13 @@
             this.$el.html(
                 Mustache.render(this.template, {
                     message: this.model.get('body'),
-                    timestamp: moment(this.model.get('sent_at')).fromNow(),
+                    timestamp: this.model.get('sent_at'),
                     sender: (contact && contact.getTitle()) || '',
                     avatar: (contact && contact.getAvatar())
                 }, this.render_partials())
             );
+            this.timeStampView.setElement(this.$('.timestamp'));
+            this.timeStampView.update();
 
             this.renderControl();
 

js/views/timestamp_view.js

@@ -0,0 +1,53 @@
+/*
+ * vim: ts=4:sw=4:expandtab
+ */
+(function () {
+    'use strict';
+    window.Whisper = window.Whisper || {};
+
+    Whisper.MessageTimestampView = Whisper.View.extend({
+        update: function() {
+            clearTimeout(this.timeout);
+            var millis_now = Date.now();
+            var millis = this.$el.data('timestamp');
+            if (millis >= millis_now) {
+                millis = millis_now;
+            }
+            var lastWeek = moment(millis_now).subtract(7, 'days');
+            var time = moment(millis);
+            var result = '';
+            if (time > moment(millis_now).startOf('day')) {
+                // t units ago
+                result = time.fromNow();
+            } else if (time > lastWeek) {
+                // Fri 1:30 PM or Fri 13:30
+                result = time.format('ddd ') + time.format('LT');
+            } else {
+                // Oct 31 1:30 PM or Oct 31
+                result = time.format('MMM D ') + time.format('LT');
+            }
+            this.$el.text(result);
+
+            var delay;
+            var millis_since = millis_now - millis;
+            if (millis_since <= moment.relativeTimeThreshold('s') * 1000) {
+                // a few seconds ago
+                delay = 45 * 1000 - millis_since;
+            } else if (millis_since <= moment.relativeTimeThreshold('m') * 1000 * 60) {
+                // N minutes ago
+                delay = 60 * 1000;
+            } else if (millis_since <= moment.relativeTimeThreshold('h') * 1000 * 60 * 60) {
+                // N hours ago
+                delay = 60 * 60 * 1000;
+            } else if (time > lastWeek) {
+                // Day of week + time
+                delay = 7 * 24 * 60 * 60 * 1000 - millis_since;
+            }
+
+            if (delay) {
+                if (delay < 0) { delay = 0; }
+                this.timeout = setTimeout(this.update.bind(this), delay);
+            }
+        }
+    });
+})();