Issue 5374 - Add filter list popup

skin/new-options.css

Index: skin/new-options.css
===================================================================
--- a/skin/new-options.css
+++ b/skin/new-options.css
@@ -460,7 +460,7 @@
 #content-help a::before,
 #dialog-close::before,
 #custom-filters-add button::after,
-#dialog-body button::before,
+#dialog-body button:not([role="checkbox"])::before,
 .date::before,
 .time::before,
 #all-filter-lists .arrow,
@@ -529,7 +529,7 @@
 }
 
 #content-help a::before,
-#dialog-body button::before
+#dialog-body button:not([role="checkbox"])::before
 {
   background-position: 0px -42px;
   content: "";
@@ -1175,6 +1175,12 @@
   margin: 4px 24px;
 }
 
+#recommended-general-ads-block

[Thomas Greiner, 2017/07/25 10:30:54]

Detail: That's a very specific selector for a pretty generic scrollable element.
So what about turning this into a class for making an element scrollable?

[saroyanm, 2017/07/28 17:54:55]

I'll update that.

+{
+  max-height: 400px;

[Thomas Greiner, 2017/07/25 10:30:54]

Detail: I couldn't find this number anywhere in the spec. Where does it come
from?

[saroyanm, 2017/07/28 17:54:54]

CSS will be updated completely in separate review according to styleguide.
This styles are only for visually make the list scrollable.

+  overflow: auto;
+}
+
 #dialog h3,
 #dialog label
 {
@@ -1221,7 +1227,7 @@
   padding: 12px 0px;
 }
 
-#dialog-body button
+#dialog-body button:not([role="checkbox"])
 {
   background-color: #F5F5F5;
   border: none;
@@ -1242,6 +1248,8 @@
   word-wrap: break-word;
 }
 
+body:not([data-dialog="recommended"]) #dialog-title-recommended,
+body:not([data-dialog="recommended"]) #dialog-content-recommended,
 body:not([data-dialog="custom"]) #dialog-title-custom,
 body:not([data-dialog="custom"]) #dialog-content-custom,
 body:not([data-dialog="language"]) #dialog-title-language,