even more improved drag resizing

 - drag polyfill
 - suppress ghost image
 - work around gecko bug 505521

h/js/lib/polyfills/raf.js

+// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
+(function() {
+  var pfx = ['ms', 'moz', 'webkit', 'o'];
+  for (var i = 0; i < pfx.length && !window.requestAnimationFrame ; i++) {
+    requestAnimationFrame = window[pfx[i]+'RequestAnimationFrame'];
+    cancelAnimationFrame = window[pfx[i]+'CancelRequestAnimationFrame'];
+    if (!cancelAnimationFrame) {
+      cancelAnimationFrame = window[pfx[i]+'CancelAnimationFrame'];
+    }
+    window.requestAnimationFrame = requestAnimationFrame;
+    window.cancelAnimationFrame = cancelAnimationFrame;
+  }
+
+  if (!window.requestAnimationFrame)
+    var lastTime = 0;
+    window.requestAnimationFrame = function(callback, element) {
+      var currTime = new Date().getTime();
+      var timeToCall = Math.max(0, 16 - (currTime - lastTime));
+      var id = window.setTimeout(function() {
+        callback(currTime + timeToCall);
+      }, timeToCall);
+      lastTime = currTime + timeToCall;
+      return id;
+    };
+
+  if (!window.cancelAnimationFrame)
+    window.cancelAnimationFrame = function(id) {
+      clearTimeout(id);
+    };
+}())

h/js/src/annotator.host.coffee

@@ -25,6 +25,7 @@ class Annotator.Host extends Annotator
   # Drag state variables
   drag:
     delta: 0
+    last: null
     tick: false
 
   constructor: (element, options) ->
@@ -76,11 +77,14 @@ class Annotator.Host extends Annotator
           @frame.css 'margin-left': ''
           @frame.removeClass 'annotator-no-transition'
           @frame.addClass 'annotator-collapsed'
-        dragFrame: (d) =>
-          @drag.delta += d
+        dragFrame: (screenX) =>
+          if screenX > 0
+            if @drag.last?
+              @drag.delta += screenX - @drag.last
+            @drag.last = screenX
           unless @drag.tick
             @drag.tick = true
-            requestAnimationFrame @dragRefresh
+            window.requestAnimationFrame this.dragRefresh
         getHighlights: =>
           highlights: $(@wrapper).find('.annotator-hl').map ->
             offset: $(this).offset()
@@ -166,6 +170,20 @@ class Annotator.Host extends Annotator
     document.addEventListener 'touchstart', =>
       touch = true
       do update
+    document.addEventListener 'dragover', (event) =>
+      if @drag.last?
+        @drag.delta += event.screenX - @drag.last
+      @drag.last = event.screenX
+      unless @drag.tick
+        @drag.tick = true
+        window.requestAnimationFrame this.dragRefresh
+    document.addEventListener 'dragleave', (event) =>
+      if @drag.last?
+        @drag.delta += event.screenX - @drag.last
+      @drag.last = event.screenX
+      unless @drag.tick
+        @drag.tick = true
+        window.requestAnimationFrame this.dragRefresh
     $(window).on 'resize scroll', update
     $(document.body).on 'resize scroll', '*', util.debounce => @consumer.update()
     super

h/js/src/controllers.coffee

@@ -174,16 +174,22 @@ class Hypothesis extends Annotator
           this._fillDynamicBucket()
         this.show()
 
-    dragLast = 0
+    el = document.createElementNS 'http://www.w3.org/1999/xhtml', 'canvas'
+    el.width = el.height = 1
+    @element.append el
+
     handle = @element.find('#toolbar .tri')[0]
     handle.addEventListener 'dragstart', (event) =>
-      dragLast = event.screenX
+      event.dataTransfer.setData 'text/plain', ''
+      event.dataTransfer.setDragImage(el, 0, 0)
+      @provider.dragFrame event.screenX
     handle.addEventListener 'dragend', (event) =>
-      @provider.dragFrame (event.screenX - dragLast)
-    handle.addEventListener 'drag', (event) =>
-      if event.screenX > 0
-        @provider.dragFrame (event.screenX - dragLast)
-        dragLast = event.screenX
+      @provider.dragFrame event.screenX
+    @element[0].addEventListener 'dragover', (event) =>
+      @provider.dragFrame event.screenX
+    @element[0].addEventListener 'dragleave', (event) =>
+      @provider.dragFrame event.screenX
+
     this
 
   _setupDynamicStyle: ->
@@ -608,16 +614,16 @@ class Hypothesis extends Annotator
     @visible = true
     @provider.setActiveHighlights annotations
     @provider.showFrame()
-    @element.find("#toolbar").addClass "shown"
-    document.getElementsByClassName('tri')[0].draggable = true
+    @element.find('#toolbar').addClass('shown')
+      .find('.tri').attr('draggable', true)
 
   hide: =>
     @lastWidth = window.innerWidth
     @visible = false
     @provider.setActiveHighlights []
     @provider.hideFrame()
-    @element.find("#toolbar").removeClass "shown"
-    document.getElementsByClassName('tri')[0].draggable = false
+    @element.find('#toolbar').removeClass('shown')
+      .find('.tri').attr('draggable', false)
 
   threadId: (annotation) ->
     if annotation?.thread?

h/sass/app.scss

@@ -236,7 +236,7 @@ svg { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
     float: left;
     width: $baseLineHeight;
     height: $baseLineHeight;
-    cursor: pointer;
+    cursor: w-resize;
   }
 
   &.shown {