Merge branch 'issue_14206' into 'master'

Fix datetimes on tooltips

Closes #14206 

Updates tooltip datetimes on `.timeago()` instances. 

**Inline notes**

![Screen_Shot_2016-04-07_at_1.25.12_PM](/uploads/2f55390a7e91dabf75e71fe3bda91849/Screen_Shot_2016-04-07_at_1.25.12_PM.png)

**Existing and new notes**

![Screen_Shot_2016-04-07_at_1.24.49_PM](/uploads/202bb7476738eb048f2d94abb68174e7/Screen_Shot_2016-04-07_at_1.24.49_PM.png)


**Issuable dates**

![Screen_Shot_2016-04-07_at_1.24.32_PM](/uploads/80fd5cc3c06fade0b1c615bc7b7611a8/Screen_Shot_2016-04-07_at_1.24.32_PM.png)

**Build dates**

![Screen_Shot_2016-04-07_at_1.25.02_PM](/uploads/832f43284005ea610a3ad54a49b97104/Screen_Shot_2016-04-07_at_1.25.02_PM.png)

See merge request !3497

6 files changed, 160 insertions, 7 deletions

diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee
index f01c67e9474..b05138ac1ac 100644
--- a/app/assets/javascripts/application.js.coffee
+++ b/app/assets/javascripts/application.js.coffee
@@ -41,6 +41,7 @@
 #= require shortcuts_issuable
 #= require shortcuts_network
 #= require jquery.nicescroll
+#= require date.format
 #= require_tree .
 #= require fuzzaldrin-plus
 #= require cropper
@@ -163,7 +164,7 @@ $ ->
   $('.trigger-submit').on 'change', ->
     $(@).parents('form').submit()
 
-  $('abbr.timeago, .js-timeago').timeago()
+  gl.utils.localTimeAgo($('abbr.timeago, .js-timeago'), false)
 
   # Flash
   if (flash = $(".flash-container")).length > 0
diff --git a/app/assets/javascripts/lib/datetime_utility.js.coffee b/app/assets/javascripts/lib/datetime_utility.js.coffee
new file mode 100644
index 00000000000..ad1d1c70481
--- /dev/null
+++ b/app/assets/javascripts/lib/datetime_utility.js.coffee
@@ -0,0 +1,17 @@
+((w) ->
+
+  w.gl ?= {}
+  w.gl.utils ?= {}
+
+  w.gl.utils.formatDate = (datetime) ->
+    dateFormat(datetime, 'mmm d, yyyy h:MMtt Z')
+
+  w.gl.utils.localTimeAgo = ($timeagoEls, setTimeago = true) ->
+    $timeagoEls.each( ->
+          $el = $(@)
+          $el.attr('title', gl.utils.formatDate($el.attr('datetime')))
+    )
+
+    $timeagoEls.timeago() if setTimeago
+
+) window
diff --git a/app/assets/javascripts/merge_request_tabs.js.coffee b/app/assets/javascripts/merge_request_tabs.js.coffee
index 9946249adbf..ef0b534a709 100644
--- a/app/assets/javascripts/merge_request_tabs.js.coffee
+++ b/app/assets/javascripts/merge_request_tabs.js.coffee
@@ -142,7 +142,7 @@ class @MergeRequestTabs
       url: "#{source}.json"
       success: (data) =>
         document.querySelector("div#commits").innerHTML = data.html
-        $('.js-timeago').timeago()
+        gl.utils.localTimeAgo($('.js-timeago', 'div#commits'))
         @commitsLoaded = true
         @scrollToElement("#commits")
 
@@ -153,7 +153,7 @@ class @MergeRequestTabs
       url: "#{source}.json" + @_location.search
       success: (data) =>
         document.querySelector("div#diffs").innerHTML = data.html
-        $('.js-timeago').timeago()
+        gl.utils.localTimeAgo($('.js-timeago', 'div#diffs'))
         $('div#diffs .js-syntax-highlight').syntaxHighlight()
         @expandViewContainer() if @diffViewType() is 'parallel'
         @diffsLoaded = true
