Bug 1418927 - Introduce fetchNetworkUpdatePacket helper in request-utils r=ochameau

MozReview-Commit-ID: VRu3k3dxtV

--HG--
extra : rebase_source : 74f7038a3e74505c242484e3ce189df1e0f50c2b

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

@@ -8,6 +8,7 @@ const { Component, createFactory } = require("devtools/client/shared/vendor/reac
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const { L10N } = require("../utils/l10n");
+const { fetchNetworkUpdatePacket } = require("../utils/request-utils");
 const { sortObjectKeys } = require("../utils/sort-utils");
 
 // Component
@@ -38,24 +39,19 @@ class CookiesPanel extends Component {
   }
 
   componentDidMount() {
-    this.maybeFetchCookies(this.props);
+    let { connector, request } = this.props;
+    fetchNetworkUpdatePacket(connector.requestData, request, [
+      "requestCookies",
+      "responseCookies",
+    ]);
   }
 
   componentWillReceiveProps(nextProps) {
-    this.maybeFetchCookies(nextProps);
-  }
-
-  /**
-   * When switching to another request, lazily fetch request cookies
-   * from the backend. The panel will first be empty and then display the content.
-   */
-  maybeFetchCookies(props) {
-    if (props.request.requestCookiesAvailable && !props.request.requestCookies) {
-      props.connector.requestData(props.request.id, "requestCookies");
-    }
-    if (props.request.responseCookiesAvailable && !props.request.responseCookies) {
-      props.connector.requestData(props.request.id, "responseCookies");
-    }
+    let { connector, request } = nextProps;
+    fetchNetworkUpdatePacket(connector.requestData, request, [
+      "requestCookies",
+      "responseCookies",
+    ]);
   }
 
   /**

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

@@ -9,6 +9,7 @@ const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const { connect } = require("devtools/client/shared/vendor/react-redux");
 const { L10N } = require("../utils/l10n");
+const { fetchNetworkUpdatePacket } = require("../utils/request-utils");
 const Actions = require("../actions/index");
 const { getSelectedRequest } = require("../selectors/index");
 const {
@@ -48,25 +49,21 @@ class CustomRequestPanel extends Component {
   }
 
   componentDidMount() {
-    this.maybeFetchPostData(this.props);
+    let { request, connector } = this.props;
+    fetchNetworkUpdatePacket(connector.requestData, request, [
+      "requestHeaders",
+      "responseHeaders",
+      "requestPostData",
+    ]);
   }
 
   componentWillReceiveProps(nextProps) {
-    this.maybeFetchPostData(nextProps);
-  }
-
-  /**
-   * When switching to another request, lazily fetch request post data
-   * from the backend. The panel will first be empty and then display the content.
-   */
-  maybeFetchPostData(props) {
-    if (props.request.requestPostDataAvailable &&
-      (!props.request.requestPostData ||
-        !props.request.requestPostData.postData.text)) {
-      // This method will set `props.request.requestPostData`
-      // asynchronously and force another render.
-      props.connector.requestData(props.request.id, "requestPostData");
-    }
+    let { request, connector } = nextProps;
+    fetchNetworkUpdatePacket(connector.requestData, request, [
+      "requestHeaders",
+      "responseHeaders",
+      "requestPostData",
+    ]);
   }
 
   /**

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

@@ -16,7 +16,10 @@ const {
   getHeadersURL,
   getHTTPStatusCodeURL,
 } = require("../utils/mdn-utils");
-const { writeHeaderText } = require("../utils/request-utils");
+const {
+  fetchNetworkUpdatePacket,
+  writeHeaderText,
+} = require("../utils/request-utils");
 const { sortObjectKeys } = require("../utils/sort-utils");
 
 // Components
@@ -68,30 +71,24 @@ class HeadersPanel extends Component {
     this.toggleRawHeaders = this.toggleRawHeaders.bind(this);
     this.renderSummary = this.renderSummary.bind(this);
     this.renderValue = this.renderValue.bind(this);
-    this.maybeFetchPostData = this.maybeFetchPostData.bind(this);
   }
 
   componentDidMount() {
-    this.maybeFetchPostData(this.props);
+    let { request, connector } = this.props;
+    fetchNetworkUpdatePacket(connector.requestData, request, [
+      "requestHeaders",
+      "responseHeaders",
+      "requestPostData",
+    ]);
   }
 
   componentWillReceiveProps(nextProps) {
-    this.maybeFetchPostData(nextProps);
-  }
-
-  /**
-   * When switching to another request, lazily fetch request post data
-   * from the backend. The panel will first be empty and then display the content.
-   * Fetching post data is used for updating requestHeadersFromUploadStream section,
-   */
-  maybeFetchPostData(props) {
-    if (props.request.requestPostDataAvailable &&
-        (!props.request.requestPostData ||
-        !props.request.requestPostData.postData.text)) {
-      // This method will set `props.request.requestPostData`
-      // asynchronously and force another render.
-      props.connector.requestData(props.request.id, "requestPostData");
-    }
+    let { request, connector } = nextProps;
+    fetchNetworkUpdatePacket(connector.requestData, request, [
+      "requestHeaders",
+      "responseHeaders",
+      "requestPostData",
+    ]);
   }
 
   getProperties(headers, title) {

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

@@ -9,7 +9,12 @@ const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const { connect } = require("devtools/client/shared/vendor/react-redux");
 const { L10N } = require("../utils/l10n");
-const { getUrlQuery, parseQueryString, parseFormData } = require("../utils/request-utils");
+const {
+  fetchNetworkUpdatePacket,
+  getUrlQuery,
+  parseQueryString,
+  parseFormData,
+} = require("../utils/request-utils");
 const { sortObjectKeys } = require("../utils/sort-utils");
 const { updateFormDataSections } = require("../utils/request-utils");
 const Actions = require("../actions/index");
@@ -51,29 +56,17 @@ class ParamsPanel extends Component {
   }
 
   componentDidMount() {
-    this.maybeFetchPostData(this.props);
+    let { request, connector } = this.props;
+    fetchNetworkUpdatePacket(connector.requestData, request, ["requestPostData"]);
     updateFormDataSections(this.props);
   }
 
   componentWillReceiveProps(nextProps) {
-    this.maybeFetchPostData(nextProps);
+    let { request, connector } = nextProps;
+    fetchNetworkUpdatePacket(connector.requestData, request, ["requestPostData"]);
     updateFormDataSections(nextProps);
   }
 
-  /**
-   * When switching to another request, lazily fetch request post data
-   * from the backend. The panel will first be empty and then display the content.
-   */
-  maybeFetchPostData(props) {
-    if (props.request.requestPostDataAvailable &&
-        (!props.request.requestPostData ||
-        !props.request.requestPostData.postData.text)) {
-      // This method will set `props.request.requestPostData`
-      // asynchronously and force another render.
-      props.connector.requestData(props.request.id, "requestPostData");
-    }
-  }
-
   /**
    * Mapping array to dict for TreeView usage.
    * Since TreeView only support Object(dict) format.

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

@@ -7,6 +7,7 @@
 const { Component } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+const { fetchNetworkUpdatePacket } = require("../utils/request-utils");
 
 const { div } = dom;
 
@@ -19,11 +20,13 @@ class RequestListColumnCookies extends Component {
   }
 
   componentDidMount() {
-    this.maybeFetchRequestCookies(this.props);
+    let { item, connector } = this.props;
+    fetchNetworkUpdatePacket(connector.requestData, item, ["requestCookies"]);
   }
 
   componentWillReceiveProps(nextProps) {
-    this.maybeFetchRequestCookies(nextProps);
+    let { item, connector } = nextProps;
+    fetchNetworkUpdatePacket(connector.requestData, item, ["requestCookies"]);
   }
 
   shouldComponentUpdate(nextProps) {
@@ -34,15 +37,6 @@ class RequestListColumnCookies extends Component {
     return currRequestCookies !== nextRequestCookies;
   }
 
-  /**
-   * Lazily fetch request cookies from the backend.
-   */
-  maybeFetchRequestCookies(props) {
-    if (props.item.requestCookiesAvailable && !props.requestCookies) {
-      props.connector.requestData(props.item.id, "requestCookies");
-    }
-  }
-
   render() {
     let { requestCookies = { cookies: [] } } = this.props.item;
     requestCookies = requestCookies.cookies || requestCookies;

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

@@ -7,6 +7,7 @@
 const { Component } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+const { fetchNetworkUpdatePacket } = require("../utils/request-utils");
 
 const { div } = dom;
 
@@ -19,11 +20,13 @@ class RequestListColumnSetCookies extends Component {
   }
 
   componentDidMount() {
-    this.maybeFetchResponseCookies(this.props);
+    let { item, connector } = this.props;
+    fetchNetworkUpdatePacket(connector.requestData, item, ["responseCookies"]);
   }
 
   componentWillReceiveProps(nextProps) {
-    this.maybeFetchResponseCookies(nextProps);
+    let { item, connector } = nextProps;
+    fetchNetworkUpdatePacket(connector.requestData, item, ["responseCookies"]);
   }
 
   shouldComponentUpdate(nextProps) {
@@ -34,15 +37,6 @@ class RequestListColumnSetCookies extends Component {
     return currResponseCookies !== nextResponseCookies;
   }
 
-  /**
-   * Lazily fetch response cookies from the backend.
-   */
-  maybeFetchResponseCookies(props) {
-    if (props.item.responseCookiesAvailable && !props.responseCookies) {
-      props.connector.requestData(props.item.id, "responseCookies");
-    }
-  }
-
   render() {
     let { responseCookies = { cookies: [] } } = this.props.item;
     responseCookies = responseCookies.cookies || responseCookies;

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

@@ -10,6 +10,7 @@ const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const { L10N } = require("../utils/l10n");
 const {
   decodeUnicodeBase64,
+  fetchNetworkUpdatePacket,
   formDataURI,
   getUrlBaseName,
 } = require("../utils/request-utils");
@@ -57,26 +58,13 @@ class ResponsePanel extends Component {
   }
 
   componentDidMount() {
-    this.maybeFetchResponseContent(this.props);
+    let { request, connector } = this.props;
+    fetchNetworkUpdatePacket(connector.requestData, request, ["responseContent"]);
   }
 
   componentWillReceiveProps(nextProps) {
-    this.maybeFetchResponseContent(nextProps);
-  }
-
-  /**
-   * When switching to another request, lazily fetch response content
-   * from the backend. The Response Panel will first be empty and then
-   * display the content.
-   */
-  maybeFetchResponseContent(props) {
-    if (props.request.responseContentAvailable &&
-        (!props.request.responseContent ||
-         !props.request.responseContent.content)) {
-      // This method will set `props.request.responseContent.content`
-      // asynchronously and force another render.
-      props.connector.requestData(props.request.id, "responseContent");
-    }
+    let { request, connector } = nextProps;
+    fetchNetworkUpdatePacket(connector.requestData, request, ["responseContent"]);
   }
 
   updateImageDimemsions({ target }) {

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

@@ -11,7 +11,10 @@ const {
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const { L10N } = require("../utils/l10n");
-const { getUrlHost } = require("../utils/request-utils");
+const {
+  fetchNetworkUpdatePacket,
+  getUrlHost,
+} = require("../utils/request-utils");
 
 // Components
 const TreeViewClass = require("devtools/client/shared/components/tree/TreeView");
@@ -60,24 +63,13 @@ class SecurityPanel extends Component {
   }
 
   componentDidMount() {
-    this.maybeFetchSecurityInfo(this.props);
+    let { request, connector } = this.props;
+    fetchNetworkUpdatePacket(connector.requestData, request, ["securityInfo"]);
   }
 
   componentWillReceiveProps(nextProps) {
-    this.maybeFetchSecurityInfo(nextProps);
-  }
-
-  /**
-   * When switching to another request, lazily fetch securityInfo
-   * from the backend. The Security Panel will first be empty and then
-   * display the content.
-   */
-  maybeFetchSecurityInfo(props) {
-    if (!props.request.securityInfo) {
-      // This method will set `props.request.securityInfo`
-      // asynchronously and force another render.
-      props.connector.requestData(props.request.id, "securityInfo");
-    }
+    let { request, connector } = nextProps;
+    fetchNetworkUpdatePacket(connector.requestData, request, ["securityInfo"]);
   }
 
   renderValue(props, weaknessReasons = []) {

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

@@ -7,6 +7,7 @@
 const { Component, createFactory } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+const { fetchNetworkUpdatePacket } = require("../utils/request-utils");
 
 const { div } = dom;
 
@@ -32,7 +33,8 @@ class StackTracePanel extends Component {
    * for the first time
    */
   componentDidMount() {
-    this.maybeFetchStackTrace(this.props);
+    let { request, connector } = this.props;
+    fetchNetworkUpdatePacket(connector.requestData, request, ["stackTrace"]);
   }
 
   /**
@@ -40,23 +42,8 @@ class StackTracePanel extends Component {
    * switching between two requests while this panel is displayed.
    */
   componentWillReceiveProps(nextProps) {
-    this.maybeFetchStackTrace(nextProps);
-  }
-
-  /**
-   * When switching to another request, lazily fetch stack-trace
-   * from the backend. This Panel will first be empty and then
-   * display the content.
-   */
-  maybeFetchStackTrace(props) {
-    // Fetch stack trace only if it's available and not yet
-    // on the client.
-    if (!props.request.stacktrace &&
-      props.request.cause.stacktraceAvailable) {
-      // This method will set `props.request.stacktrace`
-      // asynchronously and force another render.
-      props.connector.requestData(props.request.id, "stackTrace");
-    }
+    let { request, connector } = nextProps;
+    fetchNetworkUpdatePacket(connector.requestData, request, ["stackTrace"]);
   }
 
   // Rendering

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

@@ -17,6 +17,7 @@ const { Filters } = require("../utils/filter-predicates");
 const { getSizeWithDecimals, getTimeWithDecimals } = require("../utils/format-utils");
 const { L10N } = require("../utils/l10n");
 const { getPerformanceAnalysisURL } = require("../utils/mdn-utils");
+const { fetchNetworkUpdatePacket } = require("../utils/request-utils");
 
 // Components
 const MDNLink = createFactory(require("./MdnLink"));
@@ -63,6 +64,20 @@ class StatisticsPanel extends Component {
     this.mdnLinkContainerNodes = new Map();
   }
 
+  componentDidMount() {
+    let { requests, connector } = this.props;
+    requests.forEach((request) => {
+      fetchNetworkUpdatePacket(connector.requestData, request, ["responseHeaders"]);
+    });
+  }
+
+  componentWillReceiveProps(nextProps) {
+    let { requests, connector } = nextProps;
+    requests.forEach((request) => {
+      fetchNetworkUpdatePacket(connector.requestData, request, ["responseHeaders"]);
+    });
+  }
+
   componentDidUpdate(prevProps) {
     MediaQueryList.addListener(this.onLayoutChange);
 

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

@@ -69,6 +69,30 @@ async function fetchHeaders(headers, getLongString) {
   return headers;
 }
 
+/**
+ * Fetch network event update packets from actor server
+ * Expect to fetch a couple of network update packets from a given request.
+ *
+ * @param {function} requestData - requestData function for lazily fetch data
+ * @param {object} request - request object
+ * @param {array} updateTypes - a list of network event update types
+ */
+function fetchNetworkUpdatePacket(requestData, request, updateTypes) {
+  updateTypes.forEach((updateType) => {
+    // Only stackTrace will be handled differently
+    if (updateType === "stackTrace") {
+      if (request.cause.stacktraceAvailable && !request.stacktrace) {
+        requestData(request.id, updateType);
+      }
+      return;
+    }
+
+    if (request[`${updateType}Available`] && !request[updateType]) {
+      requestData(request.id, updateType);
+    }
+  });
+}
+
 /**
  * Form a data: URI given a mime type, encoding, and some text.
  *
@@ -460,6 +484,7 @@ module.exports = {
   decodeUnicodeBase64,
   getFormDataSections,
   fetchHeaders,
+  fetchNetworkUpdatePacket,
   formDataURI,
   writeHeaderText,
   decodeUnicodeUrl,