update to 42.0b1

1 files changed, 52 insertions, 92 deletions

diff --git a/arc-firefox-theme/chrome/browser/devtools/widgets.css b/arc-firefox-theme/chrome/browser/devtools/widgets.css
index 17a96ad..18a6757 100644
--- a/arc-firefox-theme/chrome/browser/devtools/widgets.css
+++ b/arc-firefox-theme/chrome/browser/devtools/widgets.css
@@ -7,6 +7,14 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+.theme-dark {
+  --table-splitter-color: rgba(255,255,255,0.15);
+  --table-zebra-background: rgba(255,255,255,0.05);
+}
+.theme-light {
+  --table-splitter-color: rgba(0,0,0,0.15);
+  --table-zebra-background: rgba(0,0,0,0.05);
+}
 
 /* Generic pane helpers */
 
@@ -1199,43 +1207,16 @@
   overflow: auto;
 }
 
-.theme-light .table-widget-body {
-  background: var(--theme-sidebar-background);
-}
-
-.theme-dark .table-widget-body,
-.theme-dark .table-widget-empty-text {
-  background-color: var(--theme-toolbar-background);
-}
-
-.theme-dark .table-widget-body:-moz-locale-dir(ltr) {
-  box-shadow: inset -1px 0 0 #000;
-}
-
-.theme-dark .table-widget-body:-moz-locale-dir(rtl) {
-  box-shadow: inset 1px 0 0 #000;
-}
-
-.table-widget-body:-moz-locale-dir(ltr) {
-  box-shadow: inset -1px 0 0 #aaa;
-}
-
-.table-widget-body:-moz-locale-dir(rtl) {
-  box-shadow: inset 1px 0 0 #aaa;
+.table-widget-body,
+.table-widget-empty-text {
+  background-color: var(--theme-body-background);
 }
 
 /* Column Headers */
 
-.theme-dark .table-widget-column-header,
-.theme-dark .table-widget-cell {
-  -moz-border-end: 1px solid rgba(0,0,0,0.2);
-  box-shadow: inset 1px 0 0 rgba(128,128,128,0.15);
-}
-
-.theme-light .table-widget-column-header,
-.theme-light .table-widget-cell {
-  -moz-border-end: 1px solid rgba(128,128,128,0.25);
-  box-shadow: inset 1px 0 0 transparent;
+.table-widget-column-header,
+.table-widget-cell {
+  -moz-border-end: 1px solid var(--table-splitter-color) !important;
 }
 
 /* Table widget column header colors are taken from netmonitor.inc.css to match
@@ -1246,10 +1227,8 @@
   background: rgba(0,0,0,0);
   position: sticky;
   top: 0;
-  min-height: 32px;
   width: 100%;
-  border: none;
-  padding: 8px 0 0 !important;
+  padding: 5px 0 0 !important;
   color: inherit;
   text-align: center;
   font-weight: inherit !important;
@@ -1257,27 +1236,29 @@
 }
 
 .table-widget-column-header:hover {
-  background: rgba(0,0,0,0.10);
+  background-image: linear-gradient(rgba(0,0,0,0.10), rgba(0,0,0,0.10));
 }
 
 .table-widget-column-header:hover:active {
-  background: rgba(0,0,0,0.25);
+  background-image: linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.25));
 }
 
 .table-widget-column-header:not(:active)[sorted] {
-  background: rgba(0,0,0,0.15);
+  background-image: linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.15));
 }
 
 .table-widget-column-header:not(:active)[sorted=ascending] {
-  background-image: radial-gradient(farthest-side at center top, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3));
-  background-size: 100% 1px;
-  background-repeat: no-repeat;
+  background-image: radial-gradient(farthest-side at center top, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3)),
+                    linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.15));
+  background-size: 100% 1px, auto;
+  background-repeat: no-repeat, repeat;
 }
 
 .table-widget-column-header:not(:active)[sorted=descending] {
-  background-image: radial-gradient(farthest-side at center bottom, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3));
-  background-size: 100% 1px;
-  background-repeat: no-repeat;
+  background-image: radial-gradient(farthest-side at center bottom, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3)),
+                    linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.15));
+  background-size: 100% 1px, auto;
+  background-repeat: no-repeat, repeat;
   background-position: bottom;
 }
 
@@ -1285,44 +1266,22 @@
 
 .table-widget-cell {
   width: 100%;
-  margin: -1px 0 !important;
   padding: 3px 4px;
   background-clip: padding-box;
   min-width: 100px;
   -moz-user-focus: normal;
-}
-
-.theme-dark .table-widget-cell {
-  border-top: 1px solid rgba(0,0,0,0.2);
-  border-bottom: 1px solid rgba(128,128,128,0.15);
-  color: var(--theme-selection-color);
-}
-
-.theme-dark:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected),
-.theme-dark .table-widget-cell:not(.theme-selected)[odd] {
-  background: rgba(255,255,255,0.05);
-}
-
-.theme-dark .table-widget-cell:last-of-type {
-  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2);
-}
-
-.theme-light .table-widget-cell {
-  border-top: 1px solid rgba(128,128,128,0.15);
+  margin-bottom: -1px !important;
   border-bottom: 1px solid transparent;
-}
-
-.theme-light .table-widget-cell:not(.theme-selected) {
   color: var(--theme-body-color);
 }
 
-.theme-light:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected),
-.theme-light .table-widget-cell:not(.theme-selected)[odd] {
-  background: rgba(128,128,128,0.05);
+.table-widget-cell:last-child {
+  border-bottom: 1px solid var(--table-splitter-color);
 }
 
-.theme-light .table-widget-cell:last-of-type {
-  box-shadow: inset 0 -1px 0 rgba(128,128,128,0.15);
+:root:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected),
+.table-widget-cell:not(.theme-selected)[odd] {
+  background: var(--table-zebra-background);
 }
 
 .table-widget-cell.flash-out {
@@ -1344,10 +1303,6 @@
   margin-top: -20px !important;
 }
 
-.theme-light .table-widget-empty-text {
-  background: #F7F7F7; /* Background-Sidebar */
-}
-
 .table-widget-body:empty + .table-widget-empty-text:not([value=""]),
 .table-widget-body[empty] + .table-widget-empty-text:not([value=""]) {
   display: block;
@@ -1399,11 +1354,11 @@
 }
 
 .tree-widget-item[level="1"] {
-  font-weight: 800;
+  font-weight: 700;
 }
 
 /* Twisties */
-.tree-widget-item:before {
+.tree-widget-item::before {
   content: "";
   width: 14px;
   height: 14px;
@@ -1416,24 +1371,24 @@
   background-position: -28px -14px;
 }
 
-.tree-widget-item:-moz-locale-dir(rtl):before {
+.tree-widget-item:-moz-locale-dir(rtl)::before {
   float: right;
   transform: scaleX(-1);
 }
 
-.theme-light .tree-widget-item:before {
+.theme-light .tree-widget-item:not(.theme-selected)::before {
   background-position: 0 -14px;
 }
 
-.tree-widget-item[empty]:before {
+.tree-widget-item[empty]::before {
   background: transparent;
 }
 
-.tree-widget-item[expanded]:before {
+.tree-widget-item[expanded]::before {
   background-position: -42px -14px;
 }
 
-.theme-light .tree-widget-item[expanded]:before {
+.theme-light .tree-widget-item:not(.theme-selected)[expanded]:before {
   background-position: -14px -14px;
 }
 
@@ -1511,7 +1466,7 @@
 
 /* Custom icons for certain tree items indicating the type of the item */
 
-.tree-widget-item[type]:after {
+.tree-widget-item[type]::after {
   content: "";
   float: left;
   width: 16px;
@@ -1519,31 +1474,36 @@
   -moz-margin-end: 4px;
   background-repeat: no-repeat;
   background-size: 20px auto;
-  filter: url('filters.svg#invert');
   background-position: 0 0;
   background-size: auto 20px;
+  opacity: 0.75;
+}
+
+.tree-widget-item.theme-selected[type]::after {
+  opacity: 1;
 }
 
-.tree-widget-item:-moz-locale-dir(rtl):after {
+.tree-widget-item:-moz-locale-dir(rtl)::after {
   float: right;
 }
 
-.theme-dark .tree-widget-item[type]:after {
-  filter: url('filters.svg#invert-white');
+.theme-light .tree-widget-item.theme-selected[type]::after,
+.theme-dark .tree-widget-item[type]::after {
+  filter: invert(1);
 }
 
-.tree-widget-item[type="dir"]:after {
+.tree-widget-item[type="dir"]::after {
   background-image: url(chrome://browser/skin/devtools/filetype-dir-close.svg);
   background-position: 2px 0;
   background-size: auto 16px;
   width: 20px;
 }
 
-.tree-widget-item[type="dir"][expanded]:not([empty]):after {
+.tree-widget-item[type="dir"][expanded]:not([empty])::after {
   background-image: url(chrome://browser/skin/devtools/filetype-dir-open.svg);
 }
 
-.tree-widget-item[type="url"]:after {
+.tree-widget-item[type="url"]::after {
   background-image: url(chrome://browser/skin/devtools/filetype-globe.svg);
   background-size: auto 18px;
   width: 18px;