Bug 1402460 - Let row selection styles have more precedence than row hovering
MozReview-Commit-ID: G5gY17soxxP
--- a/devtools/client/shared/components/tree/tree-view.css
+++ b/devtools/client/shared/components/tree/tree-view.css
@@ -63,26 +63,25 @@
/* No padding if there is actually no label */
.treeTable .treeLabel:empty {
padding-inline-start: 0;
}
.treeTable .treeRow.hasChildren > .treeLabelCell > .treeLabel:hover {
cursor: pointer;
- color: var(--tree-link-color);
text-decoration: underline;
}
.treeTable .treeRow.selected {
background-color: var(--theme-selection-background);
}
-.treeTable .treeRow.selected:not(:hover) *,
-.treeTable .treeRow.selected:not(:hover) .treeLabelCell::after {
+.treeTable .treeRow.selected *,
+.treeTable .treeRow.selected .treeLabelCell::after {
color: var(--theme-selection-color);
}
/* Filtering */
.treeTable .treeRow.hidden {
display: none;
}
@@ -175,30 +174,31 @@
radial-gradient(1px 60% at right,
rgba(0, 0, 0, 0.8) 0%,
transparent 80%);
}
/******************************************************************************/
/* Themes */
-.theme-light .treeTable .treeRow:hover,
-.theme-dark .treeTable .treeRow:hover {
+/* :not(.selected) is used because row selection styles should have
+ more precedence than row hovering. */
+.theme-light .treeTable .treeRow:not(.selected):hover,
+.theme-dark .treeTable .treeRow:not(.selected):hover {
background-color: var(--theme-selection-background-hover) !important;
}
-.theme-firebug .treeTable .treeRow:hover {
+.theme-firebug .treeTable .treeRow:not(.selected):hover {
background-color: var(--theme-body-background);
}
-.theme-light .treeTable .treeLabel,
-.theme-dark .treeTable .treeLabel {
+.theme-light .treeTable,
+.theme-dark .treeTable {
color: var(--theme-highlight-blue);
}
-.theme-light .treeTable .treeRow.hasChildren > .treeLabelCell > .treeLabel:hover,
-.theme-dark .treeTable .treeRow.hasChildren > .treeLabelCell > .treeLabel:hover {
- color: var(--theme-highlight-blue);
+.theme-firebug .treeTable {
+ color: var(--theme-body-color);
}
-.theme-firebug .treeTable .treeLabel {
- color: var(--theme-body-color);
+.theme-firebug .treeTable .treeRow.hasChildren:not(.selected) > .treeLabelCell > .treeLabel:hover {
+ color: var(--tree-link-color);
}