Implement custom filters in new options page

[greiner]

Background

We want to have the same custom filter management capabilities that we have in the current version of the options page also in the new one. For that we need to add this feature to the "Blocking lists" section under the "Edit or create own blocking list" tab.

What to change

• Implement list view of custom filters (as seen in the design mockup​)
  • Ensure that filters are always sorted alphabetically
• Implement edit view of custom filters
  • Show <textarea> element instead of the list view and the area for adding custom filters
  • <textarea> element should behave the same as textarea#rawFiltersText does in the current version of the options page
• Clicking on the "add" button or pressing the Enter key on the text input field should add the entered filter
• Clicking on the "edit rules" link should toggle between "list view" and "edit view" and save the filters in "edit view" when clicked on "save filters" button, same time switch to "list view"
• The filters in the list should be kept up-to-date using filters.listen
• Make both list view and edit view horizontally scrollable if filter length exceeds the container element's width
• Include any kind of filter validation that occurs in the current version of the options page

[saroyanm]

I wonder whether the lazy loading implementation is going to be separate, I can't find related ticket, in case it's not yet created I'll create one.

[greiner]

Replying to saroyanm:

I wonder whether the lazy loading implementation is going to be separate, I can't find related ticket, in case it's not yet created I'll create one.

Yes, that one can be tackled separately. There's no ticket for it yet so feel free to create it.

[saroyanm]

Replying to greiner:

Replying to saroyanm:

I wonder whether the lazy loading implementation is going to be separate, I can't find related ticket, in case it's not yet created I'll create one.

Yes, that one can be tackled separately. There's no ticket for it yet so feel free to create it.

Here you go - #2708.

Here is another question. What should trigger saving the data back to custom filters after job in edit view done by user ?
Should it be triggered after click on "list view" button ? Bit confusing, I can suggest to do it so and figure out better solution afterward.

[greiner]

Replying to saroyanm:

Here is another question. What should trigger saving the data back to custom filters after job in edit view done by user ?
Should it be triggered after click on "list view" button ? Bit confusing, I can suggest to do it so and figure out better solution afterward.

Currently, only the "Apply changes" button saves the data while the list view toggle button doesn't make any changes and acts as a way to cancel editing.

But because we don't have an "Apply changes" button I tend to agree with you, that a click on the toggle button should save the data. I modified the ticket description accordingly.

[saroyanm]

Updated description.
While we decided to have 2 buttons, one for switching to "list view" another for "saving" and switching to "list view".

[saroyanm]

Changeset:
​https://hg.adblockplus.org/adblockplusui/rev/8a8119d1d31f

[saroyanm]

Added Review for error noticed after the changes were pushed.
Changeset for review mentioned Above:
​https://hg.adblockplus.org/adblockplusui/rev/482971cb0b03

[greiner]

This ticket is already closed and the changes have already landed. Therefore those change requests cannot be considered anymore as part of this ticket. I added a note to #2377 so that we can tackle them as part of that ticket instead.