second and final part of syncing LCARStrek with Firefox 49/50 devtools theme changes

[themes.git] / LCARStrek / devtools / rules.css

diff --git a/LCARStrek/devtools/rules.css b/LCARStrek/devtools/rules.css
index 84a65baedfda3d25498433c875d47226e0d07814..08f320a274434f371f139c004dae3783fd111381 100644 (file)
--- a/LCARStrek/devtools/rules.css
+++ b/LCARStrek/devtools/rules.css
@@ -7,7 +7,6 @@
 .theme-dark,
 .theme-firebug {
   --rule-highlight-background-color: #402000;
-  --rule-filter-icon: url(images/magnifying-glass.png);
 }
 
 /* Rule View Tabpanel */
@@ -22,10 +21,7 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  /* Bug 1243598 - Reduce the container height by the tab height to make room
-     for the tabs above. */
-  height: calc(100% - 24px);
-  position: absolute;
+  height: 100%;
 }
 
 /* Rule View Toolbar */
@@ -38,7 +34,6 @@
 
 #ruleview-toolbar {
   display: flex;
-  height: 23px;
 }
 
 #ruleview-toolbar > .devtools-searchbox:first-child {
@@ -73,6 +68,17 @@
   -moz-user-select: text;
   overflow: auto;
   flex: auto;
+  height: 100%;
+}
+
+/* This extra wrapper only serves as a way to get the content of the view focusable.
+   So that when the user reaches it either via keyboard or mouse, we know that the view
+   is focused and therefore can handle shortcuts.
+   However, for accessibility reasons, tabindex is set to -1 to avoid having to tab
+   through it, and the outline is hidden. */
+#ruleview-container-focusable {
+  height: 100%;
+  outline: none;
 }
 
 #ruleview-container.non-interactive {
@@ -188,8 +194,7 @@
   border-left: solid 10px;
 }
 
-.ruleview-rule,
-#noResults {
+.ruleview-rule {
   padding: 2px 4px;
 }
 
@@ -202,6 +207,10 @@
   background: var(--theme-tab-toolbar-background);
 }
 
+.ruleview-rule[unmatched=true] {
+  opacity: 0.5;
+}
+
 .ruleview-rule[uneditable=true] :focus {
   outline: none;
 }
@@ -253,11 +262,6 @@
   color: #A09090;
 }
 
-#noResults {
-/*  font: message-box;*/
-  color: #A09090;
-}
-
 .ruleview-rule + .ruleview-rule {
   border-top-width: 1px;
   border-top-style: dotted;
@@ -283,7 +287,7 @@
 }
 
 .ruleview-overridden-rule-filter {
-  background-image: var(--rule-filter-icon);
+  background-image: url(images/filter.svg#filterinput);
   background-size: 11px 11px;
   margin-inline-start: 5px;
   display: inline-block;
@@ -438,8 +442,9 @@
   cursor: text;
 }
 
-.ruleview-selector-separator, .ruleview-selector-unmatched {
-  color: #888;
+.ruleview-selector-separator,
+.ruleview-selector-unmatched {
+  color: var(--theme-comment);
 }
 
 .ruleview-selector-matched > .ruleview-selector-attribute {