New rules: eventsScrollBound & DOMaccessesOnScroll

2015-05-06 22:45:03 +02:00
parent b0c6fe9474
commit f7da653e87
15 changed files with 344 additions and 46 deletions
@@ -82,7 +82,11 @@
  font-size: 3em;
  margin-bottom: 1em;
 }
-.offenders .offenderButton {
+.rule .startTime {
+  display: none;
+}
+.offendersTable .offenderButton,
+.value .offenderButton {
  display: inline-block;
  position: relative;
  background: #efe;
@@ -91,16 +95,19 @@
  border-radius: 0.4em;
  z-index: 1;
 }
-.offenders .offenderButton.opens {
+.offendersTable .offenderButton.opens,
+.value .offenderButton.opens {
  padding-right: 0.75em;
 }
-.offenders .offenderButton.opens:after {
+.offendersTable .offenderButton.opens:after,
+.value .offenderButton.opens:after {
  position: relative;
  left: 0.5em;
  content: '\25BC';
  font-size: 0.8em;
 }
-.offenders .offenderButton > div {
+.offendersTable .offenderButton > div,
+.value .offenderButton > div {
  display: none;
  position: absolute;
  right: 0;
@@ -111,28 +118,35 @@
  border-top: 1px solid #999;
  z-index: 2;
 }
-.offenders .offenderButton .domTree {
+.offendersTable .offenderButton .domTree,
+.value .offenderButton .domTree {
  text-align: left;
  white-space: nowrap;
 }
-.offenders .offenderButton .domTree > div {
+.offendersTable .offenderButton .domTree > div,
+.value .offenderButton .domTree > div {
  margin: 0.5em;
 }
-.offenders .offenderButton .domTree > div div {
+.offendersTable .offenderButton .domTree > div div,
+.value .offenderButton .domTree > div div {
  margin-left: 1em;
 }
-.offenders .offenderButton .backtrace,
-.offenders .offenderButton .cssFileAndLine {
+.offendersTable .offenderButton .backtrace,
+.value .offenderButton .backtrace,
+.offendersTable .offenderButton .cssFileAndLine,
+.value .offenderButton .cssFileAndLine {
  white-space: nowrap;
  padding: 0.5em;
 }
-.offenders .offenderButton.opens:hover {
+.offendersTable .offenderButton.opens:hover,
+.value .offenderButton.opens:hover {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background: #ffe0cc;
  z-index: 2;
 }
-.offenders .offenderButton.opens:hover > div {
+.offendersTable .offenderButton.opens:hover > div,
+.value .offenderButton.opens:hover > div {
  display: block;
  background: #ffe0cc;
 }
@@ -119,6 +119,22 @@
    function getNonJQueryHTML(node, onASingleLine) {
        var type = node.data.type;

+        if (node.windowPerformance) {
+            switch (type) {
+                case 'documentScroll':
+                    return '(triggering the scroll event on <b>document</b>)';
+
+                case 'windowScroll':
+                    return '(triggering the scroll event on <b>window</b>)';
+
+                case 'window.onscroll':
+                    return '(calling the <b>window.onscroll</b> function)';
+
+                default:
+                    return '';
+            }
+        }
+
        if (!node.data.callDetails) {
            return '';
        }
@@ -153,6 +169,18 @@
            case 'error':
                return args[0];

+            case 'jQuery - onDOMReady':
+                return '(function)';
+
+            case 'documentScroll':
+                return 'The scroll event just triggered on document';
+
+            case 'windowScroll':
+                return 'The scroll event just triggered on window';
+
+            case 'window.onscroll':
+                return 'The window.onscroll function just got called';
+
            default:
                return '';
        }
@@ -518,9 +546,6 @@
                }
                break;

-            case 'jQuery - onDOMReady':
-                return '(function)';
-
            default:
                return '';
        }
@@ -674,7 +699,7 @@
        function getProfilerLineHTML(index, node) {
            return  '<div class="index">' + (index + 1) + '</div>' +
                    '<div class="type">' + node.data.type + (node.children ? '<div class="children">' + recursiveChildrenHTML(node) + '</div>' : '') + '</div>' +
-                    '<div class="value offenders">' + getTimelineParamsHTML(node, false) + '</div>' +
+                    '<div class="value">' + getTimelineParamsHTML(node, false) + '</div>' +
                    '<div class="details">' + getTimelineDetailsHTML(node) + '</div>' +
                    '<div class="startTime ' + node.data.loadingStep + '">' + numberWithCommas(node.data.timestamp, 0) + ' ms</div>';
        }
@@ -90,7 +90,11 @@
    }
 }

-.offenders {
+.rule .startTime {
+    display: none;
+}
+
+.offendersTable, .value {
    .offenderButton {
        display: inline-block;
        position: relative;
@@ -47,6 +47,20 @@
                        <b>{{offender.eventName}}</b> bound to <dom-element-button obj="offender.element"></dom-element-button>
                    </div>

+                    <div ng-if="policyName === 'eventsScrollBound'">
+                        <div class="offenderButton" ng-if="offender.backtrace.length == 0">no backtrace</div>
+                        <div class="offenderButton opens" ng-if="offender.backtrace.length > 0">
+                            backtrace
+                            <div class="backtrace">
+                                <div ng-repeat="obj in offender.backtrace track by $index">
+                                    <span ng-if="obj.functionName">{{obj.functionName}}()</span>
+                                    <url-link url="obj.file" max-length="60"></url-link>
+                                    line {{obj.line}}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
                    <div ng-if="policyName === 'jsErrors'">
                        <b>{{offender.error}}</b>
                        <div class="offenderButton" ng-if="offender.backtrace.length == 0">no backtrace</div>
@@ -158,6 +172,19 @@
                <dom-tree tree="rule.offendersObj.tree"></dom-tree>
            </div>

+            <div ng-if="policyName === 'DOMaccessesOnScroll' && rule.offendersObj.children.length > 0">
+                <p>The table below shows the interactions between the JavaScript and the DOM on a scroll event.</p>
+                <div class="table" ng-class="{warningsFilterOn: warningsFilterOn}">
+                    <div class="headers">
+                        <div><!-- index --></div>
+                        <div>Type</div>
+                        <div>Params</div>
+                        <div><!-- details --></div>
+                    </div>
+                    <profiler-line ng-repeat="node in rule.offendersObj.children" data-index="$index" node="node"></profiler-line>
+                </div>
+            </div>
+
            <div ng-if="policyName === 'cssColors' && rule.offendersObj.count > 0">
                <p>This is the colors palette, sized by total occurrences:</p>
                <div class="colorPalette">
@@ -7,8 +7,8 @@
        </select>
    </div>

-    <h2>Javascript Timeline</h2>
-    <p>This graph gives a quick view of when the Javascript interactions with the DOM occur during the loading of the page.</p>
+    <h2>JavaScript Timeline</h2>
+    <p>This graph gives a quick view of when the JavaScript interactions with the DOM occur during the loading of the page.</p>

    <div class="timeline">
        <div class="chart">
@@ -45,7 +45,7 @@
                <div class="domComplete"><div class="color"></div>Page is complete</div>
            </div>
            <div class="tips">
-                <div>Executing Javascript and DOM queries here is a <b>bad practice</b> and slows down the DOM construction.</div>
+                <div>Executing JavaScript and DOM queries here is a <b>bad practice</b> and slows down the DOM construction.</div>
                <div>Some frameworks do things here, but it's not reliable and should be avoided.</div>
                <div>Also known as "document ready". This is where you should execute <b>top-priority</b> scripts, like binding action buttons or launch a video player.</div>
                <div>Here you can execute <b>mid-priority</b> tasks. Loading a script with createElement('script') is one way to do so.</div>
@@ -54,9 +54,9 @@
        </div>
    </div>

-    <h2>Javascript Profiler</h2>
+    <h2>JavaScript Profiler</h2>
    <p>
-        The table below shows the interactions between Javascript and the DOM. It is useful to understand what happens while the page loads.
+        The table below shows the interactions between the JavaScript and the DOM. It is useful to understand what happens while the page loads.
    </p>
    <div class="filters">
        <div>