Merge pull request #81 from gmetais/develop

v1.6.0

.travis.yml

@@ -3,6 +3,4 @@ node_js:
     - "0.10.33"
 before_install:
     - "npm install -g grunt-cli"
-    - "npm install -g phantomjs"
-install: npm install
-before_script: grunt test
+install: npm install

Gruntfile.js

@@ -11,17 +11,18 @@ module.exports = function(grunt) {
         pkg: grunt.file.readJSON('package.json'),
         settings: grunt.file.readJSON('./server_config/settings.json'),
         
-        font: {
+        webfont: {
             icons: {
-                src: ['front/src/fonts/svg-icons/*.svg'],
-                destCss: 'front/src/less/icons.less',
-                destFonts: 'front/src/fonts/icons.woff',
-
-                // Optional: Custom routing of font filepaths for CSS
-                cssRouter: function (fontpath) {
-                    var pathArray = fontpath.split('/');
-                    var fileName = pathArray[pathArray.length - 1];
-                    return '/fonts/' + fileName;
+                src: 'front/src/fonts/svg-icons/*.svg',
+                dest: 'tmp',
+                destCss: 'front/src/less',
+                options: {
+                    engine: 'node',
+                    types: 'woff',
+                    stylesheet: 'less',
+                    embed: true,
+                    htmlDemo: false,
+                    syntax: 'bootstrap'
                 }
             }
         },
@@ -66,7 +67,9 @@ module.exports = function(grunt) {
                 'app/nodeControllers/*.js',
                 'app/public/scripts/*.js',
                 'phantomas_custom/**/*.js',
-                'test/**/*.js',
+                'test/api/*.js',
+                'test/core/*.js',
+                'test/fixtures/*.js',
                 'front/src/js/**/*.js'
             ]
         },
@@ -92,15 +95,14 @@ module.exports = function(grunt) {
             },
             coverage: {
                 files: [
-                    {src: ['test/**'], dest: 'coverage/'},
-                    {src: ['lib/metadata/**'], dest: 'coverage/'},
-                    {src: ['node_modules/phantomas/**'], dest: 'coverage/'},
-                    {src: ['lib/tools/phantomas/custom_modules/**'], dest: 'coverage/'}
+                    {cwd: 'test', src: '**/*', dest: 'coverage/test', expand: true},
+                    {cwd: 'lib/metadata', src: '**/*', dest: 'coverage/lib/metadata', expand: true},
+                    {cwd: 'node_modules/phantomas', src: '**/*', dest: 'coverage/node_modules/phantomas', expand: true},
+                    {cwd: 'lib/tools/phantomas/custom_modules', src: '**/*', dest: 'coverage/lib/tools/phantomas/custom_modules', expand: true}
                 ]
             },
             build: {
                 files: [
-                    {src: ['./front/src/fonts/icons.woff'], dest: './front/build/fonts/icons.woff'},
                     {src: ['./front/src/img/favicon.png'], dest: './front/build/img/favicon.png'},
                     {src: ['./front/src/img/logo-large.png'], dest: './front/build/img/logo-large.png'},
                 ]
@@ -156,7 +158,7 @@ module.exports = function(grunt) {
             dev: {
                 NODE_ENV: 'development'
             },
-            builded: {
+            built: {
                 NODE_ENV: 'production'
             }
         },
@@ -169,7 +171,7 @@ module.exports = function(grunt) {
                     showStack: true
                 }
             },
-            builded: {
+            built: {
                 options: {
                     port: 8383,
                     server: './bin/server.js',
@@ -209,16 +211,14 @@ module.exports = function(grunt) {
             html: './front/build/main.html',
             css: './front/build/css/*.css',
             options: {
-                assetsDirs: ['front/build'],
-                patterns: {
-                    css: [[/(\/fonts\/icons\.woff)/gm, 'Replacing reference to icons.woff']]
-                }
+                assetsDirs: ['front/build']
             }
         },
         htmlmin: {
             options: {
                 removeComments: true,
-                collapseWhitespace: true
+                collapseWhitespace: true,
+                conservativeCollapse: true
             },
             main: {
                 files: [{
@@ -291,7 +291,7 @@ module.exports = function(grunt) {
 
 
     grunt.registerTask('icons', [
-        'font:icons',
+        'webfont:icons',
         'less',
         'clean:tmp'
     ]);
@@ -323,9 +323,9 @@ module.exports = function(grunt) {
         'express:dev'
     ]);
 
-    grunt.registerTask('builded', [
-        'env:builded',
-        'express:builded'
+    grunt.registerTask('built', [
+        'env:built',
+        'express:built'
     ]);
 
     grunt.registerTask('test', [

README.md

@@ -1,36 +1,73 @@
-# Yellow Lab Tools
+<img src="./doc/img/logo.png" alt="Yellow Lab Tools"></img>
 
-Online tool that lets you test a webpage and detects **performance** and **front-end code quality** issues.
-
-[![Dependency Status](https://gemnasium.com/gmetais/YellowLabTools.svg)](https://gemnasium.com/gmetais/YellowLabTools) [![Build Status](https://travis-ci.org/gmetais/YellowLabTools.svg?branch=master)](https://travis-ci.org/gmetais/YellowLabTools)
+Analyzes a webpage and detects **performance** or **front-end code quality** issues. Easy to launch, easy to understand, in-depth details.
 
 
-### Access the tool here: [http://yellowlab.tools](http://yellowlab.tools)
+#  
+
+<img src="./doc/img/commandment.png" alt="No website should go live without being tested with Yellow Lab Tools"></img>
+
+<table>
+    <tr>
+        <td width="70%">
+            The <b>online tool</b> (recommended): 
+            <a href="http://yellowlab.tools" target="_blank">http://yellowlab.tools</a>
+        </td>
+        <td width="30%">
+            <img src="./doc/img/YLT-animated.gif"></img>
+        </td>
+    </tr>
+    <tr>
+        <td width="70%">
+            The <b>CLI</b> (Command Line Interface) - <a href="https://github.com/gmetais/YellowLabTools/wiki/Command-Line-Interface" target="_blank">Doc here</a>
+        </td>
+        <td width="30%">
+            <img src="./doc/img/YLT-cli-animated.gif"></img>
+        </td>
+    </tr>
+    <tr>
+        <td width="70%">
+            The <b>Grunt task</b>: <a href="https://github.com/gmetais/grunt-yellowlabtools" traget="_blank">gmetais/grunt-yellowlabtools</a>
+            <br>For developers or Continuous Integration
+        </td>
+        <td width="30%">
+            <img src="./doc/img/grunt-logo.png"></img>
+        </td>
+    </tr>
+    <tr>
+        <td width="70%">
+            The <b>NodeJS</b> package - <a href="https://github.com/gmetais/YellowLabTools/wiki/NodeJS-module" target="_blank">Doc here</a>
+        </td>
+        <td width="30%">
+            <img src="./doc/img/npm-logo.png"></img>
+        </td>
+    </tr>
+    <tr>
+        <td width="70%">
+            The <b>public API</b> - <a href="https://github.com/gmetais/YellowLabTools/wiki/Public-API" target="_blank">Doc here</a>
+            <br>
+            Allows you to launch runs from any language
+        </td>
+        <td width="30%">
+            <img src="./doc/img/api-logo.png"></img>
+        </td>
+    </tr>
+</table>
 
-![example dashboard screenshot](screenshot.png)
 
 
 ## How it works
 
-The tool loads the given URL via [PhantomasJS](http://phantomjs.org/) (a headless browser) and collects various metrics and statistics with the help of [Phantomas](https://github.com/macbre/phantomas). These metrics are categorized and transformed into scores. It also gives in-depth details so developpers can correct the detected issues.
+The tool loads the given URL via [PhantomJS](http://phantomjs.org/) (a headless browser) and collects various metrics and statistics with the help of [Phantomas](https://github.com/macbre/phantomas). These metrics are then categorized and transformed into scores. It also gives in-depth details so developpers can fix the detected issues.
 
 By the way, it's free because we are geeks, not businessmen. All we want is a ★ on GitHub, it will boost our motivation to add more awesome features!!!
 
+![example dashboard screenshot](./doc/img/screenshot.png)
 
-## Different ways to use YLT
 
-#### The web interface:
-This is the best way to discover the tool: [http://yellowlab.tools](http://yellowlab.tools).  
-Please note the server is hosted in Baltimore, USA.
+## Test your localhost
 
-#### The Command Line Client:
-Might be useful if you want to build an automation tool. The documentation is [here](https://github.com/gmetais/YellowLabTools/wiki/Command-Line-Interface).
-
-#### The NPM module:
-Can be used to build automation tools in NodeJS. The documentation is [here](https://github.com/gmetais/YellowLabTools/wiki/NodeJS-module).
-
-#### The Public API:
-Hosted on our http://yellowlab.tools server, it is a RESTful API that allows you to launch distant tests. The documentation is [here](https://github.com/gmetais/YellowLabTools/wiki/Public-API).
+You can use [ngrok](https://ngrok.com/), a tool that creates a secure tunnel between your localhost and the online tool (or the public API). You can also use the CLI or the Grunt tasks as they run on your machine.
 
 
 ## Install your own private instance
@@ -38,18 +75,16 @@ Hosted on our http://yellowlab.tools server, it is a RESTful API that allows you
 If your project is not accessible from outside, or if you want to fork and improve the tool, you can build your own instance. The documentation is [here](https://github.com/gmetais/YellowLabTools/wiki/Install-your-private-server).
 
 
-## Help needed
-
+## Help needed!
 There are so many things left to do, **your help would be greatly appreciated**! Please report bugs, ask for evolutions and come code with me.
 
 
 ## License
-Please read the [license](LICENSE).  
-Icons are the property of [IcoMoon.io](https://icomoon.io/)
+Please read the [license](LICENSE). Icons are the property of [IcoMoon.io](https://icomoon.io/)
 
 
 ## Author
-Gaël Métais. I'm a webperf freelance based in Paris. If you understand french, you can visit [my website](http://www.gaelmetais.com).
+Gaël Métais. I'm a webperf freelance based in Paris. If you understand French, you can visit [my website](http://www.gaelmetais.com).
 
 
 ## Contributors

bin/cli.js

@@ -12,7 +12,13 @@ var cli = meow({
         '  yellowlabtools <url> <options>',
         '',
         'Options:',
-        '  --screenshot     Will take a screenshot and use this value as the output path. It needs to end with ".png".',
+        '  --device             Use "phone" or "tablet" to simulate a mobile device (by user-agent and viewport size).',
+        '  --screenshot         Will take a screenshot and use this value as the output path. It needs to end with ".png".',
+        '  --js-deep-analysis   When activated, the javascriptExecutionTree will contain sub-requests.',
+        '  --wait-for-selector  Once the page is loaded, Phantomas will wait until the given CSS selector matches some elements.',
+        '  --cookie             Adds a cookie on the main domain.',
+        '  --auth-user          Basic HTTP authentication username.',
+        '  --auth-pass          Basic HTTP authentication password.',
         ''
     ].join('\n'),
     pkg: '../package.json'
@@ -22,8 +28,7 @@ var cli = meow({
 
 // Check parameters
 if (cli.input.length < 1) {
-    console.error('Incorrect parameters: url not provided');
-    process.exit(1);
+    cli.showHelp();
 }
 
 var url = cli.input[0];
@@ -44,6 +49,23 @@ if (screenshot) {
     options.screenshot = cli.flags.screenshot;
 }
 
+// Deep JS analysis option
+if (cli.flags.jsDeepAnalysis === true || cli.flags.jsDeepAnalysis === 'true') {
+    options.jsDeepAnalysis = true;
+}
+
+// Device simulation
+options.device = cli.flags.device || 'desktop';
+
+// Wait for CSS selector
+options.waitForSelector = cli.flags.waitForSelector || null;
+
+// Cookie
+options.cookie = cli.flags.cookie || null;
+
+// HTTP basic auth
+options.authUser = cli.flags.authUser || null;
+options.authPass = cli.flags.authPass || null;
 
 
 (function execute(url, options) {

bin/server.js

@@ -7,12 +7,14 @@ var cors                    = require('cors');
 
 var authMiddleware          = require('../lib/server/middlewares/authMiddleware');
 var apiLimitsMiddleware     = require('../lib/server/middlewares/apiLimitsMiddleware');
+var wwwRedirectMiddleware   = require('../lib/server/middlewares/wwwRedirectMiddleware');
 
 
 // Middlewares
 app.use(compress());
 app.use(bodyParser.json());
 app.use(cors());
+app.use(wwwRedirectMiddleware);
 app.use(authMiddleware);
 app.use(apiLimitsMiddleware);
 

bower.json

@@ -1,10 +1,12 @@
 {
   "name": "yellowlabtools",
   "dependencies": {
-    "angular": "~1.3.8",
-    "angular-route": "~1.3.8",
-    "angular-resource": "~1.3.7",
-    "angular-sanitize": "~1.4.0-beta.0"
+    "angular": "~1.3.15",
+    "angular-route": "~1.3.15",
+    "angular-resource": "~1.3.15",
+    "angular-sanitize": "~1.3.15",
+    "angular-animate": "~1.3.15",
+    "angular-local-storage": "~0.2.0"
   },
   "resolutions": {
     "angular": "~1.3.8"

front/src/css/dashboard.css

@@ -46,6 +46,14 @@
   content: "+";
   opacity: 0.85;
 }
+.summary .globalScore .screenshotWrapper.phone:hover:after {
+  top: 1.7em;
+  left: 0.64em;
+}
+.summary .globalScore .screenshotWrapper.tablet:hover:after {
+  top: 1.5em;
+  left: 0.9em;
+}
 .summary .notations {
   display: table;
   width: 80%;

front/src/css/index.css

@@ -1,22 +1,150 @@
 .promess {
-  padding: 0em 2em 3em;
+  padding: 0em 2em;
+  margin-bottom: 0.5em;
   font-weight: normal;
   font-size: 1.2em;
 }
+.price {
+  padding: 0em 2em 3em;
+  margin-top: 0em;
+  font-size: 0.9em;
+}
 .url {
   width: 50%;
 }
 .launchBtn {
-  background: #e74c3c;
+  background: #ffa319;
   color: #fff;
 }
+.launchBtn:focus {
+  background: #e74c3c;
+}
 .launchBtn.disabled {
   background: #deaca6;
 }
+.launchBtn.disabled:focus {
+  color: #ddd;
+}
+.settings {
+  width: 50%;
+  margin: 0 auto;
+}
+.settings input,
+.settings select {
+  font-size: 1em;
+}
+.settings input[type=text] {
+  width: 100%;
+  min-width: 4em;
+}
+.device {
+  margin-top: 3em;
+}
+.device .item {
+  display: inline-block;
+  margin: 1em 0.75em;
+  width: 5.5em;
+  height: 5.5em;
+  color: #FFF;
+  border: 1px solid #FFF;
+  padding: 1px;
+  border-radius: 0.5em;
+  cursor: pointer;
+  text-decoration: none;
+  font-size: 0.8em;
+}
+.device .item.active {
+  color: #ffa319;
+  border: 2px solid #ffa319;
+  padding: 0;
+}
+.device .item:hover {
+  color: #ffa319;
+}
+.device .item > div {
+  margin: 0.2em 0 0.1em;
+  font-size: 3em;
+}
+.settingsTooltip {
+  position: relative;
+}
+.settingsTooltip span {
+  font-size: 0.8em;
+  vertical-align: text-top;
+}
+.settingsTooltip div {
+  display: none;
+  position: absolute;
+  padding: 0.5em;
+  width: 25em;
+  background: #FFF;
+  color: #000;
+  font-size: 0.8em;
+  border-radius: 1em;
+  border: 2px solid #ffa319;
+  white-space: normal;
+  z-index: 2;
+}
+.settingsTooltip:hover div {
+  display: block;
+}
+.showAdvanced {
+  display: inline-block;
+  margin-top: 2em;
+  color: #FFF;
+  text-decoration: none;
+  font-size: 0.9em;
+}
+.showAdvanced:hover {
+  color: #ffa319;
+}
+.currentSettings {
+  font-size: 0.9em;
+}
+.currentSettings span {
+  color: #ffa319;
+}
+.currentSettings span:after {
+  color: #FFF;
+  content: ",";
+}
+.currentSettings span:last-child:after {
+  content: "";
+}
+.advanced {
+  margin: 1em 0 0;
+  display: table;
+  width: 100%;
+  text-align: left;
+  border-spacing: 0.75em;
+}
+.advanced > div {
+  display: table-row;
+}
+.advanced > div > div {
+  display: table-cell;
+  width: 75%;
+}
+.advanced > div > div.label {
+  width: 25%;
+  white-space: nowrap;
+}
+.advanced .subTable {
+  display: table;
+  border-spacing: 0;
+  width: 100%;
+}
+.advanced .subTable > div {
+  display: table-row;
+}
+.advanced .subTable > div > div {
+  display: table-cell;
+  padding: 0 0 0.75em;
+}
 .features {
   display: table;
   width: 50%;
-  margin: 8em auto 0;
+  margin: 6em auto 0;
   font-size: 0.9em;
   color: #413;
 }

front/src/css/rule.css

@@ -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;
@@ -109,30 +116,39 @@
   border-bottom-left-radius: 0.4em;
   border-bottom-right-radius: 0.4em;
   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.mouseOver {
+.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.mouseOver > div {
+.offendersTable .offenderButton.opens:hover > div,
+.value .offenderButton.opens:hover > div {
   display: block;
+  background: #ffe0cc;
 }
 .offendersHtml {
   display: inline-block;
@@ -182,7 +198,6 @@
 .colorPalette > div:hover:after {
   content: " ";
   position: absolute;
-  background-color: inherit;
   left: -0.2em;
   top: -0.2em;
   width: 100%;

front/src/css/timeline.css

@@ -2,6 +2,19 @@
 .execution {
   text-align: center;
 }
+.selectScript {
+  padding-bottom: 2em;
+  font-size: 0.9em;
+}
+.selectScript select {
+  max-width: 30em;
+}
+.selectScript.empty {
+  font-size: 0.8em;
+}
+.selectScript.empty select {
+  width: 10em;
+}
 .timeline {
   margin: 2em 0 5em;
 }
@@ -39,6 +52,9 @@
   bottom: 0;
   width: 100%;
 }
+.timeline .interval .color.clickable {
+  cursor: pointer;
+}
 .timeline div.interval:hover {
   background: #9C4274;
 }
@@ -127,19 +143,9 @@
   border: 1px dotted #aaa;
   text-align: left;
 }
-.slowRequestsLimit {
-  width: 3em;
-  font-size: 1em;
-  text-align: right;
-  border: 1px solid #aaa;
-}
-input.textFilter {
-  box-shadow: none;
-  font-size: 1em;
-  padding: 0 0.2em;
-  border: 1px solid #aaa;
-  border-radius: none;
-  width: 15em;
+.subFilters {
+  margin-left: 3em;
+  font-size: 0.9em;
 }
 .table {
   display: table;
@@ -171,12 +177,65 @@ input.textFilter {
 .table > div.showingDetails > div {
   background: #f1c40f;
 }
+.table > div.highlight > div.startTime {
+  background-color: #C0F090;
+}
+.table > div.highlight-remove {
+  transition: 3s;
+}
+.table > div.highlight-remove > div.startTime {
+  transition: background-color 3s ease-in;
+}
 .table > div > .index {
   color: #bbb;
+  word-break: normal;
 }
 .table > div > .type {
   white-space: nowrap;
 }
+.table .children {
+  margin-top: 0.2em;
+  font-size: 0.8em;
+  line-height: 1.6em;
+}
+.table .child {
+  margin-left: 0.5em;
+}
+.table .child > .child {
+  margin-left: 1em;
+}
+.table .child:before {
+  content: "↳";
+}
+.table .child .childArgs {
+  display: none;
+}
+.table .child span {
+  position: relative;
+}
+.table .child span:hover {
+  background: #EBD8E2;
+}
+.table .child span:hover div {
+  display: inline-block;
+}
+.table .child span:hover .childArgs {
+  display: block;
+  position: absolute;
+  padding: 0 1em 0 2em;
+  left: 100%;
+  top: 0;
+  background: #EBD8E2;
+  line-height: 1.3em;
+  height: 1.3em;
+  z-index: 2;
+}
+.table .showingDetails .child span:hover {
+  background: inherit;
+}
+.table .showingDetails .child span:hover .childArgs {
+  display: none;
+}
 .table > div > .value {
   width: 70%;
   word-break: break-all;
@@ -193,6 +252,7 @@ input.textFilter {
   width: 0.8em;
 }
 .detailsOverlay {
+  display: none;
   position: absolute;
   right: 3em;
   top: -3em;
@@ -202,13 +262,16 @@ input.textFilter {
   background: #fff;
   border: 2px solid #f1c40f;
   border-radius: 0.5em;
-  z-index: 1;
+  z-index: 2;
 }
 @media screen and (max-width: 1024px) {
   .detailsOverlay {
     width: 25em;
   }
 }
+.showDetails .detailsOverlay {
+  display: block;
+}
 .detailsOverlay .closeBtn {
   position: absolute;
   top: 0.5em;
@@ -247,3 +310,27 @@ input.textFilter {
   color: #e74c3c;
   cursor: pointer;
 }
+.queryWithoutResultsFilterOn > div {
+  display: none;
+}
+.queryWithoutResultsFilterOn > div.queryWithoutResults {
+  display: table-row;
+}
+.jQueryCallOnEmptyObjectFilterOn > div {
+  display: none;
+}
+.jQueryCallOnEmptyObjectFilterOn > div.jQueryCallOnEmptyObject {
+  display: table-row;
+}
+.eventNotDelegatedFilterOn > div {
+  display: none;
+}
+.eventNotDelegatedFilterOn > div.eventNotDelegated {
+  display: table-row;
+}
+.jsErrorFilterOn > div {
+  display: none;
+}
+.jsErrorFilterOn > div.jsError {
+  display: table-row;
+}

front/src/fonts/svg-icons/arrow-left3.svg

@@ -1 +1 @@
-<?xml version="1.0" encoding="utf-8"?> <!-- Generator: IcoMoon.io --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g class="svgGrid" id="svgGrid"><line stroke-width="1" stroke="#B35047" x1="32" x2="32" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="64" x2="64" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="96" x2="96" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="128" x2="128" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="160" x2="160" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="192" x2="192" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="224" x2="224" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="256" x2="256" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="288" x2="288" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="320" x2="320" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="352" x2="352" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="384" x2="384" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="416" x2="416" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="448" x2="448" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="480" x2="480" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="32" y2="32"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="64" y2="64"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="96" y2="96"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="128" y2="128"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="160" y2="160"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="192" y2="192"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="224" y2="224"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="256" y2="256"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="288" y2="288"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="320" y2="320"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="352" y2="352"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="384" y2="384"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="416" y2="416"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="448" y2="448"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="480" y2="480"></line><rect x="0" y="0" width="512" height="512" fill="none" stroke-width="1" stroke="#B35047"></rect></g><path d="M 256.00,0.00C 397.385,0.00, 512.00,114.615, 512.00,256.00s -114.615,256.00, -256.00,256.00s -256.00-114.615, -256.00-256.00S 114.615,0.00, 256.00,0.00z M 256.00,464.00 c 114.875,0.00 208.00-93.125 208.00-208.00S 370.875,48.00, 256.00,48.00s -208.00,93.125, -208.00,208.00S 141.125,464.00, 256.00,464.00zM 105.372,233.373l 128.001-128.00c 12.496-12.497 32.757-12.497 45.254,0.00c 12.497,12.497 12.497,32.758,0.00,45.255L 205.255,224.00 L 384.00,224.00 c 17.673,0.00 32.00,14.327 32.00,32.00c0.00,17.673, -14.327,32.00, -32.00,32.00l-178.745,0.00 l 73.373,73.372c 12.497,12.497 12.497,32.759,0.00,45.256 C 272.379,412.876, 264.189,416.00, 256.00,416.00s -16.379-3.124, -22.627-9.372l -128.001-128.00C 92.876,266.131, 92.876,245.869, 105.372,233.373z" ></path></svg>
+<?xml version="1.0" encoding="utf-8"?> <!-- Generator: IcoMoon.io --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><path d="M 256.00,0.00C 397.385,0.00, 512.00,114.615, 512.00,256.00s -114.615,256.00, -256.00,256.00s -256.00-114.615, -256.00-256.00S 114.615,0.00, 256.00,0.00z M 256.00,464.00 c 114.875,0.00 208.00-93.125 208.00-208.00S 370.875,48.00, 256.00,48.00s -208.00,93.125, -208.00,208.00S 141.125,464.00, 256.00,464.00zM 105.372,233.373l 128.001-128.00c 12.496-12.497 32.757-12.497 45.254,0.00c 12.497,12.497 12.497,32.758,0.00,45.255L 205.255,224.00 L 384.00,224.00 c 17.673,0.00 32.00,14.327 32.00,32.00c0.00,17.673, -14.327,32.00, -32.00,32.00l-178.745,0.00 l 73.373,73.372c 12.497,12.497 12.497,32.759,0.00,45.256 C 272.379,412.876, 264.189,416.00, 256.00,416.00s -16.379-3.124, -22.627-9.372l -128.001-128.00C 92.876,266.131, 92.876,245.869, 105.372,233.373z" ></path></svg>

front/src/fonts/svg-icons/bars.svg

@@ -1 +1 @@
-<?xml version="1.0" encoding="utf-8"?> <!-- Generator: IcoMoon.io --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g class="svgGrid" id="svgGrid"><line stroke-width="1" stroke="#B35047" x1="32" x2="32" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="64" x2="64" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="96" x2="96" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="128" x2="128" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="160" x2="160" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="192" x2="192" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="224" x2="224" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="256" x2="256" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="288" x2="288" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="320" x2="320" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="352" x2="352" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="384" x2="384" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="416" x2="416" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="448" x2="448" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="480" x2="480" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="32" y2="32"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="64" y2="64"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="96" y2="96"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="128" y2="128"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="160" y2="160"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="192" y2="192"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="224" y2="224"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="256" y2="256"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="288" y2="288"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="320" y2="320"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="352" y2="352"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="384" y2="384"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="416" y2="416"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="448" y2="448"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="480" y2="480"></line><rect x="0" y="0" width="512" height="512" fill="none" stroke-width="1" stroke="#B35047"></rect></g><path d="M0.00,416.00L 512.00,416.00L 512.00,480.00L0.00,480.00zM 64.00,288.00L 128.00,288.00L 128.00,384.00L 64.00,384.00zM 160.00,160.00L 224.00,160.00L 224.00,384.00L 160.00,384.00zM 256.00,256.00L 320.00,256.00L 320.00,384.00L 256.00,384.00zM 352.00,64.00L 416.00,64.00L 416.00,384.00L 352.00,384.00z" ></path></svg>
+<?xml version="1.0" encoding="utf-8"?> <!-- Generator: IcoMoon.io --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><path d="M0.00,416.00L 512.00,416.00L 512.00,480.00L0.00,480.00zM 64.00,288.00L 128.00,288.00L 128.00,384.00L 64.00,384.00zM 160.00,160.00L 224.00,160.00L 224.00,384.00L 160.00,384.00zM 256.00,256.00L 320.00,256.00L 320.00,384.00L 256.00,384.00zM 352.00,64.00L 416.00,64.00L 416.00,384.00L 352.00,384.00z" ></path></svg>

front/src/fonts/svg-icons/lab.svg

@@ -1 +1 @@
-<?xml version="1.0" encoding="utf-8"?> <!-- Generator: IcoMoon.io --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g class="svgGrid" id="svgGrid"><line stroke-width="1" stroke="#B35047" x1="32" x2="32" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="64" x2="64" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="96" x2="96" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="128" x2="128" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="160" x2="160" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="192" x2="192" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="224" x2="224" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="256" x2="256" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="288" x2="288" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="320" x2="320" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="352" x2="352" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="384" x2="384" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="416" x2="416" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="448" x2="448" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="480" x2="480" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="32" y2="32"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="64" y2="64"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="96" y2="96"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="128" y2="128"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="160" y2="160"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="192" y2="192"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="224" y2="224"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="256" y2="256"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="288" y2="288"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="320" y2="320"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="352" y2="352"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="384" y2="384"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="416" y2="416"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="448" y2="448"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="480" y2="480"></line><rect x="0" y="0" width="512" height="512" fill="none" stroke-width="1" stroke="#B35047"></rect></g><path d="M 478.145,402.241L 320.00,138.729L 320.00,32.00 l 16.00,0.00 c 8.80,0.00, 16.00-7.20, 16.00-16.00s-7.20-16.00-16.00-16.00L 176.00,0.00 c-8.80,0.00-16.00,7.20-16.00,16.00s 7.20,16.00, 16.00,16.00l 16.00,0.00 l0.00,106.729 L 33.856,402.241C-2.365,462.608, 25.60,512.00, 96.00,512.00l 320.00,0.00 C 486.40,512.00, 514.365,462.608, 478.145,402.241z M 120.519,320.00L 224.00,147.531L 224.00,32.00 l 64.00,0.00 l0.00,115.531 L 391.482,320.00L 120.519,320.00 z" ></path></svg>
+<?xml version="1.0" encoding="utf-8"?> <!-- Generator: IcoMoon.io --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><path d="M 478.145,402.241L 320.00,138.729L 320.00,32.00 l 16.00,0.00 c 8.80,0.00, 16.00-7.20, 16.00-16.00s-7.20-16.00-16.00-16.00L 176.00,0.00 c-8.80,0.00-16.00,7.20-16.00,16.00s 7.20,16.00, 16.00,16.00l 16.00,0.00 l0.00,106.729 L 33.856,402.241C-2.365,462.608, 25.60,512.00, 96.00,512.00l 320.00,0.00 C 486.40,512.00, 514.365,462.608, 478.145,402.241z M 120.519,320.00L 224.00,147.531L 224.00,32.00 l 64.00,0.00 l0.00,115.531 L 391.482,320.00L 120.519,320.00 z" ></path></svg>

front/src/fonts/svg-icons/list.svg

@@ -1 +1 @@
-<?xml version="1.0" encoding="utf-8"?> <!-- Generator: IcoMoon.io --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g class="svgGrid" id="svgGrid"><line stroke-width="1" stroke="#B35047" x1="32" x2="32" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="64" x2="64" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="96" x2="96" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="128" x2="128" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="160" x2="160" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="192" x2="192" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="224" x2="224" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="256" x2="256" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="288" x2="288" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="320" x2="320" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="352" x2="352" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="384" x2="384" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="416" x2="416" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="448" x2="448" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="480" x2="480" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="32" y2="32"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="64" y2="64"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="96" y2="96"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="128" y2="128"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="160" y2="160"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="192" y2="192"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="224" y2="224"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="256" y2="256"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="288" y2="288"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="320" y2="320"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="352" y2="352"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="384" y2="384"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="416" y2="416"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="448" y2="448"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="480" y2="480"></line><rect x="0" y="0" width="512" height="512" fill="none" stroke-width="1" stroke="#B35047"></rect></g><path d="M0.00,0.00L 128.00,0.00L 128.00,128.00L0.00,128.00zM 192.00,32.00L 512.00,32.00L 512.00,96.00L 192.00,96.00zM0.00,192.00L 128.00,192.00L 128.00,320.00L0.00,320.00zM 192.00,224.00L 512.00,224.00L 512.00,288.00L 192.00,288.00zM0.00,384.00L 128.00,384.00L 128.00,512.00L0.00,512.00zM 192.00,416.00L 512.00,416.00L 512.00,480.00L 192.00,480.00z" ></path></svg>
+<?xml version="1.0" encoding="utf-8"?> <!-- Generator: IcoMoon.io --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><path d="M0.00,0.00L 128.00,0.00L 128.00,128.00L0.00,128.00zM 192.00,32.00L 512.00,32.00L 512.00,96.00L 192.00,96.00zM0.00,192.00L 128.00,192.00L 128.00,320.00L0.00,320.00zM 192.00,224.00L 512.00,224.00L 512.00,288.00L 192.00,288.00zM0.00,384.00L 128.00,384.00L 128.00,512.00L0.00,512.00zM 192.00,416.00L 512.00,416.00L 512.00,480.00L 192.00,480.00z" ></path></svg>

front/src/fonts/svg-icons/loop.svg

@@ -1 +1 @@
-<?xml version="1.0" encoding="utf-8"?> <!-- Generator: IcoMoon.io --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g class="svgGrid" id="svgGrid"><line stroke-width="1" stroke="#B35047" x1="32" x2="32" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="64" x2="64" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="96" x2="96" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="128" x2="128" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="160" x2="160" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="192" x2="192" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="224" x2="224" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="256" x2="256" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="288" x2="288" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="320" x2="320" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="352" x2="352" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="384" x2="384" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="416" x2="416" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="448" x2="448" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="480" x2="480" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="32" y2="32"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="64" y2="64"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="96" y2="96"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="128" y2="128"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="160" y2="160"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="192" y2="192"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="224" y2="224"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="256" y2="256"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="288" y2="288"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="320" y2="320"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="352" y2="352"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="384" y2="384"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="416" y2="416"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="448" y2="448"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="480" y2="480"></line><rect x="0" y="0" width="512" height="512" fill="none" stroke-width="1" stroke="#B35047"></rect></g><path d="M 437.011,74.99C 390.685,28.662, 326.693,0.00, 256.00,0.00C 146.256,0.00, 52.655,69.064, 16.251,166.094l 59.938,22.477 C 103.491,115.798, 173.692,64.00, 256.00,64.00c 53.02,0.00, 101.01,21.50, 135.753,56.247L 320.00,192.00l 192.00,0.00 L 512.00,0.00 L 437.011,74.99zM 256.00,448.00c-53.02,0.00-101.013-21.496-135.756-56.244L 192.00,320.00L0.00,320.00 l0.00,192.00 l 74.997-74.997C 121.32,483.334, 185.306,512.00, 256.00,512.00 c 109.745,0.00, 203.346-69.064, 239.75-166.094l-59.938-22.477C 408.51,396.202, 338.309,448.00, 256.00,448.00z" ></path></svg>
+<?xml version="1.0" encoding="utf-8"?> <!-- Generator: IcoMoon.io --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><path d="M 437.011,74.99C 390.685,28.662, 326.693,0.00, 256.00,0.00C 146.256,0.00, 52.655,69.064, 16.251,166.094l 59.938,22.477 C 103.491,115.798, 173.692,64.00, 256.00,64.00c 53.02,0.00, 101.01,21.50, 135.753,56.247L 320.00,192.00l 192.00,0.00 L 512.00,0.00 L 437.011,74.99zM 256.00,448.00c-53.02,0.00-101.013-21.496-135.756-56.244L 192.00,320.00L0.00,320.00 l0.00,192.00 l 74.997-74.997C 121.32,483.334, 185.306,512.00, 256.00,512.00 c 109.745,0.00, 203.346-69.064, 239.75-166.094l-59.938-22.477C 408.51,396.202, 338.309,448.00, 256.00,448.00z" ></path></svg>

front/src/fonts/svg-icons/mobile.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8"?> <!-- Generator: IcoMoon.io --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><path d="M 368.00,0.00L 144.00,0.00 c-26.40,0.00-48.00,21.60-48.00,48.00l0.00,416.00 c0.00,26.40, 21.60,48.00, 48.00,48.00l 224.00,0.00 c 26.40,0.00, 48.00-21.60, 48.00-48.00L 416.00,48.00 C 416.00,21.60, 394.40,0.00, 368.00,0.00z M 192.00,24.00 l 128.00,0.00 l0.00,16.00 L 192.00,40.00 L 192.00,24.00 z M 256.00,480.00c-17.673,0.00-32.00-14.327-32.00-32.00s 14.327-32.00, 32.00-32.00s 32.00,14.327, 32.00,32.00S 273.673,480.00, 256.00,480.00z M 384.00,384.00L 128.00,384.00 L 128.00,64.00 l 256.00,0.00 L 384.00,384.00 z" ></path></svg>

front/src/fonts/svg-icons/question.svg

@@ -1 +1 @@
-<?xml version="1.0" encoding="utf-8"?> <!-- Generator: IcoMoon.io --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g class="svgGrid" id="svgGrid"><line stroke-width="1" stroke="#B35047" x1="32" x2="32" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="64" x2="64" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="96" x2="96" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="128" x2="128" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="160" x2="160" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="192" x2="192" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="224" x2="224" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="256" x2="256" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="288" x2="288" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="320" x2="320" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="352" x2="352" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="384" x2="384" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="416" x2="416" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="448" x2="448" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="480" x2="480" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="32" y2="32"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="64" y2="64"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="96" y2="96"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="128" y2="128"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="160" y2="160"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="192" y2="192"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="224" y2="224"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="256" y2="256"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="288" y2="288"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="320" y2="320"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="352" y2="352"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="384" y2="384"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="416" y2="416"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="448" y2="448"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="480" y2="480"></line><rect x="0" y="0" width="512" height="512" fill="none" stroke-width="1" stroke="#B35047"></rect></g><path d="M 224.00,352.00L 288.00,352.00L 288.00,416.00L 224.00,416.00zM 352.00,128.00 C 369.673,128.00 384.00,142.327 384.00,160.00 L 384.00,256.00 L 288.00,320.00 L 224.00,320.00 L 224.00,288.00 L 320.00,224.00 L 320.00,192.00 L 160.00,192.00 L 160.00,128.00 L 352.00,128.00 ZM 256.00,48.00 C 200.441,48.00 148.208,69.636 108.922,108.922 C 69.636,148.208 48.00,200.441 48.00,256.00 C 48.00,311.559 69.636,363.792 108.922,403.078 C 148.208,442.364 200.441,464.00 256.00,464.00 C 311.559,464.00 363.792,442.364 403.078,403.078 C 442.364,363.792 464.00,311.559 464.00,256.00 C 464.00,200.441 442.364,148.208 403.078,108.922 C 363.792,69.636 311.559,48.00 256.00,48.00 Z M 256.00,0.00 L 256.00,0.00 C 397.385,0.00 512.00,114.615 512.00,256.00 C 512.00,397.385 397.385,512.00 256.00,512.00 C 114.615,512.00 0.00,397.385 0.00,256.00 C 0.00,114.615 114.615,0.00 256.00,0.00 Z" ></path></svg>
+<?xml version="1.0" encoding="utf-8"?> <!-- Generator: IcoMoon.io --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><path d="M 224.00,352.00L 288.00,352.00L 288.00,416.00L 224.00,416.00zM 352.00,128.00 C 369.673,128.00 384.00,142.327 384.00,160.00 L 384.00,256.00 L 288.00,320.00 L 224.00,320.00 L 224.00,288.00 L 320.00,224.00 L 320.00,192.00 L 160.00,192.00 L 160.00,128.00 L 352.00,128.00 ZM 256.00,48.00 C 200.441,48.00 148.208,69.636 108.922,108.922 C 69.636,148.208 48.00,200.441 48.00,256.00 C 48.00,311.559 69.636,363.792 108.922,403.078 C 148.208,442.364 200.441,464.00 256.00,464.00 C 311.559,464.00 363.792,442.364 403.078,403.078 C 442.364,363.792 464.00,311.559 464.00,256.00 C 464.00,200.441 442.364,148.208 403.078,108.922 C 363.792,69.636 311.559,48.00 256.00,48.00 Z M 256.00,0.00 L 256.00,0.00 C 397.385,0.00 512.00,114.615 512.00,256.00 C 512.00,397.385 397.385,512.00 256.00,512.00 C 114.615,512.00 0.00,397.385 0.00,256.00 C 0.00,114.615 114.615,0.00 256.00,0.00 Z" ></path></svg>

front/src/fonts/svg-icons/screen.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8"?> <!-- Generator: IcoMoon.io --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><path d="M 512.00,416.00L 512.00,32.00 L0.00,32.00 l0.00,384.00 l 224.00,0.00 l0.00,32.00 l-96.00,0.00 l0.00,32.00 l 256.00,0.00 l0.00-32.00 l-96.00,0.00 l0.00-32.00 L 512.00,416.00 z M 64.00,96.00l 384.00,0.00 l0.00,256.00 L 64.00,352.00 L 64.00,96.00 z" ></path></svg>

front/src/fonts/svg-icons/tablet.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8"?> <!-- Generator: IcoMoon.io --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><path d="M 400.00,0.00L 80.00,0.00 C 53.60,0.00, 32.00,21.60, 32.00,48.00l0.00,416.00 c0.00,26.40, 21.60,48.00, 48.00,48.00l 320.00,0.00 c 26.40,0.00, 48.00-21.60, 48.00-48.00L 448.00,48.00 C 448.00,21.60, 426.40,0.00, 400.00,0.00z M 240.00,496.00 c-8.836,0.00-16.00-7.163-16.00-16.00s 7.164-16.00, 16.00-16.00s 16.00,7.163, 16.00,16.00S 248.836,496.00, 240.00,496.00z M 384.00,448.00L 96.00,448.00 L 96.00,64.00 l 288.00,0.00 L 384.00,448.00 z" ></path></svg>

front/src/fonts/svg-icons/warning.svg

@@ -1 +1 @@
-<?xml version="1.0" encoding="utf-8"?> <!-- Generator: IcoMoon.io --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g class="svgGrid" id="svgGrid"><line stroke-width="1" stroke="#B35047" x1="32" x2="32" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="64" x2="64" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="96" x2="96" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="128" x2="128" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="160" x2="160" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="192" x2="192" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="224" x2="224" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="256" x2="256" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="288" x2="288" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="320" x2="320" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="352" x2="352" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="384" x2="384" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="416" x2="416" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="448" x2="448" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="480" x2="480" y1="0" y2="512"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="32" y2="32"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="64" y2="64"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="96" y2="96"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="128" y2="128"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="160" y2="160"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="192" y2="192"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="224" y2="224"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="256" y2="256"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="288" y2="288"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="320" y2="320"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="352" y2="352"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="384" y2="384"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="416" y2="416"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="448" y2="448"></line><line stroke-width="1" stroke="#B35047" x1="0" x2="512" y1="480" y2="480"></line><rect x="0" y="0" width="512" height="512" fill="none" stroke-width="1" stroke="#B35047"></rect></g><path d="M 256.00,79.362 L 83.583,448.00 L 428.417,448.00 L 256.00,79.362 Z M 256.00,0.00 L 256.00,0.00 C 267.035,0.00 278.07,7.441 286.442,22.324 L 504.978,457.88 C 521.723,487.646 507.478,512.00 473.327,512.00 L 38.673,512.00 C 4.521,512.00 -9.722,487.646 7.021,457.88 L 225.558,22.324 C 233.93,7.441 244.965,0.00 256.00,0.00 ZM 224.00,384.00A32.00,32.00 2520.00 1,0 288.00,384A32.00,32.00 2520.00 1,0 224.00,384zM 256.00,192.00 C 273.673,192.00 288.00,206.327 288.00,224.00 L 278.00,320.00 L 234.00,320.00 L 224.00,224.00 C 224.00,206.327 238.327,192.00 256.00,192.00 Z" ></path></svg>
+<?xml version="1.0" encoding="utf-8"?> <!-- Generator: IcoMoon.io --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><path d="M 256.00,79.362 L 83.583,448.00 L 428.417,448.00 L 256.00,79.362 Z M 256.00,0.00 L 256.00,0.00 C 267.035,0.00 278.07,7.441 286.442,22.324 L 504.978,457.88 C 521.723,487.646 507.478,512.00 473.327,512.00 L 38.673,512.00 C 4.521,512.00 -9.722,487.646 7.021,457.88 L 225.558,22.324 C 233.93,7.441 244.965,0.00 256.00,0.00 ZM 256.00,192.00 C 273.673,192.00 288.00,206.327 288.00,224.00 L 278.00,320.00 L 234.00,320.00 L 224.00,224.00 C 224.00,206.327 238.327,192.00 256.00,192.00 Z" ></path><circle cx="256" cy="384" r="31" style="stroke:#000000; fill:#000000"/></svg>

front/src/js/app.js

@@ -1,6 +1,7 @@
 var yltApp = angular.module('YellowLabTools', [
     'ngRoute',
     'ngSanitize',
+    'ngAnimate',
     'indexCtrl',
     'dashboardCtrl',
     'queueCtrl',
@@ -11,13 +12,27 @@ var yltApp = angular.module('YellowLabTools', [
     'resultsFactory',
     'apiService',
     'menuService',
+    'settingsService',
     'gradeDirective',
-    'offendersDirectives'
+    'offendersDirectives',
+    'LocalStorageModule'
 ]);
 
 yltApp.run(['$rootScope', '$location', function($rootScope, $location) {
+    $rootScope.isTouchDevice = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(window.navigator.userAgent);
     $rootScope.loadedRunId = null;
 
+    var oldHash;
+
+    // We don't want the hash to be kept between two pages
+    $rootScope.$on('$locationChangeStart', function(param1, param2, param3, param4){
+        var newHash = $location.hash();
+        if (newHash === oldHash) {
+            $location.hash(null);
+        }
+        oldHash = newHash;
+    });
+
     // Google Analytics
     $rootScope.$on('$routeChangeSuccess', function(){
         ga('send', 'pageview', {'page': $location.path()});

front/src/js/controllers/dashboardCtrl.js

@@ -8,7 +8,7 @@ dashboardCtrl.controller('DashboardCtrl', ['$scope', '$rootScope', '$routeParams
     function loadResults() {
         // Load result if needed
         if (!$rootScope.loadedResult || $rootScope.loadedResult.runId !== $routeParams.runId) {
-            Results.get({runId: $routeParams.runId}, function(result) {
+            Results.get({runId: $routeParams.runId, exclude: 'toolsResults'}, function(result) {
                 $rootScope.loadedResult = result;
                 $scope.result = result;
                 init();
@@ -25,8 +25,7 @@ dashboardCtrl.controller('DashboardCtrl', ['$scope', '$rootScope', '$routeParams
         // By default, Angular sorts object's attributes alphabetically. Countering this problem by retrieving the keys order here.
         $scope.categoriesOrder = Object.keys($scope.result.scoreProfiles.generic.categories);
         
-        $scope.globalScore = Math.max($scope.result.scoreProfiles.generic.globalScore, 0);
-        $scope.tweetText = 'My website\'s score is ' + $scope.globalScore + '/100 on #YellowLabTools!';
+        $scope.tweetText = 'I\'ve discovered this cool open-source tool that audits the front-end quality of a web page: ';
     }
 
     $scope.showRulePage = function(ruleName) {
@@ -34,21 +33,21 @@ dashboardCtrl.controller('DashboardCtrl', ['$scope', '$rootScope', '$routeParams
     };
 
     $scope.testAgain = function() {
-        API.launchTest($scope.result.params.url);
+        API.relaunchTest($scope.result);
     };
 
-    /// When comming from a social shared link, the user needs to click on "See full report" button to display the full dashboard.
+    // When comming from a social shared link, the user needs to click on "See full report" button to display the full dashboard.
     $scope.seeFullReport = function() {
         $scope.fromSocialShare = false;
         $location.search({});
     };
 
     $scope.shareOnTwitter = function(message) {
-        openSocialPopup('https://twitter.com/intent/tweet?url=' + document.URL + '%3Fshare&text=' + encodeURIComponent(message));
+        openSocialPopup('https://twitter.com/intent/tweet?text=' + encodeURIComponent(message + 'http://yellowlab.tools'));
     };
 
     $scope.shareOnLinkedin = function(message) {
-        openSocialPopup('https://www.linkedin.com/shareArticle?mini=true&url=' + document.URL + '%3Fshare&title=' + encodeURIComponent(message) + '&summary=' + encodeURIComponent('YellowLabTools is a free online tool that analyzes performance and front-end quality of a webpage.'));
+        openSocialPopup('https://www.linkedin.com/shareArticle?mini=true&url=http://yellowlab.tools&title=' + encodeURIComponent(message) + '&summary=' + encodeURIComponent('YellowLabTools is a free online tool that analyzes performance and front-end quality of a webpage.'));
     };
 
     function openSocialPopup(url) {
@@ -59,10 +58,5 @@ dashboardCtrl.controller('DashboardCtrl', ['$scope', '$rootScope', '$routeParams
         window.open(url, 'sharer', 'top=' + winTop + ',left=' + winLeft + ',toolbar=0,status=0,width=' + winWidth + ',height=' + winHeight);
     }
 
-    // Returns the URL of the JSON result
-    $scope.getAPIUrl = function() {
-        return '/api/results/' + $scope.runId;
-    };
-
     loadResults();
 }]);

front/src/js/controllers/indexCtrl.js

@@ -1,9 +1,13 @@
 var indexCtrl = angular.module('indexCtrl', []);
 
-indexCtrl.controller('IndexCtrl', ['$scope', '$location', 'API', function($scope, $location, API) {
+indexCtrl.controller('IndexCtrl', ['$scope', 'Settings', 'API', function($scope, Settings, API) {
+    
+    $scope.settings = Settings.getMergedSettings();
+
     $scope.launchTest = function() {
         if ($scope.url) {
-            API.launchTest($scope.url);
+            Settings.saveSettings($scope.settings);
+            API.launchTest($scope.url, $scope.settings);
         }
     };
 }]);

front/src/js/controllers/ruleCtrl.js

@@ -9,7 +9,7 @@ ruleCtrl.controller('RuleCtrl', ['$scope', '$rootScope', '$routeParams', '$locat
     function loadResults() {
         // Load result if needed
         if (!$rootScope.loadedResult || $rootScope.loadedResult.runId !== $routeParams.runId) {
-            Results.get({runId: $routeParams.runId}, function(result) {
+            Results.get({runId: $routeParams.runId, exclude: 'toolsResults'}, function(result) {
                 $rootScope.loadedResult = result;
                 $scope.result = result;
                 init();
@@ -29,7 +29,7 @@ ruleCtrl.controller('RuleCtrl', ['$scope', '$rootScope', '$routeParams', '$locat
     };
 
     $scope.testAgain = function() {
-        API.launchTest($scope.result.params.url);
+        API.relaunchTest($scope.result);
     };
 
     loadResults();

front/src/js/controllers/screenshotCtrl.js

@@ -7,10 +7,9 @@ screenshotCtrl.controller('ScreenshotCtrl', ['$scope', '$rootScope', '$routePara
     function loadResults() {
         // Load result if needed
         if (!$rootScope.loadedResult || $rootScope.loadedResult.runId !== $routeParams.runId) {
-            Results.get({runId: $routeParams.runId}, function(result) {
+            Results.get({runId: $routeParams.runId, exclude: 'toolsResults'}, function(result) {
                 $rootScope.loadedResult = result;
                 $scope.result = result;
-                init();
             }, function(err) {
                 $scope.error = true;
             });
@@ -24,7 +23,7 @@ screenshotCtrl.controller('ScreenshotCtrl', ['$scope', '$rootScope', '$routePara
     };
 
     $scope.testAgain = function() {
-        API.launchTest($scope.result.params.url);
+        API.relaunchTest($scope.result);
     };
 
     loadResults();

front/src/js/controllers/timelineCtrl.js

@@ -7,7 +7,7 @@ timelineCtrl.controller('TimelineCtrl', ['$scope', '$rootScope', '$routeParams',
     function loadResults() {
         // Load result if needed
         if (!$rootScope.loadedResult || $rootScope.loadedResult.runId !== $routeParams.runId) {
-            Results.get({runId: $routeParams.runId}, function(result) {
+            Results.get({runId: $routeParams.runId, exclude: 'toolsResults'}, function(result) {
                 $rootScope.loadedResult = result;
                 $scope.result = result;
                 render();
@@ -19,19 +19,70 @@ timelineCtrl.controller('TimelineCtrl', ['$scope', '$rootScope', '$routeParams',
     }
 
     function render() {
+        initFilters();
+        initScriptFiltering();
         initExecutionTree();
         initTimeline();
         $timeout(initProfiler, 100);
     }
 
+    function initFilters() {
+        var hash = $location.hash();
+        var filter = null;
+        
+        if (hash.indexOf('filter=') === 0) {
+            filter = hash.substr(7);
+        }
+
+        $scope.warningsFilterOn = (filter !== null);
+        $scope.warningsFilters = {
+            queryWithoutResults: (filter === null || filter === 'queryWithoutResults'),
+            jQueryCallOnEmptyObject: (filter === null || filter === 'jQueryCallOnEmptyObject'),
+            eventNotDelegated: (filter === null || filter === 'eventNotDelegated'),
+            jsError: (filter === null || filter === 'jsError')
+        };
+    }
+
+    function initScriptFiltering() {
+        var offenders = $scope.result.rules.jsCount.offendersObj.list;
+        $scope.scripts = [];
+
+        offenders.forEach(function(script) {
+            var filePath = script.file;
+
+            if (filePath.length > 100) {
+                filePath = filePath.substr(0, 98) + '...';
+            }
+
+            var scriptObj = {
+                fullPath: script.file, 
+                shortPath: filePath
+            };
+
+            $scope.scripts.push(scriptObj);
+        });
+    }
+
     function initExecutionTree() {
         var originalExecutions = $scope.result.javascriptExecutionTree.children || [];
+        
+        // Detect the last event of all (before filtering) and read time
+        var lastEvent = originalExecutions[originalExecutions.length - 1];
+        $scope.endTime =  lastEvent.data.timestamp + (lastEvent.data.time || 0);
+
+        // Filter
         $scope.executionTree = [];
-
         originalExecutions.forEach(function(node) {
-
-            // Prepare a faster angular search by creating a kind of search index
-            node.searchIndex = (node.data.callDetails) ? [node.data.type].concat(node.data.callDetails.arguments).join('°°') : node.data.type;
+            
+            // Filter by script (if enabled)
+            if ($scope.selectedScript) {
+                if (node.data.backtrace && node.data.backtrace.indexOf($scope.selectedScript.fullPath + ':') === -1) {
+                    return;
+                }
+                if (node.data.type === "jQuery loaded" || node.data.type === "jQuery version change") {
+                    return;
+                }
+            }
 
             $scope.executionTree.push(node);
         });
@@ -41,8 +92,6 @@ timelineCtrl.controller('TimelineCtrl', ['$scope', '$rootScope', '$routeParams',
 
         // Split the timeline into 200 intervals
         var numberOfIntervals = 199;
-        var lastEvent = $scope.executionTree[$scope.executionTree.length - 1];
-        $scope.endTime =  lastEvent.data.timestamp + (lastEvent.data.time || 0);
         $scope.timelineIntervalDuration = $scope.endTime / numberOfIntervals;
         
         // Pre-fill array of as many elements as there are milleseconds
@@ -80,61 +129,62 @@ timelineCtrl.controller('TimelineCtrl', ['$scope', '$rootScope', '$routeParams',
         $scope.profilerData = $scope.executionTree;
     }
 
-
-    function parseBacktrace(str) {
-        if (!str) {
-            return null;
-        }
-
-        var out = [];
-        var splited = str.split(' / ');
-        splited.forEach(function(trace) {
-            var result = /^(\S*)\s?\(?(https?:\/\/\S+):(\d+)\)?$/g.exec(trace);
-            if (result && result[2].length > 0) {
-                var filePath = result[2];
-                var chunks = filePath.split('/');
-                var fileName = chunks[chunks.length - 1];
-
-                out.push({
-                    fnName: result[1],
-                    fileName: fileName,
-                    filePath: filePath,
-                    line: result[3]
-                });
-            }
-        });
-        return out;
-    }
-
-    $scope.filter = function(textFilter, scriptName) {
-
+    $scope.changeScript = function() {
+        initExecutionTree();
+        initTimeline();
+        initProfiler();
     };
 
-    $scope.onNodeDetailsClick = function(node) {
-        var isOpen = node.showDetails;
-        if (!isOpen) {
-            // Close all other nodes
-            $scope.executionTree.forEach(function(currentNode) {
-                currentNode.showDetails = false;
-            });
+    $scope.findLineIndexByTimestamp = function(timestamp) {
+        var lineIndex = 0;
 
-            // Parse the backtrace
-            if (!node.parsedBacktrace) {
-                node.parsedBacktrace = parseBacktrace(node.data.backtrace);
+        for (var i = 0; i < $scope.executionTree.length; i ++) {
+            var delta = $scope.executionTree[i].data.timestamp - timestamp;
+            
+            if (delta < $scope.timelineIntervalDuration) {
+                lineIndex = i;
             }
 
+            if (delta > 0) {
+                break;
+            }
         }
-        node.showDetails = !isOpen;
+
+        return lineIndex;
     };
 
+
     $scope.backToDashboard = function() {
         $location.path('/result/' + $scope.runId);
     };
 
     $scope.testAgain = function() {
-        API.launchTest($scope.result.params.url);
+        API.relaunchTest($scope.result);
     };
 
     loadResults();
 
-}]);
+}]);
+
+timelineCtrl.directive('scrollOnClick', ['$animate', '$timeout', function($animate, $timeout) {
+    return {
+        restrict: 'A',
+        link: function (scope, element, attributes) {            
+            // When the user clicks on the timeline, find the right profiler line and scroll to it
+            element.on('click', function() {
+                var lineIndex = scope.findLineIndexByTimestamp(attributes.scrollOnClick);
+                var lineElement = angular.element(document.getElementById('line_' + lineIndex));
+                
+                // Animate the background color to "flash" the row
+                lineElement.addClass('highlight');
+                $timeout(function() {
+                    $animate.removeClass(lineElement, 'highlight');
+                    scope.$digest();
+                }, 50);
+
+
+                window.scrollTo(0, lineElement[0].offsetTop);
+            });
+        }
+    };
+}]);

front/src/js/directives/offendersDirectives.js

@@ -1,50 +1,800 @@
-var offendersDirectives = angular.module('offendersDirectives', []);
+(function() {
+    "use strict";
+    var offendersDirectives = angular.module('offendersDirectives', []);
 
-offendersDirectives.directive('domTree', function() {
-    return {
-        restrict: 'E',
-        scope: {
-            tree: '='
-        },
-        template: '<div class="domTree"></div>',
-        replace: true,
-        link: function(scope, element, attrs) {
-            
-            function recursiveHtmlBuilder(tree) {
-                var html = '';
-                var keys = Object.keys(tree);
-                
-                keys.forEach(function(key) {
-                    if (isNaN(tree[key])) {
-                        html += '<div><span>' + key + '</span>' + recursiveHtmlBuilder(tree[key]) + '</div>';
-                    } else if (tree[key] > 1) {
-                        html += '<div><span>' + key + ' <span>(x' + tree[key] + ')</span></span></div>';
+    function getdomTreeHTML(tree) {
+        return '<div class="domTree">' + getdomTreeInnerHTML(tree) + '</div>';
+    }
+
+    function getdomTreeInnerHTML(tree) {
+        return recursiveHtmlBuilder(tree);
+    }
+
+    function recursiveHtmlBuilder(tree) {
+        var html = '';
+        var keys = Object.keys(tree);
+        
+        keys.forEach(function(key) {
+            if (isNaN(tree[key])) {
+                html += '<div><span>' + key + '</span>' + recursiveHtmlBuilder(tree[key]) + '</div>';
+            } else if (tree[key] > 1) {
+                html += '<div><span>' + key + ' <span>(x' + tree[key] + ')</span></span></div>';
+            } else {
+                html += '<div><span>' + key + '</span></div>';
+            }
+        });
+
+        return html;
+    }
+
+    offendersDirectives.directive('domTree', function() {
+        return {
+            restrict: 'E',
+            scope: {
+                tree: '='
+            },
+            template: '<div class="domTree"></div>',
+            replace: true,
+            link: function(scope, element) {
+                element.append(getdomTreeInnerHTML(scope.tree));
+            }
+        };
+    });
+
+    function getDomElementButtonHTML(obj, onASingleLine) {
+        if (obj.tree && !onASingleLine) {
+            return '<div class="offenderButton opens">' + getDomElementButtonInnerHTML(obj, onASingleLine) + '</div>';
+        } else {
+            return '<div class="offenderButton">' + getDomElementButtonInnerHTML(obj, onASingleLine) + '</div>';
+        }
+    }
+
+    function getDomElementButtonInnerHTML(obj, onASingleLine) {
+        if (obj.type === 'html' ||
+            obj.type === 'body' ||
+            obj.type === 'head' ||
+            obj.type === 'window' ||
+            obj.type === 'document' ||
+            obj.type === 'fragment') {
+                return obj.type;
+        }
+
+        if (obj.type === 'notAnElement') {
+            return 'Incorrect element';
+        }
+
+        var html = '';
+        if (obj.type === 'domElement') {
+            html = 'DOM element <b>' + obj.element + '</b>';
+        } else if (obj.type === 'fragmentElement') {
+            html = 'Fragment element <b>' + obj.element + '</b>';
+        } else if (obj.type === 'createdElement') {
+            html = 'Created element <b>' + obj.element + '</b>';
+        }
+
+        if (obj.tree && !onASingleLine) {
+            html += getdomTreeHTML(obj.tree);
+        }
+
+        return html;
+    }
+
+    offendersDirectives.directive('domElementButton', function() {
+        return {
+            restrict: 'E',
+            scope: {
+                obj: '='
+            },
+            template: '<div class="offenderButton" ng-class="{opens: obj.tree}"></div>',
+            replace: true,
+            link: function(scope, element) {                
+                element.append(getDomElementButtonInnerHTML(scope.obj));
+            }
+        };
+    });
+
+
+    function getJQueryContextButtonHTML(context, onASingleLine) {
+        if (context.length === 0) {
+            return '<span class="offenderButton">Empty jQuery object</span>';
+        }
+
+        if (context.length === 1) {
+            return getDomElementButtonHTML(context.elements[0], onASingleLine);
+        }
+
+        var html = context.length + ' elements (' + getDomElementButtonHTML(context.elements[0], onASingleLine) + ', ' + getDomElementButtonHTML(context.elements[1], onASingleLine);
+        if (context.length === 3) {
+            html += ', ' + getDomElementButtonHTML(context.elements[0], onASingleLine);
+        } else if (context.length > 3) {
+            html += ' and ' + (context.length - 2) + ' more...';
+        }
+        return html + ')';
+    }
+
+    function isJQuery(node) {
+        return node.data.type.indexOf('jQuery ') === 0;
+    }
+
+    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 '';
+        }
+
+        var args = node.data.callDetails.arguments;
+        var ctxt = node.data.callDetails.context;
+
+
+        switch (type) {
+            case 'getElementById':
+            case 'createElement':
+                return '<b>' + args[0] + '</b>';
+
+            case 'getElementsByClassName':
+            case 'getElementsByTagName':
+            case 'querySelector':
+            case 'querySelectorAll':
+                return '<b>' + args[0] + '</b> on ' + getDomElementButtonHTML(ctxt.elements[0], onASingleLine);
+
+            case 'appendChild':
+                return 'append ' + getDomElementButtonHTML(args[0], onASingleLine) + ' to ' + getDomElementButtonHTML(ctxt.elements[0], onASingleLine);
+
+            case 'insertBefore':
+                return 'insert ' + getDomElementButtonHTML(args[0], onASingleLine) + ' into ' + getDomElementButtonHTML(ctxt.elements[0], onASingleLine) + ' before ' + getDomElementButtonHTML(args[1], onASingleLine);
+
+            case 'addEventListener':
+                return 'bind <b>' + args[0] + '</b> to ' + getDomElementButtonHTML(ctxt.elements[0], onASingleLine);
+
+            case 'getComputedStyle':
+                return getDomElementButtonHTML(args[0], onASingleLine) + (args[1] || '');
+
+            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 '';
+        }
+    }
+
+    function getJQueryHTML(node, onASingleLine) {
+        var type = node.data.type;
+        var unescapedArgs = node.data.callDetails.arguments;
+        var args = [];
+        var ctxt = node.data.callDetails.context;
+        
+        // escape HTML in args
+        for (var i = 0 ; i < 4 ; i ++) {
+            if (unescapedArgs[i] !== undefined) {
+                args[i] = escapeHTML(unescapedArgs[i]);
+            }
+        }
+
+        if (type === 'jQuery loaded' || type === 'jQuery version change') {
+            return args[0];
+        }
+
+        switch (type) {
+            case 'jQuery - onDOMReady':
+            case 'jQuery - windowOnLoad':
+                return '(function)';
+
+            case 'jQuery - Sizzle call':
+                return '<b>' + args[0] + '</b> on ' + getDomElementButtonHTML(ctxt.elements[0], onASingleLine);
+
+            case 'jQuery - find':
+                if (ctxt && ctxt.length === 1 && ctxt.elements[0].type !== 'document') {
+                    return '<b>' + args[0] + '</b> on ' + getJQueryContextButtonHTML(ctxt, onASingleLine);
+                } else {
+                    return '<b>' + args[0] + '</b>';
+                }
+                break;
+
+            case 'jQuery - html':
+                if (args[0] !== undefined) {
+                    return 'set content "<b>' + args[0] + '</b>" to ' + getJQueryContextButtonHTML(ctxt, onASingleLine);
+                } else {
+                    return 'get content from ' + getJQueryContextButtonHTML(ctxt, onASingleLine);
+                }
+                break;
+
+            case 'jQuery - append':
+                return 'append ' + joinArgs(args) + ' to ' + getJQueryContextButtonHTML(ctxt, onASingleLine);
+
+            case 'jQuery - appendTo':
+                return 'append ' + getJQueryContextButtonHTML(ctxt, onASingleLine) + ' to <b>' + args[0] + '</b>';
+
+            case 'jQuery - prepend':
+                return 'prepend ' + joinArgs(args) + ' to ' + getJQueryContextButtonHTML(ctxt, onASingleLine);
+
+            case 'jQuery - prependTo':
+                return 'prepend ' + getJQueryContextButtonHTML(ctxt, onASingleLine) + ' to <b>' + args[0] + '</b>';
+
+            case 'jQuery - before':
+                return 'insert ' + joinArgs(args) + ' before ' + getJQueryContextButtonHTML(ctxt, onASingleLine);
+
+            case 'jQuery - insertBefore':
+                return 'insert ' + getJQueryContextButtonHTML(ctxt, onASingleLine) + ' before <b>' + args[0] + '</b>';
+
+            case 'jQuery - after':
+                return 'insert ' + joinArgs(args) + ' after ' + getJQueryContextButtonHTML(ctxt, onASingleLine);
+
+            case 'jQuery - insertAfter':
+                return 'insert ' + getJQueryContextButtonHTML(ctxt, onASingleLine) + ' after <b>' + args[0] + '</b>';
+
+            case 'jQuery - remove':
+            case 'jQuery - detach':
+                if (args[0]) {
+                    return getJQueryContextButtonHTML(ctxt, onASingleLine) + ' filtered by <b>' + args[0] + '</b>';
+                } else {
+                    return getJQueryContextButtonHTML(ctxt, onASingleLine);
+                }
+                break;
+
+            case 'jQuery - empty':
+            case 'jQuery - clone':
+            case 'jQuery - unwrap':
+            case 'jQuery - show':
+            case 'jQuery - hide':
+            case 'jQuery - animate':
+            case 'jQuery - fadeIn':
+            case 'jQuery - fadeOut':
+            case 'jQuery - fadeTo':
+            case 'jQuery - fadeToggle':
+            case 'jQuery - slideDown':
+            case 'jQuery - slideUp':
+            case 'jQuery - slideToggle':
+                return getJQueryContextButtonHTML(ctxt, onASingleLine);
+
+            case 'jQuery - replaceWith':
+                return 'replace ' + getJQueryContextButtonHTML(ctxt, onASingleLine) + ' with <b>' + args[0] + '</b>';
+
+            case 'jQuery - replaceAll':
+                return 'replace <b>' + args[0] + '</b> with ' + getJQueryContextButtonHTML(ctxt, onASingleLine);
+
+            case 'jQuery - text':
+                if (args[0] !== undefined) {
+                    return 'set text "<b>' + args[0] + '</b>" to ' + getJQueryContextButtonHTML(ctxt, onASingleLine);
+                } else {
+                    return 'get text from ' + getJQueryContextButtonHTML(ctxt, onASingleLine);
+                }
+                break;
+
+            case 'jQuery - wrap':
+            case 'jQuery - wrapAll':
+                return 'wrap ' + getJQueryContextButtonHTML(ctxt, onASingleLine) + ' within <b>' + args[0] + '</b>';
+
+            case 'jQuery - wrapInner':
+                return 'wrap the content of ' + getJQueryContextButtonHTML(ctxt, onASingleLine) + ' within <b>' + args[0] + '</b>';
+
+            case 'jQuery - css':
+            case 'jQuery - attr':
+            case 'jQuery - prop':
+                if (isStringOfObject(args[0])) {
+                    return 'set <b>' + args[0] + '</b> on ' + getJQueryContextButtonHTML(ctxt, onASingleLine);
+                } else if (args[1]) {
+                    return 'set <b>' + args[0] + '</b> : <b>' + args[1] + '</b> on ' + getJQueryContextButtonHTML(ctxt, onASingleLine);
+                } else {
+                    return 'get <b>' + args[0] + '</b> from ' + getJQueryContextButtonHTML(ctxt, onASingleLine);
+                }
+                break;
+
+            case 'jQuery - offset':
+            case 'jQuery - height':
+            case 'jQuery - innerHeight':
+            case 'jQuery - width':
+            case 'jQuery - innerWidth':
+            case 'jQuery - scrollLeft':
+            case 'jQuery - scrollTop':
+            case 'jQuery - position':
+                if (args[0]) {
+                    return 'set <b>' + args[0] + '</b> on ' + getJQueryContextButtonHTML(ctxt, onASingleLine);
+                } else {
+                    return 'get from ' + getJQueryContextButtonHTML(ctxt, onASingleLine);
+                }
+                break;
+
+            case 'jQuery - outerHeight':
+            case 'jQuery - outerWidth':
+                if (args[0] && args[0] !== 'true') {
+                    return 'set <b>' + args[0] + '</b> on ' + getJQueryContextButtonHTML(ctxt, onASingleLine);
+                } else if (args[0] === 'true') {
+                    return 'get from ' + getJQueryContextButtonHTML(ctxt, onASingleLine) + ' (with include margins option)';
+                } else {
+                    return 'get from ' + getJQueryContextButtonHTML(ctxt, onASingleLine);
+                }
+                break;
+
+            case 'jQuery - toggle':
+                if (args[0] === 'true') {
+                    return getJQueryContextButtonHTML(ctxt, onASingleLine) + ' to visible';
+                } else if (args[0] === 'false') {
+                    return getJQueryContextButtonHTML(ctxt, onASingleLine) + ' to hidden';
+                } else {
+                    return getJQueryContextButtonHTML(ctxt, onASingleLine);
+                }
+                break;
+
+            case 'jQuery - on':
+            case 'jQuery - one':
+                if (isStringOfObject(args[0])) {
+                    return '<b>' + args[0].replace(/&quot;\(function\)&quot;/g, '(function)') + '</b>';
+                } else if (args[1] && isPureString(args[1])) {
+                    return 'bind <b>' + args[0] + '</b> on ' + getJQueryContextButtonHTML(ctxt, onASingleLine) + '\'s children filtered by <b>' + args[1] + '</b>';
+                } else {
+                    return 'bind <b>' + args[0] + '</b> on ' + getJQueryContextButtonHTML(ctxt, onASingleLine);
+                }
+                break;
+
+            case 'jQuery - off':
+                if (args[0]) {
+                    if (args[1]) {
+                        return 'unbind <b>' + args[0] + '</b> from ' + getJQueryContextButtonHTML(ctxt, onASingleLine) + '\'s children filtered by <b>' + args[1] + '</b>';
                     } else {
-                        html += '<div><span>' + key + '</span></div>';
+                        return 'unbind <b>' + args[0] + '</b> from ' + getJQueryContextButtonHTML(ctxt, onASingleLine);
                     }
-                });
+                } else {
+                    return 'unbind all events';
+                }
+                break;
 
-                return html;
+            case 'jQuery - live':
+            case 'jQuery - bind':
+                return 'bind <b>' + args[0] + '</b> on ' + getJQueryContextButtonHTML(ctxt, onASingleLine);
+
+            case 'jQuery - die':
+            case 'jQuery - unbind':
+                if (args[0]) {
+                    return 'unbind <b>' + args[0] + '</b> from ' + getJQueryContextButtonHTML(ctxt, onASingleLine);
+                } else {
+                    return 'unbind all events';
+                }
+                break;
+
+            case 'jQuery - delegate':
+                return 'bind <b>' + args[1] + '</b> on ' + getJQueryContextButtonHTML(ctxt, onASingleLine) + '\'s children filtered by <b>' + args[0] + '</b>';
+
+            case 'jQuery - undelegate':
+                if (args[0]) {
+                    if (args[1]) {
+                        return 'unbind <b>' + args[1] + '</b> from ' + getJQueryContextButtonHTML(ctxt, onASingleLine) + '\'s children filtered by <b>' + args[0] + '</b>';
+                    } else {
+                        return 'unbind namespace <b>' + args[0] + '</b>';
+                    }
+                } else {
+                    return 'unbind all events';
+                }
+                break;
+
+            case 'jQuery - blur':
+            case 'jQuery - change':
+            case 'jQuery - click':
+            case 'jQuery - dblclick':
+            case 'jQuery - focus':
+            case 'jQuery - keydown':
+            case 'jQuery - keypress':
+            case 'jQuery - keyup':
+            case 'jQuery - mousedown':
+            case 'jQuery - mouseenter':
+            case 'jQuery - mouseleave':
+            case 'jQuery - mousemove':
+            case 'jQuery - mouseout':
+            case 'jQuery - mouseover':
+            case 'jQuery - mouseup':
+            case 'jQuery - resize':
+            case 'jQuery - scroll':
+            case 'jQuery - select':
+            case 'jQuery - submit':
+                if (args[0]) {
+                    return 'bind on ' + getJQueryContextButtonHTML(ctxt, onASingleLine);
+                } else {
+                    return 'triggered on ' + getJQueryContextButtonHTML(ctxt, onASingleLine);
+                }
+                break;
+
+            case 'jQuery - error':
+            case 'jQuery - focusin':
+            case 'jQuery - focusout':
+            case 'jQuery - hover':
+            case 'jQuery - load':
+            case 'jQuery - unload':
+                return 'bind on ' + getJQueryContextButtonHTML(ctxt, onASingleLine);
+
+            case 'jQuery - removeAttr':
+            case 'jQuery - removeProp':
+                return 'remove <b>' + args[0] + '</b> from ' + getJQueryContextButtonHTML(ctxt, onASingleLine);
+
+            case 'jQuery - val':
+                if (args[0]) {
+                    return 'set value <b>' + args[0] + '</b> to ' + getJQueryContextButtonHTML(ctxt, onASingleLine);
+                } else {
+                    return 'get value from ' + getJQueryContextButtonHTML(ctxt, onASingleLine);
+                }
+                break;
+
+            case 'jQuery - hasClass':
+            case 'jQuery - addClass':
+            case 'jQuery - removeClass':
+                return '<b>' + args[0] + '</b> on ' + getJQueryContextButtonHTML(ctxt, onASingleLine);
+
+            case 'jQuery - toggleClass':
+                if (args[0]) {
+                    if (args[1]) {
+                        return 'toggle <b>' + args[0] + '</b> on ' + getJQueryContextButtonHTML(ctxt, onASingleLine) + ' to <b>' + args[1] + '</b>';
+                    } else {
+                        return 'toggle <b>' + args[0] + '</b> on ' + getJQueryContextButtonHTML(ctxt, onASingleLine);
+                    }
+                } else {
+                    return 'magic no-argument toggleClass';
+                }
+                break;
+
+            case 'jQuery - children':
+                if (args[0]) {
+                    return 'of ' + getJQueryContextButtonHTML(ctxt, onASingleLine) + ' filtered by <b>' + args[0] + '</b>';
+                } else {
+                    return 'of ' + getJQueryContextButtonHTML(ctxt, onASingleLine);
+                }
+                break;
+
+            case 'jQuery - closest':
+                if (args[1]) {
+                    return 'closest <b>' + args[0] + '</b> from ' + getJQueryContextButtonHTML(ctxt, onASingleLine) + ' in context <b>' + args[1] + '</b>';
+                } else {
+                    return 'closest <b>' + args[0] + '</b> from ' + getJQueryContextButtonHTML(ctxt, onASingleLine);
+                }
+                break;
+
+            case 'jQuery - next':
+            case 'jQuery - nextAll':
+                if (args[0]) {
+                    return 'after ' + getJQueryContextButtonHTML(ctxt, onASingleLine) + ' matching <b>' + args[0] + '</b>';
+                } else {
+                    return 'after ' + getJQueryContextButtonHTML(ctxt, onASingleLine);
+                }
+                break;
+
+            case 'jQuery - nextUntil':
+                if (args[0]) {
+                    if (args[1]) {
+                        return 'after ' + getJQueryContextButtonHTML(ctxt, onASingleLine) + ' until <b>' + args[0] + '</b> and matching <b>' + args[1] + '</b>';
+                    } else {
+                        return 'after ' + getJQueryContextButtonHTML(ctxt, onASingleLine) + ' until <b>' + args[0] + '</b>';
+                    }
+                } else {
+                    return 'after ' + getJQueryContextButtonHTML(ctxt, onASingleLine);
+                }
+                break;
+
+            case 'jQuery - offsetParent':
+                return 'of ' + getJQueryContextButtonHTML(ctxt, onASingleLine);
+
+            case 'jQuery - prev':
+            case 'jQuery - prevAll':
+                if (args[0]) {
+                    return 'before ' + getJQueryContextButtonHTML(ctxt, onASingleLine) + ' matching <b>' + args[0] + '</b>';
+                } else {
+                    return 'before ' + getJQueryContextButtonHTML(ctxt, onASingleLine);
+                }
+                break;
+
+            case 'jQuery - prevUntil':
+                if (args[0]) {
+                    if (args[1]) {
+                        return 'before ' + getJQueryContextButtonHTML(ctxt, onASingleLine) + ' until <b>' + args[0] + '</b> and matching <b>' + args[1] + '</b>';
+                    } else {
+                        return 'before ' + getJQueryContextButtonHTML(ctxt, onASingleLine) + ' until <b>' + args[0] + '</b>';
+                    }
+                } else {
+                    return 'before ' + getJQueryContextButtonHTML(ctxt, onASingleLine);
+                }
+                break;
+
+            case 'jQuery - parent':
+            case 'jQuery - parents':
+                if (args[0]) {
+                    return 'of ' + getJQueryContextButtonHTML(ctxt, onASingleLine) + ' matching <b>' + args[0] + '</b>';
+                } else {
+                    return 'of ' + getJQueryContextButtonHTML(ctxt, onASingleLine);
+                }
+                break;
+
+            case 'jQuery - parentsUntil':
+                if (args[0]) {
+                    if (args[1]) {
+                        return 'of ' + getJQueryContextButtonHTML(ctxt, onASingleLine) + ' until <b>' + args[0] + '</b> and matching <b>' + args[1] + '</b>';
+                    } else {
+                        return 'of ' + getJQueryContextButtonHTML(ctxt, onASingleLine) + ' until <b>' + args[0] + '</b>';
+                    }
+                } else {
+                    return 'of ' + getJQueryContextButtonHTML(ctxt, onASingleLine);
+                }
+                break;
+
+            case 'jQuery - siblings':
+                if (args[0]) {
+                    return 'near ' + getJQueryContextButtonHTML(ctxt, onASingleLine) + ' matching <b>' + args[0] + '</b>';
+                } else {
+                    return 'near ' + getJQueryContextButtonHTML(ctxt, onASingleLine);
+                }
+                break;
+
+            default:
+                return '';
+        }
+    }
+
+    function escapeHTML(html) {
+        var entityMap = {
+            "&": "&amp;",
+            "<": "&lt;",
+            ">": "&gt;",
+            '"': '&quot;',
+            "'": '&#39;',
+            "/": '&#x2F;'
+        };
+
+        return String(html).replace(/[&<>"'\/]/g, function (s) {
+            return entityMap[s];
+        });
+    }
+
+    function joinArgs(args) {
+        var html = '<b>' + args[0] + '</b>';
+        if (args[1]) {
+            html += ', <b>' + args[1] + '</b>';
+            if (args[2]) {
+                html += ', <b>' + args[2] + '</b>';
+                if (args[3]) {
+                    html += ', and more...';
+                }
+            }
+        }
+        return html;
+    }
+
+   function isStringOfObject(str) {
+        return typeof str === 'string' && str[0] === '{' && str[str.length - 1] === '}';
+    }
+
+    function isPureString(str) {
+        return typeof str === 'string' && str[0] !== '{' && str !== '(function)' && str !== '[Object]' && str !== '[Array]' && str !== 'true' && str !== 'false' && str !== 'undefined' && str !== 'unknown';
+    }
+
+    function getTimelineParamsHTML(node, onASingleLine) {
+        if (isJQuery(node)) {
+            return getJQueryHTML(node, onASingleLine);
+        } else {
+            return getNonJQueryHTML(node, onASingleLine);
+        }
+    }
+
+    function getBacktraceHTML(backtrace) {
+        var html = '';
+        var parsedBacktrace = parseBacktrace(backtrace);
+
+        if (!parsedBacktrace || parsedBacktrace.length === 0) {
+            html += '<div><div>can\'t find any backtrace :/</div></div>';
+        } else {
+            for (var i = 0 ; i < parsedBacktrace.length ; i++) {
+                html += '<div>';
+                html += '<div>' + (parsedBacktrace[i].fnName || '(anonymous function)') + '</div>';
+                html += '<div class="trace">' + getUrlLink(parsedBacktrace[i].filePath, 40) + ':' + parsedBacktrace[i].line + '</div>';
+                html += '</div>';
+            }
+        }
+
+        return html;
+    }
+
+    function parseBacktrace(str) {
+        if (!str) {
+            return null;
+        }
+
+        var out = [];
+        var splited = str.split(' / ');
+        
+        try {
+
+            splited.forEach(function(trace) {
+                var fnName = null, fileAndLine;
+
+                var withFnResult = /^([^\s\(]+) \((.+:\d+)\)$/.exec(trace);
+                if (withFnResult === null) {
+                    fileAndLine = trace;
+                } else {
+                    fnName = withFnResult[1];
+                    fileAndLine = withFnResult[2];
+                }
+
+                var fileAndLineSplit = /^(.*):(\d+)$/.exec(fileAndLine);
+                var filePath = fileAndLineSplit[1];
+                var line = fileAndLineSplit[2];
+
+                out.push({
+                    fnName: fnName,
+                    filePath: filePath,
+                    line: line
+                });
+            });
+
+        } catch(e) {
+            return null;
+        }
+
+        return out;
+    }
+
+    function getTimelineDetailsHTML(node) {
+        var html = '';
+
+        if (node.data.type != 'jQuery loaded' && node.data.type != 'jQuery version change' && !node.windowPerformance) {
+            if (node.warning || node.error) {
+                html += '<div class="icon-warning"></div>';
+            } else {
+                html += '<div class="icon-question"></div>';
             }
 
-            element.append(recursiveHtmlBuilder(scope.tree));
+            html += '<div class="detailsOverlay">';
+            html += '<div class="closeBtn">✖</div>';
+
+            if (node.data.callDetails.context && node.data.callDetails.context.length === 0) {
+                html += '<h4>Called on 0 jQuery element</h4><p class="advice">Useless function call, as the jQuery object is empty.</p>';
+            } else if (node.eventNotDelegated) {
+                html += '<p class="advice">This binding should use Event Delegation instead of binding each element one by one.</p>';
+            }
+
+            if (node.data.resultsNumber === 0) {
+                html += '<p class="advice">The query returned 0 results. Could it be unused or dead code?</p>';
+            } else if (node.data.resultsNumber > 0) {
+                html += '<p>The query returned ' + node.data.resultsNumber + ' ' + (node.data.resultsNumber > 1 ? 'results' : 'result') + '.</p>';
+            }
+
+            if (node.data.backtrace) {
+                html += '<h4>Backtrace</h4>';
+                html += '<div class="table">';
+                html += getBacktraceHTML(node.data.backtrace);
+                html += '</div>';
+            }
+
+            html += '</div>';
         }
-    };
-});
+        
+        return html;
+    }
 
-offendersDirectives.directive('domElementButton', function() {
-    return {
-        restrict: 'E',
-        scope: {
-            obj: '='
-        },
-        templateUrl: 'views/domElementButton.html',
-        replace: true
-    };
-});
+    
+    offendersDirectives.directive('profilerLine', ['$filter', function($filter) {
+        
+        var numberWithCommas = $filter('number');
 
-offendersDirectives.filter('shortenUrl', function() {
-    return function(url, maxLength) {
+        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">' + getTimelineParamsHTML(node, false) + '</div>' +
+                    '<div class="details">' + getTimelineDetailsHTML(node) + '</div>' +
+                    '<div class="startTime ' + node.data.loadingStep + '">' + numberWithCommas(node.data.timestamp, 0) + ' ms</div>';
+        }
+
+        function recursiveChildrenHTML(node) {
+            var html = '';
+            
+            if (node.children) {
+                node.children.forEach(function(child) {
+                    html += '<div class="child"><span>' + child.data.type + '<div class="childArgs">' + getTimelineParamsHTML(child, true) + '</div></span>' + recursiveChildrenHTML(child) + '</div>';
+                });
+            }
+
+            return html;
+        }
+
+        function onDetailsClick(row) {
+            // Close if it's alreay open
+            if (row.classList.contains('showDetails')) {
+                closeDetails(row);
+                return;
+            }
+
+            // Close any other open details overlay
+            var openOnes = document.getElementsByClassName('showDetails');
+            if (openOnes.length > 0) {
+                openOnes[0].classList.remove('showDetails');
+            }
+
+            // Make it appear
+            row.classList.add('showDetails');
+
+            // Bind the close button
+            row.querySelector('.closeBtn').addEventListener('click', function() {
+                closeDetails(row);
+            });
+        }
+
+        function closeDetails(row) {
+            row.classList.remove('showDetails');
+
+            // Unbind the close button
+            row.querySelector('.closeBtn').removeEventListener('click', closeDetails);   
+        }
+
+        return {
+            restrict: 'E',
+            scope: {
+                index: '=',
+                node: '='
+            },
+            template: '<div></div>',
+            replace: true,
+            link: function(scope, element) {
+                
+                if (scope.node.error) {
+                    element.addClass('jsError');
+                } else if (scope.node.windowPerformance) {
+                    element.addClass('windowPerformance');
+                }
+
+                element.append(getProfilerLineHTML(scope.index, scope.node));
+                element[0].id = 'line_' + scope.index;
+
+                if (scope.node.warning) {
+                    element[0].classList.add('warning');
+
+                    if (scope.node.queryWithoutResults) {
+                        element[0].classList.add('queryWithoutResults');
+                    }
+
+                    if (scope.node.jQueryCallOnEmptyObject) {
+                        element[0].classList.add('jQueryCallOnEmptyObject');
+                    }
+
+                    if (scope.node.eventNotDelegated) {
+                        element[0].classList.add('eventNotDelegated');
+                    }
+                }
+
+
+                // Bind click on the details icon
+                var detailsIcon = element[0].querySelector('.details div');
+                if (detailsIcon) {
+                    detailsIcon.addEventListener('click', function() {
+                        onDetailsClick(this.parentNode.parentNode);
+                    });
+                }
+            }
+        };
+    }]);
+
+    function shortenUrl(url, maxLength) {
         if (!maxLength) {
             maxLength = 110;
         }
@@ -54,67 +804,56 @@ offendersDirectives.filter('shortenUrl', function() {
         var rightLength = Math.ceil((maxLength - 5) / 2.1);
 
         return (url.length > maxLength) ? url.substr(0, leftLength) + ' ... ' + url.substr(-rightLength) : url;
-    };
-});
+    }
 
-offendersDirectives.directive('urlLink', function() {
-    return {
-        restrict: 'E',
-        scope: {
-            url: '=',
-            maxLength: '='
-        },
-        template: '<a href="{{url}}" target="_blank" title="{{url}}">{{url | shortenUrl:maxLength}}</a>',
-        replace: true
-    };
-});
+    offendersDirectives.filter('shortenUrl', function() {
+        return shortenUrl;
+    });
 
-offendersDirectives.filter('encodeURIComponent', function() {
-    return window.encodeURIComponent;
-});
+    function getUrlLink(url, maxLength) {
+        return '<a href="' + url + '" target="_blank" title="' + url + '">' + shortenUrl(url, maxLength) + '</a>';
+    }
 
-offendersDirectives.directive('fileAndLine', function() {
-    return {
-        restrict: 'E',
-        scope: {
-            file: '=',
-            line: '=',
-            column: '='
-        },
-        template: '<span><span ng-if="file"><url-link url="file" max-length="60"></url-link></span><span ng-if="!file">&lt;inline CSS&gt;</span> @ {{line}}:{{column}}</span>',
-        replace: true
-    };
-});
+    offendersDirectives.directive('urlLink', function() {
+        return {
+            restrict: 'E',
+            scope: {
+                url: '=',
+                maxLength: '='
+            },
+            template: '<a href="{{url}}" target="_blank" title="{{url}}">{{url | shortenUrl:maxLength}}</a>',
+            replace: true
+        };
+    });
 
-offendersDirectives.directive('fileAndLineButton', function() {
-    return {
-        restrict: 'E',
-        scope: {
-            file: '=',
-            line: '=',
-            column: '='
-        },
-        template: '<div class="offenderButton opens">css file<div class="cssFileAndLine"><file-and-line file="file" line="line" column="column" button="true"></file-and-line></div></div>',
-        replace: true
-    };
-});
+    offendersDirectives.filter('encodeURIComponent', function() {
+        return window.encodeURIComponent;
+    });
 
-offendersDirectives.directive('offenderButton', function() {
-    return {
-        restrict: 'C',
-        link: function(scope, element, attrs) {
+    offendersDirectives.directive('fileAndLine', function() {
+        return {
+            restrict: 'E',
+            scope: {
+                file: '=',
+                line: '=',
+                column: '='
+            },
+            template: '<span><span ng-if="file"><url-link url="file" max-length="60"></url-link></span><span ng-if="!file">&lt;inline CSS&gt;</span><span ng-if="line !== null && column !== null"> @ {{line}}:{{column}}</span></span>',
+            replace: true
+        };
+    });
 
-            console.log('initializing touchstart');
+    offendersDirectives.directive('fileAndLineButton', function() {
+        return {
+            restrict: 'E',
+            scope: {
+                file: '=',
+                line: '=',
+                column: '='
+            },
+            template: '<div class="offenderButton opens">css file<div class="cssFileAndLine"><file-and-line file="file" line="line" column="column" button="true"></file-and-line></div></div>',
+            replace: true
+        };
+    });
 
-            element.bind('touchstart mouseenter', function(e) {
-                element.addClass('mouseOver');
-                e.preventDefault();
-            });
-
-            element.bind('touchend mouseleave click', function(e) {
-                element.removeClass('mouseOver');
-                e.preventDefault();
-            });
-        }
-    };
-});
+})();

front/src/js/services/apiService.js

@@ -4,12 +4,33 @@ apiService.factory('API', ['$location', 'Runs', 'Results', function($location, R
 
     return {
 
-        launchTest: function(url) {
-            Runs.save({
+        launchTest: function(url, settings) {
+            var runObject = {
                 url: url,
                 waitForResponse: false,
-                screenshot: true
-            }, function(data) {
+                screenshot: true,
+                jsTimeline: true,
+                device: settings.device,
+                waitForSelector: settings.waitForSelector,
+                cookie: settings.cookie,
+                authUser: settings.authUser,
+                authPass: settings.authPass,
+            };
+
+            if (settings.waitForSelector && settings.waitForSelector !== '') {
+                runObject.waitForSelector = settings.waitForSelector;
+            }
+
+            if (settings.cookie && settings.cookie !== '') {
+                runObject.cookie = settings.cookie;
+            }
+
+            if (settings.authUser && settings.authUser !== '' && settings.authPass && settings.authPass !== '') {
+                runObject.authUser = settings.authUser;
+                runObject.authPass = settings.authPass;
+            }
+
+            Runs.save(runObject, function(data) {
                 $location.path('/queue/' + data.runId);
             }, function(response) {
                 if (response.status === 429) {
@@ -18,9 +39,11 @@ apiService.factory('API', ['$location', 'Runs', 'Results', function($location, R
                     alert('An error occured...');
                 }
             });
+        },
+
+        relaunchTest: function(result) {
+            this.launchTest(result.params.url, result.params.options);
         }
-
-
     };
 
 }]);

front/src/js/services/settingsService.js

@@ -0,0 +1,24 @@
+var settingsService = angular.module('settingsService', []);
+
+settingsService.factory('Settings', ['localStorageService', function(localStorageService) {
+
+    return {
+
+        getMergedSettings: function() {
+            var defaultSettings = {
+                device: 'desktop',
+                showAdvanced: false
+            };
+            
+            var savedValues = localStorageService.get('settings');
+
+            return angular.extend(defaultSettings, savedValues);
+        },
+
+        saveSettings: function(settings) {
+            localStorageService.set('settings', settings);
+        }
+
+    };
+
+}]);

front/src/less/dashboard.less

@@ -51,6 +51,16 @@
             opacity: 0.85;
         }
     }
+
+    .screenshotWrapper.phone:hover:after {
+        top: 1.7em;
+        left: 0.64em;
+    }
+
+    .screenshotWrapper.tablet:hover:after {
+        top: 1.5em;
+        left: 0.9em;
+    }
 }
 
 .summary .notations {

front/src/less/index.less

@@ -1,25 +1,174 @@
 .promess {
-    padding: 0em 2em 3em;
+    padding: 0em 2em;
+    margin-bottom: 0.5em;
     font-weight: normal;
     font-size: 1.2em;
 }
 
+.price {
+    padding: 0em 2em 3em;
+    margin-top: 0em;
+    font-size: 0.9em;
+}
+
 .url {
     width: 50%;
 }
 
 .launchBtn {
-    background: #e74c3c;
+    background: #ffa319;
     color: #fff;
+    &:focus {
+        background: #e74c3c;
+    }
     &.disabled {
         background: #deaca6;
+        &:focus {
+            color: #ddd;
+        }
+    }
+    
+}
+
+.settings {
+    width: 50%;
+    margin: 0 auto;
+
+    input, select {
+        font-size: 1em;
+    }
+
+    input[type=text] {
+        width: 100%;
+        min-width: 4em;
+    }
+}
+
+.device {
+    margin-top: 3em;
+    .item {
+        display: inline-block;
+        margin: 1em 0.75em;
+        width: 5.5em;
+        height: 5.5em;
+        color: #FFF;
+        border: 1px solid #FFF;
+        padding: 1px;
+        border-radius: 0.5em;
+        cursor: pointer;
+        text-decoration: none;
+        font-size: 0.8em;
+
+        &.active {
+            color: #ffa319;
+            border: 2px solid #ffa319;
+            padding: 0;
+        }
+
+        &:hover {
+            color: #ffa319;
+        }
+
+        > div {
+            margin: 0.2em 0 0.1em;
+            font-size: 3em;
+        }
+    }
+}
+
+.settingsTooltip {
+    position: relative;
+    span {
+        font-size: 0.8em;
+        vertical-align: text-top;
+    }
+    
+    div {
+        display: none;
+        position: absolute;
+        padding: 0.5em;
+        width: 25em;
+        background: #FFF;
+        color: #000;
+        font-size: 0.8em;
+        border-radius: 1em;
+        border: 2px solid #ffa319;
+        white-space: normal;
+        z-index: 2;
+    }
+
+    &:hover div {
+        display: block;
+    }
+}
+
+.showAdvanced {
+    display: inline-block;
+    margin-top: 2em;
+    color: #FFF;
+    text-decoration: none;
+    font-size: 0.9em;
+    
+    &:hover {
+        color: #ffa319;
+    }
+}
+
+.currentSettings {
+    font-size: 0.9em;
+
+    span {
+        color: #ffa319;
+        &:after {
+            color: #FFF;
+            content: ",";
+        }
+
+        &:last-child:after {
+            content: "";
+        }
+    }
+}
+
+.advanced {
+    margin: 1em 0 0;
+    display: table;
+    width: 100%;
+    text-align: left;
+    border-spacing: 0.75em;
+
+    > div {
+        display: table-row;
+
+        > div {
+            display: table-cell;
+            width: 75%;
+
+            &.label {
+                width: 25%;
+                white-space: nowrap;
+            }
+        }
+    }
+
+    .subTable {
+        display: table;
+        border-spacing: 0;
+        width: 100%;
+        > div {
+            display: table-row;
+            > div {
+                display: table-cell;
+                padding: 0 0 0.75em;
+            }
+        }
     }
 }
 
 .features {
     display: table;
     width: 50%;
-    margin: 8em auto 0;
+    margin: 6em auto 0;
     font-size: 0.9em;
     color: #413;
 

front/src/less/main.less

@@ -126,11 +126,27 @@ a.linkButton {
 }
 
 
-.screenshotWrapper.desktop {
+.screenshotWrapper {
     display: inline-block;
     position: relative;
-    border: 0.2em solid #AAA;
     background: #000;
+
+    > div {
+        overflow: scroll;
+        position: relative;
+    }
+
+    .screenshotImage {
+        width: 100%;
+    }
+
+    .screenshotError {
+        color: #fff;
+    }
+}
+
+.screenshotWrapper.desktop {
+    border: 0.2em solid #AAA;
     padding: 0.5em;
     border-top-left-radius: 0.4em;
     border-top-right-radius: 0.4em;
@@ -160,12 +176,61 @@ a.linkButton {
     > div {
         width: 12em;
         height: 6.75em;
-        overflow: scroll;
-        position: relative;
+    }
+}
+
+.screenshotWrapper.phone {
+    border: 0.07em solid #CCC;
+    padding: 1em 0.3em 1.5em;
+    border-radius: 0.6em;
+
+    &:before {
+        position: absolute;
+        width: 0.8em;
+        height: 0.8em;
+        bottom: 0.3em;
+        left: 3.3em;
+        border: 0.07em solid #CCC;
+        border-radius: 0.5em;
+        content: " ";
     }
 
-    .screenshotImage {
-        width: 100%;
+    &:after {
+        position: absolute;
+        width: 1em;
+        height: 0.1em;
+        bottom: 13.9em;
+        left: 3.2em;
+        background: #555;
+        border-radius: 0.05em;
+        content: " ";
+    }
+
+    > div {
+        width: 6.75em;
+        height: 12em;
+    }
+}
+
+.screenshotWrapper.tablet {
+    border: 0.07em solid #CCC;
+    padding: 0.8em 0.5em 0.9em;
+    border-radius: 0.6em;
+
+    &:before {
+        position: absolute;
+        width: 0.5em;
+        height: 0.5em;
+        bottom: 0.15em;
+        left: 4.35em;
+        border: 0.07em solid #CCC;
+        border-radius: 0.4em;
+        content: " ";
+    }
+
+    > div {
+        width: 8.25em;
+        height: 11em;
     }
 }
 
@@ -188,25 +253,6 @@ a.linkButton {
     }
 }
 
-/* Icons */
-.icon-lab {
-    .icon(@lab);
-}
-.icon-question {
-    .icon(@question);
-}
-.icon-warning {
-    .icon(@warning);
-}
-.icon-back {
-    .icon(@arrow-left3);
-}
-.icon-summary {
-    .icon(@list);
-}
-.icon-spaghetti {
-    .icon(@bars);
-}
-.icon-loop {
-    .icon(@loop);
+[class^="icon-"]:before, [class*=" icon-"]:before {
+    vertical-align: baseline;
 }

front/src/less/rule.less

@@ -90,7 +90,11 @@
     }
 }
 
-.offenders {
+.rule .startTime {
+    display: none;
+}
+
+.offendersTable, .value {
     .offenderButton {
         display: inline-block;
         position: relative;
@@ -120,6 +124,7 @@
             border-bottom-left-radius: 0.4em;
             border-bottom-right-radius: 0.4em;
             border-top: 1px solid #999;
+            z-index: 2;
         }
 
         .domTree {
@@ -140,7 +145,7 @@
             padding: 0.5em;
         }
 
-        &.opens.mouseOver {
+        &.opens:hover {
             border-bottom-left-radius: 0;
             border-bottom-right-radius: 0;
             background: #ffe0cc;
@@ -148,6 +153,7 @@
 
             > div {
                 display: block;
+                background: #ffe0cc;
             }
         }
     }
@@ -207,7 +213,6 @@
         &:hover:after {
             content: " ";
             position: absolute;
-            background-color: inherit;
             left: -0.2em;
             top: -0.2em;
             width: 100%;

front/src/less/timeline.less

@@ -14,6 +14,23 @@
     text-align: center;
 }
 
+.selectScript {
+    padding-bottom: 2em;
+    font-size: 0.9em;
+
+    select {
+        max-width: 30em;
+    }
+
+    &.empty {
+        font-size: 0.8em;
+
+        select {
+            width: 10em;
+        }
+    }
+}
+
 .timeline {
     margin: 2em 0 5em;
 }
@@ -49,6 +66,10 @@
     position: absolute;
     bottom: 0;
     width: 100%;
+
+    &.clickable {
+        cursor: pointer;
+    }
 }
 .timeline div.interval:hover {
     background: #9C4274;
@@ -141,20 +162,9 @@
     text-align: left;
 }
 
-.slowRequestsLimit {
-    width: 3em;
-    font-size: 1em;
-    text-align: right;
-    border: 1px solid #aaa;
-}
-
-input.textFilter {
-    box-shadow: none;
-    font-size: 1em;
-    padding: 0 0.2em;
-    border: 1px solid #aaa;
-    border-radius: none;
-    width: 15em;
+.subFilters {
+    margin-left: 3em;
+    font-size: 0.9em;
 }
 
 .table {
@@ -189,14 +199,82 @@ input.textFilter {
     background: #f1c40f;
 }
 
+.table > div.highlight {
+    > div.startTime {
+        background-color: #C0F090;
+    }
+}
+.table > div.highlight-remove {
+    transition: 3s;
+
+    > div.startTime {
+        transition: background-color 3s ease-in;
+    }
+}
+
 .table > div > .index {
     color: #bbb;
+    word-break: normal;
 }
 
 .table > div > .type {
     white-space:nowrap;
 }
 
+.table .children {
+    margin-top: 0.2em;
+    font-size: 0.8em;
+    line-height: 1.6em;
+}
+
+.table .child {
+    margin-left: 0.5em;
+
+    > .child {
+        margin-left: 1em;
+    }
+
+    &:before {
+        content: "↳";
+    }
+
+    .childArgs {
+        display: none;
+    }
+
+    span {
+        position: relative;
+    }
+
+    span:hover {
+        background: #EBD8E2;
+
+        div {
+            display: inline-block;
+        }
+
+        .childArgs {
+            display: block;
+            position: absolute;
+            padding: 0 1em 0 2em;
+            left: 100%;
+            top: 0;
+            background: #EBD8E2;
+            line-height: 1.3em;
+            height: 1.3em;
+            z-index: 2;
+        }
+    }
+}
+
+.table .showingDetails .child span:hover {
+    background: inherit;
+
+    .childArgs {
+        display: none;
+    }
+}
+
 .table > div > .value {
     width: 70%;
     word-break: break-all;
@@ -215,6 +293,7 @@ input.textFilter {
 }
 
 .detailsOverlay {
+    display: none;
     position: absolute;
     right: 3em;
     top: -3em;
@@ -224,13 +303,16 @@ input.textFilter {
     background: #fff;
     border: 2px solid #f1c40f;
     border-radius: 0.5em;
-    z-index: 1;
+    z-index: 2;
 }
 @media screen and (max-width: 1024px) {
     .detailsOverlay {
         width: 25em;
     }
 }
+.showDetails .detailsOverlay {
+    display: block;
+}
 .detailsOverlay .closeBtn {
     position: absolute;
     top: 0.5em;
@@ -268,4 +350,36 @@ input.textFilter {
 .execution .icon-warning {
     color: #e74c3c;
     cursor: pointer;
+}
+.queryWithoutResultsFilterOn {
+    > div {
+        display: none;
+        &.queryWithoutResults {
+            display: table-row;
+        }
+    }
+}
+.jQueryCallOnEmptyObjectFilterOn {
+    > div {
+        display: none;
+        &.jQueryCallOnEmptyObject {
+            display: table-row;
+        }
+    }
+}
+.eventNotDelegatedFilterOn {
+    > div {
+        display: none;
+        &.eventNotDelegated {
+            display: table-row;
+        }
+    }
+}
+.jsErrorFilterOn {
+    > div {
+        display: none;
+        &.jsError {
+            display: table-row;
+        }
+    }
 }

front/src/main.html

@@ -23,6 +23,8 @@
     <script src="/bower_components/angular-route/angular-route.min.js"></script>
     <script src="/bower_components/angular-resource/angular-resource.min.js"></script>
     <script src="/bower_components/angular-sanitize/angular-sanitize.min.js"></script>
+    <script src="/bower_components/angular-animate/angular-animate.min.js"></script>
+    <script src="/bower_components/angular-local-storage/dist/angular-local-storage.min.js"></script>
     <script src="/js/app.js"></script>
     <script src="/js/controllers/indexCtrl.js"></script>
     <script src="/js/controllers/dashboardCtrl.js"></script>
@@ -34,6 +36,8 @@
     <script src="/js/models/runsFactory.js"></script>
     <script src="/js/services/apiService.js"></script>
     <script src="/js/services/menuService.js"></script>
+    <script src="/js/services/settingsService.js"></script>
+
     <script src="/js/directives/gradeDirective.js"></script>
     <script src="/js/directives/offendersDirectives.js"></script>
     <!-- endbuild -->

front/src/views/dashboard.html

@@ -11,9 +11,10 @@
         </div>
         <div>
             <a href="/result/{{result.runId}}/screenshot">
-                <div class="screenshotWrapper desktop">
+                <div class="screenshotWrapper" ng-class="result.params.options.device || 'desktop'">
                     <div>
-                        <img class="screenshotImage" ng-src="{{result.screenshotUrl}}"/>
+                        <img ng-if="result.screenshotUrl" class="screenshotImage" ng-src="{{result.screenshotUrl}}"/>
+                        <span ng-if="!result.screenshotUrl" class="screenshotError">Screenshot not available</span>
                     </div>
                 </div>
             </a>
@@ -47,7 +48,7 @@
     </div>
 
     <div ng-if="!error && !fromSocialShare" class="apiTip">
-        <b>Did you know? Yellow Lab Tools now has an API</b>! <a href="{{getAPIUrl()}}" target="_blank">Here</a> is the JSON output for this run. Checkout <a href="https://github.com/gmetais/YellowLabTools/wiki/Public-API" target="_blank">the API doc</a>.
+        <b>Did you know? Yellow Lab Tools has a brand new <a href="https://github.com/gmetais/grunt-yellowlabtools" target="_blank">Grunt plugin</a>!
     </div>
 
     <div class="tweet" ng-if="!error && !fromSocialShare">

front/src/views/domElementButton.html

@@ -1,7 +0,0 @@
-<div class="offenderButton" ng-class="{opens: obj.tree}">
-    <span ng-if="obj.type == 'html' || obj.type == 'body' || obj.type == 'head' || obj.type == 'window' || obj.type == 'document' || obj.type == 'fragment'"><b>{{obj.type}}</b></span>
-    <span ng-if="obj.type == 'domElement'">DOM element <b>{{obj.element}}</b></span>
-    <span ng-if="obj.type == 'fragmentElement'">Fragment element <b>{{obj.element}}</b></span>
-    <span ng-if="obj.type == 'createdElement'">Created element <b>{{obj.element}}</b></span>
-    <dom-tree ng-if="obj.tree" tree="obj.tree"></dom-tree>
-</div>

front/src/views/index.html

@@ -1,8 +1,77 @@
-<h2 class="promess">Free online test to help speeding up <b>heavy</b> web pages</h2>
+<h2 class="promess">Online test to help speeding up <b>heavy</b> web pages</h2>
+<p class="price">Free and open source!</p>
 
 <form ng-submit="launchTest()" >
-    <input type="text" name="url" ng-model="url" placeholder="http://www.mysite.com" class="url" />
+    <input type="{{$root.isTouchDevice? 'url' : 'text'}}" name="url" ng-model="url" placeholder="http://www.mysite.com" class="url" />
     <input type="submit" value="Launch test" class="launchBtn" ng-class="{disabled: !url}" />
+    <div class="settings">
+        <div class="device">
+            <div>Choose the simulated device:</div>
+            <a href="" class="item" ng-class="{active: settings.device == 'desktop'}" ng-click="settings.device = 'desktop'"><div class="icon-screen"></div>Desktop</a>
+            <a href="" class="item" ng-class="{active: settings.device == 'tablet'}" ng-click="settings.device = 'tablet'"><div class="icon-tablet"></div>Tablet</a>
+            <a href="" class="item" ng-class="{active: settings.device == 'phone'}" ng-click="settings.device = 'phone'"><div class="icon-mobile"></div>Phone</a>
+        </div>
+        [ <a href="" class="showAdvanced" ng-click="settings.showAdvanced = !settings.showAdvanced">
+            <span ng-if="!settings.showAdvanced">Advanced settings &nbsp;✚</span>
+            <span ng-if="settings.showAdvanced">Hide advanced settings &nbsp;✖</span>
+        </a> ]
+        <span class="currentSettings" ng-if="!settings.showAdvanced && (settings.waitForSelector || settings.cookie || settings.authUser || settings.authPass)">
+            Currently set:
+            <span ng-if="settings.waitForSelector">wait for selector</span>
+            <span ng-if="settings.cookie">cookie</span>
+            <span ng-if="settings.authUser || settings.authPass">authentication</span>
+        </span>
+        <div class="advanced" ng-show="settings.showAdvanced">
+            <!--<div>
+                <div class="label">
+                    Wait selector
+                    <span class="settingsTooltip">
+                        <span class="icon-question"></span>
+                        <div><b>Wait for a CSS selector</b><br><br>Once the page is considered loaded, PhantomJS will repeatedly try to match the given CSS selector until it is found in the page. A 60 seconds timeout still applies anyway.<br><br>Example: "body.loaded"</div>
+                    </span>
+                </div>
+                <div><input type="text" name="waitForSelector" ng-model="settings.waitForSelector" /></div>
+            </div>-->
+            <div>
+                <div class="label">
+                    Cookie
+                    <span class="settingsTooltip">
+                        <span class="icon-question"></span>
+                        <div><b>Cookie</b><br><br>Adds a cookie on the main domain.<br><br>Example: "bar=foo;domain=url"</div>
+                    </span>
+                </div>
+                <div><input type="text" name="cookie" ng-model="settings.cookie" /></div>
+            </div>
+            <!--<div>
+                <div class="label">
+                    Authent
+                    <span class="settingsTooltip">
+                        <span class="icon-question"></span>
+                        <div><b>Basic HTTP authentication</b><br><br>Enter your credentials here if you need to bypass a basic authentication.<br><br><i>PS: if your authentication is not basic, you might be able to copy the session cookie from your browser, paste it in the "Cookie" setting and launch a run before your cookie expires.</i></div>
+                    </span>
+                </div>
+                <div class="subTable">
+                    <div>
+                        <div>username</div>
+                        <div><input type="text" class="authField" name="authUser" ng-model="settings.authUser" /></div>
+                    </div>
+                    <div>
+                        <div><span>password</div>
+                        <div><input type="text" class="authField" name="authPass" ng-model="settings.authPass" /></div>
+                    </div>
+                </div>
+            </div>-->
+            <!--<div>
+                <div class="label">Blocked domains</div>
+                <div>
+                    <div>
+                        Blacklist / Whitelist
+                    </div>
+                    <textarea name=""></textarea>
+                </div>
+            </div>-->
+        </div>
+    </div>
 </form>
 
 
@@ -21,4 +90,4 @@
         <h3>JS Profiling</h3>
         <p>Untangles the JavaScript spaghetti code</p>
     </div>
-</div>
+</div>

front/src/views/queue.html

@@ -26,7 +26,7 @@
 </div>
 <div ng-if="notFound == true">
     <div class="status">Error 404 (test not found)</div>
-    <p class="statusSubMessage">The server probably rebooted. We are very sorry about that, please try to launch the test again.</p>
+    <p class="statusSubMessage">The server probably just rebooted. We are very sorry about that, please try to launch the test again.</p>
     
     <a class="linkButton" href="/">New test</a>
 </div>

front/src/views/resultSubHeader.html

@@ -1,8 +1,8 @@
 <div>Tested url: &nbsp; <a href="{{result.params.url}}" target="_blank" class="testedUrl">{{result.params.url}}</a></div>
 
 <div class="resultsMenu">
-    <a class="menuItem back" href="/"><div class="icon-back"></div><span>New test<span></a>
+    <a class="menuItem back" href="/"><div class="icon-arrow-left3"></div><span>New test<span></a>
     <a class="menuItem restart" href="" ng-click="testAgain()"><div class="icon-loop"></div><span>Test again<span></a>
-    <div class="menuItem" ng-class="{active: Menu.getCurrentPage() == 'dashboard'}" ng-click="Menu.changePage('dashboard')"><div class="icon-summary"></div><span>Dashboard</span></div>
-    <div class="menuItem" ng-class="{active: Menu.getCurrentPage() == 'timeline'}" ng-click="Menu.changePage('timeline')"><div class="icon-spaghetti"></div><span>JS Timeline</span></div>
+    <div class="menuItem" ng-class="{active: Menu.getCurrentPage() == 'dashboard'}" ng-click="Menu.changePage('dashboard')"><div class="icon-list"></div><span>Dashboard</span></div>
+    <div class="menuItem" ng-class="{active: Menu.getCurrentPage() == 'timeline'}" ng-click="Menu.changePage('timeline')"><div class="icon-bars"></div><span>JS Timeline</span></div>
 </div>

front/src/views/rule.html

@@ -31,20 +31,25 @@
                         <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}}
-                    </div>
-
                     <div ng-if="policyName === 'DOMqueriesAvoidable'">
                         <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 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>
+                        <span ng-if="offender.target == 'window.onscroll'"><b>window.onscroll</b> function declared</span>
+                        <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'">
@@ -62,6 +67,23 @@
                         </div>
                     </div>
 
+                    <div ng-if="policyName === 'jQueryFunctionsUsed'">
+                        function <b>{{offender.functionName}}</b> used {{offender.count}} times
+                    </div>
+
+                    <div ng-if="policyName === 'documentWriteCalls'">
+                        <b>{{offender.writeFn}}</b>
+                        <span ng-if="offender.from">
+                            called from
+                            <span ng-if="offender.from.functionName">{{offender.from.functionName}}()</span>
+                            <url-link url="offender.from.file" max-length="50"></url-link>
+                            line {{offender.from.line}}
+                        </span>
+                        <span ng-if="!offender.from">
+                            called from (no backtrace available)
+                        </span>
+                    </div>
+
                     <div ng-if="policyName === 'cssParsingErrors'">
                         <b>{{offender.error}}</b>
                         <file-and-line file="offender.file" line="offender.line" column="offender.column"></file-and-line>
@@ -120,6 +142,11 @@
                         <url-link url="offender" max-length="100"></url-link>
                     </div>
 
+                    <div ng-if="policyName === 'assetsNotGzipped'">
+                        <url-link url="offender.file" max-length="100"></url-link>
+                        ({{offender.type}})
+                    </div>
+
                     <div ng-if="policyName === 'cachingTooShort'">
                         <url-link url="offender.file" max-length="100"></url-link>
                         cached for <b>{{offender.ttlWithUnit}} {{offender.unit}}</b>
@@ -145,16 +172,48 @@
                 <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">
                     <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>{{rule.value}} offenders</h3>
+        Please open the <a href="/result/{{runId}}/timeline">JS timeline</a>
+    </div>
+
+    <div ng-if="policyName === 'queriesWithoutResults'">
+        <h3>{{rule.value}} offenders</h3>
+        Please open the <a href="/result/{{runId}}/timeline#filter=queryWithoutResults">JS timeline, filtered by "Queries without results"</a>
+    </div>
+
+    <div ng-if="policyName === 'jQueryCallsOnEmptyObject'">
+        <h3>{{rule.value}} offenders</h3>
+        Please open the <a href="/result/{{runId}}/timeline#filter=jQueryCallOnEmptyObject">JS timeline, filtered by "jQuery calls on empty object"</a>
+    </div>
+
+    <div ng-if="policyName === 'jQueryNotDelegatedEvents'">
+        <h3>{{rule.value}} offenders</h3>
+        Please open the <a href="/result/{{runId}}/timeline#filter=eventNotDelegated">JS timeline, filtered by "Events not delegated"</a>
+    </div>
+
     <div ng-if="!rule && rule !== null" class="notFound">
         <h2>404</h2>
         Rule "{{policyName}}"" not found

front/src/views/screenshot.html

@@ -2,9 +2,10 @@
 <div class="screenshot board">
     <h2>Screenshot</h2>
 
-    <div class="screenshotWrapper desktop">
+    <div class="screenshotWrapper" ng-class="result.params.options.device || 'desktop'">
         <div>
-            <img class="screenshotImage" ng-src="{{result.screenshotUrl}}"/>
+            <img ng-if="result.screenshotUrl" class="screenshotImage" ng-src="{{result.screenshotUrl}}"/>
+            <span ng-if="!result.screenshotUrl" class="screenshotError">Screenshot not available</span>
         </div>
     </div>
 

front/src/views/timeline.html

@@ -1,7 +1,14 @@
 <div ng-include="'views/resultSubHeader.html'"></div>
 <div class="execution board">
-    <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="selectScript" ng-class="{empty:!selectedScript}">
+        Filter timeline and profiler by script:
+        <select ng-model="selectedScript" ng-options="script.shortPath for script in scripts" ng-change="changeScript()">
+            <option value="">All (no filter)</option>
+        </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>
 
     <div class="timeline">
         <div class="chart">
@@ -9,18 +16,20 @@
                 <div ng-repeat="duration in timeline track by $index"
                      class="interval"
                      ng-class="{
-                        domCreation: $index * timelineIntervalDuration < result.toolsResults.phantomas.metrics.domInteractive,
-                        domInteractive: $index * timelineIntervalDuration >= result.toolsResults.phantomas.metrics.domInteractive
-                            && $index * timelineIntervalDuration < result.toolsResults.phantomas.metrics.domContentLoaded,
-                        domContentLoaded: $index * timelineIntervalDuration >= result.toolsResults.phantomas.metrics.domContentLoaded
-                            && $index * timelineIntervalDuration < result.toolsResults.phantomas.metrics.domContentLoadedEnd,
-                        domContentLoadedEnd: $index * timelineIntervalDuration >= result.toolsResults.phantomas.metrics.domContentLoadedEnd
-                            && $index * timelineIntervalDuration < result.toolsResults.phantomas.metrics.domComplete,
-                        domComplete: $index * timelineIntervalDuration >= result.toolsResults.phantomas.metrics.domComplete
+                        domCreation: $index * timelineIntervalDuration < result.javascriptExecutionTree.data.domInteractive,
+                        domInteractive: $index * timelineIntervalDuration >= result.javascriptExecutionTree.data.domInteractive
+                            && $index * timelineIntervalDuration < result.javascriptExecutionTree.data.domContentLoaded,
+                        domContentLoaded: $index * timelineIntervalDuration >= result.javascriptExecutionTree.data.domContentLoaded
+                            && $index * timelineIntervalDuration < result.javascriptExecutionTree.data.domContentLoadedEnd,
+                        domContentLoadedEnd: $index * timelineIntervalDuration >= result.javascriptExecutionTree.data.domContentLoadedEnd
+                            && $index * timelineIntervalDuration < result.javascriptExecutionTree.data.domComplete,
+                        domComplete: $index * timelineIntervalDuration >= result.javascriptExecutionTree.data.domComplete
                      }">
-                    <div style="height: {{100 * duration / timelineMax | number: 0}}px" class="color"></div>
+                    <div style="height: {{100 * duration / timelineMax | number: 0}}px" class="color" ng-class="{clickable: duration > 0}" scroll-on-click="{{$index * timelineIntervalDuration}}"></div>
                     <div class="tooltip detailsOverlay">
-                        <div>Timestamp: {{$index * timelineIntervalDuration | number: 0}} ms</div>
+                        <div>
+                            Timestamp: {{$index * timelineIntervalDuration | number: 0}} ms
+                        </div>
                     </div>
                 </div>
             </div>
@@ -36,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>
@@ -45,24 +54,36 @@
         </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>
-            <input type="checkbox" ng-model="warningsFilterOn" id="warningsFilterOn" />
-            <label for="warningsFilterOn">Show warnings only</label>
-        </div>
-        <div>
-            <input type="checkbox" ng-model="textFilterOn" />
-            Filter by
-            <input type="text" ng-model="textFilter" placeholder="search..." class="textFilter" ng-change="textFilterOn = true" />
+            <input type="checkbox" name="warningsFilter" ng-model="warningsFilterOn" id="warningsFilterOn" />
+            <label for="warningsFilterOn">Filter on warnings and errors</label>
+            <div class="subFilters" ng-if="warningsFilterOn">
+                <div>
+                    <input type="checkbox" name="filters" ng-model="warningsFilters.queryWithoutResults" id="queryWithoutResultsFilterOn"/>
+                    <label for="queryWithoutResultsFilterOn">Queries without results</label>
+                </div>
+                <div>
+                    <input type="checkbox" name="filters" ng-model="warningsFilters.jQueryCallOnEmptyObject" id="jQueryCallOnEmptyObjectFilterOn" />
+                    <label for="jQueryCallOnEmptyObjectFilterOn">jQuery calls on empty object</label>
+                </div>
+                <div>
+                    <input type="checkbox" name="filters" ng-model="warningsFilters.eventNotDelegated" id="eventNotDelegatedFilterOn" />
+                    <label for="eventNotDelegatedFilterOn">Events not delegated</label>
+                </div>
+                <div>
+                    <input type="checkbox" name="filters" ng-model="warningsFilters.jsError" id="jsErrorFilterOn" />
+                    <label for="jsErrorFilterOn">Errors</label>
+                </div>
+            </div>
         </div>
+        {{queryWithoutResultsFilterOn}}
     </div>
-    <div class="table">
-
-        <toto data-info="mavariable"></toto>
+    <div class="table" ng-class="{queryWithoutResultsFilterOn: warningsFilterOn && warningsFilters.queryWithoutResults, jQueryCallOnEmptyObjectFilterOn: warningsFilterOn && warningsFilters.jQueryCallOnEmptyObject, eventNotDelegatedFilterOn: warningsFilterOn && warningsFilters.eventNotDelegated, jsErrorFilterOn: warningsFilterOn && warningsFilters.jsError}">
         <div class="headers">
             <div><!-- index --></div>
             <div>Type</div>
@@ -70,74 +91,9 @@
             <div><!-- details --></div>
             <div>Timestamp</div>
         </div>
-        <div ng-if="(!warningsFilterOn || node.warning || node.error) && (!textFilterOn || !textFilter.length || node.searchIndex.indexOf(textFilter) >= 0)"
-             ng-repeat="node in profilerData" ng-class="{
-                showingDetails: node.showDetails,
-                jsError: node.error,
-                windowPerformance: node.windowPerformance
-            }">
 
-            <div class="index">{{$index + 1}}</div>
-            <div class="type">{{node.data.type}}</div>
+        <profiler-line ng-repeat="node in profilerData" data-index="$index" node="node"></profiler-line>
 
-            <div class="value">
-                {{node.data.callDetails.arguments[0]}}
-                <span ng-if="node.data.callDetails.arguments.length > 1"> : {{node.data.callDetails.arguments[1]}}</span>
-                <span ng-if="node.data.callDetails.arguments.length > 2"> : {{node.data.callDetails.arguments[2]}}</span>
-                <span ng-if="node.data.callDetails.arguments.length > 3"> : {{node.data.callDetails.arguments[3]}}</span>
-            </div>
-            
-            <div class="details">
-                <div ng-class="{'icon-question': !node.warning && !node.error, 'icon-warning': node.warning || node.error}"
-                     ng-click="onNodeDetailsClick(node)"
-                     ng-if="node.data.type != 'jQuery loaded' && node.data.type != 'jQuery version change' && !node.windowPerformance"></div>
-                
-                <div class="detailsOverlay" ng-if="node.showDetails">
-                    <div class="closeBtn" ng-click="onNodeDetailsClick(node)">✖</div>
-
-                    <div ng-if="node.data.callDetails.context.domElement">
-                        <h4>Called on DOM element</h4>
-                        <div>{{node.data.callDetails.context.domElement}}</div>
-                    </div>
-
-                    <div ng-if="node.data.callDetails.context.length === 0">
-                        <h4>Called on 0 jQuery element</h4>
-                        <p class="advice">Useless function call, as the jQuery object is empty.</p>
-                    </div>
-
-                    <div ng-if="node.data.callDetails.context.length == 1 && node.data.callDetails.context.firstElementPath">
-                        <h4>Called on 1 jQuery element</h4>
-                        <div>{{node.data.callDetails.context.firstElementPath}}</div>
-                    </div>
-
-                    <div ng-if="node.data.callDetails.context.length > 1">
-                        <h4>Called on {{node.data.callDetails.context.length}} jQuery elements</h4>
-                        <p class="advice" ng-if="node.data.type == 'jQuery - bind' && node.data.callDetails.context.length > 5">
-                            The .bind() method attaches the event listener to each jQuery element one by one. Using the .on() method is preferable if available (from v1.7).
-                        </p>
-                        <p ng-if="node.data.callDetails.context.firstElementPath"><b>First one is:</b> {{node.data.callDetails.context.firstElementPath}}</p>
-                    </div>
-
-                    <p class="advice" ng-if="node.data.resultsNumber === 0">
-                        The query returned 0 results. Could it be unused or dead code?
-                    </p>
-
-                    <div ng-if="node.parsedBacktrace">
-                        <h4>Backtrace</h4>
-                        <div class="table">
-                            <div ng-repeat="trace in node.parsedBacktrace track by $index">
-                                <div>{{trace.fnName || '(anonymous)'}}</div>
-                                <div class="trace"><a href="{{trace.filePath}}" title="{{trace.filePath}}" target="_blank">{{trace.fileName || 'HTML'}}</a>:{{trace.line}}</div>
-                            </div>
-                            <div ng-if="node.parsedBacktrace.length == 0 && node.data.type != 'script loaded'">
-                                <div>can't find any backtrace :/</div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="startTime" ng-class="node.data.loadingStep">{{node.data.timestamp | number: 0}} ms</div>
-        </div>
     </div>
 
     <div class="backToDashboard"><a href="#" ng-click="backToDashboard()">Back to dashboard</a></div>

lib/metadata/policies.js

@@ -66,73 +66,23 @@ var policies = {
             };
         }
     },
-    "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>",
+    "DOMaccesses": {
+        "tool": "jsExecutionTransformer",
+        "label": "DOM access",
+        "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": 1000,
-        "isAbnormalThreshold": 2000,
+        "isBadThreshold": 1500,
+        "isAbnormalThreshold": 3000,
         "hasOffenders": false
     },
-    "DOMqueriesWithoutResults": {
-        "tool": "phantomas",
-        "label": "DOM queries without result",
-        "message": "<p>Number of queries that return no result.</p><p>It suggests the query is not used on the page, probably because it is some dead code.</p><p>Or maybe the code is trying to find an HTML block that is not always here. Look at the JS Timeline to see if the scripts correctly figures out the HTML block is not here and immediatly stops interacting further with the DOM.</p>",
+    "queriesWithoutResults": {
+        "tool": "jsExecutionTransformer",
+        "label": "Queries without result",
+        "message": "<p>Number of queries that return no result. Both native and jQuery DOM requests are counted.</p><p>It suggests the query is not used on the page, probably because it is some dead code.</p><p>Or maybe the code is trying to find an HTML block that is not always here. Look at the JS Timeline to see if the scripts correctly figures out the HTML block is not here and immediatly stops interacting further with the DOM.</p>",
         "isOkThreshold": 0,
         "isBadThreshold": 100,
         "isAbnormalThreshold": 200,
-        "hasOffenders": true,
-        "offendersTransformFn": function(offenders) {
-            return {
-                count: offenders.length,
-                list: offenders.map(function(offender) {
-                    var parts = /^(.*) ?\(in ?(.*)\) ?using ?(.*)$/.exec(offender);
-
-                    if (!parts) {
-                        debug('DOMqueriesWithoutResults offenders transform function error with "%s"', offender);
-                        return {
-                            parseError: offender
-                        };
-                    }
-
-                    return {
-                        query: parts[1],
-                        context: offendersHelpers.domPathToDomElementObj(parts[2]),
-                        fn: parts[3]
-                    };
-                })
-            };
-        }
+        "hasOffenders": false
     },
     "DOMqueriesAvoidable": {
         "tool": "phantomas",
@@ -166,35 +116,49 @@ var policies = {
             };
         }
     },
-    "eventsBound": {
+    "eventsScrollBound": {
         "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,
+        "label": "Scroll events bound",
+        "message": "<p>Number of 'scroll' event listeners binded to 'window' or 'document'.</p><p>Asking too much work to the browser on scroll hurts the smoothness of the scroll. Merging all your event listeners into an unique listener can help you factorize their code and reduce their footprint on scroll.</p>",
+        "isOkThreshold": 1,
+        "isBadThreshold": 7,
+        "isAbnormalThreshold": 12,
         "hasOffenders": true,
         "offendersTransformFn": function(offenders) {
             return {
                 count: offenders.length,
                 list: offenders.map(function(offender) {
-                    var parts = /^"(.*)" ?bound ?to ?"(.*)"$/.exec(offender);
+                    var parts = /^bound by (.*) on ([^ ]+)$/.exec(offender);
 
                     if (!parts) {
-                        debug('eventsBound offenders transform function error with "%s"', offender);
+                        debug('eventsScrollBound offenders transform function error with "%s"', offender);
                         return {
                             parseError: offender
                         };
                     }
 
+                    var backtraceArray = offendersHelpers.backtraceToArray(parts[1]);
+                    
                     return {
-                        eventName: parts[1],
-                        element: offendersHelpers.domPathToDomElementObj(parts[2])
+                        backtrace: backtraceArray || [],
+                        target: parts[2]
                     };
                 })
             };
         }
     },
+    "DOMaccessesOnScroll": {
+        "tool": "jsExecutionTransformer",
+        "label": "DOM access on scroll",
+        "message": "<p>This rule counts the number of DOM-accessing functions calls, such as queries, readings, writings, bindings and jQuery functions.</p><p>Two scroll events are triggered quickly, one after the other, and only the second one is analyzed so throttled functions are ignored.</p><p>One of the main reasons of a poor scrolling experience is when too much JS is executed on each scroll event. Note that some devices such as smartphones and MacBooks send more scroll events than others.</p><p>Reduce the number of DOM accesses inside scroll listeners. Put DOM queries outside them when possible. Use <a href=\"http://blogorama.nerdworks.in/javascriptfunctionthrottlingan/\" target=\"_blank\">throttling or deboucing</a>.</p>",
+        "isOkThreshold": 1,
+        "isBadThreshold": 12,
+        "isAbnormalThreshold": 25,
+        "hasOffenders": true,
+        "offendersTransformFn": function(offenders) {
+            return offenders;
+        }
+    },
     "jsErrors": {
         "tool": "phantomas",
         "label": "JavaScript errors",
@@ -226,7 +190,7 @@ var policies = {
             };
         }
     },
-    "evalCalls": {
+    /*"evalCalls": {
         "tool": "phantomas",
         "label": "eval calls",
         "message": "<p>The 'eval' function is slow and is a bad coding practice. Try to get rid of it.</p>",
@@ -234,7 +198,7 @@ var policies = {
         "isBadThreshold": 10,
         "isAbnormalThreshold": 20,
         "hasOffenders": false
-    },
+    },*/
     "documentWriteCalls": {
         "tool": "phantomas",
         "label": "document.write calls",
@@ -242,7 +206,49 @@ var policies = {
         "isOkThreshold": 0,
         "isBadThreshold": 10,
         "isAbnormalThreshold": 20,
-        "hasOffenders": false
+        "hasOffenders": true,
+        "offendersTransformFn": function(offenders) {
+            return {
+                count: offenders.length,
+                list: offenders.map(function(offender) {
+                    var parts = /^document.write(ln)?\(\) used from (.*)$/.exec(offender);
+
+                    if (parts) {
+
+                        var writeFn = 'document.write' + (parts[1] || '');
+
+                        var methodParts = /^([^\s]+) \((.+):(\d+)\)$/.exec(parts[2]);
+                        if (methodParts) {
+                            return {
+                                writeFn: writeFn,
+                                from: {
+                                    functionName: methodParts[1],
+                                    file: methodParts[2],
+                                    line: methodParts[3]
+                                }
+                            };
+                        } else {
+                            var noMethodParts = /^(.+):(\d+)$/.exec(parts[2]);
+
+                            if (noMethodParts) {
+                                return {
+                                    writeFn: writeFn,
+                                    from: {
+                                        file: noMethodParts[1],
+                                        line: noMethodParts[2]
+                                    }
+                                };
+                            }
+                        }
+                    }
+
+                    debug('documentWriteCalls offenders transform function error with "%s"', offender);
+                    return {
+                        parseError: offender
+                    };
+                })
+            };
+        }
     },
     "consoleMessages": {
         "tool": "phantomas",
@@ -257,9 +263,9 @@ var policies = {
         "tool": "phantomas",
         "label": "Global variables",
         "message": "<p>It is a bad practice because they clutter up the global namespace. If two scripts use the same variable name in the global scope, it can cause conflicts and it is generally hard to debug.</p><p>Global variables also take a (very) little bit longer to be accessed than variables in the local scope of a function.</p>",
-        "isOkThreshold": 10,
-        "isBadThreshold": 50,
-        "isAbnormalThreshold": 200,
+        "isOkThreshold": 30,
+        "isBadThreshold": 100,
+        "isAbnormalThreshold": 400,
         "hasOffenders": true,
         "offendersTransformFn": function(offenders) {
             return {
@@ -295,17 +301,17 @@ var policies = {
                     score = 70;
                 } else if (value.indexOf('1.8.') === 0) {
                     score = 50;
-                } else if (value.indexOf('1.7.') === 0) {
+                } else if (value.indexOf('1.7') === 0) {
                     score = 40;
-                } else if (value.indexOf('1.6.') === 0) {
+                } else if (value.indexOf('1.6') === 0) {
                     score = 30;
-                } else if (value.indexOf('1.5.') === 0) {
+                } else if (value.indexOf('1.5') === 0) {
                     score = 20;
-                } else if (value.indexOf('1.4.') === 0) {
+                } else if (value.indexOf('1.4') === 0) {
                     score = 10;
-                } else if (value.indexOf('1.3.') === 0) {
+                } else if (value.indexOf('1.3') === 0) {
                     score = 0;
-                } else if (value.indexOf('1.2.') === 0) {
+                } else if (value.indexOf('1.2') === 0) {
                     score = 0;
                 } else {
                     debug('Unknown jQuery version "%s"', value);
@@ -329,39 +335,88 @@ var policies = {
     },
     "jQueryVersionsLoaded": {
         "tool": "phantomas",
-        "label": "Several versions loaded",
+        "label": "Several jQuery loaded",
         "message": "<p>jQuery is a heavy library. You should <b>never</b> load jQuery more than once on the same page.</p>",
         "isOkThreshold": 1,
         "isBadThreshold": 2,
         "isAbnormalThreshold": 2,
         "hasOffenders": true
     },
+    "jQueryFunctionsUsed": {
+        "tool": "jsExecutionTransformer",
+        "label": "jQuery usage",
+        "message": "<p>This is the number of different core jQuery functions called on load. This rule is not trying to blame you for using jQuery too much, but the opposite.</p><p>If only a few functions are used, why not trying to get rid of jQuery? Have a look at <a href=\"http://youmightnotneedjquery.com/\" target=\"_blank\">http://youmightnotneedjquery.com</a>.</p>",
+        "isOkThreshold": 15,
+        "isBadThreshold": 6,
+        "isAbnormalThreshold": 0,
+        "hasOffenders": true
+    },
+    "jQueryCallsOnEmptyObject": {
+        "tool": "jsExecutionTransformer",
+        "label": "Calls on empty objects",
+        "message": "<p>This metric counts the number of jQuery functions called on an empty jQuery object. The call was useless.</p><p>This can be helpful to detect dead or unused code.</p>",
+        "isOkThreshold": 1,
+        "isBadThreshold": 100,
+        "isAbnormalThreshold": 180,
+        "hasOffenders": false
+    },
+    "jQueryNotDelegatedEvents": {
+        "tool": "jsExecutionTransformer",
+        "label": "Events not delegated",
+        "message": "<p>This is the number of events that are bound with the .bind() or the .on() function without using <a href=\"https://learn.jquery.com/events/event-delegation/\" target=\"_blank\">event delegation</a>.</p><p>This means jQuery binds each element contained in the object one by one. This is bad for performance.</p>",
+        "isOkThreshold": 1,
+        "isBadThreshold": 100,
+        "isAbnormalThreshold": 180,
+        "hasOffenders": false
+    },
     "cssParsingErrors": {
         "tool": "phantomas",
         "label": "CSS syntax error",
         "message": "<p>Yellow Lab Tools failed to parse a CSS file. I doubt the problem comes from the css parser.</p><p>Maybe a <a href=\"http://jigsaw.w3.org/css-validator\" target=\"_blank\">CSS validator</a> can help you.</p>",
         "isOkThreshold": 0,
         "isBadThreshold": 1,
-        "isAbnormalThreshold": 1,
+        "isAbnormalThreshold": 8,
         "hasOffenders": true,
         "offendersTransformFn": function(offenders) {
             return {
                 count: offenders.length,
                 list: offenders.map(function(offender) {
-                    var parts = /^(?:(?:<([^ \(]*)>|\[inline CSS\]) ?)?(?:\((((?! @ ).)*)(?: @ (\d+):(\d+))?\))?$/.exec(offender);
-
-                    if (!parts) {
-                        debug('cssParsingErrors offenders transform function error with "%s"', offender);
+                    if (offender === '[inline CSS] (Empty CSS was provided)') {
                         return {
-                            parseError: offender
+                            error: 'Empty style tag',
+                            file: null,
+                            line: null,
+                            column: null
                         };
                     }
 
+                    var parts = /^(?:(?:<([^ \(]*)>|\[inline CSS\]) ?)?(?:\((((?! @ ).)*)(?: @ (\d+):(\d+))?\))?$/.exec(offender);
+
+                    if (parts) {
+                        return {
+                            error: parts[2] || 'Unknown parsing error' + (parts[1] ? '. The entire file was ignored. As a result, the other CSS metrics and scores are miscalculated.' : ''),
+                            file: parts[1] || null,
+                            line: (parts[4] && parts[5]) ? parseInt(parts[4], 10) : null,
+                            column: (parts[4] && parts[5]) ? parseInt(parts[5], 10) : null
+                        };
+                    }
+
+                    // Try another syntax
+                    parts = /^(.*) <(.*)> @ (\d+):(\d+)$/.exec(offender);
+
+                    if (parts) {
+                        return {
+                            error: parts[1] || 'Unknown parsing error',
+                            file: parts[2] || null,
+                            line: parseInt(parts[3], 10),
+                            column: parseInt(parts[4], 10)
+                        };
+                    }
+
+
+                    debug('cssParsingErrors offenders transform function error with "%s"', offender);
                     return {
-                        error: parts[2],
-                        file: parts[1] || null,
-                        line: (parts[4] && parts[5]) ? parseInt(parts[4], 10) : null,
-                        column: (parts[4] && parts[5]) ? parseInt(parts[5], 10) : null
+                        parseError: offender
                     };
                 })
             };
@@ -371,9 +426,9 @@ var policies = {
         "tool": "phantomas",
         "label": "Rules count",
         "message": "<p>Having a huge number of CSS rules hurts performances. If the number of CSS rules is higher than the number of DOM elements, there is clearly a problem.</p><p>Huge stylesheets generally occur when the different pages of a website load all the CSS, concatenated in a single stylesheet, even if a large part of the rules are page-specific. Solution is to create one main CSS file with global rules and one custom file per page.</p>",
-        "isOkThreshold": 500,
-        "isBadThreshold": 2500,
-        "isAbnormalThreshold": 4000,
+        "isOkThreshold": 750,
+        "isBadThreshold": 3000,
+        "isAbnormalThreshold": 4500,
         "hasOffenders": false
     },
     "cssComplexSelectors": {
@@ -381,7 +436,7 @@ var policies = {
         "label": "Complex selectors",
         "message": "<p>Complex selectors are CSS selectors with 4 or more expressions, like \"#header ul li .foo\".</p><p>They are adding more work for the browser, and this could be avoided by simplifying selectors.</p>",
         "isOkThreshold": 0,
-        "isBadThreshold": 500,
+        "isBadThreshold": 600,
         "isAbnormalThreshold": 2000,
         "hasOffenders": true,
         "offendersTransformFn": function(offenders) {
@@ -399,8 +454,8 @@ var policies = {
         "label": "Complex attributes selector",
         "message": "<p>Complex attributes selectors are one of these:<ul><li>.foo[type*=bar] (contains bar)</li><li>.foo[type^=bar] (starts with bar)</li><li>.foo[type|=bar] (starts with bar or bar-)</li><li>.foo[type$=bar] (ends with bar)</li><li>.foo[type~=bar baz] (bar or baz)</li></ul></p><p>Their matching process needs more CPU and it has a cost on performances.</p>",
         "isOkThreshold": 0,
-        "isBadThreshold": 50,
-        "isAbnormalThreshold": 100,
+        "isBadThreshold": 75,
+        "isAbnormalThreshold": 150,
         "hasOffenders": true,
         "offendersTransformFn": function(offenders) {
             return {
@@ -484,8 +539,8 @@ var policies = {
         "label": "Duplicated selectors",
         "message": "<p>This is when two or more selectors are strictly identical and should be merged.</p>",
         "isOkThreshold": 0,
-        "isBadThreshold": 40,
-        "isAbnormalThreshold": 80,
+        "isBadThreshold": 50,
+        "isAbnormalThreshold": 100,
         "hasOffenders": true,
         "offendersTransformFn": function(offenders) {
             return {
@@ -513,8 +568,8 @@ var policies = {
         "label": "Duplicated properties",
         "message": "<p>This is the number of property definitions duplicated within a selector.</p>",
         "isOkThreshold": 0,
-        "isBadThreshold": 50,
-        "isAbnormalThreshold": 100,
+        "isBadThreshold": 60,
+        "isAbnormalThreshold": 120,
         "hasOffenders": true,
         "offendersTransformFn": function(offenders) {
             return {
@@ -547,7 +602,7 @@ var policies = {
         "label": "Empty rules",
         "message": "<p>Very easy to fix: remove all empty rules.</p>",
         "isOkThreshold": 0,
-        "isBadThreshold": 40,
+        "isBadThreshold": 50,
         "isAbnormalThreshold": 100,
         "hasOffenders": true,
         "offendersTransformFn": function(offenders) {
@@ -601,8 +656,8 @@ var policies = {
         "label": "Uses of !important",
         "message": "<p>It can be useful, but only as a last resort. It is a bad practice because it overrides the normal cascading logic. The more you use !important, the more you need it again to over-override. This conducts to a poor maintainability.</p>",
         "isOkThreshold": 0,
-        "isBadThreshold": 50,
-        "isAbnormalThreshold": 150,
+        "isBadThreshold": 75,
+        "isAbnormalThreshold": 200,
         "hasOffenders": true,
         "offendersTransformFn": function(offenders) {
             return {
@@ -636,7 +691,7 @@ var policies = {
         "label": "Old IE fixes",
         "message": "<p>What browser do you need to support? Once you've got the answer, take a look at these old rules that pollute your CSS code and remove them.</p><p>IE6:<ul><li>* html</li><li>html > body (everything but IE6)</li></ul><p><p>IE7:<ul><li><b>*</b>height: 123px;</li><li>height: 123px <b>!ie</b>;</li></ul><p><p>IE9:<ul><li>-ms-filter</li><li>progid:DXImageTransform.Microsoft</li></ul></p>",
         "isOkThreshold": 0,
-        "isBadThreshold": 50,
+        "isBadThreshold": 75,
         "isAbnormalThreshold": 300,
         "hasOffenders": true,
         "offendersTransformFn": function(offenders) {
@@ -693,7 +748,7 @@ var policies = {
         "label": "Old prefixes",
         "message": "<p>Many property prefixes such as -moz- or -webkit- are not needed anymore, or by very few people. You can remove them or replace them with the non-prefixed version. This will help reducing your stylesheets weight.</p>",
         "isOkThreshold": 0,
-        "isBadThreshold": 50,
+        "isBadThreshold": 75,
         "isAbnormalThreshold": 300,
         "hasOffenders": true,
         "offendersTransformFn": function(offenders) {
@@ -729,7 +784,7 @@ var policies = {
         "label": "Universal selectors",
         "message": "<p>Universal selectors are the most expensive CSS selectors.</p><p>More informations <a href=\"http://perfectionkills.com/profiling-css-for-fun-and-profit-optimization-notes/\" target=\"_blank\">here</a>.</p>",
         "isOkThreshold": 0,
-        "isBadThreshold": 40,
+        "isBadThreshold": 50,
         "isAbnormalThreshold": 150,
         "hasOffenders": true,
         "offendersTransformFn": function(offenders) {
@@ -747,7 +802,7 @@ var policies = {
         "label": "Redundant body selectors",
         "message": "<p>This is one way to remove complexity from a CSS rule. Generally, when \"body\" is specified in a rule it can be removed, because an element is necessarily inside the body.</p>",
         "isOkThreshold": 0,
-        "isBadThreshold": 50,
+        "isBadThreshold": 60,
         "isAbnormalThreshold": 200,
         "hasOffenders": true,
         "offendersTransformFn": function(offenders) {
@@ -768,7 +823,7 @@ var policies = {
         "label": "Redundant tags selectors",
         "message": "<p>Some tags included inside other tags are obvious. For example, when \"ul li\" is specified in a rule, \"ul\" can be removed because the \"li\" element is <b>always</b> inside a \"ul\". Same thing for \"tr td\", \"select option\", ...</p><p>Lowering compexity in CSS selectors can make the page load a little faster.</p>",
         "isOkThreshold": 0,
-        "isBadThreshold": 50,
+        "isBadThreshold": 60,
         "isAbnormalThreshold": 200,
         "hasOffenders": true,
         "offendersTransformFn": function(offenders) {
@@ -890,7 +945,7 @@ var policies = {
         "tool": "phantomas",
         "label": "Font count",
         "message": "<p>Fonts are loaded on the critical path of the head. Load as few as possible.</p>",
-        "isOkThreshold": 0,
+        "isOkThreshold": 1,
         "isBadThreshold": 3,
         "isAbnormalThreshold": 5,
         "hasOffenders": true,
@@ -1014,6 +1069,35 @@ var policies = {
         "isAbnormalThreshold": 1,
         "hasOffenders": true
     },
+    "assetsNotGzipped": {
+        "tool": "phantomas",
+        "label": "Not gzipped",
+        "message": "<p>This is the number of requests that should be compressed with gzip but aren't.</p><p>Gzip is a powerfull weight reducer and should be enabled on text-based assets in your server's configuration. Note that gzipping small files (< 1 KB) is arguable, and that some assets such as images should not be gzipped as they are already compressed. <a href=\"https://gist.github.com/gmetais/971ce13a1fbeebd88445\" target=\"_blank\">Here</a> is a list of Content-Types that should be gzipped.</p>",
+        "isOkThreshold": 0,
+        "isBadThreshold": 12,
+        "isAbnormalThreshold": 20,
+        "hasOffenders": true,
+        "offendersTransformFn": function(offenders) {
+            return {
+                count: offenders.length,
+                list: offenders.map(function(offender) {
+                    var parts = /^([^ ]*) \((.+)\)$/.exec(offender);
+
+                    if (!parts) {
+                        debug('assetsNotGzipped offenders transform function error with "%s"', offender);
+                        return {
+                            parseError: offender
+                        };
+                    }
+
+                    return {
+                        file: parts[1],
+                        type: parts[2]
+                    };
+                })
+            };
+        }
+    },
     "closedConnections": {
         "tool": "phantomas",
         "label": "Connections closed",
@@ -1134,7 +1218,6 @@ var policies = {
                         domain: parts[1],
                         requests: parseInt(parts[2])
                     };
-
                 })
             };
         }

lib/metadata/scoreProfileGeneric.json

@@ -12,11 +12,16 @@
         "domManipulations": {
             "label": "DOM manipulations",
             "policies": {
-                "DOMinserts": 2,
-                "DOMqueries": 1,
-                "DOMqueriesWithoutResults": 2,
-                "DOMqueriesAvoidable": 2,
-                "eventsBound": 1
+                "DOMaccesses": 3,
+                "queriesWithoutResults": 1,
+                "DOMqueriesAvoidable": 1
+            }
+        },
+        "scroll": {
+            "label": "Scroll bottlenecks",
+            "policies": {
+                "eventsScrollBound": 1,
+                "DOMaccessesOnScroll": 4
             }
         },
         "badJavascript": {
@@ -28,17 +33,14 @@
                 "globalVariables": 0.5
             }
         },
-        "jQueryVersion": {
-            "label": "jQuery version",
+        "jQuery": {
+            "label": "jQuery",
             "policies": {
-                "jQueryVersion": 5,
-                "jQueryVersionsLoaded": 0.1
-            }
-        },
-        "cssSyntaxError": {
-            "label": "CSS syntax errors",
-            "policies": {
-                "cssParsingErrors": 1
+                "jQueryVersion": 2,
+                "jQueryVersionsLoaded": 2,
+                "jQueryFunctionsUsed": 1,
+                "jQueryCallsOnEmptyObject": 1,
+                "jQueryNotDelegatedEvents": 1
             }
         },
         "cssComplexity": {
@@ -53,6 +55,7 @@
         "badCSS": {
             "label": "Bad CSS",
             "policies": {
+                "cssParsingErrors": 4,
                 "cssImports": 3,
                 "cssDuplicatedSelectors": 2,
                 "cssDuplicatedProperties": 1,
@@ -91,9 +94,11 @@
         "network": {
             "label": "Network",
             "policies": {
-                "notFound": 3,
-                "closedConnections": 3,
-                "multipleRequests": 3,
+                "notFound": 2,
+                "assetsNotGzipped": 1.5,
+                "closedConnections": 2,
+                "multipleRequests": 2,
+                "cachingNotSpecified": 1,
                 "cachingDisabled": 1,
                 "cachingTooShort": 1,
                 "domains": 1
@@ -103,8 +108,9 @@
     "globalScore": {
         "domComplexity": 1,
         "domManipulations": 2,
+        "scroll": 1,
         "badJavascript": 1,
-        "jQueryVersion": 1,
+        "jQuery": 1,
         "cssSyntaxError": 1,
         "cssComplexity": 1,
         "badCSS": 1,

lib/offendersHelpers.js

@@ -32,6 +32,15 @@ var OffendersHelpers = function() {
     };
 
     this.domPathToDomElementObj = function(domPath) {
+
+        if (typeof domPath === 'boolean') {
+            return {
+                // Not a normal element path
+                type: 'notAnElement',
+                element: domPath
+            };
+        }
+
         var domArray = this.domPathToArray(domPath);
         var domTree = this.listOfDomArraysToTree([this.domPathToArray(domPath)]);
 
@@ -106,7 +115,7 @@ var OffendersHelpers = function() {
             var parts = null;
 
             for (var i=0 ; i<traceArray.length ; i++) {
-                parts = /^(([\w$]+) )?([^ ]+):(\d+)$/.exec(traceArray[i]);
+                parts = /^(([\w$]+) )?\(?([^ ]+):(\d+)\)?$/.exec(traceArray[i]);
 
                 if (parts) {
                     var obj = {

lib/runner.js

@@ -23,7 +23,7 @@ var Runner = function(params) {
         data.toolsResults.phantomas = phantomasResults;
 
         // Treat the JS Execution Tree from offenders
-        data.javascriptExecutionTree = jsExecutionTransformer.transform(data);
+        data = jsExecutionTransformer.transform(data);
 
         // Other tools go here
 
@@ -42,6 +42,8 @@ var Runner = function(params) {
         
         delete data.toolsResults.phantomas.metrics.javascriptExecutionTree;
         delete data.toolsResults.phantomas.offenders.javascriptExecutionTree;
+        delete data.toolsResults.phantomas.metrics.scrollExecutionTree;
+        delete data.toolsResults.phantomas.offenders.scrollExecutionTree;
 
         return data;
 

lib/screenshotHandler.js

@@ -11,7 +11,7 @@ var screenshotHandler = function() {
     this.getScreenshotTempFile = function() {
         
         var screenshotTmpFolder = new tmp.Dir();
-        var tmpFilePath = path.join(screenshotTmpFolder.path, 'screenshot.jpg');
+        var tmpFilePath = path.join(screenshotTmpFolder.path, 'screenshot.png');
         var that = this;
         
         return {

lib/server/controllers/apiController.js

@@ -32,7 +32,13 @@ var ApiController = function(app) {
                 url: req.body.url,
                 waitForResponse: req.body.waitForResponse !== false && req.body.waitForResponse !== 'false' && req.body.waitForResponse !== 0,
                 partialResult: req.body.partialResult || null,
-                screenshot: req.body.screenshot || false
+                screenshot: req.body.screenshot || false,
+                jsTimeline: req.body.jsTimeline || false,
+                device: req.body.device || 'desktop',
+                waitForSelector: req.body.waitForSelector || null,
+                cookie: req.body.cookie || null,
+                authUser: req.body.authUser || null,
+                authPass: req.body.authPass || null
             }
         };
 
@@ -64,7 +70,13 @@ var ApiController = function(app) {
             debug('Launching test %s on %s', run.runId, run.params.url);
 
             var runOptions = {
-                screenshot: run.params.screenshot ? screenshot.getTmpFilePath() : false
+                screenshot: run.params.screenshot ? screenshot.getTmpFilePath() : false,
+                jsDeepAnalysis: run.params.jsTimeline,
+                device: run.params.device,
+                waitForSelector: run.params.waitForSelector,
+                cookie: run.params.cookie,
+                authUser: run.params.authUser,
+                authPass: run.params.authPass
             };
 
             return ylt(run.params.url, runOptions);
@@ -97,8 +109,14 @@ var ApiController = function(app) {
                         }
 
                     })
+                    
                     // Delete screenshot temporary file
-                    .then(screenshot.deleteTmpFile);
+                    .then(screenshot.deleteTmpFile)
+
+                    // Don't worry if there's an error
+                    .fail(function(err) {
+                        debug('An error occured while creating the screenshot\'s thumbnail. Ignoring and continuing...');
+                    });
 
             }
 
@@ -107,7 +125,17 @@ var ApiController = function(app) {
 
                 // Save results
                 .then(function() {
+                    // Remove uneeded temp screenshot path
                     delete data.params.options.screenshot;
+
+                    // Empty javascriptExecutionTree if not needed
+                    if (!run.params.jsTimeline) {
+                        data.javascriptExecutionTree = {};
+                        data.scrollExecutionTree = {};
+                    }
+
+                    // Remove tools results if not needed
+
                     return resultsDatastore.saveResult(data);
                 })
 
@@ -221,6 +249,18 @@ var ApiController = function(app) {
     // Retrive one result by id
     app.get('/api/results/:id', function(req, res) {
         getPartialResults(req.params.id, res, function(data) {
+            
+            // Some fields can be excluded from the response, this way:
+            // /api/results/:id?exclude=field1,field2
+            if (req.query.exclude && typeof req.query.exclude === 'string') {
+                var excludedFields = req.query.exclude.split(',');
+                excludedFields.forEach(function(fieldName) {
+                    if (data[fieldName]) {
+                        delete data[fieldName];
+                    }
+                });
+            }
+
             return data;
         });
     });

lib/server/datastores/runsDatastore.js

@@ -58,6 +58,9 @@ function RunsDatastore() {
 
         var errorMessage;
         switch(err) {
+            case '1':
+                errorMessage = "Error 1: unknown error";
+                break;
             case '252':
                 errorMessage = "Error 252: page timeout in Phantomas";
                 break;
@@ -76,6 +79,9 @@ function RunsDatastore() {
             case '1002':
                 errorMessage = "Error 1002: missing Phantomas metrics";
                 break;
+            case '1003':
+                errorMessage = "Error 1003: Phantomas not returning";
+                break;
             default:
                 errorMessage = err;
         }

lib/server/middlewares/wwwRedirectMiddleware.js

@@ -0,0 +1,12 @@
+var wwwRedirectMiddleware = function(req, res, next) {
+    'use strict';
+
+    // Redirect www.yellowlab.tools to yellowlab.tools without "www" (for SEO purpose)
+    if(/^www\.yellowlab\.tools/.test(req.headers.host)) {
+        res.redirect(301, req.protocol + '://' + req.headers.host.replace(/^www\./, '') + req.url);
+    } else {
+        next();
+    }
+};
+
+module.exports = wwwRedirectMiddleware;

lib/tools/jsExecutionTransformer.js

@@ -1,24 +1,68 @@
 var debug = require('debug')('ylt:jsExecutionTransformer');
 
+var offendersHelpers    = require('../offendersHelpers');
+var Collection          = require('./phantomas/custom_modules/util/collection');
+
 var jsExecutionTransformer = function() {
 
     this.transform = function(data) {
         var javascriptExecutionTree = {};
+        var jQueryFunctionsCollection = new Collection();
+        
+        var metrics = {
+            domInteractive: 0,
+            domContentLoaded: 0,
+            domContentLoadedEnd: 0,
+            domComplete: 0,
 
-        debug('Starting JS execution transformation');
+            DOMaccesses: 0,
+            DOMaccessesOnScroll: 0,
+            queriesWithoutResults: 0
+        };
+
+        var offenders = {};
+
+        var hasjQuery = (data.toolsResults.phantomas.metrics.jQueryVersionsLoaded > 0);
+        if (hasjQuery) {
+            metrics.jQueryCalls = 0;
+            metrics.jQueryFunctionsUsed = 0;
+            metrics.jQueryCallsOnEmptyObject = 0;
+            metrics.jQueryNotDelegatedEvents = 0;
+
+            offenders.jQueryFunctionsUsed = [];
+        }
 
         try {
+
+            debug('Starting JS execution transformation');
             javascriptExecutionTree = JSON.parse(data.toolsResults.phantomas.offenders.javascriptExecutionTree[0]);
         
             if (javascriptExecutionTree.children) {
                 javascriptExecutionTree.children.forEach(function(node) {
                     
-                    // Mark abnormal things with a warning flag
-                    var contextLenght = (node.data.callDetails && node.data.callDetails.context) ? node.data.callDetails.context.length : null;
-                    if ((node.data.type === 'jQuery - bind' && contextLenght > 5) ||
-                            node.data.resultsNumber === 0 ||
-                            contextLenght === 0) {
+                    var contextLength = (node.data.callDetails && node.data.callDetails.context) ? node.data.callDetails.context.length : null;
+
+                    if (isABindWithoutEventDelegation(node, contextLength)) {
+                        metrics.jQueryNotDelegatedEvents += contextLength;
                         node.warning = true;
+                        node.eventNotDelegated = true;
+                    }
+
+                    if (node.data.resultsNumber === 0) {
+                        metrics.queriesWithoutResults ++;
+                        node.queryWithoutResults = true;
+                        node.warning = true;
+                    }
+
+                    if (contextLength === 0) {
+                        metrics.jQueryCallsOnEmptyObject ++;
+                        node.jQueryCallOnEmptyObject = true;
+                        node.warning = true;
+                    }
+
+                    if (node.data.type.indexOf('jQuery - ') === 0) {
+                        metrics.jQueryCalls ++;
+                        jQueryFunctionsCollection.push(node.data.type);
                     }
 
                     // Mark errors with an error flag
@@ -29,34 +73,148 @@ var jsExecutionTransformer = function() {
                     // Mark a performance flag
                     if (['domInteractive', 'domContentLoaded', 'domContentLoadedEnd', 'domComplete'].indexOf(node.data.type) >= 0) {
                         node.windowPerformance = true;
+
+                        // Adjust the navigation timings (cause their not very well synchronised)
+                        switch(node.data.type) {
+                            case 'domInteractive':
+                                javascriptExecutionTree.data.domInteractive = node.data.timestamp;
+                                break;
+                            case 'domContentLoaded':
+                                javascriptExecutionTree.data.domContentLoaded = node.data.timestamp;
+                                break;
+                            case 'domContentLoadedEnd':
+                                javascriptExecutionTree.data.domContentLoadedEnd = node.data.timestamp;
+                                break;
+                            case 'domComplete':
+                                javascriptExecutionTree.data.domComplete = node.data.timestamp;
+                                break;
+                        }
                     }
 
-                    // Read the execution tree and adjust the navigation timings (cause their not very well synchronised)
-                    switch(node.data.type) {
-                        case 'domInteractive':
-                            data.toolsResults.phantomas.metrics.domInteractive = node.data.timestamp;
-                            break;
-                        case 'domContentLoaded':
-                            data.toolsResults.phantomas.metrics.domContentLoaded = node.data.timestamp;
-                            break;
-                        case 'domContentLoadedEnd':
-                            data.toolsResults.phantomas.metrics.domContentLoadedEnd = node.data.timestamp;
-                            break;
-                        case 'domComplete':
-                            data.toolsResults.phantomas.metrics.domComplete = node.data.timestamp;
-                            break;
+                    // Transform domPaths into objects
+                    changeListOfDomPaths(node);
+
+                    // Count the number of DOM accesses, by counting the tree leafs
+                    metrics.DOMaccesses += countTreeLeafs(node);
+                });
+
+                // Count the number of different jQuery functions called
+                if (hasjQuery) {
+
+                    jQueryFunctionsCollection.sort().forEach(function(fnName, cnt) {
+                        if (fnName === 'jQuery - find') {
+                            fnName = 'jQuery - $';
+                        }
+                        metrics.jQueryFunctionsUsed ++;
+                        offenders.jQueryFunctionsUsed.push({
+                            functionName: fnName.substring(9),
+                            count: cnt
+                        });
+                    });
+                }
+
+            }
+            debug('JS execution transformation complete');
+
+
+            debug('Starting scroll execution transformation');
+            offenders.DOMaccessesOnScroll = JSON.parse(data.toolsResults.phantomas.offenders.scrollExecutionTree[0]);
+            if (offenders.DOMaccessesOnScroll.children) {
+                offenders.DOMaccessesOnScroll.children.forEach(function(node) {
+                    
+                    // Mark a event flag
+                    if (['documentScroll', 'windowScroll', 'window.onscroll'].indexOf(node.data.type) >= 0) {
+                        node.windowPerformance = true;
                     }
+
+                    // Transform domPaths into objects
+                    changeListOfDomPaths(node);
+                    
+                    // Count the number of DOM accesses, by counting the tree leafs
+                    metrics.DOMaccessesOnScroll += countTreeLeafs(node);
                 });
             }
-
-            debug('JS execution transformation complete');
+            debug('Scroll execution transformation complete');
 
         } catch(err) {
             throw err;
         }
 
-        return javascriptExecutionTree;
+        data.javascriptExecutionTree = javascriptExecutionTree;
+        
+        data.toolsResults.jsExecutionTransformer = {
+            metrics: metrics,
+            offenders: offenders
+        };
+
+        return data;
     };
+
+    function treeRecursiveParser(node, fn) {
+        if (node.children) {
+            node.children.forEach(function(child) {
+                treeRecursiveParser(child, fn);
+            });
+        }
+        fn(node);
+    }
+
+    function changeListOfDomPaths(rootNode) {
+        treeRecursiveParser(rootNode, function(node) {
+            
+            if (node.data.callDetails && node.data.callDetails.context && node.data.callDetails.context.length > 0) {
+                node.data.callDetails.context.elements = node.data.callDetails.context.elements.map(offendersHelpers.domPathToDomElementObj, offendersHelpers);
+            }
+
+            if (node.data.type === 'appendChild' || node.data.type === 'insertBefore' || node.data.type === 'getComputedStyle') {
+                node.data.callDetails.arguments[0] = offendersHelpers.domPathToDomElementObj(node.data.callDetails.arguments[0]);
+            }
+
+            if (node.data.type === 'insertBefore') {
+                node.data.callDetails.arguments[1] = offendersHelpers.domPathToDomElementObj(node.data.callDetails.arguments[1]);
+            }
+        });
+    }
+
+    // Returns the number of leafs (nodes without children)
+    function countTreeLeafs(rootNode) {
+        var count = 0;
+
+        treeRecursiveParser(rootNode, function(node) {
+            if (!node.children &&
+                !node.error &&
+                !node.windowPerformance &&
+                node.data.type !== 'jQuery loaded') {
+                count ++;
+            }
+        });
+
+        return count;
+    }
+
+    function isPureString(str) {
+        return typeof str === 'string' && str[0] !== '{' && str !== '(function)' && str !== '[Object]' && str !== '[Array]' && str !== 'true' && str !== 'false' && str !== 'undefined' && str !== 'unknown' && str !== 'null';
+    }
+
+    function isABindWithoutEventDelegation(node, contextLength) {
+        // Count only on larger bindings
+        if (contextLength <= 3) {
+            return false;
+        }
+
+        if (node.data.type === 'jQuery - on' && node.data.callDetails.arguments[1] && !isPureString(node.data.callDetails.arguments[1])) {
+            return true;
+        }
+
+        if (node.data.type.indexOf('jQuery - ') === 0 && node.children && node.children.length === 1) {
+            var child = node.children[0];
+            if (child.data.type === 'jQuery - on' && child.data.callDetails.arguments[1] && !isPureString(child.data.callDetails.arguments[1])) {
+                return true;
+            }
+        }
+
+        return false;
+    }
 };
 
 module.exports = new jsExecutionTransformer();

lib/tools/phantomas/custom_modules/core/scopeYLT/scopeYLT.js

@@ -36,7 +36,7 @@ exports.module = function(phantomas) {
                     phantomas.log('Overwritting phantomas spy function');
 
                     function spy(obj, fn, callbackBefore, callbackAfter) {
-                        var origFn = obj[fn];
+                        var origFn = obj && obj[fn];
 
                         if (typeof origFn !== 'function') {
                             return false;
@@ -104,10 +104,11 @@ exports.module = function(phantomas) {
 
                     var root = new ContextTreeNode(null, {type: 'main'});
                     var currentContext = root;
+                    var depth = 0;
+
                     if (deepAnalysis) {
                         phantomas.log('Entering deep Javascript analysis mode');
                     }
-                    var depth = 0;
 
                     // Add a child but don't enter his context
                     function pushContext(data) {
@@ -176,6 +177,13 @@ exports.module = function(phantomas) {
 
                         return root;
                     }
+
+                    // Empty the tree
+                    function resetTree() {
+                        root = new ContextTreeNode(null, {type: 'main'});
+                        currentContext = root;
+                        depth = 0;
+                    }
                     
 
                     function ContextTreeNode(parent, data) {
@@ -196,6 +204,7 @@ exports.module = function(phantomas) {
                     phantomas.leaveContext = leaveContext;
                     phantomas.getContextData = getContextData;
                     phantomas.readFullTree = readFullTree;
+                    phantomas.resetTree = resetTree;
 
                 })();
 

lib/tools/phantomas/custom_modules/modules/cachYLT/cachYLT.js

@@ -1,79 +0,0 @@
-/**
- * Analyzes HTTP caching headers
- *
- * @see https://developers.google.com/speed/docs/best-practices/caching
- */
-
-exports.version = '0.2.a';
-
-exports.module = function(phantomas) {
-    'use strict';
-    
-    var cacheControlRegExp = /max-age=(\d+)/;
-
-    function getCachingTime(url, headers) {
-        // false means "no caching"
-        var ttl = false,
-            headerName,
-            now = new Date(),
-            headerDate;
-
-        for (headerName in headers) {
-            var value = headers[headerName];
-
-            switch (headerName.toLowerCase()) {
-                // parse max-age=...
-                //
-                // max-age=2592000
-                // public, max-age=300, must-revalidate
-                case 'cache-control':
-                    var matches = value.match(cacheControlRegExp);
-
-                    if (matches) {
-                        ttl = parseInt(matches[1], 10);
-                    }
-                    break;
-
-                    // catch Expires and Pragma headers
-                case 'expires':
-                case 'pragma':
-                    // and Varnish specific headers
-                case 'x-pass-expires':
-                case 'x-pass-cache-control':
-                    phantomas.incrMetric('oldCachingHeaders'); // @desc number of responses with old, HTTP 1.0 caching headers (Expires and Pragma)
-                    phantomas.addOffender('oldCachingHeaders', url + ' - ' + headerName + ': ' + value);
-                    headerDate = Date.parse(value);
-                    if (headerDate) ttl = Math.round((headerDate - now) / 1000);
-                    break;
-            }
-        }
-
-        //console.log(JSON.stringify(headers)); console.log("TTL: " + ttl + ' s');
-
-        return ttl;
-    }
-
-    phantomas.setMetric('cachingNotSpecified'); // @desc number of responses with no caching header sent (no Cache-Control header)
-    phantomas.setMetric('cachingTooShort'); // @desc number of responses with too short (less than a week) caching time
-    phantomas.setMetric('cachingDisabled'); // @desc number of responses with caching disabled (max-age=0)
-
-    phantomas.setMetric('oldCachingHeaders');
-
-    phantomas.on('recv', function(entry, res) {
-        var ttl = getCachingTime(entry.url, entry.headers);
-
-        // static assets
-        if (entry.isImage || entry.isJS || entry.isCSS) {
-            if (ttl === false) {
-                phantomas.incrMetric('cachingNotSpecified');
-                phantomas.addOffender('cachingNotSpecified', entry.url);
-            } else if (ttl <= 0) {
-                phantomas.incrMetric('cachingDisabled');
-                phantomas.addOffender('cachingDisabled', entry.url);
-            } else if (ttl < 7 * 86400) {
-                phantomas.incrMetric('cachingTooShort');
-                phantomas.addOffender('cachingTooShort', entry.url + ' cached for ' + ttl + ' s');
-            }
-        }
-    });
-};

lib/tools/phantomas/custom_modules/modules/domHiddenYLT/domHiddenYLT.js

@@ -0,0 +1,50 @@
+/**
+ * Analyzes DOM hidden content
+ */
+/* global document: true, Node: true, window: true */
+
+exports.version = '0.1.a';
+
+exports.module = function(phantomas) {
+    'use strict';
+
+    // total length of HTML of hidden elements (i.e. display: none)
+    phantomas.setMetric('hiddenContentSize'); // @desc the size of content of hidden elements on the page (with CSS display: none) @offenders
+
+    // HTML size
+    phantomas.on('report', function() {
+        phantomas.evaluate(function() {
+            (function(phantomas) {
+                phantomas.spyEnabled(false, 'checking the hiddenContentSize');
+
+                var runner = new phantomas.nodeRunner();
+
+                runner.walk(document.body, function(node, depth) {
+                    switch (node.nodeType) {
+                        case Node.ELEMENT_NODE:
+                            // @see https://developer.mozilla.org/en/DOM%3awindow.getComputedStyle
+                            var styles = window.getComputedStyle(node);
+
+                            if (styles && styles.getPropertyValue('display') === 'none') {
+                                if (typeof node.innerHTML === 'string') {
+                                    var size = node.innerHTML.length;
+                                    phantomas.incrMetric('hiddenContentSize', size);
+
+                                    // log hidden containers bigger than 1 kB
+                                    if (size > 1024) {
+                                        phantomas.addOffender('hiddenContentSize', phantomas.getDOMPath(node) + ' (' + size + ' characters)');
+                                    }
+                                }
+
+                                // don't run for child nodes as they're hidden as well
+                                return false;
+                            }
+                            break;
+                    }
+                });
+
+                phantomas.spyEnabled(true);
+            }(window.__phantomas));
+        });
+    });
+};

lib/tools/phantomas/custom_modules/modules/domQYLT/domQYLT.js

@@ -33,9 +33,6 @@ exports.module = function(phantomas) {
                     phantomas.enterContext({
                         type: 'getElementById',
                         callDetails: {
-                            context: {
-                                domElement: '#document'
-                            },
                             arguments: ['#' + id]
                         },
                         backtrace: phantomas.getBacktrace()
@@ -65,7 +62,8 @@ exports.module = function(phantomas) {
                         type: 'getElementsByClassName',
                         callDetails: {
                             context: {
-                                domElement: context
+                                length: 1,
+                                elements: [context]
                             },
                             arguments: ['.' + className]
                         },
@@ -103,7 +101,8 @@ exports.module = function(phantomas) {
                         type: 'getElementsByTagName',
                         callDetails: {
                             context: {
-                                domElement: context
+                                length: 1,
+                                elements: [context]
                             },
                             arguments: [tagName]
                         },
@@ -145,7 +144,8 @@ exports.module = function(phantomas) {
                         type: 'querySelector',
                         callDetails: {
                             context: {
-                                domElement: context
+                                length: 1,
+                                elements: [context]
                             },
                             arguments: [selector]
                         },
@@ -177,7 +177,8 @@ exports.module = function(phantomas) {
                         type: 'querySelectorAll',
                         callDetails: {
                             context: {
-                                domElement: context
+                                length: 1,
+                                elements: [context]
                             },
                             arguments: [selector]
                         },
@@ -237,7 +238,8 @@ exports.module = function(phantomas) {
                         type: 'appendChild',
                         callDetails: {
                             context: {
-                                domElement: context
+                                length: 1,
+                                elements: [context]
                             },
                             arguments: [appended]
                         },
@@ -245,20 +247,25 @@ exports.module = function(phantomas) {
                     });
                 }
 
-                function insertBeforeSpyBefore(child) {
+                function insertBeforeSpyBefore(child, refElement) {
                     /*jshint validthis: true */
                     
                     var context = phantomas.getDOMPath(this);
                     var appended = phantomas.getDOMPath(child);
+                    var referent = phantomas.getDOMPath(refElement);
                     appendChild(child, this, context, appended);
 
                     phantomas.enterContext({
                         type: 'insertBefore',
                         callDetails: {
                             context: {
-                                domElement: context
+                                length: 1,
+                                elements: [context]
                             },
-                            arguments: [appended]
+                            arguments: [
+                                appended,
+                                referent
+                            ]
                         },
                         backtrace: phantomas.getBacktrace()
                     });
@@ -270,6 +277,68 @@ exports.module = function(phantomas) {
                 phantomas.spy(Node.prototype, 'insertBefore', insertBeforeSpyBefore, function(result) {
                     phantomas.leaveContext();
                 });
+
+
+                phantomas.spy(Document.prototype, 'createElement', function(tagName) {
+                    
+                    phantomas.enterContext({
+                        type: 'createElement',
+                        callDetails: {
+                            arguments: [tagName]
+                        },
+                        backtrace: phantomas.getBacktrace()
+                    });
+
+                }, function(result, args) {
+                    phantomas.leaveContext();
+                });
+
+
+                phantomas.spy(Document.prototype, 'createTextNode', function(text) {
+                    
+                    phantomas.enterContext({
+                        type: 'createTextNode',
+                        callDetails: {
+                            arguments: [text]
+                        },
+                        backtrace: phantomas.getBacktrace()
+                    });
+
+                }, function(result, args) {
+                    phantomas.leaveContext();
+                });
+
+
+                phantomas.spy(Document.prototype, 'createDocumentFragment', function() {
+                    
+                    phantomas.enterContext({
+                        type: 'createDocumentFragment',
+                        callDetails: {
+                            arguments: []
+                        },
+                        backtrace: phantomas.getBacktrace()
+                    });
+
+                }, function(result, args) {
+                    phantomas.leaveContext();
+                });
+
+
+                phantomas.spy(window, 'getComputedStyle', function(element, pseudoElement) {
+                    var target = phantomas.getDOMPath(element);
+                    
+                    phantomas.enterContext({
+                        type: 'getComputedStyle',
+                        callDetails: {
+                            arguments: [target, pseudoElement]
+                        },
+                        backtrace: phantomas.getBacktrace()
+                    });
+
+                }, function(result, args) {
+                    phantomas.leaveContext();
+                });
+
             })(window.__phantomas);
         });
     });
@@ -296,7 +365,12 @@ exports.module = function(phantomas) {
         phantomas.log('DOM query: by %s - "%s" (using %s) in %s', type, query, fnName, context);
         phantomas.incrMetric('DOMqueries');
 
-        if (context && context.indexOf('DocumentFragment') === -1) {
+        if (context && (
+                context.indexOf('html') === 0 ||
+                context.indexOf('body') === 0 ||
+                context.indexOf('head') === 0 ||
+                context.indexOf('#document') === 0
+            )) {
             DOMqueries.push(type + ' "' + query + '" with ' + fnName + ' (in context ' + context + ')');
         }
     });

lib/tools/phantomas/custom_modules/modules/eventListYLT/eventListYLT.js

@@ -1,48 +0,0 @@
-/**
- * Analyzes events bound to DOM elements
- */
-/* global Document: true, Element: true, window: true */
-
-exports.version = '0.2.a';
-
-exports.module = function(phantomas) {
-    'use strict';
-    
-    phantomas.setMetric('eventsBound'); // @desc number of EventTarget.addEventListener calls
-
-    // spy calls to EventTarget.addEventListener
-    // @see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener
-    phantomas.once('init', function() {
-        phantomas.evaluate(function() {
-            (function(phantomas) {
-                function eventSpyBefore(eventType) {
-                    /* jshint validthis: true */
-                    var path = phantomas.getDOMPath(this);
-                    //phantomas.log('DOM event: "' + eventType + '" bound to "' + path + '"');
-
-                    phantomas.incrMetric('eventsBound');
-                    phantomas.addOffender('eventsBound', '"%s" bound to "%s"', eventType, path);
-
-                    phantomas.enterContext({
-                        type: 'addEventListener',
-                        callDetails: {
-                            context: {
-                                domElement: path
-                            },
-                            arguments: [eventType]
-                        },
-                        backtrace: phantomas.getBacktrace()
-                    });
-                }
-
-                function eventSpyAfter(result) {
-                    phantomas.leaveContext();
-                }
-
-                phantomas.spy(Element.prototype, 'addEventListener', eventSpyBefore, eventSpyAfter);
-                phantomas.spy(Document.prototype, 'addEventListener', eventSpyBefore, eventSpyAfter);
-                phantomas.spy(window, 'addEventListener', eventSpyBefore, eventSpyAfter);
-            })(window.__phantomas);
-        });
-    });
-};

lib/tools/phantomas/custom_modules/modules/eventYLT/eventYLT.js

@@ -0,0 +1,82 @@
+/**
+ * Analyzes events bound to DOM elements
+ */
+/* global Document: true, Element: true, window: true */
+
+exports.version = '0.4.a';
+
+exports.module = function(phantomas) {
+    'use strict';
+    
+    phantomas.setMetric('eventsBound'); // @desc number of EventTarget.addEventListener calls
+    phantomas.setMetric('eventsDispatched'); // @desc number of EventTarget.dispatchEvent calls
+    phantomas.setMetric('eventsScrollBound'); // @desc number of scroll event bounds
+
+    phantomas.once('init', function() {
+        phantomas.evaluate(function() {
+            (function(phantomas) {
+                // spy calls to EventTarget.addEventListener
+                // @see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener
+                function eventSpyBefore(eventType) {
+                    /* jshint validthis: true */
+                    var path = phantomas.getDOMPath(this);
+                    //phantomas.log('DOM event: "' + eventType + '" bound to "' + path + '"');
+
+                    phantomas.incrMetric('eventsBound');
+                    phantomas.addOffender('eventsBound', '"%s" bound to "%s"', eventType, path);
+                    phantomas.log('event ' + eventType + ' bound');
+
+                    phantomas.enterContext({
+                        type: 'addEventListener',
+                        callDetails: {
+                            context: {
+                                length: 1,
+                                elements: [path]
+                            },
+                            arguments: [eventType]
+                        },
+                        backtrace: phantomas.getBacktrace()
+                    });
+
+                    // count window.addEventListener('scroll', ...) - issue #508
+                    if (eventType === 'scroll' && (path === 'window' || path === '#document')) {
+                        phantomas.incrMetric('eventsScrollBound');
+                        phantomas.addOffender('eventsScrollBound', 'bound by %s on %s', phantomas.getBacktrace(), path);
+                    }
+                }
+
+                function eventSpyAfter(result) {
+                    phantomas.leaveContext();
+                }
+
+                phantomas.spy(Element.prototype, 'addEventListener', eventSpyBefore, eventSpyAfter);
+                phantomas.spy(Document.prototype, 'addEventListener', eventSpyBefore, eventSpyAfter);
+                phantomas.spy(window, 'addEventListener', eventSpyBefore, eventSpyAfter);
+
+                // spy calls to EventTarget.dispatchEvent
+                // @see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.dispatchEvent
+                phantomas.spy(Element.prototype, 'dispatchEvent', function(ev) {
+                    /* jshint validthis: true */
+                    var path = phantomas.getDOMPath(this);
+
+                    phantomas.log('Core JS event: triggered "%s" on "%s"', ev.type, path);
+
+                    phantomas.incrMetric('eventsDispatched');
+                    phantomas.addOffender('eventsDispatched', '"%s" on "%s"', ev.type, path);
+                });
+            })(window.__phantomas);
+        });
+    });
+
+    phantomas.on('report', function() {
+        phantomas.evaluate(function() {
+            (function(phantomas) {
+                // Check if a window.onscroll function is defined
+                if (typeof(window.onscroll) === "function") {
+                    phantomas.incrMetric('eventsScrollBound');
+                    phantomas.addOffender('eventsScrollBound', 'bound by %s on %s', '', 'window.onscroll');
+                }
+            }(window.__phantomas));
+        });
+    });
+};

lib/tools/phantomas/custom_modules/modules/jQYLT/jQYLT.js

@@ -17,7 +17,7 @@ exports.module = function(phantomas) {
     phantomas.setMetric('jQueryOnDOMReadyFunctions'); // @desc number of functions bound to onDOMReady event
     phantomas.setMetric('jQueryWindowOnLoadFunctions'); // @desc number of functions bound to windowOnLoad event
     phantomas.setMetric('jQuerySizzleCalls'); // @desc number of calls to Sizzle (including those that will be resolved using querySelectorAll)
-    //phantomas.setMetric('jQueryEventTriggers'); // @desc number of jQuery event triggers
+    phantomas.setMetric('jQueryEventTriggers'); // @desc number of jQuery event triggers
 
     var jQueryFunctions = [
         // DOM manipulations
@@ -55,7 +55,20 @@ exports.module = function(phantomas) {
         'scrollLeft',
         'scrollTop',
 
-        // generic events
+        // Animations
+        'hide',
+        'show',
+        'toggle',
+        'animate',
+        'fadeIn',
+        'fadeOut',
+        'fadeTo',
+        'fadeToggle',
+        'slideDown',
+        'slideUp',
+        'slideToggle',
+
+        // Generic events
         'on',
         'off',
         'live',
@@ -66,7 +79,7 @@ exports.module = function(phantomas) {
         'bind',
         'unbind',
 
-        // more events
+        // More events
         'blur',
         'change',
         'click',
@@ -91,10 +104,9 @@ exports.module = function(phantomas) {
         'scroll',
         'select',
         'submit',
-        'toggle',
         'unload',
 
-        // attributes
+        // Attributes
         'attr',
         'prop',
         'removeAttr',
@@ -103,12 +115,31 @@ exports.module = function(phantomas) {
         'hasClass',
         'addClass',
         'removeClass',
-        'toggleClass'
+        'toggleClass',
     ];
 
+    var jQueryTraversalFunctions = [
+        'children',
+        'closest',
+        'find',
+        'next',
+        'nextAll',
+        'nextUntil',
+        'offsetParent',
+        'parent',
+        'parents',
+        'parentsUntil',
+        'prev',
+        'prevAll',
+        'prevUntil',
+        'siblings'
+    ];
+
+    jQueryFunctions = jQueryFunctions.concat(jQueryTraversalFunctions);
+
     // spy calls to jQuery functions
     phantomas.once('init', function() {
-        phantomas.evaluate(function(jQueryFunctions) {
+        phantomas.evaluate(function(jQueryFunctions, jQueryTraversalFunctions) {
             (function(phantomas) {
                 var jQuery;
                 var oldJQuery;
@@ -166,11 +197,11 @@ exports.module = function(phantomas) {
                         phantomas.addOffender('jQuerySizzleCalls', '%s (in %s)', selector, (phantomas.getDOMPath(context) || 'unknown'));
                         
                         phantomas.enterContext({
-                            type: 'jQuery - find',
+                            type: 'jQuery - Sizzle call',
                             callDetails: {
                                 context: {
-                                    length: this.length,
-                                    firstElementPath: phantomas.getDOMPath(context)
+                                    length: 1,
+                                    elements: [phantomas.getDOMPath(context)]
                                 },
                                 arguments: [selector]
                             },
@@ -184,7 +215,37 @@ exports.module = function(phantomas) {
                         phantomas.leaveContext(moreData);
                     }) || phantomas.log('jQuery: can not measure jQuerySizzleCalls (jQuery used on the page is too old)!');
 
-                    /*if (!jQuery.event) {
+
+                    phantomas.spy(jQuery.fn, 'init', function(selector, context) {
+                        if (typeof selector === 'string' && /^#([\w\-]*)$/.exec(selector) !== null && !context) {
+
+                            phantomas.enterContext({
+                                type: 'jQuery - find',
+                                callDetails: {
+                                    arguments: [selector]
+                                },
+                                backtrace: phantomas.getBacktrace()
+                            });
+
+                        }
+
+                    }, function(result) {
+                        var data = phantomas.getContextData();
+
+                        if (data.type === 'jQuery - find' &&
+                                !data.callDetails.context &&
+                                data.callDetails.arguments.length === 1 &&
+                                /^#([\w\-]*)$/.exec(data.callDetails.arguments[0]) !== null) {
+
+                            var moreData = {
+                                resultsNumber : (result && result.length) ? result.length : 0
+                            };
+                            phantomas.leaveContext(moreData);
+                        }
+                    });
+
+
+                    if (!jQuery.event) {
                         phantomas.spy(jQuery.event, 'trigger', function(ev, data, elem) {
                             var path = phantomas.getDOMPath(elem),
                                 type = ev.type || ev;
@@ -194,27 +255,18 @@ exports.module = function(phantomas) {
                             phantomas.incrMetric('jQueryEventTriggers');
                             phantomas.addOffender('jQueryEventTriggers', '"%s" on "%s"', type, path);
                         });
-                    }*/
+                    }
 
                     // jQuery events bound to window' onLoad event (#451)
                     phantomas.spy(jQuery.fn, 'on', function(eventName, func) {
                         if ((eventName === 'load') && (this[0] === window)) {
                             phantomas.incrMetric('jQueryWindowOnLoadFunctions');
                             phantomas.addOffender('jQueryWindowOnLoadFunctions', phantomas.getCaller(2));
-
-                            phantomas.pushContext({
-                                type: 'jQuery - windowOnLoad',
-                                callDetails: {
-                                    arguments: [func]
-                                },
-                                backtrace: phantomas.getBacktrace()
-                            });
                         }
                     });
 
                     // Add spys on many jQuery functions
                     jQueryFunctions.forEach(function(functionName) {
-                        var capitalizedName = functionName.substring(0,1).toUpperCase() + functionName.substring(1);
                         
                         phantomas.spy(jQuery.fn, functionName, function(args) {
 
@@ -222,6 +274,10 @@ exports.module = function(phantomas) {
                             args = [].slice.call(arguments);
                             args.forEach(function(arg, index) {
                                 
+                                if (arg instanceof Array) {
+                                    arg = '[Array]';
+                                }
+
                                 if (arg instanceof Object) {
                                     
                                     if (arg instanceof jQuery || (arg.jquery && arg.jquery.length > 0)) {
@@ -239,6 +295,13 @@ exports.module = function(phantomas) {
                                     } else {
                                         
                                         try {
+
+                                            for (var key in arg) {
+                                                if (typeof arg[key] === 'function') {
+                                                    arg[key] = '(function)';
+                                                }
+                                            }
+
                                             arg = JSON.stringify(arg);
                                         } catch(e) {
                                             arg = '[Object]';
@@ -274,13 +337,17 @@ exports.module = function(phantomas) {
                                 args[index] = arg;
                             });
 
+                            var elements = [];
+                            for (var i = 0 ; i < this.length ; i++) {
+                                elements.push(phantomas.getDOMPath(this[i]));
+                            }
 
                             phantomas.enterContext({
                                 type: 'jQuery - ' + functionName,
                                 callDetails: {
                                     context: {
                                         length: this.length,
-                                        firstElementPath: phantomas.getDOMPath(this[0])
+                                        elements: elements
                                     },
                                     arguments: args
                                 },
@@ -288,12 +355,19 @@ exports.module = function(phantomas) {
                             });
 
                         }, function(result) {
-                            phantomas.leaveContext();
-                        }) || phantomas.log('jQuery: can not track jQuery - ' + capitalizedName + ' (this version of jQuery doesn\'t support it)');
+                            if (jQueryTraversalFunctions.indexOf(functionName) >= 0) {
+                                var moreData = {
+                                    resultsNumber : (result && result.length) ? result.length : 0
+                                };
+                                phantomas.leaveContext(moreData);
+                            } else {
+                                phantomas.leaveContext();
+                            }
+                        }) || phantomas.log('jQuery: can not track jQuery - ' + functionName + ' (this version of jQuery doesn\'t support it)');
                     });
                 });
             })(window.__phantomas);
-        }, jQueryFunctions);
+        }, jQueryFunctions, jQueryTraversalFunctions);
     });
 
 

lib/tools/phantomas/custom_modules/modules/javaScriptBottleYLT/javaScriptBottleYLT.js

@@ -4,44 +4,56 @@
  * @see http://www.nczonline.net/blog/2013/06/25/eval-isnt-evil-just-misunderstood/
  * @see http://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html
  * @see http://www.stevesouders.com/blog/2012/04/10/dont-docwrite-scripts/
+ *
+ * Run phantomas with --spy-eval to count eval() calls (see issue #467)
  */
 /* global document: true, window: true */
 
-exports.version = '0.1.a';
+exports.version = '0.2';
 
 exports.module = function(phantomas) {
     'use strict';
+    
+    phantomas.setMetric('documentWriteCalls'); //@desc number of calls to either document.write or document.writeln @offenders
+    phantomas.setMetric('evalCalls'); // @desc number of calls to eval (either direct or via setTimeout / setInterval) @offenders
 
-    phantomas.setMetric('documentWriteCalls'); //@desc number of calls to either document.write or document.writeln
-    phantomas.setMetric('evalCalls'); // @desc number of calls to eval (either direct or via setTimeout / setInterval)
+    // spy calls to eval only when requested (issue #467)
+    var spyEval = phantomas.getParam('spy-eval') === true;
+    if (!spyEval) {
+        phantomas.log('javaScriptBottlenecks: to spy calls to eval() run phantomas with --spy-eval option');
+    }
 
     phantomas.once('init', function() {
-        phantomas.evaluate(function() {
+        phantomas.evaluate(function(spyEval) {
             (function(phantomas) {
                 function report(msg, caller, backtrace, metric) {
                     phantomas.log(msg + ': from ' + caller + '!');
                     phantomas.log('Backtrace: ' + backtrace);
+
                     phantomas.incrMetric(metric);
+                    phantomas.addOffender(metric, "%s from %s", msg, caller);
                 }
 
                 // spy calls to eval()
-                /*phantomas.spy(window, 'eval', function(code) {
-                    report('eval() called directly', phantomas.getCaller(), phantomas.getBacktrace(), 'evalCalls');
-                    phantomas.log('eval\'ed code: ' + (code || '').substring(0, 150) + '(...)');
-                });*/
+                if (spyEval) {
+                    phantomas.spy(window, 'eval', function(code) {
+                        report('eval() called directly', phantomas.getCaller(), phantomas.getBacktrace(), 'evalCalls');
+                        phantomas.log('eval\'ed code: ' + (code || '').substring(0, 150) + '(...)');
+                    });
+                }
 
                 // spy calls to setTimeout / setInterval with string passed instead of a function
-                /*phantomas.spy(window, 'setTimeout', function(fn, interval) {
+                phantomas.spy(window, 'setTimeout', function(fn, interval) {
                     if (typeof fn !== 'string') return;
 
                     report('eval() called via setTimeout("' + fn + '")', phantomas.getCaller(), phantomas.getBacktrace(), 'evalCalls');
-                });*/
+                });
 
-                /*phantomas.spy(window, 'setInterval', function(fn, interval) {
+                phantomas.spy(window, 'setInterval', function(fn, interval) {
                     if (typeof fn !== 'string') return;
 
                     report('eval() called via setInterval("' + fn + '")', phantomas.getCaller(), phantomas.getBacktrace(), 'evalCalls');
-                });*/
+                });
 
                 // spy document.write(ln)
                 phantomas.spy(document, 'write', function(arg) {
@@ -52,6 +64,6 @@ exports.module = function(phantomas) {
                     report('document.writeln() used', phantomas.getCaller(), phantomas.getBacktrace(), 'documentWriteCalls');
                 });
             })(window.__phantomas);
-        });
+        }, spyEval);
     });
 };

lib/tools/phantomas/custom_modules/modules/jsTreeYLT/jsTreeYLT.js

@@ -9,11 +9,11 @@ exports.version = '0.1';
 exports.module = function(phantomas) {
     'use strict';
 
-    phantomas.setMetric('javascriptExecutionTree'); // @desc number of duplicated DOM queries
+    phantomas.setMetric('javascriptExecutionTree');
 
     // save data
     phantomas.on('report', function() {
-        phantomas.log('Reading execution tree JSON');
+        phantomas.log('JS execution tree: Reading execution tree JSON');
 
         phantomas.evaluate(function() {(function(phantomas) {
             var fullTree = phantomas.readFullTree();

lib/tools/phantomas/custom_modules/modules/scrollListener/scrollListener.js

@@ -0,0 +1,69 @@
+exports.version = '0.1';
+
+exports.module = function(phantomas) {
+    'use strict';
+
+    phantomas.setMetric('scrollExecutionTree');
+
+    phantomas.on('report', function() {
+
+        phantomas.evaluate(function() {
+            (function(phantomas) {
+
+                var evt = document.createEvent('CustomEvent');
+                evt.initCustomEvent('scroll', false, false, null);
+
+                function triggerScrollEvent() {
+                    phantomas.resetTree();
+
+                    try {
+
+                        // Chrome triggers them in this order:
+
+                        // 1. document
+                        phantomas.pushContext({
+                            type: 'documentScroll'
+                        });
+                        document.dispatchEvent(evt);
+
+                        // 2. window
+                        phantomas.pushContext({
+                            type: 'windowScroll'
+                        });
+                        window.dispatchEvent(evt);
+
+                        // No need to call window.onscroll(), it's called by the scroll event on window
+
+                    } catch(e) {
+                        phantomas.log('ScrollListener error: %s', e);
+                    }
+                }
+
+                var firstScrollTime = Date.now();
+                phantomas.log('ScrollListener: triggering a first scroll event...');
+                triggerScrollEvent();
+
+
+                // Ignore the first scroll event and only save the second one,
+                // because we want to detect un-throttled things, throttled ones are ok.
+                var secondScrollTime = Date.now();
+                phantomas.log('ScrollListener: triggering a second scroll event (%dms after the first)...', secondScrollTime - firstScrollTime);
+                triggerScrollEvent();
+
+
+                var fullTree = phantomas.readFullTree();
+                if (fullTree !== null) {
+                    phantomas.setMetric('scrollExecutionTree', true, true);
+                    phantomas.addOffender('scrollExecutionTree', JSON.stringify(fullTree));
+                    phantomas.log('ScrollListener: scrollExecutionTree correctly extracted');
+                } else {
+                    phantomas.log('Error: scrollExecutionTree could not be extracted');
+                }
+
+
+                phantomas.log('ScrollListener: end of scroll triggering');
+
+            })(window.__phantomas);
+        });
+    });
+};

lib/tools/phantomas/phantomasWrapper.js

@@ -11,11 +11,6 @@ var PhantomasWrapper = function() {
 
     /**
      * This is the phantomas launcher. It merges user chosen options into the default options
-     * Available options :
-     *
-     * - timeout : in seconds (default 60)
-     * - jsDeepAnalysis : should we inspect subrequests in the javascript execution tree?
-     *
      */
     this.execute = function(data) {
 
@@ -24,29 +19,34 @@ var PhantomasWrapper = function() {
 
 
         var options = {
+            
             // Cusomizable options
-            'timeout': task.options.timeout || 60,
+            'timeout': task.options.timeout || 45,
             'js-deep-analysis': task.options.jsDeepAnalysis || false,
-            'user-agent': 'Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.110 Safari/537.36',
+            'user-agent': (task.options.device === 'desktop') ? 'Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.110 Safari/537.36' : null,
+            'tablet': (task.options.device === 'tablet'),
+            'phone': (task.options.device === 'phone'),
             'screenshot': task.options.screenshot || false,
-            'viewport': '1366x768',
+            'wait-for-selector': task.options.waitForSelector,
+            'cookie': task.options.cookie,
+            'auth-user': task.options.authUser,
+            'auth-pass': task.options.authPass,
 
             // Mandatory
             'reporter': 'json:pretty',
             'analyze-css': true,
             'skip-modules': [
                 'blockDomains', // not needed
-                'caching', // overriden
+                'domHiddenContent', // overriden
                 'domMutations', // not compatible with webkit
                 'domQueries', // overriden
-                'eventListeners', // overridden
+                'events', // overridden
                 'filmStrip', // not needed
                 'har', // not needed for the moment
                 'javaScriptBottlenecks', // needs to be launched after custom module scopeYLT
                 'jQuery', // overridden
                 'jserrors', // overridden
                 'pageSource', // not needed
-                'waitForSelector', // not needed
                 'windowPerformance' // overriden
             ].join(','),
             'include-dirs': [
@@ -65,39 +65,63 @@ var PhantomasWrapper = function() {
                 value = '"' + value + '"';
             }
 
-            optionsString += ' ' + '--' + opt + '=' + value;
+            if (value === true) {
+                optionsString += ' ' + '--' + opt;
+            } else if (value === false || value === null) {
+                // Nothing
+            } else {
+                optionsString += ' ' + '--' + opt + '=' + value;
+            }
 
         }
         debug('node node_modules/phantomas/bin/phantomas.js --url=' + task.url + optionsString + ' --verbose');
 
-        // Kill the application if nothing happens
+
         var phantomasPid;
+        var isKilled = false;
+
+        // Kill phantomas if nothing happens
         var killer = setTimeout(function() {
-            debug('Killing the app because the test on %s was launched %d seconds ago', task.url, 5*options.timeout);
-            // If in server mode, forever will restart the server
+            console.log('Killing phantomas because the test on ' + task.url + ' was launched ' + 5*options.timeout + ' seconds ago');
             
-            // Kill the Phantomas process first
             if (phantomasPid) {
                 ps.kill(phantomasPid, function(err) {
+                    
                     if (err) {
                         debug('Could not kill Phantomas process %s', phantomasPid);
-                    }
-                    else {
-                        debug('Phantomas process %s was correctly killed', phantomasPid);
+
+                        // Suicide
+                        process.exit(1);
+                        // If in server mode, forever will restart the server
                     }
 
-                    // Then suicide.
-                    process.exit(1);
+                    debug('Phantomas process %s was correctly killed', phantomasPid);
+
+                    // Then mark the test as failed
+                    // Error 1003 = Phantomas not answering
+                    deferred.reject(1003);
+                    isKilled = true;
                 });
+            } else {
+                // Suicide
+                process.exit(1);
             }
 
         }, 5*options.timeout*1000);
 
+
         // It's time to launch the test!!!
         var triesNumber = 2;
 
         async.retry(triesNumber, function(cb) {
             var process = phantomas(task.url, options, function(err, json, results) {
+                
+                if (isKilled) {
+                    debug('Process was killed, too late Phantomas, sorry...');
+                    return;
+                }
+
+
                 debug('Returning from Phantomas');
 
                 // Adding some YellowLabTools errors here

package.json

@@ -1,6 +1,6 @@
 {
   "name": "yellowlabtools",
-  "version": "1.2.0",
+  "version": "1.6.1",
   "description": "Online tool to audit a webpage for performance and front-end quality issues",
   "repository": {
     "type": "git",
@@ -11,46 +11,46 @@
   },
   "main": "./lib/index.js",
   "dependencies": {
-    "async": "~0.9.0",
-    "body-parser": "~1.10.0",
-    "compression": "~1.2.2",
-    "cors": "^2.5.2",
-    "debug": "~2.1.0",
-    "express": "~4.10.6",
+    "async": "~1.0.0",
+    "body-parser": "~1.12.4",
+    "compression": "~1.4.4",
+    "cors": "^2.6.0",
+    "debug": "~2.2.0",
+    "express": "~4.12.4",
     "lwip": "0.0.6",
-    "meow": "^3.0.0",
-    "phantomas": "1.9.0",
-    "ps-node": "0.0.3",
-    "q": "~1.1.2",
-    "rimraf": "~2.2.8",
+    "meow": "^3.1.0",
+    "phantomas": "1.10.2",
+    "ps-node": "0.0.4",
+    "q": "~1.4.1",
+    "rimraf": "~2.3.4",
     "temporary": "0.0.8"
   },
   "devDependencies": {
-    "chai": "^1.10.0",
+    "chai": "^2.3.0",
     "grunt": "^0.4.5",
     "grunt-blanket": "^0.0.8",
     "grunt-contrib-clean": "^0.6.0",
-    "grunt-contrib-concat": "^0.5.0",
-    "grunt-contrib-copy": "^0.7.0",
-    "grunt-contrib-cssmin": "^0.11.0",
-    "grunt-contrib-htmlmin": "^0.3.0",
-    "grunt-contrib-jshint": "^0.10.0",
-    "grunt-contrib-less": "^0.12.0",
-    "grunt-contrib-uglify": "^0.7.0",
-    "grunt-env": "^0.4.2",
+    "grunt-contrib-concat": "^0.5.1",
+    "grunt-contrib-copy": "^0.8.0",
+    "grunt-contrib-cssmin": "^0.12.3",
+    "grunt-contrib-htmlmin": "^0.4.0",
+    "grunt-contrib-jshint": "^0.11.2",
+    "grunt-contrib-less": "^1.0.1",
+    "grunt-contrib-uglify": "^0.9.1",
+    "grunt-env": "^0.4.4",
     "grunt-express": "^1.4.1",
-    "grunt-filerev": "^2.1.2",
-    "grunt-fontsmith": "^0.9.1",
+    "grunt-filerev": "^2.3.1",
     "grunt-inline-angular-templates": "^0.1.5",
     "grunt-line-remover": "^0.0.2",
-    "grunt-mocha-test": "^0.12.4",
-    "grunt-replace": "^0.8.0",
+    "grunt-mocha-test": "^0.12.7",
+    "grunt-replace": "^0.9.2",
     "grunt-usemin": "^3.0.0",
+    "grunt-webfont": "^0.5.3",
     "matchdep": "^0.3.0",
-    "mocha": "^2.1.0",
-    "request": "^2.51.0",
-    "sinon": "^1.12.1",
-    "sinon-chai": "^2.6.0"
+    "mocha": "^2.2.5",
+    "request": "^2.55.0",
+    "sinon": "^1.14.1",
+    "sinon-chai": "^2.7.0"
   },
   "scripts": {
     "test": "grunt test"

server_config/server_install.sh

@@ -12,7 +12,7 @@ sudo apt-get install -y nodejs
 source ~/.profile
 
 # Installation of some packages globally
-npm install bower forever grunt-cli phantomjs -g
+npm install bower forever grunt-cli -g
 source ~/.profile
 
 # Installation of YellowLabTools
@@ -30,4 +30,4 @@ grunt build
 # Start the server
 rm server_config/settings.json
 cp server_config/settings-prod.json server_config/settings.json
-NODE_ENV=production forever start -c "node --stack-size=65500" bin/server.js
+NODE_ENV=production forever start -c "node --stack-size=262000" bin/server.js

server_config/server_update.sh

@@ -18,9 +18,7 @@ bower install --config.interactive=false --allow-root
 
 # Front-end compilation
 rm -rf front/build
-npm install grunt-cli -g
-npm install phantomjs -g
 grunt build
 
 # Restart the server
-NODE_ENV=production forever start -c "node --stack-size=65500" bin/server.js
+NODE_ENV=production forever start -c "node --stack-size=262000" bin/server.js

test/api/apiTest.js

@@ -96,7 +96,12 @@ describe('api', function() {
             body: {
                 url: wwwUrl + '/simple-page.html',
                 waitForResponse: true,
-                screenshot: true
+                screenshot: true,
+                device: 'tablet',
+                //waitForSelector: '*',
+                cookie: 'foo=bar',
+                authUser: 'joe',
+                authPass: 'secret'
             },
             json: true,
             headers: {
@@ -159,7 +164,17 @@ describe('api', function() {
                 body.should.have.a.property('scoreProfiles').that.is.an('object');
                 body.should.have.a.property('rules').that.is.an('object');
                 body.should.have.a.property('toolsResults').that.is.an('object');
+
+                // javascriptExecutionTree should only be filled if option jsTimeline is true
                 body.should.have.a.property('javascriptExecutionTree').that.is.an('object');
+                body.javascriptExecutionTree.should.deep.equal({});
+
+                // Check if settings are correctly sent and retrieved
+                body.params.options.should.have.a.property('device').that.equals('tablet');
+                //body.params.options.should.have.a.property('waitForSelector').that.equals('*');
+                body.params.options.should.have.a.property('cookie').that.equals('foo=bar');
+                body.params.options.should.have.a.property('authUser').that.equals('joe');
+                body.params.options.should.have.a.property('authPass').that.equals('secret');
 
                 // Check if the screenshot temporary file was correctly removed
                 body.params.options.should.not.have.a.property('screenshot');
@@ -188,7 +203,8 @@ describe('api', function() {
             url: serverUrl + '/api/runs',
             body: {
                 url: wwwUrl + '/simple-page.html',
-                waitForResponse: false
+                waitForResponse: false,
+                jsTimeline: true
             },
             json: true,
             headers: {
@@ -528,6 +544,110 @@ describe('api', function() {
     });
 
 
+    it('should return the entire object and exclude toolsResults', function(done) {
+        this.timeout(5000);
+
+        request({
+            method: 'GET',
+            url: serverUrl + '/api/results/' + asyncRunId + '?exclude=toolsResults',
+            json: true,
+        }, function(error, response, body) {
+            if (!error && response.statusCode === 200) {
+                
+                body.should.have.a.property('runId').that.equals(asyncRunId);
+                body.should.have.a.property('params').that.is.an('object');
+                body.should.have.a.property('scoreProfiles').that.is.an('object');
+                body.should.have.a.property('rules').that.is.an('object');
+                body.should.have.a.property('javascriptExecutionTree').that.is.an('object');
+                
+                body.should.not.have.a.property('toolsResults').that.is.an('object');
+
+                done();
+
+            } else {
+                done(error || response.statusCode);
+            }
+        });
+    });
+
+
+    it('should return the entire object and exclude params and toolsResults', function(done) {
+        this.timeout(5000);
+
+        request({
+            method: 'GET',
+            url: serverUrl + '/api/results/' + asyncRunId + '?exclude=toolsResults,params',
+            json: true,
+        }, function(error, response, body) {
+            if (!error && response.statusCode === 200) {
+                
+                body.should.have.a.property('runId').that.equals(asyncRunId);
+                body.should.have.a.property('scoreProfiles').that.is.an('object');
+                body.should.have.a.property('rules').that.is.an('object');
+                body.should.have.a.property('javascriptExecutionTree').that.is.an('object');
+                
+                body.should.not.have.a.property('params').that.is.an('object');
+                body.should.not.have.a.property('toolsResults').that.is.an('object');
+
+                done();
+
+            } else {
+                done(error || response.statusCode);
+            }
+        });
+    });
+
+    it('should return the entire object and don\'t exclude anything', function(done) {
+        this.timeout(5000);
+
+        request({
+            method: 'GET',
+            url: serverUrl + '/api/results/' + asyncRunId + '?exclude=',
+            json: true,
+        }, function(error, response, body) {
+            if (!error && response.statusCode === 200) {
+                
+                body.should.have.a.property('runId').that.equals(asyncRunId);
+                body.should.have.a.property('scoreProfiles').that.is.an('object');
+                body.should.have.a.property('rules').that.is.an('object');
+                body.should.have.a.property('javascriptExecutionTree').that.is.an('object');
+                body.should.have.a.property('params').that.is.an('object');
+                body.should.have.a.property('toolsResults').that.is.an('object');
+
+                done();
+
+            } else {
+                done(error || response.statusCode);
+            }
+        });
+    });
+
+    it('should return the entire object and don\'t exclude anything', function(done) {
+        this.timeout(5000);
+
+        request({
+            method: 'GET',
+            url: serverUrl + '/api/results/' + asyncRunId + '?exclude=null',
+            json: true,
+        }, function(error, response, body) {
+            if (!error && response.statusCode === 200) {
+                
+                body.should.have.a.property('runId').that.equals(asyncRunId);
+                body.should.have.a.property('scoreProfiles').that.is.an('object');
+                body.should.have.a.property('rules').that.is.an('object');
+                body.should.have.a.property('javascriptExecutionTree').that.is.an('object');
+                body.should.have.a.property('params').that.is.an('object');
+                body.should.have.a.property('toolsResults').that.is.an('object');
+
+                done();
+
+            } else {
+                done(error || response.statusCode);
+            }
+        });
+    });
+
+
     it('should retrieve the screenshot', function(done) {
         this.timeout(5000);
 

test/api/screenshotHandlerTest.js

@@ -85,7 +85,7 @@ describe('screenshotHandler', function() {
 
     it('should respond a temporary file', function() {
         var file = screenshot.getTmpFilePath();
-        file.should.have.string('/screenshot.jpg');
+        file.should.have.string('/screenshot.png');
     });
 
 
@@ -106,7 +106,7 @@ describe('screenshotHandler', function() {
     it('should delete the temp folder with the screenshot inside', function(done) {
         screenshot = ScreenshotHandler.getScreenshotTempFile();
         var tmpFolderPath = screenshot.getTmpFolder().path;
-        var tmpImagePath = path.join(tmpFolderPath, 'screenshot.jpg');
+        var tmpImagePath = path.join(tmpFolderPath, 'screenshot.png');
 
         // Copy image
         var testImage = fs.readFileSync(imagePath);

test/core/customPoliciesTest.js

@@ -1,7 +1,7 @@
 var should = require('chai').should();
 var rulesChecker = require('../../lib/rulesChecker');
 
-describe('rulesChecker', function() {
+describe('customPolicies', function() {
     
     var policies = require('../../lib/metadata/policies.js');
     var results;
@@ -70,131 +70,6 @@ describe('rulesChecker', function() {
         });
     });
 
-    
-    it('should transform DOMinserts offenders', function() {
-        results = rulesChecker.check({
-            "toolsResults": {
-                "phantomas": {
-                    "metrics": {
-                        "DOMinserts": 4
-                    },
-                    "offenders": {
-                        "DOMinserts": [
-                            "\"div\" appended to \"html\"",
-                            "\"DocumentFragment > link[0]\" appended to \"head\"",
-                            "\"div#Netaff-yh1XbS0vK3NaRGu\" appended to \"body > div#Global\"",
-                            "\"img\" appended to \"body\""
-                        ]
-                    }
-                }
-            }
-        }, policies);
-
-        results.should.have.a.property('DOMinserts');
-        results.DOMinserts.should.have.a.property('offendersObj').that.deep.equals({
-            "count": 4,
-            "list": [
-                {
-                    "insertedElement": {
-                        "type": "createdElement",
-                        "element": "div"
-                    },
-                    "receiverElement": {
-                        "type": "html"
-                    }
-                },
-                {
-                    "insertedElement": {
-                        "type": "fragmentElement",
-                        "element": "link[0]",
-                        "tree": {
-                            "DocumentFragment": {
-                                "link[0]": 1
-                            }
-                        }
-                    },
-                    "receiverElement": {
-                        "type": "head"
-                    }
-                },
-                {
-                    "insertedElement": {
-                        "type": "createdElement",
-                        "element": "div#Netaff-yh1XbS0vK3NaRGu"
-                    },
-                    "receiverElement": {
-                        "type": "domElement",
-                        "element": "div#Global",
-                        "tree": {
-                            "body": {
-                                "div#Global": 1
-                            }
-                        }
-                    }
-                },
-                {
-                    "insertedElement": {
-                        "type": "createdElement",
-                        "element": "img"
-                    },
-                    "receiverElement": {
-                        "type": "body"
-                    }
-                }
-            ]
-        });
-    });
-
-    
-    it('should transform DOMqueriesWithoutResults offenders', function() {
-        results = rulesChecker.check({
-            "toolsResults": {
-                "phantomas": {
-                    "metrics": {
-                        "DOMqueriesWithoutResults": 2
-                    },
-                    "offenders": {
-                        "DOMqueriesWithoutResults": [
-                            "#SearchMenu (in #document) using getElementById",
-                            ".partnership-link (in body > div#Global > div#Header > ul#MainMenu) using getElementsByClassName"
-                        ]
-                    }
-                }
-            }
-        }, policies);
-
-        results.should.have.a.property('DOMqueriesWithoutResults');
-        results.DOMqueriesWithoutResults.should.have.a.property('offendersObj').that.deep.equals({
-            "count": 2,
-            "list": [
-                {
-                    "context": {
-                        "type": "document"
-                    },
-                    "fn": "getElementById",
-                    "query": "#SearchMenu "
-                },
-                {
-                    "context": {
-                        "element": "ul#MainMenu",
-                        "tree": {
-                            "body": {
-                                "div#Global": {
-                                    "div#Header": {
-                                        "ul#MainMenu": 1
-                                    }
-                                }
-                            }
-                        },
-                        "type": "domElement"
-                    },
-                    "fn": "getElementsByClassName",
-                    "query": ".partnership-link "
-                }
-            ]
-        });
-    });
-
 
     it('should transform DOMqueriesAvoidable offenders', function() {
         results = rulesChecker.check({
@@ -246,61 +121,6 @@ describe('rulesChecker', function() {
     });
 
 
-    it('should transform eventsBound offenders', function() {
-        results = rulesChecker.check({
-            "toolsResults": {
-                "phantomas": {
-                    "metrics": {
-                        "eventsBound": 2
-                    },
-                    "offenders": {
-                        "eventsBound": [
-                            "\"DOMContentLoaded\" bound to \"#document\"",
-                            "\"unload\" bound to \"window\"",
-                            "\"submit\" bound to \"body > div#Global > div#Header > form#search_mini_form\""
-                        ]
-                    }
-                }
-            }
-        }, policies);
-
-        results.should.have.a.property('eventsBound');
-        results.eventsBound.should.have.a.property('offendersObj').that.deep.equals({
-            "count": 3,
-            "list": [
-                {
-                    "element": {
-                        "type": "document"
-                    },
-                    "eventName": "DOMContentLoaded"
-                },
-                {
-                    "element": {
-                        "type": "window"
-                    },
-                    "eventName": "unload"
-                },
-                {
-                    "element": {
-                        "element": "form#search_mini_form",
-                        "tree": {
-                            "body": {
-                                "div#Global": {
-                                    "div#Header": {
-                                        "form#search_mini_form": 1
-                                    }
-                                }
-                            }
-                        },
-                        "type": "domElement"
-                    },
-                    "eventName": "submit"
-                }
-            ]
-        });
-    });
-
-
     it('should transform jsErrors offenders', function() {
         results = rulesChecker.check({
             "toolsResults": {

test/core/indexTest.js

@@ -53,8 +53,9 @@ describe('index.js', function() {
                 data.toolsResults.phantomas.metrics.should.have.a.property('requests').that.equals(1);
                 data.toolsResults.phantomas.should.have.a.property('offenders').that.is.an('object');
                 data.toolsResults.phantomas.offenders.should.have.a.property('DOMelementMaxDepth');
-                data.toolsResults.phantomas.offenders.DOMelementMaxDepth.should.have.length(1);
-                data.toolsResults.phantomas.offenders.DOMelementMaxDepth[0].should.equal('body > h1[1]');
+                data.toolsResults.phantomas.offenders.DOMelementMaxDepth.should.have.length(2);
+                data.toolsResults.phantomas.offenders.DOMelementMaxDepth[0].should.equal('body > h1[0]');
+                data.toolsResults.phantomas.offenders.DOMelementMaxDepth[1].should.equal('body > script[1]');
 
                 // Test rules
                 data.should.have.a.property('rules').that.is.an('object');
@@ -76,10 +77,11 @@ describe('index.js', function() {
                     "score": 100,
                     "abnormalityScore": 0,
                     "offendersObj": {
-                        "count": 1,
+                        "count": 2,
                         "tree": {
                             "body": {
-                                "h1[1]": 1
+                                "h1[0]": 1,
+                                "script[1]": 1
                             }
                         }
                     }
@@ -91,6 +93,10 @@ describe('index.js', function() {
                 data.should.have.a.property('javascriptExecutionTree').that.is.an('object');
                 data.javascriptExecutionTree.should.have.a.property('data');
                 data.javascriptExecutionTree.data.should.have.a.property('type').that.equals('main');
+                data.javascriptExecutionTree.data.should.have.a.property('domInteractive').that.is.a('number');
+                data.javascriptExecutionTree.data.should.have.a.property('domContentLoaded').that.is.a('number');
+                data.javascriptExecutionTree.data.should.have.a.property('domContentLoadedEnd').that.is.a('number');
+                data.javascriptExecutionTree.data.should.have.a.property('domComplete').that.is.a('number');
 
                 /*jshint expr: true*/
                 console.log.should.not.have.been.called;

test/core/offendersHelpersTest.js

@@ -166,6 +166,40 @@ describe('offendersHelpers', function() {
             ]);
         });
 
+        it('should transform another backtrace syntax into an array', function() {
+            var result = offendersHelpers.backtraceToArray('phantomjs://webpage.evaluate():38 / e (http://s7.addthis.com/js/300/addthis_widget.js:1) / a (http://s7.addthis.com/js/300/addthis_widget.js:1) / http://s7.addthis.com/js/300/addthis_widget.js:3 / e (http://s7.addthis.com/js/300/addthis_widget.js:1) / http://s7.addthis.com/js/300/addthis_widget.js:8');
+
+            result.should.deep.equal([
+                {
+                    file: 'phantomjs://webpage.evaluate()',
+                    line: 38
+                },
+                {
+                    functionName: 'e',
+                    file: 'http://s7.addthis.com/js/300/addthis_widget.js',
+                    line: 1
+                },
+                {
+                    functionName: 'a',
+                    file: 'http://s7.addthis.com/js/300/addthis_widget.js',
+                    line: 1
+                },
+                {
+                    file: 'http://s7.addthis.com/js/300/addthis_widget.js',
+                    line: 3
+                },
+                {
+                    functionName: 'e',
+                    file: 'http://s7.addthis.com/js/300/addthis_widget.js',
+                    line: 1
+                },
+                {
+                    file: 'http://s7.addthis.com/js/300/addthis_widget.js',
+                    line: 8
+                }
+            ]);
+        });
+
         it('should return null if it fails', function() {
             var result = offendersHelpers.backtraceToArray('http://pouet.com/js/jquery.footer-transverse-min-v1.0.20.js:1 /http://pouet.com/js/main.js:1');
 

test/core/phantomasWrapperTest.js

@@ -18,14 +18,15 @@ describe('phantomasWrapper', function() {
                 options: {}
             }
         }).then(function(data) {
+            /*jshint -W030 */
 
             data.should.be.an('object');
             data.should.have.a.property('generator');
             data.generator.should.contain('phantomas');
             data.should.have.a.property('url').that.equals(url);
-            data.should.have.a.property('metrics').that.is.an('object').not.empty();
-            data.should.have.a.property('offenders').that.is.an('object').not.empty();
-            data.offenders.should.have.a.property('javascriptExecutionTree').that.is.a('array').not.empty();
+            data.should.have.a.property('metrics').that.is.an('object').not.empty;
+            data.should.have.a.property('offenders').that.is.an('object').not.empty;
+            data.offenders.should.have.a.property('javascriptExecutionTree').that.is.a('array').not.empty;
 
             done();
         }).fail(function(err) {
@@ -68,14 +69,15 @@ describe('phantomasWrapper', function() {
                 }
             }
         }).then(function(data) {
+            /*jshint -W030 */
             
             data.should.be.an('object');
             data.should.have.a.property('generator');
             data.generator.should.contain('phantomas');
             data.should.have.a.property('url').that.equals(url);
-            data.should.have.a.property('metrics').that.is.an('object').not.empty();
-            data.should.have.a.property('offenders').that.is.an('object').not.empty();
-            data.offenders.should.have.a.property('javascriptExecutionTree').that.is.a('array').not.empty();
+            data.should.have.a.property('metrics').that.is.an('object').not.empty;
+            data.should.have.a.property('offenders').that.is.an('object').not.empty;
+            data.offenders.should.have.a.property('javascriptExecutionTree').that.is.a('array').not.empty;
 
             done();
         }).fail(function(err) {

test/www/jquery-page.html

@@ -0,0 +1,195 @@
+<html>
+<head>
+    <title>Simple page</title>
+    <script src="jquery1.8.3.js"></script>
+</head>
+<body>
+    <h1>Simple page</h1>
+
+    <ul>
+        <li>li 1</li>
+        <li>li 2</li>
+        <li>li 3</li>
+    </ul>
+
+    <ul id="foo">
+        <li>li4</li>
+    </ul>
+
+    <script>
+
+        // Let's start the spaghetti code!!!
+
+        $('li').bind('mouseover', function() {});
+        $('ul').find('li');
+        $('li', $('#foo'));
+        var foo = document.getElementById('foo');
+        $('li', foo);
+        foo.getElementsByClassName('bar');
+        document.getElementsByClassName('bar');
+        foo.querySelector('ul li');
+        document.querySelector('ul li');
+        foo.querySelectorAll('ul li');
+        document.querySelectorAll('ul li');
+
+        var li = document.createElement('li');
+        foo.insertBefore(li, foo.children[0]);
+
+        li.addEventListener('click', function() {});
+
+        var $li = $(li);
+        $li.html();
+        $li.html('some content');
+        $('li').html();
+        $li.html('');
+        $('select').html();
+
+        $li.append('<div>woot</div>');
+        $li.append(document.createElement('span'));
+        $li.append($('<b>what</b>'));
+        $li.append(['<div>test1</div>', document.createElement('div')]);
+        $li.append('<div>test3</div>', '<div>test4</div>');
+
+        $('<div>test4</div>').appendTo($li);
+        $('<div>test5</div>').appendTo('<div class="bar"></div>');
+
+        $('li').prepend('<span class="prepended">prepended!</span>');
+        $('<div>test0</div>').prependTo($li);
+
+        $('<div>before bar</div>').before('.bar');
+        $('<div>before $li</div>').insertBefore($li);
+
+        $li.after('textnode after');
+        $('<div>after $li</div>').insertAfter($li);
+
+        $('.prepended').remove('.someClass');
+        $('.prepended').remove();
+        $('.prepended').detach();
+
+        $li.find('div').empty();
+        var $ulClones = $('ul').clone();
+
+        $('span').replaceWith('<span class="newspan">New span</span>');
+        $('<span class="newnewspan">New new span</span>').replaceAll('.newspan');
+
+        $('li').text();
+        $('li').eq(0).text('New li 1');
+
+        $('li').eq(0).wrap('<div></div>');
+        $('ul').wrapAll('<div class="ulWrapper"></div>');
+        $('.ulWrapper').wrapInner('<div class="doubleUlWrapper"></div>');
+        $('.doubleUlWrapper').unwrap();
+
+        $li.css('color', '#F00');
+        $li.css('color');
+        $li.css({'font-size': '1.2em', 'background': '#BFF'});
+        $li.offset();
+        $li.offset({left: 12, top: 23});
+        $li.offset(function() {return {left: 55, top: 44};});
+        $li.height();
+
+        $li.hide();
+        $li.hide(120);
+        $li.hide({duration: 133, done: function() {console.log(12);}});
+        $li.hide(222, 'swing', function() {console.log(9);});
+        $li.toggle();
+        $li.toggle(true);
+        $li.toggle(false);
+        $li.toggle(200);
+
+        var handler = function() {};
+        var $tbody = $('#dataTable tbody');
+        var $tbodytr = $('#dataTable tbody tr');
+        $tbodytr.on('click', handler);
+        $tbody.on('click', 'tr', handler);
+        $tbody.on('click', {someData: 'Joe'}, handler);
+        $tbody.on({event1: handler, event2: handler});
+        $tbodytr.off('click', handler);
+        $tbodytr.off('click', 'tr');
+        $tbodytr.off('click');
+        $tbodytr.off();
+        $tbody.delegate('tr', 'click', handler);
+        $tbody.undelegate('tr', 'click');
+        $tbody.undelegate('someNamespage');
+        $tbody.undelegate();
+        $tbody.one('zoop', handler);
+        $tbody.bind('zoop', handler);
+        $tbody.unbind('zoop', handler);
+        $tbody.bind();
+
+        $tbody.blur(handler);
+        $tbody.change(handler);
+        $tbody.click(handler);
+        $tbody.dblclick(handler);        
+        $tbody.error(handler);
+        $tbody.focus(handler);
+        $tbody.focusin(handler);
+        $tbody.focusout(handler);
+        $tbody.hover(handler);
+        $tbody.keydown(handler);
+        $tbody.keypress(handler);
+        $tbody.keyup(handler);
+        $tbody.load(handler);
+        $tbody.mousedown(handler);
+        $tbody.mouseenter(handler);
+        $tbody.mouseleave(handler);
+        $tbody.mousemove(handler);
+        $tbody.mouseout(handler);
+        $tbody.mouseover(handler);
+        $tbody.mouseup(handler);
+        $tbody.resize(handler);
+        $tbody.scroll(handler);
+        $tbody.select(handler);
+        $tbody.submit(handler);
+        $tbody.unload(handler);
+
+        $tbody.attr({alt: "Beijing Brush Seller", title: "photo by Kelly Clark"});
+        $tbody.attr('alt');
+        $tbody.attr('alt', 'An alternative alt');
+        $tbody.attr('alt', '');
+        $tbody.removeAttr('alt');
+
+        $tbody.prop({checked: true});
+        $tbody.prop('checked');
+        $tbody.prop('checked', true);
+        $tbody.prop('checked', '');
+        $tbody.removeProp('checked');
+
+        var $input = $('<input type="text"></input>');
+        $input.val('some value');
+        $input.val();
+
+        $tbody.addClass(function() {return 'foo';});
+        $tbody.hasClass('foo');
+        $tbody.removeClass('foo');
+        $tbody.toggleClass('foo');
+        $tbody.toggleClass('foo', true);
+        $tbody.toggleClass();
+
+        $li.children();
+        $li.children('span');
+        $li.closest('ul');
+        $li.closest('ul', document.getElementById('foo'));
+        $li.find('span');
+        $li.find(document.getElementById('foo'));
+        $li.find($li);
+        $li.next();
+        $li.next('li');
+        $li.nextAll();
+        $li.nextAll('li');
+        $li.nextUntil('.theEnd', 'li');
+        $li.offsetParent();
+        $li.prevAll();
+        $li.prevAll('li');
+        $li.prevUntil('.theBeginning', 'li');
+        $li.parent();
+        $li.parent('ul');
+        $li.parents();
+        $li.parents('div');
+        $li.parentsUntil('ul');
+        $li.parentsUntil('body', 'div');
+        $li.siblings();
+        $li.siblings('li');
+    </script>
+</body>
+</html>

test/www/scroll-page.html

@@ -0,0 +1,18 @@
+<html>
+<head>
+    <title>Scroll page</title>
+</head>
+<body>
+    <h1>Simple page</h1>
+
+    <script>
+        window.onscroll = function() {
+            document.getElementsByTagName('window.onscroll');
+        };
+
+        window.addEventListener('scroll', function() {
+            document.getElementsByTagName('scroll on window');
+        });
+    </script>
+</body>
+</html>

test/www/simple-page.html

@@ -4,5 +4,9 @@
 </head>
 <body>
     <h1>Simple page</h1>
+
+    <script>
+        document.getElementById('foo');
+    </script>
 </body>
 </html>