Issue 5316 - Adds dynamic filter types to devtools panel

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%;
@@ skipping 112 matching lines @@
 {
   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]),

[Thomas Greiner, 2017/08/22 11:21:47]

This is an invalid selector due to the trailing comma.

[Jon Sonesen, 2017/08/24 11:29:06]

Acknowledged.

-#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=WEBRTC]         tr:not([data-type=WEBRTC]),
-#items[data-filter-type=OTHER]          tr:not([data-type=OTHER])

[Thomas Greiner, 2017/08/22 11:21:47]

Removing this code without an alternative solution will break the ability to
filter requests by filter type.

[Jon Sonesen, 2017/08/24 11:29:06]

Is it better to just leave it then and add all potential types?

[Thomas Greiner, 2017/08/25 17:11:35]

Since the ticket also refers to this CSS file I'd recommend that we should also
remove the hardcoded filter types from here.

One way to achieve this would be to add a `<style>` element that we populate
with the according hiding rules at runtime.

At some point in the future we should be able to simply use a reference
combinator for that instead (see
https://www.w3.org/TR/selectors4/#idref-combinators) but for now we have to go
with a less elegant solution I'm afraid.

 {
   display: none;
 }
 
 .changed, .unnamed
 {
   font-style: italic
 }
 
 .request-wrapper, .filter-wrapper
@@ skipping 79 matching lines @@
 
 .filtered-by-search
 {
   display: none;
 }
 
 body.dark #reload
 {
   color: #2a67e7;
 }