jenkins-bot has submitted this change and it was merged.

Change subject: Switch to using our own badge instead of jQuery.badge
......................................................................


Switch to using our own badge instead of jQuery.badge

With this change we will no longer be relying on JS for the badge
functionality. This will prevent the flash of unstyled content,
and allow wikis to locally override the styling (since the unread
class is now applied immediately).

I also went ahead and made the badge styling more closely match the
talk page message alert styling per Vibha.

Also removed the old full link optional behavior since we weren't
using it, and it would have been a pain to maintain.

Bug: 48165
Bug: 48001
Change-Id: Ie85d66afd5181d487d0bb2776ae14b121ea50d88
---
M Echo.i18n.php
M Echo.php
M Hooks.php
M controller/NotificationController.php
A modules/badge/ext.echo.badge.css
A modules/badge/ext.echo.badge.modern.css
M modules/overlay/ext.echo.overlay.css
M modules/overlay/ext.echo.overlay.js
8 files changed, 62 insertions(+), 66 deletions(-)

Approvals:
  Bsitu: Looks good to me, approved
  jenkins-bot: Verified



diff --git a/Echo.i18n.php b/Echo.i18n.php
index daf22a7..ed8163b 100644
--- a/Echo.i18n.php
+++ b/Echo.i18n.php
@@ -145,8 +145,6 @@
 
 $1',
        // Notifications overlay
-       'echo-link-new' => '$1 new {{PLURAL:$1|notification|notifications}}',
-       'echo-link' => 'Notifications',
        'echo-overlay-link' => 'All notifications',
        'echo-overlay-title' => '<b>Notifications</b>',
        'echo-overlay-title-overflow' => '<b>Notifications</b> (showing $1 of 
$2 unread)',
@@ -485,10 +483,6 @@
        'echo-email-footer-default' => 'Default footer content for Echo e-mail 
notifications.  Parameters:
 * $1 is the address of the organization that sent the e-mail
 * $2 is "-------..." ({{msg-mw|echo-email-batch-separator}})',
-       'echo-link-new' => 'Shown in "personal links" when a user has unread 
notifications.
-* $1 is number of unread notifications',
-       'echo-link' => 'Shown in "personal links" when a user has JS. New 
notifications are indicated with a badge.
-{{Identical|Notification}}',
        'echo-overlay-link' => 'Link to "all notifications" at the bottom of 
the overlay.
 {{Identical|All notifications}}',
        'echo-overlay-title' => 'Title at the top of the notifications overlay. 
Should include bold tags.',
diff --git a/Echo.php b/Echo.php
index 2b2d0d2..824ebc8 100644
--- a/Echo.php
+++ b/Echo.php
@@ -133,12 +133,10 @@
                        'ext.echo.base',
                        'mediawiki.api',
                        'mediawiki.jqueryMsg',
-                       'jquery.badge',
                        'mediawiki.ui',
+                       'mediawiki.util',
                ),
                'messages' => array(
-                       'echo-link-new',
-                       'echo-link',
                        'echo-overlay-title',
                        'echo-overlay-title-overflow',
                        'echo-overlay-link',
@@ -172,6 +170,12 @@
                'messages' => array(
                        'echo-new-messages',
                        'colon-separator',
+               ),
+       ),
+       'ext.echo.badge' => $echoResourceTemplate + array(
+               'styles' => 'badge/ext.echo.badge.css',
+               'skinStyles' => array(
+                       'modern' => 'badge/ext.echo.badge.modern.css',
                ),
        ),
 );
@@ -214,10 +218,6 @@
 
 // Whether to turn on email batch function
 $wgEchoEnableEmailBatch = true;
-
-// Show a 'Notifications' link with badge in the user toolbar at the top of 
the page.
-// Otherwise, only show a badge next to the username.
-$wgEchoShowFullNotificationsLink = false;
 
 // URL for more information about the Echo notification system
 $wgEchoHelpPage = 
