Bug 1407552 - Caching L10N values in netmonitor toolbar. r=gasolin
MozReview-Commit-ID: GP20ERnX6xG
--- a/devtools/client/netmonitor/src/components/statistics-panel.js
+++ b/devtools/client/netmonitor/src/components/statistics-panel.js
@@ -1,15 +1,16 @@
/* 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 ReactDOM = require("devtools/client/shared/vendor/react-dom");
+const { FILTER_TAGS } = require("../constants");
const {
createClass,
createFactory,
DOM,
PropTypes,
} = require("devtools/client/shared/vendor/react");
const { connect } = require("devtools/client/shared/vendor/react-redux");
const { Chart } = require("devtools/client/shared/widgets/Chart");
@@ -162,19 +163,17 @@ const StatisticsPanel = createClass({
while (container.hasChildNodes()) {
container.firstChild.remove();
}
container.appendChild(chart.node);
},
sanitizeChartDataSource(requests, emptyCache) {
- const data = [
- "html", "css", "js", "xhr", "fonts", "images", "media", "flash", "ws", "other"
- ].map((type) => ({
+ const data = FILTER_TAGS.map((type) => ({
cached: 0,
count: 0,
label: type,
size: 0,
transferredSize: 0,
time: 0,
}));
--- a/devtools/client/netmonitor/src/components/toolbar.js
+++ b/devtools/client/netmonitor/src/components/toolbar.js
@@ -8,17 +8,17 @@ 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");
-const { FILTER_SEARCH_DELAY } = require("../constants");
+const { FILTER_SEARCH_DELAY, FILTER_TAGS } = require("../constants");
const {
getDisplayedRequestsSummary,
getRequestFilterTypes,
getTypeFilteredRequests,
isNetworkDetailsToggleButtonDisabled,
} = require("../selectors/index");
const { autocompleteProvider } = require("../utils/filter-autocomplete-provider");
@@ -32,16 +32,24 @@ const { button, div, input, label, span
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";
const DEVTOOLS_ENABLE_PERSISTENT_LOG_PREF = "devtools.netmonitor.persistlog";
+const TOOLBAR_FILTER_LABELS = FILTER_TAGS.concat("all").reduce((o, tag) =>
+ Object.assign(o, { [tag]: L10N.getStr(`netmonitor.toolbar.filter.${tag}`) }), {});
+const ENABLE_PERSISTENT_LOGS_TOOLTIP =
+ L10N.getStr("netmonitor.toolbar.enablePersistentLogs.tooltip");
+const ENABLE_PERSISTENT_LOGS_LABEL =
+ L10N.getStr("netmonitor.toolbar.enablePersistentLogs.label");
+const DISABLE_CACHE_TOOLTIP = L10N.getStr("netmonitor.toolbar.disableCache.tooltip");
+const DISABLE_CACHE_LABEL = L10N.getStr("netmonitor.toolbar.disableCache.label");
/*
* Network monitor toolbar component
* Toolbar contains a set of useful tools to control network requests
*/
const Toolbar = createClass({
displayName: "Toolbar",
@@ -93,57 +101,57 @@ const Toolbar = createClass({
button({
className: classList.join(" "),
key: type,
onClick: this.toggleRequestFilterType,
onKeyDown: this.toggleRequestFilterType,
"aria-pressed": checked,
"data-key": type,
},
- L10N.getStr(`netmonitor.toolbar.filter.${type}`)
+ TOOLBAR_FILTER_LABELS[type]
)
);
});
return (
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.enablePersistentLogs.tooltip"),
+ title: ENABLE_PERSISTENT_LOGS_TOOLTIP,
},
input({
id: "devtools-persistlog-checkbox",
className: "devtools-checkbox",
type: "checkbox",
checked: persistentLogsEnabled,
onClick: togglePersistentLogs,
}),
- L10N.getStr("netmonitor.toolbar.enablePersistentLogs.label"),
+ ENABLE_PERSISTENT_LOGS_LABEL
),
label(
{
className: "devtools-checkbox-label",
- title: L10N.getStr("netmonitor.toolbar.disableCache.tooltip"),
+ title: DISABLE_CACHE_TOOLTIP,
},
input({
id: "devtools-cache-checkbox",
className: "devtools-checkbox",
type: "checkbox",
checked: browserCacheDisabled,
onClick: toggleBrowserCache,
}),
- L10N.getStr("netmonitor.toolbar.disableCache.label"),
+ DISABLE_CACHE_LABEL,
),
),
span({ className: "devtools-toolbar-group" },
SearchBox({
delay: FILTER_SEARCH_DELAY,
keyShortcut: SEARCH_KEY_SHORTCUT,
placeholder: SEARCH_PLACE_HOLDER,
type: "filter",
--- a/devtools/client/netmonitor/src/constants.js
+++ b/devtools/client/netmonitor/src/constants.js
@@ -260,16 +260,29 @@ const FILTER_FLAGS = [
"mime-type",
"larger-than",
"transferred-larger-than",
"is",
"has-response-header",
"regexp",
];
+const FILTER_TAGS = [
+ "html",
+ "css",
+ "js",
+ "xhr",
+ "fonts",
+ "images",
+ "media",
+ "flash",
+ "ws",
+ "other",
+];
+
const REQUESTS_WATERFALL = {
BACKGROUND_TICKS_MULTIPLE: 5, // ms
BACKGROUND_TICKS_SCALES: 3,
BACKGROUND_TICKS_SPACING_MIN: 10, // px
BACKGROUND_TICKS_COLOR_RGB: [128, 136, 144],
// 8-bit value of the alpha component of the tick color
BACKGROUND_TICKS_OPACITY_MIN: 32,
BACKGROUND_TICKS_OPACITY_ADD: 32,
@@ -287,15 +300,16 @@ const REQUESTS_WATERFALL = {
const general = {
ACTIVITY_TYPE,
EVENTS,
FILTER_SEARCH_DELAY: 200,
UPDATE_PROPS,
HEADERS,
RESPONSE_HEADERS,
FILTER_FLAGS,
+ FILTER_TAGS,
SOURCE_EDITOR_SYNTAX_HIGHLIGHT_MAX_SIZE: 51200, // 50 KB in bytes
REQUESTS_WATERFALL,
PANELS,
};
// flatten constants
module.exports = Object.assign({}, general, actionTypes);
--- a/devtools/client/netmonitor/src/reducers/filters.js
+++ b/devtools/client/netmonitor/src/reducers/filters.js
@@ -4,31 +4,23 @@
"use strict";
const I = require("devtools/client/shared/vendor/immutable");
const {
ENABLE_REQUEST_FILTER_TYPE_ONLY,
TOGGLE_REQUEST_FILTER_TYPE,
SET_REQUEST_FILTER_TEXT,
+ FILTER_TAGS
} = require("../constants");
-const FilterTypes = I.Record({
- all: false,
- html: false,
- css: false,
- js: false,
- xhr: false,
- fonts: false,
- images: false,
- media: false,
- flash: false,
- ws: false,
- other: false,
-});
+const FilterTypes = I.Record(["all"]
+ .concat(FILTER_TAGS)
+ .reduce((o, tag) => Object.assign(o, { [tag]: false }), {})
+);
const Filters = I.Record({
requestFilterTypes: new FilterTypes({ all: true }),
requestFilterText: "",
});
function toggleRequestFilterType(state, action) {
let { filter } = action;