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

MozReview-Commit-ID: 77qsML4CXlh

--HG--
rename : devtools/client/webconsole/new-console-output/output-wrapper-thingy.js => devtools/client/webconsole/new-console-output/new-console-output-wrapper.js

devtools/client/preferences/devtools.js

@@ -296,6 +296,9 @@ pref("devtools.webconsole.timestampMessages", false);
 // to automatically trigger multiline editing (equivalent to shift + enter).
 pref("devtools.webconsole.autoMultiline", true);
 
+// Enable the experimental webconsole frontend (work in progress)
+pref("devtools.webconsole.new-frontend-enabled", false);
+
 // The number of lines that are displayed in the web console for the Net,
 // CSS, JS and Web Developer categories. These defaults should be kept in sync
 // with DEFAULT_LOG_LIMIT in the webconsole frontend.

devtools/client/webconsole/jsterm.js

@@ -372,7 +372,7 @@ JSTerm.prototype = {
       return;
     }
 
-    if (this.hud.SUPER_FRONTEND_EXPERIMENT) {
+    if (this.hud.NEW_CONSOLE_OUTPUT_ENABLED) {
       this.hud.newConsoleOutput.dispatchMessageAdd(response);
       // @TODO figure out what to do about the callback.
       return;
@@ -944,7 +944,7 @@ JSTerm.prototype = {
 
     this._sidebarDestroy();
 
-    if (hud.SUPER_FRONTEND_EXPERIMENT) {
+    if (hud.NEW_CONSOLE_OUTPUT_ENABLED) {
       hud.newConsoleOutput.dispatchMessagesClear();
     }
 

devtools/client/webconsole/new-console-output/components/console-output.js

@@ -15,14 +15,16 @@ const { connect } = require("devtools/client/shared/vendor/react-redux");
 const MessageContainer = createFactory(require("devtools/client/webconsole/new-console-output/components/message-container").MessageContainer);
 
 const ConsoleOutput = createClass({
-  displayName: "ConsoleOutput",
 
   propTypes: {
     jsterm: PropTypes.object.isRequired,
     // This function is created in mergeProps
-    openVariablesView: PropTypes.func.isRequired
+    openVariablesView: PropTypes.func.isRequired,
+    messages: PropTypes.array.isRequired
   },
 
+  displayName: "ConsoleOutput",
+
   componentWillUpdate() {
     // @TODO Move this to a parent component.
     let node = ReactDOM.findDOMNode(this).parentNode.parentNode.parentNode;

devtools/client/webconsole/new-console-output/components/message-container.js

@@ -9,21 +9,22 @@
 // React & Redux
 const {
   createClass,
-  createElement,
+  createFactory,
   PropTypes
 } = require("devtools/client/shared/vendor/react");
 
 const MessageContainer = createClass({
-  displayName: "MessageContainer",
 
   propTypes: {
     message: PropTypes.object.isRequired
   },
 
+  displayName: "MessageContainer",
+
   render() {
     const { message } = this.props;
     let MessageComponent = getMessageComponent(message.messageType);
-    return createElement(MessageComponent, { message });
+    return MessageComponent({ message });
   }
 });
 
@@ -40,7 +41,7 @@ function getMessageComponent(messageType) {
       MessageComponent = require("devtools/client/webconsole/new-console-output/components/message-types/page-error").PageError;
       break;
   }
-  return MessageComponent;
+  return createFactory(MessageComponent);
 }
 
 module.exports.MessageContainer = MessageContainer;

devtools/client/webconsole/new-console-output/components/message-icon.js

@@ -0,0 +1,32 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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 {
+  DOM: dom,
+  PropTypes
+} = require("devtools/client/shared/vendor/react");
+const {l10n} = require("devtools/client/webconsole/new-console-output/utils/messages");
+
+MessageIcon.displayName = "MessageIcon";
+
+MessageIcon.propTypes = {
+  severity: PropTypes.string.isRequired,
+};
+
+function MessageIcon(props) {
+  const { severity } = props;
+
+  const title = l10n.getStr("severity." + severity);
+  return dom.div({
+    className: "icon",
+    title
+  });
+}
+
+module.exports.MessageIcon = MessageIcon;

devtools/client/webconsole/new-console-output/components/message-types/console-api-call.js

@@ -8,11 +8,12 @@
 
 // React & Redux
 const {
-  createElement,
+  createFactory,
   DOM: dom,
   PropTypes
 } = require("devtools/client/shared/vendor/react");
-const { MessageRepeat } = require("devtools/client/webconsole/new-console-output/components/message-repeat");
+const MessageRepeat = createFactory(require("devtools/client/webconsole/new-console-output/components/message-repeat").MessageRepeat);
+const MessageIcon = createFactory(require("devtools/client/webconsole/new-console-output/components/message-icon").MessageIcon);
 
 ConsoleApiCall.displayName = "ConsoleApiCall";
 
@@ -25,13 +26,23 @@ function ConsoleApiCall(props) {
   const messageBody =
     dom.span({className: "message-body devtools-monospace"},
       formatTextContent(message.data.arguments));
-  const repeat = createElement(MessageRepeat, {repeat: message.repeat});
+  const icon = MessageIcon({severity: message.severity});
+  const repeat = MessageRepeat({repeat: message.repeat});
   const children = [
     messageBody,
     repeat
   ];
 
-  return dom.div({ className: "message cm-s-mozilla" },
+  // @TODO Use of "is" is a temporary hack to get the category and severity
+  // attributes to be applied. There are targeted in webconsole's CSS rules,
+  // so if we remove this hack, we have to modify the CSS rules accordingly.
+  return dom.div({
+    class: "message cm-s-mozilla",
+    is: "fdt-message",
+    category: message.category,
+    severity: message.severity
+  },
+    icon,
     dom.span({className: "message-body-wrapper"},
       dom.span({},
         dom.span({className: "message-flex-body"},

devtools/client/webconsole/new-console-output/components/message-types/date-preview.js

@@ -14,15 +14,16 @@ const {
 } = require("devtools/client/shared/vendor/react");
 
 const VariablesViewLink = createFactory(require("devtools/client/webconsole/new-console-output/components/variables-view-link").VariablesViewLink);
+const MessageIcon = createFactory(require("devtools/client/webconsole/new-console-output/components/message-icon").MessageIcon);
 
 DatePreview.displayName = "DatePreview";
 
 DatePreview.propTypes = {
-  message: PropTypes.object.isRequired,
+  data: PropTypes.object.isRequired,
 };
 
 function DatePreview(props) {
-  const { data } = props;
+  const { data, category, severity } = props;
   const { preview } = data;
 
   const dateString = new Date(preview.timestamp).toISOString();
@@ -33,8 +34,18 @@ function DatePreview(props) {
     }),
     dom.span({ className: "cm-string-2" }, ` ${dateString}`)
   ];
+  const icon = MessageIcon({ severity });
 
-  return dom.div({ className: "message cm-s-mozilla" },
+  // @TODO Use of "is" is a temporary hack to get the category and severity
+  // attributes to be applied. There are targeted in webconsole's CSS rules,
+  // so if we remove this hack, we have to modify the CSS rules accordingly.
+  return dom.div({
+    class: "message cm-s-mozilla",
+    is: "fdt-message",
+    category: category,
+    severity: severity
+  },
+    icon,
     dom.span({
       className: "message-body-wrapper message-body devtools-monospace"
     }, dom.span({},

devtools/client/webconsole/new-console-output/components/message-types/default-renderer.js

@@ -8,13 +8,28 @@
 
 // React & Redux
 const {
+  createFactory,
   DOM: dom,
 } = require("devtools/client/shared/vendor/react");
+const MessageIcon = createFactory(require("devtools/client/webconsole/new-console-output/components/message-icon").MessageIcon);
 
 DefaultRenderer.displayName = "DefaultRenderer";
 
 function DefaultRenderer(props) {
-  return dom.div({ className: "message cm-s-mozilla" },
+  const { category, severity } = props;
+
+  const icon = MessageIcon({ severity });
+
+  // @TODO Use of "is" is a temporary hack to get the category and severity
+  // attributes to be applied. There are targeted in webconsole's CSS rules,
+  // so if we remove this hack, we have to modify the CSS rules accordingly.
+  return dom.div({
+    class: "message cm-s-mozilla",
+    is: "fdt-message",
+    category: category,
+    severity: severity
+  },
+    icon,
     "This evaluation result type is not supported yet."
   );
 }

devtools/client/webconsole/new-console-output/components/message-types/evaluation-result.js

@@ -8,11 +8,9 @@
 
 // React & Redux
 const {
-  createElement,
-  DOM: dom,
+  createFactory,
   PropTypes
 } = require("devtools/client/shared/vendor/react");
-const { MessageRepeat } = require("devtools/client/webconsole/new-console-output/components/message-repeat");
 
 EvaluationResult.displayName = "EvaluationResult";
 
@@ -23,17 +21,22 @@ EvaluationResult.propTypes = {
 function EvaluationResult(props) {
   const { message } = props;
   let PreviewComponent = getPreviewComponent(message.data);
-  return createElement(PreviewComponent, { data: message.data });
+
+  return PreviewComponent({
+    data: message.data,
+    category: message.category,
+    severity: message.severity
+  });
 }
 
 function getPreviewComponent(data) {
   if (typeof data.class != "undefined") {
     switch (data.class) {
       case "Date":
-        return require("devtools/client/webconsole/new-console-output/components/message-types/date-preview").DatePreview;
+        return createFactory(require("devtools/client/webconsole/new-console-output/components/message-types/date-preview").DatePreview);
     }
   }
-  return require("devtools/client/webconsole/new-console-output/components/message-types/default-renderer").DefaultRenderer;
+  return createFactory(require("devtools/client/webconsole/new-console-output/components/message-types/default-renderer").DefaultRenderer);
 }
 
 module.exports.EvaluationResult = EvaluationResult;

devtools/client/webconsole/new-console-output/components/message-types/page-error.js

@@ -8,11 +8,12 @@
 
 // React & Redux
 const {
-  createElement,
+  createFactory,
   DOM: dom,
   PropTypes
 } = require("devtools/client/shared/vendor/react");
-const { MessageRepeat } = require("devtools/client/webconsole/new-console-output/components/message-repeat");
+const MessageRepeat = createFactory(require("devtools/client/webconsole/new-console-output/components/message-repeat").MessageRepeat);
+const MessageIcon = createFactory(require("devtools/client/webconsole/new-console-output/components/message-icon").MessageIcon);
 
 PageError.displayName = "PageError";
 
@@ -25,13 +26,23 @@ function PageError(props) {
   const messageBody =
     dom.span({className: "message-body devtools-monospace"},
       message.data.errorMessage);
-  const repeat = createElement(MessageRepeat, {repeat: message.repeat});
+  const repeat = MessageRepeat({repeat: message.repeat});
+  const icon = MessageIcon({severity: message.severity});
   const children = [
     messageBody,
     repeat
   ];
 
-  return dom.div({ className: "message cm-s-mozilla"},
+  // @TODO Use of "is" is a temporary hack to get the category and severity
+  // attributes to be applied. There are targeted in webconsole's CSS rules,
+  // so if we remove this hack, we have to modify the CSS rules accordingly.
+  return dom.div({
+    class: "message cm-s-mozilla",
+    is: "fdt-message",
+    category: message.category,
+    severity: message.severity
+  },
+    icon,
     dom.span({className: "message-body-wrapper"},
       dom.span({},
         dom.span({className: "message-flex-body"},

devtools/client/webconsole/new-console-output/components/moz.build

@@ -10,6 +10,7 @@ DIRS += [
 DevToolsModules(
     'console-output.js',
     'message-container.js',
+    'message-icon.js',
     'message-repeat.js',
     'variables-view-link.js'
 )

devtools/client/webconsole/new-console-output/constants.js

@@ -73,4 +73,5 @@ const levels = {
 };
 
 // Combine into a single constants object
-module.exports = Object.assign({}, actionTypes, categories, severities, fragments, levels);
+module.exports = Object.assign({}, actionTypes, categories, severities,
+  fragments, levels);

devtools/client/webconsole/new-console-output/main.js

@@ -1,6 +1,9 @@
 /* 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/. */
+
+ /* global BrowserLoader */
+
 "use strict";
 
 var { utils: Cu } = Components;
@@ -15,10 +18,9 @@ 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", {});
+const NewConsoleOutputWrapper = require("./new-console-output-wrapper");
 
 this.NewConsoleOutput = function(parentNode, jsterm) {
-  console.log("Creating NewConsoleOutput", parentNode, OutputWrapperThingy);
-  return new OutputWrapperThingy(parentNode, jsterm);
-}
+  console.log("Creating NewConsoleOutput", parentNode, NewConsoleOutputWrapper);
+  return new NewConsoleOutputWrapper(parentNode, jsterm);
+};

devtools/client/webconsole/new-console-output/moz.build

@@ -13,7 +13,7 @@ DIRS += [
 DevToolsModules(
     'constants.js',
     'main.js',
-    'output-wrapper-thingy.js',
+    'new-console-output-wrapper.js',
     'store.js',
 )
 

devtools/client/webconsole/new-console-output/new-console-output-wrapper.js

@@ -8,22 +8,19 @@ const React = require("devtools/client/shared/vendor/react");
 const ReactDOM = require("devtools/client/shared/vendor/react-dom");
 const { Provider } = require("devtools/client/shared/vendor/react-redux");
 
-const {
-  MESSAGE_ADD,
-  MESSAGES_CLEAR
-} = require("devtools/client/webconsole/new-console-output/constants");
 const actions = require("devtools/client/webconsole/new-console-output/actions/messages");
 const { store } = require("devtools/client/webconsole/new-console-output/store");
 
 const ConsoleOutput = React.createFactory(require("devtools/client/webconsole/new-console-output/components/console-output"));
 
-function OutputWrapperThingy(parentNode, jsterm) {
+function NewConsoleOutputWrapper(parentNode, jsterm) {
   let childComponent = ConsoleOutput({ jsterm });
-  let provider = React.createElement(Provider, { store: store }, childComponent);
+  let provider = React.createElement(
+    Provider, { store: store }, childComponent);
   this.body = ReactDOM.render(provider, parentNode);
 }
 
-OutputWrapperThingy.prototype = {
+NewConsoleOutputWrapper.prototype = {
   dispatchMessageAdd: (message) => {
     store.dispatch(actions.messageAdd(message));
   },
@@ -33,4 +30,4 @@ OutputWrapperThingy.prototype = {
 };
 
 // Exports from this module
-module.exports = OutputWrapperThingy;
+module.exports = NewConsoleOutputWrapper;

devtools/client/webconsole/new-console-output/reducers/messages.js

@@ -5,9 +5,6 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
-const Immutable = require("devtools/client/shared/vendor/immutable");
-
-const { getRepeatId } = require("devtools/client/webconsole/new-console-output/utils/messages");
 const constants = require("devtools/client/webconsole/new-console-output/constants");
 
 function messages(state = [], action) {
@@ -18,7 +15,7 @@ function messages(state = [], action) {
         let lastMessage = state[state.length - 1];
         if (lastMessage.repeatId === newMessage.repeatId) {
           newMessage.repeat = lastMessage.repeat + 1;
-          return state.slice(0, state.length-1).concat(newMessage);
+          return state.slice(0, state.length - 1).concat(newMessage);
         }
       }
       return state.concat([ newMessage ]);

devtools/client/webconsole/new-console-output/test/components/chrome.ini

@@ -7,5 +7,7 @@ support-files =
 [test_console-api-call_repeat.html]
 [test_date-preview.html]
 [test_evaluation-result.html]
+[test_message-icon.html]
 [test_message-container.html]
 [test_message-repeat.html]
+[test_page-error.html]

devtools/client/webconsole/new-console-output/test/components/head.js

@@ -1,5 +1,9 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/* exported getPacket, renderComponent, shallowRenderComponent,
+   cleanActualHTML, cleanExpectedHTML */
+
 "use strict";
 
 var { utils: Cu } = Components;
@@ -36,12 +40,17 @@ testCommands.set("new Date()", {
   commandType: "evaluationResult",
   expectedText: "Date 1984-03-15T00:00:00.000Z"
 });
+testCommands.set("pageError", {
+  command: null,
+  commandType: "pageError",
+  expectedText: "ReferenceError: asdf is not defined"
+});
 
 function* getPacket(command, type = "evaluationResult") {
   try {
     // Attach the console to the tab.
     let state = yield new Promise(function(resolve) {
-      attachConsoleToTab(["ConsoleAPI"], (state) => resolve(state));
+      attachConsoleToTab(["ConsoleAPI"], resolve);
     });
 
     // Run the command and get the packet.
@@ -49,12 +58,12 @@ function* getPacket(command, type = "evaluationResult") {
     switch (type) {
       case "consoleAPICall":
         packet = yield new Promise((resolve) => {
-          function onConsoleApiCall(type, packet) {
+          function onConsoleApiCall(apiCallType, apiCallPacket) {
             state.dbgClient.removeListener("consoleAPICall", onConsoleApiCall);
-            resolve(packet)
-          };
-          state.dbgClient.addListener("consoleAPICall", onConsoleApiCall)
-          eval(`top.${command}`);
+            resolve(apiCallPacket);
+          }
+          state.dbgClient.addListener("consoleAPICall", onConsoleApiCall);
+          state.client.evaluateJS(`top.${command}`);
         });
         break;
       case "evaluationResult":
@@ -62,6 +71,53 @@ function* getPacket(command, type = "evaluationResult") {
           state.client.evaluateJS(command, resolve);
         });
         break;
+      case "pageError":
+        // @TODO: get packet with RDP
+        packet = {
+          "from": "server1.conn1.child1/consoleActor2",
+          "type": "pageError",
+          "pageError": {
+            "errorMessage": "ReferenceError: asdf is not defined",
+            "sourceName": "data:text/html,<script>asdf</script>",
+            "lineText": "",
+            "lineNumber": 1,
+            "columnNumber": 1,
+            "category": "content javascript",
+            "timeStamp": 1455735574091,
+            "warning": false,
+            "error": false,
+            "exception": true,
+            "strict": false,
+            "info": false,
+            "private": false,
+            "stacktrace": [{
+              "columnNumber": 68,
+              "filename": "test.html",
+              "functionName": "baz",
+              "language": 2,
+              "lineNumber": 1
+            }, {
+              "columnNumber": 43,
+              "filename": "test.html",
+              "functionName": "bar",
+              "language": 2,
+              "lineNumber": 2
+            }, {
+              "columnNumber": 18,
+              "filename": "test.html",
+              "functionName": "foo",
+              "language": 2,
+              "lineNumber": 3
+            }, {
+              "columnNumber": 150,
+              "filename": "test.html",
+              "functionName": "",
+              "language": 2,
+              "lineNumber": 4
+            }]
+          }
+        };
+        break;
     }
 
     closeDebugger(state);

devtools/client/webconsole/new-console-output/test/components/test_date-preview.html

@@ -21,6 +21,8 @@ window.onload = Task.async(function* () {
   const message = prepareMessage(packet);
   const props = {
     data: message.data,
+    severity: message.severity,
+    category: message.category,
   };
   const rendered = renderComponent(DatePreview, props);
 

devtools/client/webconsole/new-console-output/test/components/test_evaluation-result.html

@@ -39,7 +39,7 @@ window.onload = Task.async(function* () {
     };
     const rendered = renderComponent(EvaluationResult, props);
 
-    ok(rendered.textContent.contains(testValue.expectedText),
+    ok(rendered.textContent.includes(testValue.expectedText),
       "EvaluationResult pipes data to its children as expected");
 }
 

devtools/client/webconsole/new-console-output/test/components/test_message-container.html

@@ -18,6 +18,7 @@ window.onload = Task.async(function* () {
   const { MessageContainer } = require("devtools/client/webconsole/new-console-output/components/message-container");
   const { ConsoleApiCall } = require("devtools/client/webconsole/new-console-output/components/message-types/console-api-call");
   const { EvaluationResult } = require("devtools/client/webconsole/new-console-output/components/message-types/evaluation-result");
+  const { PageError } = require("devtools/client/webconsole/new-console-output/components/message-types/page-error");
 
   yield testFullRender();
   yield testGetMessageComponent();
@@ -39,7 +40,7 @@ window.onload = Task.async(function* () {
     };
     const rendered = renderComponent(MessageContainer, props);
 
-    ok(rendered.textContent.contains(testValue.expectedText),
+    ok(rendered.textContent.includes(testValue.expectedText),
       "MessageContainer pipes data to its children as expected");
   }
 
@@ -55,6 +56,10 @@ window.onload = Task.async(function* () {
       {
         commandObj: testCommands.get("new Date()"),
         expectedComponent: EvaluationResult
+      },
+      {
+        commandObj: testCommands.get("pageError"),
+        expectedComponent: PageError
       }
     ];
 

devtools/client/webconsole/new-console-output/test/components/test_message-icon.html

@@ -0,0 +1,32 @@
+<!DOCTYPE HTML>
+<html lang="en">
+<head>
+  <meta charset="utf8">
+  <title>Test for MessageRepeat component</title>
+  <script type="text/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <script type="application/javascript;version=1.8" src="head.js"></script>
+  <!-- Any copyright is dedicated to the Public Domain.
+     - http://creativecommons.org/publicdomain/zero/1.0/ -->
+</head>
+<body>
+<p>Test for MessageIcon component</p>
+
+<script type="text/javascript;version=1.8">
+window.onload = Task.async(function* () {
+  const {
+    SEVERITY_CLASS_FRAGMENTS,
+    SEVERITY_ERROR,
+  } = require("devtools/client/webconsole/new-console-output/constants");
+  const { MessageIcon } = require("devtools/client/webconsole/new-console-output/components/message-icon");
+
+  let severity = SEVERITY_CLASS_FRAGMENTS[SEVERITY_ERROR];
+  const iconRendered = renderComponent(MessageIcon, { severity });
+  ok(iconRendered.classList.contains("icon"), "MessageIcon has expected class");
+  is(iconRendered.getAttribute("title"), "Error",
+    "MessageIcon shows correct title attribute");
+
+  SimpleTest.finish();
+});
+</script>
+</body>
+</html>

devtools/client/webconsole/new-console-output/test/components/test_page-error.html

@@ -0,0 +1,32 @@
+<!DOCTYPE HTML>
+<html lang="en">
+<head>
+  <meta charset="utf8">
+  <title>Test for PageError component</title>
+  <script type="text/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <script type="application/javascript;version=1.8" src="head.js"></script>
+  <!-- Any copyright is dedicated to the Public Domain.
+     - http://creativecommons.org/publicdomain/zero/1.0/ -->
+</head>
+<body>
+<p>Test for PageError component</p>
+
+<script type="text/javascript;version=1.8">
+window.onload = Task.async(function* () {
+  const { prepareMessage } = require("devtools/client/webconsole/new-console-output/utils/messages");
+  const { PageError } = require("devtools/client/webconsole/new-console-output/components/message-types/page-error");
+
+  const packet = yield getPacket(null, "pageError");
+  const message = prepareMessage(packet);
+  const rendered = renderComponent(PageError, {message});
+
+  const queryPath = "div.message.cm-s-mozilla span span.message-flex-body span.message-body.devtools-monospace";
+  const messageBody = rendered.querySelectorAll(queryPath);
+  is(messageBody.length, 1, "PageError outputs expected HTML structure");
+  is(messageBody[0].textContent, testCommands.get("pageError").expectedText, "PageError outputs expected text");
+
+  SimpleTest.finish()
+});
+</script>
+</body>
+</html>

devtools/client/webconsole/new-console-output/test/store/head.js

@@ -1,12 +1,13 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
+/* exported storeFactory */
+
 "use strict";
 
-var { classes: Cc, interfaces: Ci, utils: Cu, results: Cr } = Components;
+var { utils: Cu } = Components;
 var { require } = Cu.import("resource://devtools/shared/Loader.jsm", {});
 
-var Services = require("Services");
 var DevToolsUtils = require("devtools/shared/DevToolsUtils");
 DevToolsUtils.testing = true;
 DevToolsUtils.dumpn.wantLogging = true;

devtools/client/webconsole/new-console-output/utils/messages.js

@@ -15,10 +15,11 @@ const {
   SEVERITY_CLASS_FRAGMENTS,
   SEVERITY_ERROR,
   SEVERITY_WARNING,
-  SEVERITY_INFO,
   SEVERITY_LOG,
 } = require("../constants");
 const WebConsoleUtils = require("devtools/shared/webconsole/utils").Utils;
+const STRINGS_URI = "chrome://devtools/locale/webconsole.properties";
+const l10n = new WebConsoleUtils.L10n(STRINGS_URI);
 
 function prepareMessage(packet) {
   // @TODO turn this into an Immutable Record.
@@ -88,3 +89,5 @@ function getRepeatId(message) {
 exports.prepareMessage = prepareMessage;
 // Export for use in testing.
 exports.getRepeatId = getRepeatId;
+
+exports.l10n = l10n;

devtools/client/webconsole/new-console-output/utils/variables-view.js

@@ -4,6 +4,7 @@
  * 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/. */
 
+/* global window */
 "use strict";
 
 /**
@@ -13,4 +14,4 @@
  */
 exports.openVariablesView = (objectActor) => {
   window.jsterm.openVariablesView({objectActor});
-}
+};

devtools/client/webconsole/webconsole.js

@@ -198,6 +198,7 @@ const MIN_FONT_SIZE = 10;
 const PREF_CONNECTION_TIMEOUT = "devtools.debugger.remote-timeout";
 const PREF_PERSISTLOG = "devtools.webconsole.persistlog";
 const PREF_MESSAGE_TIMESTAMP = "devtools.webconsole.timestampMessages";
+const PREF_NEW_FRONTEND_ENABLED = "devtools.webconsole.new-frontend-enabled";
 
 /**
  * A WebConsoleFrame instance is an interactive console initialized *per target*
@@ -508,7 +509,8 @@ 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.NEW_CONSOLE_OUTPUT_ENABLED = !this.owner._browserConsole &&
+      Services.prefs.getBoolPref(PREF_NEW_FRONTEND_ENABLED);
 
     this._initDefaultFilterPrefs();
 
@@ -569,7 +571,7 @@ WebConsoleFrame.prototype = {
     this.jsterm = new JSTerm(this);
     this.jsterm.init();
 
-    if (this.SUPER_FRONTEND_EXPERIMENT) {
+    if (this.NEW_CONSOLE_OUTPUT_ENABLED) {
       // @TODO Remove this once JSTerm is handled with React/Redux.
       this.window.jsterm = this.jsterm;
       console.log("Entering experimental mode for console frontend");
@@ -3349,7 +3351,7 @@ WebConsoleConnectionProxy.prototype = {
    */
   _onPageError: function(type, packet) {
     if (this.webConsoleFrame && packet.from == this._consoleActor) {
-      if (this.webConsoleFrame.SUPER_FRONTEND_EXPERIMENT) {
+      if (this.webConsoleFrame.NEW_CONSOLE_OUTPUT_ENABLED) {
         this.webConsoleFrame.newConsoleOutput.dispatchMessageAdd(packet);
         return;
       }
@@ -3385,7 +3387,7 @@ WebConsoleConnectionProxy.prototype = {
    */
   _onConsoleAPICall: function(type, packet) {
     if (this.webConsoleFrame && packet.from == this._consoleActor) {
-      if (this.webConsoleFrame.SUPER_FRONTEND_EXPERIMENT) {
+      if (this.webConsoleFrame.NEW_CONSOLE_OUTPUT_ENABLED) {
         this.webConsoleFrame.newConsoleOutput.dispatchMessageAdd(packet);
       } else {
         this.webConsoleFrame.handleConsoleAPICall(packet.message);

devtools/package.json

@@ -1,15 +0,0 @@
-{
-  "name": "firefox-devtools",
-  "version": "1.0.0",
-  "devDependencies": {
-    "babel-preset-es2015": "^6.6.0",
-    "babel-register": "^6.7.2",
-    "expect": "^1.16.0",
-    "jsdom": "^8.1.0",
-    "mocha": "^2.4.5",
-    "mocha-jsdom": "^1.1.0"
-  },
-  "scripts": {
-    "test": "NODE_PATH=`pwd`/../ mocha client/webconsole/new-console-output/test/**/*.test.js --compilers js:babel-register"
-  }
-}