Bug 1362036 - Remember active network tab id; r=nchevobbe
☠☠ backed out by d2c77bb9a4ce ☠ ☠
authorJan Odvarko <odvarko@gmail.com>
Wed, 30 Aug 2017 15:16:39 +0200
changeset 377793 16c55731558c7bc37b9c976fc1b091d34053ba6b
parent 377792 c0be2eaa3a35724d534c5451b4568a27cbc108e8
child 377794 f0c72c9d2ae1e047587d285da4d7128d9b4c54f3
push id94338
push userkwierso@gmail.com
push dateThu, 31 Aug 2017 02:58:58 +0000
treeherdermozilla-inbound@9ca18987dabb [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersnchevobbe
bugs1362036
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 1362036 - Remember active network tab id; r=nchevobbe MozReview-Commit-ID: BXiWywtQMwI
devtools/client/netmonitor/src/components/network-details-panel.js
devtools/client/netmonitor/src/components/tabbox-panel.js
devtools/client/webconsole/new-console-output/actions/ui.js
devtools/client/webconsole/new-console-output/components/console-output.js
devtools/client/webconsole/new-console-output/components/message-types/network-event-message.js
devtools/client/webconsole/new-console-output/constants.js
devtools/client/webconsole/new-console-output/reducers/ui.js
devtools/client/webconsole/new-console-output/store.js
--- a/devtools/client/netmonitor/src/components/network-details-panel.js
+++ b/devtools/client/netmonitor/src/components/network-details-panel.js
@@ -36,19 +36,19 @@ function NetworkDetailsPanel({
   return (
     div({ className: "network-details-panel" },
       !request.isCustom ?
         TabboxPanel({
           activeTabId,
           request,
           selectTab,
           sourceMapService,
+          cloneSelectedRequest,
         }) :
         CustomRequestPanel({
-          cloneSelectedRequest,
           request,
         })
     )
   );
 }
 
 NetworkDetailsPanel.displayName = "NetworkDetailsPanel";
 
--- a/devtools/client/netmonitor/src/components/tabbox-panel.js
+++ b/devtools/client/netmonitor/src/components/tabbox-panel.js
@@ -4,17 +4,16 @@
 
 "use strict";
 
 const {
   createFactory,
   PropTypes,
 } = require("devtools/client/shared/vendor/react");
 const { connect } = require("devtools/client/shared/vendor/react-redux");
-const Actions = require("../actions/index");
 const { L10N } = require("../utils/l10n");
 const { PANELS } = require("../constants");
 
 // Components
 const Tabbar = createFactory(require("devtools/client/shared/components/tabs/tabbar"));
 const TabPanel = createFactory(require("devtools/client/shared/components/tabs/tabs").TabPanel);
 const CookiesPanel = createFactory(require("./cookies-panel"));
 const HeadersPanel = createFactory(require("./headers-panel"));
@@ -109,16 +108,9 @@ TabboxPanel.propTypes = {
   activeTabId: PropTypes.string,
   cloneSelectedRequest: PropTypes.func,
   request: PropTypes.object,
   selectTab: PropTypes.func.isRequired,
   // Service to enable the source map feature.
   sourceMapService: PropTypes.object,
 };
 
-module.exports = connect(
-  (state) => ({
-  }),
-  (dispatch) => ({
-    cloneSelectedRequest: () => dispatch(Actions.cloneSelectedRequest()),
-    selectTab: (tabId) => dispatch(Actions.selectDetailsPanelTab(tabId)),
-  }),
-)(TabboxPanel);
+module.exports = connect()(TabboxPanel);
--- a/devtools/client/webconsole/new-console-output/actions/ui.js
+++ b/devtools/client/webconsole/new-console-output/actions/ui.js
@@ -8,16 +8,17 @@
 
 const { getAllUi } = require("devtools/client/webconsole/new-console-output/selectors/ui");
 const Services = require("Services");
 
 const {
   FILTER_BAR_TOGGLE,
   PREFS,
   TIMESTAMPS_TOGGLE,
+  SELECT_NETWORK_MESSAGE_TAB,
 } = require("devtools/client/webconsole/new-console-output/constants");
 
 function filterBarToggle(show) {
   return (dispatch, getState) => {
     dispatch({
       type: FILTER_BAR_TOGGLE,
     });
     const uiState = getAllUi(getState());
@@ -27,12 +28,20 @@ function filterBarToggle(show) {
 
 function timestampsToggle(visible) {
   return {
     type: TIMESTAMPS_TOGGLE,
     visible,
   };
 }
 
+function selectNetworkMessageTab(id) {
+  return {
+    type: SELECT_NETWORK_MESSAGE_TAB,
+    id,
+  };
+}
+
 module.exports = {
   filterBarToggle,
   timestampsToggle,
+  selectNetworkMessageTab,
 };
--- a/devtools/client/webconsole/new-console-output/components/console-output.js
+++ b/devtools/client/webconsole/new-console-output/components/console-output.js
@@ -41,16 +41,17 @@ const ConsoleOutput = createClass({
     dispatch: PropTypes.func.isRequired,
     timestampsVisible: PropTypes.bool,
     messagesTableData: PropTypes.object.isRequired,
     messagesObjectProperties: PropTypes.object.isRequired,
     messagesObjectEntries: PropTypes.object.isRequired,
     messagesRepeat: PropTypes.object.isRequired,
     networkMessagesUpdate: PropTypes.object.isRequired,
     visibleMessages: PropTypes.array.isRequired,
+    networkMessageActiveTabId: PropTypes.string.isRequired,
   },
 
   componentDidMount() {
     // Do the scrolling in the nextTick since this could hit console startup performances.
     // See https://bugzilla.mozilla.org/show_bug.cgi?id=1355869
     setTimeout(() => {
       scrollToBottom(this.outputNode);
     }, 0);
@@ -97,30 +98,32 @@ const ConsoleOutput = createClass({
       visibleMessages,
       messages,
       messagesUi,
       messagesTableData,
       messagesObjectProperties,
       messagesObjectEntries,
       messagesRepeat,
       networkMessagesUpdate,
+      networkMessageActiveTabId,
       serviceContainer,
       timestampsVisible,
     } = this.props;
 
     let messageNodes = visibleMessages.map((messageId) => MessageContainer({
       dispatch,
       key: messageId,
       messageId,
       serviceContainer,
       open: messagesUi.includes(messageId),
       tableData: messagesTableData.get(messageId),
       timestampsVisible,
       repeat: messagesRepeat[messageId],
       networkMessageUpdate: networkMessagesUpdate[messageId],
+      networkMessageActiveTabId,
       getMessage: () => messages.get(messageId),
       loadedObjectProperties: messagesObjectProperties.get(messageId),
       loadedObjectEntries: messagesObjectEntries.get(messageId),
     }));
 
     return (
       dom.div({
         className: "webconsole-output",
@@ -151,12 +154,13 @@ function mapStateToProps(state, props) {
     visibleMessages: getVisibleMessages(state),
     messagesUi: getAllMessagesUiById(state),
     messagesTableData: getAllMessagesTableDataById(state),
     messagesObjectProperties: getAllMessagesObjectPropertiesById(state),
     messagesObjectEntries: getAllMessagesObjectEntriesById(state),
     messagesRepeat: getAllRepeatById(state),
     networkMessagesUpdate: getAllNetworkMessagesUpdateById(state),
     timestampsVisible: state.ui.timestampsVisible,
+    networkMessageActiveTabId: state.ui.networkMessageActiveTabId,
   };
 }
 
 module.exports = connect(mapStateToProps)(ConsoleOutput);
--- a/devtools/client/webconsole/new-console-output/components/message-types/network-event-message.js
+++ b/devtools/client/webconsole/new-console-output/components/message-types/network-event-message.js
@@ -8,19 +8,19 @@
 
 // React & Redux
 const {
   createFactory,
   DOM: dom,
   PropTypes
 } = require("devtools/client/shared/vendor/react");
 const Message = createFactory(require("devtools/client/webconsole/new-console-output/components/message"));
+const actions = require("devtools/client/webconsole/new-console-output/actions/index");
 const { l10n } = require("devtools/client/webconsole/new-console-output/utils/messages");
 const TabboxPanel = createFactory(require("devtools/client/netmonitor/src/components/tabbox-panel"));
-const { PANELS } = require("devtools/client/netmonitor/src/constants");
 
 NetworkEventMessage.displayName = "NetworkEventMessage";
 
 NetworkEventMessage.propTypes = {
   message: PropTypes.object.isRequired,
   serviceContainer: PropTypes.shape({
     openNetworkPanel: PropTypes.func.isRequired,
   }),
@@ -41,16 +41,17 @@ NetworkEventMessage.propTypes = {
  * All HTTP details data are fetched from the backend on-demand
  * when the user is expanding network log for the first time.
  */
 function NetworkEventMessage({
   message = {},
   serviceContainer,
   timestampsVisible,
   networkMessageUpdate = {},
+  networkMessageActiveTabId,
   dispatch,
   open,
 }) {
   const {
     id,
     actor,
     indent,
     source,
@@ -94,21 +95,25 @@ function NetworkEventMessage({
     : null;
 
   const messageBody = [method, xhr, url, statusBody];
 
   // Only render the attachment if the network-event is
   // actually opened (performance optimization).
   const attachment = open && dom.div({className: "network-info devtools-monospace"},
     TabboxPanel({
-      activeTabId: PANELS.HEADERS,
+      activeTabId: networkMessageActiveTabId,
       request: networkMessageUpdate,
       sourceMapService: serviceContainer.sourceMapService,
-      cloneSelectedRequest: () => {},
-      selectTab: (tabId) => {},
+      cloneSelectedRequest: () => {
+        // Edit and resend feature isn't supported from the Console panel.
+      },
+      selectTab: (tabId) => {
+        dispatch(actions.selectNetworkMessageTab(tabId));
+      },
     })
   );
 
   return Message({
     dispatch,
     messageId: id,
     source,
     type,
--- a/devtools/client/webconsole/new-console-output/constants.js
+++ b/devtools/client/webconsole/new-console-output/constants.js
@@ -18,16 +18,17 @@ const actionTypes = {
   MESSAGE_OBJECT_ENTRIES_RECEIVE: "MESSAGE_OBJECT_ENTRIES_RECEIVE",
   REMOVED_ACTORS_CLEAR: "REMOVED_ACTORS_CLEAR",
   TIMESTAMPS_TOGGLE: "TIMESTAMPS_TOGGLE",
   FILTER_TOGGLE: "FILTER_TOGGLE",
   FILTER_TEXT_SET: "FILTER_TEXT_SET",
   FILTERS_CLEAR: "FILTERS_CLEAR",
   DEFAULT_FILTERS_RESET: "DEFAULT_FILTERS_RESET",
   FILTER_BAR_TOGGLE: "FILTER_BAR_TOGGLE",
+  SELECT_NETWORK_MESSAGE_TAB: "SELECT_NETWORK_MESSAGE_TAB",
 };
 
 const prefs = {
   PREFS: {
     FILTER: {
       ERROR: "devtools.webconsole.filter.error",
       WARN: "devtools.webconsole.filter.warn",
       INFO: "devtools.webconsole.filter.info",
--- a/devtools/client/webconsole/new-console-output/reducers/ui.js
+++ b/devtools/client/webconsole/new-console-output/reducers/ui.js
@@ -2,32 +2,40 @@
 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
 /* 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 {
   FILTER_BAR_TOGGLE,
-  TIMESTAMPS_TOGGLE
+  TIMESTAMPS_TOGGLE,
+  SELECT_NETWORK_MESSAGE_TAB,
 } = require("devtools/client/webconsole/new-console-output/constants");
 const Immutable = require("devtools/client/shared/vendor/immutable");
 
+const {
+  PANELS,
+} = require("devtools/client/netmonitor/src/constants");
+
 const UiState = Immutable.Record({
   filterBarVisible: false,
   filteredMessageVisible: false,
   timestampsVisible: true,
+  networkMessageActiveTabId: PANELS.HEADERS,
 });
 
 function ui(state = new UiState(), action) {
   switch (action.type) {
     case FILTER_BAR_TOGGLE:
       return state.set("filterBarVisible", !state.filterBarVisible);
     case TIMESTAMPS_TOGGLE:
       return state.set("timestampsVisible", action.visible);
+    case SELECT_NETWORK_MESSAGE_TAB:
+      return state.set("networkMessageActiveTabId", action.id);
   }
 
   return state;
 }
 
 module.exports = {
   UiState,
   ui,
--- a/devtools/client/webconsole/new-console-output/store.js
+++ b/devtools/client/webconsole/new-console-output/store.js
@@ -48,16 +48,17 @@ function configureStore(hud, options = {
       debug: Services.prefs.getBoolPref(PREFS.FILTER.DEBUG),
       log: Services.prefs.getBoolPref(PREFS.FILTER.LOG),
       css: Services.prefs.getBoolPref(PREFS.FILTER.CSS),
       net: Services.prefs.getBoolPref(PREFS.FILTER.NET),
       netxhr: Services.prefs.getBoolPref(PREFS.FILTER.NETXHR),
     }),
     ui: new UiState({
       filterBarVisible: Services.prefs.getBoolPref(PREFS.UI.FILTER_BAR),
+      networkMessageActiveTabId: "headers",
     })
   };
 
   return createStore(
     createRootReducer(),
     initialState,
     compose(
       applyMiddleware(thunk),