Implementing NYT's ICE track changes to Open Ended Assessements

Squashed commits to facilitate cherry-picking.  Committers and
original commit messages are:
- ==> @caesar2164, * ==> @jrbl, ~ ==> @jbau

- Added boolean to OE problem CMS settings to turn on ICE track changes
- Added ICE init and tracking start/stop to HTML
- Conditional in Peer Grading HTML for ICE container
- CSS styling for ICE container and insertion/deletion elements
- Added class to track changes HTML
- Added ice.min.js as well as included it in the js requirements for peer grading
- Use track_changes in peer_grading_problem
* Refactor peer_grading_problem to lookup track_changes variable by problem location.
* Whitelist ICE insert, delete tags
* Adds ICE multi-user-editor insert and delete tags to the peer grading sanitize_html whitelist.
- add reset button

* Introduction ICE means we need its inline tags to get passed through
  to the feedback target, but we don't want malicious peer feedback
  providers introducing <script>, etc, so we use lxml.html.clean to
  scrub peer grading input.
* Adds feedback URL autoheating.
* Allows ICE <insert> and <delete> tags but not others.

~ add helptext re: EXPERIMENTAL FEATURES

~ address a bunch of @VikParuchuri review comments on ICE for OEE
  ~ remove extraneous code
  ~ change to new xmodule accessors
  ~ refactor filtering

~ fix broken test test_peer_grading_problem

~ Create track_changes.coffee and remove <script> from
  peer_grading_problem.html
~ Remove all reliance on id in favor of local scoping and classes

~ bring up test coverage somewhat

~ remove superflous $.scrollTo

~ TODO: Filtering

lms/static/sass/course/_staff_grading.scss

@@ -6,6 +6,32 @@ div.peer-grading{
         margin: 0;
         height: 75px;
     }
+    
+    div.feedback-area.track-changes {
+        position: relative;
+        margin: 0px;
+        height: 150px;
+        border: 1px solid lightgray;
+        padding: 5px;
+        resize: vertical;
+        width: 99%;
+        overflow: auto;
+    }
+
+    div.feedback-area.track-changes, p.legend {
+        .ice-controls {
+            float: right;
+        }
+        .del {
+            position: relative;
+            text-decoration: line-through;
+            background-color: #ffc3c3;
+        }
+        .ins {
+            position: relative;
+            background-color: #c3ffc3;
+        }
+    }
 
     ul.rubric-list{
         margin: 0;

lms/templates/peer_grading/peer_grading_problem.html

@@ -26,7 +26,7 @@
                     </section>
                 </div>
             </div>
-            <section class="grading-wrapper">
+            <section class="grading-wrapper" data-track-changes="${'true' if track_changes else 'false'}">
                 <div class="grading-message">
                 </div>
                 <h2>${_("Student Response")}</h2>
@@ -42,9 +42,21 @@
                         <p class="rubric-selection-container"></p>
                         <p class="score-selection-container"></p>
                         <h3>${_("Written Feedback")}</h3>
-                        <p>${_("Please include some written feedback as well.")}</p>
-                        <textarea name="feedback" placeholder="Feedback for student" class="feedback-area" cols="70" ></textarea>
-                        <div class="flag-student-container"> ${_("This submission has explicit or pornographic content : ")}
+                        % if track_changes:
+                            <p>${_("Please edit your peer's submission below.")}</p>
+                            <p class="legend">
+                                <span class="ins">${_("This is an insertion.")}</span>&nbsp;
+                                <span class="del">${_("This is a deletion.")}</span>&nbsp;
+                                <span class="ice-controls">
+                                    <a href="#" class="reset-changes"><i class="icon-refresh"></i> Reset Changes</a>
+                                </span>
+                            </p>
+                            <div name="feedback" class="feedback-area track-changes" contenteditable="true"></div>
+                        % else:
+                            <p>${_("Please include some written feedback as well.")}</p>
+                            <textarea name="feedback" placeholder="Feedback for student" class="feedback-area" cols="70" ></textarea>
+                        % endif
+                        <div class="flag-student-container"> ${_("This submission has explicit or offensive content : ")}
                             <input type="checkbox" class="flag-checkbox" value="student_is_flagged"> 
                         </div>
                         <div class="answer-unknown-container"> ${_("I do not know how to grade this question : ")}