Add actual scripting to make cssfixme working

[karlcow]

Depends on #12

[hallvors]

Three simple steps: we need to put the two js files in https://github.com/webcompat/css-fixme/tree/master/js in a suitable location (/static/js/lib/cssfixme/ .. was proposed) and add corresponding SCRIPT tags to the page.

Finally, we need a small script to hook up the UI and the rest of the JS. (We can remove the inline onclick handler from the button in the template).

The body of the onclick handler on the button should be somewhat like this:

var csscode = document.getElementsByTagName('textarea')[0].value; // or give it an ID..
var pre = document.getElementById('fixedcss');
var compact = document.getElementsByName('compact')[0].checked;
doTheBigStyleFixing(csscode, pre, compact);

I also recommend adding something like this:

document.getElementsByTagName('pre')[0].addEventListener('dblclick', function(e) {
    window.getSelection().removeAllRanges();
    var rng = document.createRange();
    rng.selectNodeContents(document.getElementsByTagName('pre')[0]);
    window.getSelection().addRange(rng);
    e.preventDefault();
}, false);

[hallvors]

If we use css-fixme as a git submodule, we presumably get all the junk in the repo including the .php file. What about making the build process just fetch those two files and stick them in the right place when we build webcompat.com ?

[hallvors]

For example using https://github.com/mCzolko/grunt-downloadfile

[miketaylr]

Seems OK as long as we're not trying to download the files every single grunt build (same problem as image optimization). That might get annoying if you're offline.

Another option is to move the files from the submodule during the build process (if they don't exist, or are newer than what we have).

[hallvors]

That sounds like a good idea.

I almost forgot: the "hooking it all up" JS should also include an onload handler that checks if the TEXTAREA contains code and if so triggers the style fixup. This is mostly for when the server-side processing adds CSS code inside the TEXTAREA.