Bug 1347827 - Add Persist Logs checkbox in NetMonitor toolbar. r=Honza
authorMichael Brennan <brennan.brisad@gmail.com>
Tue, 12 Sep 2017 12:49:00 -0400
changeset 429851 1cfe6ff240196f646da8c60d1ce3da2999613a09
parent 429850 9367b7801b706b9928e7e241e8ffb64ca871e741
child 429852 fdbf2ccf813ece8338dc0ef37030b1056e61bf26
push id7761
push userjlund@mozilla.com
push dateFri, 15 Sep 2017 00:19:52 +0000
treeherdermozilla-beta@c38455951db4 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersHonza
bugs1347827
milestone57.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 1347827 - Add Persist Logs checkbox in NetMonitor toolbar. r=Honza
devtools/client/framework/toolbox-options.xhtml
devtools/client/locales/en-US/netmonitor.properties
devtools/client/locales/en-US/toolbox.dtd
devtools/client/netmonitor/src/actions/ui.js
devtools/client/netmonitor/src/components/toolbar.js
devtools/client/netmonitor/src/constants.js
devtools/client/netmonitor/src/middleware/prefs.js
devtools/client/netmonitor/src/reducers/ui.js
--- a/devtools/client/framework/toolbox-options.xhtml
+++ b/devtools/client/framework/toolbox-options.xhtml
@@ -81,24 +81,16 @@
         <label title="&options.sourceMaps.tooltip;">
           <input type="checkbox"
                  id="debugger-sourcemaps"
                  data-pref="devtools.debugger.client-source-maps-enabled"/>
           <span>&options.sourceMaps.label;</span>
         </label>
       </fieldset>
 
-      <fieldset id="netmonitor-options" class="options-groupbox">
-        <legend>&options.netmonitor.label;</legend>
-        <label title="&options.netmonitor.enablePersistentLogs.tooltip;">
-          <input type="checkbox" data-pref="devtools.netmonitor.persistlog" />
-          <span>&options.netmonitor.enablePersistentLogs.label;</span>
-        </label>
-      </fieldset>
-
       <fieldset id="styleeditor-options" class="options-groupbox">
         <legend>&options.styleeditor.label;</legend>
         <label title="&options.stylesheetSourceMaps.tooltip;">
           <input type="checkbox"
                  data-pref="devtools.styleeditor.source-maps-enabled"/>
           <span>&options.stylesheetSourceMaps.label;</span>
         </label>
         <label title="&options.stylesheetAutocompletion.tooltip;">
--- a/devtools/client/locales/en-US/netmonitor.properties
+++ b/devtools/client/locales/en-US/netmonitor.properties
@@ -623,16 +623,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.enablePersistentLogs.label): This is the label
+# displayed for the checkbox for enabling persistent logs.
+netmonitor.toolbar.enablePersistentLogs.label=Persist Logs
+
+# LOCALIZATION NOTE (netmonitor.toolbar.enablePersistentLogs.tooltip): This is the tooltip
+# displayed for the checkbox for enabling persistent logs.
+netmonitor.toolbar.enablePersistentLogs.tooltip=If you enable this option the requests list will not be cleared each time you navigate to a new page
+
 # 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
 
--- a/devtools/client/locales/en-US/toolbox.dtd
+++ b/devtools/client/locales/en-US/toolbox.dtd
@@ -174,27 +174,16 @@
 <!ENTITY options.screenshot.clipboard.label      "Screenshot to clipboard">
 <!ENTITY options.screenshot.clipboard.tooltip    "Saves to the screenshot directly to the clipboard">
 
 <!-- LOCALIZATION NOTE (options.screenshot.audio.label): This is the
    - label for the checkbox that toggles the camera shutter audio for screenshot tool -->
 <!ENTITY options.screenshot.audio.label      "Play camera shutter sound">
 <!ENTITY options.screenshot.audio.tooltip    "Enables the camera audio sound when taking screenshot">
 
-<!-- LOCALIZATION NOTE (options.netmonitor.label): This is the label for the
-  -  heading of the group of Network Monitor preferences in the options panel. -->
-<!ENTITY options.netmonitor.label           "Network">
-
-<!-- LOCALIZATION NOTE (options.enablePersistentLogs.label): This is the
-  -  label for the checkbox that toggles persistent logs in the netmonitor,
-  -  i.e. devtools.netmonitor.persistlog a boolean preference in
-  -  about:config, in the options panel. -->
-<!ENTITY options.netmonitor.enablePersistentLogs.label    "Enable persistent logs">
-<!ENTITY options.netmonitor.enablePersistentLogs.tooltip  "If you enable this option the Network Monitor will not clear the output each time you navigate to a new page">
-
 <!-- LOCALIZATION NOTE (options.showPlatformData.label): This is the
   -  label for the checkbox that toggles the display of the platform data in the,
   -  Profiler i.e. devtools.profiler.ui.show-platform-data a boolean preference
   -  in about:config, in the options panel. -->
 <!ENTITY options.showPlatformData.label    "Show Gecko platform data">
 <!ENTITY options.showPlatformData.tooltip  "If you enable this option the JavaScript Profiler reports will include
 Gecko platform symbols">
 
--- 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,
+  ENABLE_PERSISTENT_LOGS,
   DISABLE_BROWSER_CACHE,
   OPEN_STATISTICS,
   RESET_COLUMNS,
   SELECT_DETAILS_PANEL_TAB,
   TOGGLE_COLUMN,
   WATERFALL_RESIZE,
 } = require("../constants");
 const { triggerActivity } = require("../connector/index");
@@ -24,16 +25,28 @@ const { triggerActivity } = require("../
 function openNetworkDetails(open) {
   return {
     type: OPEN_NETWORK_DETAILS,
     open,
   };
 }
 
 /**
+ * Change persistent logs state.
+ *
+ * @param {boolean} enabled - expected persistent logs enabled state
+ */
+function enablePersistentLogs(enabled) {
+  return {
+    type: ENABLE_PERSISTENT_LOGS,
+    enabled,
+  };
+}
+
+/**
  * Change browser cache state.
  *
  * @param {boolean} disabled - expected browser cache in disable state
  */
 function disableBrowserCache(disabled) {
   return {
     type: DISABLE_BROWSER_CACHE,
     disabled,
@@ -103,16 +116,24 @@ function toggleColumn(column) {
  * Toggle network details panel.
  */
 function toggleNetworkDetails() {
   return (dispatch, getState) =>
     dispatch(openNetworkDetails(!getState().ui.networkDetailsOpen));
 }
 
 /**
+ * Toggle persistent logs status.
+ */
+function togglePersistentLogs() {
+  return (dispatch, getState) =>
+    dispatch(enablePersistentLogs(!getState().ui.persistentLogsEnabled));
+}
+
+/**
  * Toggle browser cache status.
  */
 function toggleBrowserCache() {
   return (dispatch, getState) =>
     dispatch(disableBrowserCache(!getState().ui.browserCacheDisabled));
 }
 
 /**
@@ -120,18 +141,20 @@ function toggleBrowserCache() {
  */
 function toggleStatistics() {
   return (dispatch, getState) =>
     dispatch(openStatistics(!getState().ui.statisticsOpen));
 }
 
 module.exports = {
   openNetworkDetails,
+  enablePersistentLogs,
   disableBrowserCache,
   openStatistics,
   resetColumns,
   resizeWaterfall,
   selectDetailsPanelTab,
   toggleColumn,
   toggleNetworkDetails,
+  togglePersistentLogs,
   toggleBrowserCache,
   toggleStatistics,
 };
--- a/devtools/client/netmonitor/src/components/toolbar.js
+++ b/devtools/client/netmonitor/src/components/toolbar.js
@@ -31,53 +31,52 @@ 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";
 
 /*
  * 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,
+    enablePersistentLogs: PropTypes.func.isRequired,
+    togglePersistentLogs: PropTypes.func.isRequired,
+    persistentLogsEnabled: PropTypes.bool.isRequired,
     disableBrowserCache: PropTypes.func.isRequired,
     toggleBrowserCache: PropTypes.func.isRequired,
     browserCacheDisabled: PropTypes.bool.isRequired,
     toggleRequestFilterType: PropTypes.func.isRequired,
     filteredRequests: PropTypes.object.isRequired,
   },
 
-  toggleRequestFilterType(evt) {
-    if (evt.type === "keydown" && (evt.key !== "" || evt.key !== "Enter")) {
-      return;
-    }
-    this.props.toggleRequestFilterType(evt.target.dataset.key);
-  },
-
   render() {
     let {
       clearRequests,
       requestFilterTypes,
       setRequestFilterText,
       networkDetailsToggleDisabled,
       networkDetailsOpen,
       toggleNetworkDetails,
+      togglePersistentLogs,
+      persistentLogsEnabled,
       toggleBrowserCache,
       browserCacheDisabled,
       filteredRequests,
     } = this.props;
 
     let toggleButtonClassName = [
       "network-details-panel-toggle",
       "devtools-button",
@@ -111,16 +110,30 @@ const Toolbar = createClass({
             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"),
+            },
+            input({
+              id: "devtools-persistlog-checkbox",
+              className: "devtools-checkbox",
+              type: "checkbox",
+              checked: persistentLogsEnabled,
+              onClick: togglePersistentLogs,
+            }),
+            L10N.getStr("netmonitor.toolbar.enablePersistentLogs.label"),
+          ),
+          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,
@@ -146,41 +159,60 @@ const Toolbar = createClass({
             onClick: toggleNetworkDetails,
           }),
         )
       )
     );
   },
 
   componentDidMount() {
+    Services.prefs.addObserver(DEVTOOLS_ENABLE_PERSISTENT_LOG_PREF,
+                               this.updatePersistentLogsEnabled);
     Services.prefs.addObserver(DEVTOOLS_DISABLE_CACHE_PREF,
                                this.updateBrowserCacheDisabled);
   },
 
   componentWillUnmount() {
+    Services.prefs.removeObserver(DEVTOOLS_ENABLE_PERSISTENT_LOG_PREF,
+                                  this.updatePersistentLogsEnabled);
     Services.prefs.removeObserver(DEVTOOLS_DISABLE_CACHE_PREF,
                                   this.updateBrowserCacheDisabled);
   },
 
+  toggleRequestFilterType(evt) {
+    if (evt.type === "keydown" && (evt.key !== "" || evt.key !== "Enter")) {
+      return;
+    }
+    this.props.toggleRequestFilterType(evt.target.dataset.key);
+  },
+
+  updatePersistentLogsEnabled() {
+    this.props.enablePersistentLogs(
+      Services.prefs.getBoolPref(DEVTOOLS_ENABLE_PERSISTENT_LOG_PREF));
+  },
+
   updateBrowserCacheDisabled() {
     this.props.disableBrowserCache(
                         Services.prefs.getBoolPref(DEVTOOLS_DISABLE_CACHE_PREF));
   }
 });
 
 module.exports = connect(
   (state) => ({
     networkDetailsToggleDisabled: isNetworkDetailsToggleButtonDisabled(state),
     networkDetailsOpen: state.ui.networkDetailsOpen,
+    persistentLogsEnabled: state.ui.persistentLogsEnabled,
     browserCacheDisabled: state.ui.browserCacheDisabled,
     requestFilterTypes: getRequestFilterTypes(state),
     filteredRequests: getTypeFilteredRequests(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()),
+    enablePersistentLogs: (enabled) => dispatch(Actions.enablePersistentLogs(enabled)),
+    togglePersistentLogs: () => dispatch(Actions.togglePersistentLogs()),
     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",
+  ENABLE_PERSISTENT_LOGS: "ENABLE_PERSISTENT_LOGS",
   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",
--- 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,
+  ENABLE_PERSISTENT_LOGS,
   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
@@ -26,16 +27,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 ENABLE_PERSISTENT_LOGS:
+        Services.prefs.setBoolPref(
+          "devtools.netmonitor.persistlog", store.getState().ui.persistentLogsEnabled);
+        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)
--- a/devtools/client/netmonitor/src/reducers/ui.js
+++ b/devtools/client/netmonitor/src/reducers/ui.js
@@ -4,16 +4,17 @@
 
 "use strict";
 
 const I = require("devtools/client/shared/vendor/immutable");
 const Services = require("Services");
 const {
   CLEAR_REQUESTS,
   OPEN_NETWORK_DETAILS,
+  ENABLE_PERSISTENT_LOGS,
   DISABLE_BROWSER_CACHE,
   OPEN_STATISTICS,
   REMOVE_SELECTED_CUSTOM_REQUEST,
   RESET_COLUMNS,
   RESPONSE_HEADERS,
   SELECT_DETAILS_PANEL_TAB,
   SEND_CUSTOM_REQUEST,
   SELECT_REQUEST,
@@ -49,16 +50,17 @@ const Columns = I.Record(
     RESPONSE_HEADERS.reduce((acc, header) => Object.assign(acc, { [header]: false }), {})
   )
 );
 
 const UI = I.Record({
   columns: new Columns(),
   detailsPanelSelectedTab: PANELS.HEADERS,
   networkDetailsOpen: false,
+  persistentLogsEnabled: Services.prefs.getBoolPref("devtools.netmonitor.persistlog"),
   browserCacheDisabled: Services.prefs.getBoolPref("devtools.cache.disabled"),
   statisticsOpen: false,
   waterfallWidth: null,
 });
 
 function resetColumns(state) {
   return state.set("columns", new Columns());
 }
@@ -66,16 +68,20 @@ function resetColumns(state) {
 function resizeWaterfall(state, action) {
   return state.set("waterfallWidth", action.width);
 }
 
 function openNetworkDetails(state, action) {
   return state.set("networkDetailsOpen", action.open);
 }
 
+function enablePersistentLogs(state, action) {
+  return state.set("persistentLogsEnabled", action.enabled);
+}
+
 function disableBrowserCache(state, action) {
   return state.set("browserCacheDisabled", action.disabled);
 }
 
 function openStatistics(state, action) {
   return state.set("statisticsOpen", action.open);
 }
 
@@ -97,16 +103,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 ENABLE_PERSISTENT_LOGS:
+      return enablePersistentLogs(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: