foo.diff

commit 26fc65a855d490bca7c3b9641527813eebc96677
Author: Jason Laster <jlaster@mozilla.com>
Date:   Wed Jul 31 13:58:37 2019 -0700

    tweaks

diff --git a/devtools/client/debugger/src/components/Editor/InlinePreview.css b/devtools/client/debugger/src/components/Editor/InlinePreview.css
index 8ffcc27596a6..9b4537c6ed35 100644
--- a/devtools/client/debugger/src/components/Editor/InlinePreview.css
+++ b/devtools/client/debugger/src/components/Editor/InlinePreview.css
+
+.inline-preview-outer {
+  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;
+  height: 15px;
+  color: HSL(56.1, 87%, 23%);
+}
+
+.inline-preview-label {
+  padding: 2px;
+  border-right: 1px solid HSL(56.1, 87%, 70%);
+  height: 12px;
+  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;
 }
 
 .inline-preview-container {
   margin-right: 5px;
   background: rgba(105, 105, 236, 0.31);
 }
+
+
diff --git a/devtools/client/debugger/src/components/Editor/InlinePreview.js b/devtools/client/debugger/src/components/Editor/InlinePreview.js
index 606281bbd30a..e28f12a0f50f 100644
--- a/devtools/client/debugger/src/components/Editor/InlinePreview.js
+++ b/devtools/client/debugger/src/components/Editor/InlinePreview.js
@@ -13,46 +13,32 @@ import {
 } from "../../selectors";
 const {
   REPS: { Rep },
+  MODE
 } = Reps;
 
 type Props = {
   line: number,
-  value: any,
   variable: string,
+  preview: Object
 };
 
 // Renders single variable preview inside a codemirror line widget
 class InlinePreview extends PureComponent<Props> {
-  showInScopes(variable) {
+  showInScopes(variable: Object) {
     // TODO: focus on variable value in the scopes sidepanel
     console.log(`show ${variable}`);
   }
 
   render() {
-    const { value, variable } = this.props;
+    const { preview, variable } = this.props;
+    const value = preview[variable];
     return (
-      <span onClick={() => this.showInScopes(variable)}>
-        <span>{variable}</span>
-        <span> = </span>
-        <Rep object={value} noGrip={true} />
+      <span className="inline-preview-outer" onClick={() => this.showInScopes(variable)}>
+        <span className="inline-preview-label">{variable}</span>
+        <span className="inline-preview-value"><Rep object={value} mode={MODE.SHORT} noGrip={true} /></span>
       </span>
     );
   }
 }
 
-const mapStateToProps = (state, ownProps) => {
-  const thread = getCurrentThread(state);
-  const selectedFrame = getSelectedFrame(state, thread);
-
-  return {
-    value: getInlinePreviewExpression(
-      state,
-      thread,
-      selectedFrame.id,
-      ownProps.line,
-      ownProps.variable
-    ),
-  };
-};
-
-export default connect(mapStateToProps)(InlinePreview);
+export default InlinePreview;
diff --git a/devtools/client/debugger/src/components/Editor/InlinePreviewRow.js b/devtools/client/debugger/src/components/Editor/InlinePreviewRow.js
index 515d72f14d0b..9a5dd3864e37 100644
--- a/devtools/client/debugger/src/components/Editor/InlinePreviewRow.js
+++ b/devtools/client/debugger/src/components/Editor/InlinePreviewRow.js
@@ -73,8 +73,7 @@ class InlinePreviewRow extends PureComponent<Props> {
     ReactDOM.render(
       <React.Fragment>
         {Object.keys(preview).map(variableName => (
-          // <span>TEST</span> - This works
-          <InlinePreview line={line} variable={variableName} />
+          <InlinePreview line={line} variable={variableName} preview={preview} />
         ))}
       </React.Fragment>,
       this.IPWidget.node