1 files changed, 87 insertions, 1 deletions

diff --git a/devtools/client/debugger/src/components/Editor/InlinePreviews.js b/devtools/client/debugger/src/components/Editor/InlinePreviews.js
index ba8b08669a..56c5f5021f 100644
--- a/devtools/client/debugger/src/components/Editor/InlinePreviews.js
+++ b/devtools/client/debugger/src/components/Editor/InlinePreviews.js
@@ -3,9 +3,13 @@
  * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
 
 import React, { Component } from "devtools/client/shared/vendor/react";
+import ReactDOM from "devtools/client/shared/vendor/react-dom";
+
+import actions from "../../actions/index";
 import { div } from "devtools/client/shared/vendor/react-dom-factories";
 import PropTypes from "devtools/client/shared/vendor/react-prop-types";
 import InlinePreviewRow from "./InlinePreviewRow";
+import InlinePreview from "./InlinePreview";
 import { connect } from "devtools/client/shared/vendor/react-redux";
 import {
   getSelectedFrame,
@@ -13,6 +17,8 @@ import {
   getInlinePreviews,
 } from "../../selectors/index";
 
+import { features } from "../../utils/prefs";
+
 function hasPreviews(previews) {
   return !!previews && !!Object.keys(previews).length;
 }
@@ -31,9 +37,85 @@ class InlinePreviews extends Component {
     return hasPreviews(previews);
   }
 
+  componentDidMount() {
+    this.renderInlinePreviewMarker();
+  }
+
+  componentDidUpdate() {
+    this.renderInlinePreviewMarker();
+  }
+
+  renderInlinePreviewMarker() {
+    const {
+      editor,
+      selectedFrame,
+      selectedSource,
+      previews,
+      openElementInInspector,
+      highlightDomElement,
+      unHighlightDomElement,
+    } = this.props;
+
+    if (!features.codemirrorNext) {
+      return;
+    }
+
+    if (
+      !editor ||
+      !selectedFrame ||
+      selectedFrame.location.source.id !== selectedSource.id ||
+      !hasPreviews(previews)
+    ) {
+      editor.removeLineContentMarker("inline-preview-marker");
+      return;
+    }
+    editor.setLineContentMarker({
+      id: "inline-preview-marker",
+      condition: line => {
+        // CM6 line is 1-based unlike CM5 which is 0-based.
+        return !!previews[line - 1];
+      },
+      createLineElementNode: line => {
+        const widgetNode = document.createElement("div");
+        widgetNode.className = "inline-preview";
+
+        ReactDOM.render(
+          React.createElement(
+            React.Fragment,
+            null,
+            previews[line - 1].map(preview =>
+              React.createElement(InlinePreview, {
+                line,
+                key: `${line}-${preview.name}`,
+                variable: preview.name,
+                value: preview.value,
+                openElementInInspector,
+                highlightDomElement,
+                unHighlightDomElement,
+              })
+            )
+          ),
+          widgetNode
+        );
+        return widgetNode;
+      },
+    });
+  }
+
+  componentWillUnmount() {
+    if (!features.codemirrorNext) {
+      return;
+    }
+    this.props.editor.removeLineContentMarker("inline-preview-marker");
+  }
+
   render() {
     const { editor, selectedFrame, selectedSource, previews } = this.props;
 
+    if (features.codemirrorNext) {
+      return null;
+    }
+
     // Render only if currently open file is the one where debugger is paused
     if (
       !selectedFrame ||
@@ -77,4 +159,8 @@ const mapStateToProps = state => {
   };
 };
 
-export default connect(mapStateToProps)(InlinePreviews);
+export default connect(mapStateToProps, {
+  openElementInInspector: actions.openElementInInspectorCommand,
+  highlightDomElement: actions.highlightDomElement,
+  unHighlightDomElement: actions.unHighlightDomElement,
+})(InlinePreviews);