Bug 1467572 - Part 16: Adjust RDM colors for the light and dark theme to match the designs. r=rcaliman
☠☠ backed out by dc2c0b075c0e ☠ ☠
authorGabriel Luong <gabriel.luong@gmail.com>
Wed, 15 Aug 2018 17:27:53 -0400
changeset 431830 e295be61276e26f6db80b60212205ed38c275945
parent 431829 41d85a6f8a2a04ed8f0206da7b3e3a2c997b3f04
child 431831 5ef6c1c4274742eeaa2aeb7b082865c63b5322f2
push id34451
push userebalazs@mozilla.com
push dateThu, 16 Aug 2018 09:25:15 +0000
treeherdermozilla-central@161817e6d127 [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>