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 80 matching lines @@
 
 /*
  * 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;
 }
 
-#background-items
-{
-  background: #c8bec8;
-}
-
 #items
 {
   overflow-y: scroll;
   flex-grow: 1;
 }
 
 #items table
 {
   line-height: 17px;
 }
 
-#items tr:not(#background-items):nth-child(odd)
+#items table.foreground tr.odd
 {
   background-color: #eeeeee;
 }
 
-#background-items ~ tr
+#items table.background tr
 {
   background-color: #fdf3fd;
 }
 
-#background-items ~ tr:nth-child(odd)
+/* 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;
 }
 
-body.dark #items tr:not(#background-items):nth-child(odd)
+/* missing specs for .background items */
+body.dark #items table.foreground tr.odd
 {
   background-color: #4c4c4c;
 }
 
-#items tr:not(#background-items)
+#items tr
 {
   height: 40px;
 }
 
 #items tr[data-state=blocked]
 {
   color: red;
 }
 
 body.dark #items tr[data-state=blocked]
 {
   color: #ff3a3a;
 }
 
 #items tr[data-state=whitelisted]
 {
   color: green;
 }
 
 body.dark #items tr[data-state=whitelisted]
 {
   color: #389c22;
 }
 
-#items #background-items:last-child
+#items[data-filter-state=blocked]       tr:not([data-state=blocked]),
+#items[data-filter-state=whitelisted]   tr:not([data-state=whitelisted])
 {
   display: none;
 }
 
 .changed, .unnamed
 {
   font-style: italic
 }
 
 .request-wrapper, .filter-wrapper
@@ skipping 81 matching lines @@
 
 .filtered-by-search
 {
   display: none;
 }
 
 body.dark #reload
 {
   color: #2a67e7;
 }