Bug 1744782 - [devtools] Add new toolbar button for the New Custom Request panel r=bomsy

This is the first part of this bug, the next patch will include the context menu item

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

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

@@ -1009,6 +1009,10 @@ netmonitor.toolbar.toggleRecording=Pause/Resume recording network log
 # in the network toolbar for the search  button.
 netmonitor.toolbar.search=Search
 
+# LOCALIZATION NOTE (netmonitor.toolbar.HTTPCustomRequest): This is the tooltip label displayed
+# in the network toolbar for the new HTTP Custom Request button.
+netmonitor.toolbar.HTTPCustomRequest=New Request
+
 # LOCALIZATION NOTE (netmonitor.toolbar.resetColumns): This is the label
 # displayed in the network table header context menu.
 netmonitor.toolbar.resetColumns=Reset Columns

devtools/client/netmonitor/src/actions/http-custom-request.js

@@ -0,0 +1,34 @@
+/* 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 {
+  OPEN_ACTION_BAR,
+  SELECT_ACTION_BAR_TAB,
+  PANELS,
+} = require("devtools/client/netmonitor/src/constants");
+
+/**
+ * Toggle visibility of New Custom Request panel in network panel
+ */
+function toggleHTTPCustomRequestPanel() {
+  return ({ dispatch, getState }) => {
+    const state = getState();
+
+    const shouldClose =
+      state.ui.networkActionOpen &&
+      state.ui.selectedActionBarTabId === PANELS.HTTP_CUSTOM_REQUEST;
+    dispatch({ type: OPEN_ACTION_BAR, open: !shouldClose });
+
+    dispatch({
+      type: SELECT_ACTION_BAR_TAB,
+      id: PANELS.HTTP_CUSTOM_REQUEST,
+    });
+  };
+}
+
+module.exports = {
+  toggleHTTPCustomRequestPanel,
+};

devtools/client/netmonitor/src/actions/index.js

@@ -6,6 +6,7 @@
 
 const batching = require("devtools/client/netmonitor/src/actions/batching");
 const filters = require("devtools/client/netmonitor/src/actions/filters");
+const httpCustomRequest = require("devtools/client/netmonitor/src/actions/http-custom-request");
 const requests = require("devtools/client/netmonitor/src/actions/requests");
 const selection = require("devtools/client/netmonitor/src/actions/selection");
 const sort = require("devtools/client/netmonitor/src/actions/sort");
