NOT FOR COMMIT: Revive the old virtual keyboard extension.

chrome/browser/resources/virtual_keyboard/touches.js

+var touches = $('touches');
+
+var fadeDelay = 2;
+if (document.location.hash) {
+  fadeDelay = document.location.hash.substr(1);
+}
+
+function createPoint(x, y, size, colour, stroke) {
+  var div = document.createElement('div');
+  div.style.position = 'absolute';
+  div.style.webkitTransition = 'opacity ' + fadeDelay + 's linear';
+  div.style.left = x - size + 'px';
+  div.style.top = y - size + 'px';
+  div.style.width = (2 * size) + 'px';
+  div.style.height = (2 * size) + 'px';
+  div.style.background = colour;
+  div.style.borderRadius = size + 'px';
+  if (stroke) {
+    div.style.border = '2px solid ' + stroke;
+  }
+  return div;
+}
+
+function addFadingPoint(x, y, size, colour, stroke) {
+  var point = createPoint(x, y, size, colour, stroke);
+  touches.appendChild(point);
+  window.setTimeout(
+      function() {
+        point.style.opacity = 0;
+        window.setTimeout(
+            function() {
+              touches.removeChild(point);
+            }, fadeDelay * 1000);
+      },
+      0);
+}
+
+// -- modified rbyers' paint.js -- //
+var nextCount = 0;
+var touchMap = {};
+
+function drawTouches(touchList, eventType) {
+  for (var i = 0; i < touchList.length; ++i) {
+    var touch = touchList[i];
+
+    // Map the identifier to a small count (no-op on Chrome, but
+    // important for mobile Safari).
+    if (!(touch.identifier in touchMap)) {
+      touchMap[touch.identifier] = nextCount;
+      nextCount++;
+    }
+
+    var radius = touch.webkitRadiusX > 1 ? touch.webkitRadiusX : 15;
+    if (radius > 100) {
+      console.error('Got large webkitRadiusX: ' + touch.webkitRadiusX);
+      radius = 100;
+    }
+
+    // Try to avoid start/end circles overlapping exactly
+    if (eventType == 'touchend') {
+      radius++;
+    }
+
+    var x = touch.pageX;
+    var y = touch.pageY;
+    var size = radius;
+
+    var hue = (touchMap[touch.identifier] * 30) % 256;
+    var lum = 50;
+    if (touch.webkitForce) {
+      lum = Math.round(touch.webkitForce / 0.4 * 50 + 20);
+    }
+    var colour = 'hsla(' + hue + ',100%,' + lum + '%,1)';
+
+    var stroke = '';
+    // XXX(bryeung): since touchstart isn't working, just ignore stroke
+    /*
+    if (eventType != 'touchmove') {
+      stroke = eventType == 'touchstart' ? 'black' : 'grey';
+    }
+    */
+
+    // XXX(bryeung): HACK touch starts are showing up in the wrong spot
+    if (eventType != 'touchstart') {
+      addFadingPoint(x, y, size, colour, stroke);
+    }
+  }
+}
+
+function TouchHandler(event) {
+  drawTouches(event.changedTouches, event.type);
+  event.preventDefault();
+}
+
+var trackMouseMoves = false;
+function MouseHandler(event) {
+  if (event.type == 'mousedown') {
+    trackMouseMoves = true;
+  }
+  if (event.type == 'mouseup') {
+    trackMouseMoves = false;
+  }
+  if (trackMouseMoves) {
+    addFadingPoint(event.clientX, event.clientY, 15, 'black', '');
+  }
+}
+
+/**
+ * Disable default window onscroll handler.
+ */
+window.onscroll = null;
+// -- end modified rbyers' paint.js -- //
+
+touches.addEventListener('touchstart', TouchHandler);
+touches.addEventListener('touchmove', TouchHandler);
+touches.addEventListener('touchend', TouchHandler);
+
+touches.addEventListener('mousedown', MouseHandler);
+touches.addEventListener('mouseup', MouseHandler);
+touches.addEventListener('mousemove', MouseHandler);