Bug 1467572 - Part 16: Adjust RDM colors for the light and dark theme to match the designs. r=rcaliman
authorGabriel Luong <gabriel.luong@gmail.com>
Wed, 15 Aug 2018 17:27:53 -0400
changeset 486961 3199491bd055a6ac07632efeb7b3592f417f520c
parent 486960 e1e8061780fdf074a510b94240ab303f89950a4d
child 486962 599eb93053e0c513acdc25bc921b5b2103732151
push id9719
push userffxbld-merge
push dateFri, 24 Aug 2018 17:49:46 +0000
treeherdermozilla-beta@719ec98fba77 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersrcaliman
bugs1467572, 12408235
milestone63.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 1467572 - Part 16: Adjust RDM colors for the light and dark theme to match the designs. r=rcaliman Light Theme Design https://mozilla.invisionapp.com/d/main#/console/12408235/300479943/preview Dark Theme Design https://mozilla.invisionapp.com/d/main#/console/12408235/302151757/preview
devtools/client/responsive.html/components/DeviceModal.js
devtools/client/responsive.html/index.css
devtools/client/responsive.html/index.xhtml
--- a/devtools/client/responsive.html/components/DeviceModal.js
+++ b/devtools/client/responsive.html/components/DeviceModal.js
@@ -150,17 +150,17 @@ class DeviceModal extends PureComponent 
 
     return dom.div(
       {
         id: "device-modal-wrapper",
         className: this.props.devices.isModalOpen ? "opened" : "closed",
       },
       dom.div(
         {
-          className: "device-modal container",
+          className: "device-modal",
         },
         dom.button({
           id: "device-close-button",
           className: "devtools-button",
           onClick: () => onUpdateDeviceModal(false),
         }),
         dom.div(
           {
--- a/devtools/client/responsive.html/index.css
+++ b/devtools/client/responsive.html/index.css
@@ -31,43 +31,44 @@ button {
 
 html,
 body,
 #root {
   height: 100%;
   overflow: hidden;
 }
 
+.theme-dark body,
+.theme-dark button,
+.theme-dark input {
+  color: var(--theme-toolbar-color);
+}
+
 #app {
   display: flex;
   flex-direction: column;
   width: 100%;
   height: 100%;
 }
 
 /**
  * Common styles for shared components
  */
 
-.container {
-  background-color: var(--theme-toolbar-background);
-  border: 1px solid var(--theme-splitter-color);
-}
-
 .devtools-separator {
   height: 100%;
   margin: 0 1px;
 }
 
 /**
  * Toolbar
  */
 
 #toolbar {
-  background-color: var(--theme-toolbar-background);
+  background-color: var(--theme-tab-toolbar-background);
   border-bottom: 1px solid var(--theme-splitter-color);
   display: grid;
   grid-template-columns: min-content auto min-content;
   width: 100%;
   min-height: 29px;
   -moz-user-select: none;
 }
 
@@ -131,16 +132,20 @@ body,
 #viewports-container {
   display: flex;
   justify-content: center;
   overflow: auto;
   height: 100%;
   width: 100%;
 }
 
+.theme-light #viewports-container {
+  background-color: #F5F5F6;
+}
+
 #viewports {
   /* Individual viewports are inline elements, make sure they stay on a single
      line */
   white-space: nowrap;
   padding-top: 30px;
 }
 
 /**
@@ -242,16 +247,20 @@ body,
   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
  */
@@ -275,16 +284,18 @@ body,
   100% {
     opacity: 0;
     transform: translateY(5px);
     visibility: hidden;
   }
 }
 
 .device-modal {
+  background-color: var(--theme-toolbar-background);
+  border: 1px solid var(--theme-splitter-color);
   border-radius: 2px;
   box-shadow: var(--rdm-box-shadow);
   position: absolute;
   margin: auto;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
@@ -341,16 +352,17 @@ body,
 
 .device-header {
   font-weight: bold;
   text-transform: capitalize;
   padding: 0 0 3px 23px;
 }
 
 .device-label {
+  color: var(--theme-body-color);
   padding-bottom: 3px;
   display: flex;
   align-items: center;
   /* Largest size without horizontal scrollbars */
   max-width: 181px;
 }
 
 .device-input-checkbox {
--- a/devtools/client/responsive.html/index.xhtml
+++ b/devtools/client/responsive.html/index.xhtml
@@ -8,12 +8,12 @@
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
     <link rel="stylesheet" type="text/css"
           href="resource://devtools/client/responsive.html/index.css"/>
     <script type="application/javascript"
             src="chrome://devtools/content/shared/theme-switching.js"></script>
     <script type="application/javascript"
             src="resource://devtools/client/responsive.html/index.js"></script>
   </head>
-  <body class="theme-body" role="application">
+  <body class="theme-toolbar" role="application">
     <div id="root"/>
   </body>
 </html>