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,
+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;
 }
@@ -345,7 +345,7 @@
 }
 
 .table.list li:nth-child(odd),

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

I guess you'd also want to do change it here.

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

Done.

-.table.cols li:nth-child(even),
+.table.cols li:nth-of-type(odd),
 .table li.empty-placeholder
 {
   background-color: #F5F5F5;
@@ -356,27 +356,10 @@
   vertical-align: top;
 }
 
-.table.cols span
-{
-  display: inline-block;
-  width: 30%;
-}
-
-.table.cols .col-name
+.table.cols
 {
   border-bottom: 1px solid #CDCDCD;
-}
-
-.table.cols .col-name span
-{
-  display: inline-block;
-  width: 30%;
-}
-
-.table.cols .col-name span:first-child
-{
-  -webkit-padding-start: 38px;
-  -moz-padding-start: 38px;
+  border-top: 1px solid #CDCDCD;
 }
 
 .table::-webkit-scrollbar,
@@ -428,6 +411,12 @@
   visibility: visible;
 }
 
+input[disabled="true"]::before
+{
+  background-color: #ccc;
+  border-radius: 2px;
+}
+
 .table button.delete
 {
   background-color: transparent;
@@ -452,32 +441,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 +609,7 @@
 
 .icon-enter
 {
-  background-position: -18px -85px;
+  background-position: -18px -32px;
   cursor: pointer;
   height: 10px;
   position: absolute;
@@ -643,6 +631,129 @@
   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;
+  padding-bottom: 10px;
+  color: black;
+  font-weight: 600;
+}
+
+#filter-lists .table
+{
+  display: inline-block;
+}
+
+#filter-lists .table li
+{
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+#filter-lists .table li > span:first-of-type
+{
+  display: inline-block;
+  width: 330px;
+}
+
+.table-header
+{
+  display: flex;
+}
+    
+.table-header h3
+{
+  display: inline-block;
+  margin-bottom: 7px;
+  font-size: 14px;
+}
+
+.table-header h3:first-child
+{
+  width: 330px;
+  -webkit-padding-start: 54px;
+  -moz-padding-start: 54px;
+}
+
+#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
+{
+  padding-top: 0px;
+  border-top: none;
+}
+
+#filter-lists .controls button
+{
+  margin-top: 14px;
+}
+
+#filter-lists .arrow
+{
+  border-style: none;
+  padding: 0px;
+  width: 6px;
+  height: 4px;
+  margin: 0px;
+  background-color: transparent;
+  background-position: -1px -54px;
+}
+
+#filter-lists .table li:last-of-type a
+{
+  color: #3A7BA6;
+  text-decoration: none;
+}
+
+#filter-lists .table li:last-of-type span:last-child
+{
+  -webkit-margin-start: auto;
+  -moz-margin-start: auto;
+}
+
+.date::before
+{
+  content: "";
+  -webkit-margin-end: 6px;
+  -moz-margin-end: 6px;
+  height: 12px;
+  width: 12px;
+  background-position: -7px -49px;
+}
+
+.time::before
+{
+  content: "";
+  -webkit-margin-end: 6px;
+  -moz-margin-end: 6px;
+  -webkit-margin-start: 12px;
+  -moz-margin-start: 12px;
+  height: 12px;
+  width: 12px;
+  background-position: -20px -49px;
+}
+
 #custom-filters-header
 {
   padding: 0px 20px;
@@ -765,7 +876,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 +901,20 @@
   text-decoration: none;
 }
 
+.context-menu

[Thomas Greiner, 2016/01/27 17:16:58]

According to the style guide there should be 6px between the title and the
arrow.

Also note that the cursor on the arrow (default) is different than the one on
the title (pointer).

[saroyanm, 2016/01/28 17:00:12]

Sorry, from some point I missed the style-guide and were using mockup, Done.

[Thomas Greiner, 2016/01/29 17:48:08]

There's still no 6px between the title and the arrow or am I missing something?

[saroyanm, 2016/01/29 18:56:17]

my fault, were thinking about the 6px vertically between two arrows
(context-open and context arrow), addec 4px IMO with 6px looks a bit misaligned.

+{
+  display: inline-block;
+  position: relative;
+  border-bottom: none;
+}
+
+.context-menu a
+{
+  vertical-align: middle;
+  white-space: nowrap;
+  color: #FFF;
+}
+
 #content-advanced .tooltip
 {
   -moz-margin-start: 8px;
@@ -843,7 +968,8 @@
   transition-delay: 0ms;
 }
 
-div[role="tooltip"]::before
+div[role="tooltip"]::before,
+div.container::before

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

Was it intentional to call the class "container" even though it's only used to
contain the context menu? I'm asking because before it was selected via
`div[role="context-menu"]` which was more descriptive than it is here.

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

Not sure why I named it so, but I agree with you that it's not descriptive at
all, update.

 {
   background-image: url(options-sprite.png);
   background-position: -8px -42px;
@@ -855,6 +981,94 @@
   left: 30px;
 }
 
+div.container
+{
+  position: absolute;
+  top: 21px;
+  z-index: 1;
+  visibility: hidden;
+}
+
+li.context div.container
+{
+  visibility: visible;
+}
+
+div.container::before
+{
+  left: -4px;
+}
+
+html[dir="rtl"] div.container::before
+{
+  left: inherit;
+  right: -4px;
+}
+
+.context-menu div.container > div
+{
+  position: relative;
+  left: calc(-50% + 2px);
+  background-color: rgba(45, 45, 45, 0.95);
+  padding: 0px 10px;
+  border-radius: 3px;
+}
+
+html[dir="rtl"] div.container > div
+{
+  left: inherit;
+  right: -50%;
+}
+
+div.container > div a::before
+{
+  content: "";
+  -moz-margin-end: 8px;
+  -webkit-margin-end: 8px;
+}
+
+div.container > div a
+{
+  display: block;
+  text-decoration: none;
+  padding: 6px 0px;
+  border-bottom: 1px solid #CDCDCD;
+  cursor: pointer;
+  vertical-align: middle;
+}
+
+div.container > div a:before
+{
+  vertical-align: middle;
+  height: 16px;
+  width: 16px;
+}
+
+div.container > div a:last-child
+{
+  border: none;
+}
+
+div.container [data-action="update-now"]::before
+{
+  background-position: -38px -31px;
+}
+
+div.container [data-action="website"]::before
+{
+  background-position: -33px -47px;
+}
+
+div.container [data-action="source"]::before
+{
+  background-position: -53px -34px;
+}
+
+div.container [data-action="delete"]::before
+{
+  background-position: -71px -34px;
+}
+
 html[dir="ltr"] div[role="tooltip"].flip-vertical::before,
 html[dir="rtl"] div[role="tooltip"]:not(.flip-vertical)::before
 {