Include Distraction Control in the ABP Options page

Background

See more info in parent epic https://gitlab.com/groups/adblockinc/ext/adblockplus/-/epics/5.

What to do

Include Distraction Control as a premium feature on the Settings page, as well as on the premium upsell landing page on adblockplus.org.

Basic requirements

• The feature should be included prominently on the General tab in the Options page;
• The Acceptable Ads section should be clearly visible and easy-to-access by users who want to toggle AA on/off;
• It should be clear to the user what the benefits are: blocking site notifications, floating videos, newsletter pop-ups and the ability to ignore survey requests;
• The user should be able to toggle the distraction control feature on/off instead of each module individually, like it currently is for AdBlock
  • this is in preparation for MV3, where there's a limit of 10 active filter lists at one time and AdBlock's DC has 4 separate filter lists;
• Ideally, the feature should have a different name other than Distraction Control which belongs in AdBlock;

Relevant links

• Premium Options page in Figma: https://www.figma.com/file/mU4E9k2cSoKgUBEeke51yU/ABP-Premium?node-id=1469%3A6744
• Specs: https://gitlab.com/adblockinc/ext/adblockplus/spec/-/merge_requests/394
• Development:
  • In order to make room for the Premium features section, some design adjustments had to be made to the General tab - namely instead of 2 columns, the other sections are full width; demos have been updated in the specs;

Hints for testers

• In order to change the premium state in the extension, we can make use of a simple license server mock. See instructions in that repo on how to make use of it.
• The premium distraction list shouldn't appear for free users in the "built-in filter lists" dropdown menu at the advanced tab page, and it should be visible for premium users.
• If a premium user installs the distraction list and then their subscription expires, become free user, the distraction list should be automatically removed.

Hints for translators

• The Free features label should be kept short during translation, same with the Upgrade button label - this is to avoid going on 2 lines;

  • In case this is not possible for all languages, here's some alternative suggestions for Free features which could prove problematic: Free plugins, Included;
  • The Upgrade button label isn't highly problematic; for example Mise à niveau should still fit but it's cutting it close;

• New strings added:

  • "options_beta_label"
  • "options_free_filters_header"
  • "options_recommended_distractions_description"
  • "options_recommended_social_description"
  • "common_feature_distractions_title"

• Strings whose ID was renamed but its content and translations are meant to remain the same:

  • "options_recommended_privacy_tooltip" renamed by "options_recommended_privacy_description"
  • "options_recommended_notifications_tooltip" renamed by "options_recommended_notifications_description"

• Strings removed:

  • "options_recommended_filters_header"
  • "options_recommended_cookies_tooltip"
  • "options_recommended_social_tooltip"
  • "common_feature_cookies_title"