Backed out changeset f4a2f64e853f (bug 1573504) for debugger failure

devtools/client/debugger/src/components/Editor/InlinePreview.css

@@ -8,20 +8,25 @@
 }
 
 .inline-preview-outer {
-  padding: 1px 0;
-  background-color: var(--theme-inline-preview-background);
-  border: 1px solid var(--theme-inline-preview-border-color);
-  border-radius: 3px;
-  font-size: 10px;
+  padding: 2px;
+  border: 1px solid HSL(56.1, 87%, 65%);
+  opacity: 0.8;
+  background-color: HSL(56.1, 100%, 92.1%);
+  border-radius: 2px;
+  font-size: 9px;
+  color: HSL(56.1, 87%, 23%);
   margin-right: 5px;
 }
 
 .inline-preview-label {
-  padding: 1px 2px 1px 4px;
-  color: var(--theme-inline-preview-label-color);
-  background-color: var(--theme-inline-preview-label-background);
+  padding: 2px;
+  border-right: 1px solid HSL(56.1, 87%, 70%);
+  background-color: #fffab3;
+  border-radius: 2px 0 0 2px;
 }
 
 .inline-preview-value {
+  background-color: HSL(56.1, 100%, 96.1%);
   padding: 2px 6px;
+  border-radius: 0 2px 2px 0;
 }

devtools/client/debugger/src/components/Editor/InlinePreview.js

@@ -31,7 +31,7 @@ class InlinePreview extends PureComponent<Props> {
         className="inline-preview-outer"
         onClick={() => this.showInScopes(variable)}
       >
-        <span className="inline-preview-label">{variable}:</span>
+        <span className="inline-preview-label">{variable}</span>
         <span className="inline-preview-value">
           <Rep object={value} mode={MODE.SHORT} noGrip={true} />
         </span>

devtools/client/debugger/src/components/variables.css

@@ -17,18 +17,10 @@
 :root .theme-light {
   --search-overlays-semitransparent: rgba(221, 225, 228, 0.66);
   --popup-shadow-color: #d0d0d0;
-  --theme-inline-preview-background: rgba(192, 105, 255, 0.05);
-  --theme-inline-preview-border-color: #EBD1FF;
-  --theme-inline-preview-label-color: #6300a6;
-  --theme-inline-preview-label-background: rgb(244, 230, 255);
 }
 
 :root.theme-dark,
 :root .theme-dark {
   --search-overlays-semitransparent: rgba(42, 46, 56, 0.66);
   --popup-shadow-color: #5c667b;
-  --theme-inline-preview-background: rgba(192, 105, 255, 0.05);
-  --theme-inline-preview-border-color: #47326C;
-  --theme-inline-preview-label-color: #DFCCFF;
-  --theme-inline-preview-label-background: #3F2E5F;
 }