'//www.mediawiki.org/wiki/Special:MyLanguage/Help:Extension:Echo';
diff --git a/Hooks.php b/Hooks.php
index 2aa3d04..a8e6ff2 100644
--- a/Hooks.php
+++ b/Hooks.php
@@ -599,6 +599,9 @@
                        global $wgEchoFeedbackPage;
                        // Load the module for the Notifications flyout
                        $out->addModules( array( 'ext.echo.overlay' ) );
+                       // Load the styles for the Notifications badge
+                       $out->addModuleStyles( 'ext.echo.badge' );
+                       // Pass needed global vars to the client
                        $out->addJsConfigVars( array( 'wgEchoFeedbackPage' => 
$wgEchoFeedbackPage ) );
                }
                if ( $wgEchoNewMsgAlert && $user->isLoggedIn() && 
$user->getOption( 'echo-show-alert' ) ) {
@@ -616,35 +619,29 @@
         * @return bool true in all cases
         */
        static function onPersonalUrls( &$personal_urls, &$title ) {
-               global $wgUser, $wgEchoShowFullNotificationsLink;
+               global $wgUser;
                // Add a "My notifications" item to personal URLs
                if ( $wgUser->isAnon() || !$wgUser->getOption( 
'echo-notify-show-link' ) ) {
                        return true;
                }
 
                $notificationCount = 
EchoNotificationController::getNotificationCount( $wgUser );
-               if ( $wgEchoShowFullNotificationsLink ) {
-                       // Add a "Notifications" item to personal URLs
-                       $msg = wfMessage( $notificationCount == 0 ? 'echo-link' 
: 'echo-link-new' );
-                       $text = $msg->params( 
EchoNotificationController::formatNotificationCount( $notificationCount ) 
)->text();
-               } else {
-                       // Just add a number
-                       $text = wfMessage( 'parentheses', 
EchoNotificationController::formatNotificationCount( $notificationCount ) 
)->plain();
-               }
+               $text = EchoNotificationController::formatNotificationCount( 
$notificationCount );
                $url = SpecialPage::getTitleFor( 'Notifications' 
)->getLocalURL();
-
+               if ( $notificationCount == 0 ) {
+                       $linkClasses = array( 'mw-echo-notifications-badge' );
+               } else {
+                       $linkClasses = array( 'mw-echo-unread-notifications', 
'mw-echo-notifications-badge' );
+               }
                $notificationsLink = array(
                        'href' => $url,
                        'text' => $text,
                        'active' => ( $url == $title->getLocalUrl() ),
+                       'class' => $linkClasses,
                );
 
                $insertUrls = array( 'notifications' => $notificationsLink );
-               if ( $wgEchoShowFullNotificationsLink ) {
-                       $personal_urls = wfArrayInsertAfter( $personal_urls, 
$insertUrls, 'mytalk' );
-               } else {
-                       $personal_urls = wfArrayInsertAfter( $personal_urls, 
$insertUrls, 'userpage' );
-               }
+               $personal_urls = wfArrayInsertAfter( $personal_urls, 
$insertUrls, 'userpage' );
                return true;
        }
 
@@ -672,7 +669,7 @@
         * @return bool true in all cases
         */
        public static function makeGlobalVariablesScript( &$vars, OutputPage 
$outputPage ) {
-               global $wgEchoShowFullNotificationsLink, $wgEchoHelpPage, 
$wgEchoMaxNotificationCount;
+               global $wgEchoHelpPage, $wgEchoMaxNotificationCount;
                $user = $outputPage->getUser();
 
                // Provide info for the Overlay
@@ -680,8 +677,6 @@
                $timestamp = new MWTimestamp( wfTimestampNow() );
                if ( ! $user->isAnon() ) {
                        $vars['wgEchoOverlayConfiguration'] = array(
-                               'notifications-link-full' => 
$wgEchoShowFullNotificationsLink,
-                               'timestamp' => $timestamp->getTimestamp( 
TS_UNIX ),
                                'notification-count' => 
EchoNotificationController::getFormattedNotificationCount( $user ),
                                'max-notification-count' => 
$wgEchoMaxNotificationCount,
                        );
diff --git a/controller/NotificationController.php 
b/controller/NotificationController.php
index 0aff80a..82a842e 100644
--- a/controller/NotificationController.php
+++ b/controller/NotificationController.php
@@ -20,14 +20,14 @@
                $memcKey = wfMemcKey( 'echo-notification-count', 
$user->getId(), $wgEchoConfig['version'] );
 
                if ( $cached && $wgMemc->get( $memcKey ) !== false ) {
-                       return $wgMemc->get( $memcKey );
+                       return intval( $wgMemc->get( $memcKey ) );
                }
 
                $count = $wgEchoBackend->getNotificationCount( $user, $dbSource 
);
 
                $wgMemc->set( $memcKey, $count, 86400 );
 
-               return $count;
+               return intval( $count );
        }
 
        /**
diff --git a/modules/badge/ext.echo.badge.css b/modules/badge/ext.echo.badge.css
new file mode 100644
index 0000000..90a31dc
--- /dev/null
+++ b/modules/badge/ext.echo.badge.css
@@ -0,0 +1,22 @@
+/* We have to include the #pt-notifications selector due to monobook */
+#pt-notifications .mw-echo-notifications-badge {
+       min-width: 7px;
+       border-radius: 2px;
+       padding: 0.3em 0.5em 0.25em 0.5em;
+       margin-left: -4px;
+       text-align: center;
+       background-color: #d2d2d2;
+       font-weight: bold;
+       color: white;
+       text-shadow: 0 1px rgba(0, 0, 0, 0.4);
+       cursor: pointer;
+}
+#pt-notifications .mw-echo-notifications-badge:hover {
+       background-color: #c2c2c2;
+}
+#pt-notifications .mw-echo-notifications-badge.mw-echo-unread-notifications {
+       background-color: #cc0000;
+}
+#pt-notifications 
.mw-echo-notifications-badge.mw-echo-unread-notifications:hover {
+       background-color: #bf0000;
+}
diff --git a/modules/badge/ext.echo.badge.modern.css 
b/modules/badge/ext.echo.badge.modern.css
new file mode 100644
index 0000000..6bf18c9
--- /dev/null
+++ b/modules/badge/ext.echo.badge.modern.css
@@ -0,0 +1,4 @@
+/* No rounded corners for modern skin */
+#pt-notifications  .mw-echo-notifications-badge {
+       border-radius: 0;
+}
diff --git a/modules/overlay/ext.echo.overlay.css 
b/modules/overlay/ext.echo.overlay.css
index 5974f5c..233ee98 100644
--- a/modules/overlay/ext.echo.overlay.css
+++ b/modules/overlay/ext.echo.overlay.css
@@ -22,7 +22,7 @@
        position: absolute;
        z-index: 101;
        top: 21px;
