Bug 1630989 - Rename the params panel to request r=Honza

Differential Revision: https://phabricator.services.mozilla.com/D71763

Author: bomsy

devtools/client/locales/en-US/netmonitor.properties

@@ -88,23 +88,23 @@ cookiesFilterText=Filter Cookies
 responseEmptyText=No response data available for this request
 
 # LOCALIZATION NOTE (paramsEmptyText): This is the text displayed in the
-# params tab of the network details pane when there are no params available.
+# request tab of the network details pane when there are no params available.
 paramsEmptyText=No parameters for this request
 
 # LOCALIZATION NOTE (paramsFilterText): This is the text displayed in the
-# params tab of the network details pane for the filtering input.
+# request tab of the network details pane for the filtering input.
 paramsFilterText=Filter Request Parameters
 
 # LOCALIZATION NOTE (paramsQueryString): This is the label displayed
-# in the network details params tab identifying the query string.
+# in the network details request tab identifying the query string.
 paramsQueryString=Query String
 
 # LOCALIZATION NOTE (paramsFormData): This is the label displayed
-# in the network details params tab identifying the form data.
+# in the network details request tab identifying the form data.
 paramsFormData=Form data
 
 # LOCALIZATION NOTE (paramsPostPayload): This is the label displayed
-# in the network details params tab identifying the request payload.
+# in the network details request tab identifying the request payload.
 paramsPostPayload=Request payload
 
 # LOCALIZATION NOTE (requestHeaders): This is the label displayed
@@ -121,11 +121,11 @@ requestHeadersFromUpload=Request headers from upload stream
 responseHeaders=Response Headers
 
 # LOCALIZATION NOTE (requestCookies): This is the label displayed
-# in the network details params tab identifying the request cookies.
+# in the network details request tab identifying the request cookies.
 requestCookies=Request Cookies
 
 # LOCALIZATION NOTE (responseCookies): This is the label displayed
-# in the network details params tab identifying the response cookies.
+# in the network details request tab identifying the response cookies.
 responseCookies=Response Cookies
 
 # LOCALIZATION NOTE (responsePayload): This is the label displayed
@@ -150,7 +150,7 @@ jsonpScopeName=JSONP → callback %S()
 responseTruncated=Response has been truncated
 
 # LOCALIZATION NOTE (requestTruncated): This is the text displayed
-# in the params tab of the network details pane when the request is over
+# in the request tab of the network details pane when the request is over
 # the truncation limit and thus was truncated.
 requestTruncated=Request has been truncated
 
@@ -841,6 +841,10 @@ netmonitor.tab.cache=Cache
 # in the network details pane identifying the params tab.
 netmonitor.tab.params=Params
 
+# LOCALIZATION NOTE (netmonitor.tab.request): This is the label displayed
+# in the network details pane identifying the request tab.
+netmonitor.tab.request=Request
+
 # LOCALIZATION NOTE (netmonitor.tab.response): This is the label displayed
 # in the network details pane identifying the response tab.
 netmonitor.tab.response=Response

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

