tor-browser

messages.js (8155B)

---

/* 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 {
 SELECT_REQUEST,
 MSG_ADD,
 MSG_SELECT,
 MSG_OPEN_DETAILS,
 MSG_CLEAR,
 MSG_TOGGLE_FILTER_TYPE,
 MSG_TOGGLE_CONTROL,
 MSG_SET_FILTER_TEXT,
 MSG_TOGGLE_COLUMN,
 MSG_RESET_COLUMNS,
 MSG_CLOSE_CONNECTION,
 CHANNEL_TYPE,
 SET_EVENT_STREAM_FLAG,
} = require("resource://devtools/client/netmonitor/src/constants.js");

/**
* The default column states for the MessageListItem component.
*/
const defaultColumnsState = {
 data: true,
 size: false,
 time: true,
};

const defaultWSColumnsState = {
 ...defaultColumnsState,
 opCode: false,
 maskBit: false,
 finBit: false,
};

const defaultSSEColumnsState = {
 ...defaultColumnsState,
 eventName: false,
 lastEventId: false,
 retry: false,
};

/**
* Returns a new object of default cols.
*/
function getMessageDefaultColumnsState(channelType) {
 let columnsState = defaultColumnsState;
 const { EVENT_STREAM, WEB_SOCKET } = CHANNEL_TYPE;

 if (channelType === WEB_SOCKET) {
   columnsState = defaultWSColumnsState;
 } else if (channelType === EVENT_STREAM) {
   columnsState = defaultSSEColumnsState;
 }

 return Object.assign({}, columnsState);
}

/**
* This structure stores list of all WebSocket and EventSource messages received
* from the backend.
*/
function Messages(initialState = {}) {
 const { EVENT_STREAM, WEB_SOCKET } = CHANNEL_TYPE;

 return {
   // Map with all requests (key = resourceId, value = array of message objects)
   messages: new Map(),
   messageFilterText: "",
   // Default filter type is "all",
   messageFilterType: "all",
   showControlFrames: false,
   selectedMessage: null,
   messageDetailsOpen: false,
   currentChannelId: null,
   currentChannelType: null,
   currentRequestId: null,
   closedConnections: new Map(),
   columns: null,
   sseColumns: getMessageDefaultColumnsState(EVENT_STREAM),
   wsColumns: getMessageDefaultColumnsState(WEB_SOCKET),
   ...initialState,
 };
}

/**
* When a network request is selected,
* set the current resourceId affiliated with the connection.
*/
function setCurrentChannel(state, action) {
 if (!action.request) {
   return state;
 }

 const { id, cause, resourceId, isEventStream } = action.request;
 const { EVENT_STREAM, WEB_SOCKET } = CHANNEL_TYPE;
 let currentChannelType = null;
 let columnsKey = "columns";
 if (cause.type === "websocket") {
   currentChannelType = WEB_SOCKET;
   columnsKey = "wsColumns";
 } else if (isEventStream) {
   currentChannelType = EVENT_STREAM;
   columnsKey = "sseColumns";
 }

 return {
   ...state,
   columns:
     currentChannelType === state.currentChannelType
       ? { ...state.columns }
       : { ...state[columnsKey] },
   currentChannelId: resourceId,
   currentChannelType,
   currentRequestId: id,
   // Default filter text is empty string for a new connection
   messageFilterText: "",
 };
}

/**
* If the request is already selected and isEventStream flag
* is added later, we need to update currentChannelType & columns.
*/
function updateCurrentChannel(state, action) {
 if (state.currentRequestId === action.id) {
   const currentChannelType = CHANNEL_TYPE.EVENT_STREAM;
   return {
     ...state,
     columns: { ...state.sseColumns },
     currentChannelType,
   };
 }
 return state;
}

/**
* Appending new message into the map.
*/
function addMessage(state, action) {
 const { httpChannelId } = action;
 const nextState = { ...state };

 const newMessage = {
   httpChannelId,
   ...action.data,
 };

 nextState.messages = mapSet(
   nextState.messages,
   newMessage.httpChannelId,
   newMessage
 );

 return nextState;
}

/**
* Select specific message.
*/
function selectMessage(state, action) {
 if (
   state.selectedMessage == action.message &&
   state.messageDetailsOpen == action.open
 ) {
   return state;
 }
 return {
   ...state,
   selectedMessage: action.message,
   messageDetailsOpen: action.open,
 };
}

