Adding JS for CSS-fixme to build system and markup, #850

Author: Hallvord R. M. Steen

.gitignore

@@ -18,6 +18,7 @@ webcompat/static/js/diagnose.js
 webcompat/static/js/issues.js
 webcompat/static/js/issue-list.js
 webcompat/static/js/user-activity.js
+webcompat/static/js/cssfixme/cssfixme.js
 webcompat/**/*.min.js
 webcompat/**/*.min.css
 webcompat/**/*.dev.css

grunt-tasks/concat.js

@@ -66,6 +66,14 @@ module.exports = function(grunt) {
           '<%= jsPath %>/lib/user-activity.js'
         ],
         dest: '<%= jsPath %>/user-activity.js'
+      },
+      cssFixmeLibs: {
+        src: [
+          'git_modules/css-fixme/js/css-browserside.js',
+          'git_modules/css-fixme/js/css-fixme.js',
+          '<%= jsPath %>/lib/css-fixme-ui.js'
+        ],
+        dest: '<%= jsPath %>/cssfixme/cssfixme.js'
       }
    });
 };

grunt-tasks/uglify.js

@@ -27,6 +27,10 @@ module.exports = function(grunt) {
       diagnose: {
         src: '<%= concat.diagnose.dest %>',
         dest: '<%= jsPath %>/diagnose.min.js'
+      },
+      cssFixmeLibs: {
+        src: '<%= concat.cssFixmeLibs.dest %>',
+        dest: '<%= jsPath %>/cssfixme.min.js'
       }
    });
 };

webcompat/static/js/lib/css-fixme-ui.js

@@ -0,0 +1,26 @@
+/* global doTheBigStyleFixing */
+addEventListener('load', function() {
+
+  function do_fixup() {
+    var csscode = document.getElementsByTagName('textarea')[0].value;
+    var pre = document.getElementById('fixedcss');
+    var compact = document.getElementsByName('compact')[0].checked;
+    doTheBigStyleFixing(csscode, pre, compact);
+  }
+
+  document.getElementById('btn_do_fixup').addEventListener('click', do_fixup, false);
+
+  if (document.getElementsByTagName('textarea')[0].value) {
+    do_fixup();
+  }
+
+  document.getElementById('fixedcss')[0].addEventListener('dblclick', function(e) {
+    window.getSelection().removeAllRanges();
+    var rng = document.createRange();
+    rng.selectNodeContents(document.getElementById('fixedcss')[0]);
+    window.getSelection().addRange(rng);
+    e.preventDefault();
+  }, false);
+
+}, false);
+

webcompat/templates/cssfixme.html

@@ -9,10 +9,11 @@
       <p>Paste CSS in this box to see what needs fixing:</p>
 
       <textarea style="width:100%;height:20rem;"></textarea><br/>
-      <button type="button" onclick="doTheBigStyleFixing(document.getElementsByTagName('textarea')[0].value)">Add standard equivalents for prefixed CSS</button>
+      <button type="button" id="btn_do_fixup">Add standard equivalents for prefixed CSS</button>
       <label>
         <input type="checkbox" name="compact">Compact output (whitespace only after closing brace)</label>
       <pre id="fixedcss"></pre>
+      <script src="/js/cssfixme.min.js"></script>
     </main>
   </div>
 {% endblock %}