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-2016 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 184 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 16 matching lines @@
 
 .table.list li .display
 {
   flex: 1;
   line-height: 16px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.table.list li:nth-child(odd),
-.table.cols li:nth-child(even),
+.table.list li:nth-of-type(odd),
+.table.cols li:nth-of-type(odd),
 .table li.empty-placeholder
 {
   background-color: #F5F5F5;
 }
 
 .table label
 {
   vertical-align: top;
 }
 
-.table.cols span
+.table.cols
 {
-  display: inline-block;
-  width: 30%;
+  border-bottom: 1px solid #CDCDCD;
+  border-top: 1px solid #CDCDCD;
 }
 
-.table.cols .col-name
+button[disabled="true"]
 {
-  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;
-}
-
-.table input[type="checkbox"]
-{
-  margin-top: 0px;
-  -moz-margin-end: 20px;
-  -webkit-margin-end: 20px;
-  padding: 0px 0px 0px 0px;
-  visibility: hidden;
-}
-
-.table input[type="checkbox"]::before
-{
-  content: "";
-  background-position: -51px 0px;
-  height: 18px;
-  width: 18px;
-  visibility: visible;
-}
-
-.table input[type="checkbox"]:checked::before
-{
-  content: "";
-  background-position: -68px 0px;
-  height: 18px;
-  padding: 0px;
-  width: 18px;
-  visibility: visible;
+  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 button[role="checkbox"], .table button.delete,
-#content-help a::before, #dialog-close::before,
+.icon,
+button[role="checkbox"],
+.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,
+#all-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
 */
 
+#filter-lists > div
+{
+  display: none;
+}
+
+body[data-tab="advanced-allFilterLists"] #all-filter-lists,
+body[data-tab="advanced-customFilters"] #custom-filters
+{
+  display: block;
+}
+
+body[data-tab="advanced-allFilterLists"] #content-advanced [data-tab="advanced-allFilterLists"],

[Thomas Greiner, 2016/02/01 18:52:37]

Detail: Mentioning `#content-advanced` is redundant since the tab name already
mentions that it's part of the Advanced tab.

[saroyanm, 2016/02/03 14:04:29]

Done.

[Thomas Greiner, 2016/02/03 14:50:13]

I noticed that this change introduces a regression: Try clicking on the tabs in
the sidebar and you'll notice that the "Advanced" tab's proportions change.

So it seems like we need to revert that change, unfortunately.

[saroyanm, 2016/02/03 17:43:11]

Ach right, because we also specify same data-tab both on sidebar tabs and the
one in advanced, thanks for noticing that.

+body[data-tab="advanced-customFilters"] #content-advanced [data-tab="advanced-customFilters"]
+{
+  border-bottom: 2px solid #1E8728;
+  padding-bottom: 10px;
+  color: black;
+  font-weight: 600;
+}
+
+#all-filter-lists .table
+{
+  display: inline-block;
+}
+
+#all-filter-lists .table li
+{
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+#all-filter-lists .table li > span:first-of-type
+{
+  display: inline-block;
+  width: 330px;
+}
+
+.table-header
+{
+  display: flex;
+}
+    
+#filter-lists 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;
+}
+
+#all-filter-lists .table li span.display
+{
+  cursor: pointer;
+}
+
+#all-filter-lists .table .head span:first-child
+{
+  -webkit-padding-start: 38px;
+  -moz-padding-start: 38px;
+}
+
+#all-filter-lists .controls
+{
+  padding-top: 0px;
+  border-top: none;
+}
+
+#all-filter-lists .controls button
+{
+  margin-top: 14px;
+}
+
+#all-filter-lists .arrow
+{
+  border-style: none;
+  position: relative;

[Thomas Greiner, 2016/02/01 18:52:37]

Detail: According to the coding style positioning should come before box
model-related properties.

[saroyanm, 2016/02/03 14:04:30]

Done.

+  padding: 0px;
+  width: 6px;
+  height: 4px;
+  margin: 0px 4px;

[Thomas Greiner, 2016/02/01 18:52:37]

The reason why it looks odd to you to specify `6px` is because there's
whitespace between the subscription title and the arrow. Therefore using `4px`
instead is merely a workaround for the underlying issue.

It seems that specifying `display: flex` on the parent and `vertical-align:
middle; margin: auto 6px;` resolves the issue and properly align it vertically.

[saroyanm, 2016/02/03 14:04:28]

Done, also changed the parent to be block level element, not to have nested
block level element in the inline one.

+  background-color: transparent;

[Thomas Greiner, 2016/02/01 18:52:38]

Detail: Why is that necessary?

[saroyanm, 2016/02/03 14:04:28]

Redundant, do not remember why I have it here. Done. Thanks for noticing.

+  background-position: -1px -54px;
+  cursor: pointer;
+}
+
+#all-filter-lists .table li:last-of-type a
+{
+  color: #3A7BA6;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+#all-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
+{
+  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.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.context-menu
+{
+  position: absolute;
+  top: 16px;
+  z-index: 1;
+  visibility: hidden;
+  border-radius: 3px;

[Thomas Greiner, 2016/02/01 18:52:37]

Detail: Why did you move the border radius to here?

[saroyanm, 2016/02/03 14:04:28]

I think I didn't noticed that. moved to content.

+}
+
+div.context-menu::before
+{
+  left: -4px;
+}
+
+html[dir="rtl"] div.context-menu::before
+{
+  left: inherit;
+  right: -4px;
+}
+
+div.context-menu .content

[Thomas Greiner, 2016/02/01 18:52:38]

Detail: Please add `cursor: default` to avoid showing the pointing cursor when
hovering over non-clickable elements in the context menu.

[saroyanm, 2016/02/03 14:04:27]

Done.

+{
+  position: relative;
+  left: calc(-50% + 2px);
+  background-color: rgba(45, 45, 45, 0.95);
+  padding: 4px 10px;
+}
+
+html[dir="rtl"] div.context-menu .content
+{
+  left: inherit;
+  right: -50%;
+}
+
+li.show-context-menu div.context-menu
+{
+  visibility: visible;
+}
+
+div.context-menu > div a::before
+{
+  content: "";
+  -moz-margin-end: 8px;
+  -webkit-margin-end: 8px;
+}
+
+div.context-menu > div a
+{
+  display: block;
+  text-decoration: none;

[Thomas Greiner, 2016/02/01 18:52:36]

Detail: This property is in the wrong spot according to our coding style since
it belongs into the "Colors and Typography" category.

[saroyanm, 2016/02/03 14:04:29]

Done.

+  padding: 7px 4px;
+  border-bottom: 1px solid #CDCDCD;
+  cursor: pointer;
+  vertical-align: middle;
+}
+
+div.context-menu > div a:before

[Thomas Greiner, 2016/02/01 18:52:38]

Detail: Replace ":before" with "::before" to make it consistent with the rest of
the code.

[saroyanm, 2016/02/03 14:04:29]

Done.

+{
+  vertical-align: middle;
+  height: 16px;
+  width: 16px;
+}
+
+div.context-menu > div a:last-child
+{
+  border: none;
+}
+
+.context-menu .update-now::before
+{
+  background-position: -38px -31px;
+}
+
+.context-menu .website::before
+{
+  background-position: -33px -47px;
+}
+
+.context-menu .source::before
+{
+  background-position: -53px -34px;
+}
+
+.context-menu .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 245 matching lines @@
 #other-language .button-add::before
 {
   display: none;
 }
 
 #other-language .display
 {
   -webkit-margin-start: 10px;
   -moz-margin-start: 10px;
 }