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
@@ -102,28 +102,52 @@
 {
   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 table.foreground tr.odd
+{
+  background-color: #eeeeee;
+}
+
+#items table.background tr
+{
+  background-color: #fdf3fd;
 }
 
-body.dark #items table
+/* it's very convenient to have a first row
+   with a simple convention that when no other
+   rows are available, this automatically hides */
+#items table.background tr:only-child
+{
+  display: none;
+}
+
+/* it's also straight forward to style / select */
+#items table.background tr:first-child
 {
-  background-image: url(data:image/gif;base64,R0lGODdhAQBQAIACACQkJExMTCwAAAAAAQBQAAACC4yPqcsID6OctMYCADs=);
+  height: auto;
+  background-color: #c8bec8;
+}
+
+#items table.background tr.odd
+{
+  background-color: #ede3ed;
+}
+
+/* missing specs for .background items */
+body.dark #items table.foreground tr.odd
+{
+  background-color: #4c4c4c;
 }
 
 #items tr
 {
   height: 40px;
 }
 
 #items tr[data-state=blocked]
@@ -169,22 +193,24 @@
   display: none;
 }
 
 .url
 {
   width: 100%;
 }
 
-.resource-link {
+.resource-link
+{
   text-decoration: none;
   color: #303942;
 }
 
-.resource-link:hover {
+.resource-link:hover
+{
   text-decoration: underline;
 }
 
 .action-wrapper
 {
   display: flex;
   width: 100%;
 }