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;
+}
+
+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;
+}
+
+header
+{
+  overflow-y: scroll;
+  border-bottom: 1px solid #cdcdcd;
+  flex-shrink: 0;
+}
+
+/*
+ * We have to add a scrollbar to the header to have the columns there aligned
+ * with the table below. But we don't want the scrollbar to be visible there.
+ */
+header::-webkit-scrollbar
+{
+  visibility: hidden;
+}
+
+#items
+{
+  overflow-y: scroll;
+  flex-grow: 1;
+}
+
+#items table
+{
+  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;
+}
+
+#items tr
+{
+  height: 40px;
+}
+
+#items tr[data-state=blocked]
+{
+  color: red;
+}
+
+#items tr[data-state=whitelisted]
+{
+  color: green;
+}
+
+#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=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
+{
+  display: flex;
+  width: 100%;
+  flex-wrap: wrap;
+}
+
+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;
+  flex-grow: 1;
+}
+
+.filter, .origin
+{
+  flex-grow: 1;
+}
+
+.domain, .type, .origin,
+.changed .request-wrapper,
+.changed .filter-wrapper
+{
+  opacity: 0.6;
+}
+
+footer
+{
+  width: 100%;
+  padding: 3px;
+  border-top: 1px solid #cdcdcd;
+  flex-shrink: 0;
+}
+
+#items:not(.has-changes) + footer
+{
+  display: none;
+}
+
+#reload
+{
+  color: blue;
+  text-decoration: underline;
+  cursor: pointer;
+}