Bug 1407552 - Caching L10N values in netmonitor toolbar. r=gasolin
authorabhinav <abhinav.koppula@gmail.com>
Thu, 12 Oct 2017 01:16:20 +0530
changeset 386325 8363beb49fd3a3c9f189161805f26552d88f028a
parent 386324 98442869f421dd1632af851666431b3e5ca4b1f1
child 386326 e0267745cc5f430b3c9102009bfde6f3bf2a690d
push id53338
push userflin@mozilla.com
push dateMon, 16 Oct 2017 02:33:29 +0000
treeherderautoland@8363beb49fd3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgasolin
bugs1407552
milestone58.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 1407552 - Caching L10N values in netmonitor toolbar. r=gasolin MozReview-Commit-ID: GP20ERnX6xG
devtools/client/netmonitor/src/components/statistics-panel.js
devtools/client/netmonitor/src/components/toolbar.js
devtools/client/netmonitor/src/constants.js
devtools/client/netmonitor/src/reducers/filters.js
--- 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;