Bug 1260283 - Implement new console output frontend behind a pref. r=linclark

MozReview-Commit-ID: 7xr6Wm45LK5

devtools/client/webconsole/moz.build

@@ -7,7 +7,8 @@
 BROWSER_CHROME_MANIFESTS += ['test/browser.ini']
 
 DIRS += [
-    'net'
+    'net',
+    'new-console-output',
 ]
 
 DevToolsModules(

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;

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);
+}

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',
+)

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;

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");
 

devtools/client/webconsole/webconsole.xul

@@ -26,6 +26,8 @@
 
   <script type="application/javascript;version=1.8"
           src="chrome://devtools/content/shared/theme-switching.js"/>
+  <script type="application/javascript;version=1.8"
+          src="resource://devtools/client/webconsole/new-console-output/main.js"/>
   <script type="text/javascript" src="chrome://global/content/globalOverlay.js"/>
   <script type="text/javascript" src="resource://devtools/client/webconsole/net/main.js"/>
   <script type="text/javascript"><![CDATA[