Merge branch 'sreekanth67-master'

Author: bgrins

index.html

@@ -150,7 +150,7 @@ <h2>A collection of helpful snippets to use inside of browser devtools</h2>
     <span class="k">return</span> <span class="s2">&quot;background:&quot;</span> <span class="o">+</span> <span class="nx">color</span> <span class="o">+</span> <span class="s2">&quot;;color:&quot;</span> <span class="o">+</span> <span class="nx">color</span> <span class="o">+</span> <span class="s2">&quot;;border:1px solid #333;&quot;</span><span class="p">;</span>
   <span class="p">};</span>
 
-  <span class="nx">console</span><span class="p">.</span><span class="nx">group</span><span class="p">(</span><span class="s2">&quot;All colors used in elements on the page: &quot;</span> <span class="o">+</span> <span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">href</span><span class="p">);</span>
+  <span class="nx">console</span><span class="p">.</span><span class="nx">group</span><span class="p">(</span><span class="s2">&quot;Total colors used in elements on the page: &quot;</span> <span class="o">+</span> <span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">href</span> <span class="o">+</span> <span class="s2">&quot; are &quot;</span> <span class="o">+</span> <span class="nx">allColorsSorted</span><span class="p">.</span><span class="nx">length</span><span class="p">);</span>
   <span class="nx">allColorsSorted</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">c</span><span class="p">)</span> <span class="p">{</span>
     <span class="nx">console</span><span class="p">.</span><span class="nx">groupCollapsed</span><span class="p">(</span><span class="s2">&quot;%c    %c &quot;</span> <span class="o">+</span> <span class="nx">c</span><span class="p">.</span><span class="nx">key</span> <span class="o">+</span> <span class="s2">&quot; &quot;</span> <span class="o">+</span> <span class="nx">c</span><span class="p">.</span><span class="nx">hexValue</span> <span class="o">+</span> <span class="s2">&quot; %c(&quot;</span> <span class="o">+</span> <span class="nx">c</span><span class="p">.</span><span class="nx">value</span><span class="p">.</span><span class="nx">count</span> <span class="o">+</span> <span class="s2">&quot; times)&quot;</span><span class="p">,</span>
       <span class="nx">colorStyle</span><span class="p">(</span><span class="nx">c</span><span class="p">.</span><span class="nx">key</span><span class="p">),</span> <span class="nx">nameStyle</span><span class="p">,</span> <span class="nx">countStyle</span><span class="p">);</span>

snippets.json

@@ -2,7 +2,7 @@
   "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  // Should include colors from elements that have a border color but have a zero width?\n  var includeBorderColorsWithZeroWidth = false;\n\n  var allColors = {};\n  var props = [\"background-color\", \"color\", \"border-top-color\", \"border-right-color\", \"border-bottom-color\", \"border-left-color\"];\n  var skipColors = {\n    \"rgb(0, 0, 0)\": 1,\n    \"rgba(0, 0, 0, 0)\": 1,\n    \"rgb(255, 255, 255)\": 1\n  };\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        thisIsABorderProperty = (prop.indexOf(\"border\") != -1),\n        notBorderZero = thisIsABorderProperty ? window.getComputedStyle(node, null).getPropertyValue(prop.replace(\"color\", \"width\")) !== \"0px\" : true,\n        colorConditionsMet;\n\n      if (includeBorderColorsWithZeroWidth) {\n        colorConditionsMet = color && !skipColors[color];\n      } else {\n        colorConditionsMet = color && !skipColors[color] && notBorderZero;\n      }\n\n      if (colorConditionsMet) {\n        if (!allColors[color]) {\n          allColors[color] = {\n            count: 0,\n            nodes: []\n          };\n        }\n\n        if (!nodeColors[color]) {\n          allColors[color].count++;\n          allColors[color].nodes.push(node);\n        }\n\n        nodeColors[color] = true;\n      }\n    });\n  });\n\n  function rgbTextToRgbArray(rgbText) {\n    return rgbText.replace(/\\s/g, \"\").match(/\\d+,\\d+,\\d+/)[0].split(\",\").map(function(num) {\n      return parseInt(num, 10);\n    });\n  }\n\n  function componentToHex(c) {\n    var hex = c.toString(16);\n    return hex.length == 1 ? \"0\" + hex : hex;\n  }\n\n  function rgbToHex(rgbArray) {\n    var r = rgbArray[0],\n      g = rgbArray[1],\n      b = rgbArray[2];\n    return \"#\" + componentToHex(r) + componentToHex(g) + componentToHex(b);\n  }\n\n  var allColorsSorted = [];\n  for (var i in allColors) {\n    var rgbArray = rgbTextToRgbArray(i);\n    var hexValue = rgbToHex(rgbArray);\n\n    allColorsSorted.push({\n      key: i,\n      value: allColors[i],\n      hexValue: hexValue\n    });\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  function colorStyle(color) {\n    return \"background:\" + color + \";color:\" + color + \";border:1px solid #333;\";\n  };\n\n  console.group(\"All colors used in elements on the page: \" + window.location.href);\n  allColorsSorted.forEach(function (c) {\n    console.groupCollapsed(\"%c    %c \" + c.key + \" \" + c.hexValue + \" %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})();\n"
+      "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  // Should include colors from elements that have a border color but have a zero width?\n  var includeBorderColorsWithZeroWidth = false;\n\n  var allColors = {};\n  var props = [\"background-color\", \"color\", \"border-top-color\", \"border-right-color\", \"border-bottom-color\", \"border-left-color\"];\n  var skipColors = {\n    \"rgb(0, 0, 0)\": 1,\n    \"rgba(0, 0, 0, 0)\": 1,\n    \"rgb(255, 255, 255)\": 1\n  };\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        thisIsABorderProperty = (prop.indexOf(\"border\") != -1),\n        notBorderZero = thisIsABorderProperty ? window.getComputedStyle(node, null).getPropertyValue(prop.replace(\"color\", \"width\")) !== \"0px\" : true,\n        colorConditionsMet;\n\n      if (includeBorderColorsWithZeroWidth) {\n        colorConditionsMet = color && !skipColors[color];\n      } else {\n        colorConditionsMet = color && !skipColors[color] && notBorderZero;\n      }\n\n      if (colorConditionsMet) {\n        if (!allColors[color]) {\n          allColors[color] = {\n            count: 0,\n            nodes: []\n          };\n        }\n\n        if (!nodeColors[color]) {\n          allColors[color].count++;\n          allColors[color].nodes.push(node);\n        }\n\n        nodeColors[color] = true;\n      }\n    });\n  });\n\n  function rgbTextToRgbArray(rgbText) {\n    return rgbText.replace(/\\s/g, \"\").match(/\\d+,\\d+,\\d+/)[0].split(\",\").map(function(num) {\n      return parseInt(num, 10);\n    });\n  }\n\n  function componentToHex(c) {\n    var hex = c.toString(16);\n    return hex.length == 1 ? \"0\" + hex : hex;\n  }\n\n  function rgbToHex(rgbArray) {\n    var r = rgbArray[0],\n      g = rgbArray[1],\n      b = rgbArray[2];\n    return \"#\" + componentToHex(r) + componentToHex(g) + componentToHex(b);\n  }\n\n  var allColorsSorted = [];\n  for (var i in allColors) {\n    var rgbArray = rgbTextToRgbArray(i);\n    var hexValue = rgbToHex(rgbArray);\n\n    allColorsSorted.push({\n      key: i,\n      value: allColors[i],\n      hexValue: hexValue\n    });\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  function colorStyle(color) {\n    return \"background:\" + color + \";color:\" + color + \";border:1px solid #333;\";\n  };\n\n  console.group(\"Total colors used in elements on the page: \" + window.location.href + \" are \" + allColorsSorted.length);\n  allColorsSorted.forEach(function (c) {\n    console.groupCollapsed(\"%c    %c \" + c.key + \" \" + c.hexValue + \" %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})();\n"
     },
     {
       "name": "cachebuster",

snippets/allcolors/allcolors.js

@@ -86,7 +86,7 @@
     return "background:" + color + ";color:" + color + ";border:1px solid #333;";
   };
 
-  console.group("All colors used in elements on the page: " + window.location.href);
+  console.group("Total colors used in elements on the page: " + window.location.href + " are " + allColorsSorted.length);
   allColorsSorted.forEach(function (c) {
     console.groupCollapsed("%c    %c " + c.key + " " + c.hexValue + " %c(" + c.value.count + " times)",
       colorStyle(c.key), nameStyle, countStyle);