WEBDIENSTE/YellowLabTools
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improved Summary page

Browse Source
This commit is contained in:
Gaël Métais
2014-09-03 17:21:42 +02:00
parent 61f97f4856
commit 8c260fe5ed
3 changed files with 110 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/node_views/results.html
+59 -30
View File
@@ -39,49 +39,78 @@
<div class="notations">
<div>
<div ng-class="notations.domComplexity">{{notations.domComplexity}}</div>
<div>DOM complexity</div>
<div class="notation">DOM complexity</div>
<div class="criteria">
<ul>
<li ng-if="phantomasResults.metrics.DOMelementsCount">DOM elements count: {{phantomasResults.metrics.DOMelementsCount}}</li>
<li ng-if="phantomasResults.metrics.DOMelementMaxDepth">DOM max depth: {{phantomasResults.metrics.DOMelementMaxDepth}}</li>
<li ng-if="phantomasResults.metrics.iframesCount">Number of iframes: {{phantomasResults.metrics.iframesCount}}</li>
</ul>
</div>
</div>
<div>
<div ng-class="notations.domManipulations">{{notations.domManipulations}}</div>
<div>DOM read and write Requests</div>
</div>
<div>
<div ng-class="notations.eventsBound">{{notations.eventsBound}}</div>
<div>Events bound</div>
<div class="notation">DOM read and write</div>
<div class="criteria">
<ul>
<li ng-if="phantomasResults.metrics.DOMinserts">DOM inserts: {{phantomasResults.metrics.DOMinserts}}</li>
<li ng-if="phantomasResults.metrics.DOMqueries">DOM queries: {{phantomasResults.metrics.DOMqueries}}</li>
<li ng-if="totalJSTime">Time it took: {{totalJSTime}} ms</li>
</ul>
</div>
</div>
<div>
<div ng-class="notations.duplicatedDomQueries">{{notations.duplicatedDomQueries}}</div>
<div>Duplicated DOM queries</div>
<div class="notation">Duplicated DOM queries</div>
<div class="criteria">
<ul>
<li ng-if="duplicatedQueriesCountAll">Avoidable queries: {{duplicatedQueriesCountAll}}</li>
</ul>
</div>
</div>
<div>
<div ng-class="notations.eventsBound">{{notations.eventsBound}}</div>
<div class="notation">Events bound</div>
<div class="criteria">
<ul>
<li ng-if="phantomasResults.metrics.eventsBound">Events bound: {{phantomasResults.metrics.eventsBound}}</li>
</ul>
</div>
</div>
<div>
<div ng-class="notations.badPractices">{{notations.badPractices}}</div>
<div>Evil Javascript</div>
<div class="notation">Evil Javascript</div>
<div class="criteria">
<ul>
<li ng-if="phantomasResults.metrics.jsErrors">Javascript errors: {{phantomasResults.metrics.jsErrors}}</li>
<li ng-if="phantomasResults.metrics.evalCalls">eval calls: {{phantomasResults.metrics.evalCalls}}</li>
<li ng-if="phantomasResults.metrics.documentWriteCalls">document.write calls: {{phantomasResults.metrics.documentWriteCalls}}</li>
<li ng-if="phantomasResults.metrics.consoleMessages">Console messages: {{phantomasResults.metrics.consoleMessages}}</li>
</ul>
</div>
</div>
<div>
<div ng-class="notations.scripts">{{notations.scripts}}</div>
<div class="notation">Scripts loaded</div>
<div class="criteria">
<ul>
<li ng-if="phantomasResults.metrics.jsCount">Scripts count: {{phantomasResults.metrics.jsCount}}</li>
</ul>
</div>
</div>
<div>
<div ng-class="notations.jQueryLoading">{{notations.jQueryLoading}}</div>
<div>jQuery version</div>
<div class="notation">jQuery version</div>
<div class="criteria">
<ul>
<li ng-if="phantomasResults.metrics.jQueryDifferentVersions == 1">jQuery version: {{phantomasResults.metrics.jQueryVersion}}</li>
<li ng-if="phantomasResults.metrics.jQueryDifferentVersions > 1">{{phantomasResults.metrics.jQueryDifferentVersions}} versions loaded:
<span ng-repeat="version in phantomasResults.offenders.jQueryDifferentVersions">{{version}}<span ng-show="!$last"> & </span></span>
</li>
</ul>
</div>
</div>
</div>
<div>Javascript manipulation time: {{totalJSTime}} ms</div>
<div>Javascript onDOMReady time: {{phantomasResults.metrics.domContentLoadedEnd - phantomasResults.metrics.domContentLoaded}} ms</div>
<div>Scripts count: {{phantomasResults.metrics.jsCount}}</div>
<div>DOM elements count: {{phantomasResults.metrics.DOMelementsCount}}</div>
<div>DOM max depth: {{phantomasResults.metrics.DOMelementMaxDepth}}</div>
<div>DOM queries: {{phantomasResults.metrics.DOMqueries}}</div>
<div>DOM inserts: {{phantomasResults.metrics.DOMinserts}}</div>
<div>Duplicated DOM queries: {{phantomasResults.metrics.DOMqueriesDuplicated}}</div>
<div>Events bound: {{phantomasResults.metrics.eventsBound}}</div>
<div>document.write() calls: {{phantomasResults.metrics.documentWriteCalls}}</div>
<div>eval calls: {{phantomasResults.metrics.evalCalls}}</div>
<div>Javascript errors: {{phantomasResults.metrics.jsErrors}}</div>
<div ng-if="phantomasResults.metrics.jQueryDifferentVersions == 1">jQuery version: {{phantomasResults.metrics.jQueryVersion}}</div>
<div ng-if="phantomasResults.metrics.jQueryDifferentVersions > 1">
Number of jQuery versions loaded: {{phantomasResults.metrics.jQueryDifferentVersions}}
(<span ng-repeat="version in phantomasResults.offenders.jQueryDifferentVersions">{{version}}<span ng-show="!$last"> & </span></span>)
</div>
</div>
<div ng-show="view == 'execution' && !phantomasResults.error" class="execution">
@@ -105,7 +134,7 @@
<div>Params</div>
<div><!-- details --></div>
<div>Duration</div>
<div>Start time</div>
<div>Timestamp</div>
</div>
<div ng-repeat="node in javascript.children"
ng-if="(!slowRequestsOn || node.data.time > slowRequestsLimit)
app/public/scripts/resultsCtrl.js
+35 -17
View File
@@ -69,6 +69,7 @@ app.controller('ResultsCtrl', function ($scope) {
duplicatedDomQueries: 'A',
eventsBound: 'A',
badPractices: 'A',
scripts: 'A',
jQueryLoading: 'A'
};
@@ -110,6 +111,23 @@ app.controller('ResultsCtrl', function ($scope) {
$scope.notations.domManipulations = 'F';
}
var duplicatedDomQueries = $scope.duplicatedQueriesCountAll;
if (duplicatedDomQueries > 10) {
$scope.notations.duplicatedDomQueries = 'B';
}
if (duplicatedDomQueries > 50) {
$scope.notations.duplicatedDomQueries = 'C';
}
if (duplicatedDomQueries > 100) {
$scope.notations.duplicatedDomQueries = 'D';
}
if (duplicatedDomQueries > 200) {
$scope.notations.duplicatedDomQueries = 'E';
}
if (duplicatedDomQueries > 500) {
$scope.notations.duplicatedDomQueries = 'F';
}
var eventsBoundScore = $scope.phantomasResults.metrics.eventsBound;
if (eventsBoundScore > 50) {
$scope.notations.eventsBound = 'B';
@@ -127,23 +145,6 @@ app.controller('ResultsCtrl', function ($scope) {
$scope.notations.eventsBound = 'F';
}
var duplicatedDomQueries = $scope.duplicatedQueriesCountAll;
if (duplicatedDomQueries > 20) {
$scope.notations.duplicatedDomQueries = 'B';
}
if (duplicatedDomQueries > 50) {
$scope.notations.duplicatedDomQueries = 'C';
}
if (duplicatedDomQueries > 100) {
$scope.notations.duplicatedDomQueries = 'D';
}
if (duplicatedDomQueries > 200) {
$scope.notations.duplicatedDomQueries = 'E';
}
if (duplicatedDomQueries > 500) {
$scope.notations.duplicatedDomQueries = 'F';
}
var badPracticesScore = $scope.phantomasResults.metrics.documentWriteCalls * 3
+ $scope.phantomasResults.metrics.evalCalls * 3
+ $scope.phantomasResults.metrics.jsErrors * 10
@@ -164,6 +165,23 @@ app.controller('ResultsCtrl', function ($scope) {
$scope.notations.badPractices = 'F';
}
var scriptsScore = $scope.phantomasResults.metrics.jsCount;
if (scriptsScore > 4) {
$scope.notations.scripts = 'B';
}
if (scriptsScore > 8) {
$scope.notations.scripts = 'C';
}
if (scriptsScore > 12) {
$scope.notations.scripts = 'D';
}
if (scriptsScore > 16) {
$scope.notations.scripts = 'E';
}
if (scriptsScore > 20) {
$scope.notations.scripts = 'F';
}
$scope.notations.jQueryLoading = 'NA';
if ($scope.phantomasResults.metrics.jQueryDifferentVersions > 1) {
$scope.notations.jQueryLoading = 'F';
app/public/styles/results.css
+16 -2
View File
@@ -42,10 +42,16 @@ h4 {
.notations {
display: table;
width: 25em;
margin: 0 auto;
width: 40em;
margin-left: 6em;
border-spacing: 0.5em;
}
@media screen and (max-width: 800px) {
.notations {
width: 30em;
margin-left: 0;
}
}
.notations > div {
display: table-row;
}
@@ -53,13 +59,21 @@ h4 {
display: table-cell;
height: 2.5em;
vertical-align: middle;
}
.notations .notation {
font-weight: bold;
text-align: center;
}
.notations .criteria {
padding-top: 0.9em;
font-weight: normal;
}
.notations .A, .notations .B, .notations .C, .notations .D, .notations .E, .notations .F, .notations .NA {
width: 2.5em;
font-size: 2em;
text-align: center;
border-radius: 0.5em;
font-weight: bold;
}
.notations .A {
/* green */