fix(developer): visual improvements to developer bar

Summary: Make ETIMEDOUT red

Test Plan: manual

Reviewers: bengotow, dillon

Reviewed By: dillon

Differential Revision: https://phab.nylas.com/D2126

internal_packages/worker-ui/lib/developer-bar-curl-item.cjsx

@@ -1,11 +1,15 @@
+classNames = require 'classnames'
 React = require 'react/addons'
 
 class DeveloperBarCurlItem extends React.Component
   @displayName: 'DeveloperBarCurlItem'
 
   render: =>
-    <div className={"item status-code-#{@props.item.statusCode}"}>
-      <div className="code">{@props.item.statusCode}</div>
+    classes = classNames
+      "item": true
+      "error-code": @_isError()
+    <div className={classes}>
+      <div className="code">{@props.item.statusCode}{@_errorMessage()}</div>
       <span className="timestamp">{@props.item.startMoment.format("HH:mm:ss")}&nbsp;&nbsp;</span>
       <a onClick={@_onRunCommand}>Run</a>
       <a onClick={@_onCopyCommand}>Copy</a>
@@ -19,6 +23,16 @@ class DeveloperBarCurlItem extends React.Component
     clipboard = require('clipboard')
     clipboard.writeText(@props.item.command)
 
+  _isError: ->
+    return false if @props.item.statusCode is "pending"
+    return not (parseInt(@props.item.statusCode) <= 399)
+
+  _errorMessage: ->
+    if (@props.item.errorMessage ? "").length > 0
+      return " | #{@props.item.errorMessage}"
+    else
+      return ""
+
   _onRunCommand: =>
     curlFile = "#{atom.getConfigDirPath()}/curl.command"
     fs = require 'fs-plus'

internal_packages/worker-ui/lib/developer-bar-store.coffee

@@ -25,6 +25,7 @@ class DeveloperBarCurlRequest
 
     @command = "curl -X #{request.method} #{headers}#{data} \"#{url}\""
     @statusCode = statusCode ? error?.code ? "pending"
+    @errorMessage = error?.message ? error
     @startMoment = moment(request.startTime)
     @
 

internal_packages/worker-ui/stylesheets/worker-ui.less

@@ -118,6 +118,9 @@
       .timestamp {
         color: rgba(255,255,255,0.5);
       }
+      .error-code {
+        background-color:#740000;
+      }
       .item.status-code-500,
       .item.status-code-501,
       .item.status-code-502,