From 286616e659ae091813cec58ee54b813bf7027440 Mon Sep 17 00:00:00 2001
From: cahrens <christina@edx.org>
Date: Tue, 5 Feb 2013 09:50:34 -0500
Subject: [PATCH] Do not do finds within the event method. Decreases likelihood
 of hitting bug in older versions of Chrome.
 https://edx.lighthouseapp.com/projects/102637/tickets/153

---
 .../xmodule/xmodule/js/src/html/edit.coffee   | 49 ++++++++++++-------
 1 file changed, 30 insertions(+), 19 deletions(-)

diff --git a/common/lib/xmodule/xmodule/js/src/html/edit.coffee b/common/lib/xmodule/xmodule/js/src/html/edit.coffee
index 07e6163f25..238182f3d9 100644
--- a/common/lib/xmodule/xmodule/js/src/html/edit.coffee
+++ b/common/lib/xmodule/xmodule/js/src/html/edit.coffee
@@ -10,7 +10,8 @@ class @HTMLEditingDescriptor
       lineWrapping: true
     })
 
-    $(@advanced_editor.getWrapperElement()).addClass(HTMLEditingDescriptor.isInactiveClass)
+    @$advancedEditorWrapper = $(@advanced_editor.getWrapperElement())
+    @$advancedEditorWrapper.addClass(HTMLEditingDescriptor.isInactiveClass)
 
 #   This is a workaround for the fact that tinyMCE's baseURL property is not getting correctly set on AWS
 #   instances (like sandbox). It is not necessary to explicitly set baseURL when running locally.
@@ -43,16 +44,21 @@ class @HTMLEditingDescriptor
       theme_advanced_blockformats : "p,pre,h1,h2,h3",
       width: '100%',
       height: '400px',
-      setup : HTMLEditingDescriptor.setupTinyMCE,
+      setup : @setupTinyMCE,
       # Cannot get access to tinyMCE Editor instance (for focusing) until after it is rendered.
       # The tinyMCE callback passes in the editor as a paramter.
       init_instance_callback: @focusVisualEditor
     })
 
     @showingVisualEditor = true
-    @element.on('click', '.editor-tabs .tab', this, @onSwitchEditor)
+    # Doing these find operations within onSwitchEditor leads to sporadic failures on Chrome (version 20 and older).
+    $element = $(element)
+    @$htmlTab = $element.find('.html-tab')
+    @$visualTab = $element.find('.visual-tab')
 
-  @setupTinyMCE: (ed) ->
+    @element.on('click', '.editor-tabs .tab', @onSwitchEditor)
+
+  setupTinyMCE: (ed) =>
     ed.addButton('wrapAsCode', {
       title : 'Code',
       image : '/static/images/ico-tinymce-code.png',
@@ -67,22 +73,23 @@ class @HTMLEditingDescriptor
       command.setActive('wrapAsCode', e.nodeName == 'CODE')
     )
 
-  onSwitchEditor: (e)=>
+    @visualEditor = ed
+
+  onSwitchEditor: (e) =>
     e.preventDefault();
 
-    if not $(e.currentTarget).hasClass('current')
-      element = e.data.element
+    $currentTarget = $(e.currentTarget)
+    if not $currentTarget.hasClass('current')
+      $currentTarget.addClass('current')
+      @$mceToolbar.toggleClass(HTMLEditingDescriptor.isInactiveClass)
+      @$advancedEditorWrapper.toggleClass(HTMLEditingDescriptor.isInactiveClass)
 
-      $(e.currentTarget).addClass('current')
-      $(element).find('table.mceToolbar').toggleClass(HTMLEditingDescriptor.isInactiveClass)
-      $(@advanced_editor.getWrapperElement()).toggleClass(HTMLEditingDescriptor.isInactiveClass)
-
-      visualEditor = @getVisualEditor(element)
-      if $(e.currentTarget).attr('data-tab') is 'visual'
-        $(element).find('.html-tab').removeClass('current')
+      visualEditor = @getVisualEditor()
+      if $currentTarget.data('tab') is 'visual'
+        @$htmlTab.removeClass('current')
         @showVisualEditor(visualEditor)
       else
-        $(element).find('.visual-tab').removeClass('current')
+        @$visualTab.removeClass('current')
         @showAdvancedEditor(visualEditor)
 
   # Show the Advanced (codemirror) Editor. Pulled out as a helper method for unit testing.
@@ -104,20 +111,24 @@ class @HTMLEditingDescriptor
     @focusVisualEditor(visualEditor)
     @showingVisualEditor = true
 
-  focusVisualEditor: (visualEditor) ->
+  focusVisualEditor: (visualEditor) =>
     visualEditor.focus()
+    if not @$mceToolbar?
+      @$mceToolbar = $(@element).find('table.mceToolbar')
 
-  getVisualEditor: (element) ->
+  getVisualEditor: () ->
     ###
     Returns the instance of TinyMCE.
     This is different from the textarea that exists in the HTML template (@tiny_mce_textarea.
+
+    Pulled out as a helper method for unit test.
     ###
-    return tinyMCE.get($(element).find('.tiny-mce').attr('id'))
+    return @visualEditor
 
   save: ->
     @element.off('click', '.editor-tabs .tab', @onSwitchEditor)
     text = @advanced_editor.getValue()
-    visualEditor = @getVisualEditor(@element)
+    visualEditor = @getVisualEditor()
     if @showingVisualEditor and visualEditor.isDirty()
       text = visualEditor.getContent({no_events: 1})
     data: text