Bug 1500787 - Fix RDM input colors across platforms; r=fvsch,gl

Differential Revision: https://phabricator.services.mozilla.com/D9475

--HG--
extra : moz-landing-system : lando

devtools/client/responsive.html/components/UserAgentInput.js

@@ -76,6 +76,7 @@ class UserAgentInput extends PureComponent {
         "UA:",
         dom.input({
           id: "user-agent-input",
+          class: "text-input",
           onChange: this.onChange,
           onKeyUp: this.onKeyUp,
           placeholder: getStr("responsive.customUserAgent"),

devtools/client/responsive.html/components/ViewportDimension.js

@@ -159,7 +159,7 @@ class ViewportDimension extends PureComponent {
         ref: input => {
           this.widthInput = input;
         },
-        className: "viewport-dimension-input" +
+        className: "text-input viewport-dimension-input" +
                    (this.state.isWidthValid ? "" : " invalid"),
         size: 4,
         value: this.state.width,
@@ -176,7 +176,7 @@ class ViewportDimension extends PureComponent {
         ref: input => {
           this.heightInput = input;
         },
-        className: "viewport-dimension-input" +
+        className: "text-input viewport-dimension-input" +
                    (this.state.isHeightValid ? "" : " invalid"),
         size: 4,
         value: this.state.height,

devtools/client/responsive.html/index.css

@@ -10,6 +10,7 @@
   --submit-button-active-background-color: rgba(0,0,0,0.12);
   --submit-button-active-color: var(--theme-body-color);
   --viewport-active-color: #3b3b3b;
+  --input-invalid-border-color: var(--red-60);
 }
 
 :root.theme-dark {
@@ -17,6 +18,7 @@
   --submit-button-active-background-color: var(--theme-toolbar-hover-active);
   --submit-button-active-color: var(--theme-selection-color);
   --viewport-active-color: #fcfcfc;
+  --input-invalid-border-color: var(--red-50);
 }
 
 * {
@@ -29,6 +31,12 @@ button {
   font-size: 12px;
 }
 
+input,
+button {
+  color: var(--theme-toolbar-color);
+  background-color: var(--theme-tab-toolbar-background);
+}
+
 html,
 body,
 #root {
@@ -36,10 +44,19 @@ body,
   overflow: hidden;
 }
 
-.theme-dark body,
-.theme-dark button,
-.theme-dark input {
-  color: var(--theme-toolbar-color);
+.text-input {
+  border: 1px solid var(--theme-splitter-color);
+  padding: 2px;
+}
+
+.text-input:focus {
+  outline: none;
+  border-color: var(--theme-selection-background);
+  transition: all 0.2s ease-in-out;
+}
+
+.text-input.invalid {
+  border-color: var(--input-invalid-border-color);
 }
 
 #app {
@@ -266,25 +283,10 @@ body,
 }
 
 .viewport-dimension-input {
-  border: 1px solid var(--theme-splitter-color);
-  outline: none;
   text-align: center;
   width: 3em;
 }
 
-.viewport-dimension-input:focus {
-  border: 1px solid var(--theme-selection-background);
-  transition: all 0.2s ease-in-out;
-}
-
-.viewport-dimension-input.invalid:focus {
-  border: 1px solid #d92215;
-}
-
-.theme-dark .viewport-dimension-input {
-  background-color: var(--theme-tab-toolbar-background);
-}
-
 .viewport-dimension-separator {
   -moz-user-select: none;
   padding: 0 0.3em;

devtools/client/themes/variables.css

@@ -238,6 +238,8 @@
   --teal-60: #00c8d7;
   --teal-70: #008ea4;
 
+  --red-50: #ff0039;
+  --red-60: #d70022;
   --red-70: #a4000f;
 
   --green-50: #30e60b;