Issue 2375 - Implement "Blocking lists" section in new options page

skin/options.css

Index: skin/options.css
===================================================================
--- a/skin/options.css
+++ b/skin/options.css
@@ -183,9 +183,9 @@
   padding: 14px 20px;
 }
 
-body[data-tab="general"] #tab-general,
-body[data-tab="advanced"] #tab-advanced,
-body[data-tab="help"] #tab-help
+body[data-tab*="general"] #tab-general,
+body[data-tab*="advanced"] #tab-advanced,

[Thomas Greiner, 2016/01/19 11:27:31]

We don't expect this to be positioned anywhere inside "data-tab" so
`data-tab^="advanced"` should be sufficient.

[saroyanm, 2016/01/22 09:55:10]

It depends on other comment regarding showing the tabs in options.html, in case
we will have list of tabs that should be active, I think we are good with
asterisk selector but if we will indicate only one active tab then this changes
are not necessary at all, or if we will consider the order of the selectors then
we can go with "^" option.

+body[data-tab*="help"] #tab-help
 {
   background-color: #FFFFFF;
   border-radius: 3px 0px 0px 3px;
@@ -203,9 +203,9 @@
   -webkit-padding-start: 21px;
 }
 
-html[dir="rtl"] body[data-tab="general"] #tab-general,
-html[dir="rtl"] body[data-tab="advanced"] #tab-advanced,
-html[dir="rtl"] body[data-tab="help"] #tab-help
+html[dir="rtl"] body[data-tab*="general"] #tab-general,
+html[dir="rtl"] body[data-tab*="advanced"] #tab-advanced,
+html[dir="rtl"] body[data-tab*="help"] #tab-help
 {
   border-radius: 0px 3px 3px 0px;
 }
@@ -310,9 +310,9 @@
   display: none;
 }
 
-body[data-tab="general"] #content-general,
-body[data-tab="advanced"] #content-advanced,
-body[data-tab="help"] #content-help
+body[data-tab*="general"] #content-general,
+body[data-tab*="advanced"] #content-advanced,
+body[data-tab*="help"] #content-help
 {
   display: block;
 }
@@ -356,12 +356,6 @@
   vertical-align: top;
 }
 
-.table.cols span
-{
-  display: inline-block;
-  width: 30%;
-}
-
 .table.cols .col-name
 {
   border-bottom: 1px solid #CDCDCD;
@@ -373,10 +367,14 @@
   width: 30%;
 }
 
-.table.cols .col-name span:first-child
+.table.cols li:first-child
 {
-  -webkit-padding-start: 38px;
-  -moz-padding-start: 38px;
+  border-bottom: 1px solid #CDCDCD;
+}
+
+.table.cols li:last-child
+{
+  border-bottom: 1px solid #CDCDCD;
 }

[Thomas Greiner, 2016/01/19 11:27:30]

You can merge those two rules above.

[saroyanm, 2016/01/22 09:55:11]

Done.

 
 .table::-webkit-scrollbar,
@@ -452,32 +450,31 @@
 
 .tabs.horizontal
 {
+  display: flex;
   margin-bottom: 0px;
   padding: 0px;
 }
 
 .tabs.horizontal li
 {
+  display: inline-block;
   border-bottom: 1px solid #A1A1A1;
-  display: inline-block;
   color: #3A7BA6;
-  padding: 10px 0px 11px 0px;
+  padding: 10px 46px;
   text-align: center;
-  width: 50%;
 }
 
-.tabs.horizontal li.active
-{
-  border-bottom: 2px solid #1E8728;
-  color: black;
-  font-weight: 600;
-  padding-bottom: 10px;
-}
-
-.icon, .table input[type="checkbox"]::before, .table button.delete,
-#content-help a::before, #dialog-close::before,
+.icon,
+.table input[type="checkbox"]::before,
+.table button.delete,
+#content-help a::before,
+#dialog-close::before,
 #custom-filters-add button::after,
