Bug 1349561 - Add UI for disabling browser cache in Net panel in MozReview; r?gasolin draft
authorSwapnesh Kumar Sahoo <swapneshks@gmail.com>
Wed, 24 May 2017 01:15:48 +0530
changeset 583187 cf0778207d4c25e83404682e7e583e5854f4d671
parent 581979 f36ae974bfe4868fa8de4cc22b59e9c7067c351e
child 588679 3593e705fca9e3bc87fe1e654e29c4ceda9758cc
child 588681 d81c026ebbe77c211219cb313e3de94066635cdb
push id60326
push userswapneshks@gmail.com
push dateTue, 23 May 2017 19:50:40 +0000
reviewersgasolin
bugs1349561
milestone55.0a1
Bug 1349561 - Add UI for disabling browser cache in Net panel in MozReview; r?gasolin MozReview-Commit-ID: 1jLTzSqFGAm
devtools/client/locales/en-US/netmonitor.properties
devtools/client/netmonitor/src/actions/ui.js
devtools/client/netmonitor/src/assets/styles/netmonitor.css
devtools/client/netmonitor/src/components/toolbar.js
devtools/client/netmonitor/src/constants.js
devtools/client/netmonitor/src/middleware/prefs.js
devtools/client/netmonitor/src/reducers/ui.js
--- a/devtools/client/locales/en-US/netmonitor.properties
+++ b/devtools/client/locales/en-US/netmonitor.properties
@@ -594,16 +594,24 @@ netmonitor.toolbar.filter.other=Other
 # LOCALIZATION NOTE (netmonitor.toolbar.filterFreetext.label): This is the label
 # displayed in the network toolbar for the url filtering textbox.
 netmonitor.toolbar.filterFreetext.label=Filter URLs
 
 # LOCALIZATION NOTE (netmonitor.toolbar.filterFreetext.key): This is the
 # shortcut key to focus on the toolbar url filtering textbox
 netmonitor.toolbar.filterFreetext.key=CmdOrCtrl+F
 
+# LOCALIZATION NOTE (netmonitor.toolbar.checkBox.label): This is the label
+# displayed for the checkbox for disabling browser cache.
+netmonitor.toolbar.checkBox.label=Disable cache
+
+# LOCALIZATION NOTE (netmonitor.toolbar.checkBox.tooltip): This is the tooltip
+# displayed for the checkbox for disabling browser cache.
+netmonitor.toolbar.checkBox.tooltip=Disable HTTP cache
+
 # LOCALIZATION NOTE (netmonitor.toolbar.clear): This is the label displayed
 # in the network toolbar for the "Clear" button.
 netmonitor.toolbar.clear=Clear
 
 # LOCALIZATION NOTE (netmonitor.toolbar.perf): This is the label displayed
 # in the network toolbar for the performance analysis button.
 netmonitor.toolbar.perf=Toggle performance analysis…
 
--- a/devtools/client/netmonitor/src/actions/ui.js
+++ b/devtools/client/netmonitor/src/actions/ui.js
@@ -3,16 +3,17 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 const {
   ACTIVITY_TYPE,
   OPEN_NETWORK_DETAILS,
   OPEN_STATISTICS,
+  DISABLE_BROWSER_CACHE,
   RESET_COLUMNS,
   SELECT_DETAILS_PANEL_TAB,
   TOGGLE_COLUMN,
   WATERFALL_RESIZE,
 } = require("../constants");
 const { triggerActivity } = require("../connector/index");
 
 /**
@@ -23,16 +24,28 @@ const { triggerActivity } = require("../
 function openNetworkDetails(open) {
   return {
     type: OPEN_NETWORK_DETAILS,
     open,
   };
 }
 
 /**
+ * Change browser cache state.
+ *
+ * @param {boolean} disable - expected browser cache in disable state
+ */
+function disableBrowserCache(disable) {
+  return {
+    type: DISABLE_BROWSER_CACHE,
+    disable,
+  };
+}
+
+/**
  * Change performance statistics panel open state.
  *
  * @param {boolean} visible - expected performance statistics panel open state
  */
 function openStatistics(open) {
   if (open) {
     triggerActivity(ACTIVITY_TYPE.RELOAD.WITH_CACHE_ENABLED);
   }
@@ -90,25 +103,34 @@ function toggleColumn(column) {
  * Toggle network details panel.
  */
 function toggleNetworkDetails() {
   return (dispatch, getState) =>
     dispatch(openNetworkDetails(!getState().ui.networkDetailsOpen));
 }
 
 /**
+ * Toggle browser cache status.
+ */
+function toggleBrowserCache() {
+  return (dispatch, getState) =>
+    dispatch(disableBrowserCache(!getState().ui.browserCacheDisable));
+}
+
+/**
  * Toggle performance statistics panel.
  */
 function toggleStatistics() {
   return (dispatch, getState) =>
     dispatch(openStatistics(!getState().ui.statisticsOpen));
 }
 
 module.exports = {
   openNetworkDetails,
+  disableBrowserCache,
   openStatistics,
   resetColumns,
   resizeWaterfall,
   selectDetailsPanelTab,
   toggleColumn,
   toggleNetworkDetails,
   toggleStatistics,
 };
--- a/devtools/client/netmonitor/src/assets/styles/netmonitor.css
+++ b/devtools/client/netmonitor/src/assets/styles/netmonitor.css
@@ -752,16 +752,24 @@ body,
 .properties-view .devtools-searchbox {
   padding: 0;
 }
 
 .properties-view .devtools-searchbox input {
   margin: 1px 3px;
 }
 
+.devtools-checkbox {
+  vertical-align: middle;
+}
+
+.devtools-checkbox-label {
+  margin: 1px 3px 1px 1px
+}
+
 /* Empty notices in tab panels */
 
 .empty-notice {
   color: var(--theme-body-color-alt);
   padding: 3px 8px;
 }
 
 /* Text inputs in tab panels */
--- a/devtools/client/netmonitor/src/components/toolbar.js
+++ b/devtools/client/netmonitor/src/components/toolbar.js
@@ -19,17 +19,17 @@ const {
   isNetworkDetailsToggleButtonDisabled,
 } = require("../selectors/index");
 
 const { L10N } = require("../utils/l10n");
 
 // Components
 const SearchBox = createFactory(require("devtools/client/shared/components/search-box"));
 
-const { button, div, span } = DOM;
+const { button, input, label, div, span } = DOM;
 
 const COLLPASE_DETAILS_PANE = L10N.getStr("collapseDetailsPane");
 const EXPAND_DETAILS_PANE = L10N.getStr("expandDetailsPane");
 const SEARCH_KEY_SHORTCUT = L10N.getStr("netmonitor.toolbar.filterFreetext.key");
 const SEARCH_PLACE_HOLDER = L10N.getStr("netmonitor.toolbar.filterFreetext.label");
 const TOOLBAR_CLEAR = L10N.getStr("netmonitor.toolbar.clear");
 
 /*
@@ -41,16 +41,18 @@ const Toolbar = createClass({
 
   propTypes: {
     clearRequests: PropTypes.func.isRequired,
     requestFilterTypes: PropTypes.array.isRequired,
     setRequestFilterText: PropTypes.func.isRequired,
     networkDetailsToggleDisabled: PropTypes.bool.isRequired,
     networkDetailsOpen: PropTypes.bool.isRequired,
     toggleNetworkDetails: PropTypes.func.isRequired,
+    toggleBrowserCache: PropTypes.func.isRequired,
+    browserCacheDisable: PropTypes.func.isRequired,
     toggleRequestFilterType: PropTypes.func.isRequired,
   },
 
   toggleRequestFilterType(evt) {
     if (evt.type === "keydown" && (evt.key !== "" || evt.key !== "Enter")) {
       return;
     }
     this.props.toggleRequestFilterType(evt.target.dataset.key);
@@ -59,16 +61,18 @@ const Toolbar = createClass({
   render() {
     let {
       clearRequests,
       requestFilterTypes,
       setRequestFilterText,
       networkDetailsToggleDisabled,
       networkDetailsOpen,
       toggleNetworkDetails,
+      toggleBrowserCache,
+      browserCacheDisable,
     } = this.props;
 
     let toggleButtonClassName = [
       "network-details-panel-toggle",
       "devtools-button",
     ];
     if (!networkDetailsOpen) {
       toggleButtonClassName.push("pane-collapsed");
@@ -106,16 +110,28 @@ const Toolbar = createClass({
           SearchBox({
             delay: FILTER_SEARCH_DELAY,
             keyShortcut: SEARCH_KEY_SHORTCUT,
             placeholder: SEARCH_PLACE_HOLDER,
             type: "filter",
             onChange: setRequestFilterText,
             autocompleteList: FILTER_FLAGS.map((item) => `${item}:`),
           }),
+          label(
+            {
+              className: "devtools-checkbox-label",
+              title: L10N.getStr("netmonitor.toolbar.checkBox.tooltip"),
+            },
+            input({
+              className: "devtools-checkbox",
+              type: "checkbox",
+              onChange: toggleBrowserCache,
+            }),
+            L10N.getStr("netmonitor.toolbar.checkBox.label")
+          ),
           button({
             className: toggleButtonClassName.join(" "),
             title: networkDetailsOpen ? COLLPASE_DETAILS_PANE : EXPAND_DETAILS_PANE,
             disabled: networkDetailsToggleDisabled,
             tabIndex: "0",
             onClick: toggleNetworkDetails,
           }),
         )
@@ -123,18 +139,20 @@ const Toolbar = createClass({
     );
   }
 });
 
 module.exports = connect(
   (state) => ({
     networkDetailsToggleDisabled: isNetworkDetailsToggleButtonDisabled(state),
     networkDetailsOpen: state.ui.networkDetailsOpen,
+    browserCacheDisable: state.ui.browserCacheDisable,
     requestFilterTypes: getRequestFilterTypes(state),
     summary: getDisplayedRequestsSummary(state),
   }),
   (dispatch) => ({
     clearRequests: () => dispatch(Actions.clearRequests()),
     setRequestFilterText: (text) => dispatch(Actions.setRequestFilterText(text)),
     toggleRequestFilterType: (type) => dispatch(Actions.toggleRequestFilterType(type)),
     toggleNetworkDetails: () => dispatch(Actions.toggleNetworkDetails()),
+    toggleBrowserCache: () => dispatch(Actions.toggleBrowserCache()),
   }),
 )(Toolbar);
--- a/devtools/client/netmonitor/src/constants.js
+++ b/devtools/client/netmonitor/src/constants.js
@@ -9,16 +9,17 @@ const actionTypes = {
   ADD_TIMING_MARKER: "ADD_TIMING_MARKER",
   BATCH_ACTIONS: "BATCH_ACTIONS",
   BATCH_ENABLE: "BATCH_ENABLE",
   CLEAR_REQUESTS: "CLEAR_REQUESTS",
   CLEAR_TIMING_MARKERS: "CLEAR_TIMING_MARKERS",
   CLONE_SELECTED_REQUEST: "CLONE_SELECTED_REQUEST",
   ENABLE_REQUEST_FILTER_TYPE_ONLY: "ENABLE_REQUEST_FILTER_TYPE_ONLY",
   OPEN_NETWORK_DETAILS: "OPEN_NETWORK_DETAILS",
+  DISABLE_BROWSER_CACHE: "DISABLE_BROWSER_CACHE:",
   OPEN_STATISTICS: "OPEN_STATISTICS",
   REMOVE_SELECTED_CUSTOM_REQUEST: "REMOVE_SELECTED_CUSTOM_REQUEST",
   RESET_COLUMNS: "RESET_COLUMNS",
   SELECT_REQUEST: "SELECT_REQUEST",
   SELECT_DETAILS_PANEL_TAB: "SELECT_DETAILS_PANEL_TAB",
   SEND_CUSTOM_REQUEST: "SEND_CUSTOM_REQUEST",
   SET_REQUEST_FILTER_TEXT: "SET_REQUEST_FILTER_TEXT",
   SORT_BY: "SORT_BY",
--- a/devtools/client/netmonitor/src/middleware/prefs.js
+++ b/devtools/client/netmonitor/src/middleware/prefs.js
@@ -5,16 +5,17 @@
 "use strict";
 
 const Services = require("Services");
 const {
   ENABLE_REQUEST_FILTER_TYPE_ONLY,
   RESET_COLUMNS,
   TOGGLE_COLUMN,
   TOGGLE_REQUEST_FILTER_TYPE,
+  DISABLE_BROWSER_CACHE,
 } = require("../constants");
 const { getRequestFilterTypes } = require("../selectors/index");
 
 /**
   * Update the relevant prefs when:
   *   - a column has been toggled
   *   - a filter type has been set
   */
@@ -25,16 +26,19 @@ function prefsMiddleware(store) {
       case ENABLE_REQUEST_FILTER_TYPE_ONLY:
       case TOGGLE_REQUEST_FILTER_TYPE:
         let filters = getRequestFilterTypes(store.getState())
           .filter(([type, check]) => check)
           .map(([type, check]) => type);
         Services.prefs.setCharPref(
           "devtools.netmonitor.filters", JSON.stringify(filters));
         break;
+      case DISABLE_BROWSER_CACHE:
+        Services.prefs.setCharPref(
+          "devtools.netmonitor.disableBrowserCache", JSON.stringify(filters));
       case TOGGLE_COLUMN:
       case RESET_COLUMNS:
         let hiddenColumns = [...store.getState().ui.columns]
           .filter(([column, shown]) => !shown)
           .map(([column, shown]) => column);
         Services.prefs.setCharPref(
           "devtools.netmonitor.hiddenColumns", JSON.stringify(hiddenColumns));
         break;
--- a/devtools/client/netmonitor/src/reducers/ui.js
+++ b/devtools/client/netmonitor/src/reducers/ui.js
@@ -3,16 +3,17 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 const I = require("devtools/client/shared/vendor/immutable");
 const {
   CLEAR_REQUESTS,
   OPEN_NETWORK_DETAILS,
+  DISABLE_BROWSER_CACHE,
   OPEN_STATISTICS,
   REMOVE_SELECTED_CUSTOM_REQUEST,
   RESET_COLUMNS,
   SELECT_DETAILS_PANEL_TAB,
   SEND_CUSTOM_REQUEST,
   SELECT_REQUEST,
   TOGGLE_COLUMN,
   WATERFALL_RESIZE,
@@ -34,32 +35,37 @@ const Columns = I.Record({
   contentSize: true,
   waterfall: true,
 });
 
 const UI = I.Record({
   columns: new Columns(),
   detailsPanelSelectedTab: "headers",
   networkDetailsOpen: false,
+  browserCacheDisable: false,
   statisticsOpen: false,
   waterfallWidth: null,
 });
 
 function resetColumns(state) {
   return state.set("columns", new Columns());
 }
 
 function resizeWaterfall(state, action) {
   return state.set("waterfallWidth", action.width);
 }
 
 function openNetworkDetails(state, action) {
   return state.set("networkDetailsOpen", action.open);
 }
 
+function disableBrowserCache(state, action) {
+  return state.set("browserCacheDisable", action.open);
+}
+
 function openStatistics(state, action) {
   return state.set("statisticsOpen", action.open);
 }
 
 function setDetailsPanelTab(state, action) {
   return state.set("detailsPanelSelectedTab", action.id);
 }
 
@@ -77,16 +83,18 @@ function toggleColumn(state, action) {
 }
 
 function ui(state = new UI(), action) {
   switch (action.type) {
     case CLEAR_REQUESTS:
       return openNetworkDetails(state, { open: false });
     case OPEN_NETWORK_DETAILS:
       return openNetworkDetails(state, action);
+    case DISABLE_BROWSER_CACHE:
+      return disableBrowserCache(state, action);
     case OPEN_STATISTICS:
       return openStatistics(state, action);
     case RESET_COLUMNS:
       return resetColumns(state);
     case REMOVE_SELECTED_CUSTOM_REQUEST:
     case SEND_CUSTOM_REQUEST:
       return openNetworkDetails(state, { open: false });
     case SELECT_DETAILS_PANEL_TAB: