Bug 1463669 - WIP - Demonstrate syntax highlighting in console output draft
authorBrian Grinstead <bgrinstead@mozilla.com>
Mon, 30 Jul 2018 10:26:48 -0700
changeset 824368 1f03ed18e82e1724e2191f81f77cafec5ab2a5c1
parent 824238 dead9fcddd4a25fd36d54ab7eb782d7d9b8bb7a1
push id117879
push userbgrinstead@mozilla.com
push dateMon, 30 Jul 2018 17:27:07 +0000
bugs1463669
milestone63.0a1
Bug 1463669 - WIP - Demonstrate syntax highlighting in console output MozReview-Commit-ID: 5P8YrDg0L1H
devtools/client/webconsole/components/JSTerm.js
devtools/client/webconsole/components/message-types/ConsoleCommand.js
--- a/devtools/client/webconsole/components/JSTerm.js
+++ b/devtools/client/webconsole/components/JSTerm.js
@@ -366,16 +366,33 @@ class JSTerm extends Component {
       }
     } else if (this.inputNode) {
       this.inputNode.addEventListener("keypress", this._keyPress);
       this.inputNode.addEventListener("input", this._inputEventHandler);
       this.inputNode.addEventListener("keyup", this._inputEventHandler);
       this.focus();
     }
 
+    const runMode = (text, node) => {
+      this.editor.CodeMirror.runMode(text, "application/javascript", node);
+    };
+    class CodeMirrorHighlighted extends HTMLElement {
+      connectedCallback() {
+        if (runMode) {
+          const div = this.querySelector("div");
+          div.classList.add("cm-s-default");
+          runMode(div.textContent, div);
+        }
+      }
+    }
+    if (doc.defaultView.customElements && runMode) {
+      doc.defaultView.customElements.define("codemirror-highlighted",
+        CodeMirrorHighlighted);
+    }
+
     this.inputBorderSize = this.inputNode
       ? this.inputNode.getBoundingClientRect().height - this.inputNode.clientHeight
       : 0;
 
     // Update the character and chevron width needed for the popup offset calculations.
     this._inputCharWidth = this._getInputCharWidth();
     this._chevronWidth = this.editor ? null : this._getChevronWidth();
 
--- a/devtools/client/webconsole/components/message-types/ConsoleCommand.js
+++ b/devtools/client/webconsole/components/message-types/ConsoleCommand.js
@@ -2,19 +2,20 @@
 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * 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/. */
 
 "use strict";
 
 // React & Redux
-const { createFactory } = require("devtools/client/shared/vendor/react");
+const { createFactory, createElement } = require("devtools/client/shared/vendor/react");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const Message = createFactory(require("devtools/client/webconsole/components/Message"));
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
 
 ConsoleCommand.displayName = "ConsoleCommand";
 
 ConsoleCommand.propTypes = {
   message: PropTypes.object.isRequired,
   timestampsVisible: PropTypes.bool.isRequired,
   serviceContainer: PropTypes.object,
 };
@@ -29,19 +30,25 @@ function ConsoleCommand(props) {
     serviceContainer,
   } = props;
 
   const {
     indent,
     source,
     type,
     level,
-    messageText: messageBody,
+    messageText,
   } = message;
 
+  const messageBody = createElement("codemirror-highlighted", {
+    // Tell React to ignore changes inside the element.
+    // XXX - do we need to / how should we do this?
+    is: "foo",
+  }, dom.div({}, messageText));
+
   return Message({
     source,
     type,
     level,
     topLevelClasses: [],
     messageBody,
     serviceContainer,
     indent,