Bug 1407552 - Caching L10N values in netmonitor toolbar. r=gasolin draft
authorabhinav <abhinav.koppula@gmail.com>
Thu, 12 Oct 2017 01:16:20 +0530
changeset 680602 90059f0fa6b0f697d36dbaca7fb5ae99e5bdd40f
parent 680572 7d88e2fbd2cf5b3f7dfa695e4d561c260ab8c02c
child 735905 705eff1de5645ee0c721067aae43eac4259ab246
push id84559
push userbmo:abhinav.koppula@gmail.com
push dateSun, 15 Oct 2017 20:25:34 +0000
reviewersgasolin
bugs1407552
milestone58.0a1
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;