@@ -29,8 +29,8 @@ const HeadersPanel = createFactory(
 const WebSocketsPanel = createFactory(
   require("devtools/client/netmonitor/src/components/websockets/WebSocketsPanel")
 );
-const ParamsPanel = createFactory(
-  require("devtools/client/netmonitor/src/components/request-details/ParamsPanel")
+const RequestPanel = createFactory(
+  require("devtools/client/netmonitor/src/components/request-details/RequestPanel")
 );
 const CachePanel = createFactory(
   require("devtools/client/netmonitor/src/components/request-details/CachePanel")
@@ -53,7 +53,7 @@ const CACHE_TITLE = L10N.getStr("netmonitor.tab.cache");
 const COOKIES_TITLE = L10N.getStr("netmonitor.tab.cookies");
 const HEADERS_TITLE = L10N.getStr("netmonitor.tab.headers");
 const MESSAGES_TITLE = L10N.getStr("netmonitor.tab.messages");
-const PARAMS_TITLE = L10N.getStr("netmonitor.tab.params");
+const REQUEST_TITLE = L10N.getStr("netmonitor.tab.request");
 const RESPONSE_TITLE = L10N.getStr("netmonitor.tab.response");
 const SECURITY_TITLE = L10N.getStr("netmonitor.tab.security");
 const STACK_TRACE_TITLE = L10N.getStr("netmonitor.tab.stackTrace");
@@ -179,11 +179,11 @@ class TabboxPanel extends Component {
       ),
       TabPanel(
         {
-          id: PANELS.PARAMS,
-          title: PARAMS_TITLE,
+          id: PANELS.REQUEST,
+          title: REQUEST_TITLE,
           className: "panel-with-code",
         },
-        ParamsPanel({
+        RequestPanel({
           connector,
           openLink,
           request,

devtools/client/netmonitor/src/components/request-details/ParamsPanel.js renamed to devtools/client/netmonitor/src/components/request-details/RequestPanel.js

@@ -52,18 +52,18 @@ loader.lazyGetter(this, "SourcePreview", function() {
 const { div } = dom;
 
 const JSON_SCOPE_NAME = L10N.getStr("jsonScopeName");
-const PARAMS_EMPTY_TEXT = L10N.getStr("paramsEmptyText");
-const PARAMS_FILTER_TEXT = L10N.getStr("paramsFilterText");
-const PARAMS_FORM_DATA = L10N.getStr("paramsFormData");
-const PARAMS_POST_PAYLOAD = L10N.getStr("paramsPostPayload");
-const PARAMS_QUERY_STRING = L10N.getStr("paramsQueryString");
+const REQUEST_EMPTY_TEXT = L10N.getStr("paramsEmptyText");
+const REQUEST_FILTER_TEXT = L10N.getStr("paramsFilterText");
+const REQUEST_FORM_DATA = L10N.getStr("paramsFormData");
+const REQUEST_POST_PAYLOAD = L10N.getStr("paramsPostPayload");
+const REQUEST_QUERY_STRING = L10N.getStr("paramsQueryString");
 const REQUEST_TRUNCATED = L10N.getStr("requestTruncated");
 
 /**
  * Params panel component
  * Displays the GET parameters and POST data of a request
  */
-class ParamsPanel extends Component {
+class RequestPanel extends Component {
   static get propTypes() {
     return {
       connector: PropTypes.object.isRequired,
@@ -160,7 +160,7 @@ class ParamsPanel extends Component {
       !postData &&
       !query
     ) {
-      return div({ className: "empty-notice" }, PARAMS_EMPTY_TEXT);
+      return div({ className: "empty-notice" }, REQUEST_EMPTY_TEXT);
     }
 
     let error;
@@ -175,8 +175,8 @@ class ParamsPanel extends Component {
           filterText,
           targetSearchResult,
         },
-        header: PARAMS_QUERY_STRING,
-        id: "paramsQueryString",
+        header: REQUEST_QUERY_STRING,
+        id: "requestQueryString",
         opened: true,
       });
     }
@@ -192,8 +192,8 @@ class ParamsPanel extends Component {
           targetSearchResult,
           defaultSelectFirstNode: false,
         },
-        header: PARAMS_FORM_DATA,
-        id: "paramsFormData",
+        header: REQUEST_FORM_DATA,
+        id: "requestFormData",
         opened: true,
       });
     }
@@ -238,8 +238,8 @@ class ParamsPanel extends Component {
           mode: mimeType.replace(/;.+/, ""),
           targetSearchResult,
         },
-        header: PARAMS_POST_PAYLOAD,
-        id: "paramsPostPayload",
+        header: REQUEST_POST_PAYLOAD,
+        id: "requestPostPayload",
         opened: true,
       });
     }
@@ -253,7 +253,7 @@ class ParamsPanel extends Component {
           delay: FILTER_SEARCH_DELAY,
           type: "filter",
           onChange: text => this.setState({ filterText: text }),
-          placeholder: PARAMS_FILTER_TEXT,
+          placeholder: REQUEST_FILTER_TEXT,
         })
       ),
       Accordion({ items })
@@ -264,4 +264,4 @@ class ParamsPanel extends Component {
 module.exports = connect(null, dispatch => ({
   updateRequest: (id, data, batch) =>
     dispatch(Actions.updateRequest(id, data, batch)),
-}))(ParamsPanel);
+}))(RequestPanel);

devtools/client/netmonitor/src/components/request-details/moz.build

@@ -7,8 +7,8 @@ DevToolsModules(
     'CookiesPanel.js',
     'HeadersPanel.js',
     'NetworkDetailsBar.js',
-    'ParamsPanel.js',
     'PropertiesView.js',
+    'RequestPanel.js',
     'ResponsePanel.js',
     'SecurityPanel.js',
     'StackTracePanel.js',

devtools/client/netmonitor/src/constants.js

@@ -222,7 +222,7 @@ const PANELS = {
   COOKIES: "cookies",
   HEADERS: "headers",
   MESSAGES: "messages",
-  PARAMS: "params",
+  REQUEST: "request",
   RESPONSE: "response",
   CACHE: "cache",
   SECURITY: "security",

devtools/client/netmonitor/src/widgets/RequestListContextMenu.js

@@ -470,7 +470,7 @@ class RequestListContextMenu {
   async copyPostData(id, formDataSections, requestPostData) {
     let params = [];
     // Try to extract any form data parameters if formDataSections is already
-    // available, which is only true if ParamsPanel has ever been mounted before.
+    // available, which is only true if RequestPanel has ever been mounted before.
     if (formDataSections) {
       formDataSections.forEach(section => {
         const paramsArray = parseQueryString(section);

devtools/client/netmonitor/src/workers/search/search.js

@@ -100,7 +100,7 @@ function searchInResource(resource, query, modifiers) {
       findMatches(resource, query, modifiers, {
         key: "requestPostData.postData.text",
         type: "requestPostData",
-        panel: "params",
+        panel: "request",
       })
     );
   }

devtools/client/netmonitor/test/browser_net_complex-params.js

@@ -23,27 +23,27 @@ add_task(async function() {
   // Execute requests.
   await performRequests(monitor, tab, 12);
 
-  let wait = waitForDOM(document, "#params-panel .accordion-item", 3);
+  let wait = waitForDOM(document, "#request-panel .accordion-item", 3);
   EventUtils.sendMouseEvent(
     { type: "mousedown" },
     document.querySelectorAll(".request-list-item")[0]
   );
   EventUtils.sendMouseEvent(
     { type: "click" },
-    document.querySelector("#params-tab")
+    document.querySelector("#request-tab")
   );
   await wait;
   testParamsTab1("a", "", '{ "foo": "bar" }', "");
 
-  wait = waitForDOM(document, "#params-panel .accordion-item", 3);
+  wait = waitForDOM(document, "#request-panel .accordion-item", 3);
   EventUtils.sendMouseEvent(
     { type: "mousedown" },
     document.querySelectorAll(".request-list-item")[1]
   );
   await wait;
   testParamsTab1("a", "b", '{ "foo": "bar" }', "");
 
-  wait = waitForDOM(document, "#params-panel .accordion-item", 3);
+  wait = waitForDOM(document, "#request-panel .accordion-item", 3);
   EventUtils.sendMouseEvent(
     { type: "mousedown" },
     document.querySelectorAll(".request-list-item")[2]
@@ -52,17 +52,17 @@ add_task(async function() {
   testParamsTab1("a", "b", "?foo", "bar");
 
   let waitRows, waitSourceEditor;
-  waitRows = waitForDOM(document, "#params-panel tr.treeRow", 2);
-  waitSourceEditor = waitForDOM(document, "#params-panel .CodeMirror-code");
+  waitRows = waitForDOM(document, "#request-panel tr.treeRow", 2);
+  waitSourceEditor = waitForDOM(document, "#request-panel .CodeMirror-code");
   EventUtils.sendMouseEvent(
     { type: "mousedown" },
     document.querySelectorAll(".request-list-item")[3]
   );
   await Promise.all([waitRows, waitSourceEditor]);
   testParamsTab2("a", "", '{ "foo": "bar" }', "js");
 
-  waitRows = waitForDOM(document, "#params-panel tr.treeRow", 2);
-  waitSourceEditor = waitForDOM(document, "#params-panel .CodeMirror-code");
+  waitRows = waitForDOM(document, "#request-panel tr.treeRow", 2);
+  waitSourceEditor = waitForDOM(document, "#request-panel .CodeMirror-code");
   EventUtils.sendMouseEvent(
     { type: "mousedown" },
     document.querySelectorAll(".request-list-item")[4]
@@ -73,10 +73,10 @@ add_task(async function() {
   // Wait for all accordion items and editor updated by react
   const waitAccordionItems = waitForDOM(
     document,
-    "#params-panel .accordion-item",
+    "#request-panel .accordion-item",
     2
   );
-  waitSourceEditor = waitForDOM(document, "#params-panel .CodeMirror-code");
+  waitSourceEditor = waitForDOM(document, "#request-panel .CodeMirror-code");
   EventUtils.sendMouseEvent(
     { type: "mousedown" },
     document.querySelectorAll(".request-list-item")[5]
@@ -90,23 +90,23 @@ add_task(async function() {
   );
   testParamsTab3();
 
-  wait = waitForDOM(document, "#params-panel .accordion-item", 3);
+  wait = waitForDOM(document, "#request-panel .accordion-item", 3);
   EventUtils.sendMouseEvent(
     { type: "mousedown" },
     document.querySelectorAll(".request-list-item")[7]
   );
   await wait;
   testParamsTab1("a", "b", '{ "foo": "bar" }', "");
 
-  wait = waitForDOM(document, "#params-panel .accordion-item", 3);
+  wait = waitForDOM(document, "#request-panel .accordion-item", 3);
   EventUtils.sendMouseEvent(
     { type: "mousedown" },
     document.querySelectorAll(".request-list-item")[8]
   );
   await wait;
   testParamsTab1("a", "b", '{ "foo": "bar" }', "");
 
-  wait = waitForDOM(document, "#params-panel .accordion-item", 1);
+  wait = waitForDOM(document, "#request-panel .accordion-item", 1);
   EventUtils.sendMouseEvent(
     { type: "mousedown" },
     document.querySelectorAll(".request-list-item")[9]
@@ -115,15 +115,15 @@ add_task(async function() {
   testParamsTabGetWithArgs(new Map([["species", "in=(52,60)"]]));
 
   // Only the tree content will change
-  wait = waitForDOM(document, "#params-panel tr.treeTable", 0);
+  wait = waitForDOM(document, "#request-panel tr.treeTable", 0);
   EventUtils.sendMouseEvent(
     { type: "mousedown" },
     document.querySelectorAll(".request-list-item")[10]
   );
   await wait;
   testParamsTabGetWithArgs(new Map([["a", ["", "b"]]]));
 
-  wait = waitForDOM(document, "#params-panel tr.treeTable", 0);
+  wait = waitForDOM(document, "#request-panel tr.treeTable", 0);
   EventUtils.sendMouseEvent(
     { type: "mousedown" },
     document.querySelectorAll(".request-list-item")[11]
@@ -144,7 +144,7 @@ add_task(async function() {
     formDataParamName,
     formDataParamValue
   ) {
-    const tabpanel = document.querySelector("#params-panel");
+    const tabpanel = document.querySelector("#request-panel");
 
     is(
       tabpanel.querySelectorAll(".accordion-item").length,
@@ -178,7 +178,7 @@ add_task(async function() {
     is(
       accordionItems[0].querySelector(".accordion-header-label").textContent,
       L10N.getStr("paramsQueryString"),
-      "The params section doesn't have the correct title."
+      "The request query section doesn't have the correct title."
     );
     is(
       accordionItems[1].querySelector(".accordion-header-label").textContent,
@@ -216,7 +216,7 @@ add_task(async function() {
     editorMode
   ) {
     const isJSON = editorMode === "js";
-    const tabpanel = document.querySelector("#params-panel");
+    const tabpanel = document.querySelector("#request-panel");
 
     is(
       tabpanel.querySelectorAll(".accordion-item").length,
@@ -304,7 +304,7 @@ add_task(async function() {
   }
 
   function testParamsTab3() {
-    const tabpanel = document.querySelector("#params-panel");
+    const tabpanel = document.querySelector("#request-panel");
 
     is(
       tabpanel.querySelectorAll(".accordion-item").length,
@@ -338,7 +338,7 @@ add_task(async function() {
    * values
    */
   function testParamsTabGetWithArgs(expectedParams) {
-    const tabpanel = document.querySelector("#params-panel");
+    const tabpanel = document.querySelector("#request-panel");
 
     let numParamRows = 0;
     expectedParams.forEach((v, k, m) => {
@@ -376,7 +376,7 @@ add_task(async function() {
     is(
       accordionItems[0].querySelector(".accordion-header-label").textContent,
       L10N.getStr("paramsQueryString"),
-      "Check the displayed params section title."
+      "Check the displayed request query section title."
     );
 
     const labelsIter = labels.values();

devtools/client/netmonitor/test/browser_net_decode-params.js

@@ -31,7 +31,7 @@ add_task(async function() {
 
   EventUtils.sendMouseEvent(
     { type: "click" },
-    document.querySelector("#params-tab")
+    document.querySelector("#request-tab")
   );
 
   // The Params panel should render the following: