Bug 1402460 - Let row selection styles have more precedence than row hovering draft
authorOriol Brufau <oriol-bugzilla@hotmail.com>
Fri, 29 Sep 2017 23:24:16 +0200
changeset 672878 cf9f0f13cdbc36d900f4812305ed0611075fa397
parent 671089 35fbf14b96a633c3f66ea13c1a163a3f3a4219b9
child 733954 7021707fda860e665c3340f317f813d365b671cc
push id82408
push userbmo:oriol-bugzilla@hotmail.com
push dateFri, 29 Sep 2017 21:24:48 +0000
bugs1402460
milestone58.0a1
Bug 1402460 - Let row selection styles have more precedence than row hovering MozReview-Commit-ID: G5gY17soxxP
devtools/client/shared/components/tree/tree-view.css
--- 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);
 }