Bug 1580636 - Set inline preview left before injection r=jlast

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

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

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

@@ -5,6 +5,7 @@
 .inline-preview {
   position: relative;
   margin-top: calc(var(--theme-code-line-height) * -11px);
+  margin-inline-start: 8px;
 }
 
 .inline-preview-outer {

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

@@ -52,8 +52,14 @@ class InlinePreviewRow extends PureComponent<Props> {
       line,
       ch: editor.getLine(line).length,
     });
-    const previewSpacing = 8;
-    return lineEndPos.left - lineStartPos.left + previewSpacing;
+    return lineEndPos.left - lineStartPos.left;
+  }
+
+  setPreviewPosition(node, left) {
+    if (this.lastLeft !== left) {
+      this.lastLeft = left;
+      node.style.left = `${left}px`;
+    }
   }
 
   updatePreviewWidget(props: Props | null, prevProps: Props | null) {
@@ -84,16 +90,15 @@ class InlinePreviewRow extends PureComponent<Props> {
       unHighlightDomElement,
     } = props;
 
+    const left = this.getPreviewPosition(editor, line);
     if (!this.IPWidget) {
       const widget = document.createElement("div");
       widget.classList.add("inline-preview");
+      this.setPreviewPosition(widget, left);
       this.IPWidget = editor.codeMirror.addLineWidget(line, widget);
     }
-
-    const left = this.getPreviewPosition(editor, line);
-    if (!prevProps || this.lastLeft !== left) {
-      this.lastLeft = left;
-      this.IPWidget.node.style.left = `${left}px`;
+    else if (!prevProps || this.lastLeft !== left) {
+      this.setPreviewPosition(this.IPWidget.node, left);
     }
 
     ReactDOM.render(