Bug 1467572 - Part 16: Adjust RDM colors for the light and dark theme to match the designs. r=rcaliman draft
authorGabriel Luong <gabriel.luong@gmail.com>
Fri, 10 Aug 2018 16:04:33 -0400
changeset 828374 a814cb708cdccd39f5c1a9cbf1d2a125c19622ea
parent 828373 84038cfbf8dbe01a4c861ca8ab0b08c6a0c4a43f
child 828375 8be31d1def8e4bae8d4a0297baadc3d738fe6858
push id118677
push userbmo:gl@mozilla.com
push dateFri, 10 Aug 2018 20:59:19 +0000
reviewersrcaliman
bugs1467572, 12408235
milestone63.0a1
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 MozReview-Commit-ID: BX9OdODPg6h
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>