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%;
+  overflow: hidden;
 }
 
 body
 {
   margin: 0;
   color: #303942;
   display: flex;
   height: 100%;
   flex-direction: column;
 }
 
 table
 {
   table-layout: fixed;
   width: 100%;
   border-collapse: collapse;
 }
 
 table *
 {
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 td
 {
   padding: 3px;
   white-space: nowrap;
-}
-
-td:nth-child(2)
-{
   border-left: 1px solid #cdcdcd;
+}
+
+td:first-child
+{
+  border-left-style: none;
+}
+
+col:nth-child(2)
+{
+  width: 115px;
+}
+
+col:nth-child(3)
+{
+  width: 50%;
 }
 
 header
 {
   overflow-y: scroll;
   border-bottom: 1px solid #cdcdcd;
   flex-shrink: 0;
 }
 
 /*
@@ skipping 39 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
 }
 
-.request-wrapper
+.request-wrapper, .filter-wrapper
 {
   display: flex;
-  width: 100%;
-  flex-wrap: wrap;
+  height: 100%;
+  flex-direction: column;
 }
 
 tr:not(:hover) .action
 {
   display: none;
 }
 
 .url
 {
   width: 100%;
 }
 
 .resourceLink
 {
   cursor: pointer;
 }
 
 .resourceLink:hover {
   text-decoration: underline;
-}
-
-.domain
-{
-  flex: 1 1px;
-}
-
-.type
-{
-  flex: 0 105px;
 }
 
 .action-wrapper
 {
   display: flex;
   width: 100%;
 }
 
 .action
 {
   background: #555;
   color: white;
   font-style: normal;
   border-radius: 7px;
   padding: 2px 6px;
   margin: auto;
   margin-left: 5px;
   cursor: pointer;
   flex-shrink: 0;
 }
 
-.filter-wrapper
-{
-  display: flex;
-  height: 100%;
-  flex-direction: column;
+.filter-wrapper, .filter, .origin, .domain
+{
   flex-grow: 1;
 }
 
-.filter, .origin
-{
-  flex-grow: 1;
-}
-
-.domain, .type, .origin,
+.domain, .origin,
 .changed .request-wrapper,
-.changed .filter-wrapper
+.changed .filter-wrapper,
+.changed .type
 {
   opacity: 0.6;
 }
 
 footer
 {
   width: 100%;
-  padding: 3px;
+  height: 23px;
+  margin-bottom: -23px;
+  padding: 4px 3px;
   border-top: 1px solid #cdcdcd;
   flex-shrink: 0;
 }
 
-#items:not(.has-changes) + footer
-{
-  display: none;
+.has-changes + footer
+{
+  margin-bottom: 0;
+  transition: margin-bottom 0.5s;
 }
 
 #reload
 {
   color: blue;
   text-decoration: underline;
   cursor: pointer;
 }