/**
* Shows/Hides the MessagePayload component.
*/
function openMessageDetails(state, action) {
 if (state.messageDetailsOpen == action.open) {
   return state;
 }
 return {
   ...state,
   messageDetailsOpen: action.open,
 };
}

/**
* Clear messages of the request from the state.
*/
function clearMessages(state) {
 const nextState = { ...state };
 const defaultState = Messages();
 nextState.messages = new Map(state.messages);
 nextState.messages.delete(nextState.currentChannelId);

 // Reset fields to default state.
 nextState.selectedMessage = defaultState.selectedMessage;
 nextState.messageDetailsOpen = defaultState.messageDetailsOpen;

 return nextState;
}

/**
* Toggle the message filter type of the connection.
*/
function toggleMessageFilterType(state, action) {
 if (state.messageFilterType == action.filter) {
   return state;
 }
 return {
   ...state,
   messageFilterType: action.filter,
 };
}

/**
* Toggle control frames for the WebSocket connection.
*/
function toggleControlFrames(state) {
 return {
   ...state,
   showControlFrames: !state.showControlFrames,
 };
}

/**
* Set the filter text of the current channelId.
*/
function setMessageFilterText(state, action) {
 if (state.messageFilterText == action.text) {
   return state;
 }
 return {
   ...state,
   messageFilterText: action.text,
 };
}

/**
* Toggle the user specified column view state.
*/
function toggleColumn(state, action) {
 const { column } = action;
 let columnsKey = null;
 if (state.currentChannelType === CHANNEL_TYPE.WEB_SOCKET) {
   columnsKey = "wsColumns";
 } else {
   columnsKey = "sseColumns";
 }
 const newColumnsState = {
   ...state[columnsKey],
   [column]: !state[columnsKey][column],
 };
 return {
   ...state,
   columns: newColumnsState,
   [columnsKey]: newColumnsState,
 };
}

/**
* Reset back to default columns view state.
*/
function resetColumns(state) {
 let columnsKey = null;
 if (state.currentChannelType === CHANNEL_TYPE.WEB_SOCKET) {
   columnsKey = "wsColumns";
 } else {
   columnsKey = "sseColumns";
 }
 const newColumnsState = getMessageDefaultColumnsState(
   state.currentChannelType
 );
 return {
   ...state,
   [columnsKey]: newColumnsState,
   columns: newColumnsState,
 };
}

function closeConnection(state, action) {
 const { httpChannelId, code, reason } = action;
 const nextState = { ...state };

 nextState.closedConnections.set(httpChannelId, {
   code,
   reason,
 });

 return nextState;
}

/**
* Append new item into existing map and return new map.
*/
function mapSet(map, key, value) {
 const newMap = new Map(map);
 if (newMap.has(key)) {
   const messagesArray = [...newMap.get(key)];
   messagesArray.push(value);
   newMap.set(key, messagesArray);
   return newMap;
 }
 return newMap.set(key, [value]);
}

/**
* This reducer is responsible for maintaining list of
* messages within the Network panel.
*/
function messages(state = Messages(), action) {
 switch (action.type) {
   case SELECT_REQUEST:
     return setCurrentChannel(state, action);
   case SET_EVENT_STREAM_FLAG:
     return updateCurrentChannel(state, action);
   case MSG_ADD:
     return addMessage(state, action);
   case MSG_SELECT:
     return selectMessage(state, action);
   case MSG_OPEN_DETAILS:
     return openMessageDetails(state, action);
   case MSG_CLEAR:
     return clearMessages(state);
   case MSG_TOGGLE_FILTER_TYPE:
     return toggleMessageFilterType(state, action);
   case MSG_TOGGLE_CONTROL:
     return toggleControlFrames(state, action);
   case MSG_SET_FILTER_TEXT:
     return setMessageFilterText(state, action);
   case MSG_TOGGLE_COLUMN:
     return toggleColumn(state, action);
   case MSG_RESET_COLUMNS:
     return resetColumns(state);
   case MSG_CLOSE_CONNECTION:
     return closeConnection(state, action);
   default:
     return state;
 }
}

module.exports = {
 Messages,
 messages,
 getMessageDefaultColumnsState,
};