this;
    const { startPanelContainer } = this.state;

    const initialHeight = Services.prefs.getIntPref(
      "devtools.netmonitor.msg.payload-preview-height"
    );

    return div(
      { id: "messages-view", className: "monitor-panel" },
      Toolbar({
        searchboxRef,
      }),
      SplitBox({
        className: "devtools-responsive-container",
        initialHeight,
        minSize: "50px",
        maxSize: "80%",
        splitterSize: messageDetailsOpen ? 1 : 0,
        onSelectContainerElement: this.handleContainerElement,
        startPanel: MessageListContent({
          connector,
          startPanelContainer,
          channelId,
        }),
        endPanel:
          messageDetailsOpen &&
          MessagePayload({
            ref: "endPanel",
            connector,
            selectedMessage,
          }),
        endPanelCollapsed: !messageDetailsOpen,
        endPanelControl: true,
        vert: false,
      }),
      StatusBar()
    );
  }
}

module.exports = connect(
  state => ({
    channelId: state.messages.currentChannelId,
    messageDetailsOpen: state.messages.messageDetailsOpen,
    selectedMessage: getSelectedMessage(state),
    selectedMessageVisible: isSelectedMessageVisible(state),
  }),
  dispatch => ({
    openMessageDetailsTab: open => dispatch(Actions.openMessageDetails(open)),
  })
)(MessagesView);
PK