RCFilters UI: In the highlight code, use .data() the way it was meant to be used

Use .data( 'highlightedFilters' ) instead of .attr( 'data-highlightedFilters' ),
and make the value an array rather than a string that we have to convert
back and forth every time. We have to use .attr() for data-color because it's
used by CSS, but data-highlightedFilters isn't used by anything else.

Using an array makes the code much simpler. Also add the class
mw-rcfilters-highlighted to every highlighted item, so we can find
them back easily and don't have to use $( '[data-highlightedFilters]' )
(attribute selectors are slow, and this wouldn't work with .data() anyway).

Bonus: use the comma-separator message

Change-Id: I04de7f8fb74d60fb23ef47bf50bacfeb176a55b1

diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesListWrapperWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesListWrapperWidget.js
index ea32e36..83e68a5 100644 (file)
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesListWrapperWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesListWrapperWidget.js
@@ -427,30 +427,35 @@
 
                        // Add highlight class to all highlighted list items
                        $elements
-                               .addClass( 'mw-rcfilters-highlight-color-' + filterItem.getHighlightColor() );
+                               .addClass(
+                                       'mw-rcfilters-highlighted ' +
+                                       'mw-rcfilters-highlight-color-' + filterItem.getHighlightColor()
+                               );
 
+                       // Track the filters for each item in .data( 'highlightedFilters' )
                        $elements.each( function () {
-                               var filterString = $( this ).attr( 'data-highlightedFilters' ) || '',
-                                       filters = filterString ? filterString.split( '|' ) : [];
-
+                               var filters = $( this ).data( 'highlightedFilters' );
+                               if ( !filters ) {
+                                       filters = [];
+                                       $( this ).data( 'highlightedFilters', filters );
+                               }
                                if ( filters.indexOf( filterItem.getLabel() ) === -1 ) {
                                        filters.push( filterItem.getLabel() );
                                }
-
-                               $( this )
-                                       .attr( 'data-highlightedFilters', filters.join( '|' ) );
                        } );
                }.bind( this ) );
-               // Apply a title for relevant filters
-               this.$element.find( '[data-highlightedFilters]' ).each( function () {
-                       var filterString = $( this ).attr( 'data-highlightedFilters' ) || '',
-                               filters = filterString ? filterString.split( '|' ) : [];
-
-                       if ( filterString ) {
-                               $( this ).attr( 'title', mw.msg( 'rcfilters-highlighted-filters-list', filters.join( ', ' ) ) );
+               // Apply a title to each highlighted item, with a list of filters
+               this.$element.find( '.mw-rcfilters-highlighted' ).each( function () {
+                       var filters = $( this ).data( 'highlightedFilters' );
+
+                       if ( filters && filters.length ) {
+                               $( this ).attr( 'title', mw.msg(
+                                       'rcfilters-highlighted-filters-list',
+                                       filters.join( mw.msg( 'comma-separator' ) )
+                               ) );
                        }
-               } );
 
+               } );
                if ( this.inEnhancedMode() ) {
                        this.updateEnhancedParentHighlight();
                }
@@ -465,12 +470,15 @@
        mw.rcfilters.ui.ChangesListWrapperWidget.prototype.clearHighlight = function () {
                // Remove highlight classes
                mw.rcfilters.HighlightColors.forEach( function ( color ) {
-                       this.$element.find( '.mw-rcfilters-highlight-color-' + color ).removeClass( 'mw-rcfilters-highlight-color-' + color );
+                       this.$element
+                               .find( '.mw-rcfilters-highlight-color-' + color )
+                               .removeClass( 'mw-rcfilters-highlight-color-' + color );
                }.bind( this ) );
 
-               this.$element.find( '[data-highlightedFilters]' )
+               this.$element.find( '.mw-rcfilters-highlighted' )
                        .removeAttr( 'title' )
-                       .removeAttr( 'data-highlightedFilters' );
+                       .removeData( 'highlightedFilters' )
+                       .removeClass( 'mw-rcfilters-highlighted' );
 
                // Remove grey from enhanced rows
                this.$element.find( '.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey' )