--- a/devtools/client/locales/en-US/netmonitor.properties
+++ b/devtools/client/locales/en-US/netmonitor.properties
@@ -619,16 +619,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
@@ -782,16 +782,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: