Clear connection ID filter list on reload

data/actions/frames.js

@@ -11,8 +11,8 @@ const types = {
   FILTER_FRAMES: "FILTER_FRAMES",
 }
 
-function clear() {
-  return { type: types.CLEAR };
+function clear(options) {
+  return { type: types.CLEAR, options };
 }
 
 function addFrame(frame) {

data/components/connection-filter.js

@@ -25,12 +25,6 @@ var ConnectionFilter = React.createClass({
 
   displayName: "ConnectionFilter",
 
-  getInitialState() {
-    return {
-      uniqueConnections: []
-    };
-  },
-
   handleChange(e) {
     const { value } = e.target;
     const currentFilter = this.props.frames.filter;
@@ -44,23 +38,8 @@ var ConnectionFilter = React.createClass({
     ));
   },
 
-  // When the platform API supports it, this should be replaced
-  // with some API call listing only the current connections on
-  // the page.
-  componentWillReceiveProps({ frames }) {
-    frames.frames.forEach(frame => {
-      const { uniqueConnections } = this.state;
-
-      if (!uniqueConnections.includes(frame.webSocketSerialID)) {
-        this.setState({
-          uniqueConnections: [...uniqueConnections, frame.webSocketSerialID]
-        });
-      }
-    })
-  },
-
   render() {
-    const { uniqueConnections } = this.state;
+    const { uniqueConnections } = this.props.frames;
     return (
       uniqueConnections.length > 1 ?
         select({

data/reducers/frames.js

@@ -15,6 +15,7 @@ function getInitialState() {
   return {
     frames: [],
     selection: null,
+    uniqueConnections: [],
     filter: {
       text: "",
       frames: null
@@ -40,7 +41,7 @@ function frames(state = getInitialState(), action) {
     return filterFrames(state, action.filter);
 
   case types.CLEAR:
-    return clear(state);
+    return clear(state, action.options);
 
   case selectionTypes.SELECT_FRAME:
     return selectFrame(state, action.frame);
@@ -68,6 +69,7 @@ function addFrames(state, newFrames) {
   }
 
   var { totalSize, frameCount, startTime, endTime } = state.summary;
+  var uniqueConnections = state.uniqueConnections;
 
   // Update summary info
   newFrames.forEach(frame => {
@@ -78,14 +80,24 @@ function addFrames(state, newFrames) {
       endTime = data.timeStamp;
     }
 
+    // Update uniqueConnections.
+    //
+    // When the platform API supports it, this should be replaced
+    // with some API call listing only the current connections on
+    // the page.
+    if (!uniqueConnections.includes(frame.webSocketSerialID)) {
+      uniqueConnections.push(frame.webSocketSerialID);
+    }
+
     if (frame.type == "frame") {
       frameCount++;
     }
   });
 
   // Return new state
   var newState = Object.assign({}, state, {
-    frames: frames,
+    frames,
+    uniqueConnections,
     summary: {
       totalSize: totalSize,
       startTime: startTime,
@@ -160,11 +172,17 @@ function filterFrames(state, filter) {
   });
 }
 
-function clear(state) {
+function clear(state, options = {}) {
   // All data is cleared except for the current filters.
   var newState = getInitialState();
   newState.filter.text = state.filter.text;
-  newState.filter.webSocketSerialID = state.filter.webSocketSerialID;
+
+  // Allow clearing on page reload
+  if (options.resetIDfilter !== true) {
+    newState.filter.webSocketSerialID = state.filter.webSocketSerialID;
+    newState.uniqueConnections = state.uniqueConnections;
+  }
+
   return newState;
 }
 

data/view.js

@@ -60,8 +60,9 @@ var WebSocketsView = createView(PanelView,
 
   // Chrome Messages
 
-  removeFrames: function() {
-    store.dispatch(clear());
+  tabNavigated: function() {
+    // Clear on reload, and force ID filter reset
+    store.dispatch(clear({ resetIDfilter: true }));
   },
 
   // nsIWebSocketEventService events

lib/wsm-panel.js

@@ -183,7 +183,7 @@ const WsmPanel = Class(
   },
 
   onTabNavigated: function() {
-    this.postContentMessage("removeFrames");
+    this.postContentMessage("tabNavigated");
   },
 
   // nsIWebSocketEventService events