Bug 1500787 - Fix RDM input colors across platforms; r=fvsch,gl
authorAriel Burone <aburone@gmail.com>
Tue, 23 Oct 2018 16:45:42 +0000
changeset 490964 852ecad7f36b249351b5e88322c7178a401d685f
parent 490963 1b9327de2f3e308af56cedd8ac75af276a390103
child 490965 083e7905bc6505d7d35b6ce09f8ae412e7b6ea5a
push id247
push userfmarier@mozilla.com
push dateSat, 27 Oct 2018 01:06:44 +0000
reviewersfvsch, gl
bugs1500787
milestone65.0a1
Bug 1500787 - Fix RDM input colors across platforms; r=fvsch,gl Differential Revision: https://phabricator.services.mozilla.com/D9475
devtools/client/responsive.html/components/UserAgentInput.js
devtools/client/responsive.html/components/ViewportDimension.js
devtools/client/responsive.html/index.css
devtools/client/themes/variables.css
--- a/devtools/client/responsive.html/components/UserAgentInput.js
+++ b/devtools/client/responsive.html/components/UserAgentInput.js
@@ -71,16 +71,17 @@ class UserAgentInput extends PureCompone
   }
 
   render() {
     return (
       dom.label({ id: "user-agent-label" },
         "UA:",
         dom.input({
           id: "user-agent-input",
+          class: "text-input",
           onChange: this.onChange,
           onKeyUp: this.onKeyUp,
           placeholder: getStr("responsive.customUserAgent"),
           type: "text",
           value: this.state.value,
         })
       )
     );
--- a/devtools/client/responsive.html/components/ViewportDimension.js
+++ b/devtools/client/responsive.html/components/ViewportDimension.js
@@ -154,34 +154,34 @@ class ViewportDimension extends PureComp
           "viewport-dimension" +
           (this.state.isEditing ? " editing" : "") +
           (!this.state.isWidthValid || !this.state.isHeightValid ? " invalid" : ""),
       },
       dom.input({
         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,
         onBlur: this.onInputBlur,
         onChange: this.onInputChange,
         onFocus: this.onInputFocus,
         onKeyDown: this.onInputKeyDown,
         onKeyUp: this.onInputKeyUp,
       }),
       dom.span({
         className: "viewport-dimension-separator",
       }, "×"),
       dom.input({
         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,
         onBlur: this.onInputBlur,
         onChange: this.onInputChange,
         onFocus: this.onInputFocus,
         onKeyDown: this.onInputKeyDown,
         onKeyUp: this.onInputKeyUp,
--- a/devtools/client/responsive.html/index.css
+++ b/devtools/client/responsive.html/index.css
@@ -5,46 +5,63 @@
  * CSS Variables specific to the responsive design mode
  */
 
 :root {
   --rdm-box-shadow: 0 4px 4px 0 rgba(155, 155, 155, 0.26);
   --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 {
   --rdm-box-shadow: 0 4px 4px 0 rgba(105, 105, 105, 0.26);
   --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);
 }
 
 * {
   box-sizing: border-box;
 }
 
 :root,
 input,
 button {
   font-size: 12px;
 }
 
+input,
+button {
+  color: var(--theme-toolbar-color);
+  background-color: var(--theme-tab-toolbar-background);
+}
+
 html,
 body,
 #root {
   height: 100%;
   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 {
   display: flex;
   flex-direction: column;
   width: 100%;
   height: 100%;
 }
@@ -261,35 +278,20 @@ body,
 
 .viewport-dimension {
   display: flex;
   align-items: center;
   margin: 1px;
 }
 
 .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;
 }
 
 /**
  * Device Modal
  */
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -233,16 +233,18 @@
   --blue-50: #0a84ff;
   --blue-55: #0074e8;
   --blue-60: #0060df;
   --blue-70: #003eaa;
 
   --teal-60: #00c8d7;
   --teal-70: #008ea4;
 
+  --red-50: #ff0039;
+  --red-60: #d70022;
   --red-70: #a4000f;
 
   --green-50: #30e60b;
   --green-60: #12bc00;
   --green-70: #058b00;
 
   --yellow-50: #ffe900;
   --yellow-60: #d7b600;