diff --git a/devtools/client/webconsole/moz.build b/devtools/client/webconsole/moz.build
index 88002231415b..619ef7be3fb5 100644
--- a/devtools/client/webconsole/moz.build
+++ b/devtools/client/webconsole/moz.build
@@ -7,7 +7,8 @@
BROWSER_CHROME_MANIFESTS += ['test/browser.ini']
DIRS += [
- 'net'
+ 'net',
+ 'new-console-output',
]
DevToolsModules(
diff --git a/devtools/client/webconsole/new-console-output/dummy-child-component.js b/devtools/client/webconsole/new-console-output/dummy-child-component.js
new file mode 100644
index 000000000000..7ca5987eb116
--- /dev/null
+++ b/devtools/client/webconsole/new-console-output/dummy-child-component.js
@@ -0,0 +1,20 @@
+/* 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";
+
+const React = require("devtools/client/shared/vendor/react");
+const DOM = React.DOM;
+
+var DummyChildComponent = React.createClass({
+ displayName: "DummyChildComponent",
+
+ render() {
+ return (
+ DOM.div({}, "DummyChildComponent foobar")
+ );
+ }
+});
+
+// Exports from this module
+module.exports = DummyChildComponent;
diff --git a/devtools/client/webconsole/new-console-output/main.js b/devtools/client/webconsole/new-console-output/main.js
new file mode 100644
index 000000000000..45dd0ec021b6
--- /dev/null
+++ b/devtools/client/webconsole/new-console-output/main.js
@@ -0,0 +1,24 @@
+/* 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";
+
+var { utils: Cu } = Components;
+
+Cu.import("resource://gre/modules/XPCOMUtils.jsm");
+Cu.import("resource://devtools/client/shared/browser-loader.js");
+
+// Initialize module loader and load all modules of the new inline
+// preview feature. The entire code-base doesn't need any extra
+// privileges and runs entirely in content scope.
+const rootUrl = "resource://devtools/client/webconsole/new-console-output/";
+const require = BrowserLoader({
+ baseURI: rootUrl,
+ window: this}).require;
+const OutputWrapperThingy = require("./output-wrapper-thingy");
+const { Services } = Cu.import("resource://gre/modules/Services.jsm", {});
+
+this.NewConsoleOutput = function(parentNode) {
+ console.log("Creating NewConsoleOutput", parentNode, OutputWrapperThingy);
+ return new OutputWrapperThingy(parentNode);
+}
diff --git a/devtools/client/webconsole/new-console-output/moz.build b/devtools/client/webconsole/new-console-output/moz.build
new file mode 100644
index 000000000000..ede9cde2b1a9
--- /dev/null
+++ b/devtools/client/webconsole/new-console-output/moz.build
@@ -0,0 +1,15 @@
+# vim: set filetype=python:
+# 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/.
+
+#DIRS += [
+# 'components',
+# 'utils'
+#]
+
+DevToolsModules(
+ 'dummy-child-component.js',
+ 'main.js',
+ 'output-wrapper-thingy.js',
+)
\ No newline at end of file
diff --git a/devtools/client/webconsole/new-console-output/output-wrapper-thingy.js b/devtools/client/webconsole/new-console-output/output-wrapper-thingy.js
new file mode 100644
index 000000000000..1bbfde4d7895
--- /dev/null
+++ b/devtools/client/webconsole/new-console-output/output-wrapper-thingy.js
@@ -0,0 +1,17 @@
+/* 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
+const React = require("devtools/client/shared/vendor/react");
+const ReactDOM = require("devtools/client/shared/vendor/react-dom");
+const DummyChildComponent = React.createFactory(require("./dummy-child-component"));
+
+function OutputWrapperThingy(parentNode) {
+ let childComponent = DummyChildComponent({});
+ this.body = ReactDOM.render(childComponent, parentNode);
+}
+
+// Exports from this module
+module.exports = OutputWrapperThingy;
\ No newline at end of file
diff --git a/devtools/client/webconsole/webconsole.js b/devtools/client/webconsole/webconsole.js
index c08e44abceeb..ce68c6cfceba 100644
--- a/devtools/client/webconsole/webconsole.js
+++ b/devtools/client/webconsole/webconsole.js
@@ -508,6 +508,7 @@ WebConsoleFrame.prototype = {
_initUI: function() {
this.document = this.window.document;
this.rootElement = this.document.documentElement;
+ this.SUPER_FRONTEND_EXPERIMENT = !this.owner._browserConsole && !!this.window.NewConsoleOutput;
this._initDefaultFilterPrefs();
@@ -529,6 +530,18 @@ WebConsoleFrame.prototype = {
this.outputNode = doc.getElementById("output-container");
this.outputWrapper = doc.getElementById("output-wrapper");
+ if (this.SUPER_FRONTEND_EXPERIMENT) {
+ console.log("Entering experimental mode for console frontend");
+
+ // XXX: We should actually stop output from happening on old output
+ // panel, but for now let's just hide it.
+ this.experimentalOutputNode = this.outputNode.cloneNode();
+ this.outputNode.hidden = true;
+ this.outputNode.parentNode.appendChild(this.experimentalOutputNode);
+ this.newConsoleOutput = new this.window.NewConsoleOutput(this.experimentalOutputNode);
+ console.log("Created newConsoleOutput", this.newConsoleOutput);
+ }
+
this.completeNode = doc.querySelector(".jsterm-complete-node");
this.inputNode = doc.querySelector(".jsterm-input-node");
diff --git a/devtools/client/webconsole/webconsole.xul b/devtools/client/webconsole/webconsole.xul
index 2c2eba0a7b1e..9d64bf6a9c59 100644
--- a/devtools/client/webconsole/webconsole.xul
+++ b/devtools/client/webconsole/webconsole.xul
@@ -26,6 +26,8 @@
+