Bug 1349561 - Add UI for disabling browser cache in Net panel; r=gasolin,Honza
authorSwapnesh Kumar Sahoo <swapneshks@gmail.com>
Wed, 19 Jul 2017 17:37:44 +0530
changeset 418540 f026b16bb1e8cbd8fcdd23d01d23f540e378bd27
parent 418539 31ae02774ca909703e18c7b9f0a0f0a4f133e1ed
child 418541 3f27c55fa17fd02ec659235dc9ddbc03155e4f24
push id7566
push usermtabara@mozilla.com
push dateWed, 02 Aug 2017 08:25:16 +0000
treeherdermozilla-beta@86913f512c3c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgasolin, Honza
bugs1349561
milestone56.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1349561 - Add UI for disabling browser cache in Net panel; r=gasolin,Honza MozReview-Commit-ID: 881Gy0jh20Z
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
@@ -623,16 +623,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.disableCache.label): This is the label
+# displayed for the checkbox for disabling browser cache.
+netmonitor.toolbar.disableCache.label=Disable cache
+
+# LOCALIZATION NOTE (netmonitor.toolbar.disableCache.tooltip): This is the tooltip
+# displayed for the checkbox for disabling browser cache.
+netmonitor.toolbar.disableCache.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
@@ -2,16 +2,17 @@
  * 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 {
   ACTIVITY_TYPE,
   OPEN_NETWORK_DETAILS,
+  DISABLE_BROWSER_CACHE,
   OPEN_STATISTICS,
   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} disabled - expected browser cache in disable state
+ */
+function disableBrowserCache(disabled) {
+  return {
+    type: DISABLE_BROWSER_CACHE,
+    disabled,
+  };
+}
+
+/**
  * 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,35 @@ 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.browserCacheDisabled));
+}
+
+/**
  * Toggle performance statistics panel.
  */
 function toggleStatistics() {
   return (dispatch, getState) =>
     dispatch(openStatistics(!getState().ui.statisticsOpen));
 }
 
 module.exports = {
   openNetworkDetails,
+  disableBrowserCache,
   openStatistics,
   resetColumns,
   resizeWaterfall,
   selectDetailsPanelTab,
   toggleColumn,
   toggleNetworkDetails,
+  toggleBrowserCache,
   toggleStatistics,
 };
--- a/devtools/client/netmonitor/src/assets/styles/netmonitor.css
+++ b/devtools/client/netmonitor/src/assets/styles/netmonitor.css
@@ -790,16 +790,27 @@ body,
 .properties-view .devtools-searchbox {
   padding: 0;
 }
 
 .properties-view .devtools-searchbox input {
   margin: 1px 3px;
 }
 
