Bug 1587777 - Implement request blocking toolbar button r=Honza

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

--HG--
extra : moz-landing-system : lando

devtools/client/netmonitor/src/actions/request-blocking.js

@@ -14,10 +14,25 @@ const {
   REMOVE_BLOCKED_URL,
   DISABLE_MATCHING_URLS,
   OPEN_SEARCH,
+  CLOSE_SEARCH,
   SELECT_ACTION_BAR_TAB,
   PANELS,
 } = require("../constants");
 
+function toggleRequestBlockingPanel() {
+  return (dispatch, getState) => {
+    const state = getState();
+    state.search.panelOpen &&
+    state.ui.selectedActionBarTabId === PANELS.BLOCKING
+      ? dispatch({ type: CLOSE_SEARCH })
+      : dispatch({ type: OPEN_SEARCH });
+    dispatch({
+      type: SELECT_ACTION_BAR_TAB,
+      id: PANELS.BLOCKING,
+    });
+  };
+}
+
 function toggleBlockingEnabled(enabled) {
   return {
     type: TOGGLE_BLOCKING_ENABLED,
@@ -90,6 +105,7 @@ function openRequestBlockingAndDisableUrls(url) {
 }
 
 module.exports = {
+  toggleRequestBlockingPanel,
   addBlockedUrl,
   toggleBlockingEnabled,
   toggleBlockedUrl,

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

@@ -14,7 +14,9 @@ const {
   UPDATE_SEARCH_STATUS,
   SEARCH_STATUS,
   SET_TARGET_SEARCH_RESULT,
+  SELECT_ACTION_BAR_TAB,
   TOGGLE_SEARCH_CASE_SENSITIVE_SEARCH,
+  PANELS,
 } = require("../constants");
 
 const {
@@ -219,9 +221,15 @@ function toggleCaseSensitiveSearch() {
 function toggleSearchPanel() {
   return (dispatch, getState) => {
     const state = getState();
-    state.search.panelOpen
+
+    state.search.panelOpen && state.ui.selectedActionBarTabId === PANELS.SEARCH
       ? dispatch({ type: CLOSE_SEARCH })
       : dispatch({ type: OPEN_SEARCH });
+
+    dispatch({
+      type: SELECT_ACTION_BAR_TAB,
+      id: PANELS.SEARCH,
+    });
   };
 }
 

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

@@ -38,6 +38,23 @@
   background-size: 13px;
 }
 
+/* Request blocking button */
+.devtools-button.requests-list-blocking-button::before {
+  background-image: url("chrome://devtools/content/netmonitor/src/assets/icons/blocked.svg");
+}
+
+.devtools-button.requests-list-blocking-button:empty::before {
+  fill: var(--theme-body-color);
+}
+
+.devtools-button.requests-list-blocking-button.checked:empty::before {
+  fill: var(--theme-icon-checked-color);
+}
+
+.devtools-button.requests-list-blocking-button.requests-list-blocking-button-enabled:empty::before {
+  fill: var(--timing-blocked-color);
+}
+
 /* HAR button */
 
 #devtools-har-button {

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

@@ -15,7 +15,7 @@ const {
   connect,
 } = require("devtools/client/shared/redux/visibility-handler-connect");
 const Actions = require("../actions/index");
-const { FILTER_SEARCH_DELAY, FILTER_TAGS } = require("../constants");
+const { FILTER_SEARCH_DELAY, FILTER_TAGS, PANELS } = require("../constants");
 const {
   getDisplayedRequests,
   getRecordingState,
@@ -60,6 +60,7 @@ const TOOLBAR_TOGGLE_RECORDING = L10N.getStr(
   "netmonitor.toolbar.toggleRecording"
 );
 const TOOLBAR_SEARCH = L10N.getStr("netmonitor.toolbar.search");
+const TOOLBAR_BLOCKING = L10N.getStr("netmonitor.actionbar.requestBlocking");
 const TOOLBAR_HAR_BUTTON = L10N.getStr("netmonitor.label.har");
 const LEARN_MORE_TITLE = L10N.getStr(
   "netmonitor.toolbar.filterFreetext.learnMore"
@@ -143,7 +144,10 @@ class Toolbar extends Component {
       // Executed when throttling changes (through toolbar button).
       onChangeNetworkThrottling: PropTypes.func.isRequired,
       toggleSearchPanel: PropTypes.func.isRequired,
-      searchPanelOpen: PropTypes.bool.isRequired,
+      networkActionBarOpen: PropTypes.bool.isRequired,
+      toggleRequestBlockingPanel: PropTypes.func.isRequired,
+      networkActionBarSelectedPanel: PropTypes.string.isRequired,
+      hasBlockedRequests: PropTypes.bool.isRequired,
     };
   }
 
@@ -186,12 +190,15 @@ class Toolbar extends Component {
       this.props.persistentLogsEnabled !== nextProps.persistentLogsEnabled ||
       this.props.browserCacheDisabled !== nextProps.browserCacheDisabled ||
       this.props.recording !== nextProps.recording ||
-      this.props.searchPanelOpen !== nextProps.searchPanelOpen ||
+      this.props.networkActionBarOpen !== nextProps.networkActionBarOpen ||
       this.props.singleRow !== nextProps.singleRow ||
       !Object.is(this.props.requestFilterTypes, nextProps.requestFilterTypes) ||
       this.props.networkThrottling !== nextProps.networkThrottling ||
       // Filtered requests are useful only when searchbox is focused
-      !!(this.refs.searchbox && this.refs.searchbox.focused)
+      !!(this.refs.searchbox && this.refs.searchbox.focused) ||
+      this.props.networkActionBarSelectedPanel !==
+        nextProps.networkActionBarSelectedPanel ||
+      this.props.hasBlockedRequests !== nextProps.hasBlockedRequests
     );
   }
 
@@ -285,14 +292,18 @@ class Toolbar extends Component {
   }
 
   /**
-   * Render a search button.
+   * Render a blocking button.
    */
-  renderSearchButton(toggleSearchPanel) {
-    const { searchPanelOpen } = this.props;
+  renderBlockingButton(toggleSearchPanel) {
+    const {
+      networkActionBarOpen,
+      toggleRequestBlockingPanel,
+      networkActionBarSelectedPanel,
+      hasBlockedRequests,
+    } = this.props;
 
-    // The search and request blocking features are available behind a pref.
+    // The blocking feature is available behind a pref.
     if (
-      !Services.prefs.getBoolPref("devtools.netmonitor.features.search") &&
       !Services.prefs.getBoolPref(
         "devtools.netmonitor.features.requestBlocking"
       )
@@ -300,20 +311,54 @@ class Toolbar extends Component {
       return null;
     }
 
+    const className = ["devtools-button", "requests-list-blocking-button"];
+    if (
+      networkActionBarOpen &&
+      networkActionBarSelectedPanel === PANELS.BLOCKING
+    ) {
+      className.push("checked");
+    }
+
+    if (hasBlockedRequests) {
+      className.push("requests-list-blocking-button-enabled");
+    }
+
+    return button({
+      className: className.join(" "),
+      title: TOOLBAR_BLOCKING,
+      "aria-pressed": networkActionBarOpen,
+      onClick: toggleRequestBlockingPanel,
+    });
+  }
+
+  /**
+   * Render a search button.
+   */
+  renderSearchButton(toggleSearchPanel) {
+    const { networkActionBarOpen, networkActionBarSelectedPanel } = this.props;
+
+    // The search feature is available behind a pref.
+    if (!Services.prefs.getBoolPref("devtools.netmonitor.features.search")) {
+      return null;
+    }
+
     const className = [
       "devtools-button",
       "devtools-search-icon",
       "requests-list-search-button",
     ];
 
-    if (searchPanelOpen) {
+    if (
+      networkActionBarOpen &&
+      networkActionBarSelectedPanel === PANELS.SEARCH
+    ) {
       className.push("checked");
     }
 
     return button({
       className: className.join(" "),
       title: TOOLBAR_SEARCH,
-      "aria-pressed": searchPanelOpen,
+      "aria-pressed": networkActionBarOpen,
       onClick: toggleSearchPanel,
     });
   }
@@ -492,6 +537,7 @@ class Toolbar extends Component {
             this.renderSeparator(),
             this.renderToggleRecordingButton(recording, toggleRecording),
             this.renderSearchButton(toggleSearchPanel),
+            this.renderBlockingButton(toggleSearchPanel),
             this.renderSeparator(),
             this.renderFilterButtons(requestFilterTypes),
             this.renderSeparator(),
@@ -537,12 +583,16 @@ module.exports = connect(
   state => ({
     browserCacheDisabled: state.ui.browserCacheDisabled,
     displayedRequests: getDisplayedRequests(state),
+    hasBlockedRequests:
+      state.requestBlocking.blockingEnabled &&
+      state.requestBlocking.blockedUrls.some(({ enabled }) => enabled),
     filteredRequests: getTypeFilteredRequests(state),
     persistentLogsEnabled: state.ui.persistentLogsEnabled,
     recording: getRecordingState(state),
     requestFilterTypes: state.filters.requestFilterTypes,
     networkThrottling: state.networkThrottling,
-    searchPanelOpen: state.search.panelOpen,
+    networkActionBarOpen: state.search.panelOpen,
+    networkActionBarSelectedPanel: state.ui.selectedActionBarTabId || "",
   }),
   dispatch => ({
     clearRequests: () => dispatch(Actions.clearRequests()),
@@ -559,5 +609,7 @@ module.exports = connect(
     onChangeNetworkThrottling: (enabled, profile) =>
       dispatch(changeNetworkThrottling(enabled, profile)),
     toggleSearchPanel: () => dispatch(Actions.toggleSearchPanel()),
+    toggleRequestBlockingPanel: () =>
+      dispatch(Actions.toggleRequestBlockingPanel()),
   })
 )(Toolbar);

devtools/client/netmonitor/src/constants.js

@@ -210,6 +210,7 @@ const PANELS = {
   TIMINGS: "timings",
   SEARCH: "network-action-bar-search",
   BLOCKING: "network-action-bar-blocked",
+  SEARCH: "network-action-bar-search",
 };
 
 const RESPONSE_HEADERS = [