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;
-
-  /* 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 tr:not(#background-items):nth-child(odd)
 {
-  background-image: url(data:image/gif;base64,R0lGODdhAQBQAIACACQkJExMTCwAAAAAAQBQAAACC4yPqcsID6OctMYCADs=);
+  background-color: #eeeeee;
 }
 
-#items tr
+#background-items ~ tr
+{
+  background-color: #fdf3fd;
+}
+
+#background-items ~ tr:nth-child(odd)
+{
+  background-color: #ede3ed;
+}
+
+body.dark #items tr:not(#background-items):nth-child(odd)
+{
+  background-color: #4c4c4c;
+}
+
+#items tr:not(#background-items)
 {
   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[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;
 }
 
 .changed, .unnamed
 {
   font-style: italic
 }
 
 .request-wrapper, .filter-wrapper
 {
   display: flex;
   height: 100%;
   flex-direction: column;
 }
 
 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;
 }