1 files changed, 511 insertions, 0 deletions
diff --git a/devtools/client/netmonitor/src/components/new-request/HTTPCustomRequestPanel.js b/devtools/client/netmonitor/src/components/new-request/HTTPCustomRequestPanel.js
new file mode 100644
index 0000000000..826f0317ba
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/new-request/HTTPCustomRequestPanel.js
@@ -0,0 +1,511 @@
+/* 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";
+
+const {
+  Component,
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const asyncStorage = require("resource://devtools/shared/async-storage.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const {
+  connect,
+} = require("resource://devtools/client/shared/redux/visibility-handler-connect.js");
+const {
+  L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+const Actions = require("resource://devtools/client/netmonitor/src/actions/index.js");
+const {
+  getClickedRequest,
+} = require("resource://devtools/client/netmonitor/src/selectors/index.js");
+const {
+  getUrlQuery,
+  parseQueryString,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+const InputMap = createFactory(
+  require("resource://devtools/client/netmonitor/src/components/new-request/InputMap.js")
+);
+const { button, div, footer, label, textarea, select, option } = dom;
+
+const CUSTOM_HEADERS = L10N.getStr("netmonitor.custom.newRequestHeaders");
+const CUSTOM_NEW_REQUEST_URL_LABEL = L10N.getStr(
+  "netmonitor.custom.newRequestUrlLabel"
+);
+const CUSTOM_POSTDATA = L10N.getStr("netmonitor.custom.postBody");
+const CUSTOM_POSTDATA_PLACEHOLDER = L10N.getStr(
+  "netmonitor.custom.postBody.placeholder"
+);
+const CUSTOM_QUERY = L10N.getStr("netmonitor.custom.urlParameters");
+const CUSTOM_SEND = L10N.getStr("netmonitor.custom.send");
+const CUSTOM_CLEAR = L10N.getStr("netmonitor.custom.clear");
+
+const FIREFOX_DEFAULT_HEADERS = [
+  "Accept-Charset",
+  "Accept-Encoding",
+  "Access-Control-Request-Headers",
+  "Access-Control-Request-Method",
+  "Connection",
+  "Content-Length",
+  "Cookie",
+  "Cookie2",
+  "Date",
+  "DNT",
+  "Expect",
+  "Feature-Policy",
+  "Host",
+  "Keep-Alive",
+  "Origin",
+  "Proxy-",
+  "Sec-",
+  "Referer",
+  "TE",
+  "Trailer",
+  "Transfer-Encoding",
+  "Upgrade",
+  "Via",
+];
+// This does not include the CONNECT method as it is restricted and special.
+// See https://bugzilla.mozilla.org/show_bug.cgi?id=1769572#c2 for details
+const HTTP_METHODS = [
+  "GET",
+  "HEAD",
+  "POST",
+  "DELETE",
+  "PUT",
+  "OPTIONS",
+  "TRACE",
+  "PATCH",
+];
+
+/*
+ * HTTP Custom request panel component
+ * A network request panel which enables creating and sending new requests
+ * or selecting, editing and re-sending current requests.
+ */
+class HTTPCustomRequestPanel extends Component {
+  static get propTypes() {
+    return {
+      connector: PropTypes.object.isRequired,
+      request: PropTypes.object,
+      sendCustomRequest: PropTypes.func.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      method: HTTP_METHODS[0],
+      url: "",
+      urlQueryParams: [],
+      headers: [],
+      postBody: "",
+      // Flag to know the data from either the request or the async storage has
+      // been loaded in componentDidMount
+      _isStateDataReady: false,
+    };
+
+    this.handleInputChange = this.handleInputChange.bind(this);
+    this.handleChangeURL = this.handleChangeURL.bind(this);
+    this.updateInputMapItem = this.updateInputMapItem.bind(this);
+    this.addInputMapItem = this.addInputMapItem.bind(this);
+    this.deleteInputMapItem = this.deleteInputMapItem.bind(this);
+    this.checkInputMapItem = this.checkInputMapItem.bind(this);
+    this.handleClear = this.handleClear.bind(this);
+    this.createQueryParamsListFromURL =
+      this.createQueryParamsListFromURL.bind(this);
+    this.onUpdateQueryParams = this.onUpdateQueryParams.bind(this);
+  }
+
+  async componentDidMount() {
+    let { connector, request } = this.props;
+    const persistedCustomRequest = await asyncStorage.getItem(
+      "devtools.netmonitor.customRequest"
+    );
+    request = request || persistedCustomRequest;
+
+    if (!request) {
+      this.setState({ _isStateDataReady: true });
+      return;
+    }
+
+    // We need this part because in the asyncStorage we are saving the request in one format
+    // and from the edit and resend it comes in a different form with different properties,
+    // so we need this to nomalize the request.
+    if (request.requestHeaders) {
+      request.headers = request.requestHeaders.headers;
+    }
+
+    if (request.requestPostData?.postData?.text) {
+      request.postBody = request.requestPostData.postData.text;
+    }
+
+    const headers = request.headers
+      .map(({ name, value }) => {
+        return {
+          name,
+          value,
+          checked: true,
+          disabled: FIREFOX_DEFAULT_HEADERS.some(i => name.startsWith(i)),
+        };
+      })
+      .sort((a, b) => {
+        if (a.disabled && !b.disabled) {
+          return -1;
+        }
+        if (!a.disabled && b.disabled) {
+          return 1;
+        }
+        return 0;
+      });
+
+    if (request.requestPostDataAvailable && !request.postBody) {
+      const requestData = await connector.requestData(
+        request.id,
+        "requestPostData"
+      );
+      request.postBody = requestData.postData.text;
+    }
+
+    this.setState({
+      method: request.method,
+      url: request.url,
+      urlQueryParams: this.createQueryParamsListFromURL(request.url),
+      headers,
+      postBody: request.postBody,
+      _isStateDataReady: true,
+    });
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    // This is when the query params change in the url params input map
+    if (
+      prevState.urlQueryParams !== this.state.urlQueryParams &&
+      prevState.url === this.state.url
+    ) {
+      this.onUpdateQueryParams();
+    }
+  }
+
+  componentWillUnmount() {
+    asyncStorage.setItem("devtools.netmonitor.customRequest", this.state);
+  }
+
+  handleChangeURL(event) {
+    const { value } = event.target;
+
+    this.setState({
+      url: value,
+      urlQueryParams: this.createQueryParamsListFromURL(value),
+    });
+  }
+
+  handleInputChange(event) {
+    const { name, value } = event.target;
+    const newState = {
+      [name]: value,
+    };
+
+    // If the message body changes lets make sure we
+    // keep the content-length up to date.
+    if (name == "postBody") {
+      newState.headers = this.state.headers.map(header => {
+        if (header.name == "Content-Length") {
+          header.value = value.length;
+        }
+        return header;
+      });
+    }
+
+    this.setState(newState);
+  }
+
+  updateInputMapItem(stateName, event) {
+    const { name, value } = event.target;
+    const [prop, index] = name.split("-");
+    const updatedList = [...this.state[stateName]];
+    updatedList[Number(index)][prop] = value;
+
+    this.setState({
+      [stateName]: updatedList,
+    });
+  }
+
+  addInputMapItem(stateName, name, value) {
+    this.setState({
+      [stateName]: [
+        ...this.state[stateName],
+        { name, value, checked: true, disabled: false },
+      ],
+    });
+  }
+
+  deleteInputMapItem(stateName, index) {
+    this.setState({
+      [stateName]: this.state[stateName].filter((_, i) => i !== index),
+    });
+  }
+
+  checkInputMapItem(stateName, index, checked) {
+    this.setState({
+      [stateName]: this.state[stateName].map((item, i) => {
+        if (index === i) {
+          return {
+            ...item,
+            checked,
+          };
+        }
+        return item;
+      }),
+    });
+  }
+
+  onUpdateQueryParams() {
+    const { urlQueryParams, url } = this.state;
+    let queryString = "";
+    for (const { name, value, checked } of urlQueryParams) {
+      if (checked) {
+        queryString += `${encodeURIComponent(name)}=${encodeURIComponent(
+          value
+        )}&`;
+      }
+    }
+
+    let finalURL = url.split("?")[0];
+
+    if (queryString.length) {
+      finalURL += `?${queryString.substring(0, queryString.length - 1)}`;
+    }
+    this.setState({
+      url: finalURL,
+    });
+  }
+
+  createQueryParamsListFromURL(url = "") {
+    const parsedQuery = parseQueryString(getUrlQuery(url) || url.split("?")[1]);
+    const queryArray = parsedQuery || [];
+    return queryArray.map(({ name, value }) => {
+      return {
+        checked: true,
+        name,
+        value,
+      };
+    });
+  }
+
+  handleClear() {
+    this.setState({
+      method: HTTP_METHODS[0],
+      url: "",
+      urlQueryParams: [],
+      headers: [],
+      postBody: "",
+    });
+  }
+
+  render() {
+    return div(
+      { className: "http-custom-request-panel" },
+      div(
+        { className: "http-custom-request-panel-content" },
+        div(
+          {
+            className: "tabpanel-summary-container http-custom-method-and-url",
+            id: "http-custom-method-and-url",
+          },
+          select(
+            {
+              className: "http-custom-method-value",
+              id: "http-custom-method-value",
+              name: "method",
+              onChange: this.handleInputChange,
+              onBlur: this.handleInputChange,
+              value: this.state.method,
+            },
+
+            HTTP_METHODS.map(item =>
+              option(
+                {
+                  value: item,
+                  key: item,
+                },
+                item
+              )
+            )
+          ),
+          div(
+            {
+              className: "auto-growing-textarea",
+              "data-replicated-value": this.state.url,
+              title: this.state.url,
+            },
+            textarea({
+              className: "http-custom-url-value",
+              id: "http-custom-url-value",
+              name: "url",
+              placeholder: CUSTOM_NEW_REQUEST_URL_LABEL,
+              onChange: event => {
+                this.handleChangeURL(event);
+              },
+              onBlur: this.handleTextareaChange,
+              value: this.state.url,
+              rows: 1,
+            })
+          )
+        ),
+        div(
+          {
+            className: "tabpanel-summary-container http-custom-section",
+            id: "http-custom-query",
+          },
+          label(
+            {
+              className: "http-custom-request-label",
+              htmlFor: "http-custom-query-value",
+            },
+            CUSTOM_QUERY
+          ),
+          // This is the input map for the Url Parameters Component
+          InputMap({
+            list: this.state.urlQueryParams,
+            onUpdate: event => {
+              this.updateInputMapItem(
+                "urlQueryParams",
+                event,
+                this.onUpdateQueryParams
+              );
+            },
+            onAdd: (name, value) =>
+              this.addInputMapItem(
+                "urlQueryParams",
+                name,
+                value,
+                this.onUpdateQueryParams
+              ),
+            onDelete: index =>
+              this.deleteInputMapItem(
+                "urlQueryParams",
+                index,
+                this.onUpdateQueryParams
+              ),
+            onChecked: (index, checked) => {
+              this.checkInputMapItem(
+                "urlQueryParams",
+                index,
+                checked,
+                this.onUpdateQueryParams
+              );
+            },
+          })
+        ),
+        div(
+          {
+            id: "http-custom-headers",
+            className: "tabpanel-summary-container http-custom-section",
+          },
+          label(
+            {
+              className: "http-custom-request-label",
+              htmlFor: "custom-headers-value",
+            },
+            CUSTOM_HEADERS
+          ),
+          // This is the input map for the Headers Component
+          InputMap({
+            ref: this.headersListRef,
+            list: this.state.headers,
+            onUpdate: event => {
+              this.updateInputMapItem("headers", event);
+            },
+            onAdd: (name, value) =>
+              this.addInputMapItem("headers", name, value),
+            onDelete: index => this.deleteInputMapItem("headers", index),
+            onChecked: (index, checked) => {
+              this.checkInputMapItem("headers", index, checked);
+            },
+          })
+        ),
+        div(
+          {
+            id: "http-custom-postdata",
+            className: "tabpanel-summary-container http-custom-section",
+          },
+          label(
+            {
+              className: "http-custom-request-label",
+              htmlFor: "http-custom-postdata-value",
+            },
+            CUSTOM_POSTDATA
+          ),
+          textarea({
+            className: "tabpanel-summary-input",
+            id: "http-custom-postdata-value",
+            name: "postBody",
+            placeholder: CUSTOM_POSTDATA_PLACEHOLDER,
+            onChange: this.handleInputChange,
+            rows: 6,
+            value: this.state.postBody,
+            wrap: "off",
+          })
+        )
+      ),
+      footer(
+        { className: "http-custom-request-button-container" },
+        button(
+          {
+            className: "devtools-button",
+            id: "http-custom-request-clear-button",
+            onClick: this.handleClear,
+          },
+          CUSTOM_CLEAR
+        ),
+        button(
+          {
+            className: "devtools-button",
+            id: "http-custom-request-send-button",
+            disabled:
+              !this.state._isStateDataReady ||
+              !this.state.url ||
+              !this.state.method,
+            onClick: () => {
+              const newRequest = {
+                method: this.state.method,
+                url: this.state.url,
+                cause: this.props.request?.cause,
+                urlQueryParams: this.state.urlQueryParams.map(
+                  ({ checked, ...params }) => params
+                ),
+                requestHeaders: {
+                  headers: this.state.headers
+                    .filter(({ checked }) => checked)
+                    .map(({ checked, ...headersValues }) => headersValues),
+                },
+              };
+
+              if (this.state.postBody) {
+                newRequest.requestPostData = {
+                  postData: {
+                    text: this.state.postBody,
+                  },
+                };
+              }
+              this.props.sendCustomRequest(newRequest);
+            },
+          },
+          CUSTOM_SEND
+        )
+      )
+    );
+  }
+}
+
+module.exports = connect(
+  state => ({ request: getClickedRequest(state) }),
+  (dispatch, props) => ({
+    sendCustomRequest: request =>
+      dispatch(Actions.sendHTTPCustomRequest(request)),
+  })
+)(HTTPCustomRequestPanel);