Adding pointer-events_touch-events recipe.

cssUsage.src.js

@@ -437,63 +437,63 @@ function getPatternUsage(results, domClasses, cssClasses) {
 
     return results;
 }
-void function() {
-
-    window.HtmlUsage = {};
-
-    // This function has been added to the elementAnalyzers in
-    // CSSUsage.js under onready()
-    // <param name="element"> is an HTMLElement passed in by elementAnalyzers
-    window.HtmlUsage.GetNodeName = function (element) {
-
-        // If the browser doesn't recognize the element - throw it away
-        if(element instanceof HTMLUnknownElement) {
-            return;
-        }
-
-        var node = element.nodeName;
-
-        var tags = HtmlUsageResults.tags || (HtmlUsageResults.tags = {});
-        var tag = tags[node] || (tags[node] = 0);
-        tags[node]++;
-
-        GetAttributes(element, node);
-    }
-
-    function GetAttributes(element, node) {
-        for(var i = 0; i < element.attributes.length; i++) {
-            var att = element.attributes[i];
-
-            if(IsValidAttribute(element, att.nodeName)) {
-                var attributes = HtmlUsageResults.attributes || (HtmlUsageResults.attributes = {});
-                var attribute = attributes[att.nodeName] || (attributes[att.nodeName] = {});
-                var attributeTag = attribute[node] || (attribute[node] = {count: 0});             
-                attributeTag.count++;
-            }
-        }
-    }
-
-    function IsValidAttribute(element, attname) {
-        // We need to convert className
-        if(attname == "class") {
-            attname = "className";
-        } 
-
-        if(attname == "classname") {
-            return false;
-        }
-
-        // Only keep attributes that are not data
-        if(attname.indexOf('data-') != -1) {
-            return false;
-        }
-
-        if(typeof(element[attname]) == "undefined") {
-            return false;
-        }
-
-        return true;
-    }
+void function() {
+
+    window.HtmlUsage = {};
+
+    // This function has been added to the elementAnalyzers in
+    // CSSUsage.js under onready()
+    // <param name="element"> is an HTMLElement passed in by elementAnalyzers
+    window.HtmlUsage.GetNodeName = function (element) {
+
+        // If the browser doesn't recognize the element - throw it away
+        if(element instanceof HTMLUnknownElement) {
+            return;
+        }
+
+        var node = element.nodeName;
+
+        var tags = HtmlUsageResults.tags || (HtmlUsageResults.tags = {});
+        var tag = tags[node] || (tags[node] = 0);
+        tags[node]++;
+
+        GetAttributes(element, node);
+    }
+
+    function GetAttributes(element, node) {
+        for(var i = 0; i < element.attributes.length; i++) {
+            var att = element.attributes[i];
+
+            if(IsValidAttribute(element, att.nodeName)) {
+                var attributes = HtmlUsageResults.attributes || (HtmlUsageResults.attributes = {});
+                var attribute = attributes[att.nodeName] || (attributes[att.nodeName] = {});
+                var attributeTag = attribute[node] || (attribute[node] = {count: 0});             
+                attributeTag.count++;
+            }
+        }
+    }
+
+    function IsValidAttribute(element, attname) {
+        // We need to convert className
+        if(attname == "class") {
+            attname = "className";
+        } 
+
+        if(attname == "classname") {
+            return false;
+        }
+
+        // Only keep attributes that are not data
+        if(attname.indexOf('data-') != -1) {
+            return false;
+        }
+
+        if(typeof(element[attname]) == "undefined") {
+            return false;
+        }
+
+        return true;
+    }
 }();
 void function() { try {
 
@@ -955,15 +955,14 @@ void function() { try {
 						var matchedElements = [element];
 						runRuleAnalyzers(element.style, selectorText, matchedElements, ruleType, isInline);					
 					}
-				} else { // We've already walked the DOM crawler and need to run the recipes
-					for(var r = 0; r < recipesToRun.length ; r++) {
-						var recipeToRun = recipesToRun[r];
-						var results = RecipeResults[recipeToRun.name] || (RecipeResults[recipeToRun.name]={});
-						recipeToRun(element, results, true);
-					}
 				}
 			}
-
+			// We've already walked the DOM crawler and need to run the recipes
+			for(var r = 0; r < recipesToRun.length ; r++) {
+				var recipeToRun = recipesToRun[r];
+				var results = RecipeResults[recipeToRun.name] || (RecipeResults[recipeToRun.name]={});
+				recipeToRun(elements, results, true);
+			}
 		}
 
 		/**
@@ -1782,32 +1781,128 @@ void function() { try {
 } catch (ex) { /* do something maybe */ throw ex; } }();
 
 /* 
-    RECIPE: z-index on static flex items
+    RECIPE: Pointer events and touch events listening counter
     -------------------------------------------------------------
-    Author: Francois Remy
-    Description: Get count of flex items who should create a stacking context but do not really
+    Author: joevery
+    Description: Find instances of listening for pointer and touch events.
 */
 
