Bug 1463669 - WIP - Demonstrate syntax highlighting in console output
MozReview-Commit-ID: 5P8YrDg0L1H
--- 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,