-#dialog-body button::before
+#dialog-body button::before,
+.date::before,
+.time::before,
+#filter-lists .arrow,
+.context-menu .content a::before
 {
   background-image: url(options-sprite.png);
   display: inline-block;
@@ -621,7 +618,7 @@
 
 .icon-enter
 {
-  background-position: -18px -85px;
+  background-position: -18px -32px;
   cursor: pointer;
   height: 10px;
   position: absolute;
@@ -643,6 +640,101 @@
   Advanced tab content
 */
 
+#blocking-lists > div
+{
+  display: none;
+}
+
+body[data-tab*="filter-lists"] #filter-lists,
+body[data-tab*="custom-filters"] #custom-filters
+{
+  display: block;
+}
+
+body[data-tab*="filter-lists"] #content-advanced [data-tab="advanced,filter-lists"],
+body[data-tab*="custom-filters"] #content-advanced [data-tab="advanced,custom-filters"]
+{
+  border-bottom: 2px solid #1E8728;
+  color: black;
+  font-weight: 600;
+  padding-bottom: 10px;
+}
+
+#filter-lists .table
+{
+  display: inline-block;
+}
+
+#filter-lists .table li

[Thomas Greiner, 2016/01/19 11:27:30]

I noticed that long filter list titles cause the line's height to expand. Please
check back with Sven whether that is intended or whether (a) the title should be
cut off or (b) the table's width should increase.

[Thomas Greiner, 2016/01/19 11:27:30]

According to the style guide the padding above and below the text should differ
for `li.head`

[saroyanm, 2016/01/22 09:55:12]

Done.

[saroyanm, 2016/01/22 09:55:12]

Currently it's consistent with other list elements, I'll suggest keep it like
this and update that with other list items, because feels like they should
behave somehow similar.

[Thomas Greiner, 2016/01/25 15:40:28]

Note that the behavior changes with https://codereview.adblockplus.org/29333262/
but fine with me for now since this change hasn't landed.

[saroyanm, 2016/01/26 18:36:16]

Acknowledged.

+{
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+#filter-lists .table li > span:first-of-type
+{
+  display: inline-block;
+  width: 330px;
+}
+
+#filter-lists .table li span.display
+{
+  cursor: pointer;
+}
+
+#filter-lists .table .head span:first-child
+{
+  -webkit-padding-start: 38px;
+  -moz-padding-start: 38px;
+}
+
+#filter-lists .controls

[Thomas Greiner, 2016/01/19 11:27:31]

Detail: The margins for the buttons are not according to the style guide.

[saroyanm, 2016/01/22 09:55:11]

Done.

+{
+  border-top: none;
+}
+
+#filter-lists .arrow

[Thomas Greiner, 2016/01/19 11:27:30]

I understand that we might not want to reorder the existing styles in this file
but at least with the ones we add we should be consistent with the CSS coding
style regarding the ordering of properties.

[saroyanm, 2016/01/22 09:55:12]

Done.

+{
+  border-style: none;
+  padding: 0px;
+  background-color: transparent;
+  background-position: -1px -54px;
+  -webkit-margin-start: 6px;
+  -moz-margin-start: 6px;
+  width: 6px;
+  height: 4px;
+  margin: 0px;

[Thomas Greiner, 2016/01/19 11:27:31]

You're overriding the margin you've set above so it's not being applied.

[saroyanm, 2016/01/22 09:55:12]

Done.

+}
+
+#filter-lists .table li:last-of-type a

[Thomas Greiner, 2016/01/19 11:27:30]

Detail: According to the style guide this element should be aligned to the
right.

[saroyanm, 2016/01/22 09:55:11]

Done.

+{
+  color: #3A7BA6;
+  text-decoration: none;
+}
+
+.date::before
+{
+  content: "";
+  -webkit-margin-end: 6px;
+  -moz-margin-end: 6px;
+  background-position: -7px -49px;
+  height: 12px;
+  width: 12px;
+
+}
+
+.time::before
+{
+  content: "";
+  -webkit-margin-end: 6px;
+  -moz-margin-end: 6px;
+  -webkit-margin-start: 12px;
+  -moz-margin-start: 12px;
+  background-position: -20px -49px;
+  height: 12px;
+  width: 12px;
+}
+
 #custom-filters-header
 {
   padding: 0px 20px;
@@ -765,7 +857,7 @@
 #custom-filters-add button::after
 {
   content: "";
-  background-position: -28px -85px;
+  background-position: -28px -32px;
   cursor: pointer;
   height: 10px;
   -webkit-margin-start: 6px;
@@ -790,6 +882,20 @@
   text-decoration: none;
 }
 
+.context-menu
+{
+  display: inline-block;
+  border-bottom:none;

[Thomas Greiner, 2016/01/19 11:27:31]

Detail: Missing whitespace after colon.

[saroyanm, 2016/01/22 09:55:12]

Done.

+  position: relative;
+}
+
+.context-menu a
+{
+  white-space: nowrap;
+  color: #FFF;
+  vertical-align: middle;
+}
+
 #content-advanced .tooltip
 {
   -moz-margin-start: 8px;
@@ -843,7 +949,8 @@
   transition-delay: 0ms;
 }
 
-div[role="tooltip"]::before
+div[role="tooltip"]::before,
+div[role="context-menu"]::before
 {
   background-image: url(options-sprite.png);
   background-position: -8px -42px;
@@ -855,6 +962,93 @@
   left: 30px;
 }
 
+div[role="context-menu"]
+{
+  position: absolute;
+  top: 21px;
+  z-index: 1;
+  visibility: hidden;
+}
+
+li.context div[role="context-menu"]
+{
+  visibility: visible;
+}
+
+div[role="context-menu"]::before
+{
+  left: -4px;
+}
+
+html[dir="rtl"] div[role="context-menu"]::before
+{
+  left: inherit;
+  right: -4px;
+}
+
+div[role="context-menu"] > div
+{
+  position: relative;
+  left: calc(-100%/2);

[Thomas Greiner, 2016/01/19 11:27:30]

That's the same as writing `left: -50%`. Anyway, due to the `-4px` offset of the
arrow, it needs to be written as `left: calc(-50% + 2px)` to center it properly.

[saroyanm, 2016/01/22 09:55:12]

Done.

+  background-color: rgba(45, 45, 45, 0.95);
+  padding: 10px;

[Thomas Greiner, 2016/01/19 11:27:30]

According to the style guide each menu item should have the same height.
However, due to this padding the first and last items' height is too big.
Therefore this needs to be changed to `padding: 0px 10px`.

[saroyanm, 2016/01/22 09:55:12]

Done.

+  border-radius: 3px;
+}
+
+html[dir="rtl"] div[role="context-menu"] > div
+{
+  left: inherit;
+  right: calc(-100%/2);
+}
+
+div[role="context-menu"] > div a::before
+{
+  content: "";
+  -moz-margin-end: 8px;
+  -webkit-margin-end: 8px;
+}
+
+div[role="context-menu"] > div a
+{
+  display: block;
+  text-decoration: none;
+  padding: 6px 0px;
+  border-bottom: 1px solid #CDCDCD;
+}
+
+div[role="context-menu"] > div a:last-child
+{
+  border: none;
+}
+
+div[role="context-menu"] [data-action="update-now"]::before
+{
+  background-position: -38px -33px;
+  height: 10px;
+  width: 14px;

[Thomas Greiner, 2016/01/19 11:27:31]

Why does each of those icons have its own width and height? Please make sure
that they have the same dimensions so that we can add, remove or replace them
easily.

Note that this is also in-line with the style guide which specifies to use
16x16.

[saroyanm, 2016/01/22 09:55:11]

Done.

+}
+
+div[role="context-menu"] [data-action="website"]::before
+{
+  background-position: -33px -47px;
+  height: 14px;
+  width: 16px;
+}
+
+div[role="context-menu"] [data-action="source"]::before
+{
+  background-position: -53px -32px;
+  height: 18px;
+  width: 14px;
+}
+
+div[role="context-menu"] [data-action="delete"]::before
+{
+  background-position: -71px -32px;
+  height: 16px;
+  width: 12px;
+}
+
 html[dir="ltr"] div[role="tooltip"].flip-vertical::before,
 html[dir="rtl"] div[role="tooltip"]:not(.flip-vertical)::before
 {