[merge addon] Use CSS :after to style scroll-lock icon

Primary motivation was to remove the use of `innerHTML` because the
Firefox extension validator raises a warning about this.

The obvious solution is to use `textContent` instead of `innerHTML`
but I thought it could be useful to have the ability to pick a
custom visual for the scroll-lock icon.

As per MDN documentation, all the supported browsers as per
CodeMirror documentation support `:after`.

addon/merge/merge.css

@@ -48,6 +48,12 @@
   color: #555;
   line-height: 1;
 }
+.CodeMirror-merge-scrolllock:after {
+  content: "\21db\00a0\00a0\21da";
+}
+.CodeMirror-merge-scrolllock.CodeMirror-merge-scrolllock-enabled:after {
+  content: "\21db\21da";
+}
 
 .CodeMirror-merge-copybuttons-left, .CodeMirror-merge-copybuttons-right {
   position: absolute;

addon/merge/merge.js

@@ -211,7 +211,7 @@
   function setScrollLock(dv, val, action) {
     dv.lockScroll = val;
     if (val && action != false) syncScroll(dv, DIFF_INSERT) && makeConnections(dv);
-    dv.lockButton.innerHTML = val ? "\u21db\u21da" : "\u21db  \u21da";
+    (val ? CodeMirror.addClass : CodeMirror.rmClass)(dv.lockButton, "CodeMirror-merge-scrolllock-enabled");
   }
 
   // Updating the marks for editor content