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;
+}
+
+body.default
+{
+  background-color: #ffffff;
 }

[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%;
@@ skipping 54 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;
 }
@@ skipping 18 matching lines @@
 #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]),
 #items[data-filter-type=POPUP]          tr:not([data-type=POPUP]),
 #items[data-filter-type=ELEMHIDE]       tr:not([data-type=ELEMHIDE]),
+#items[data-filter-type=WEBSOCKET]      tr:not([data-type=WEBSOCKET]),
 #items[data-filter-type=OTHER]          tr:not([data-type=OTHER])
 {
   display: none;
 }
 
 .changed, .unnamed
 {
   font-style: italic
 }
 
@@ skipping 71 matching lines @@
   transition: margin-bottom 0.5s;
 }
 
 #reload
 {
   color: blue;
   text-decoration: underline;
   cursor: pointer;
 }
 
+.filtered-by-search
+{
+  display: none;
+}
+
 body.dark #reload
 {
   color: #2a67e7;
 }