Merge "RC filters: update the state of the app on popstate."

diff --combined resources/src/mediawiki.rcfilters/mw.rcfilters.Controller.js
index ec5a7bc,4c3d35f..e562057
--- 1/resources/src/mediawiki.rcfilters/mw.rcfilters.Controller.js
--- 2/resources/src/mediawiki.rcfilters/mw.rcfilters.Controller.js
+++ b/resources/src/mediawiki.rcfilters/mw.rcfilters.Controller.js
@@@ -20,13 -20,20 +20,20 @@@
         * @param {Object} filterStructure Filter definition and structure for the model
         */
        mw.rcfilters.Controller.prototype.initialize = function ( filterStructure ) {
-               var uri = new mw.Uri();
- 
                // Initialize the model
                this.filtersModel.initializeFilters( filterStructure );
+               this.updateStateBasedOnUrl();
+       };
+ 
+       /**
+        * Update filter state (selection and highlighting) based
+        * on current URL and default values.
+        */
+       mw.rcfilters.Controller.prototype.updateStateBasedOnUrl = function () {
+               var uri = new mw.Uri();
  
                // Set filter states based on defaults and URL params
-               this.filtersModel.updateFilters(
+               this.filtersModel.toggleFiltersSelected(
                        this.filtersModel.getFiltersFromParameters(
                                // Merge defaults with URL params for initialization
                                $.extend(
@@@ -43,11 -50,11 +50,11 @@@
                this.filtersModel.toggleHighlight( !!uri.query.highlight );
                this.filtersModel.getItems().forEach( function ( filterItem ) {
                        var color = uri.query[ filterItem.getName() + '_color' ];
-                       if ( !color ) {
-                               return;
+                       if ( color ) {
+                               filterItem.setHighlightColor( color );
+                       } else {
+                               filterItem.clearHighlightColor();
                        }
- 
-                       filterItem.setHighlightColor( color );
                } );
  
                // Check all filter interactions
@@@ -59,7 -66,6 +66,7 @@@
         */
        mw.rcfilters.Controller.prototype.resetToDefaults = function () {
                this.filtersModel.setFiltersToDefaults();
 +              this.filtersModel.clearAllHighlightColors();
                // Check all filter interactions
                this.filtersModel.reassessFilterInteractions();
  
@@@ -85,19 -91,17 +92,17 @@@
         * @param {boolean} [isSelected] Filter selected state
         */
        mw.rcfilters.Controller.prototype.toggleFilterSelect = function ( filterName, isSelected ) {
-               var obj = {},
-                       filterItem = this.filtersModel.getItemByName( filterName );
+               var filterItem = this.filtersModel.getItemByName( filterName );
  
                isSelected = isSelected === undefined ? !filterItem.isSelected() : isSelected;
  
                if ( filterItem.isSelected() !== isSelected ) {
-                       obj[ filterName ] = isSelected;
-                       this.filtersModel.updateFilters( obj );
+                       this.filtersModel.toggleFilterSelected( filterName, isSelected );
  
                        this.updateChangesList();
  
                        // Check filter interactions
-                       this.filtersModel.reassessFilterInteractions( this.filtersModel.getItemByName( filterName ) );
+                       this.filtersModel.reassessFilterInteractions( filterItem );
                }
        };
  
@@@ -113,14 -117,22 +118,22 @@@
         * @param {Object} [params] Extra parameters to add to the API call
         */
        mw.rcfilters.Controller.prototype.updateURL = function ( params ) {
-               var uri;
+               var updatedUri,
+                       notEquivalent = function ( obj1, obj2 ) {
+                               var keys = Object.keys( obj1 ).concat( Object.keys( obj2 ) );
+                               return keys.some( function ( key ) {
+                                       return obj1[ key ] != obj2[ key ]; // eslint-disable-line eqeqeq
+                               } );
+                       };
  
                params = params || {};
  
-               uri = this.getUpdatedUri();
-               uri.extend( params );
+               updatedUri = this.getUpdatedUri();
+               updatedUri.extend( params );
  
-               window.history.pushState( { tag: 'rcfilters' }, document.title, uri.toString() );
+               if ( notEquivalent( updatedUri.query, new mw.Uri().query ) ) {
+                       window.history.pushState( { tag: 'rcfilters' }, document.title, updatedUri.toString() );
+               }
        };
  
        /**
@@@ -248,4 -260,32 +261,32 @@@
                this.filtersModel.clearHighlightColor( filterName );
                this.updateURL();
        };
+ 
+       /**
+        * Clear both highlight and selection of a filter
+        *
+        * @param {string} filterName Name of the filter item
+        */
+       mw.rcfilters.Controller.prototype.clearFilter = function ( filterName ) {
+               var filterItem = this.filtersModel.getItemByName( filterName );
+ 
+               if ( filterItem.isSelected() || filterItem.isHighlighted() ) {
+                       this.filtersModel.clearHighlightColor( filterName );
+                       this.filtersModel.toggleFilterSelected( filterName, false );
+                       this.updateChangesList();
+                       this.filtersModel.reassessFilterInteractions( filterItem );
+               }
+       };
+ 
+       /**
+        * Synchronize the URL with the current state of the filters
+        * without adding an history entry.
+        */
+       mw.rcfilters.Controller.prototype.replaceUrl = function () {
+               window.history.replaceState(
+                       { tag: 'rcfilters' },
+                       document.title,
+                       this.getUpdatedUri().toString()
+               );
+       };
  }( mediaWiki, jQuery ) );

diff --combined resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.CapsuleItemWidget.js
index a1cee21,e7e3751..f28523a
--- 1/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.CapsuleItemWidget.js
--- 2/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.CapsuleItemWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.CapsuleItemWidget.js
@@@ -38,7 -38,6 +38,7 @@@
                        popup: {
                                padded: false,
                                align: 'center',
 +                              position: 'above',
                                $content: $popupContent
                                        .append( descLabelWidget.$element ),
                                $floatableContainer: this.$element,
@@@ -112,8 -111,7 +112,7 @@@
                }
  
                // Respond to user removing the filter
-               this.controller.toggleFilterSelect( this.model.getName(), false );
-               this.controller.clearHighlightColor( this.model.getName() );
+               this.controller.clearFilter( this.model.getName() );
        };
  
        mw.rcfilters.ui.CapsuleItemWidget.prototype.setHighlightColor = function () {
@@@ -150,8 -148,8 +149,8 @@@
        mw.rcfilters.ui.CapsuleItemWidget.prototype.onMouseEnter = function () {
                if ( this.model.getDescription() ) {
                        if ( !this.positioned ) {
 -                              // Recalculate position to be center of the capsule item
 -                              this.popup.$element.css( 'margin-left', ( this.$element.width() / 2 ) );
 +                              // Recalculate anchor position to be center of the capsule item
 +                              this.popup.$anchor.css( 'margin-left', ( this.$element.width() / 2 ) );
                                this.positioned = true;
                        }