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,
+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 11 matching lines @@
   padding: 14px 0px;
   -webkit-padding-start: 16px;
   -moz-padding-start: 16px;
 }
 
 .table.list li .display
 {
   flex: 1;
 }
 
 .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;
 }
 
 .table label
 {
   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,
 #custom-wrapper::-webkit-scrollbar
 {
   -webkit-padding-end: 10px;
   width: 5px;
 }
 
 .table::-webkit-scrollbar-thumb,
@@ skipping 31 matching lines @@
 .table input[type="checkbox"]:checked::before
 {
   content: "";
   background-position: -68px 0px;
   height: 18px;
   padding: 0px;
   width: 18px;
   visibility: visible;
 }
 
+input[disabled="true"]::before
+{
+  background-color: #ccc;
+  border-radius: 2px;
+}
+
 .table button.delete
 {
   background-color: transparent;
   background-position: -9px -32px;
   border: 0px;
   height: 10px;
   margin-top: 5px;
   -moz-margin-end: 20px;
   -webkit-margin-end: 20px;
   padding: 0px;
   cursor: pointer;
   width: 10px;
 }
 
 .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;
+  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;
   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

[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;
   -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.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;
   content: "";
   height: 6px;
   position: absolute;
   top: -6px;
   width: 14px;
   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
 {
   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;
 }