fix(iframes): Closes T1289—re-attach iFrame event listeners after doc.open

Summary: Re-order the header and toolbar so that the search dropdown appears correctly

Test Plan: Run tests

Reviewers: evan

Reviewed By: evan

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

internal_packages/message-list/lib/email-frame.cjsx

@@ -111,7 +111,7 @@ class EmailFrame extends React.Component
   @displayName = 'EmailFrame'
 
   render: =>
-    <EventedIFrame seamless="seamless" />
+    <EventedIFrame ref="iframe" seamless="seamless" />
 
   componentDidMount: =>
     @_mounted = true
@@ -140,6 +140,10 @@ class EmailFrame extends React.Component
     doc.write("<div id='inbox-html-wrapper' class='#{wrapperClass}'>#{@_emailContent()}</div>")
     doc.close()
 
+    # Notify the EventedIFrame that we've replaced it's document (with `open`)
+    # so it can attach event listeners again.
+    @refs.iframe.documentWasReplaced()
+
   _setFrameHeight: =>
     _.defer =>
       return unless @_mounted

src/components/evented-iframe.cjsx

@@ -28,18 +28,33 @@ class EventedIFrame extends React.Component
     @_subscribeToIFrameEvents()
 
   componentWillUnmount: =>
+    @_unsubscribeFromIFrameEvents()
+
+  ###
+  Public: Call this method if you replace the contents of the iframe's document.
+  This allows {EventedIframe} to re-attach it's event listeners.
+  ###
+  documentWasReplaced: =>
+    @_unsubscribeFromIFrameEvents()
+    @_subscribeToIFrameEvents()
+
+  _unsubscribeFromIFrameEvents: =>
     doc = React.findDOMNode(@).contentDocument
-    for e in ['click', 'keydown', 'mousedown', 'mousemove', 'mouseup']
+    return unless doc
-      doc?.removeEventListener?(e)
+    doc.removeEventListener('click', @_onIFrameClick)
+    doc.removeEventListener('keydown', @_onIFrameKeydown)
+    doc.removeEventListener('mousedown', @_onIFrameMouseEvent)
+    doc.removeEventListener('mousemove', @_onIFrameMouseEvent)
+    doc.removeEventListener('mouseup', @_onIFrameMouseEvent)
 
   _subscribeToIFrameEvents: =>
     doc = React.findDOMNode(@).contentDocument
     _.defer =>
-      doc.addEventListener "click", @_onIFrameClick
+      doc.addEventListener("click", @_onIFrameClick)
-      doc.addEventListener "keydown", @_onIFrameKeydown
+      doc.addEventListener("keydown", @_onIFrameKeydown)
-      doc.addEventListener "mousedown", @_onIFrameMouseEvent
+      doc.addEventListener("mousedown", @_onIFrameMouseEvent)
-      doc.addEventListener "mousemove", @_onIFrameMouseEvent
+      doc.addEventListener("mousemove", @_onIFrameMouseEvent)
-      doc.addEventListener "mouseup", @_onIFrameMouseEvent
+      doc.addEventListener("mouseup", @_onIFrameMouseEvent)
 
   # The iFrame captures events that take place over it, which causes some
   # interesting behaviors. For example, when you drag and release over the

src/sheet-container.cjsx

@@ -181,7 +181,7 @@ class SheetContainer extends React.Component
     sheetElements = @_sheetElements()
 
     <Flexbox direction="column">
-      <div name="Toolbar" style={order:0, zIndex: 2} className="sheet-toolbar">
+      <div name="Toolbar" style={order:0, zIndex: 3} className="sheet-toolbar">
         {toolbarElements[0]}
         <TimeoutTransitionGroup  leaveTimeout={125}
                                  enterTimeout={125}
@@ -190,7 +190,7 @@ class SheetContainer extends React.Component
         </TimeoutTransitionGroup>
       </div>
 
-      <div name="Header" style={order:1, zIndex: 3}>
+      <div name="Header" style={order:1, zIndex: 2}>
         <InjectedComponentSet matching={locations: [topSheet.Header, WorkspaceStore.Sheet.Global.Header]}
                               direction="column"
                               id={topSheet.id}/>