Implement new options page design for Chrome/Opera/Safari

[greiner]

https://issues.adblockplus.org/ticket/1526#no4

Background

As part of the redesign of the options page in #1524 we need to implement the user interface based on the provided designs.

What to change

• Implement the UI based on the provided designs (see below) in the newly created adblockplusui repository #1525.
• Use flexbox instead of float or inline-block to layout elements
• The language blocking lists area should be populated with language-specific installed subscriptions
• The Further blocking lists area should be populated with subscriptions in subscriptions.xml (marked as "popular") and other installed subscriptions with popular items on top and sorted alphabetically
• The Whitelisted websites area should be populated with filters of the form @@||example.com^$document and sorted alphabetically

Designs

• Style Guides:
  • General
  • Dialog
• Tabs:
  • General
    • no whitelisted websites
  • Advanced
    • edit custom filters
    • context menu
  • Help
• Dialogs:
  • Add predefined list
  • Languages
• Icons:
  • download
  • Arrow down

Behavior

• Clicking on a checkbox should remove a blocking list not only from FilterStorage but also from the view unless it is marked as "popular"
• Clicking on a checkbox of a blocking list marked as "popular" should only remove it from FilterStorage and remove the check from the checkbox
• Clicking on an "x" next to a domain should remove the according filter from FilterStorage and from the view
• Clicking on "add other website languages" should open up the according dialog
• Clicking on "add other blocking list" should open up the according dialog
• When the app.listen event is triggered with a type of addSubscription it should open up the according dialog
• Clicking on the version number should open up the according changelog from "​https://adblockplus.org/releases" using "​https://adblockplus.org/redirect"
• Clicking on "Share" should open up the share dialog as it is currently implemented in the first-run page
• Clicking on "Donate" should open "​https://adblockplus.org/<locale>/donate" in a new tab using "​https://adblockplus.org/redirect"
• Hovering over text with a dotted blue underline should show a tooltip containing a description (pending design)

[greiner]

Added link to icons.

[saroyanm]

After having a meeting with Thomas and Sven, some further modification still needed to be done on current front end implementation:

• Change floating elements to inline-block.
• Scrollbar - add FB style border.
• Fix icon background-position.
• Use negative margins for active tab item.
• add 1px transparent border for each non selected tab.
• Get rid of double border between tabs. (think about + selector solution)
• Use font-family in the body selector.
• Share/Donate always should be aligned to bottom, make whole sidebar fixed.

[greiner]

As mentioned in #1668 we also need to consider right-to-left locales when implementing the design.

[sebastian]

Thanks for pointing this out greiner, but note that floating elements might not be an option therefore. For instance when using float: left the element will always float to the left, while it has to float in the opposite direction for right-to-left languages. So you end up using hacks like below, which quickly becomes a mess:

.foo
{
  float: left;
}

html[dir=rtl] .foo
{
  float: right;
}

Using ​flexbox would a better approach, which also has some other advantages. However, Safari 5.1 and 6.0 doesn't support the final flexbox specs. Not providing the options page for users on old Safari versions might be an option though.

Also note that [padding|margin|border]-[left|right] is problematic, since left/right needs to be inverted for right-to-left languages here as well. However, you can simply use -[webkit|moz]-[padding|margin|border]-[start|end] instead, which considers the reading direction.

[trev]

Replying to sebastian:

Not providing the options page for users on old Safari versions might be an option though.

Current stats (percentages of all Safari versions):

• Safari 5.1: 5.0%
• Safari 6.0: 1.5%
• Safari 6.1: 5.7% (for comparison)

While the bulk of users moved on to Safari 7.0 and higher, these legacy versions are still very visible in our stats. As much as I would love to start using flexbox, I'm not sure that the time for it has come.

[sebastian]

Safari 5.1 and 6.0 at least support the ​old flexbox spec. So it would also be an option to implement both specs, which IMO is still a better option than going with floating elements.

But given the numbers above, I'd rather prefer to ignore Safari 5.1 and 6.0, not having an options page there. Or if necessary (in the future) dropping support altogether for Safari 6.0 (we already advice users to don't use Adblock Plus with Safari 5.1).

[saroyanm]

The review link added, It's not complete, but you can see how the implementation looks now.

[philll]

This is a public issue, so it should link to public files or use Trac attachments right away.

[sven]

Added the screenshot for the dialogue which appears when a user wants to add another blocking list.

[sven]

including the dropdown menu

[greiner]

Upon implementing the design we encountered some inconsistencies which were discussed with Manvel and Sven. The provided design was based on the assumption that disabled filter lists are not being updated, only enabled ones. This, however, is not the case.

Therefore we are tending towards the approach that a list element is removed upon unchecking it unless it is part of recommended subscriptions. Additionally, by marking all recommended subscriptions as "popular" we could avoid confusion due to the behavioral differences outlined in the previous sentence.

Sven will reinvestigate that topic to ensure a smooth user experience.

[mapx]

Did you already think about including some backup system (all the settings, lists, custom filters ...) in the new options design ?

see post in forum ​https://adblockplus.org/forum/viewtopic.php?p=119975#p119975

[sven]

Did you already think about including some backup system

Yes, but we are not able to put this in our first release of the new options page.

[saroyanm]

Before @fhd review - General tab

[saroyanm]

Before @fhd review - Advanced tab

[saroyanm]

Before @fhd review - Help tab

[saroyanm]

Before @fhd review - Add another language dialog

[saroyanm]

Before @fhd review - Add subscription dialog

[saroyanm]

@fhd please find below latest screenshots:

• General tab
• Advanced tab
• Help tab
• Add another language dialog
• Add subscription dialog

[saroyanm]

I currently don't remember what was the plan of pushing this changes ?
I can see that changes from #1528 were pushed to ​https://hg.adblockplus.org/adblockplusui
Please note if we are going to keep uploading to that repository without having separate branch we need to consider that the dependencies shouldn't be updated until we finish with the bringing new UI to all platforms, so that mean if we will make changes to adblockplusui that are not related to new options page, then we can't make them appear on platforms that doesn't yet have new options UI.
So the question is whether we should have separate branch or whether I should create a new bitbucket repository for current changes, also make consider whether we need last backend (#1528) changes in the adblockplusui repository or should we also separate them ?
@greiner @fhd ?

[sebastian]

So far only the first run page is imported from the adblockplusui repository. So adding new code (or changing still unused code) there won't have any effect, when the dependency gets updated. So no objections from my side pushing those changes to adblockplusui. But sure before we integrate the new options page anywhere we have to make sure to have feature parity with the old UI.

[saroyanm]

Replying to sebastian:

So far only the first run page is imported from the adblockplusui repository. So adding new code (or changing still unused code) there won't have any effect.

That's a good point.

[saroyanm]

Changeset:
​https://hg.adblockplus.org/adblockplusui/rev/e4c5ee01fc78