+.devtools-checkbox {
+  position: relative;
+  vertical-align: middle;
+  bottom: 1px;
+}
+
+.devtools-checkbox-label {
+  margin-inline-start: 10px;
+  margin-inline-end: 3px;
+}
+
 /* 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
@@ -1,14 +1,15 @@
 /* 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 Services = require("Services");
 const {
   createClass,
   createFactory,
   DOM,
   PropTypes,
 } = require("devtools/client/shared/vendor/react");
 const { connect } = require("devtools/client/shared/vendor/react-redux");
 const Actions = require("../actions/index");
@@ -20,38 +21,43 @@ const {
 } = require("../selectors/index");
 
 const { autocompleteProvider } = require("../utils/filter-text-utils");
 const { L10N } = require("../utils/l10n");
 
 // Components
 const SearchBox = createFactory(require("devtools/client/shared/components/search-box"));
 
-const { button, div, span } = DOM;
+const { button, div, input, label, 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");
 
+const DEVTOOLS_DISABLE_CACHE_PREF = "devtools.cache.disabled";
+
 /*
  * Network monitor toolbar component
  * Toolbar contains a set of useful tools to control network requests
  */
 const Toolbar = createClass({
   displayName: "Toolbar",
 
   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,
+    disableBrowserCache: PropTypes.func.isRequired,
+    toggleBrowserCache: PropTypes.func.isRequired,
+    browserCacheDisabled: PropTypes.bool.isRequired,
     toggleRequestFilterType: PropTypes.func.isRequired,
   },
 
   toggleRequestFilterType(evt) {
     if (evt.type === "keydown" && (evt.key !== "" || evt.key !== "Enter")) {
       return;
     }
     this.props.toggleRequestFilterType(evt.target.dataset.key);
@@ -60,16 +66,18 @@ const Toolbar = createClass({
   render() {
     let {
       clearRequests,
       requestFilterTypes,
       setRequestFilterText,
       networkDetailsToggleDisabled,
       networkDetailsOpen,
       toggleNetworkDetails,
+      toggleBrowserCache,
+      browserCacheDisabled,
     } = this.props;
 
     let toggleButtonClassName = [
       "network-details-panel-toggle",
       "devtools-button",
     ];
     if (!networkDetailsOpen) {
       toggleButtonClassName.push("pane-collapsed");
@@ -97,16 +105,30 @@ const Toolbar = createClass({
       span({ className: "devtools-toolbar devtools-toolbar-container" },
         span({ className: "devtools-toolbar-group" },
           button({
             className: "devtools-button devtools-clear-icon requests-list-clear-button",
             title: TOOLBAR_CLEAR,
             onClick: clearRequests,
           }),
           div({ className: "requests-list-filter-buttons" }, buttons),
+          label(
+            {
+              className: "devtools-checkbox-label",
+              title: L10N.getStr("netmonitor.toolbar.disableCache.tooltip"),
+            },
+            input({
+              id: "devtools-cache-checkbox",
+              className: "devtools-checkbox",
+              type: "checkbox",
+              checked: browserCacheDisabled,
+              onClick: toggleBrowserCache,
+            }),
+            L10N.getStr("netmonitor.toolbar.disableCache.label"),
+          ),
         ),
         span({ className: "devtools-toolbar-group" },
           SearchBox({
             delay: FILTER_SEARCH_DELAY,
             keyShortcut: SEARCH_KEY_SHORTCUT,
             placeholder: SEARCH_PLACE_HOLDER,
             type: "filter",
             onChange: setRequestFilterText,
@@ -117,25 +139,43 @@ const Toolbar = createClass({
             title: networkDetailsOpen ? COLLPASE_DETAILS_PANE : EXPAND_DETAILS_PANE,
             disabled: networkDetailsToggleDisabled,
             tabIndex: "0",
             onClick: toggleNetworkDetails,
           }),
         )
       )
     );
+  },
+
+  componentDidMount() {
+    Services.prefs.addObserver(DEVTOOLS_DISABLE_CACHE_PREF,
+                               this.updateBrowserCacheDisabled);
+  },
+
+  componentWillUnmount() {
+    Services.prefs.removeObserver(DEVTOOLS_DISABLE_CACHE_PREF,
+                                  this.updateBrowserCacheDisabled);
+  },
+
+  updateBrowserCacheDisabled() {
+    this.props.disableBrowserCache(
+                        Services.prefs.getBoolPref(DEVTOOLS_DISABLE_CACHE_PREF));
   }
 });
 
 module.exports = connect(
   (state) => ({
     networkDetailsToggleDisabled: isNetworkDetailsToggleButtonDisabled(state),
     networkDetailsOpen: state.ui.networkDetailsOpen,
+    browserCacheDisabled: state.ui.browserCacheDisabled,
     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()),
+    disableBrowserCache: (disabled) => dispatch(Actions.disableBrowserCache(disabled)),
+    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,20 @@ 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.setBoolPref(
+          "devtools.cache.disabled", store.getState().ui.browserCacheDisabled);
+        break;
       case TOGGLE_COLUMN:
       case RESET_COLUMNS:
         let visibleColumns = [...store.getState().ui.columns]
           .filter(([column, shown]) => shown)
           .map(([column, shown]) => column);
         Services.prefs.setCharPref(
           "devtools.netmonitor.visibleColumns", JSON.stringify(visibleColumns));
         break;
--- a/devtools/client/netmonitor/src/reducers/ui.js
+++ b/devtools/client/netmonitor/src/reducers/ui.js
@@ -1,18 +1,20 @@
 /* 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 I = require("devtools/client/shared/vendor/immutable");
+const Services = require("Services");
 const {
   CLEAR_REQUESTS,
   OPEN_NETWORK_DETAILS,
+  DISABLE_BROWSER_CACHE,
   OPEN_STATISTICS,
   REMOVE_SELECTED_CUSTOM_REQUEST,
   RESET_COLUMNS,
   RESPONSE_HEADERS,
   SELECT_DETAILS_PANEL_TAB,
   SEND_CUSTOM_REQUEST,
   SELECT_REQUEST,
   TOGGLE_COLUMN,
@@ -46,32 +48,37 @@ const Columns = I.Record(
     RESPONSE_HEADERS.reduce((acc, header) => Object.assign(acc, { [header]: false }), {})
   )
 );
 
 const UI = I.Record({
   columns: new Columns(),
   detailsPanelSelectedTab: "headers",
   networkDetailsOpen: false,
+  browserCacheDisabled: Services.prefs.getBoolPref("devtools.cache.disabled"),
   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("browserCacheDisabled", action.disabled);
+}
+
 function openStatistics(state, action) {
   return state.set("statisticsOpen", action.open);
 }
 
 function setDetailsPanelTab(state, action) {
   return state.set("detailsPanelSelectedTab", action.id);
 }
 
@@ -89,16 +96,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: