Replace rules DOMinserts, DOMqueries & eventsBound by DOMaccesses

front/src/views/rule.html

@@ -30,10 +30,6 @@
                     <div ng-if="policyName === 'DOMidDuplicated'">
                         <b>{{offender.id}}</b>: {{offender.occurrences}} occurrences
                     </div>
-
-                    <div ng-if="policyName === 'DOMinserts'">
-                        <dom-element-button obj="offender.insertedElement"></dom-element-button> appended to <dom-element-button obj="offender.receiverElement"></dom-element-button>
-                    </div>
                     
                     <div ng-if="policyName === 'DOMqueriesWithoutResults'">
                         <b>{{offender.query}}</b> (in <dom-element-button obj="offender.context"></dom-element-button>) using {{offender.fn}}
@@ -43,10 +39,6 @@
                         <b>{{offender.query}}</b> (in <dom-element-button obj="offender.context"></dom-element-button>) using {{offender.fn}}: <b>{{offender.count}} queries</b>
                     </div>
 
-                    <div ng-if="policyName === 'eventsBound'">
-                        <b>{{offender.eventName}}</b> bound to <dom-element-button obj="offender.element"></dom-element-button>
-                    </div>
-
                     <div ng-if="policyName === 'eventsScrollBound'">
                         <span ng-if="offender.target == 'window'">Scroll event bound on <b>window</b></span>
                         <span ng-if="offender.target == '#document'">Scroll event bound on <b>document</b></span>
@@ -218,10 +210,14 @@
                     <div ng-repeat="offender in rule.offendersObj.palette" style="background-color: {{offender.color}}; width: {{offender.occurrences * 100 / rule.offendersObj.palette[0].occurrences}}%"><div>{{offender.color}} ({{offender.occurrences}} times)</div></div>
                 </div>
             </div>
-
         </div>
+    </div>
 
+    <div ng-if="policyName === 'DOMaccesses'">
+        <h3>Offenders</h3>
+        Please open the <a href="/result/{{runId}}/timeline">JS timeline</a>
     </div>
+
     <div ng-if="!rule && rule !== null" class="notFound">
         <h2>404</h2>
         Rule "{{policyName}}"" not found

lib/metadata/policies.js

@@ -66,52 +66,14 @@ var policies = {
             };
         }
     },
-    /*"DOMaccesses": {
+    "DOMaccesses": {
         "tool": "jsExecutionTransformer",
         "label": "DOM access",
-        "message": "<p>TODO</p><p>TODO</p>",
+        "message": "<p>This metric counts the number of calls to DOM related functions (both native DOM functions and jQuery functions) on page load.</p><p>The more your JavaScript code accesses the DOM, the slower the page will load.</p><p>Try, as much as possible, to have an HTML page fully generated by the server instead of making changes with JS.</p><p>Try to reduce the number of queries by refactoring your JavaScript code.</p><p>Binding too many events also has a cost. Try to use <a href=\"https://learn.jquery.com/events/event-delegation/\" target=\"_blank\">event delegation</a> as much as possible.</p>",
         "isOkThreshold": 50,
-        "isBadThreshold": 2000,
+        "isBadThreshold": 1500,
         "isAbnormalThreshold": 3000,
-        "hasOffenders": false
-    },*/
-    "DOMinserts": {
-        "tool": "phantomas",
-        "label": "DOM inserts",
-        "message": "<p>Working with the DOM in JavaScript triggers layout calculations and slows down the page.</p><p>Try, as much as possible, to have an HTML page fully generated by the server instead of making changes with JS.</p>",
-        "isOkThreshold": 10,
-        "isBadThreshold": 400,
-        "isAbnormalThreshold": 1000,
-        "hasOffenders": true,
-        "offendersTransformFn": function(offenders) {
-            return {
-                count: offenders.length,
-                list: offenders.map(function(offender) {
-                    var parts = /^"(.*)" ?appended ?to ?"(.*)"$/.exec(offender);
-
-                    if (!parts) {
-                        debug('DOMinserts offenders transform function error with "%s"', offender);
-                        return {
-                            parseError: offender
-                        };
-                    }
-
-                    return {
-                        insertedElement: offendersHelpers.domPathToDomElementObj(parts[1]),
-                        receiverElement: offendersHelpers.domPathToDomElementObj(parts[2])
-                    };
-                })
-            };
-        }
-    },
-    "DOMqueries": {
-        "tool": "phantomas",
-        "label": "DOM queries",
-        "message": "<p>DOM queries are like looking in a large catalog of items. Even if the browsers made progress on the performances of queries, websites often make hundreds of them.</p><p>Try to reduce the number of queries by refactoring your JavaScript code.</p><p>Avoid also to have a read query between two write queries. To be able to reduce the number repaints and optimize performances, browsers buffer the DOM writing operations and treat them in bulk. But each time a DOM reading is asked, the browser needs to empty the buffer. This can be particularly slow inside a loop.</p>",
-        "isOkThreshold": 50,
-        "isBadThreshold": 1000,
-        "isAbnormalThreshold": 2000,
-        "hasOffenders": false
+        "hasOffenders": true
     },
     "DOMqueriesWithoutResults": {
         "tool": "phantomas",
@@ -175,35 +137,6 @@ var policies = {
             };
         }
     },
-    "eventsBound": {
-        "tool": "phantomas",
-        "label": "Events bound",
-        "message": "<p>Binding too many events has a cost.</p><p>It can be avoided by using \"event delegation\". Instead of binding events on each element one by one, events delegation binds them on the top level document element and uses the bubbling principle. It will imperceptibly slow down the event when it occurs, but the loading of the page will speed-up.</p>",
-        "isOkThreshold": 100,
-        "isBadThreshold": 800,
-        "isAbnormalThreshold": 1500,
-        "hasOffenders": true,
-        "offendersTransformFn": function(offenders) {
-            return {
-                count: offenders.length,
-                list: offenders.map(function(offender) {
-                    var parts = /^"(.*)" ?bound ?to ?"(.*)"$/.exec(offender);
-
-                    if (!parts) {
-                        debug('eventsBound offenders transform function error with "%s"', offender);
-                        return {
-                            parseError: offender
-                        };
-                    }
-
-                    return {
-                        eventName: parts[1],
-                        element: offendersHelpers.domPathToDomElementObj(parts[2])
-                    };
-                })
-            };
-        }
-    },
     "eventsScrollBound": {
         "tool": "phantomas",
         "label": "Scroll events bound",

lib/metadata/scoreProfileGeneric.json

@@ -12,11 +12,9 @@
         "domManipulations": {
             "label": "DOM manipulations",
             "policies": {
-                "DOMinserts": 2,
-                "DOMqueries": 1,
-                "DOMqueriesWithoutResults": 2,
-                "DOMqueriesAvoidable": 2,
-                "eventsBound": 1
+                "DOMaccesses": 3,
+                "DOMqueriesWithoutResults": 1,
+                "DOMqueriesAvoidable": 1
             }
         },
         "scroll": {