-       left: -9px;
+       left: -5px;
 }
 
 #p-personal .mw-echo-overlay {
@@ -134,14 +134,6 @@
 
 #pt-notifications {
        position: relative;
-}
-
-#pt-notifications .mw-badge {
-       margin-left: 3px;
-}
-
-#pt-notifications a.mw-echo-short-link .mw-badge {
-       margin-left: -5px;
 }
 
 .mw-echo-overlay-none {
diff --git a/modules/overlay/ext.echo.overlay.js 
b/modules/overlay/ext.echo.overlay.js
index 531a9d2..f823d3b 100644
--- a/modules/overlay/ext.echo.overlay.js
+++ b/modules/overlay/ext.echo.overlay.js
@@ -5,24 +5,15 @@
        mw.echo.overlay = {
 
                'updateCount' : function( newCount ) {
-                       // Accomodate '10' or '100+'. Numbers need to be
-                       // passed as numbers for correct behavior of '0'.
-                       if ( !isNaN( newCount ) ) {
-                               newCount = Number( newCount );
-                       }
-
-                       if ( 
mw.echo.overlay.configuration['notifications-link-full'] ) {
-                               $( '#pt-notifications > a' )
-                                       .text( mw.msg( 'echo-link' ) )
-                                       .badge( newCount, true, true );
+                       var $badge = $( '.mw-echo-notifications-badge' );
+                       $badge.text( newCount );
+                       // newCount could be '99+' or another string.
+                       // Checking for number as well just to be paranoid.
+                       if ( newCount !== '0' && newCount !== 0 ) {
+                               $badge.addClass( 'mw-echo-unread-notifications' 
);
                        } else {
-                               $( '#pt-notifications > a' )
-                                       .addClass( 'mw-echo-short-link' )
-                                       .text( '' )
-                                       .badge( newCount, true, true );
+                               $badge.removeClass( 
'mw-echo-unread-notifications' );
                        }
-
-                       mw.echo.overlay.notificationCount = newCount;
                },
 
                'configuration' : mw.config.get( 'wgEchoOverlayConfiguration' ),
@@ -30,7 +21,6 @@
                'buildOverlay' : function( callback ) {
                        var notificationLimit,
                                $overlay = $( '<div></div>' ).addClass( 
'mw-echo-overlay' ),
-                               $link = $( '#pt-notifications a' ),
                                $prefLink = $( '#pt-preferences a' ),
                                count = 0,
                                Api = new mw.Api();
@@ -62,6 +52,9 @@
                                                $overlayFooter,
                                                $markReadButton;
 
+                                       if ( unreadTotalCount !== undefined ) {
+                                               mw.echo.overlay.updateCount( 
unreadTotalCount );
+                                       }
                                        $ul.css( 'max-height', 
notificationLimit * 95 + 'px' );
                                        $.each( notifications.index, function( 
index, id ) {
                                                var data = 
notifications.list[id],
@@ -166,9 +159,9 @@
 
                                        // add link to notifications archive
                                        $overlayFooter.append(
-                                               $link
-                                                       .clone()
+                                               $( '<a>' )
                                                        .attr( 'id', 
'mw-echo-overlay-link' )
+                                                       .attr( 'href', 
mw.util.wikiGetlink( 'Special:Notifications' ) )
                                                        .text( mw.msg( 
'echo-overlay-link' ) )
                                        );
 
@@ -202,17 +195,13 @@
                                        }
                                },
                                'err' : function() {
-                                       window.location.href = $link.attr( 
'href' );
+                                       window.location.href = $( 
'#pt-notifications a' ).attr( 'href' );
                                }
                        } );
                }
        };
 
