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

skin/options.css

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-2015 Eyeo GmbH
  *
  * Adblock Plus is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License version 3 as
  * published by the Free Software Foundation.
  *
  * Adblock Plus is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
@@ skipping 165 matching lines @@
   border-color: #CDCDCD transparent;
   border-style: solid;
   border-width: 1px;
   font-size: 16px;
   font-weight: 300;
   line-height: 1em;
   margin-top: -1px;
   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;
   border-width: 1px;
   font-weight: 600;
   -moz-border-start-color: #CDCDCD;
   -webkit-border-start-color: #CDCDCD;
   -moz-margin-end: -1px;
   -webkit-margin-end: -1px;
   -moz-margin-start: -1px;
   -webkit-margin-start: -1px;
   -moz-padding-end: 21px;
   -webkit-padding-end: 21px;
   -moz-padding-start: 21px;
   -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;
 }
 
 .tabs.vertical.bottom
 {
   bottom: 0px;
   position: absolute;
 }
 
@@ skipping 84 matching lines @@
 #content-wrapper
 {
   position: relative;
 }
 
 #content-wrapper > div
 {
   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;
 }
 
 div.button
 {
   cursor: pointer;
   display: flex;
 }
 
@@ skipping 23 matching lines @@
 .table li.empty-placeholder
 {
   background-color: #F5F5F5;
 }
 
 .table label
 {
   vertical-align: top;
 }
 
-.table.cols span
-{
-  display: inline-block;
-  width: 30%;
-}
-
 .table.cols .col-name
 {
   border-bottom: 1px solid #CDCDCD;
 }
 
 .table.cols .col-name span
 {
   display: inline-block;
   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,
 #custom-wrapper::-webkit-scrollbar
 {
   -webkit-padding-end: 10px;
   width: 5px;
 }
 
 .table::-webkit-scrollbar-thumb,
 #custom-wrapper::-webkit-scrollbar-thumb
@@ skipping 54 matching lines @@
 .table .popular
 {
   color: #1E8728;
   font-size: 12px;
   -moz-padding-end: 12px;
   -webkit-padding-end: 12px;
 }
 
 .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;
 }
 
 .icon-add
 {
   background-position: -0px -0px;
   cursor: pointer;
   height: 18px;
@@ skipping 123 matching lines @@
   -webkit-margin-start: 32px;
 }
 
 #whitelisting-add-button + span
 {
   flex: 1;
 }
 
 .icon-enter
 {
-  background-position: -18px -85px;
+  background-position: -18px -32px;
   cursor: pointer;
   height: 10px;
   position: absolute;
   top: 10px;
   -moz-margin-start: -20px;
   -webkit-margin-start: -20px;
   width: 10px;
 }
 
 .button-add, .cancel-button
 {
   background-color: transparent;
   border: 0px;
   color: #3A7BA6;
   cursor: pointer;
 }
 
 /*
   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;
   margin-bottom: 10px;
 }
 
 #custom-filters-raw-controls
 {
   display: flex;
 }
@@ skipping 102 matching lines @@
   height: 15px;
   -webkit-margin-end: 10px;
   -moz-margin-end: 10px;
   margin-bottom: -2px;
   width: 1px;
 }
 
 #custom-filters-add button::after
 {
   content: "";
-  background-position: -28px -85px;
+  background-position: -28px -32px;
   cursor: pointer;
   height: 10px;
   -webkit-margin-start: 6px;
   -moz-margin-start: 6px;
   width: 10px;
 }
 
 /*
   Tooltips
 */
 
 .tooltip, #block-element-explanation a
 {
   border-bottom: dashed 1px;
   color: #3A7BA6;
   cursor: default;
   font-size: 12px;
   height: 15px;
   line-height: 19px;
   margin: 0px 4px;
   position: relative;
   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;
   -webkit-margin-start: 8px;
 }
 
 #block-element-explanation a
 {
   color: black;
   border-bottom-color: #3A7BA6;
@@ skipping 33 matching lines @@
 
 .tooltip:not(:hover) > div[role="tooltip"],
 div[role="tooltip"]:hover
 {
   visibility: hidden;
   opacity: 0;
   -webkit-transition-delay: 0ms;
   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;
   content: "";
   height: 6px;
   position: absolute;
   top: -6px;
   width: 14px;
   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
 {
   left: inherit;
   right: 30px;
 }
 
 div[role="tooltip"] img
 {
   float: left;
@@ skipping 234 matching lines @@
 #other-language .button-add::before
 {
   display: none;
 }
 
 #other-language .display
 {
   -webkit-margin-start: 10px;
   -moz-margin-start: 10px;
 }