Use notification on successful preferences save

"Now 98.6% leaner!"

* Use Xml::tags() for cleaner (old) successbox generation.
* Use #mw-preferences-success for the old successbox
  to make its removal more specific.
* Use the mw.notify box for saved prefs message.
* Remove box on keydown or mousedown in #preftoc or
  .prefsection.
* Remove success=1 querystring on load to prevent
  unnecessary reappearance of notification on reload.

Bug: T19496
Change-Id: Ibecbe21aa52ddc061d4bb27815f6fa5161a96735

diff --git a/includes/specials/SpecialPreferences.php b/includes/specials/SpecialPreferences.php
index 7371da7..f2a315e 100644 (file)
--- a/includes/specials/SpecialPreferences.php
+++ b/includes/specials/SpecialPreferences.php
@@ -50,7 +50,11 @@ class SpecialPreferences extends SpecialPage {
 
                if ( $this->getRequest()->getCheck( 'success' ) ) {
                        $out->wrapWikiMsg(
-                               "<div class=\"successbox\">\n$1\n</div>",
+                               Xml::tags(
+                                       'div',
+                                       array( 'class' => 'successbox', 'id' => 'mw-preferences-success' ),
+                                       '$1'
+                               ),
                                'savedprefs'
                        );
                }

diff --git a/resources/Resources.php b/resources/Resources.php
index a0c0744..da5bcf1 100644 (file)
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1530,10 +1530,12 @@ return array(
                        'prefs-tabs-navigation-hint',
                        'prefswarning-warning',
                        'saveprefs',
+                       'savedprefs',
                ),
                'dependencies' => array(
                        'mediawiki.language',
                        'mediawiki.confirmCloseWindow',
+                       'mediawiki.notification',
                ),
        ),
        'mediawiki.special.recentchanges' => array(

diff --git a/resources/src/mediawiki.special/mediawiki.special.preferences.css b/resources/src/mediawiki.special/mediawiki.special.preferences.css
index e27e34a..0e71d30 100644 (file)
--- a/resources/src/mediawiki.special/mediawiki.special.preferences.css
+++ b/resources/src/mediawiki.special/mediawiki.special.preferences.css
@@ -19,3 +19,8 @@
        height: 0;
        zoom: 1;
 }
+
+/* When JS is enabled, .successbox is replaced with a mw.notification */
+.successbox {
+       display: none;
+}

diff --git a/resources/src/mediawiki.special/mediawiki.special.preferences.js b/resources/src/mediawiki.special/mediawiki.special.preferences.js
index a385ad3..893db98 100644 (file)
--- a/resources/src/mediawiki.special/mediawiki.special.preferences.js
+++ b/resources/src/mediawiki.special/mediawiki.special.preferences.js
@@ -1,3 +1,4 @@
+
 /*!
  * JavaScript for Special:Preferences
  */
@@ -5,7 +6,8 @@ jQuery( function ( $ ) {
        var $preftoc, $preferences, $fieldsets, $legends,
                hash, labelFunc,
                $tzSelect, $tzTextbox, $localtimeHolder, servertime,
-               $checkBoxes, allowCloseWindow;
+               $checkBoxes, allowCloseWindow,
+               notif;
 
        labelFunc = function () {
                return this.id.replace( /^mw-prefsection/g, 'preftab' );
@@ -84,6 +86,21 @@ jQuery( function ( $ ) {
                }
        }
 
+       // If there is a #mw-preferences-success box and javascript is enabled, use a slick notification instead!
+       if ( $( '#mw-preferences-success' ).length ) {
+               notif = mediaWiki.notification.notify( mediaWiki.message( 'savedprefs' ), { autoHide: false } );
+               $( '#preftoc, .prefsection' ).one( 'change keydown mousedown', function () { // 'change' event not reliable!
+                       if ( notif ) {
+                               notif.close();
+                       }
+               } );
+
+               // Remove now-unnecessary success=1 querystring to prevent reappearance of notification on reload
+               if ( history.replaceState ) {
+                       history.replaceState( {}, document.title, document.URL.replace( /&?success=1/, '' ) );
+               }
+       }
+
        // Populate the prefToc
        $legends.each( function ( i, legend ) {
                var $legend = $( legend ),