-       mw.echo.overlay.notificationCount = 
mw.echo.overlay.configuration['notification-count'];
-
        $( function() {
-               mw.echo.overlay.updateCount( mw.echo.overlay.notificationCount 
);
-
                var $link = $( '#pt-notifications a' );
                if ( ! $link.length ) {
                        return;

-- 
To view, visit https://gerrit.wikimedia.org/r/63993
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: merged
Gerrit-Change-Id: Ie85d66afd5181d487d0bb2776ae14b121ea50d88
Gerrit-PatchSet: 9
Gerrit-Project: mediawiki/extensions/Echo
Gerrit-Branch: master
Gerrit-Owner: Kaldari <[email protected]>
Gerrit-Reviewer: Alex Monk <[email protected]>
Gerrit-Reviewer: Bsitu <[email protected]>
Gerrit-Reviewer: EBernhardson (WMF) <[email protected]>
Gerrit-Reviewer: Kaldari <[email protected]>
Gerrit-Reviewer: Krinkle <[email protected]>
Gerrit-Reviewer: Lwelling <[email protected]>
Gerrit-Reviewer: Mattflaschen <[email protected]>
Gerrit-Reviewer: Matthias Mullie <[email protected]>
Gerrit-Reviewer: Siebrand <[email protected]>
Gerrit-Reviewer: jenkins-bot

_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits

Reply via email to