Bug 1479365 - Invert selection colors in selected rows; r=Honza,yzen,nchevobbe
authorFlorens Verschelde <florens@fvsch.com>
Wed, 15 May 2019 07:36:04 +0000
changeset 532730 9cca1de0aa3969e0f3e5e05a99455a343ab9e5a5
parent 532729 b1295df1cba04b2fe97a9633420457a63d93856f
child 532731 3b3fc85fd247f3beb4a446a3b80da22e3cf0e703
push id11272
push userapavel@mozilla.com
push dateThu, 16 May 2019 15:28:22 +0000
treeherdermozilla-beta@2265bfc5920d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersHonza, yzen, nchevobbe
bugs1479365
milestone68.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 1479365 - Invert selection colors in selected rows; r=Honza,yzen,nchevobbe Differential Revision: https://phabricator.services.mozilla.com/D30794
devtools/client/accessibility/accessibility.css
devtools/client/debugger/dist/vendors.css
devtools/client/debugger/packages/devtools-components/src/tree.css
devtools/client/debugger/src/components/shared/ManagedTree.css
devtools/client/shared/components/reps/reps.css
devtools/client/shared/components/tree/TreeView.css
devtools/client/themes/common.css
devtools/client/themes/dark-theme.css
devtools/client/themes/light-theme.css
--- a/devtools/client/accessibility/accessibility.css
+++ b/devtools/client/accessibility/accessibility.css
@@ -523,16 +523,23 @@ body {
   background-color: var(--theme-selection-background);
 }
 
 .accessible .tree:focus .node.focused *,
 .accessible .tree .tree-node-active .node.focused * {
   color: var(--theme-selection-color);
 }
 
+/* Invert text selection color in selected rows */
+.accessible .tree:focus .node.focused ::selection,
+.accessible .tree .tree-node-active .node.focused ::selection {
+  color: var(--theme-selection-background);
+  background-color: var(--theme-selection-color);
+}
+
 .accessible .tree:focus .node.focused .open-inspector,
 .accessible .tree .tree-node-active .node.focused .open-inspector {
   background-color: var(--grey-30);
 }
 
 .accessible .tree:focus .node.focused:hover .open-inspector,
 .accessible .tree .tree-node-active .node.focused:hover .open-inspector {
   background-color: var(--theme-selection-color);
--- a/devtools/client/debugger/dist/vendors.css
+++ b/devtools/client/debugger/dist/vendors.css
@@ -75,18 +75,24 @@
   transform: rotate(-90deg);
 }
 
 html[dir="rtl"] .tree-node button:not(.expanded) {
   transform: rotate(90deg);
 }
 
 .tree .tree-node.focused {
-  color: white;
-  background-color: var(--theme-selection-background, #0a84ff);
+  color: var(--theme-selection-color);
+  background-color: var(--theme-selection-background);
+}
+
+/* Invert text selection color in selected rows */
+.tree .tree-node.focused ::selection {
+  color: var(--theme-selection-background);
+  background-color: var(--theme-selection-color);
 }
 
 .tree-node.focused button.arrow {
   background-color: currentColor;
 }
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * 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/. */
--- a/devtools/client/debugger/packages/devtools-components/src/tree.css
+++ b/devtools/client/debugger/packages/devtools-components/src/tree.css
@@ -75,15 +75,21 @@
   transform: rotate(-90deg);
 }
 
 html[dir="rtl"] .tree-node button:not(.expanded) {
   transform: rotate(90deg);
 }
 
 .tree .tree-node.focused {
-  color: white;
-  background-color: var(--theme-selection-background, #0a84ff);
+  color: var(--theme-selection-color);
+  background-color: var(--theme-selection-background);
+}
+
+/* Invert text selection color in selected rows */
+.tree .tree-node.focused ::selection {
+  color: var(--theme-selection-background);
+  background-color: var(--theme-selection-color);
 }
 
 .tree-node.focused button.arrow {
   background-color: currentColor;
 }
--- a/devtools/client/debugger/src/components/shared/ManagedTree.css
+++ b/devtools/client/debugger/src/components/shared/ManagedTree.css
@@ -25,17 +25,17 @@
 }
 
 .managed-tree .tree .node {
   padding: 2px 3px 2px 3px;
   position: relative;
 }
 
 .managed-tree .tree .node.focused {
-  color: white;
+  color: var(--theme-selection-color);
   background-color: var(--theme-selection-background);
 }
 
 html:not([dir="rtl"]) .managed-tree .tree .node > div {
   margin-left: 10px;
 }
 
 html[dir="rtl"] .managed-tree .tree .node > div {
--- a/devtools/client/shared/components/reps/reps.css
+++ b/devtools/client/shared/components/reps/reps.css
@@ -75,18 +75,24 @@
   transform: rotate(-90deg);
 }
 
 html[dir="rtl"] .tree-node button:not(.expanded) {
   transform: rotate(90deg);
 }
 
 .tree .tree-node.focused {
-  color: white;
-  background-color: var(--theme-selection-background, #0a84ff);
+  color: var(--theme-selection-color);
+  background-color: var(--theme-selection-background);
+}
+
+/* Invert text selection color in selected rows */
+.tree .tree-node.focused ::selection {
+  color: var(--theme-selection-background);
+  background-color: var(--theme-selection-color);
 }
 
 .tree-node.focused button.arrow {
   background-color: currentColor;
 }
 /* vim:set ts=2 sw=2 sts=2 et: */
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
--- a/devtools/client/shared/components/tree/TreeView.css
+++ b/devtools/client/shared/components/tree/TreeView.css
@@ -89,16 +89,22 @@
 }
 
 .treeTable .treeRow.selected *,
 .treeTable .treeRow.selected .treeLabelCell::after {
   color: var(--theme-selection-color);
   fill: currentColor;
 }
 
