Bug 1306751 - New console frontend: Emit new-message from componentDidMount. r=bgrins
authorLin Clark <lclark@mozilla.com>
Sun, 02 Oct 2016 15:16:50 -0700
changeset 359160 ff529dac586a8d4a78c04b8692b825add9cc9108
parent 359159 0ea67943bb6caa9f49f44d10891010b4b5bd9ca1
child 359161 d47f4b91b5297c8173a2ee804cf48f196174ffd6
push id6795
push userjlund@mozilla.com
push dateMon, 23 Jan 2017 14:19:46 +0000
treeherdermozilla-beta@76101b503191 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbgrins
bugs1306751
milestone52.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1306751 - New console frontend: Emit new-message from componentDidMount. r=bgrins MozReview-Commit-ID: 1JS6FcDU9qr
devtools/client/webconsole/jsterm.js
devtools/client/webconsole/new-console-output/components/console-output.js
devtools/client/webconsole/new-console-output/components/message-types/console-api-call.js
devtools/client/webconsole/new-console-output/components/message-types/evaluation-result.js
devtools/client/webconsole/new-console-output/components/message-types/network-event-message.js
devtools/client/webconsole/new-console-output/components/message-types/page-error.js
devtools/client/webconsole/new-console-output/components/message.js
devtools/client/webconsole/new-console-output/main.js
devtools/client/webconsole/new-console-output/new-console-output-wrapper.js
devtools/client/webconsole/webconsole.js
--- a/devtools/client/webconsole/jsterm.js
+++ b/devtools/client/webconsole/jsterm.js
@@ -372,17 +372,17 @@ JSTerm.prototype = {
         result.type == "undefined" &&
         helperResult && !helperHasRawOutput) {
       callback && callback();
       return;
     }
 
     if (this.hud.NEW_CONSOLE_OUTPUT_ENABLED) {
       this.hud.newConsoleOutput.dispatchMessageAdd(response);
-      callback && callback(this.hud.newConsoleOutput.getLastMessage());
+      callback && callback();
       return;
     }
     let msg = new Messages.JavaScriptEvalOutput(response,
                                                 errorMessage, errorDocLink);
     this.hud.output.addMessage(msg);
 
     if (callback) {
       let oldFlushCallback = this.hud._flushCallback;
--- a/devtools/client/webconsole/new-console-output/components/console-output.js
+++ b/devtools/client/webconsole/new-console-output/components/console-output.js
@@ -23,16 +23,17 @@ const ConsoleOutput = createClass({
   propTypes: {
     hudProxyClient: PropTypes.object.isRequired,
     messages: PropTypes.object.isRequired,
     messagesUi: PropTypes.object.isRequired,
     sourceMapService: PropTypes.object,
     onViewSourceInDebugger: PropTypes.func.isRequired,
     openNetworkPanel: PropTypes.func.isRequired,
     openLink: PropTypes.func.isRequired,
+    emitNewMessage: PropTypes.func.isRequired,
     autoscroll: PropTypes.bool.isRequired,
   },
 
   componentDidMount() {
     scrollToBottom(this.outputNode);
   },
 
   componentWillUpdate(nextProps, nextState) {
@@ -62,29 +63,31 @@ const ConsoleOutput = createClass({
       hudProxyClient,
       messages,
       messagesUi,
       messagesTableData,
       sourceMapService,
       onViewSourceInDebugger,
       openNetworkPanel,
       openLink,
+      emitNewMessage,
     } = this.props;
 
     let messageNodes = messages.map((message) => {
       return (
         MessageContainer({
           dispatch,
           hudProxyClient,
           message,
           key: message.id,
           sourceMapService,
           onViewSourceInDebugger,
           openNetworkPanel,
           openLink,
+          emitNewMessage,
           open: messagesUi.includes(message.id),
           tableData: messagesTableData.get(message.id),
           autoscroll,
         })
       );
     });
     return (
       dom.div({
--- a/devtools/client/webconsole/new-console-output/components/message-types/console-api-call.js
+++ b/devtools/client/webconsole/new-console-output/components/message-types/console-api-call.js
@@ -34,17 +34,18 @@ ConsoleApiCall.defaultProps = {
 function ConsoleApiCall(props) {
   const {
     dispatch,
     message,
     sourceMapService,
     onViewSourceInDebugger,
     open,
     hudProxyClient,
-    tableData
+    tableData,
+    emitNewMessage,
   } = props;
   const {
     id: messageId,
     source, type,
     level,
     repeat,
     stacktrace,
     frame,
@@ -88,16 +89,17 @@ function ConsoleApiCall(props) {
     topLevelClasses,
     messageBody,
     repeat,
     frame,
     stacktrace,
     attachment,
     onViewSourceInDebugger,
     sourceMapService,
+    emitNewMessage,
     dispatch,
   });
 }
 
 function formatReps(parameters) {
   return (
     parameters
       // Get all the grips.
--- a/devtools/client/webconsole/new-console-output/components/message-types/evaluation-result.js
+++ b/devtools/client/webconsole/new-console-output/components/message-types/evaluation-result.js
@@ -21,16 +21,17 @@ EvaluationResult.propTypes = {
 };
 
 function EvaluationResult(props) {
   const { message } = props;
   const {
     source,
     type,
     level,
+    emitNewMessage,
   } = message;
 
   let messageBody;
   if (message.messageText) {
     messageBody = message.messageText;
   } else {
     messageBody = GripMessageBody({grip: message.parameters});
   }
@@ -39,13 +40,14 @@ function EvaluationResult(props) {
 
   const childProps = {
     source,
     type,
     level,
     topLevelClasses,
     messageBody,
     scrollToMessage: props.autoscroll,
+    emitNewMessage,
   };
   return Message(childProps);
 }
 
 module.exports = EvaluationResult;
--- a/devtools/client/webconsole/new-console-output/components/message-types/network-event-message.js
+++ b/devtools/client/webconsole/new-console-output/components/message-types/network-event-message.js
@@ -18,17 +18,17 @@ const { l10n } = require("devtools/clien
 NetworkEventMessage.displayName = "NetworkEventMessage";
 
 NetworkEventMessage.propTypes = {
   message: PropTypes.object.isRequired,
   openNetworkPanel: PropTypes.func.isRequired,
 };
 
 function NetworkEventMessage(props) {
-  const { message, openNetworkPanel } = props;
+  const { message, openNetworkPanel, emitNewMessage } = props;
   const { actor, source, type, level, request, isXHR } = message;
 
   const topLevelClasses = [ "cm-s-mozilla" ];
 
   function onUrlClick() {
     openNetworkPanel(actor);
   }
 
@@ -42,13 +42,14 @@ function NetworkEventMessage(props) {
   const messageBody = dom.span({}, method, xhr, url);
 
   const childProps = {
     source,
     type,
     level,
     topLevelClasses,
     messageBody,
+    emitNewMessage,
   };
   return Message(childProps);
 }
 
 module.exports = NetworkEventMessage;
--- a/devtools/client/webconsole/new-console-output/components/message-types/page-error.js
+++ b/devtools/client/webconsole/new-console-output/components/message-types/page-error.js
@@ -24,17 +24,18 @@ PageError.defaultProps = {
   open: false
 };
 
 function PageError(props) {
   const {
     message,
     open,
     sourceMapService,
-    onViewSourceInDebugger
+    onViewSourceInDebugger,
+    emitNewMessage,
   } = props;
   const {
     id: messageId,
     source,
     type,
     level,
     messageText: messageBody,
     repeat,
@@ -50,13 +51,14 @@ function PageError(props) {
     level,
     topLevelClasses: [],
     messageBody,
     repeat,
     frame,
     stacktrace,
     onViewSourceInDebugger,
     sourceMapService,
+    emitNewMessage,
   };
   return Message(childProps);
 }
 
 module.exports = PageError;
--- a/devtools/client/webconsole/new-console-output/components/message.js
+++ b/devtools/client/webconsole/new-console-output/components/message.js
@@ -36,18 +36,21 @@ const Message = createClass({
     stacktrace: PropTypes.any,
     messageId: PropTypes.string,
     scrollToMessage: PropTypes.bool,
     onViewSourceInDebugger: PropTypes.func,
     sourceMapService: PropTypes.any,
   },
 
   componentDidMount() {
-    if (this.props.scrollToMessage && this.messageNode) {
-      this.messageNode.scrollIntoView();
+    if (this.messageNode && this.props.emitNewMessage) {
+      this.props.emitNewMessage(this.messageNode);
+      if (this.props.scrollToMessage) {
+        this.messageNode.scrollIntoView();
+      }
     }
   },
 
   render() {
     const {
       messageId,
       open,
       source,
--- a/devtools/client/webconsole/new-console-output/main.js
+++ b/devtools/client/webconsole/new-console-output/main.js
@@ -13,12 +13,12 @@ const { BrowserLoader } = Cu.import("res
 
 // 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 NewConsoleOutputWrapper = BrowserLoader({
   baseURI: "resource://devtools/client/webconsole/new-console-output/",
   window}).require("./new-console-output-wrapper");
 
-this.NewConsoleOutput = function (parentNode, jsterm, toolbox, owner) {
+this.NewConsoleOutput = function (parentNode, jsterm, toolbox, owner, emitNewMessage) {
   console.log("Creating NewConsoleOutput", parentNode, NewConsoleOutputWrapper);
-  return new NewConsoleOutputWrapper(parentNode, jsterm, toolbox, owner);
+  return new NewConsoleOutputWrapper(parentNode, jsterm, toolbox, owner, emitNewMessage);
 };
--- a/devtools/client/webconsole/new-console-output/new-console-output-wrapper.js
+++ b/devtools/client/webconsole/new-console-output/new-console-output-wrapper.js
@@ -13,17 +13,16 @@ const { configureStore } = require("devt
 
 const ConsoleOutput = React.createFactory(require("devtools/client/webconsole/new-console-output/components/console-output"));
 const FilterBar = React.createFactory(require("devtools/client/webconsole/new-console-output/components/filter-bar"));
 
 const store = configureStore();
 
 function NewConsoleOutputWrapper(parentNode, jsterm, toolbox, owner) {
   this.parentNode = parentNode;
-  this.parentNode = parentNode;
   this.jsterm = jsterm;
   this.toolbox = toolbox;
   this.owner = owner;
 
   this.init = this.init.bind(this);
 }
 
 NewConsoleOutputWrapper.prototype = {
@@ -41,16 +40,21 @@ NewConsoleOutputWrapper.prototype = {
       openNetworkPanel: (requestId) => {
         return this.toolbox.selectTool("netmonitor").then(panel => {
           return panel.panelWin.NetMonitorController.inspectRequest(requestId);
         });
       },
       openLink: (url) => {
         this.owner.openLink(url);
       },
+      emitNewMessage: (node) => {
+        this.jsterm.hud.emit("new-messages", new Set([{
+          node
+        }]));
+      },
     });
     let filterBar = FilterBar({});
     let provider = React.createElement(
       Provider,
       { store },
       React.DOM.div(
         {className: "webconsole-output-wrapper"},
         filterBar,
@@ -64,18 +68,12 @@ NewConsoleOutputWrapper.prototype = {
   },
   dispatchMessagesAdd: (messages) => {
     const batchedActions = messages.map(message => actions.messageAdd(message));
     store.dispatch(actions.batchActions(batchedActions));
   },
   dispatchMessagesClear: () => {
     store.dispatch(actions.messagesClear());
   },
-  getLastMessage: function() {
-    // Return the last message in the DOM as the message that was just dispatched. This may not
-    // always be correct in the case of filtered messages, but it's close enough for our tests.
-    let messageNodes = this.parentNode.querySelectorAll(".message");
-    return messageNodes[messageNodes.length - 1]
-  },
 };
 
 // Exports from this module
 module.exports = NewConsoleOutputWrapper;
--- a/devtools/client/webconsole/webconsole.js
+++ b/devtools/client/webconsole/webconsole.js
@@ -586,16 +586,17 @@ WebConsoleFrame.prototype = {
       // 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.experimentalOutputNode.removeAttribute("tabindex");
       this.outputNode.hidden = true;
       this.outputNode.parentNode.appendChild(this.experimentalOutputNode);
       // @TODO Once the toolbox has been converted to React, see if passing
       // in JSTerm is still necessary.
+
       this.newConsoleOutput = new this.window.NewConsoleOutput(
         this.experimentalOutputNode, this.jsterm, toolbox, this.owner);
       console.log("Created newConsoleOutput", this.newConsoleOutput);
 
       let filterToolbar = doc.querySelector(".hud-console-filter-toolbar");
       filterToolbar.hidden = true;
     }
 
@@ -3261,20 +3262,16 @@ WebConsoleConnectionProxy.prototype = {
     this.webConsoleFrame._onUpdateListeners();
   },
 
   /**
    * Dispatch a message add on the new frontend and emit an event for tests.
    */
   dispatchMessageAdd: function(packet) {
     this.webConsoleFrame.newConsoleOutput.dispatchMessageAdd(packet);
-    this.webConsoleFrame.emit("new-messages", new Set([{
-      response: packet,
-      node: this.webConsoleFrame.newConsoleOutput.getLastMessage(),
-    }]));
   },
 
   /**
    * Batched dispatch of messages.
    */
   dispatchMessagesAdd: function(packets) {
     this.webConsoleFrame.newConsoleOutput.dispatchMessagesAdd(packets);
   },