@@ -166,7 +166,7 @@ class @MergeRequestTabs
       url: "#{source}.json"
       success: (data) =>
         document.querySelector("div#builds").innerHTML = data.html
-        $('.js-timeago').timeago()
+        gl.utils.localTimeAgo($('.js-timeago', 'div#builds'))
         @buildsLoaded = true
         @scrollToElement("#builds")
 
diff --git a/app/assets/javascripts/notes.js.coffee b/app/assets/javascripts/notes.js.coffee
index 86e3b860fcb..a67890200dd 100644
--- a/app/assets/javascripts/notes.js.coffee
+++ b/app/assets/javascripts/notes.js.coffee
@@ -163,9 +163,15 @@ class @Notes
     else if @isNewNote(note)
       @note_ids.push(note.id)
 
-      $('ul.main-notes-list')
+      $notesList = $('ul.main-notes-list')
+
+      $notesList
         .append(note.html)
         .syntaxHighlight()
+
+      # Update datetime format on the recent note
+      gl.utils.localTimeAgo($notesList.find("#note_#{note.id} .js-timeago"), false)
+
       @initTaskList()
       @updateNotesCount(1)
 
@@ -217,6 +223,8 @@ class @Notes
       # append new note to all matching discussions
       discussionContainer.append note_html
 
+    gl.utils.localTimeAgo($('.js-timeago', note_html), false)
+
     @updateNotesCount(1)
 
   ###
@@ -345,7 +353,9 @@ class @Notes
   updateNote: (_xhr, note, _status) =>
     # Convert returned HTML to a jQuery object so we can modify it further
     $html = $(note.html)
-    $('.js-timeago', $html).timeago()
+
+    gl.utils.localTimeAgo($('.js-timeago', $html))
+
     $html.syntaxHighlight()
     $html.find('.js-task-list-container').taskList('enable')
 
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index e6ceb213532..16e5b8ac223 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -184,7 +184,7 @@ module ApplicationHelper
     element = content_tag :time, time.to_s,
       class: "#{html_class} js-timeago #{"js-timeago-pending" unless skip_js}",
       datetime: time.to_time.getutc.iso8601,
-      title: time.in_time_zone.to_s(:medium),
+      title: time.to_time.in_time_zone.to_s(:medium),
       data: { toggle: 'tooltip', placement: placement, container: 'body' }
 
     unless skip_js