@@ -19,6 +20,7 @@ Object.assign(
   exports,
   batching,
   filters,
+  httpCustomRequest,
   requests,
   search,
   selection,

devtools/client/netmonitor/src/actions/moz.build

@@ -5,6 +5,7 @@
 DevToolsModules(
     "batching.js",
     "filters.js",
+    "http-custom-request.js",
     "index.js",
     "messages.js",
     "request-blocking.js",

devtools/client/netmonitor/src/assets/styles/Toolbar.css

@@ -32,6 +32,12 @@
   background-image: url("chrome://devtools/content/netmonitor/src/assets/icons/play.svg");
 }
 
+/* New HTTP Custom Request button */
+.devtools-button.devtools-http-custom-request-icon::before {
+  background-image: url("chrome://devtools/skin/images/add.svg");
+  background-size: 13px;
+}
+
 /* Search button */
 .devtools-button.devtools-search-icon::before {
   background-image: url("chrome://devtools/skin/images/search.svg");

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

@@ -69,6 +69,9 @@ const TOOLBAR_CLEAR = L10N.getStr("netmonitor.toolbar.clear");
 const TOOLBAR_TOGGLE_RECORDING = L10N.getStr(
   "netmonitor.toolbar.toggleRecording"
 );
+const TOOLBAR_HTTP_CUSTOM_REQUEST = L10N.getStr(
+  "netmonitor.toolbar.HTTPCustomRequest"
+);
 const TOOLBAR_SEARCH = L10N.getStr("netmonitor.toolbar.search");
 const TOOLBAR_BLOCKING = L10N.getStr("netmonitor.toolbar.requestBlocking");
 const LEARN_MORE_TITLE = L10N.getStr(
@@ -163,6 +166,7 @@ class Toolbar extends Component {
       // Executed when throttling changes (through toolbar button).
       onChangeNetworkThrottling: PropTypes.func.isRequired,
       toggleSearchPanel: PropTypes.func.isRequired,
+      toggleHTTPCustomRequestPanel: PropTypes.func.isRequired,
       networkActionBarOpen: PropTypes.bool,
       toggleRequestBlockingPanel: PropTypes.func.isRequired,
       networkActionBarSelectedPanel: PropTypes.string.isRequired,
@@ -394,6 +398,46 @@ class Toolbar extends Component {
     });
   }
 
+  /**
+   * Render a new HTTP Custom Request button.
+   */
+  renderHTTPCustomRequestButton() {
+    const {
+      networkActionBarOpen,
+      networkActionBarSelectedPanel,
+      toggleHTTPCustomRequestPanel,
+    } = this.props;
+
+    // The new HTTP Custom Request feature is available behind a pref.
+    if (
+      !Services.prefs.getBoolPref(
+        "devtools.netmonitor.features.newEditAndResend"
+      )
+    ) {
+      return null;
+    }
+
+    const className = [
+      "devtools-button",
+      "devtools-http-custom-request-icon",
+      "requests-list-http-custom-request-button",
+    ];
+
+    if (
+      networkActionBarOpen &&
+      networkActionBarSelectedPanel === PANELS.HTTP_CUSTOM_REQUEST
+    ) {
+      className.push("checked");
+    }
+
+    return button({
+      className: className.join(" "),
+      title: TOOLBAR_HTTP_CUSTOM_REQUEST,
+      "aria-pressed": networkActionBarOpen,
+      onClick: toggleHTTPCustomRequestPanel,
+    });
+  }
+
   /**
    * Render filter buttons.
    */
@@ -557,6 +601,7 @@ class Toolbar extends Component {
             this.renderFilterBox(setRequestFilterText),
             this.renderSeparator(),
             this.renderToggleRecordingButton(recording, toggleRecording),
+            this.renderHTTPCustomRequestButton(),
             this.renderSearchButton(toggleSearchPanel),
             this.renderBlockingButton(toggleSearchPanel),
             this.renderSeparator(),
@@ -578,6 +623,7 @@ class Toolbar extends Component {
             this.renderFilterBox(setRequestFilterText),
             this.renderSeparator(),
             this.renderToggleRecordingButton(recording, toggleRecording),
+            this.renderHTTPCustomRequestButton(),
             this.renderSearchButton(toggleSearchPanel),
             this.renderBlockingButton(toggleSearchPanel),
             this.renderSeparator(),
@@ -625,6 +671,8 @@ module.exports = connect(
       dispatch(Actions.toggleRequestFilterType(type)),
     onChangeNetworkThrottling: (enabled, profile) =>
       dispatch(changeNetworkThrottling(enabled, profile)),
+    toggleHTTPCustomRequestPanel: () =>
+      dispatch(Actions.toggleHTTPCustomRequestPanel()),
     toggleSearchPanel: () => dispatch(Actions.toggleSearchPanel()),
     toggleRequestBlockingPanel: () =>
       dispatch(Actions.toggleRequestBlockingPanel()),

devtools/client/netmonitor/test/browser_net_new_request_panel.js

@@ -8,6 +8,9 @@
  */
 
 add_task(async function() {
+  // Turn true the pref
+  await pushPref("devtools.netmonitor.features.newEditAndResend", true);
+
   const { monitor } = await initNetMonitor(HTTPS_CUSTOM_GET_URL, {
     requestCount: 1,
   });
@@ -20,41 +23,45 @@ add_task(async function() {
   store.dispatch(Actions.batchEnable(false));
 
   info("open the left panel");
-  let waitForPanels = waitForDOM(
+  const waitForPanels = waitForDOM(
     document,
     ".monitor-panel .network-action-bar"
   );
 
-  const respSearchButton = document.querySelector(
-    "#netmonitor-toolbar-container .devtools-search-icon"
-  );
-  respSearchButton.click();
-  await waitForPanels;
-  is(
-    !!document.querySelector("#network-action-bar-HTTP-custom-request-panel"),
-    false,
-    "The 'New Request' header should be hidden when the pref is false."
+  info("switching to new HTTP Custom Request panel");
+  let HTTPCustomRequestButton = document.querySelector(
+    "#netmonitor-toolbar-container .devtools-http-custom-request-icon"
   );
+  ok(HTTPCustomRequestButton, "The Toolbar button should be visible.");
 
-  // Close the panel before changing pref
-  const closePanel = document.querySelector(
-    ".network-action-bar .tabs-navigation .sidebar-toggle"
-  );
-  closePanel.click();
-
-  await pushPref("devtools.netmonitor.features.newEditAndResend", true);
-
-  info("open the left panel");
-  waitForPanels = waitForDOM(document, ".monitor-panel .network-action-bar");
-  respSearchButton.click();
+  HTTPCustomRequestButton.click();
   await waitForPanels;
 
-  info("switching to new request panel");
   is(
     !!document.querySelector("#network-action-bar-HTTP-custom-request-panel"),
     true,
     "The 'New Request' header should be visible when the pref is true."
   );
 
+  // Turn false the pref
+  await pushPref("devtools.netmonitor.features.newEditAndResend", false);
+
+  // Close the panel to updated after changing the pref
+  const closePanel = document.querySelector(
+    ".network-action-bar .tabs-navigation .sidebar-toggle"
+  );
+  closePanel.click();
+
+  // Check if the toolbar is hidden when tre pref is false
+  HTTPCustomRequestButton = document.querySelector(
+    "#netmonitor-toolbar-container .devtools-http-custom-request-icon"
+  );
+
+  is(
+    !!HTTPCustomRequestButton,
+    false,
+    "The toolbar button should be hidden when the pref is false."
+  );
+
   await teardown(monitor);
 });