Backed out changeset 6b88d856e00f (bug 1403927) for failing mochitest-clipboard's devtools/client/netmonitor/test/browser_net_copy_params.js. r=backout

--HG--
extra : amend_source : 8381b242fb5d6625f922413d1255157c3887d178

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

@@ -14,6 +14,7 @@ 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
@@ -52,6 +53,35 @@ 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);
 
@@ -78,15 +108,14 @@ 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(),
@@ -101,8 +130,8 @@ const MonitorPanel = createClass({
           endPanel: networkDetailsOpen && NetworkDetailsPanel({
             ref: "endPanel",
             connector,
-            openLink,
             sourceMapService,
+            openLink,
           }),
           endPanelCollapsed: !networkDetailsOpen,
           endPanelControl: true,

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

@@ -5,17 +5,13 @@
 "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"));
@@ -35,126 +31,83 @@ const SECTION_NAMES = [
   PARAMS_QUERY_STRING,
 ];
 
-/**
+/*
  * Params panel component
  * Displays the GET parameters and POST data of a request
  */
-const ParamsPanel = createClass({
-  displayName: "ParamsPanel",
+function ParamsPanel({
+  openLink,
+  request,
+}) {
+  let {
+    formDataSections,
+    mimeType,
+    requestPostData,
+    url,
+  } = request;
+  let postData = requestPostData ? requestPostData.postData.text : null;
+  let query = getUrlQuery(url);
 
-  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,
-        })
-      )
+  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,
+      })
+    )
+  );
+}
+
+ParamsPanel.displayName = "ParamsPanel";
+
+ParamsPanel.propTypes = {
+  request: PropTypes.object.isRequired,
+  openLink: PropTypes.func,
+};
 
 /**
  * Mapping array to dict for TreeView usage.
@@ -180,8 +133,4 @@ function getProperties(arr) {
   }, {}));
 }
 
-module.exports = connect(null,
-  (dispatch) => ({
-    updateRequest: (id, data, batch) => dispatch(Actions.updateRequest(id, data, batch)),
-  }),
-)(ParamsPanel);
+module.exports = ParamsPanel;

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

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

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

@@ -5,10 +5,7 @@
 "use strict";
 
 const I = require("devtools/client/shared/vendor/immutable");
-const {
-  getUrlDetails,
-  processNetworkUpdates,
-} = require("../utils/request-utils");
+const { getUrlDetails } = require("../utils/request-utils");
 const {
   ADD_REQUEST,
   CLEAR_REQUESTS,
@@ -19,6 +16,7 @@ const {
   SEND_CUSTOM_REQUEST,
   TOGGLE_RECORDING,
   UPDATE_REQUEST,
+  UPDATE_PROPS,
 } = require("../constants");
 
 const Request = I.Record({
@@ -192,8 +190,30 @@ function requestsReducer(state = new Requests(), action) {
       }
 
       updatedRequest = updatedRequest.withMutations(request => {
-        let values = processNetworkUpdates(action.data);
-        request = Object.assign(request, values);
+        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;
+          }
+        }
       });
 
       return state.withMutations(st => {

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

@@ -6,10 +6,6 @@
 
 "use strict";
 
-const {
-  UPDATE_PROPS,
-} = require("devtools/client/netmonitor/src/constants");
-
 const CONTENT_MIME_TYPE_ABBREVIATIONS = {
   "ecmascript": "js",
   "javascript": "js",
@@ -393,36 +389,6 @@ 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,
@@ -445,7 +411,6 @@ module.exports = {
   getUrlScheme,
   parseQueryString,
   parseFormData,
-  processNetworkUpdates,
   propertiesEqual,
   ipToLong,
 };

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

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

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

@@ -74,8 +74,6 @@ NewConsoleOutputWrapper.prototype = {
       this.jsterm.focus();
     });
 
-    let { hud } = this.jsterm;
-
     const serviceContainer = {
       attachRefToHud,
       emitNewMessage: (node, messageId, timeStamp) => {
@@ -85,16 +83,13 @@ NewConsoleOutputWrapper.prototype = {
           timeStamp,
         }]));
       },
-      hudProxy: hud.proxy,
+      hudProxy: this.jsterm.hud.proxy,
       openLink: url => {
-        hud.owner.openLink(url);
+        this.jsterm.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
@@ -238,15 +233,8 @@ 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;
-    let expectedLength = NUMBER_OF_NETWORK_UPDATE;
-    if (res.networkInfo.updates.indexOf("requestPostData") != -1) {
-      expectedLength++;
-    }
-
-    if (res.networkInfo.updates.length === expectedLength) {
+    if (res.networkInfo.updates.length === NUMBER_OF_NETWORK_UPDATE) {
       this.batchedMessageUpdates({ res, message });
     }
   },

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

@@ -23,13 +23,9 @@ const { getGripPreviewItems } = require("devtools/client/shared/components/reps/
 const { getSourceNames } = require("devtools/client/shared/source-utils");
 
 const {
-  UPDATE_REQUEST,
+  UPDATE_PROPS
 } = 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(),
@@ -278,14 +274,34 @@ 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 = processNetworkUpdates(action.data);
+      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;
+          }
+        }
+      }
+
       newState = state.set(
         "networkMessagesUpdateById",
         Object.assign({}, networkMessagesUpdateById, {