diff --git a/vendor/assets/javascripts/date.format.js b/vendor/assets/javascripts/date.format.js
new file mode 100644
index 00000000000..f5dc4abcd80
--- /dev/null
+++ b/vendor/assets/javascripts/date.format.js
@@ -0,0 +1,125 @@
+/*
+ * Date Format 1.2.3
+ * (c) 2007-2009 Steven Levithan <stevenlevithan.com>
+ * MIT license
+ *
+ * Includes enhancements by Scott Trenda <scott.trenda.net>
+ * and Kris Kowal <cixar.com/~kris.kowal/>
+ *
+ * Accepts a date, a mask, or a date and a mask.
+ * Returns a formatted version of the given date.
+ * The date defaults to the current date/time.
+ * The mask defaults to dateFormat.masks.default.
+ */
+
+var dateFormat = function () {
+  var token = /d{1,4}|m{1,4}|yy(?:yy)?|([HhMsTt])\1?|[LloSZ]|"[^"]*"|'[^']*'/g,
+    timezone = /\b(?:[PMCEA][SDP]T|(?:Pacific|Mountain|Central|Eastern|Atlantic) (?:Standard|Daylight|Prevailing) Time|(?:GMT|UTC)(?:[-+]\d{4})?)\b/g,
+    timezoneClip = /[^-+\dA-Z]/g,
+    pad = function (val, len) {
+      val = String(val);
+      len = len || 2;
+      while (val.length < len) val = "0" + val;
+      return val;
+    };
+
+  // Regexes and supporting functions are cached through closure
+  return function (date, mask, utc) {
+    var dF = dateFormat;
+
+    // You can't provide utc if you skip other args (use the "UTC:" mask prefix)
+    if (arguments.length == 1 && Object.prototype.toString.call(date) == "[object String]" && !/\d/.test(date)) {
+      mask = date;
+      date = undefined;
+    }
+
+    // Passing date through Date applies Date.parse, if necessary
+    date = date ? new Date(date) : new Date;
+    if (isNaN(date)) throw SyntaxError("invalid date");
+
+    mask = String(dF.masks[mask] || mask || dF.masks["default"]);
+
+    // Allow setting the utc argument via the mask
+    if (mask.slice(0, 4) == "UTC:") {
+      mask = mask.slice(4);
+      utc = true;
+    }
+
+    var _ = utc ? "getUTC" : "get",
+      d = date[_ + "Date"](),
+      D = date[_ + "Day"](),
+      m = date[_ + "Month"](),
+      y = date[_ + "FullYear"](),
+      H = date[_ + "Hours"](),
+      M = date[_ + "Minutes"](),
+      s = date[_ + "Seconds"](),
+      L = date[_ + "Milliseconds"](),
+      o = utc ? 0 : date.getTimezoneOffset(),
+      flags = {
+        d:    d,
+        dd:   pad(d),
+        ddd:  dF.i18n.dayNames[D],
+        dddd: dF.i18n.dayNames[D + 7],
+        m:    m + 1,
+        mm:   pad(m + 1),
+        mmm:  dF.i18n.monthNames[m],
+        mmmm: dF.i18n.monthNames[m + 12],
+        yy:   String(y).slice(2),
+        yyyy: y,
+        h:    H % 12 || 12,
+        hh:   pad(H % 12 || 12),
+        H:    H,
+        HH:   pad(H),
+        M:    M,
+        MM:   pad(M),
+        s:    s,
+        ss:   pad(s),
+        l:    pad(L, 3),
+        L:    pad(L > 99 ? Math.round(L / 10) : L),
+        t:    H < 12 ? "a"  : "p",
+        tt:   H < 12 ? "am" : "pm",
+        T:    H < 12 ? "A"  : "P",
+        TT:   H < 12 ? "AM" : "PM",
+        Z:    utc ? "UTC" : (String(date).match(timezone) || [""]).pop().replace(timezoneClip, ""),
+        o:    (o > 0 ? "-" : "+") + pad(Math.floor(Math.abs(o) / 60) * 100 + Math.abs(o) % 60, 4),
+        S:    ["th", "st", "nd", "rd"][d % 10 > 3 ? 0 : (d % 100 - d % 10 != 10) * d % 10]
+      };
+
+    return mask.replace(token, function ($0) {
+      return $0 in flags ? flags[$0] : $0.slice(1, $0.length - 1);
+    });
+  };
+}();
+
+// Some common format strings
+dateFormat.masks = {
+  "default":      "ddd mmm dd yyyy HH:MM:ss",
+  shortDate:      "m/d/yy",
+  mediumDate:     "mmm d, yyyy",
+  longDate:       "mmmm d, yyyy",
+  fullDate:       "dddd, mmmm d, yyyy",
+  shortTime:      "h:MM TT",
+  mediumTime:     "h:MM:ss TT",
+  longTime:       "h:MM:ss TT Z",
+  isoDate:        "yyyy-mm-dd",
+  isoTime:        "HH:MM:ss",
+  isoDateTime:    "yyyy-mm-dd'T'HH:MM:ss",
+  isoUtcDateTime: "UTC:yyyy-mm-dd'T'HH:MM:ss'Z'"
+};
+
+// Internationalization strings
+dateFormat.i18n = {
+  dayNames: [
+    "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat",
+    "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"
+  ],
+  monthNames: [
+    "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec",
+    "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"
+  ]
+};
+
+// For convenience...
+Date.prototype.format = function (mask, utc) {
+  return dateFormat(this, mask, utc);
+};