Bug 1581790 - added toggle button to network details. r=Honza

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

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

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

@@ -58,6 +58,10 @@ netmonitor.security.notAvailable=<Not Available>
 # that collapses the network details pane in the UI.
 collapseDetailsPane=Hide request details
 
+# LOCALIZATION NOTE (collapseActionPane): This is the tooltip for the button
+# that collapses the network action pane in the UI.
+collapseActionPane=Hide network action
+
 # LOCALIZATION NOTE (headersEmptyText): This is the text displayed in the
 # headers tab of the network details pane when there are no headers available.
 headersEmptyText=No headers for this request

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

@@ -13,8 +13,7 @@ const {
   UPDATE_BLOCKED_URL,
   REMOVE_BLOCKED_URL,
   DISABLE_MATCHING_URLS,
-  OPEN_SEARCH,
+  OPEN_ACTION_BAR,
-  CLOSE_SEARCH,
   SELECT_ACTION_BAR_TAB,
   PANELS,
 } = require("devtools/client/netmonitor/src/constants");
@@ -22,10 +21,10 @@ const {
 function toggleRequestBlockingPanel() {
   return (dispatch, getState) => {
     const state = getState();
-    state.search.panelOpen &&
+    state.ui.networkActionOpen &&
     state.ui.selectedActionBarTabId === PANELS.BLOCKING
-      ? dispatch({ type: CLOSE_SEARCH })
+      ? dispatch({ type: OPEN_ACTION_BAR, open: false })
-      : dispatch({ type: OPEN_SEARCH });
+      : dispatch({ type: OPEN_ACTION_BAR, open: true });
     dispatch({
       type: SELECT_ACTION_BAR_TAB,
       id: PANELS.BLOCKING,
@@ -76,7 +75,7 @@ function openRequestBlockingAndAddUrl(url) {
     );
 
     if (showBlockingPanel) {
-      dispatch({ type: OPEN_SEARCH });
+      dispatch({ type: OPEN_ACTION_BAR, open: true });
       dispatch({
         type: SELECT_ACTION_BAR_TAB,
         id: PANELS.BLOCKING,
@@ -93,7 +92,7 @@ function openRequestBlockingAndDisableUrls(url) {
     );
 
     if (showBlockingPanel) {
-      dispatch({ type: OPEN_SEARCH });
+      dispatch({ type: OPEN_ACTION_BAR, open: true });
       dispatch({
         type: SELECT_ACTION_BAR_TAB,
         id: PANELS.BLOCKING,

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

@@ -9,8 +9,7 @@ const {
   ADD_SEARCH_RESULT,
   CLEAR_SEARCH_RESULTS,
   ADD_ONGOING_SEARCH,
-  OPEN_SEARCH,
+  OPEN_ACTION_BAR,
-  CLOSE_SEARCH,
   UPDATE_SEARCH_STATUS,
   SEARCH_STATUS,
   SET_TARGET_SEARCH_RESULT,
@@ -199,7 +198,7 @@ function updateSearchStatus(status) {
 function closeSearch() {
   return (dispatch, getState) => {
     dispatch(stopOngoingSearch());
-    dispatch({ type: CLOSE_SEARCH });
+    dispatch({ type: OPEN_ACTION_BAR, open: false });
   };
 }
 
@@ -209,7 +208,7 @@ function closeSearch() {
  */
 function openSearch() {
   return (dispatch, getState) => {
-    dispatch({ type: OPEN_SEARCH });
+    dispatch({ type: OPEN_ACTION_BAR, open: true });
   };
 }
 
@@ -230,9 +229,10 @@ function toggleSearchPanel() {
   return (dispatch, getState) => {
     const state = getState();
 
-    state.search.panelOpen && state.ui.selectedActionBarTabId === PANELS.SEARCH
+    state.ui.networkActionOpen &&
-      ? dispatch({ type: CLOSE_SEARCH })
+    state.ui.selectedActionBarTabId === PANELS.SEARCH
-      : dispatch({ type: OPEN_SEARCH });
+      ? dispatch({ type: OPEN_ACTION_BAR, open: false })
+      : dispatch({ type: OPEN_ACTION_BAR, open: true });
 
     dispatch({
       type: SELECT_ACTION_BAR_TAB,

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

@@ -17,6 +17,7 @@ const {
   TOGGLE_COLUMN,
   WATERFALL_RESIZE,
   SET_COLUMNS_WIDTH,
+  OPEN_ACTION_BAR,
 } = require("devtools/client/netmonitor/src/constants");
 
 const {
@@ -45,6 +46,18 @@ function openNetworkDetails(open) {
   };
 }
 
+/**
+ * Change network action bar open state.
+ *
+ * @param {boolean} open - expected network action bar open state
+ */
+function openNetworkActionBar(open) {
+  return {
+    type: OPEN_ACTION_BAR,
+    open,
+  };
+}
+
 /**
  * Change network details panel size.
  *
@@ -183,6 +196,14 @@ function toggleNetworkDetails() {
     dispatch(openNetworkDetails(!getState().ui.networkDetailsOpen));
 }
 
+/**
+ * Toggle network action panel.
+ */
+function toggleNetworkActionBar() {
+  return (dispatch, getState) =>
+    dispatch(openNetworkActionBar(!getState().ui.networkActionOpen));
+}
+
 /**
  * Toggle persistent logs status.
  */
@@ -209,6 +230,7 @@ function toggleStatistics(connector) {
 
 module.exports = {
   openNetworkDetails,
+  openNetworkActionBar,
   resizeNetworkDetails,
   enablePersistentLogs,
   disableBrowserCache,
@@ -220,6 +242,7 @@ module.exports = {
   toggleColumn,
   setColumnsWidth,
   toggleNetworkDetails,
+  toggleNetworkActionBar,
   togglePersistentLogs,
   toggleBrowserCache,
   toggleStatistics,

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

@@ -44,10 +44,6 @@
   margin: 1px 3px;
 }
 
-.network-monitor .sidebar-toggle:dir(rtl) {
-  transform: scaleX(-1);
-}
-
 /* Empty notices in tab panels */
 
 .network-monitor .empty-notice {
@@ -336,7 +332,7 @@
 }
 
 .network-monitor .headers-summary .status-text {
-  width: auto!important;
+  width: auto !important;
   margin-inline-start: 4px;
 }
 
@@ -596,6 +592,6 @@
   margin-inline-start: 6px;
 }
 
-#timings-panel .learn-more-link{
+#timings-panel .learn-more-link {
   width: -moz-max-content;
 }

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

@@ -76,7 +76,7 @@ class MonitorPanel extends Component {
       sourceMapService: PropTypes.object,
       openLink: PropTypes.func,
       updateRequest: PropTypes.func.isRequired,
-      panelOpen: PropTypes.bool.isRequired,
+      networkActionOpen: PropTypes.bool.isRequired,
     };
   }
 
@@ -169,7 +169,7 @@ class MonitorPanel extends Component {
   }
 
   renderActionBar() {
-    const { connector, isEmpty, panelOpen } = this.props;
+    const { connector, isEmpty, networkActionOpen } = this.props;
 
     const initialWidth = Services.prefs.getIntPref(
       "devtools.netmonitor.panes-search-width"
@@ -184,9 +184,9 @@ class MonitorPanel extends Component {
       initialHeight,
       minSize: "250px",
       maxSize: "80%",
-      splitterSize: panelOpen ? 1 : 0,
+      splitterSize: networkActionOpen ? 1 : 0,
       startPanel:
-        panelOpen &&
+        networkActionOpen &&
         NetworkActionBar({
           ref: "actionBar",
           connector,
@@ -252,7 +252,7 @@ module.exports = connect(
   state => ({
     isEmpty: state.requests.requests.length == 0,
     networkDetailsOpen: state.ui.networkDetailsOpen,
-    panelOpen: state.search.panelOpen,
+    networkActionOpen: state.ui.networkActionOpen,
     request: getSelectedRequest(state),
     selectedRequestVisible: isSelectedRequestVisible(state),
   }),

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

@@ -44,6 +44,7 @@ class NetworkActionBar extends Component {
       connector: PropTypes.object.isRequired,
       selectedActionBarTabId: PropTypes.string,
       selectActionBarTab: PropTypes.func.isRequired,
+      toggleNetworkActionBar: PropTypes.func.isRequired,
     };
   }
 
@@ -52,6 +53,7 @@ class NetworkActionBar extends Component {
       connector,
       selectedActionBarTabId,
       selectActionBarTab,
+      toggleNetworkActionBar,
     } = this.props;
 
     // The request blocking and search panels are available behind a pref
@@ -68,6 +70,14 @@ class NetworkActionBar extends Component {
         {
           activeTabId: selectedActionBarTabId,
           onSelect: id => selectActionBarTab(id),
+          sidebarToggleButton: {
+            collapsed: false,
+            collapsePaneTitle: L10N.getStr("collapseActionPane"),
+            expandPaneTitle: "",
+            onClick: toggleNetworkActionBar,
+            alignRight: true,
+            canVerticalSplit: false,
+          },
         },
         showSearchPanel &&
           TabPanel(
@@ -98,5 +108,6 @@ module.exports = connect(
   }),
   dispatch => ({
     selectActionBarTab: id => dispatch(Actions.selectActionBarTab(id)),
+    toggleNetworkActionBar: () => dispatch(Actions.toggleNetworkActionBar()),
   })
 )(NetworkActionBar);

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

@@ -72,16 +72,6 @@ class Toolbar extends Component {
     }
   }
 
-  renderCloseButton() {
-    const { closeSearch } = this.props;
-    return button({
-      id: "devtools-network-search-close",
-      className: "devtools-button",
-      title: L10N.getStr("netmonitor.search.toolbar.close"),
-      onClick: () => closeSearch(),
-    });
-  }
-
   renderModifiers() {
     return div(
       { className: "search-modifiers" },
@@ -149,8 +139,7 @@ class Toolbar extends Component {
         className: "devtools-toolbar devtools-input-toolbar",
       },
       this.renderFilterBox(),
-      this.renderModifiers(),
+      this.renderModifiers()
-      this.renderCloseButton()
     );
   }
 }

devtools/client/netmonitor/src/constants.js

@@ -18,6 +18,7 @@ const actionTypes = {
   CLONE_SELECTED_REQUEST: "CLONE_SELECTED_REQUEST",
   ENABLE_REQUEST_FILTER_TYPE_ONLY: "ENABLE_REQUEST_FILTER_TYPE_ONLY",
   OPEN_NETWORK_DETAILS: "OPEN_NETWORK_DETAILS",
+  OPEN_ACTION_BAR: "OPEN_ACTION_BAR",
   RESIZE_NETWORK_DETAILS: "RESIZE_NETWORK_DETAILS",
   RIGHT_CLICK_REQUEST: "RIGHT_CLICK_REQUEST",
   ENABLE_PERSISTENT_LOGS: "ENABLE_PERSISTENT_LOGS",
@@ -59,8 +60,6 @@ const actionTypes = {
   ADD_SEARCH_RESULT: "ADD_SEARCH_RESULT",
   CLEAR_SEARCH_RESULTS: "CLEAR_SEARCH_RESULTS",
   ADD_ONGOING_SEARCH: "ADD_ONGOING_SEARCH",
-  OPEN_SEARCH: "OPEN_SEARCH",
-  CLOSE_SEARCH: "CLOSE_SEARCH",
   TOGGLE_SEARCH_CASE_SENSITIVE_SEARCH: "TOGGLE_SEARCH_CASE_SENSITIVE_SEARCH",
   UPDATE_SEARCH_STATUS: "UPDATE_SEARCH_STATUS",
   SET_TARGET_SEARCH_RESULT: "SET_TARGET_SEARCH_RESULT",

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

@@ -9,8 +9,6 @@ const {
   ADD_SEARCH_RESULT,
   CLEAR_SEARCH_RESULTS,
   ADD_ONGOING_SEARCH,
-  OPEN_SEARCH,
-  CLOSE_SEARCH,
   SEARCH_STATUS,
   TOGGLE_SEARCH_CASE_SENSITIVE_SEARCH,
   UPDATE_SEARCH_STATUS,
@@ -32,7 +30,6 @@ function Search(overrideParams = {}) {
       ongoingSearch: null,
       status: SEARCH_STATUS.INITIAL,
       caseSensitive: false,
-      panelOpen: false,
       targetSearchResult: null,
     },
     overrideParams
@@ -49,10 +46,6 @@ function search(state = new Search(), action) {
       return onClearSearchResults(state);
     case ADD_ONGOING_SEARCH:
       return onAddOngoingSearch(state, action);
-    case CLOSE_SEARCH:
-      return onCloseSearch(state);
-    case OPEN_SEARCH:
-      return onOpenSearch(state);
     case TOGGLE_SEARCH_CASE_SENSITIVE_SEARCH:
       return onToggleCaseSensitiveSearch(state);
     case UPDATE_SEARCH_STATUS:
@@ -98,20 +91,6 @@ function onAddOngoingSearch(state, action) {
   };
 }
 
-function onCloseSearch(state) {
-  return {
-    ...state,
-    panelOpen: false,
-  };
-}
-
-function onOpenSearch(state) {
-  return {
-    ...state,
-    panelOpen: true,
-  };
-}
-
 function onToggleCaseSensitiveSearch(state) {
   return {
     ...state,

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

@@ -8,6 +8,7 @@ const Services = require("Services");
 const {
   CLEAR_REQUESTS,
   OPEN_NETWORK_DETAILS,
+  OPEN_ACTION_BAR,
   RESIZE_NETWORK_DETAILS,
   ENABLE_PERSISTENT_LOGS,
   DISABLE_BROWSER_CACHE,
@@ -82,6 +83,7 @@ function UI(initialState = {}) {
     browserCacheDisabled: Services.prefs.getBoolPref("devtools.cache.disabled"),
     statisticsOpen: false,
     waterfallWidth: null,
+    networkActionOpen: false,
     selectedActionBarTabId: null,
     ...initialState,
   };
@@ -109,6 +111,13 @@ function openNetworkDetails(state, action) {
   };
 }
 
+function openNetworkAction(state, action) {
+  return {
+    ...state,
+    networkActionOpen: action.open,
+  };
+}
+
 function resizeNetworkDetails(state, action) {
   return {
     ...state,
@@ -224,6 +233,8 @@ function ui(state = UI(), action) {
       return resizeWaterfall(state, action);
     case SET_COLUMNS_WIDTH:
       return setColumnsWidth(state, action);
+    case OPEN_ACTION_BAR:
+      return openNetworkAction(state, action);
     default:
       return state;
   }

devtools/client/shared/components/Sidebar.js

@@ -31,6 +31,8 @@ class Sidebar extends PureComponent {
         collapsePaneTitle: PropTypes.string.isRequired,
         expandPaneTitle: PropTypes.string.isRequired,
         onClick: PropTypes.func.isRequired,
+        alignRight: PropTypes.bool,
+        canVerticalSplit: PropTypes.bool,
       }),
       activeTab: PropTypes.number,
     };
@@ -51,6 +53,8 @@ class Sidebar extends PureComponent {
       collapsePaneTitle,
       expandPaneTitle,
       onClick,
+      alignRight,
+      canVerticalSplit,
     } = this.props.sidebarToggleButton;
 
     return SidebarToggle({
@@ -58,6 +62,8 @@ class Sidebar extends PureComponent {
       collapsePaneTitle,
       expandPaneTitle,
       onClick,
+      alignRight,
+      canVerticalSplit,
     });
   }
 

devtools/client/shared/components/SidebarToggle.css

@@ -7,25 +7,33 @@
 }
 
 .sidebar-toggle::before,
-.sidebar-toggle.pane-collapsed:-moz-locale-dir(rtl)::before {
+.sidebar-toggle.pane-collapsed:dir(rtl)::before {
   background-image: url(chrome://devtools/skin/images/pane-collapse.svg);
 }
 
 .sidebar-toggle.pane-collapsed::before,
-.sidebar-toggle:-moz-locale-dir(rtl)::before {
+.sidebar-toggle:dir(rtl)::before {
   background-image: url(chrome://devtools/skin/images/pane-expand.svg);
 }
 
+.sidebar-toggle.alignRight::before {
+  transform: scaleX(-1);
+}
+
+.sidebar-toggle.alignRight {
+  order: 10
+}
+
 /* Rotate button icon 90deg if the toolbox container is
   in vertical mode (sidebar displayed under the main panel) */
 @media (max-width: 700px) {
-  .sidebar-toggle::before {
+  .sidebar-toggle:not(.disableVerticalBehaviour)::before {
     transform: rotate(90deg);
   }
 
   /* Since RTL swaps the used images, we need to flip them
      the other way round */
-  .sidebar-toggle:dir(rtl)::before {
+  .sidebar-toggle:not(.disableVerticalBehaviour):dir(rtl)::before {
     transform: rotate(-90deg);
   }
 }

devtools/client/shared/components/SidebarToggle.js

@@ -26,6 +26,17 @@ class SidebarToggle extends Component {
       expandPaneTitle: PropTypes.string.isRequired,
       // Click callback
       onClick: PropTypes.func.isRequired,
+      // align toggle button to right
+      alignRight: PropTypes.bool,
+      // if set to true toggle-button rotate 90
+      canVerticalSplit: PropTypes.bool,
+    };
+  }
+
+  static get defaultProps() {
+    return {
+      alignRight: false,
+      canVerticalSplit: true,
     };
   }
 
@@ -58,6 +69,12 @@ class SidebarToggle extends Component {
     if (this.state.collapsed) {
       classNames.push("pane-collapsed");
     }
+    if (this.props.alignRight) {
+      classNames.push("alignRight");
+    }
+    if (!this.props.canVerticalSplit) {
+      classNames.push("disableVerticalBehaviour");
+    }
 
     return button({
       className: classNames.join(" "),

devtools/client/shared/components/tabs/TabBar.js

@@ -48,6 +48,10 @@ class Tabbar extends Component {
         expandPaneTitle: PropTypes.string.isRequired,
         // Click callback
         onClick: PropTypes.func.isRequired,
+        // align toggle button to right
+        alignRight: PropTypes.bool,
+        // if set to true toggle-button rotate 90
+        canVerticalSplit: PropTypes.bool,
       }),
     };
   }