Bug 1362036 - Remember active network tab id; r=nchevobbe
MozReview-Commit-ID: BXiWywtQMwI
--- 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),