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,
-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),

[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.

+  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
 {
   border-bottom: 1px solid #CDCDCD;
   border-top: 1px solid #CDCDCD;
 }
 
-.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;
-}
-
-input[disabled="true"]::before
-{
+button[disabled="true"]
+{
+  border-radius: 2px;
   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;
@@ 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;
 }
 
-#filter-lists .table
+#all-filter-lists .table
 {
   display: inline-block;
 }
 
-#filter-lists .table li
+#all-filter-lists .table li
 {
   padding-left: 16px;
   padding-right: 16px;
 }
 
-#filter-lists .table li > span:first-of-type
-{
-  display: inline-block;
+#all-filter-lists .table li > div
+{
+  display: flex;
   width: 330px;
 }
 
 .table-header
 {
   display: flex;
 }
     
-.table-header h3
+#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;
 }
 
-#filter-lists .table li span.display
-{
-  cursor: pointer;
-}
-
-#filter-lists .table .head span:first-child
+#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
+#all-filter-lists .controls
 {
   padding-top: 0px;
   border-top: none;
 }
 
-#filter-lists .controls button
+#all-filter-lists .controls button
 {
   margin-top: 14px;
 }
 
-#filter-lists .arrow
-{
+#all-filter-lists .arrow
+{
+  position: relative;
+  margin: auto 6px;
   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
+  cursor: pointer;
+}
+
+#all-filter-lists .table li:last-of-type a
 {
   color: #3A7BA6;
   text-decoration: none;
-}
-
-#filter-lists .table li:last-of-type span:last-child
+  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;
   height: 12px;
   width: 12px;
   background-position: -7px -49px;
@@ skipping 151 matching lines @@
   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;
@@ skipping 47 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.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.

+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.container
+div.context-menu
 {
   position: absolute;
-  top: 21px;
+  top: 16px;
   z-index: 1;
   visibility: hidden;
 }
 
-li.context div.container
-{
-  visibility: visible;
-}
-
-div.container::before
+div.context-menu::before
 {
   left: -4px;
 }
 
-html[dir="rtl"] div.container::before
+html[dir="rtl"] div.context-menu::before
 {
   left: inherit;
   right: -4px;
 }
 
-.context-menu div.container > div
+div.context-menu .content
 {
   position: relative;
   left: calc(-50% + 2px);
+  border-radius: 3px;
+  padding: 4px 10px;
   background-color: rgba(45, 45, 45, 0.95);
-  padding: 0px 10px;
-  border-radius: 3px;
-}
-
-html[dir="rtl"] div.container > div
+  cursor: default;
+}
+
+html[dir="rtl"] div.context-menu .content
 {
   left: inherit;
   right: -50%;
 }
 
-div.container > div a::before
+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.container > 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;
   cursor: pointer;
   vertical-align: middle;
 }
 
-div.container > div a:before
+div.context-menu > div a::before
 {
   vertical-align: middle;
   height: 16px;
   width: 16px;
 }
 
-div.container > div a:last-child
+div.context-menu > div a:last-child
 {
   border: none;
 }
 
-div.container [data-action="update-now"]::before
+.context-menu .update-subscription::before
 {
   background-position: -38px -31px;
 }
 
-div.container [data-action="website"]::before
+.context-menu .website::before
 {
   background-position: -33px -47px;
 }
 
-div.container [data-action="source"]::before
+.context-menu .source::before
 {
   background-position: -53px -34px;
 }
 
-div.container [data-action="delete"]::before
+.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;
 }
@@ skipping 69 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;
 }