Issue 154 - Added UI for devtools panel on Chrome

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 94 matching lines @@
 }
 
 #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]),
 #items[data-filter-type=POPUP]          tr:not([data-type=POPUP]),
 #items[data-filter-type=ELEMHIDE]       tr:not([data-type=ELEMHIDE]),
 #items[data-filter-type=OTHER]          tr:not([data-type=OTHER])
 {
   display: none;
 }
 
 .changed, .unnamed
 {
   font-style: italic
@@ skipping 42 matching lines @@
   margin-left: 5px;
   cursor: pointer;
   flex-shrink: 0;
 }
 
 .filter-wrapper, .filter, .origin, .domain
 {
   flex-grow: 1;
 }
 
-.domain, .origin, .changed
+.domain, .origin,
+.changed .request-wrapper,
+.changed .filter-wrapper,
+.changed .type
 {
   opacity: 0.6;
 }
 
 footer
 {
   width: 100%;
   height: 23px;
   margin-bottom: -23px;
   padding: 4px 3px;
   border-top: 1px solid #cdcdcd;
   flex-shrink: 0;
 }
 
 .has-changes + footer
 {
   margin-bottom: 0;
   transition: margin-bottom 0.5s;
 }
 
 #reload
 {
   color: blue;
   text-decoration: underline;
   cursor: pointer;
 }