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

skin/devtools-panel.css

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-present eyeo GmbH
  *
  * Adblock Plus is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License version 3 as
  * published by the Free Software Foundation.
  *
  * Adblock Plus is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
@@ skipping 89 matching lines @@
 
 #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;
 }
 
-body.dark #items table
+#items table.foreground tr.odd
 {
-  background-image: url(data:image/gif;base64,R0lGODdhAQBQAIACACQkJExMTCwAAAAAAQBQAAACC4yPqcsID6OctMYCADs=);
+  background-color: #eeeeee;
+}
+
+#items table.background tr
+{
+  background-color: #fdf3fd;
+}
+
+/* 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
+{
+  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]
 {
   color: red;
@@ skipping 35 matching lines @@
 tr:not(:hover) .action
 {
   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%;
 }
 
 .action
@@ skipping 47 matching lines @@
 
 .filtered-by-search
 {
   display: none;
 }
 
 body.dark #reload
 {
   color: #2a67e7;
 }