Add a short abbreviation for timestamps in notifications

Use 'm' instead of 'minutes', 's' instead of 'seconds', etc, for
shorter timestamp rendering in the notification list.

Bug: T125970
Change-Id: I9479c5406a4bf44ef560bef2c8f204a9f60cafc6

Resources.php

@@ -99,6 +99,12 @@ $wgResourceModules += array(
 			"notification-link-text-expand-alert-count",
 			"notification-link-text-expand-message-count",
 			"notification-link-text-expand-all-count",
+			"notification-timestamp-ago-seconds",
+			"notification-timestamp-ago-minutes",
+			"notification-timestamp-ago-hours",
+			"notification-timestamp-ago-days",
+			"notification-timestamp-ago-months",
+			"notification-timestamp-ago-years",
 			'echo-notification-markasread',
 			'echo-notification-alert-text-only',
 			'echo-notification-message-text-only',

i18n/en.json

@@ -127,6 +127,12 @@
 	"notification-mention-nosection-email-batch-body": "$1 {{GENDER:$1|mentioned}} you on the $2 talk page.",
 	"notification-user-rights-email-subject": "Your user rights have changed on {{SITENAME}}",
 	"notification-user-rights-email-batch-body": "Your user rights were {{GENDER:$1|changed}} by $1. $2.",
+	"notification-timestamp-ago-seconds": "{{PLURAL:$1|$1s}}",
+	"notification-timestamp-ago-minutes": "{{PLURAL:$1|$1m}}",
+	"notification-timestamp-ago-hours": "{{PLURAL:$1|$1h}}",
+	"notification-timestamp-ago-days": "{{PLURAL:$1|$1d}}",
+	"notification-timestamp-ago-months": "{{PLURAL:$1|$1mo}}",
+	"notification-timestamp-ago-years": "{{PLURAL:$1|$1yr}}",
 	"echo-notification-count": "$1+",
 	"echo-email-subject-default": "New notification at {{SITENAME}}",
 	"echo-email-body-default": "You have a new notification at {{SITENAME}}:\n\n$1",

i18n/qqq.json

@@ -148,6 +148,12 @@
 	"notification-mention-nosection-email-batch-body": "E-mail notification batch body.  Parameters:\n* $1 - a username, plaintext.  Can be used for gender support\n* $2 - the title text without namespace (a page title in any namespace)\n* $3 - name of the user viewing the notification, can be used for GENDER\n\nSee also:\n* {{msg-mw|Notification-mention-nosection}}\n* {{msg-mw|Notification-mention-nosection-flyout}}\n* {{msg-mw|Notification-mention-email-subject}}",
 	"notification-user-rights-email-subject": "E-mail subject for user rights notification\n\nSee also:\n* {{msg-mw|Notification-user-rights}}\n* {{msg-mw|Notification-user-rights-email-batch-body}}",
 	"notification-user-rights-email-batch-body": "Email notification batch body. Parameters:\n* $1 - a user name, plaintext. Can be used for gender support.\n* $2 - a semicolon separated list of {{msg-mw|notification-user-rights-add}}, {{msg-mw|notification-user-rights-remove}}",
+	"notification-timestamp-ago-seconds": "Label for the amount of time since a notification has arrived in the case where it is under a minute. This should be a very short string. $1 - Number of seconds",
+	"notification-timestamp-ago-minutes": "Label for the amount of time since a notification has arrived in the case where it is in order of minutes. This should be a very short string. $1 - Number of minutes",
+	"notification-timestamp-ago-hours": "Label for the amount of time since a notification has arrived in the case where it is in order of hours. This should be a very short string. $1 - Number of hours",
+	"notification-timestamp-ago-days": "Label for the amount of time since a notification has arrived in the case where it is in order of days. This should be a very short string. $1 - Number of days",
+	"notification-timestamp-ago-months": "Label for the amount of time since a notification has arrived in the case where it is in order of months. This should be a very short string. $1 - Number of months",
+	"notification-timestamp-ago-years": "Label for the amount of time since a notification has arrived in the case where it is in order of years. This should be a very short string. $1 - Number of years",
 	"echo-notification-count": "{{optional}}\nThe new notification count next to notification link, for example: 99+\n\nParameters:\n* $1 - the count",
 	"echo-email-subject-default": "Default subject for Echo e-mail notifications",
 	"echo-email-body-default": "Default message content for Echo email notifications. Parameters:\n* $1 - a plain text description of the notification",

modules/ext.echo.init.js

@@ -1,4 +1,5 @@
 ( function ( mw, $ ) {
+	/*global moment:false */
 	'use strict';
 
 	mw.echo = mw.echo || {};
@@ -53,7 +54,29 @@
 
 			// Load the ui
 			mw.loader.using( 'ext.echo.ui', function () {
-				var messageNotificationsModel, alertNotificationsModel;
+				var messageNotificationsModel, alertNotificationsModel,
+					momentOrigLocale = moment.locale();
+
+				// Set up new 'short relative time' locale strings for momentjs
+				moment.defineLocale( 'echo-shortRelativeTime', {
+					relativeTime: function ( number, withoutSuffix, key ) {
+						var keymap = {
+							s: 'seconds',
+							m: 'minutes',
+							mm: 'minutes',
+							h: 'hours',
+							hh: 'hours',
+							d: 'days',
+							dd: 'days',
+							M: 'months',
+							MM: 'months',
+							y: 'years',
+							yy: 'years'
+						};
+						return mw.msg( 'notification-timestamp-ago-' + keymap[ key ], number );
+					} } );
+				// Reset back to original locale
+				moment.locale( momentOrigLocale );
 
 				// Overlay
 				$( 'body' ).append( mw.echo.ui.$overlay );

modules/ooui/mw.echo.ui.NotificationItemWidget.js

@@ -14,7 +14,7 @@
 	 * @cfg {boolean} [bundle=false] This notification item is part of a bundle.
 	 */
 	mw.echo.ui.NotificationItemWidget = function MwEchoUiNotificationItemWidget( model, config ) {
-		var i, secondaryUrls, urlObj, linkButton, $icon, isInsideMenu,
+		var i, secondaryUrls, urlObj, linkButton, $icon, isInsideMenu, echoMoment,
 			$message = $( '<div>' ).addClass( 'mw-echo-ui-notificationItemWidget-content-message' ),
 			widget = this;
 
@@ -76,9 +76,15 @@
 		} );
 
 		// Timestamp
+		// We want to use extra-short timestamp strings; we change the locale
+		// to our echo-defined one and use that instead of the normal moment locale
+		echoMoment = moment.utc( this.model.getTimestamp(), 'YYYYMMDDHHmmss' );
+		echoMoment.locale( 'echo-shortRelativeTime' );
+
 		this.timestampWidget = new OO.ui.LabelWidget( {
 			classes: [ 'mw-echo-ui-notificationItemWidget-content-actions-timestamp' ],
-			label: moment.utc( this.model.getTimestamp(), 'YYYYMMDDHHmmss' ).fromNow()
+			// Get the time 'fromNow' without the suffix 'ago'
+			label: echoMoment.fromNow( true )
 		} );
 
 		// Build the actions line