Skip to content
GitLab
Closed
Issue created by Erez HS@erezson

Block Element - New UI/UX

Background / User story

As ABP user I would like to easily use the block element feature so I can improve my web experience.

What to change

The current feature is being split in two parts: Part 1, mostly cosmetic, and Part 2, implementing the Preview feature.

Hints for testers: Part 1

After clicking "Block element" and selecting an element to block, the new 600x300 popup should appear and show one or more filters, with the Block button focused, which should apply filters right-away on Enter key.

There should be a counter reflecting the amount of filters, and clicking Unset should also allow the user to select something else, and see the new filters.

The Cancel button should simply remove the popup and keep the page as is, while pressing Block should apply the filter, unless there are errors in the textarea.

In latter case, a modal/dialog is shown with errors in the area.

Errors can be invalid filters such as #$#foo and/or #$#bar (to test multi-line errors).

Hints for testers: Part 2

https://gitlab.com/eyeo/adblockplus/abpui/adblockplusui/-/issues/761

There should be a Preview changes button before the Block one, and it should reflect changes on the page.

After that, the button should show Undo Preview and elements on the page should re-appear.

Hints for translators

All buttons should be translated, keeping the capitalization where appropriate.

Integration notes: Part 1

This MR should land as well in order to be testable.

Integration notes: Part 2

All changes related to the composer (MR not available yet) should land as well in order to be testable.

Edited by Ursa Kacar