switch scriptSnippets to snippets for Issue #35

Author: bgrins

Rakefile

@@ -42,7 +42,7 @@ task :build do
     end
 
     File.open("snippets.json", "w") do |io|
-        io.write JSON.pretty_generate({ "scriptSnippets" => json_obj })
+        io.write JSON.pretty_generate({ "snippets" => json_obj })
     end
 
 end

index.html

@@ -585,13 +585,12 @@ <h4 id="licence">Licence</h4>
 </pre></div>
 </div><div class='snippet-wrapper' id='insert-css'><div class='snippet'><h3><a href='https://github.com/bgrins/devtools-snippets/tree/master/snippets/insert-css/insert-css.js'>insert-css.js</a> <a href='#insert-css'>#</a> &nbsp; <small style='float:right'><a href='snippets/insert-css/insert-css.js'>(view raw)</a></small></h3>
 
-<p>Defines <code>insertCss()</code> function which injects a snippet of CSS into the current
-page.  After running the snippet, you can call it as follows: <code>insertCss('span { color: red !important; }');</code></p>
+<p>Defines <code>insertCss()</code> function which injects a snippet of CSS into the current page.  After running the snippet, you can call it as follows: <code>insertCss('span { color: red !important; }');</code></p>
 
 <p><a href="snippets/insert-css/insert-css.js"><img src="snippets/insert-css/insert-css.png" alt="snippets/insert-css/insert-css" /></a></p>
 </div><div class="highlight"><pre><span class="c1">// insert-css.js</span>
 <span class="c1">// https://github.com/bgrins/devtools-snippets</span>
-<span class="c1">// Click on an element to print out the closest hash link.</span>
+<span class="c1">// Injects a snippet of CSS into the current page.</span>
 
 <span class="kd">function</span> <span class="nx">insertCss</span><span class="p">(</span><span class="nx">code</span><span class="p">)</span> <span class="p">{</span>
   <span class="kd">var</span> <span class="nx">style</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;style&#39;</span><span class="p">);</span>
@@ -606,9 +605,9 @@ <h4 id="licence">Licence</h4>
 <span class="p">}</span>
 
 <span class="c1">// Feel free to extend this snippet with your favorite CSS snippets.</span>
-<span class="c1">// Here&#39;s an example; which makes the current page high contrast.</span>
+<span class="c1">// Here&#39;s an example which makes the current page high contrast.</span>
 <span class="c1">// Notice the trailing backslashes, used to define multiline strings.</span>
-<span class="nx">insertCssHighContrast</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+<span class="kd">function</span> <span class="nx">insertCssHighContrast</span><span class="p">()</span> <span class="p">{</span>
   <span class="kd">var</span> <span class="nx">css</span> <span class="o">=</span> <span class="s1">&#39;\</span>
 <span class="s1">    * { background: white ! important; color: black !important } \</span>
 <span class="s1">    :link, :link * { color: #0000EE !important } \</span>

snippets.json

@@ -1,5 +1,5 @@
 {
-  "scriptSnippets": [
+  "snippets": [
     {
       "name": "allcolors",
       "content": "// allcolors.js\n// https://github.com/bgrins/devtools-snippets\n// Print out CSS colors used in elements on the page.\n\n(function () {\n  var allColors = {};\n  var props = [\"background-color\", \"color\", \"border-top-color\", \"border-right-color\", \"border-bottom-color\", \"border-left-color\"];\n  var skipColors = { \"rgb(0, 0, 0)\": 1, \"rgba(0, 0, 0, 0)\": 1, \"rgb(255, 255, 255)\": 1 };\n\n  [].forEach.call(document.querySelectorAll(\"*\"), function (node) {\n    var nodeColors = {};\n    props.forEach(function (prop) {\n      var color = window.getComputedStyle(node, null).getPropertyValue(prop);\n      if (color && !skipColors[color]) {\n        if (!allColors[color]) {\n          allColors[color] = {\n            count: 0,\n            nodes: []\n          };\n        }\n        if (!nodeColors[color]) {\n          allColors[color].count++;\n          allColors[color].nodes.push(node);\n        }\n        nodeColors[color] = true;\n      }\n    });\n  });\n\n  var allColorsSorted = [];\n  for (var i in allColors) {\n    allColorsSorted.push({\n      key: i,\n      value: allColors[i]\n    });\n  }\n  allColorsSorted = allColorsSorted.sort(function (a, b) {\n    return b.value.count - a.value.count;\n  });\n\n  var nameStyle = \"font-weight:normal;\";\n  var countStyle = \"font-weight:bold;\";\n  var colorStyle = function (color) {\n    return \"background:\" + color + \";color:\" + color + \";border:1px solid #333;\";\n  };\n\n  console.group(\"All colors used in elements on the page\");\n  allColorsSorted.forEach(function (c) {\n    console.groupCollapsed(\"%c    %c \" + c.key + \" %c(\" + c.value.count + \" times)\",\n      colorStyle(c.key), nameStyle, countStyle);\n    c.value.nodes.forEach(function (node) {\n      console.log(node);\n    });\n    console.groupEnd();\n  });\n  console.groupEnd(\"All colors used in elements on the page\");\n})();\n"
@@ -38,7 +38,7 @@
     },
     {
       "name": "insert-css",
-      "content": "// insert-css.js\n// https://github.com/bgrins/devtools-snippets\n// Click on an element to print out the closest hash link.\n\nfunction insertCss(code) {\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (style.styleSheet) {  // IE\n    style.styleSheet.cssText = code;\n  } else { // Other browsers\n    style.innerHTML = code;\n  }\n  document.getElementsByTagName(\"head\")[0].appendChild( style );\n}\n\n// Feel free to extend this snippet with your favorite CSS snippets.\n// Here's an example; which makes the current page high contrast.\n// Notice the trailing backslashes, used to define multiline strings.\ninsertCssHighContrast = function() {\n  var css = '\\\n    * { background: white ! important; color: black !important } \\\n    :link, :link * { color: #0000EE !important } \\\n    :visited, :visited * { color: #551A8B !important } \\\n  ';\n    insertCss(css);\n}\n"
+      "content": "// insert-css.js\n// https://github.com/bgrins/devtools-snippets\n// Injects a snippet of CSS into the current page.\n\nfunction insertCss(code) {\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (style.styleSheet) {  // IE\n    style.styleSheet.cssText = code;\n  } else { // Other browsers\n    style.innerHTML = code;\n  }\n  document.getElementsByTagName(\"head\")[0].appendChild( style );\n}\n\n// Feel free to extend this snippet with your favorite CSS snippets.\n// Here's an example which makes the current page high contrast.\n// Notice the trailing backslashes, used to define multiline strings.\nfunction insertCssHighContrast() {\n  var css = '\\\n    * { background: white ! important; color: black !important } \\\n    :link, :link * { color: #0000EE !important } \\\n    :visited, :visited * { color: #551A8B !important } \\\n  ';\n    insertCss(css);\n}\n"
     },
     {
       "name": "jquerify",