UI doesn't react to filter state changes

Environment

• OS version: Ubuntu 20.04
• Browser version: Chrome 86
• Extension version: Adblock Plus adblockpluschrome@master
• Last working version: N/A (hasn't been working since we introduced the custom filter table in 3.6)

Steps to reproduce

1. Open desktop settings page in a new tab (A) and add a custom filter.
2. Open desktop settings page in another tab (B).
3. Disable filter in tab (A).
4. Reload tab (B).

Observed behavior

• After step 3)
  • Filter disabled in tab (A).
  • Filter enabled in tab (B).
• After step 4)
  • Filter disabled in tab (A).
  • Filter disabled in tab (B).

Expected behavior

• After step 3)
  • Filter disabled in tab (A).
  • Filter disabled in tab (B).
• After step 4)
  • Filter disabled in tab (A).
  • Filter disabled in tab (B).

Further information

This regression was introduced in https://gitlab.com/eyeo/adblockplus/adblockpluscore/-/issues/167 and was integrated into the extension in eyeo/adblockplus/adblockpluschrome#203 (closed) and eyeo/adblockplus/adblockpluschrome#267 (closed). Starting with that change, the "filter.disabled" event is no longer being emitted by filterNotifier, which the UI has been using to listen to filter state changes.

However, it has also been implemented incorrectly in #15 (closed) because the filters from the "filters.listen" message of io-filter-list.js are being overwritten with the filters from the "filters.listen" message of desktop-options.js.

Therefore we need to fix both problems in order to resolve this issue.

Note that the filter disable toggle in the desktop settings page updates correctly, when being clicked on, because it doesn't wait for the extension to notify it of the filter change, in order to be more responsive to the user's click.