Bug 1555021 - Dark theme colors for new profiler tab r=gregtatum

Differential Revision: https://phabricator.services.mozilla.com/D48740

--HG--
extra : moz-landing-system : lando

devtools/client/performance-new/components/DirectoryPicker.js

@@ -82,12 +82,14 @@ class DirectoryPicker extends PureComponent {
         { className: "perf-settings-dir-list-button-group" },
         input({
           type: "button",
+          className: `perf-photon-button perf-photon-button-default perf-button`,
           value: "+",
           title: "Add a directory",
           onClick: this._handleAddButtonClick,
         }),
         input({
           type: "button",
+          className: `perf-photon-button perf-photon-button-default perf-button`,
           value: "-",
           title: "Remove the selected directory from the list",
           onClick: this._handleRemoveButtonClick,

devtools/client/themes/perf.css

@@ -2,6 +2,17 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+:root {
+  --highlight-color: var(--blue-55);
+  --slider-thumb-color: var(--grey-50);
+  --slider-track-color: var(--grey-30);
+}
+
+:root.theme-dark {
+  --slider-thumb-color: var(--grey-40);
+  --slider-track-color: var(--grey-60);
+}
+
 .perf {
   display: flex;
   flex-direction: column;
@@ -21,6 +32,8 @@
 .perf-button-image {
   vertical-align: text-top;
   padding-inline-end: 4px;
+  -moz-context-properties: fill;
+  fill: var(--theme-icon-color);
 }
 
 .perf-button-container {
@@ -69,8 +82,8 @@
 .perf-settings-title {
   padding: 5px 10px;
   margin-bottom: 15px;
-  background-color: var(--grey-10);
-  border: var(--grey-30) 1px solid;
+  background-color: var(--toolbarbutton-background);
+  border: rgba(138,161,180,0.2) 1px solid;
   font-size: 11px;
   font-weight: normal;
 }
@@ -106,6 +119,25 @@
 
 .perf-settings-range-input-el {
   width: 100%;
+  background: transparent;
+}
+
+.perf-settings-range-input-el::-moz-focus-outer {
+  border: 0;
+}
+
+.perf-settings-range-input-el::-moz-range-thumb {
+  background-color: var(--slider-thumb-color);
+  border: 0;
+}
+
+.perf-settings-range-input-el:focus::-moz-range-thumb {
+  background-color: var(--highlight-color);
+}
+
+.perf-settings-range-input-el::-moz-range-track {
+  background-color: var(--slider-track-color);
+  height: 3px;
 }
 
 .perf-settings-range-value {
@@ -123,7 +155,7 @@
 .perf-settings-notch {
   margin-right: 1px;
   flex: 1;
-  border: 1px solid rgba(0, 0, 0, 0.2);
+  border: 1px solid var(--theme-toolbarbutton-active-background);
   border-radius: 2px;
 }
 
@@ -146,6 +178,14 @@
   width: 100%;
   padding: 4px;
   box-sizing: border-box;
+  border: 1px solid var(--theme-splitter-color);
+  background-color: var(--theme-body-background);
+  color: var(--theme-body-color);
+}
+
+.perf-settings-text-input:focus {
+  border-color: var(--blue-50);
+  outline: none;
 }
 
 .perf-settings-text-label {
@@ -173,6 +213,11 @@
   transform: translateY(0);
 }
 
+.theme-dark .perf-settings-details[open] .perf-settings-details-contents-slider {
+  background-color: var(--theme-toolbar-background);
+  border-color: var(--grey-70);
+}
+
 .perf-settings-summary {
   /* This is a little bit odd, but in order to match the heights of the elements and
    * have a fairly large hit area for the summary element, make the element position
@@ -213,18 +258,12 @@
   align-self: flex-start;
 }
 
-.perf-settings-feature-name {
-  width: 150px;
-  color: var(--blue-60);
-}
-
 .perf-settings-feature-title {
   flex: 1;
 }
 
 .perf-settings-feature-name {
   width: 130px;
-  color: var(--blue-60);
   line-height: 1.6;
 }
 
@@ -236,10 +275,11 @@
   box-sizing: border-box;
   width: 100%;
   height: 100px;
-  border: 1px solid var(--grey-30);
+  border: 1px solid var(--theme-splitter-color);
   padding: 0;
   overflow-y: auto;
-  background-color: white;
+  background-color: var(--theme-body-background);
+  color: var(--theme-body-color);
 }
 
 .pref-settings-dir-list-item {
@@ -253,12 +293,18 @@
   height: 12px;
   margin-inline-end: 4px;
   vertical-align: -2px;
+  -moz-context-properties: fill;
+  fill: var(--theme-icon-color);
 }
 
 .perf-settings-dir-list-button-group {
   padding: 4px 2px;
 }
 
+.perf-settings-dir-list-button-group input[type=button] {
+  margin-left: 0;
+}
+
 /* See https://design.firefox.com/photon/components/buttons.html for the spec */
 .perf-photon-button {
   --blue-50-a30: rgba(10, 132, 255, 0.3);
@@ -270,9 +316,9 @@
   background: none;
 
   /* photon styles */
-  background-color: var(--grey-90-a10);
+  background-color: var(--toolbarbutton-background);
   border-radius: 2px;
-  color: var(--grey-90);
+  color: var(--theme-body-color);
   font: inherit;
 }
 
@@ -282,10 +328,6 @@
   border: none;
 }
 
-.perf-photon-button:hover:not([disabled]) {
-  background-color: var(--grey-90-a20);
-}
-
 .perf-photon-button:hover:active:not([disabled]) {
   background-color: var(--grey-90-a30);
 }