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
+ * 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
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  * GNU General Public License for more details.
  *
@@ skipping 71 matching lines @@
   display: none;
 }
 
 input[type="text"], input[type="search"]
 {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
 
+button[role="checkbox"]
+{
+  vertical-align: top;
+  width: 18px;
+  height: 18px;
+  margin-top: 0px;
+  -moz-margin-end: 20px;
+  -webkit-margin-end: 20px;
+  padding: 0px;
+  border: none;
+  background-color: transparent;
+  background-position: -51px 0px;
+}
+
+button[role="checkbox"][aria-checked="true"]
+{
+  background-position: -68px 0px;
+}
+
 .option-name
 {
   display: flex;
   margin-bottom: 16px;
   margin-top: 24px;
 }
 
 .option-name > :first-child
 {
   flex: 1;
@@ skipping 34 matching lines @@
 }
 
 .hbox
 {
   display: flex;
   flex-direction: row;
 }
 
 .hbox > div
 {
-  flex: 1;
+  width: 400px;
 }
 
 .tabs li
 {
   cursor: pointer;
   display: flex;
 }
 
 .tabs li a
 {
@@ skipping 16 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,

[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
+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 43 matching lines @@
 {
   display: none;
 }
 
 #tab-share:lang(zh) + li,
 #tab-share[hidden] + li
 {
   border-top: none;
 }
 
-#tab-content
+#content
 {
   background-color: #FFFFFF;
   border: 1px solid #CDCDCD;
   border-radius: 8px;
   box-sizing: border-box;
   min-width: 960px;
   padding: 0px 60px 40px 60px;
 }
 
-#tab-content h1
+#content h1
 {
   border-bottom: 1px solid #CDCDCD;
   margin: 0px;
   padding: 40px 0px 16px 0px;
 }
 
 #link-version
 {
   display: flex;
   margin: 12px 20px;
@@ skipping 10 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;
 }
 
 .table
 {
   list-style: none;
   margin: 0px;
   padding: 0px;
   position: relative;
 }
 
 .table li
 {
   display: flex;
-  padding: 14px 0px;
+  padding: 12px 0px;
   -webkit-padding-start: 16px;
   -moz-padding-start: 16px;
+  border-radius: 3px;
 }
 
 .table.list li .display
 {
   flex: 1;
-}
-
-.table.list li:nth-child(odd),
-.table.cols li:nth-child(even),
+  line-height: 16px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.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 .col-name
+.table.cols
 {
   border-bottom: 1px solid #CDCDCD;
-}
-
-.table.cols .col-name span
-{
-  display: inline-block;
-  width: 30%;
-}
-
-.table.cols li:first-child
-{
-  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
-{
-  background-color: #CDCDCD;
-  border-radius: 5px;
-  padding: 0px 40px;
-}
-
-.table::-webkit-scrollbar-thumb:hover,
-#custom-wrapper::-webkit-scrollbar-thumb:hover
-{
-  background-color: #A1A1A1;
-}
-
-.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;
+  border-top: 1px solid #CDCDCD;
+}
+
+button[disabled="true"]
+{
+  border-radius: 2px;
+  background-color: #ccc;
 }
 
 .table button.delete
 {
   background-color: transparent;
   background-position: -9px -32px;
   border: 0px;
   height: 10px;
   margin-top: 5px;
   -moz-margin-end: 20px;
@@ skipping 15 matching lines @@
 {
   display: flex;
   margin-bottom: 0px;
   padding: 0px;
 }
 
 .tabs.horizontal li
 {
   display: inline-block;
   border-bottom: 1px solid #A1A1A1;
+  padding: 10px 46px;
   color: #3A7BA6;
-  padding: 10px 46px;
   text-align: center;
 }
 
 .icon,
-.table input[type="checkbox"]::before,
+button[role="checkbox"],
 .table button.delete,
 #content-help a::before,
 #dialog-close::before,
 #custom-filters-add button::after,
 #dialog-body button::before,
 .date::before,
 .time::before,
-#filter-lists .arrow,
+#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;
@@ skipping 64 matching lines @@
   vertical-align: top;
 }
 
 /*
   General tab content
 */
 
 #blocking-languages,
 #acceptable-ads
 {
-  -moz-padding-end: 40px;
-  -webkit-padding-end: 40px;
+  -moz-margin-end: 40px;
+  -webkit-margin-end: 40px;
 }
 
 #custom-wrapper
 {
   height: 290px;
   overflow: auto;
 }
 
 #custom-wrapper .table
 {
@@ skipping 60 matching lines @@
   background-color: transparent;
   border: 0px;
   color: #3A7BA6;
   cursor: pointer;
 }
 
 /*
   Advanced tab content
 */
 
-#blocking-lists > div
+#filter-lists > div
 {
   display: none;
 }
 
-body[data-tab*="filter-lists"] #filter-lists,
-body[data-tab*="custom-filters"] #custom-filters
+body[data-tab="advanced-allFilterLists"] #all-filter-lists,
+body[data-tab="advanced-customFilters"] #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"]
+body[data-tab="advanced-allFilterLists"] #content-advanced [data-tab="advanced-allFilterLists"],
+body[data-tab="advanced-customFilters"] #content-advanced [data-tab="advanced-customFilters"]
 {
   border-bottom: 2px solid #1E8728;
+  padding-bottom: 10px;
   color: black;
   font-weight: 600;
-  padding-bottom: 10px;
-}
-
-#filter-lists .table
+}
+
+#all-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.

+#all-filter-lists .table li
 {
   padding-left: 16px;
   padding-right: 16px;
 }
 
-#filter-lists .table li > span:first-of-type
+#all-filter-lists .table li > div
+{
+  display: flex;
+  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;
-}
-
-#filter-lists .table li span.display
-{
-  cursor: pointer;
-}
-
-#filter-lists .table .head span:first-child
+  -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;
 }
 
-#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.

-{
+#all-filter-lists .controls
+{
+  padding-top: 0px;
   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.

-{
+#all-filter-lists .controls button
+{
+  margin-top: 14px;
+}
+
+#all-filter-lists .arrow
+{
+  position: relative;
+  margin: auto 6px;
   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.

+  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;
+}
+
+#all-filter-lists li.show-message .date,
+#all-filter-lists li.show-message .time,
+#all-filter-lists li:not(.show-message) .message
+{
+  display: none;
 }
 
 .date::before
 {
   content: "";
   -webkit-margin-end: 6px;
   -moz-margin-end: 6px;
-  background-position: -7px -49px;
   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;
-  background-position: -20px -49px;
   height: 12px;
   width: 12px;
+  background-position: -20px -49px;
 }
 
 #custom-filters-header
 {
   padding: 0px 20px;
   margin-bottom: 10px;
 }
 
 #custom-filters-raw-controls
 {
@@ skipping 132 matching lines @@
   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;
+  border-bottom: none;
 }
 
 .context-menu a
 {
+  vertical-align: middle;
   white-space: nowrap;
   color: #FFF;
-  vertical-align: middle;
 }
 
 #content-advanced .tooltip
 {
   -moz-margin-start: 8px;
   -webkit-margin-start: 8px;
 }
 
 #block-element-explanation a
 {
@@ skipping 36 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="context-menu"]::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[role="context-menu"]
+div.context-menu
 {
   position: absolute;
-  top: 21px;
+  top: 16px;
   z-index: 1;
   visibility: hidden;
 }
 
-li.context div[role="context-menu"]
-{
-  visibility: visible;
-}
-
-div[role="context-menu"]::before
+div.context-menu::before
 {
   left: -4px;
 }
 
-html[dir="rtl"] div[role="context-menu"]::before
+html[dir="rtl"] div.context-menu::before
 {
   left: inherit;
   right: -4px;
 }
 
-div[role="context-menu"] > div
+div.context-menu .content
 {
   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.

+  left: calc(-50% + 2px);
+  border-radius: 3px;
+  padding: 4px 10px;
   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
+  cursor: default;
+}
+
+html[dir="rtl"] div.context-menu .content
 {
   left: inherit;
-  right: calc(-100%/2);
-}
-
-div[role="context-menu"] > div a::before
+  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[role="context-menu"] > div a
+div.context-menu > div a
 {
   display: block;
+  padding: 7px 4px;
+  border-bottom: 1px solid #CDCDCD;
   text-decoration: none;
-  padding: 6px 0px;
-  border-bottom: 1px solid #CDCDCD;
-}
-
-div[role="context-menu"] > div a:last-child
+  cursor: pointer;
+  vertical-align: middle;
+}
+
+div.context-menu > div a::before
+{
+  vertical-align: middle;
+  height: 16px;
+  width: 16px;
+}
+
+div.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
+.context-menu .update-subscription::before
+{
+  background-position: -38px -31px;
+}
+
+.context-menu .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;
+}
+
+.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
@@ skipping 67 matching lines @@
   -webkit-margin-end: 6px;
 }
 
 /*
   Dialog
 */
 
 #dialog-background
 {
   display: none;
-  background-color: white;
-  position: absolute;
-  opacity: 0.7;
+  position: fixed;
   top: 0px;
   right: 0px;
   bottom: 0px;
   left: 0px;
   z-index: 2;
+  background-color: white;
+  opacity: 0.7;
 }
 
 body[data-dialog] #dialog-background
 {
   display: block;
 }
 
 #dialog
 {
-  background-color: #FFFFFF;
-  border: 2px solid #4D9D4B;
-  border-radius: 3px;
-  margin: auto;
-  position:absolute;
-  top:100px;
+  position: fixed;
+  top: 100px;
   left: 0px;
   right: 0px;
   z-index: 2;
   width: 400px;
+  margin: auto;
+  border-radius: 3px;
+  border: 2px solid #4D9D4B;
+  background-color: #FFFFFF;
 }
 
 #dialog header
 {
+  display: flex;
+  min-height: 25px;
+  padding: 10px;
   background-color: #4D9D4B;
-  display: flex;
-  height: 25px;
-  padding: 10px;
 }
 
 #dialog-close
 {
   -moz-border-start: 1px solid #25612B;
   -webkit-border-start: 1px solid #25612B;
   color: #0F660F;
   display: inline-block;
   height: 20px;
   font-size: 15px;
@@ skipping 33 matching lines @@
   margin-top: 10px;
   padding: 5px;
   width: 100%;
 }
 
 #dialog .table
 {
   width: 100%;
 }
 
-#dialog #other-language .table
-{
-  height: 200px;
+#dialog #dialog-content-language .table
+{
   overflow: auto;
 }
 
 #dialog .section:not(:first-child)
 {
   margin-top: 24px;
 }
 
 #dialog-title
 {
@@ skipping 32 matching lines @@
 
 body:not([data-dialog="custom"]) #dialog-title-custom,
 body:not([data-dialog="custom"]) #dialog-content-custom,
 body:not([data-dialog="language"]) #dialog-title-language,
 body:not([data-dialog="language"]) #dialog-content-language,
 body:not([data-dialog="predefined"]) #dialog-title-predefined,
 body:not([data-dialog="predefined"]) #dialog-content-predefined,
 body:not([data-dialog]) #dialog
 {
   display: none;
+}
+
+#dialog-content-language .dialog-content-block
+{
+  display: flex;
+  flex-direction: column;
+  height: 120px;
+}
+
+#dialog-content-language #other-language
+{
+  height: 200px;
 }
 
 #other-language .button-add
 {
   background-color: transparent;
   margin: 0px;
   padding: 0px;
   width: auto;
   -webkit-border-end: 1px solid #CDCDCD;
   -moz-border-end: 1px solid #CDCDCD;
   -webkit-padding-end: 10px;
   -moz-padding-end: 10px;
   -webkit-padding-start: 0px;
   -moz-padding-start: 0px;
 }
 
 #other-language .button-add::before
 {
   display: none;
 }
 
 #other-language .display
 {
   -webkit-margin-start: 10px;
   -moz-margin-start: 10px;
 }