Issue 4136 - Support Chrome's dark devtools theme

skin/devtools-panel.css

Index: skin/devtools-panel.css
diff --git a/skin/devtools-panel.css b/skin/devtools-panel.css
index 1ece4e109741b1f788fca0babf282a819a7864cf..563088b6764f49cf56e3ae5cbf5ddb0119859f89 100644
--- a/skin/devtools-panel.css
+++ b/skin/devtools-panel.css
@@ -20,6 +20,11 @@ body
   flex-direction: column;
 }

[Thomas Greiner, 2017/01/05 13:40:26]

In https://issues.adblockplus.org/ticket/4136#comment:5 I mentioned that our
panel is unusable in prior versions (as seen in the screenshot you attached
afterwards) so it'd be great if we could do something about it.

e.g.
body.default
{
  background-color: #ffffff;
}

[kzar, 2017/01/05 16:28:15]

Good idea, done.

 
+body.dark
+{
+  color: #ffffff;
+}
+
 table
 {
   table-layout: fixed;
@@ -88,6 +93,11 @@ header::-webkit-scrollbar
   background-image: url(data:image/gif;base64,R0lGODdhAQBQAIABAO7u7v///ywAAAAAAQBQAAACC4SPqcsYD6OctMYCADs=);
   background-repeat: repeat;
 }
+body.dark #items table

[Thomas Greiner, 2017/01/05 13:40:26]

Coding style: "Always put a blank line (two line breaks) between rules."

[kzar, 2017/01/05 16:28:15]

Done.

+{
+  background-image: url(data:image/gif;base64,R0lGODdhAQBQAIACACQkJExMTCwAAAAAAQBQAAACC4yPqcsID6OctMYCADs=);
+}
+
 
 #items tr
 {
@@ -99,11 +109,21 @@ header::-webkit-scrollbar
   color: red;
 }
 
+body.dark #items tr[data-state=blocked]
+{
+  color: #ff3a3a;
+}
+
 #items tr[data-state=whitelisted]
 {
   color: green;
 }
 
+body.dark #items tr[data-state=whitelisted]
+{
+  color: #389c22;
+}
+
 #items[data-filter-state=blocked]       tr:not([data-state=blocked]),
 #items[data-filter-state=whitelisted]   tr:not([data-state=whitelisted]),
 #items[data-filter-type=SUBDOCUMENT]    tr:not([data-type=SUBDOCUMENT]),
@@ -206,3 +226,8 @@ footer
   text-decoration: underline;
   cursor: pointer;
 }
+
+body.dark #reload
+{
+  color: #2a67e7;
+}