Bug 1402460 - Let row selection styles have more precedence than row hovering r=Honza
authorOriol Brufau <oriol-bugzilla@hotmail.com>
Fri, 29 Sep 2017 23:24:16 +0200
changeset 383969 de65572822c64f97dece3ea4451d57dc98b4a839
parent 383968 b4e07901ada428628a3df8681ef841b184816b1c
child 383970 725654758702332ebde2d2b74a8b5bd14850218f
push id32617
push userkwierso@gmail.com
push dateMon, 02 Oct 2017 23:02:55 +0000
treeherdermozilla-central@8c6b4fd1d769 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersHonza
bugs1402460
milestone58.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1402460 - Let row selection styles have more precedence than row hovering r=Honza MozReview-Commit-ID: G5gY17soxxP
devtools/client/shared/components/tree/TreeView.css
--- a/devtools/client/shared/components/tree/TreeView.css
+++ b/devtools/client/shared/components/tree/TreeView.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);
 }