Bug 1403927 - Fix Params panel in HTTPi; r=nchevobbe

MozReview-Commit-ID: 16djEqkEJMj

--HG--
extra : rebase_source : b717fd9fbdba85739d847269503788f686faca60

devtools/client/netmonitor/src/components/MonitorPanel.js

@@ -14,7 +14,6 @@ const {
 const { connect } = require("devtools/client/shared/vendor/react-redux");
 const { findDOMNode } = require("devtools/client/shared/vendor/react-dom");
 const Actions = require("../actions/index");
-const { getFormDataSections } = require("../utils/request-utils");
 const { getSelectedRequest } = require("../selectors/index");
 
 // Components
@@ -53,35 +52,6 @@ const MonitorPanel = createClass({
     MediaQueryList.addListener(this.onLayoutChange);
   },
 
-  componentWillReceiveProps(nextProps) {
-    let {
-      request = {},
-      updateRequest,
-    } = nextProps;
-    let {
-      formDataSections,
-      requestHeaders,
-      requestHeadersFromUploadStream,
-      requestPostData,
-    } = request;
-
-    if (!formDataSections && requestHeaders &&
-        requestHeadersFromUploadStream && requestPostData) {
-      getFormDataSections(
-        requestHeaders,
-        requestHeadersFromUploadStream,
-        requestPostData,
-        this.props.connector.getLongString,
-      ).then((newFormDataSections) => {
-        updateRequest(
-          request.id,
-          { formDataSections: newFormDataSections },
-          true,
-        );
-      });
-    }
-  },
-
   componentWillUnmount() {
     MediaQueryList.removeListener(this.onLayoutChange);
 
@@ -108,14 +78,15 @@ const MonitorPanel = createClass({
       connector,
       isEmpty,
       networkDetailsOpen,
+      openLink,
       sourceMapService,
-      openLink
     } = this.props;
 
     let initialWidth = Services.prefs.getIntPref(
         "devtools.netmonitor.panes-network-details-width");
     let initialHeight = Services.prefs.getIntPref(
         "devtools.netmonitor.panes-network-details-height");
+
     return (
       div({ className: "monitor-panel" },
         Toolbar(),
@@ -130,8 +101,8 @@ const MonitorPanel = createClass({
           endPanel: networkDetailsOpen && NetworkDetailsPanel({
             ref: "endPanel",
             connector,
-            sourceMapService,
             openLink,
+            sourceMapService,
           }),
           endPanelCollapsed: !networkDetailsOpen,
           endPanelControl: true,

devtools/client/netmonitor/src/components/ParamsPanel.js

@@ -5,13 +5,17 @@
 "use strict";
 
 const {
+  createClass,
   createFactory,
   DOM,
   PropTypes,
 } = require("devtools/client/shared/vendor/react");
+const { connect } = require("devtools/client/shared/vendor/react-redux");
 const { L10N } = require("../utils/l10n");
 const { getUrlQuery, parseQueryString, parseFormData } = require("../utils/request-utils");
 const { sortObjectKeys } = require("../utils/sort-utils");
+const { getFormDataSections } = require("../utils/request-utils");
+const Actions = require("../actions/index");
 
 // Components
 const PropertiesView = createFactory(require("./PropertiesView"));
@@ -31,83 +35,126 @@ const SECTION_NAMES = [
   PARAMS_QUERY_STRING,
 ];
 
-/*
+/**
  * Params panel component
  * Displays the GET parameters and POST data of a request
  */
-function ParamsPanel({
-  openLink,
-  request,
-}) {
-  let {
-    formDataSections,
-    mimeType,
-    requestPostData,
-    url,
-  } = request;
-  let postData = requestPostData ? requestPostData.postData.text : null;
-  let query = getUrlQuery(url);
+const ParamsPanel = createClass({
+  displayName: "ParamsPanel",
 
-  if (!formDataSections && !postData && !query) {
-    return div({ className: "empty-notice" },
-      PARAMS_EMPTY_TEXT
+  propTypes: {
+    connector: PropTypes.object.isRequired,
+    openLink: PropTypes.func,
+    request: PropTypes.object.isRequired,
+    updateRequest: PropTypes.func.isRequired,
+  },
+
+  componentDidMount() {
+    this.updateFormDataSections(this.props);
+  },
+
+  componentWillReceiveProps(nextProps) {
+    this.updateFormDataSections(nextProps);
+  },
+
+  updateFormDataSections(props) {
+    let {
+      connector,
+      request = {},
+      updateRequest,
+    } = props;
+    let {
+      formDataSections,
+      requestHeaders,
+      requestHeadersFromUploadStream,
+      requestPostData,
+    } = request;
+
+    if (!formDataSections && requestHeaders &&
+        requestHeadersFromUploadStream && requestPostData) {
+      getFormDataSections(
+        requestHeaders,
+        requestHeadersFromUploadStream,
+        requestPostData,
+        connector.getLongString,
+      ).then((newFormDataSections) => {
+        updateRequest(
+          request.id,
+          { formDataSections: newFormDataSections },
+          true,
+        );
+      });
+    }
+  },
+
+  render() {
+    let {
+      openLink,
+      request
+    } = this.props;
+    let {
+      formDataSections,
+      mimeType,
+      requestPostData,
+      url,
+    } = request;
+    let postData = requestPostData ? requestPostData.postData.text : null;
+    let query = getUrlQuery(url);
+
+    if (!formDataSections && !postData && !query) {
+      return div({ className: "empty-notice" },
+        PARAMS_EMPTY_TEXT
+      );
+    }
+
+    let object = {};
+    let json;
+
+    // Query String section
+    if (query) {
+      object[PARAMS_QUERY_STRING] = getProperties(parseQueryString(query));
+    }
+
+    // Form Data section
+    if (formDataSections && formDataSections.length > 0) {
+      let sections = formDataSections.filter((str) => /\S/.test(str)).join("&");
+      object[PARAMS_FORM_DATA] = getProperties(parseFormData(sections));
+    }
+
+    // Request payload section
+    if (formDataSections && formDataSections.length === 0 && postData) {
+      try {
+        json = JSON.parse(postData);
+      } catch (error) {
+        // Continue regardless of parsing error
+      }
+
+      if (json) {
+        object[JSON_SCOPE_NAME] = sortObjectKeys(json);
+      } else {
+        object[PARAMS_POST_PAYLOAD] = {
+          EDITOR_CONFIG: {
+            text: postData,
+            mode: mimeType.replace(/;.+/, ""),
+          },
+        };
+      }
+    } else {
+      postData = "";
+    }
+
+    return (
+      div({ className: "panel-container" },
+        PropertiesView({
+          object,
+          filterPlaceHolder: PARAMS_FILTER_TEXT,
+          sectionNames: SECTION_NAMES,
+          openLink,
+        })
+      )
     );
   }
-
-  let object = {};
-  let json;
-
-  // Query String section
-  if (query) {
-    object[PARAMS_QUERY_STRING] = getProperties(parseQueryString(query));
-  }
-
-  // Form Data section
-  if (formDataSections && formDataSections.length > 0) {
-    let sections = formDataSections.filter((str) => /\S/.test(str)).join("&");
-    object[PARAMS_FORM_DATA] = getProperties(parseFormData(sections));
-  }
-
-  // Request payload section
-  if (formDataSections && formDataSections.length === 0 && postData) {
-    try {
-      json = JSON.parse(postData);
-    } catch (error) {
-      // Continue regardless of parsing error
-    }
-
-    if (json) {
-      object[JSON_SCOPE_NAME] = sortObjectKeys(json);
-    } else {
-      object[PARAMS_POST_PAYLOAD] = {
-        EDITOR_CONFIG: {
-          text: postData,
-          mode: mimeType.replace(/;.+/, ""),
-        },
-      };
-    }
-  } else {
-    postData = "";
-  }
-
-  return (
-    div({ className: "panel-container" },
-      PropertiesView({
-        object,
-        filterPlaceHolder: PARAMS_FILTER_TEXT,
-        sectionNames: SECTION_NAMES,
-        openLink,
-      })
-    )
-  );
-}
-
-ParamsPanel.displayName = "ParamsPanel";
-
-ParamsPanel.propTypes = {
-  request: PropTypes.object.isRequired,
-  openLink: PropTypes.func,
-};
+});
 
 /**
  * Mapping array to dict for TreeView usage.
@@ -133,4 +180,8 @@ function getProperties(arr) {
   }, {}));
 }
 
-module.exports = ParamsPanel;
+module.exports = connect(null,
+  (dispatch) => ({
+    updateRequest: (id, data, batch) => dispatch(Actions.updateRequest(id, data, batch)),
+  }),
+)(ParamsPanel);

devtools/client/netmonitor/src/components/TabboxPanel.js

@@ -72,7 +72,7 @@ function TabboxPanel({
         id: PANELS.PARAMS,
         title: PARAMS_TITLE,
       },
-        ParamsPanel({ request, openLink }),
+        ParamsPanel({ connector, openLink, request }),
       ),
       TabPanel({
         id: PANELS.RESPONSE,
@@ -91,7 +91,7 @@ function TabboxPanel({
         id: PANELS.STACK_TRACE,
         title: STACK_TRACE_TITLE,
       },
-        StackTracePanel({ request, sourceMapService, openLink, connector }),
+        StackTracePanel({ connector, openLink, request, sourceMapService }),
       ),
       request.securityState && request.securityState !== "insecure" &&
       TabPanel({

devtools/client/netmonitor/src/reducers/requests.js

@@ -5,7 +5,10 @@
 "use strict";
 
 const I = require("devtools/client/shared/vendor/immutable");
-const { getUrlDetails } = require("../utils/request-utils");
+const {
+  getUrlDetails,
+  processNetworkUpdates,
+} = require("../utils/request-utils");
 const {
   ADD_REQUEST,
   CLEAR_REQUESTS,
@@ -16,7 +19,6 @@ const {
   SEND_CUSTOM_REQUEST,
   TOGGLE_RECORDING,
   UPDATE_REQUEST,
-  UPDATE_PROPS,
 } = require("../constants");
 
 const Request = I.Record({
@@ -190,30 +192,8 @@ function requestsReducer(state = new Requests(), action) {
       }
 
       updatedRequest = updatedRequest.withMutations(request => {
-        for (let [key, value] of Object.entries(action.data)) {
-          if (!UPDATE_PROPS.includes(key)) {
-            continue;
-          }
-
-          request[key] = value;
-
-          switch (key) {
-            case "url":
-              // Compute the additional URL details
-              request.urlDetails = getUrlDetails(value);
-              break;
-            case "totalTime":
-              request.endedMillis = request.startedMillis + value;
-              lastEndedMillis = Math.max(lastEndedMillis, request.endedMillis);
-              break;
-            case "requestPostData":
-              request.requestHeadersFromUploadStream = {
-                headers: [],
-                headersSize: 0,
-              };
-              break;
-          }
-        }
+        let values = processNetworkUpdates(action.data);
+        request = Object.assign(request, values);
       });
 
       return state.withMutations(st => {

devtools/client/netmonitor/src/utils/request-utils.js

@@ -6,6 +6,10 @@
 
 "use strict";
 
+const {
+  UPDATE_PROPS,
+} = require("devtools/client/netmonitor/src/constants");
+
 const CONTENT_MIME_TYPE_ABBREVIATIONS = {
   "ecmascript": "js",
   "javascript": "js",
@@ -389,6 +393,36 @@ function getResponseHeader(item, header) {
   return null;
 }
 
+/**
+ * This helper function is used for additional processing of
+ * incoming network update packets. It's used by Network and
+ * Console panel reducers.
+ */
+function processNetworkUpdates(request) {
+  let result = {};
+  for (let [key, value] of Object.entries(request)) {
+    if (UPDATE_PROPS.includes(key)) {
+      result[key] = value;
+
+      switch (key) {
+        case "securityInfo":
+          result.securityState = value.state;
+          break;
+        case "totalTime":
+          result.totalTime = request.totalTime;
+          break;
+        case "requestPostData":
+          result.requestHeadersFromUploadStream = {
+            headers: [],
+            headersSize: 0,
+          };
+          break;
+      }
+    }
+  }
+  return result;
+}
+
 module.exports = {
   decodeUnicodeBase64,
   getFormDataSections,
@@ -411,6 +445,7 @@ module.exports = {
   getUrlScheme,
   parseQueryString,
   parseFormData,
+  processNetworkUpdates,
   propertiesEqual,
   ipToLong,
 };

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

@@ -108,7 +108,9 @@ function NetworkEventMessage({
     viewSourceInDebugger: (url, line) => {
       serviceContainer.onViewSourceInDebugger({url, line});
     },
-    getLongString: () => {},
+    getLongString: (grip) => {
+      return serviceContainer.getLongString(grip);
+    },
     getTabTarget: () => {},
     getNetworkRequest: () => {},
     sendHTTPRequest: () => {},

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

@@ -74,6 +74,8 @@ NewConsoleOutputWrapper.prototype = {
       this.jsterm.focus();
     });
 
+    let { hud } = this.jsterm;
+
     const serviceContainer = {
       attachRefToHud,
       emitNewMessage: (node, messageId, timeStamp) => {
@@ -83,13 +85,16 @@ NewConsoleOutputWrapper.prototype = {
           timeStamp,
         }]));
       },
-      hudProxy: this.jsterm.hud.proxy,
+      hudProxy: hud.proxy,
       openLink: url => {
-        this.jsterm.hud.owner.openLink(url);
+        hud.owner.openLink(url);
       },
       createElement: nodename => {
         return this.document.createElement(nodename);
       },
+      getLongString: (grip) => {
+        return hud.proxy.webConsoleClient.getString(grip);
+      },
     };
 
     // Set `openContextMenu` this way so, `serviceContainer` variable
@@ -233,8 +238,15 @@ NewConsoleOutputWrapper.prototype = {
     // network-message-updated will emit when all the update message arrives.
     // Since we can't ensure the order of the network update, we check
     // that networkInfo.updates has all we need.
+    // Note that 'requestPostData' is sent only for POST requests, so we need
+    // to count with that.
     const NUMBER_OF_NETWORK_UPDATE = 8;
-    if (res.networkInfo.updates.length === NUMBER_OF_NETWORK_UPDATE) {
+    let expectedLength = NUMBER_OF_NETWORK_UPDATE;
+    if (res.networkInfo.updates.indexOf("requestPostData") != -1) {
+      expectedLength++;
+    }
+
+    if (res.networkInfo.updates.length === expectedLength) {
       this.batchedMessageUpdates({ res, message });
     }
   },

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

@@ -23,9 +23,13 @@ const { getGripPreviewItems } = require("devtools/client/shared/components/reps/
 const { getSourceNames } = require("devtools/client/shared/source-utils");
 
 const {
-  UPDATE_PROPS
+  UPDATE_REQUEST,
 } = require("devtools/client/netmonitor/src/constants");
 
+const {
+  processNetworkUpdates,
+} = require("devtools/client/netmonitor/src/utils/request-utils");
+
 const MessageState = Immutable.Record({
   // List of all the messages added to the console.
   messagesById: Immutable.OrderedMap(),
@@ -274,34 +278,14 @@ function messages(state = new MessageState(), action, filtersState, prefsState)
         })
       );
 
+    case UPDATE_REQUEST:
     case constants.NETWORK_UPDATE_REQUEST: {
       let request = networkMessagesUpdateById[action.id];
       if (!request) {
         return state;
       }
 
-      let values = {};
-      for (let [key, value] of Object.entries(action.data)) {
-        if (UPDATE_PROPS.includes(key)) {
-          values[key] = value;
-
-          switch (key) {
-            case "securityInfo":
-              values.securityState = value.state;
-              break;
-            case "totalTime":
-              values.totalTime = request.totalTime;
-              break;
-            case "requestPostData":
-              values.requestHeadersFromUploadStream = {
-                headers: [],
-                headersSize: 0,
-              };
-              break;
-          }
-        }
-      }
-
+      let values = processNetworkUpdates(action.data);
       newState = state.set(
         "networkMessagesUpdateById",
         Object.assign({}, networkMessagesUpdateById, {