Bug 1349561 - Add UI for disabling browser cache in Net panel in MozReview; r?gasolin
MozReview-Commit-ID: 1jLTzSqFGAm
--- 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: