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 535797 9cca1de0aa3969e0f3e5e05a99455a343ab9e5a5
parent 535796 b1295df1cba04b2fe97a9633420457a63d93856f
child 535798 3b3fc85fd247f3beb4a446a3b80da22e3cf0e703
push id2082
push userffxbld-merge
push dateMon, 01 Jul 2019 08:34:18 +0000
treeherdermozilla-release@2fb19d0466d2 [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] {