Opened 4 years ago

Closed 4 years ago

#1526 closed change (fixed)

Implement new options page design for Chrome/Opera/Safari

Reported by: greiner Assignee: saroyanm
Priority: P2 Milestone:
Module: User-Interface Keywords:
Cc: sven, saroyanm, mapx, sebastian, trev, fhd Blocked By: #1448, #1525, #2026
Blocking: #1524 Platform: Unknown
Ready: yes Confidential: no
Tester: Verified working: no
Review URL(s):

http://codereview.adblockplus.org/6088024630755328/

Description (last modified by 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

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)

Attachments (17)

advanced_1_77.png (1.7 MB) - added by sven 4 years ago.
advanced_2_77.png (1.7 MB) - added by sven 4 years ago.
general_77.png (1.7 MB) - added by sven 4 years ago.
general_addOtherLanguage_73.png (1.7 MB) - added by sven 4 years ago.
options page_styleguide_overlay_fonts_colors_distances_84.png (1.2 MB) - added by sven 4 years ago.
options_page_activate_blockinglist_dialogue_86.png (269.0 KB) - added by sven 4 years ago.
options_page_help_80.png (1.7 MB) - added by sven 4 years ago.
options_page_styleguide_fonts_colors_distances_84.png (1.2 MB) - added by sven 4 years ago.
arrowdown_1.png (18.0 KB) - added by sven 4 years ago.
options page sliced images_1.zip (74.8 KB) - added by sven 4 years ago.
options_page_whitelisted_websites_default_state_84.png (258.2 KB) - added by sven 4 years ago.
advanced_3_77.png (465.4 KB) - added by sven 4 years ago.
including the dropdown menu
options1.png (69.6 KB) - added by saroyanm 4 years ago.
Before @fhd review - General tab
options2.png (91.7 KB) - added by saroyanm 4 years ago.
Before @fhd review - Advanced tab
options3.png (56.4 KB) - added by saroyanm 4 years ago.
Before @fhd review - Help tab
popup1.png (65.1 KB) - added by saroyanm 4 years ago.
Before @fhd review - Add another language dialog
popup2.png (68.3 KB) - added by saroyanm 4 years ago.
Before @fhd review - Add subscription dialog

Change History (58)

comment:1 Changed 4 years ago by greiner

  • Cc sven saroyanm added

comment:2 Changed 4 years ago by greiner

  • Description modified (diff)

comment:3 Changed 4 years ago by mapx

  • Cc mapx added

comment:4 Changed 4 years ago by greiner

  • Description modified (diff)

Added link to icons.

comment:5 Changed 4 years ago by greiner

  • Priority changed from Unknown to P2

comment:6 Changed 4 years ago by sven

  • Blocked By 1442 added

comment:7 Changed 4 years ago by sven

  • Blocked By 1448 added

comment:8 Changed 4 years ago by saroyanm

  • Owner set to saroyanm

comment:9 Changed 4 years ago by sven

  • Keywords 2014q4 removed

comment:10 Changed 4 years ago by 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.

comment:11 Changed 4 years ago by greiner

  • Blocked By 1688 added

comment:12 Changed 4 years ago by greiner

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

comment:13 follow-up: Changed 4 years ago by sebastian

  • Cc sebastian added

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.

comment:14 in reply to: ↑ 13 Changed 4 years ago by 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.

comment:15 Changed 4 years ago by trev

  • Cc trev added

comment:16 Changed 4 years ago by 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).

comment:17 Changed 4 years ago by saroyanm

  • Review URL(s) modified (diff)
  • Status changed from new to reviewing

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

comment:18 Changed 4 years ago by saroyanm

  • Description modified (diff)

comment:19 Changed 4 years ago by philll

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

comment:20 Changed 4 years ago by sven

  • Description modified (diff)

comment:21 Changed 4 years ago by sven

  • Description modified (diff)

comment:22 Changed 4 years ago by sven

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

Changed 4 years ago by sven

Changed 4 years ago by sven

Changed 4 years ago by sven

Changed 4 years ago by sven

Changed 4 years ago by sven

Changed 4 years ago by sven

Changed 4 years ago by sven

comment:23 Changed 4 years ago by sven

  • Description modified (diff)

comment:24 Changed 4 years ago by sven

  • Description modified (diff)

comment:25 Changed 4 years ago by sven

  • Description modified (diff)

comment:26 Changed 4 years ago by greiner

  • Blocked By 1422 added

Changed 4 years ago by sven

including the dropdown menu

comment:27 Changed 4 years ago by sven

  • Description modified (diff)

comment:28 Changed 4 years ago by 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.

comment:29 Changed 4 years ago by greiner

  • Description modified (diff)

comment:30 Changed 4 years ago by greiner

  • Ready set

comment:31 Changed 4 years ago by greiner

  • Blocked By 2026 added

comment:32 Changed 4 years ago by 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

Last edited 4 years ago by mapx (previous) (diff)

comment:33 Changed 4 years ago by 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.

Changed 4 years ago by saroyanm

Before @fhd review - General tab

Changed 4 years ago by saroyanm

Before @fhd review - Advanced tab

Changed 4 years ago by saroyanm

Before @fhd review - Help tab

Changed 4 years ago by saroyanm

Before @fhd review - Add another language dialog

Changed 4 years ago by saroyanm

Before @fhd review - Add subscription dialog

comment:34 Changed 4 years ago by saroyanm

  • Cc fhd added

comment:35 Changed 4 years ago by 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 ?

comment:36 follow-up: Changed 4 years ago by 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.

comment:37 in reply to: ↑ 36 Changed 4 years ago by 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.

comment:38 Changed 4 years ago by saroyanm

  • Blocked By 1422 removed

comment:39 Changed 4 years ago by saroyanm

  • Blocked By 1442 removed

comment:40 Changed 4 years ago by saroyanm

  • Blocked By 1688 removed

comment:41 Changed 4 years ago by saroyanm

  • Resolution set to fixed
  • Status changed from reviewing to closed
Note: See TracTickets for help on using tickets.