Issue 5093 - Indicate whether request in devtools panel belongs to tab

skin/devtools-panel.css

Index: skin/devtools-panel.css
===================================================================
--- a/skin/devtools-panel.css
+++ b/skin/devtools-panel.css
@@ -98,6 +98,11 @@
   visibility: hidden;
 }
 
+#background-items
+{
+  background: #c8bec8;
+}
+
 #items
 {
   overflow-y: scroll;
@@ -107,21 +112,29 @@
 #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:not(#background-items):nth-child(odd)
+{
+  background-color: #eeeeee;
+}
+
+#background-items ~ tr
+{
+  background-color: #fdf3fd;
 }
 
-body.dark #items table
+#background-items ~ tr:nth-child(odd)
 {
-  background-image: url(data:image/gif;base64,R0lGODdhAQBQAIACACQkJExMTCwAAAAAAQBQAAACC4yPqcsID6OctMYCADs=);
+  background-color: #ede3ed;
 }
 
-#items tr
+body.dark #items tr:not(#background-items):nth-child(odd)
+{
+  background-color: #4c4c4c;
+}
+
+#items tr:not(#background-items)
 {
   height: 40px;
 }
@@ -146,8 +159,7 @@
   color: #389c22;
 }
 
-#items[data-filter-state=blocked]       tr:not([data-state=blocked]),
-#items[data-filter-state=whitelisted]   tr:not([data-state=whitelisted])
+#items #background-items:last-child
 {
   display: none;
 }
@@ -174,12 +186,14 @@
   width: 100%;
 }
 
-.resource-link {
+.resource-link
+{
   text-decoration: none;
   color: #303942;
 }
 
-.resource-link:hover {
+.resource-link:hover
+{
   text-decoration: underline;
 }