-void function() {
+void function ()
+{
+    window.CSSUsage.StyleWalker.recipesToRun.push(
+        function pointer_events_touch_events(/*HTML DOM Element*/ element, results)
+        {
+            var nodeName = element.nodeName;
+
+            if (nodeName !== undefined) {
+                // We want to catch all instances of listening for these events.
+                var eventsToCheckFor = ["pointerup", "pointerdown", "pointermove", "pointercancel", "pointerout", "pointerleave", "pointerenter", "pointerover",
+                    "touchstart", "touchend", "touchmove", "touchcancel"];
+
+                var JsTypes =
+                    {
+                        ATTRIBUTE: 1,
+                        INTERNAL: 2,
+                        EXTERNAL: 3,
+                    }
+
+                var jsType;
+
+                // Is element a script tag?
+                if (nodeName === "SCRIPT") {
+                    // If no text, then it cannot be an internal script.
+                    if (element.text !== undefined && element.text !== "") {
+                        jsType = JsTypes.INTERNAL;
+                    }
+                    // if no source, then it cannot be an external script. 
+                    else if (element.src !== undefined) {
+                        // if external script, then we have to go and get it, if it is not our recipe script or the src is not blank.
+                        if (element.src.includes("Recipe.min.js") || element.src === "") {
+                            return results;
+                        }
+                        else {
+                            jsType = JsTypes.EXTERNAL;
+
+                            var xhr = new XMLHttpRequest();
+                            xhr.open("GET", element.src, false);
+                            xhr.send();
+                            if (xhr.status !== 200) {
+                                // We no longer want to check this element if there was a problem in making request.
+                                return results;
+                            }
+                        }
+                    }
+                }
+                // If element is not a script tag, then we will assume that if listening for pointerevents is present that it will be in the form of an attribute.
+                else {
+                    jsType = JsTypes.ATTRIBUTE;
+                }
+
+                for (const event of eventsToCheckFor) {
+                    switch (jsType) {
+                        case JsTypes.ATTRIBUTE:
+                            // Attribute specified on element does not seem to work at present, but checking anyway.
+                            if (element.attributes["on" + event] !== undefined) {
+                                results[event] = results[event] || { count: 0, };
+                                results[event].count++;
+                            }
+                            break;
+
+                        case JsTypes.INTERNAL:
+                            // Check for one instance if none present then abandon.
+                            if (element.text.indexOf(event) !== -1) {
+                                results[event] = results[event] || { count: 0, };
+                                results[event].count += findNumOfStringInstancesInText_CaseSensitive(event, element.text);
+                            }
+                            break;
+
+                        case JsTypes.EXTERNAL:
+                            // Check for one instance if none present then abandon.
+                            if (xhr.responseText.indexOf(event) !== -1) {
+                                results[event] = results[event] || { count: 0, };
+                                results[event].count += findNumOfStringInstancesInText_CaseSensitive(event, xhr.responseText);
+                            }
+                            break;
+                    }
+                }
+
+                return results;
+            }
+        });
 
-    window.CSSUsage.StyleWalker.recipesToRun.push( function zstaticflex(/*HTML DOM Element*/ element, results) {
-        if(!element.parentElement) return;
+    function findNumOfStringInstancesInText_CaseSensitive(string, text)
+    {
+        var regex = new RegExp(string, 'g');
+        var instances = text.match(regex);
 
-        // the problem happens if the element is a flex item with static position and non-auto z-index
-        if(getComputedStyle(element.parentElement).display != 'flex') return results;
-        if(getComputedStyle(element).position != 'static') return results;
-        if(getComputedStyle(element).zIndex != 'auto') {
-            results.likely = 1;
-        }
+        return instances.length;
+    }
+}();
+/* 
+    RECIPE: Fiddler proxy tester
+    -------------------------------------------------------------
+    Author: Mustapha Jaber
+    Description: Use Fiddler to check usage of getElementById on the web.
+*/
 
-        // the problem might happen if z-index could ever be non-auto
-        if(element.CSSUsage["z-index"] && element.CSSUsage["z-index"].valuesArray.length > 0) {
-            results.possible = 1;
-        }
+window.apiCount = 0;
+window.alert = function (alert) {
+    return function (string) {
+        window.apiCount++;
+        return alert(string);
+    };
+}(window.alert);
 
+void function() {
+    window.CSSUsage.StyleWalker.recipesToRun.push( function testFiddler(/*HTML DOM Elements*/ elements, results) {
+        var recipeName = "alert"
+        if(window.apiCount > 0)
+        {
+            results[recipeName] = results[recipeName] || { count: 0, };
+            results[recipeName].count = window.apiCount;
+        }return results;
     });
 }();
-
 //
 // This file is only here to create the TSV
 // necessary to collect the data from the crawler

src/cssUsage.js

@@ -458,15 +458,14 @@ void function() { try {
 						var matchedElements = [element];
 						runRuleAnalyzers(element.style, selectorText, matchedElements, ruleType, isInline);					
 					}
-				} else { // We've already walked the DOM crawler and need to run the recipes
-					for(var r = 0; r < recipesToRun.length ; r++) {
-						var recipeToRun = recipesToRun[r];
-						var results = RecipeResults[recipeToRun.name] || (RecipeResults[recipeToRun.name]={});
-						recipeToRun(element, results, true);
-					}
 				}
 			}
-
+			// We've already walked the DOM crawler and need to run the recipes
+			for(var r = 0; r < recipesToRun.length ; r++) {
+				var recipeToRun = recipesToRun[r];
+				var results = RecipeResults[recipeToRun.name] || (RecipeResults[recipeToRun.name]={});
+				recipeToRun(elements, results, true);
+			}
 		}
 
 		/**

src/fiddler-debug/get-element.js

@@ -0,0 +1,53 @@
+window.debugCSSUsage = true
+
+window.apiCount = 0;
+
+document._oldGetElementById = document.getElementById;
+document.getElementById = function(elemIdOrName) {
+    window.apiCount++;
+    return document._oldGetElementById(elemIdOrName);
+};
+
+void function() {
+    console.log("PIN1")
+    document.addEventListener('DOMContentLoaded', function () {
+        console.log("PIN2")
+        var results = {};
+        var recipeName = "getelem"
+
+        if(window.apiCount > 0)
+        {
+            results[recipeName] = results[recipeName] || { count: 0, href: location.href };
+            results[recipeName].count = window.apiCount;
+        }
+        else
+        {
+            results[recipeName] = results[recipeName] || { href: location.href };
+        }
+        console.log("PIN3")
+        appendResults(results);
+
+        // Add it to the document dom
+        function appendResults(results) {
+            if(window.debugCSSUsage) console.log("Trying to append");
+            var output = document.createElement('script');
+            output.id = "css-usage-tsv-results";
+            output.textContent = JSON.stringify(results);
+            output.type = 'text/plain';
+            document.querySelector('head').appendChild(output);
+            var successfulAppend = checkAppend();
+        }
+
+        function checkAppend() {
+            if(window.debugCSSUsage) console.log("Checking append");
+            var elem = document.getElementById('css-usage-tsv-results');
+            if(elem === null) {
+                if(window.debugCSSUsage) console.log("Element not appended");
+            }
+            else {
+                if(window.debugCSSUsage) console.log("Element successfully found");
+            }
+        }
+
+    });
+}();