_ = require 'underscore' React = require 'react/addons' {DatabaseStore, AccountStore, TaskQueue, Actions, Contact, Message} = require 'nylas-exports' {ResizableRegion} = require 'nylas-component-kit' DeveloperBarStore = require './developer-bar-store' DeveloperBarTask = require './developer-bar-task' DeveloperBarCurlItem = require './developer-bar-curl-item' DeveloperBarLongPollItem = require './developer-bar-long-poll-item' DeveloperBarClosedHeight = 30 class DeveloperBar extends React.Component @displayName: "DeveloperBar" @containerRequired: false constructor: (@props) -> @state = _.extend @_getStateFromStores(), height: DeveloperBarClosedHeight section: 'curl' filter: '' componentDidMount: => @taskQueueUnsubscribe = TaskQueue.listen @_onChange @activityStoreUnsubscribe = DeveloperBarStore.listen @_onChange componentWillUnmount: => @taskQueueUnsubscribe() if @taskQueueUnsubscribe @activityStoreUnsubscribe() if @activityStoreUnsubscribe render: => # TODO WARNING: This 1px height is necessary to fix a redraw issue in the thread # list in Chrome 42 (Electron 0.26.0). Do not remove unless you've verified that # scrolling works fine now and repaints aren't visible. return
unless @state.visible
{@_caret()}
@_onExpandSection('queue')}> Queue Length: {@state.queue?.length}
@_onExpandSection('long-polling')}> { _.map @state.longPollState, (val, key) =>
} Long Polling
@_onExpandSection('curl')}> Requests: {@state.curlHistory.length}
Feedback
Component Regions
React Remote Container
{@_sectionContent()}
Clear
_caret: => if @state.height > DeveloperBarClosedHeight else _sectionContent: => expandedDiv =
matchingFilter = (item) => return true if @state.filter is '' return JSON.stringify(item).indexOf(@state.filter) >= 0 if @state.section == 'curl' itemDivs = @state.curlHistory.filter(matchingFilter).map (item) -> expandedDiv =
{itemDivs}
else if @state.section == 'long-polling' itemDivs = @state.longPollHistory.filter(matchingFilter).map (item) -> expandedDiv =
{itemDivs}
else if @state.section == 'queue' queue = @state.queue.filter(matchingFilter) queueDivs = for i in [@state.queue.length - 1..0] by -1 task = @state.queue[i] queueCompleted = @state.completed.filter(matchingFilter) queueCompletedDivs = for i in [@state.completed.length - 1..0] by -1 task = @state.completed[i] expandedDiv =
Remove Queued Tasks
{queueDivs}
{queueCompletedDivs}
expandedDiv _onChange: => # The developer bar is hidden almost all the time. Rather than render when # API requests come in, etc., just ignore changes from our store and retrieve # state when we open. if @state.visible and @state.height > DeveloperBarClosedHeight @setState(@_getStateFromStores()) _onClear: => Actions.clearDeveloperConsole() _onFilter: (ev) => @setState(filter: ev.target.value) _onDequeueAll: => Actions.dequeueAllTasks() _onHide: => @setState height: DeveloperBarClosedHeight _onShow: => @setState(@_getStateFromStores()) @setState(height: 200) if @state.height < 100 _onExpandSection: (section) => @setState(@_getStateFromStores()) @setState(section: section) @_onShow() _onToggleRegions: => Actions.toggleComponentRegions() _onToggleReactRemoteContainer: => {ReactRemote} = require('nylas-exports') ReactRemote.toggleContainerVisible() _getStateFromStores: => visible: DeveloperBarStore.visible() queue: TaskQueue._queue completed: TaskQueue._completed curlHistory: DeveloperBarStore.curlHistory() longPollHistory: DeveloperBarStore.longPollHistory() longPollState: DeveloperBarStore.longPollState() module.exports = DeveloperBar