Finish design of General tab of new options page

[greiner]

Background

In #1526 we were creating the very first version of the General tab. Not all requested design changes were applied, however. Therefore we need to make the following changes to finish the design.

What to change

• Restrict length of filter list titles using the following styles:

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  

• Remove custom scrollbar styles which were applied using WebKit-specific CSS selectors
• Make sure that all fonts, proportions and colors match the ones mentioned in the styles guides linked in #1526 including:
  • Add border-radius to table list elements
  • Make tab content always be at least as tall as the page
  • Remove bottom border from tab content
  • Specify height for each of the quadrants similar the same way it's implemented for further blocking options quadrant
  • Correct width, height and background position of icons
• Update title texts
  • Change "Adblocking for websites in..." to "Ad blocking for websites in…"
  • Change "Acceptable ads" to "Acceptable Ads"
• Other minor changes related to general tab
  • Expose the full filter list title using standard tooltips by setting the "title" attribute on the element containing the filter list title

[greiner]

Finished design of sidebar: ​https://hg.adblockplus.org/adblockplusui/rev/6631a0422c36

[greiner]

Added title texts changes

[greiner]

Finished design of list items: ​https://hg.adblockplus.org/adblockplusui/rev/d12b18c2a168

[sebastian]

It seems this issue should also be fixed before moving on with translations and integration in Adblock Plus for Chrome/Safari (mostly due to the string changes). Therefore adding the roadmap keyword.

[DylanMarkLeo7]

[Comment removed due to spam]

[greiner]

Closing this ticket because the remaining changes refer to an outdated design.