Bug 1508338 - Add dark theme colors to Changes panel; r=gl
authorRazvan Caliman <rcaliman@mozilla.com>
Wed, 28 Nov 2018 21:58:22 +0000
changeset 505029 162db3b0344a7342e41f1ad67946e92ac9cafc2a
parent 505028 c67e1875a652439706487664fda9e6c10f2285ed
child 505030 50ff40cd5813e399775dfe026353a9407fd0c053
push id10290
push userffxbld-merge
push dateMon, 03 Dec 2018 16:23:23 +0000
treeherdermozilla-beta@700bed2445e6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1508338
milestone65.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 1508338 - Add dark theme colors to Changes panel; r=gl Differential Revision: https://phabricator.services.mozilla.com/D12770
devtools/client/themes/changes.css
--- a/devtools/client/themes/changes.css
+++ b/devtools/client/themes/changes.css
@@ -3,38 +3,48 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
  /* CSS Variables specific to the Changes panel that aren't defined by the themes */
  :root {
    --diff-add-background-color: #f1feec;
    --diff-add-text-color: #54983f;
    --diff-remove-background-color: #fbf2f5;
    --diff-remove-text-color: #bf7173;
+   --diff-source-background: var(--theme-toolbar-background);
    --diff-level: 0;
    --diff-level-offset: 10px;
    /*
     Minimum padding so content on the first level (zero) isn't touching the edge. Added
     and removed lines will re-declare this to add extra padding to clear the +/- icons.
    */
    --diff-level-min-offset: 5px;
  }
 
+:root.theme-dark {
+  --diff-add-background-color: rgba(18, 188, 0, 0.15);
+  --diff-add-text-color: #12BC00;
+  --diff-remove-background-color: rgba(255, 0, 57, 0.15);
+  --diff-remove-text-color: #FF0039;
+  --diff-source-background: #222225;
+}
+
 #sidebar-panel-changes {
   margin: 0;
   padding: 0;
   width: 100%;
   height: 100%;
   overflow: auto;
+  background: var(--theme-sidebar-background);
 }
 
 #sidebar-panel-changes .href {
   display: flex;
   align-items: center;
   color: var(--theme-toolbar-color);
-  background: var(--theme-toolbar-background);
+  background: var(--diff-source-background);
   border-top: 1px solid var(--theme-splitter-color);
   border-bottom: 1px solid var(--theme-splitter-color);
   padding: 4px;
   font-size: 12px;
 }
 
 #sidebar-panel-changes .href span {
   /* Allows trimming of flex item with overflow ellipsis within the flex container */