Issue 4136 - Support Chrome's dark devtools theme

skin/devtools-panel.css

 *
 {
   font-family: 'Lucida Grande', 'Segoe UI', Ubuntu, Tahoma, Arial, sans-serif;
   font-size: 11px;
   box-sizing: border-box;
 }
 
 html
 {
   height: 100%;
   overflow: hidden;
 }
 
 body
 {
   margin: 0;
   color: #303942;
   display: flex;
   height: 100%;
   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;
   width: 100%;
   border-collapse: collapse;
 }
 
 table *
 {
   overflow: hidden;
@@ skipping 48 matching lines @@
 {
   line-height: 17px;
 
   /* This background image gives every other row a gray background.
    * This is simlar to "tr:nth-child(odd) background-color: #eee;".
    * However, we can't do it that way, since some rows might be hidden.
    */
   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
 {
   height: 40px;
 }
 
 #items tr[data-state=blocked]
 {
   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]),
 #items[data-filter-type=IMAGE]          tr:not([data-type=IMAGE]),
 #items[data-filter-type=STYLESHEET]     tr:not([data-type=STYLESHEET]),
 #items[data-filter-type=SCRIPT]         tr:not([data-type=SCRIPT]),
 #items[data-filter-type=OBJECT]         tr:not([data-type=OBJECT]),
 #items[data-filter-type=XMLHTTPREQUEST] tr:not([data-type=XMLHTTPREQUEST]),
 #items[data-filter-type=FONT]           tr:not([data-type=FONT]),
 #items[data-filter-type=PING]           tr:not([data-type=PING]),
@@ skipping 82 matching lines @@
   margin-bottom: 0;
   transition: margin-bottom 0.5s;
 }
 
 #reload
 {
   color: blue;
   text-decoration: underline;
   cursor: pointer;
 }
+
+body.dark #reload
+{
+  color: #2a67e7;
+}