Bug 1495693 - Declare devtools-textinput colors explicitly; r=pbro
authorFlorens Verschelde <florens@fvsch.com>
Mon, 15 Oct 2018 08:12:12 +0000
changeset 441238 cd606d8bb763dbe1a1e4db45918bf3774d97f24a
parent 441237 744747bb295cbb4a02dbf9960e5f7676822834c6
child 441239 6c9eb32ab7ed9291f2bdb55f9aa66ea5b00d7e0d
push id70970
push userpbrosset@mozilla.com
push dateMon, 15 Oct 2018 08:15:32 +0000
treeherderautoland@cd606d8bb763 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1495693
milestone64.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 1495693 - Declare devtools-textinput colors explicitly; r=pbro Differential Revision: https://phabricator.services.mozilla.com/D8677
devtools/client/themes/common.css
devtools/client/themes/dark-theme.css
--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -441,16 +441,26 @@ checkbox:-moz-focusring {
   -moz-appearance: none;
   margin: 1px 3px;
   border: 1px solid;
   border-radius: 2px;
   padding: 4px 6px;
   border-color: var(--theme-splitter-color);
   font: message-box;
   font-size: var(--theme-body-font-size);
+  background-color: white;
+  color: var(--grey-90);
+}
+
+.theme-dark .devtools-textinput,
+.theme-dark .devtools-searchinput,
+.theme-dark .devtools-filterinput {
+  /* in between grey-85 and grey-90 */
+  background-color: #141416;
+  color: var(--grey-20);
 }
 
 :root[platform="mac"] .devtools-textinput,
 :root[platform="mac"] .devtools-searchinput,
 :root[platform="mac"] .devtools-filterinput {
   border-radius: 20px;
 }
 
@@ -500,22 +510,23 @@ checkbox:-moz-focusring {
 }
 
 .devtools-searchinput .textbox-input::placeholder,
 .devtools-filterinput .textbox-input::placeholder {
   font-style: normal;
 }
 
 .devtools-plaininput {
+  color: var(--grey-90);
   border-color: transparent;
   background-color: transparent;
 }
 
 .theme-dark .devtools-plaininput {
-  color: var(--theme-highlight-gray);
+  color: var(--grey-20);
 }
 
 /* Searchbox is a div container element for a search input element */
 .devtools-searchbox {
   display: inline-flex;
   flex: 1;
   height: 23px;
   position: relative;
@@ -597,32 +608,27 @@ checkbox:-moz-focusring {
 
 .devtools-style-searchbox-no-match {
   background-color: var(--searcbox-no-match-background-color) !important;
   border-color: var(--searcbox-no-match-border-color) !important;
 }
 
 .devtools-searchinput-clear {
   position: absolute;
-  top: 3.5px;
+  top: calc(50% - 8px);
   inset-inline-end: 7px;
   padding: 0;
   border: 0;
   width: 16px;
   height: 16px;
   background-position: 0 0;
   background-repeat: no-repeat;
   background-color: transparent;
 }
 
-.devtools-searchinput-clear:dir(rtl) {
-  right: unset;
-  left: 7px;
-}
-
 .theme-dark .devtools-searchinput-clear {
   background-image: url("chrome://devtools/skin/images/search-clear-dark.svg");
 }
 
 .theme-light .devtools-searchinput-clear {
   background-image: url("chrome://devtools/skin/images/search-clear-light.svg");
 }
 
--- a/devtools/client/themes/dark-theme.css
+++ b/devtools/client/themes/dark-theme.css
@@ -246,24 +246,16 @@ div.CodeMirror span.eval-text {
   background-color: var(--theme-sidebar-background);
 }
 
 .cm-s-markup-view pre {
   line-height: 1.4em;
   min-height: 1.4em;
 }
 
-.devtools-textinput,
-.devtools-searchinput,
-.devtools-filterinput {
-  /* in between grey-85 and grey-90 */
-  background-color: #141416;
-  color: var(--theme-highlight-gray);
-}
-
 .CodeMirror-Tern-fname {
   color: #f7f7f7;
 }
 
 .CodeMirror-hints,
 .CodeMirror-Tern-tooltip {
   box-shadow: 0 0 4px rgba(255, 255, 255, .3);
   background-color: #0f171f;