From 1e4aefcebb08c06ff23af1646192a1f21a206621 Mon Sep 17 00:00:00 2001
From: Ben Gotow <bengotow@gmail.com>
Date: Tue, 19 May 2015 15:49:28 -0700
Subject: [PATCH] =?UTF-8?q?fix(iframes):=20Closes=20T1289=E2=80=94re-attac?=
 =?UTF-8?q?h=20iFrame=20event=20listeners=20after=20doc.open?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 .../message-list/lib/email-frame.cjsx         |  6 +++-
 src/components/evented-iframe.cjsx            | 29 ++++++++++++++-----
 src/sheet-container.cjsx                      |  4 +--
 3 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/internal_packages/message-list/lib/email-frame.cjsx b/internal_packages/message-list/lib/email-frame.cjsx
index 51f251f22..189334066 100644
--- a/internal_packages/message-list/lib/email-frame.cjsx
+++ b/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
diff --git a/src/components/evented-iframe.cjsx b/src/components/evented-iframe.cjsx
index c2ace28ec..f9d14f223 100644
--- a/src/components/evented-iframe.cjsx
+++ b/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']
-      doc?.removeEventListener?(e)
+    return unless doc
+    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 "keydown", @_onIFrameKeydown
-      doc.addEventListener "mousedown", @_onIFrameMouseEvent
-      doc.addEventListener "mousemove", @_onIFrameMouseEvent
-      doc.addEventListener "mouseup", @_onIFrameMouseEvent
+      doc.addEventListener("click", @_onIFrameClick)
+      doc.addEventListener("keydown", @_onIFrameKeydown)
+      doc.addEventListener("mousedown", @_onIFrameMouseEvent)
+      doc.addEventListener("mousemove", @_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
diff --git a/src/sheet-container.cjsx b/src/sheet-container.cjsx
index 4fa5a672c..fffee56f7 100644
--- a/src/sheet-container.cjsx
+++ b/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}/>