+/* Invert text selection color in selected rows */
+.treeTable .treeRow.selected :not(input):not(textarea)::selection {
+  color: var(--theme-selection-background);
+  background-color: var(--theme-selection-color);
+}
+
 /* Filtering */
 .treeTable .treeRow.hidden {
   display: none !important;
 }
 
 .treeTable .treeValueCellDivider {
   display: flex;
   flex-wrap: wrap;
--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -54,16 +54,21 @@
  * Customize scrollbar colors on Linux + light theme, to avoid visual conflicts
  * between the light theme and the selected GTK theme (see bug 1471163).
  * This removes GTK scrollbars and uses a fallback design (see bug 1464723).
  */
 :root[platform="linux"].theme-light {
   scrollbar-color: var(--grey-40) var(--grey-20);
 }
 
+::selection {
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
+}
+
 .devtools-monospace {
   font-family: var(--monospace-font-family);
   font-size: var(--theme-code-font-size);
 }
 
 /**
  * For text that needs to be cut with an ellipsis …
  */
--- a/devtools/client/themes/dark-theme.css
+++ b/devtools/client/themes/dark-theme.css
@@ -17,21 +17,16 @@ body {
   color: var(--theme-body-color);
 }
 
 .theme-sidebar {
   background: var(--theme-sidebar-background);
   color: var(--theme-body-color);
 }
 
-::-moz-selection {
-  background-color: var(--theme-selection-background);
-  color: var(--theme-selection-color);
-}
-
 .theme-selected,
 .CodeMirror-hint-active {
   background-color: var(--theme-selection-background);
   color: var(--theme-selection-color);
 }
 
 .theme-bg-contrast,
 .variable-or-property:not([overridden])[changed] {
--- a/devtools/client/themes/light-theme.css
+++ b/devtools/client/themes/light-theme.css
@@ -17,21 +17,16 @@ body {
   color: var(--theme-body-color);
 }
 
 .theme-sidebar {
   background: var(--theme-sidebar-background);
   color: var(--theme-body-color);
 }
 
-::-moz-selection {
-  background-color: var(--theme-selection-background);
-  color: var(--theme-selection-color);
-}
-
 .theme-selected,
 .CodeMirror-hint-active {
   background-color: var(--theme-selection-background);
   color: var(--theme-selection-color);
 }
 
 .theme-bg-contrast,
 .variable-or-property:not([overridden])[changed] {