1.13.4 (#305)

* Update GitHub repository URL
* Update jQuery version

.bowerrc

@@ -1,3 +0,0 @@
-{
-  "directory" : "bower_components"
-}

.dockerignore

@@ -0,0 +1 @@
+node_modules/

.gitignore

@@ -1,9 +1,8 @@
 node_modules
-bower_components
 .tmp
 .vagrant
 results/*
 coverage
 front/build
-
+package-lock.json
 har.json

.travis.yml

@@ -1,7 +1,18 @@
 language: node_js
+sudo: false
 node_js:
-    - "0.10.33"
+  - "8.9"
+  - "6.2"
+env:
+  - CXX=g++-4.8
+addons:
+  apt:
+    sources:
+      - ubuntu-toolchain-r-test
+    packages:
+      - g++-4.8
 before_install:
-    - "npm install -g grunt-cli"
-    - "npm install -g phantomjs"
-install: npm install
+  - "npm install -g npm"
+  - "npm install -g grunt-cli"
+install:
+  - "npm install"

Dockerfile

@@ -0,0 +1,7 @@
+FROM    node:10
+WORKDIR /app
+ENV     VERSION=master
+EXPOSE  8383
+RUN     git clone --branch ${VERSION} https://github.com/LumberjackOtters/YellowLabTools ylt && cd ylt && yarn install && yarn build
+ENV     NODE_ENV=production
+CMD     ["node", "/app/ylt/bin/server.js"]

Gruntfile.js

@@ -80,27 +80,11 @@ module.exports = function(grunt) {
             dev: {
                 src: ['front/src/css']
             },
-            coverage: {
-                src: ['.tmp', 'coverage/']
-            },
             build: {
                 src: ['front/build']
             }
         },
         copy: {
-            beforeCoverage: {
-                files: [
-                    {src: ['bin/server.js'], dest: '.tmp/'}
-                ]
-            },
-            coverage: {
-                files: [
-                    {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/img/favicon.png'], dest: './front/build/img/favicon.png'},
@@ -108,50 +92,18 @@ module.exports = function(grunt) {
                 ]
             }
         },
-        lineremover: {
-            beforeCoverage: {
-                files: {
-                    '.tmp/bin/cli.js': 'bin/cli.js'
-                },
-                options: {
-                    exclusionPattern: /#!\/usr\/bin\/env node/
-                }
-            }
-        },
-        blanket: {
-            coverageApp: {
-                src: ['app/'],
-                dest: 'coverage/app/'
-            },
-            coverageLib: {
-                src: ['lib/'],
-                dest: 'coverage/lib/'
-            },
-            coverageBin: {
-                src: ['.tmp/bin/'],
-                dest: 'coverage/bin/'
-            }
-        },
         mochaTest: {
             test: {
                 options: {
                     reporter: 'spec',
                 },
-                src: ['coverage/test/core/*.js', 'coverage/test/api/*.js']
+                src: ['test/core/*.js', 'test/api/*.js']
             },
             'test-current-work': {
                 options: {
                     reporter: 'spec',
                 },
-                src: ['test/core/offendersHelpersTest.js']
-            },
-            coverage: {
-                options: {
-                    reporter: 'html-cov',
-                    quiet: true,
-                    captureFile: 'coverage/coverage.html'
-                },
-                src: ['coverage/test/core/*.js', 'coverage/test/api/*.js']
+                src: ['test/api/apiTest.js']
             }
         },
         env: {
@@ -182,7 +134,7 @@ module.exports = function(grunt) {
             test: {
                 options: {
                     port: 8387,
-                    server: './coverage/bin/server.js',
+                    server: './bin/server.js',
                     showStack: true
                 }
             },
@@ -243,7 +195,11 @@ module.exports = function(grunt) {
             build: {
                 options: {
                     base: '.tmp',
-                    method: 'append'
+                    method: 'append',
+                    unescape: {
+                        '&lt;': '<',
+                        '&gt;': '>'
+                    }
                 },
                 files: {
                     './front/build/main.html': ['.tmp/views/*.html']
@@ -261,35 +217,11 @@ module.exports = function(grunt) {
         }
     });
 
-
-    // Custom task: copies the test settings.json file to the coverage folder, and checks if there's no missing fields
-    grunt.registerTask('copy-test-server-settings', function() {
-        var mainSettingsFile = './server_config/settings.json';
-        var testSettingsFile = './test/fixtures/settings.json';
-
-        var mainSettings = grunt.file.readJSON(mainSettingsFile);
-        var testSettings = grunt.file.readJSON(testSettingsFile);
-
-        // Recursively compare keys of two objects (not the values)
-        function compareKeys(original, copy, context) {
-            for (var key in original) {
-                if (!copy[key] && copy[key] !== '' && copy[key] !== 0) {
-                    grunt.fail.warn('Settings file ' + testSettingsFile + ' doesn\'t contain key ' + context + '.' + key);
-                }
-                if (original[key] !== null && typeof original[key] === 'object') {
-                    compareKeys(original[key], copy[key], context + '.' + key);
-                }
-            }
-        }
-
-        compareKeys(mainSettings, testSettings, 'settings');
-
-        var outputFile = './coverage/server_config/settings.json';
-        grunt.file.write(outputFile, JSON.stringify(testSettings, null, 4));
-        grunt.log.ok('File ' + outputFile + ' created');
+    // Custom task that sets a variable for tests
+    grunt.registerTask('test-settings', function() {
+        process.env.IS_TEST = true;
     });
 
-
     grunt.registerTask('icons', [
         'webfont:icons',
         'less',
@@ -329,25 +261,18 @@ module.exports = function(grunt) {
     ]);
 
     grunt.registerTask('test', [
+        'test-settings',
         'build',
         'express:testSuite',
-        'clean:coverage',
-        'copy-test-server-settings',
-        'lineremover:beforeCoverage',
-        'copy:beforeCoverage',
-        'blanket',
-        'copy:coverage',
         'express:test',
         'mochaTest:test',
-        'mochaTest:coverage',
         'clean:tmp'
     ]);
 
     grunt.registerTask('test-current-work', [
+        'test-settings',
         'jshint',
         'express:testSuite',
-        'clean:coverage',
-        'copy-test-server-settings',
         'express:test-current-work',
         'mochaTest:test-current-work',
         'clean:tmp'

README.md

@@ -1,60 +1,89 @@
-# 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. Free, 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="https://yellowlab.tools" target="_blank">https://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/YellowLabTools/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/YellowLabTools/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/YellowLabTools/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 [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 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).
-
-#### The Grunt task:
-If you have a Continuous Integration platform, may I suggest you to use [grunt-yellowlabtools](https://github.com/gmetais/grunt-yellowlabtools)? You set it up once, then the task fails if the front-end quality conditions you defined are not met.
+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
 
-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
-
-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/)
+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/YellowLabTools/YellowLabTools/wiki/Install-your-private-server).
 
 
 ## 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. Follow me on Twitter [@gaelmetais](https://twitter.com/gaelmetais), I tweet about Web Performances, Front-end and new versions of YellowLabTools!
+
+I can also help your company about Web Performances, visit [my website](https://www.gaelmetais.com).
 
 
 ## Contributors
 - Achraf Ben Younes [achrafbenyounes](https://github.com/achrafbenyounes)
+- [camlafit](https://github.com/camlafit)
+- Vincent L. [magikcypress](https://github.com/magikcypress)
+- Ousama Ben Younes [ousamabenyounes](https://github.com/ousamabenyounes)
 

Vagrantfile

@@ -1,17 +1,24 @@
 Vagrant.configure("2") do |config|
 
-  config.vm.box = "precise64"
-  config.vm.box_url = "http://files.vagrantup.com/precise64.box"
+  config.vm.box = "ubuntu/trusty64"
 
   config.vm.network :private_network, ip: "10.10.10.10"
   config.ssh.forward_agent = true
 
+  # http://foo-o-rama.com/vagrant--stdin-is-not-a-tty--fix.html
+  config.vm.provision "fix-no-tty", type: "shell" do |s|
+    s.privileged = false
+    s.inline = "sudo sed -i '/tty/!s/mesg n/tty -s \\&\\& mesg n/' /root/.profile"
+  end
+
   config.vm.provider :virtualbox do |vb|
     vb.customize ["modifyvm", :id, "--natdnshostresolver1", "on"]
-    vb.customize ["modifyvm", :id, "--memory", 512]
+    vb.customize ["modifyvm", :id, "--memory", 1024]
     vb.customize ["modifyvm", :id, "--cpus", 2]
   end
 
+  config.vm.synced_folder "./", "/space/YellowLabTools"
+
   config.vm.provision :shell, :path => "server_config/server_install.sh"
 
-end
+end

bin/cli.js

@@ -1,10 +1,11 @@
 #!/usr/bin/env node
 
-var debug = require('debug')('ylt:cli');
-var meow = require('meow');
-var path = require('path');
+var debug       = require('debug')('ylt:cli');
+var meow        = require('meow');
+var path        = require('path');
+var EasyXml     = require('easyxml');
 
-var ylt = require('../lib/index');
+var ylt         = require('../lib/index');
 
 var cli = meow({
     help: [
@@ -14,7 +15,15 @@ var cli = meow({
         'Options:',
         '  --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.',
+        '  --proxy              Sets an HTTP proxy to pass through. Syntax is "host:port".',
+        '  --cookie             Adds a cookie on the main domain.',
+        '  --auth-user          Basic HTTP authentication username.',
+        '  --auth-pass          Basic HTTP authentication password.',
+        '  --block-domain       Disallow requests to given (comma-separated) domains - aka blacklist.',
+        '  --allow-domain       Only allow requests to given (comma-separated) domains - aka whitelist.',
+        '  --no-externals       Block all domains except the main one.',
+        '  --reporter           The output format: "json" or "xml". Default is "json".',
         ''
     ].join('\n'),
     pkg: '../package.json'
@@ -24,8 +33,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];
@@ -46,14 +54,33 @@ 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;
+
+// Proxy
+options.proxy = cli.flags.proxy || null;
+
+// Cookie
+options.cookie = cli.flags.cookie || null;
+
+// HTTP basic auth
+options.authUser = cli.flags.authUser || null;
+options.authPass = cli.flags.authPass || null;
+
+// Domain blocking
+options.blockDomain =  cli.flags.blockDomain || null;
+options.allowDomain =  cli.flags.allowDomain || null;
+options.noExternals =  cli.flags.noExternals || null;
+
+// Output format
+if (cli.flags.reporter && cli.flags.reporter !== 'json' && cli.flags.reporter !== 'xml') {
+    console.error('Incorrect parameters: reporter has to be "json" or "xml"');
+    process.exit(1);
+}
+
 
 (function execute(url, options) {
     'use strict';
@@ -63,7 +90,34 @@ options.device = cli.flags.device || 'desktop';
         then(function(data) {
 
             debug('Success');
-            console.log(JSON.stringify(data, null, 2));
+            switch(cli.flags.reporter) {
+                case 'xml':
+                    var serializer = new EasyXml({
+                        manifest: true
+                    });
+
+                    // Remove some heavy parts of the results object
+                    delete data.toolsResults;
+                    delete data.javascriptExecutionTree;
+
+                    var xmlOutput = serializer.render(data);
+
+                    // Remove special chars from XML tags: # [ ]
+                    xmlOutput = xmlOutput.replace(/<([^>]*)#([^>]*)>/g, '<$1>');
+                    xmlOutput = xmlOutput.replace(/<([^>]*)\[([^>]*)>/g, '<$1>');
+                    xmlOutput = xmlOutput.replace(/<([^>]*)\]([^>]*)>/g, '<$1>');
+
+                    // Remove special chars from text content: \n \0
+                    xmlOutput = xmlOutput.replace(/(<[a-zA-Z]*>[^<]*)\n([^<]*<\/[a-zA-Z]*>)/g, '$1$2');
+                    xmlOutput = xmlOutput.replace(/\0/g, '');
+                    xmlOutput = xmlOutput.replace(/\uFFFF/g, '');
+                    xmlOutput = xmlOutput.replace(/\u0002/g, '');
+
+                    console.log(xmlOutput);
+                    break;
+                default:
+                    console.log(JSON.stringify(data, null, 2));
+            }
 
         }).fail(function(err) {
             

bin/server.js

@@ -7,14 +7,22 @@ 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);
+app.use(bodyParser.urlencoded({ extended: true })); // for parsing application/x-www-form-urlencoded
+
+
+// EJS HTML engine
+app.engine('.html', require('ejs').__express);
+app.set('view engine', 'ejs');
 
 
 // Initialize the controllers
@@ -25,6 +33,9 @@ var frontController         = require('../lib/server/controllers/frontController
 // Let's start the server!
 if (!process.env.GRUNTED) {
     var settings = require('../server_config/settings.json');
+
+    app.locals.baseUrl = settings.baseUrl;
+
     server.listen(settings.serverPort, function() {
         console.log('Listening on port %d', server.address().port);
 
@@ -35,4 +46,4 @@ if (!process.env.GRUNTED) {
     });
 }
 
-module.exports = app;
+module.exports = app;

bower.json

@@ -1,14 +0,0 @@
-{
-  "name": "yellowlabtools",
-  "dependencies": {
-    "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.1.5"
-  },
-  "resolutions": {
-    "angular": "~1.3.8"
-  }
-}

front/src/css/dashboard.css

@@ -109,14 +109,18 @@
 .summary .notations .criteria .table {
   width: 100%;
 }
-.summary .notations .criteria .table > div:hover > div {
+.summary .notations .criteria .table > a {
+  text-decoration: none;
+  color: inherit;
+}
+.summary .notations .criteria .table > a:hover > div {
   background: #EBD8E2;
   cursor: pointer;
 }
-.summary .notations .criteria .table > div:hover > div.info {
+.summary .notations .criteria .table > a:hover > div.info {
   background: #FFF;
 }
-.summary .notations .criteria .table > div:hover > div.info .icon-question {
+.summary .notations .criteria .table > a:hover > div.info .icon-question {
   color: #EBD8E2;
 }
 .summary .notations .criteria .grade {
@@ -154,14 +158,6 @@
 .summary .fromShare {
   margin-bottom: 3em;
 }
-.summary .apiTip {
-  font-size: 0.8em;
-  margin-bottom: 4em;
-  color: #413;
-}
-.summary .apiTip a {
-  color: inherit;
-}
 .summary .tweet .tweetText {
   color: #413;
   background: #F2F2F2;
@@ -185,3 +181,11 @@
 .summary .tweet input {
   font-size: 0.9em;
 }
+.summary .sponsor {
+  font-size: 0.9em;
+  margin-bottom: 4em;
+  color: #413;
+}
+.summary .sponsor a {
+  color: inherit;
+}

front/src/css/index.css

@@ -13,11 +13,11 @@
   width: 50%;
 }
 .launchBtn {
-  background: #e74c3c;
+  background: #ffa319;
   color: #fff;
 }
 .launchBtn:focus {
-  background: #ffa319;
+  background: #e74c3c;
 }
 .launchBtn.disabled {
   background: #deaca6;
@@ -25,6 +25,20 @@
 .launchBtn.disabled:focus {
   color: #ddd;
 }
+.settings {
+  width: 50%;
+  margin: 0 auto;
+}
+.settings input,
+.settings select {
+  font-size: 1em;
+}
+.settings input[type=text],
+.settings input[type=password],
+.settings textarea {
+  width: 100%;
+  min-width: 4em;
+}
 .device {
   margin-top: 3em;
 }
@@ -53,10 +67,87 @@
   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;
+  vertical-align: middle;
+}
+.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;
 }
@@ -86,3 +177,6 @@ input[type=submit].clicked {
   top: 0.2em;
   box-shadow: none;
 }
+.homeSponsor {
+  margin-top: 3em;
+}

front/src/css/rule.css

@@ -29,9 +29,16 @@
   border-radius: 0.5em;
   margin: 0 auto 0.5em;
 }
+.rule h3 {
+  margin-bottom: 0em;
+}
+.rule .okThreshold {
+  font-style: italic;
+  font-size: 0.9em;
+}
 .rule .message {
   width: 80%;
-  margin: 0 auto;
+  margin: 1.5em auto;
 }
 .rule .message p {
   margin: 0.5em;
@@ -82,7 +89,11 @@
   font-size: 3em;
   margin-bottom: 1em;
 }
-.offenders .offenderButton {
+.rule .startTime {
+  display: none;
+}
+.offendersTable .offenderButton,
+.value .offenderButton {
   display: inline-block;
   position: relative;
   background: #efe;
@@ -90,17 +101,21 @@
   margin: 0.2em 0;
   border-radius: 0.4em;
   z-index: 1;
+  cursor: pointer;
 }
-.offenders .offenderButton.opens {
+.offendersTable .offenderButton.opens,
+.value .offenderButton.opens {
   padding-right: 0.75em;
 }
-.offenders .offenderButton.opens:after {
+.offendersTable .offenderButton.opens:after,
+.value .offenderButton.opens:after {
   position: relative;
   left: 0.5em;
   content: '\25BC';
   font-size: 0.8em;
 }
-.offenders .offenderButton > div {
+.offendersTable .offenderButton > div,
+.value .offenderButton > div {
   display: none;
   position: absolute;
   right: 0;
@@ -111,29 +126,41 @@
   border-top: 1px solid #999;
   z-index: 2;
 }
-.offenders .offenderButton .domTree {
+.offendersTable .offenderButton .domTree,
+.value .offenderButton .domTree {
   text-align: left;
   white-space: nowrap;
 }
-.offenders .offenderButton .domTree > div {
+.offendersTable .offenderButton .domTree > div,
+.value .offenderButton .domTree > div {
   margin: 0.5em;
 }
-.offenders .offenderButton .domTree > div div {
+.offendersTable .offenderButton .domTree > div div,
+.value .offenderButton .domTree > div div {
   margin-left: 1em;
 }
-.offenders .offenderButton .backtrace,
-.offenders .offenderButton .cssFileAndLine {
+.offendersTable .offenderButton .backtrace,
+.value .offenderButton .backtrace,
+.offendersTable .offenderButton .cssFileAndLine,
+.value .offenderButton .cssFileAndLine {
   white-space: nowrap;
   padding: 0.5em;
 }
-.offenders .offenderButton.opens:hover {
+.offendersTable .offenderButton.opens:hover,
+.value .offenderButton.opens:hover {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
   background: #ffe0cc;
   z-index: 2;
 }
-.offenders .offenderButton.opens:hover > div {
+.offendersTable .offenderButton.opens:hover > div,
+.value .offenderButton.opens:hover > div {
   display: block;
+  background: #ffe0cc;
+}
+.offendersTable .smallerOffenders,
+.value .smallerOffenders {
+  font-size: 0.9em;
 }
 .offendersHtml {
   display: inline-block;
@@ -149,15 +176,17 @@
   font-style: italic;
   font-weight: normal;
 }
+.checker {
+  /* Checkerboard background */
+  background-color: #ddd;
+  background-image: linear-gradient(45deg, #AAA 25%, transparent 25%, transparent 75%, #AAA 75%, #AAA), linear-gradient(45deg, #AAA 25%, transparent 25%, transparent 75%, #AAA 75%, #AAA);
+  background-size: 1em 1em;
+  background-position: 0 0, 0.5em 0.5em;
+}
 .colorPalette {
   width: 30em;
   border: 2px solid #000;
   text-align: left;
-  /* Checkerboard background */
-  background-color: #ddd;
-  background-image: linear-gradient(45deg, #aaaaaa 25%, transparent 25%, transparent 75%, #aaaaaa 75%, #aaaaaa), linear-gradient(45deg, #aaaaaa 25%, transparent 25%, transparent 75%, #aaaaaa 75%, #aaaaaa);
-  background-size: 1em 1em;
-  background-position: 0 0, 0.5em 0.5em;
 }
 .colorPalette > div {
   display: inline-block;
@@ -183,7 +212,6 @@
 .colorPalette > div:hover:after {
   content: " ";
   position: absolute;
-  background-color: inherit;
   left: -0.2em;
   top: -0.2em;
   width: 100%;
@@ -191,3 +219,50 @@
   z-index: 2;
   border: 0.2em solid #f1c40f;
 }
+.similarColors {
+  margin: 1em;
+  width: 20em;
+  height: 6em;
+}
+.similarColors > div {
+  display: inline-block;
+  width: 10em;
+  height: 3.5em;
+  padding-top: 2.5em;
+}
+.totalWeightPie {
+  max-width: 20em;
+  margin: 2em auto 4em;
+}
+.totalWeightPie canvas {
+  max-width: inherit;
+}
+.offenderProblem {
+  font-weight: bold;
+  color: #e74c3c;
+}
+.imageOffenders {
+  display: table;
+  border-spacing: 3em;
+  width: 90%;
+}
+.imageOffenders > div {
+  display: table-row;
+}
+.imageOffenders > div > div {
+  display: table-cell;
+  vertical-align: middle;
+}
+.imageOffenders img {
+  max-height: 10em;
+  max-width: 40em;
+  border: 1px solid #000;
+  margin-top: 0.5em;
+}
+.smallPreview {
+  display: block;
+  max-height: 6em;
+  max-width: 16em;
+  border: 1px solid #000;
+  margin: 1em auto 0.2em;
+}

front/src/css/timeline.css

@@ -62,34 +62,34 @@
   background: #F04DA7;
 }
 .timeline .domComplete.interval {
-  background: #ede3ff;
+  background: #EDE3FF;
 }
 .timeline .domComplete .color {
-  background: #c2a3ff;
+  background: #C2A3FF;
 }
 .timeline .domContentLoadedEnd.interval {
-  background: #d8f0f0;
+  background: #D8F0F0;
 }
 .timeline .domContentLoadedEnd .color {
-  background: #7ecccc;
+  background: #7ECCCC;
 }
 .timeline .domContentLoaded.interval {
-  background: #e0ffd1;
+  background: #E0FFD1;
 }
 .timeline .domContentLoaded .color {
-  background: #a7e846;
+  background: #A7E846;
 }
 .timeline .domInteractive.interval {
-  background: #fffccc;
+  background: #FFFCCC;
 }
 .timeline .domInteractive .color {
-  background: #ffe433;
+  background: #FFE433;
 }
 .timeline .domCreation.interval {
-  background: #ffe0cc;
+  background: #FFE0CC;
 }
 .timeline .domCreation .color {
-  background: #ff6600;
+  background: #FF6600;
 }
 .timeline .tooltip.detailsOverlay {
   position: absolute;
@@ -143,19 +143,25 @@
   border: 1px dotted #aaa;
   text-align: left;
 }
+.subFilters {
+  margin-left: 3em;
+  font-size: 0.9em;
+}
 .table {
   display: table;
   width: 100%;
   border-spacing: 0.25em;
 }
-.table > div {
+.table > div,
+.table > a {
   display: table-row;
 }
 .table > .headers > div {
   font-weight: bold;
   padding: 0.5em 1em;
 }
-.table > div > div {
+.table > div > div,
+.table > a > div {
   padding: 0.1em 1em;
   background: #f2f2f2;
   display: table-cell;
@@ -288,27 +294,45 @@
   white-space: nowrap;
 }
 .table > div > .startTime.domComplete {
-  background: #ede3ff;
+  background: #EDE3FF;
 }
 .table > div > .startTime.domContentLoadedEnd {
-  background: #d8f0f0;
+  background: #D8F0F0;
 }
 .table > div > .startTime.domContentLoaded {
-  background: #e0ffd1;
+  background: #E0FFD1;
 }
 .table > div > .startTime.domInteractive {
-  background: #fffccc;
+  background: #FFFCCC;
 }
 .table > div > .startTime.domCreation {
-  background: #ffe0cc;
+  background: #FFE0CC;
 }
 .execution .icon-warning {
   color: #e74c3c;
   cursor: pointer;
 }
-.warningsFilterOn > div {
+.queryWithoutResultsFilterOn > div {
   display: none;
 }
-.warningsFilterOn > div.warning {
+.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></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></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></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></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></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

@@ -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></g><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>
+<?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></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

@@ -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></g><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>
+<?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

@@ -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></g><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>
+<?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></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

@@ -19,11 +19,30 @@ var yltApp = angular.module('YellowLabTools', [
 ]);
 
 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()});
+        if (typeof ga !== "undefined") {
+            ga('send', 'pageview', {'page': $location.path()});
+        }
+    });
+
+    // GitHub star button (asynchronously loaded iframe)
+    window.addEventListener('load', function() {
+        window.document.getElementById('ghbtn').src = 'https://ghbtns.com/github-btn.html?user=YellowLabTools&repo=YellowLabTools&type=star&count=true&size=large';
     });
 }]);
 
@@ -65,3 +84,7 @@ yltApp.config(['$routeProvider', '$locationProvider',
     }
 ]);
 
+// Disable debugging https://docs.angularjs.org/guide/production
+yltApp.config(['$compileProvider', function ($compileProvider) {
+    $compileProvider.debugInfoEnabled(false);
+}]);

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();
@@ -26,29 +26,26 @@ dashboardCtrl.controller('DashboardCtrl', ['$scope', '$rootScope', '$routeParams
         $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.showRulePage = function(ruleName) {
-        $location.path('/result/' + $scope.runId + '/rule/' + ruleName);
-    };
+        $scope.tweetText = 'I\'ve discovered this cool open-source tool that audits the front-end quality of a web page: ';
+    }
 
     $scope.testAgain = function() {
         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 + 'https://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=https://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) {

front/src/js/controllers/indexCtrl.js

@@ -1,14 +1,23 @@
 var indexCtrl = angular.module('indexCtrl', []);
 
-indexCtrl.controller('IndexCtrl', ['$scope', 'Settings', 'API', function($scope, Settings, API) {
+indexCtrl.controller('IndexCtrl', ['$scope', '$routeParams', '$location', 'Settings', 'API', function($scope, $routeParams, $location, Settings, API) {
     
     $scope.settings = Settings.getMergedSettings();
-    console.log($scope.settings);
 
     $scope.launchTest = function() {
         if ($scope.url) {
+            $location.search('url', null);
+            $location.search('run', null);
             Settings.saveSettings($scope.settings);
             API.launchTest($scope.url, $scope.settings);
         }
     };
+
+    // Auto fill URL field and auto launch test when the good params are set in the URL
+    if ($routeParams.url) {
+        $scope.url = $routeParams.url;
+        if ($routeParams.run === 'true' || $routeParams.run === 1 || $routeParams.run === '1') {
+            $scope.launchTest();
+        }
+    }
 }]);

front/src/js/controllers/ruleCtrl.js

@@ -1,4 +1,13 @@
-var ruleCtrl = angular.module('ruleCtrl', []);
+var ruleCtrl = angular.module('ruleCtrl', ['chart.js']);
+
+ruleCtrl.config(['ChartJsProvider', function (ChartJsProvider) {
+    // Configure all charts
+    ChartJsProvider.setOptions({
+        animation: false,
+        colours: ['#FF5252', '#FF8A80'],
+        responsive: true
+    });
+}]);
 
 ruleCtrl.controller('RuleCtrl', ['$scope', '$rootScope', '$routeParams', '$location', '$sce', 'Menu', 'Results', 'API', function($scope, $rootScope, $routeParams, $location, $sce, Menu, Results, API) {
     $scope.runId = $routeParams.runId;
@@ -9,7 +18,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();
@@ -22,6 +31,101 @@ ruleCtrl.controller('RuleCtrl', ['$scope', '$rootScope', '$routeParams', '$locat
 
     function init() {
         $scope.rule = $scope.result.rules[$scope.policyName];
+
+        // Init "Total Weight" chart
+        if ($scope.policyName === 'totalWeight') {
+            $scope.weightLabels = [];
+            $scope.weightColours = ['#7ECCCC', '#A7E846', '#FF944D', '#FFE74A', '#C2A3FF', '#5A9AED', '#FF6452', '#C1C1C1'];
+            $scope.weightData = [];
+
+            var types = ['html', 'css', 'js', 'json', 'image', 'video', 'webfont', 'other'];
+            types.forEach(function(type) {
+                $scope.weightLabels.push(type);
+                $scope.weightData.push(Math.round($scope.rule.offendersObj.list.byType[type].totalWeight / 1024));
+            });
+
+            $scope.weightOptions = {
+                tooltips: {
+                    callbacks: {
+                        label: function(tooltipItem, data) {
+                            var label = data.labels[tooltipItem.index];
+                            var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
+                            return label + ': ' + value + ' KB';
+                        }
+                    }
+                },
+                legend: {
+                    display: true,
+                    position: 'bottom',
+                    labels: {
+                        boxWidth: 12,
+                        fontSize: 14
+                    }
+                }
+            };
+        }
+
+        // Init "Breakpoints" chart
+        if ($scope.policyName === 'cssBreakpoints' && $scope.rule.value > 0) {
+
+            // Seek for the biggest breakpoint
+            var max = 0;
+            $scope.rule.offendersObj.forEach(function(offender) {
+                if (offender.pixels > max) {
+                    max = offender.pixels;
+                }
+            });
+            max = Math.max(max + 100, 1400);
+
+            // We group offenders 10px by 10px
+            var GROUP_SIZE = 20;
+
+            // Generate an empty array of values
+            $scope.breakpointsLabels = [];
+            $scope.breakpointsData = [[]];
+            for (var i = 0; i <= max / GROUP_SIZE; i++) {
+                $scope.breakpointsLabels[i] = '';
+                $scope.breakpointsData[0][i] = 0;
+            }
+
+            // Fill it with results
+            $scope.rule.offendersObj.forEach(function(offender) {
+                var group = Math.floor((offender.pixels + 1) / GROUP_SIZE);
+
+                if ($scope.breakpointsLabels[group] !== '') {
+                    $scope.breakpointsLabels[group] += '/';
+                }
+                $scope.breakpointsLabels[group] += offender.breakpoint;
+
+                $scope.breakpointsData[0][group] += offender.count;
+            });
+
+            $scope.breakpointsSeries = ['Number of CSS rules per breakpoint'];
+            $scope.breakpointsColours = ['#9c4274'];
+            $scope.breakpointsOptions = {
+                scales: {
+                    xAxes: [{
+                        gridLines: {
+                            display:false
+                        }
+                    }],
+                    yAxes: [{
+                        gridLines: {
+                            display:false
+                        }
+                    }]
+                },
+                tooltips: {
+                    enabled: false
+                },
+
+                elements: {
+                    point: {
+                        radius: 0
+                    }
+                }
+            };
+        }
     }
 
     $scope.backToDashboard = function() {

front/src/js/controllers/screenshotCtrl.js

@@ -7,7 +7,7 @@ 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;
             }, function(err) {

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,26 +19,44 @@ 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;
+        var offenders = $scope.result.rules.totalRequests.offendersObj.list.byType.js;
         $scope.scripts = [];
 
-        offenders.forEach(function(script) {
-            var filePath = script.file;
+        offenders.forEach(function(filePath) {
+            var shortPath = filePath;
 
             if (filePath.length > 100) {
-                filePath = filePath.substr(0, 98) + '...';
+                shortPath = filePath.substr(0, 98) + '...';
             }
 
             var scriptObj = {
-                fullPath: script.file, 
-                shortPath: filePath
+                fullPath: filePath,
+                shortPath: shortPath
             };
 
             $scope.scripts.push(scriptObj);

front/src/js/directives/offendersDirectives.js

@@ -109,7 +109,7 @@
         } else if (context.length > 3) {
             html += ' and ' + (context.length - 2) + ' more...';
         }
-        return html + '}';
+        return html + ')';
     }
 
     function isJQuery(node) {
@@ -119,6 +119,22 @@
     function getNonJQueryHTML(node, onASingleLine) {
         var type = node.data.type;
 
+        if (node.windowPerformance) {
+            switch (type) {
+                case 'documentScroll':
+                    return '(triggering the scroll event on <b>document</b>)';
+
+                case 'windowScroll':
+                    return '(triggering the scroll event on <b>window</b>)';
+
+                case 'window.onscroll':
+                    return '(calling the <b>window.onscroll</b> function)';
+
+                default:
+                    return '';
+            }
+        }
+
         if (!node.data.callDetails) {
             return '';
         }
@@ -153,6 +169,18 @@
             case 'error':
                 return args[0];
 
+            case 'jQuery - onDOMReady':
+                return '(function)';
+
+            case 'documentScroll':
+                return 'The scroll event just triggered on document';
+
+            case 'windowScroll':
+                return 'The scroll event just triggered on window';
+
+            case 'window.onscroll':
+                return 'The window.onscroll function just got called';
+
             default:
                 return '';
         }
@@ -318,7 +346,9 @@
 
             case 'jQuery - on':
             case 'jQuery - one':
-                if (args[1]) {
+                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);
@@ -518,9 +548,6 @@
                 }
                 break;
 
-            case 'jQuery - onDOMReady':
-                return '(function)';
-
             default:
                 return '';
         }
@@ -581,7 +608,12 @@
             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 class="trace">' + getUrlLink(parsedBacktrace[i].filePath, 40) + '</div>';
+                if (parsedBacktrace[i].column) {
+                    html += '<div>' + parsedBacktrace[i].line + ':' + parsedBacktrace[i].column + '</div>';    
+                } else {
+                    html += '<div>line ' + parsedBacktrace[i].line + '</div>';
+                }
                 html += '</div>';
             }
         }
@@ -603,6 +635,22 @@
                 var fnName = null, fileAndLine;
 
                 var withFnResult = /^([^\s\(]+) \((.+:\d+)\)$/.exec(trace);
+                
+                if (withFnResult === null) {
+                    // Try the PhantomJS 2 format
+                    withFnResult = /^([^\s\(]+) \((.+:\d+:\d+)\)$/.exec(trace);
+                }
+
+                if (withFnResult === null) {
+                    // Yet another PhantomJS 2 format?
+                    withFnResult = /^([^\s\(]+|global code)@(.+:\d+:\d+)$/.exec(trace);
+                }
+
+                if (withFnResult === null) {
+                    // Try the PhantomJS 2 ERROR format
+                    withFnResult = /^([^\s\(]+) (http.+:\d+)$/.exec(trace);
+                }
+
                 if (withFnResult === null) {
                     fileAndLine = trace;
                 } else {
@@ -610,15 +658,26 @@
                     fileAndLine = withFnResult[2];
                 }
 
-                var fileAndLineSplit = /^(.*):(\d+)$/.exec(fileAndLine);
+                // And now the second part
+                var fileAndLineSplit = /^(.*):(\d+):(\d+)$/.exec(fileAndLine);
+
+                if (fileAndLineSplit === null) {
+                    fileAndLineSplit = /^(.*):(\d+)$/.exec(fileAndLine);
+                }
+
                 var filePath = fileAndLineSplit[1];
                 var line = fileAndLineSplit[2];
+                var column = fileAndLineSplit[3];
 
-                out.push({
-                    fnName: fnName,
-                    filePath: filePath,
-                    line: line
-                });
+                // Filter phantomas code
+                if (filePath.indexOf('phantomjs://') === -1) {
+                    out.push({
+                        fnName: fnName,
+                        filePath: filePath,
+                        line: line,
+                        column: column
+                    });
+                }
             });
 
         } catch(e) {
@@ -643,8 +702,8 @@
 
             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.data.type === 'jQuery - bind' && node.data.callDetails.context.length > 5) {
-                html += '<p class="advice">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>';
+            } 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) {
@@ -674,7 +733,7 @@
         function getProfilerLineHTML(index, node) {
             return  '<div class="index">' + (index + 1) + '</div>' +
                     '<div class="type">' + node.data.type + (node.children ? '<div class="children">' + recursiveChildrenHTML(node) + '</div>' : '') + '</div>' +
-                    '<div class="value offenders">' + getTimelineParamsHTML(node, false) + '</div>' +
+                    '<div class="value">' + getTimelineParamsHTML(node, false) + '</div>' +
                     '<div class="details">' + getTimelineDetailsHTML(node) + '</div>' +
                     '<div class="startTime ' + node.data.loadingStep + '">' + numberWithCommas(node.data.timestamp, 0) + ' ms</div>';
         }
@@ -692,7 +751,7 @@
         }
 
         function onDetailsClick(row) {
-            // Close if it's alreay open
+            // Close if it's already open
             if (row.classList.contains('showDetails')) {
                 closeDetails(row);
                 return;
@@ -739,10 +798,23 @@
                 element.append(getProfilerLineHTML(scope.index, scope.node));
                 element[0].id = 'line_' + scope.index;
 
-                if (scope.node.warning || scope.node.error) {
+                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) {
@@ -816,4 +888,51 @@
         };
     });
 
-})();
+    offendersDirectives.filter('bytes', function() {
+        return function(bytes) {
+            if (isNaN(parseFloat(bytes)) || !isFinite(bytes)) {
+                return '-';
+            }
+            
+            var kilo = bytes / 1024;
+
+            if (kilo < 1) {
+                return bytes + ' bytes';
+            }
+
+            if (kilo < 100) {
+                return kilo.toFixed(1) + ' KB';
+            }
+
+            if (kilo < 1024) {
+                return kilo.toFixed(0) + ' KB';
+            }
+
+            var mega = kilo / 1024;
+
+            if (mega < 10) {
+                return mega.toFixed(2) + ' MB';
+            }
+
+            return mega.toFixed(1) + ' MB';
+        };
+    });
+
+    offendersDirectives.filter('addSpaces', function() {
+        return function(str) {
+            return str.split('').join(' ');
+        };
+    });
+
+    // Proxify an HTTP image to HTTPS if hosted on HTTPS
+    // Uses a great free open-source external service: https://images.weserv.nl
+    offendersDirectives.filter('https', function() {
+        return function(url) {
+            if (url && url.indexOf('http://') === 0 && window.location.protocol === 'https:') {
+                return 'https://images.weserv.nl/?url=' + encodeURIComponent(url.substr(7));
+            }
+            return url;
+        };
+    });
+
+})();

front/src/js/models/resultsFactory.js

@@ -1,7 +1,7 @@
 var resultsFactory = angular.module('resultsFactory', ['ngResource']);
 
 resultsFactory.factory('Results', ['$resource', function($resource) {
-    return $resource('/api/results/:runId', {
+    return $resource('api/results/:runId', {
         
     });
 }]);

front/src/js/models/runsFactory.js

@@ -1,7 +1,7 @@
 var runsFactory = angular.module('runsFactory', ['ngResource']);
 
 runsFactory.factory('Runs', ['$resource', function($resource) {
-    return $resource('/api/runs/:runId', {
+    return $resource('api/runs/:runId', {
     
     });
 }]);

front/src/js/services/apiService.js

@@ -5,17 +5,40 @@ apiService.factory('API', ['$location', 'Runs', 'Results', function($location, R
     return {
 
         launchTest: function(url, settings) {
-            Runs.save({
+            var runObject = {
                 url: url,
                 waitForResponse: false,
                 screenshot: true,
-                jsTimeline: true,
-                device: settings.device
-            }, function(data) {
+                device: settings.device,
+                waitForSelector: settings.waitForSelector,
+                proxy: settings.proxy,
+                cookie: settings.cookie,
+                authUser: settings.authUser,
+                authPass: settings.authPass,
+                blockDomain: settings.blockDomain,
+                allowedDomains: settings.allowedDomains,
+                noExternals: settings.noExternals
+            };
+
+            
+            if (settings.domainsBlackOrWhite === 'black') {
+                runObject.blockDomain = this.parseDomains(settings.domains);
+            } else if (settings.domainsBlackOrWhite === 'white') {
+                var allowedDomains = this.parseDomains(settings.domains);
+                if (allowedDomains.length > 0) {
+                    runObject.allowDomain = allowedDomains;
+                } else {
+                    runObject.noExternals = true;
+                }
+            }
+
+            Runs.save(runObject, function(data) {
                 $location.path('/queue/' + data.runId);
             }, function(response) {
                 if (response.status === 429) {
                     alert('Too many requests, you reached the max number of requests allowed in 24h');
+                } else if (response.status === 403) {
+                    alert('This particular query was blocked due to spamming. If you think it\'s an error, please open an issue on GitHub.');
                 } else {
                     alert('An error occured...');
                 }
@@ -24,6 +47,17 @@ apiService.factory('API', ['$location', 'Runs', 'Results', function($location, R
 
         relaunchTest: function(result) {
             this.launchTest(result.params.url, result.params.options);
+        },
+
+        parseDomains: function(textareaContent) {
+            var lines = textareaContent.split('\n');
+            
+            function removeEmptyLines (line) {
+                return line.trim() !== '';
+            }
+
+            // Remove empty lines
+            return lines.filter(removeEmptyLines).join(',');
         }
     };
 

front/src/js/services/settingsService.js

@@ -6,7 +6,8 @@ settingsService.factory('Settings', ['localStorageService', function(localStorag
 
         getMergedSettings: function() {
             var defaultSettings = {
-                device: 'desktop'
+                device: 'desktop',
+                showAdvanced: false
             };
             
             var savedValues = localStorageService.get('settings');

front/src/less/dashboard.less

@@ -108,7 +108,11 @@
 
 .summary .notations .criteria .table {
     width: 100%;
-    > div:hover > div {
+    > a {
+        text-decoration: none;
+        color: inherit;
+    }
+    > a:hover > div {
         background: #EBD8E2;
         cursor: pointer;
         &.info {
@@ -154,15 +158,6 @@
     margin-bottom: 3em;
 }
 
-.summary .apiTip {
-    font-size: 0.8em;
-    margin-bottom: 4em;
-    color: #413;
-    a {
-        color: inherit;
-    }
-}
-
 .summary .tweet {
     .tweetText {
         color: #413;
@@ -185,4 +180,13 @@
     input {
         font-size: 0.9em;
     }
+}
+
+.summary .sponsor {
+    font-size: 0.9em;
+    margin-bottom: 4em;
+    color: #413;
+    a {
+        color: inherit;
+    }
 }

front/src/less/index.less

@@ -16,10 +16,10 @@
 }
 
 .launchBtn {
-    background: #e74c3c;
+    background: #ffa319;
     color: #fff;
     &:focus {
-        background: #ffa319;
+        background: #e74c3c;
     }
     &.disabled {
         background: #deaca6;
@@ -30,6 +30,20 @@
     
 }
 
+.settings {
+    width: 50%;
+    margin: 0 auto;
+
+    input, select {
+        font-size: 1em;
+    }
+
+    input[type=text], input[type=password], textarea {
+        width: 100%;
+        min-width: 4em;
+    }
+}
+
 .device {
     margin-top: 3em;
     .item {
@@ -62,10 +76,100 @@
     }
 }
 
+.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;
+                vertical-align: middle;
+            }
+        }
+    }
+
+    .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;
 
@@ -95,4 +199,8 @@ input[type=submit].clicked {
     left: 0.1em;
     top: 0.2em;
     box-shadow: none;
+}
+
+.homeSponsor {
+    margin-top: 3em;
 }

front/src/less/main.less

@@ -132,13 +132,21 @@ a.linkButton {
     background: #000;
 
     > div {
-        overflow: scroll;
         position: relative;
+        overflow: hidden;
+
+        &:hover {
+            overflow: auto;
+        }
     }
 
     .screenshotImage {
         width: 100%;
     }
+
+    .screenshotError {
+        color: #fff;
+    }
 }
 
 .screenshotWrapper.desktop {
@@ -230,14 +238,6 @@ a.linkButton {
     }
 }
 
-
-.star {
-    font-weight: bold;
-    span {
-        font-size: 1.2em;
-    }
-}
-
 .footer {
     padding: 3em;
     color: #413;
@@ -247,4 +247,14 @@ a.linkButton {
     .version {
         font-size: 0.7em;
     }
+    .github {
+        margin: 1em 0 0 0.5em;
+    }
+    .sponsor {
+        font-size: 0.9em;
+    }
+}
+
+[class^="icon-"]:before, [class*=" icon-"]:before {
+    vertical-align: baseline;
 }

front/src/less/rule.less

@@ -32,9 +32,18 @@
     margin: 0 auto 0.5em;
 }
 
+.rule h3 {
+    margin-bottom: 0em;
+}
+
+.rule .okThreshold {
+    font-style: italic;
+    font-size: 0.9em;
+}
+
 .rule .message {
     width: 80%;
-    margin: 0 auto;
+    margin: 1.5em auto;
     p {
         margin: 0.5em;
     }
@@ -90,7 +99,11 @@
     }
 }
 
-.offenders {
+.rule .startTime {
+    display: none;
+}
+
+.offendersTable, .value {
     .offenderButton {
         display: inline-block;
         position: relative;
@@ -99,6 +112,7 @@
         margin: 0.2em 0;
         border-radius: 0.4em;
         z-index: 1;
+        cursor: pointer;
 
         &.opens {
             padding-right: 0.75em;
@@ -149,9 +163,14 @@
 
             > div {
                 display: block;
+                background: #ffe0cc;
             }
         }
     }
+
+    .smallerOffenders {
+        font-size: 0.9em;
+    }
 }
 
 .offendersHtml {
@@ -171,16 +190,18 @@
     }
 }
 
-.colorPalette {
-    width: 30em;
-    border: 2px solid #000;
-    text-align: left;
-
+.checker {
     /* Checkerboard background */
     background-color: #ddd;
     background-image: linear-gradient(45deg, #AAA 25%, transparent 25%, transparent 75%, #AAA 75%, #AAA), linear-gradient(45deg, #AAA 25%, transparent 25%, transparent 75%, #AAA 75%, #AAA);
     background-size:1em 1em;
     background-position:0 0, 0.5em 0.5em;
+}
+
+.colorPalette {
+    width: 30em;
+    border: 2px solid #000;
+    text-align: left;
 
     > div {
         display: inline-block;
@@ -208,7 +229,6 @@
         &:hover:after {
             content: " ";
             position: absolute;
-            background-color: inherit;
             left: -0.2em;
             top: -0.2em;
             width: 100%;
@@ -217,4 +237,61 @@
             border: 0.2em solid #f1c40f;
         }
     }
+}
+
+.similarColors {
+    margin: 1em;
+    width: 20em;
+    height: 6em;
+
+    > div {
+        display: inline-block;
+        width: 10em;
+        height: 3.5em;
+        padding-top: 2.5em;
+    }
+}
+
+.totalWeightPie {
+    max-width: 20em;
+    margin: 2em auto 4em;
+
+    canvas {
+        max-width: inherit;
+    }
+}
+
+.offenderProblem {
+    font-weight: bold;
+    color: #e74c3c;
+}
+
+.imageOffenders {
+    display: table;
+    border-spacing: 3em;
+    width: 90%;
+
+    > div {
+        display: table-row;
+
+        > div {
+            display: table-cell;
+            vertical-align: middle;
+        }
+    }
+
+    img {
+        max-height: 10em;
+        max-width: 40em;
+        border: 1px solid #000;
+        margin-top: 0.5em;
+    }
+}
+
+.smallPreview {
+    display: block;
+    max-height: 6em;
+    max-width: 16em;
+    border: 1px solid #000;
+    margin: 1em auto 0.2em;
 }

front/src/less/timeline.less

@@ -162,13 +162,19 @@
     text-align: left;
 }
 
+.subFilters {
+    margin-left: 3em;
+    font-size: 0.9em;
+}
+
 .table {
     display: table;
     width: 100%;
     border-spacing: 0.25em;
 }
 
-.table > div {
+.table > div,
+.table > a {
     display: table-row;
 }
 
@@ -177,7 +183,8 @@
     padding: 0.5em 1em;
 }
 
-.table > div > div {
+.table > div > div,
+.table > a > div {
     padding: 0.1em 1em;
     background: #f2f2f2;
     display: table-cell;
@@ -346,10 +353,34 @@
     color: #e74c3c;
     cursor: pointer;
 }
-.warningsFilterOn {
+.queryWithoutResultsFilterOn {
     > div {
         display: none;
-        &.warning {
+        &.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

@@ -2,57 +2,68 @@
 <head>
 	<meta charset="utf-8">
     <title>Yellow Lab Tools</title>
-    <base href="/">
-    <link rel="icon" type="image/png" href="/img/favicon.png">
-    <meta property="og:image" content="/img/logo-large.png" />
+    <base href="<%= baseUrl %>">
+    <link rel="icon" type="image/png" href="img/favicon.png">
+    <meta property="og:image" content="img/logo-large.png" />
     <meta name="description" content="Free online web performance tool. Audit your webpage for performance and front-end quality issues. And it's open-source!" />
 
-    <!-- build:css /css/styles.css-->
-    <link rel="stylesheet" type="text/css" href="/css/main.css">
-    <link rel="stylesheet" type="text/css" href="/css/index.css">
-    <link rel="stylesheet" type="text/css" href="/css/dashboard.css">
-    <link rel="stylesheet" type="text/css" href="/css/queue.css">
-    <link rel="stylesheet" type="text/css" href="/css/rule.css">
-    <link rel="stylesheet" type="text/css" href="/css/screenshot.css">
-    <link rel="stylesheet" type="text/css" href="/css/timeline.css">
-    <link rel="stylesheet" type="text/css" href="/css/about.css">
+    <!-- build:css css/styles.css-->
+    <link rel="stylesheet" type="text/css" href="css/main.css">
+    <link rel="stylesheet" type="text/css" href="css/index.css">
+    <link rel="stylesheet" type="text/css" href="css/dashboard.css">
+    <link rel="stylesheet" type="text/css" href="css/queue.css">
+    <link rel="stylesheet" type="text/css" href="css/rule.css">
+    <link rel="stylesheet" type="text/css" href="css/screenshot.css">
+    <link rel="stylesheet" type="text/css" href="css/timeline.css">
+    <link rel="stylesheet" type="text/css" href="css/about.css">
     <!-- endbuild -->
 
-    <!-- build:js /js/all.js -->
-    <script src="/bower_components/angular/angular.min.js"></script>
-    <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>
-    <script src="/js/controllers/queueCtrl.js"></script>
-    <script src="/js/controllers/ruleCtrl.js"></script>
-    <script src="/js/controllers/screenshotCtrl.js"></script>
-    <script src="/js/controllers/timelineCtrl.js"></script>
-    <script src="/js/models/resultsFactory.js"></script>
-    <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>
+    <link rel="preconnect" href="https://www.google-analytics.com">
+    <link rel="dns-prefetch" href="https://www.google-analytics.com">
+    <link rel="preconnect" href="https://ghbtns.com">
+    <link rel="dns-prefetch" href="https://ghbtns.com">
+    <link rel="preconnect" href="https://api.github.com">
+    <link rel="dns-prefetch" href="https://api.github.com">
 
-    <script src="/js/directives/gradeDirective.js"></script>
-    <script src="/js/directives/offendersDirectives.js"></script>
-    <!-- endbuild -->
-<head>
+</head>
 
 <body ng-app="YellowLabTools">
     <div id="header"><h1>Yellow Lab <span class="icon-lab"></span> Tools</h1></div>
     <div id="body" ng-view autoscroll="true"></div>
     <div class="footer">
-        <a href="/about">Learn more</a><br>If you like <b>Yellow Lab Tools</b>, <a href="https://github.com/gmetais/YellowLabTools" target="_blank" class="star">give it a <span>&#9733;</span> on GitHub</a>!<br>
         <span class="version">@@version</span>
+        <br><a href="<%= baseUrl %>about">More about Yellow Lab Tools</a><br>
+        <div class="github"><iframe id="ghbtn" frameborder="0" scrolling="0" width="145px" height="30px"></iframe></div>
     </div>
 
+    <!-- build:js js/all.js -->
+    <script src="node_modules/angular/angular.min.js"></script>
+    <script src="node_modules/chart.js/dist/Chart.min.js"></script>
+    <script src="node_modules/angular-route/angular-route.min.js"></script>
+    <script src="node_modules/angular-resource/angular-resource.min.js"></script>
+    <script src="node_modules/angular-sanitize/angular-sanitize.min.js"></script>
+    <script src="node_modules/angular-animate/angular-animate.min.js"></script>
+    <script src="node_modules/angular-local-storage/dist/angular-local-storage.min.js"></script>
+    <script src="node_modules/angular-chart.js/dist/angular-chart.min.js"></script>
+    <script src="js/app.js"></script>
+    <script src="js/controllers/indexCtrl.js"></script>
+    <script src="js/controllers/dashboardCtrl.js"></script>
+    <script src="js/controllers/queueCtrl.js"></script>
+    <script src="js/controllers/ruleCtrl.js"></script>
+    <script src="js/controllers/screenshotCtrl.js"></script>
+    <script src="js/controllers/timelineCtrl.js"></script>
+    <script src="js/models/resultsFactory.js"></script>
+    <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 -->
+
     <script>
-        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');if('@@googleAnalyticsId'.indexOf('UA-')===0){ga('create','@@googleAnalyticsId','auto');}
+        if('@@googleAnalyticsId'.indexOf('UA-')===0){(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');ga('create','@@googleAnalyticsId','auto');}
     </script>
 </body>
 </html>

front/src/views/about.html

@@ -1,9 +1,13 @@
 <div class="about">
-    <p><b>Yellow Lab Tools</b> is an open source project by <a href="http://www.gaelmetais.com" target="_blank">Gaël Métais</a>. It lets you test a webpage (via an URL) and detects <b>performance</b> and <b>front-end code quality</b> issues.</p>
+    <p><b>Yellow Lab Tools</b> is an open source project by <a href="http://www.gaelmetais.com" target="_blank">Gaël Métais</a>. It allows you to test a webpage (via an URL) and detects <b>performance</b> and <b>front-end code quality</b> issues.</p>
 
-    <p>This is done by loading the webpage via PhantomJS and collecting various metrics and statistics with the help of <a href="https://github.com/macbre/phantomas" target="_blank">Phantomas</a>. These metrics are categorized and transformed into scores. It also gives in-depth details so developpers can correct the detected issues.</p>
+    <p>This is done by loading the webpage via PhantomJS and collecting various metrics and statistics with the help of <a href="https://github.com/macbre/phantomas" target="_blank">Phantomas</a>. These metrics are categorized and transformed into scores. It also gives in-depth details so that developers can correct the detected issues.</p>
 
-    <p>By the way, <b>it's free</b> because we are geeks, not businessmen. All we want is <a href="https://github.com/gmetais/YellowLabTools" target="_blank" class="star">a <span>&#9733;</span> on GitHub</a>. It will boost our motivation to add more awesome features!!!</p>
+    <p>By the way, <b>it's free</b> because we are geeks, not businessmen. All we want is <a href="https://github.com/YellowLabTools/YellowLabTools" target="_blank" class="star">a <span>&#9733;</span> on GitHub</a>. It will boost our motivation to add more awesome features!!!</p>
 
-    <p><br><a href="/">Back to index</a></p>
+    <%if (sponsoring.about) { %>
+        <div class="sponsor"><%- sponsoring.about %></div>
+    <% } %>
+
+    <p><br><a href="<%= baseUrl %>">Back to index</a></p>
 </div>

front/src/views/dashboard.html

@@ -1,6 +1,13 @@
 <div ng-include="'views/resultSubHeader.html'"></div>
 <div class="summary board">
     
+    <div ng-if="result.blockedRequests">
+        <b><ng-pluralize count="result.blockedRequests.length" when="{'0': 'No blocked request', 'one': '1 blocked request', 'other': '{} blocked requests'}"></ng-pluralize>:</b>
+        <div ng-repeat="request in result.blockedRequests track by $index">
+            {{request}}
+        </div>
+    </div>
+
     <div class="globalScore" ng-if="globalScore === 0 || globalScore > 0">
         <div>
             <h2>Global score</h2>
@@ -10,10 +17,11 @@
             </div>
         </div>
         <div>
-            <a href="/result/{{result.runId}}/screenshot">
-                <div class="screenshotWrapper" ng-class="result.params.options.device">
+            <a href="result/{{result.runId}}/screenshot">
+                <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>
@@ -27,28 +35,30 @@
             <div class="category">{{category.label}}</div>
             <div class="criteria">
                 <div class="table" title="Click to see details">
-                    <div ng-repeat="ruleName in category.rules" ng-if="result.rules[ruleName]" ng-init="rule = result.rules[ruleName]"
-                         ng-class="{'warning': rule.abnormal}" ng-click="showRulePage(ruleName)">
+                    <a ng-repeat="ruleName in category.rules" ng-if="result.rules[ruleName]" ng-init="rule = result.rules[ruleName]"
+                         ng-class="{'warning': rule.abnormal}" href="result/{{runId}}/rule/{{ruleName}}">
                         <div class="grade">
                             <grade score="rule.score"></grade>
                         </div>
                         <div class="label">{{rule.policy.label}}</div>
                         <div class="result">
-                            {{rule.value}}
+                            <span ng-if="rule.policy.unit == 'bytes'">{{rule.value | bytes}}</span>
+                            <span ng-if="rule.policy.unit != 'bytes'">{{rule.value}}</span>
                             <span ng-if="rule.abnormal" class="icon-warning"></span>
                             <span ng-if="rule.abnormalityScore <= -100" class="icon-warning"></span>
                             <span ng-if="rule.abnormalityScore <= -300" class="icon-warning"></span>
                         </div>
                         <div class="info"><span class="icon-question"></span></div>
-                    </div>
+                    </a>
                 </div>
             </div>
         </div>
     </div>
 
-    <div ng-if="!error && !fromSocialShare" class="apiTip">
-        <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>
+    <%if (sponsoring.dashboard) { %>
+        <div ng-if="!error && !fromSocialShare" class="sponsor"><%- sponsoring.dashboard %></div>
+    <% } %>
+    
 
     <div class="tweet" ng-if="!error && !fromSocialShare">
         <form ng-submit="sendTweet()">
@@ -61,7 +71,7 @@
     <div class="fromShare" ng-if="!error && fromSocialShare">
         <p>Yellow Lab Tools is a free online tool that analyzes performance and front-end quality.</p>
         <a class="linkButton" href="" ng-click="seeFullReport()">See the full report for this page</a>
-        <a class="linkButton" href="/">Test another webpage</a>
+        <a class="linkButton" href="<%= baseUrl %>">Test another webpage</a>
     </div>
 
     <div ng-if="error">

front/src/views/index.html

@@ -7,9 +7,88 @@
     <div class="settings">
         <div class="device">
             <div>Choose the simulated device:</div>
-            <div class="item" ng-class="{active: settings.device == 'desktop'}" ng-click="settings.device = 'desktop'"><div class="icon-screen"></div>Desktop</div>
-            <div class="item" ng-class="{active: settings.device == 'tablet'}" ng-click="settings.device = 'tablet'"><div class="icon-tablet"></div>Tablet</div>
-            <div class="item" ng-class="{active: settings.device == 'phone'}" ng-click="settings.device = 'phone'"><div class="icon-mobile"></div>Phone</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 || settings.proxy || settings.domains)">
+            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 ng-if="settings.proxy">proxy</span>
+            <span ng-if="settings.domains">domain blocking</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 cookies, separated by a pipe character.<br><br>Example: "bar1=foo1;domain=.domain1.com|bar2=foo2;domain=www.domain2.com"</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="password" class="authField" name="authPass" ng-model="settings.authPass" /></div>
+                    </div>
+                </div>
+            </div>
+            <div>
+                <div class="label">
+                    HTTP proxy
+                    <span class="settingsTooltip">
+                        <span class="icon-question"></span>
+                        <div><b>HTTP proxy</b><br><br>Insert here your proxy settings with the format "host:port".<br><br>Example: "192.168.10.0:3333"</div>
+                    </span>
+                </div>
+                <div><input type="text" name="proxy" ng-model="settings.proxy" /></div>
+            </div>
+            <div>
+                <div class="label">
+                    Block domains
+                    <span class="settingsTooltip">
+                        <span class="icon-question"></span>
+                        <div><b>Block some domains</b><br><br>One line per domain or subdomain.<br><br><i><b>Example:</b><br>google-analytics.com<br>ads.yahoo.com<br>ajax.googleapis.com</i><br><br>An empty whitelist will block all domains except the main domain.</div>
+                    </span>
+                </div>
+                <div>
+                    <div>
+                        <input type="radio" name="blackOrWhite" ng-model="settings.domainsBlackOrWhite" value="black" />blacklist
+                        <input type="radio" name="blackOrWhite" ng-model="settings.domainsBlackOrWhite" value="white" />whitelist
+                    </div>
+                    <textarea name="domains" ng-model="settings.domains" rows="5"></textarea>
+                </div>
+            </div>
         </div>
     </div>
 </form>
@@ -30,4 +109,8 @@
         <h3>JS Profiling</h3>
         <p>Untangles the JavaScript spaghetti code</p>
     </div>
-</div>
+</div>
+
+<%if (sponsoring.home) { %>
+    <div class="homeSponsor"><%- sponsoring.home %></div>
+<% } %>

front/src/views/queue.html

@@ -5,8 +5,8 @@
         <div class="status">Test failed</div>
         <p class="statusSubMessage">{{status.error}}</p>
         
-        <a class="linkButton" href="https://github.com/gmetais/YellowLabTools/issues" target="_blank">Report the issue on GitHub</a>
-        <a class="linkButton" href="/">New test</a>
+        <a class="linkButton" href="https://github.com/YellowLabTools/YellowLabTools/issues" target="_blank">Report the issue on GitHub</a>
+        <a class="linkButton" href="<%= baseUrl %>">New test</a>
     </div>
     <div ng-if="status.statusCode == 'awaiting'">
         <div class="status">
@@ -28,7 +28,7 @@
     <div class="status">Error 404 (test not found)</div>
     <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>
+    <a class="linkButton" href="<%= baseUrl %>">New test</a>
 </div>
 <div ng-if="connectionLost == true">
     <div class="status">Connection lost with server</div>

front/src/views/resultSubHeader.html

@@ -1,7 +1,7 @@
 <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-arrow-left3"></div><span>New test<span></a>
+    <a class="menuItem back" href="<%= baseUrl %>"><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-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>

front/src/views/rule.html

@@ -9,7 +9,19 @@
             <div>{{rule.score}}/100</div>
         </div>
         <div class="right">
-            <h3>Value: {{rule.value}}</h3>
+            <h3>
+                Value:
+                <span ng-if="rule.policy.unit == 'bytes'">{{rule.value | bytes}}</span>
+                <span ng-if="rule.policy.unit != 'bytes'">{{rule.value}}</span>
+            </h3>
+            <div class="okThreshold" ng-if="rule.score < 100 && rule.policy.isOkThreshold !== undefined">
+                Have
+                <span ng-if="rule.policy.unit == 'bytes'">{{rule.policy.isOkThreshold | bytes}}</span>
+                <span ng-if="rule.policy.unit != 'bytes'">{{rule.policy.isOkThreshold}}</span>
+                <span ng-if="rule.policy.isOkThreshold > 0 && rule.policy.isOkThreshold < rule.policy.isBadThreshold">or less</span>
+                <span ng-if="rule.policy.isOkThreshold > rule.policy.isBadThreshold">or more</span>
+                to get the 100/100 score.
+            </div>
             <div ng-bind-html="rule.policy.message" class="message"></div>
         </div>
     </div>
@@ -18,7 +30,7 @@
         <p>This rule reached the abnormality threshold, which means there is a real problem you should care about.</p>
     </div>
     <div class="offenders" ng-if="rule.policy.hasOffenders">
-        <h3><ng-pluralize count="rule.offendersObj.count" when="{'0': 'No offenders', 'one': '1 offender', 'other': '{} offenders'}"></ng-pluralize></h3>
+        <h3 ng-if="rule.offendersObj.count >= 0"><ng-pluralize count="rule.offendersObj.count" when="{'0': 'No offenders', 'one': '1 offender', 'other': '{} offenders'}"></ng-pluralize></h3>
 
         <div ng-if="rule.offendersObj.list" class="offendersTable">
             <div ng-repeat="offender in rule.offendersObj.list track by $index">
@@ -31,20 +43,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 +79,10 @@
                         </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">
@@ -75,61 +96,54 @@
                         </span>
                     </div>
 
+                    <div ng-if="policyName === 'cssRules'">
+                        <span ng-if="offender.file === 'inline CSS'">inline CSS</span>
+                        <span ng-if="offender.file !== 'inline CSS'"><url-link url="offender.file" max-length="80"></url-link></span>
+                        : <ng-pluralize count="offender.rules" when="{'0': '0 rule', 'one':'1 rule','other':'{} rules'}"></ng-pluralize>
+                    </div>
+
+                    <div ng-if="policyName === 'similarColors'">
+                        <div class="similarColors checker"><div ng-style="{'background-color': offender.color1, 'color': offender.isDark ? '#FFF' : '#000'}">{{offender.color1}}</div><div ng-style="{'background-color': offender.color2, 'color': offender.isDark ? '#FFF' : '#000'}">{{offender.color2}}</div></div>
+                    </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>
                         <span ng-if="offender.file">(<a href="http://jigsaw.w3.org/css-validator/validator?profile=css3&usermedium=all&warning=no&uri={{offender.file | encodeURIComponent}}" target="_blank">Check on the W3C validator</a>)</span>
                     </div>
 
-                    <div ng-if="policyName === 'cssComplexSelectors' || policyName === 'cssComplexSelectorsByAttribute' || policyName === 'cssImports' || policyName === 'cssUniversalSelectors' || policyName === 'cssRedundantBodySelectors' || policyName === 'cssRedundantChildNodesSelectors'">
-                        <span ng-if="offender.bolded" ng-bind-html="offender.bolded"></span>
-                        <b ng-if="!offender.bolded">{{offender.css}}</b>
-                        <file-and-line-button file="offender.file" line="offender.line" column="offender.column"></file-and-line-button>
-                    </div>
-
-                    <div ng-if="policyName === 'cssDuplicatedSelectors'">
-                        {{offender.rule}} (<b>x{{offender.occurrences}}</b>)
-                    </div>
-
-                    <div ng-if="policyName === 'cssDuplicatedProperties'">
-                        Property <b>{{offender.property}}</b> duplicated in <b>{{offender.rule}} { }</b>
-                        <file-and-line-button file="offender.file" line="offender.line" column="offender.column"></file-and-line-button>
-                    </div>
-
-                    <div ng-if="policyName === 'cssEmptyRules'">
-                        <b>{{offender.css}} { }</b>
-                        <file-and-line-button file="offender.file" line="offender.line" column="offender.column"></file-and-line-button>
-                    </div>
-
-                    <div ng-if="policyName === 'cssExpressions'">
-                        {{offender.rule}} {{ '{' + offender.property}}: <b>expression(</b>{{offender.expression}}<b>)</b>}
-                        <file-and-line-button file="offender.file" line="offender.line" column="offender.column"></file-and-line-button>
-                    </div>
-
-                    <div ng-if="policyName === 'cssImportants'">
-                        {{offender.rule}} {{ '{' + offender.property}}: {{offender.value}} <b>!important</b>}
-                        <file-and-line-button file="offender.file" line="offender.line" column="offender.column"></file-and-line-button>
-                    </div>
-
-                    <div ng-if="policyName === 'cssOldIEFixes'">
-                        <span ng-if="offender.browser"><b>{{offender.browser}} fix:</b></span>
-                        <span ng-bind-html="offender.bolded"></span>
+                    <div ng-if="policyName === 'cssImports'">
+                        {{offender.css}}
                         <file-and-line-button file="offender.file" line="offender.line" column="offender.column"></file-and-line-button>
                     </div>
 
                     <div ng-if="policyName === 'cssOldPropertyPrefixes'">
-                        {{offender.rule}} {<b>{{offender.property}}</b>: {{offender.value + '}' }}
-                        <br>
-                        <b>{{offender.message}}</b>
-                        <file-and-line-button file="offender.file" line="offender.line" column="offender.column"></file-and-line-button>
+                        <b>{{offender.property}} {{offender.message}}</b>
+                        <div ng-if="offender.rules.length" ng-click="offender.showMore = !offender.showMore" class="offenderButton">
+                            <span ng-if="!offender.showMore">show</span>
+                            <span ng-if="offender.showMore">hide</span>
+                            <ng-pluralize count="offender.rules.length" when="{'one':'1 offender','other':'{} offenders'}"></ng-pluralize>
+                        </div>
+                        <div ng-if="offender.showMore" class="smallerOffenders">
+                            <div ng-repeat="cssRule in offender.rules">
+                                {{cssRule.rule}} {{'{' + offender.property}}: {{cssRule.value + '}' }}
+                                <file-and-line-button file="cssRule.file" line="cssRule.line" column="cssRule.column"></file-and-line-button>
+                            </div>
+                        </div>
                     </div>
 
-                    <div ng-if="policyName === 'requests' || policyName === 'htmlCount' || policyName === 'jsCount' || policyName === 'cssCount' || policyName === 'imageCount' || policyName === 'webfontCount' || policyName === 'videoCount' || policyName === 'jsonCount' || policyName === 'otherCount' || policyName === 'smallJsFiles' || policyName === 'smallCssFiles' || policyName === 'smallImages'">
-                        <url-link url="offender.file" max-length="100"></url-link>
-                        <span ng-if="offender.size || offender.size === 0">({{offender.size}} kB)</span>
+                    <div ng-if="policyName === 'lazyLoadableImagesBelowTheFold' || policyName === 'hiddenImages'">
+                        <img ng-src="{{offender | https}}" class="smallPreview checker"></img>
+                        <url-link url="offender" max-length="100"></url-link>
                     </div>
 
-                    <div ng-if="policyName === 'notFound' || policyName === 'closedConnections' || policyName === 'multipleRequests' || policyName === 'cachingDisabled' || policyName === 'cachingNotSpecified'">
+                    <div ng-if="policyName === 'imagesTooLarge'">
+                        <img ng-src="{{offender.url | https}}" class="smallPreview checker"></img>
+                        <div>{{offender.width}}x{{offender.height}}</div>
+                        <url-link url="offender.url" max-length="100"></url-link>
+                    </div>
+
+                    <div ng-if="policyName === 'notFound' || policyName === 'emptyRequests' || policyName === 'closedConnections' || policyName === 'multipleRequests' || policyName === 'cachingDisabled' || policyName === 'cachingNotSpecified'">
                         <url-link url="offender" max-length="100"></url-link>
                     </div>
 
@@ -143,31 +157,331 @@
                         (<ng-pluralize count="offender.requests" when="{'one':'1 request','other':'{} requests'}"></ng-pluralize>)
                     </div>
 
-                    <div ng-if="policyName === 'globalVariables' || policyName === 'jQueryVersionsLoaded'">
+                    <div ng-if="policyName === 'globalVariables' || policyName === 'jQueryVersionsLoaded' || policyName === 'synchronousXHR'">
                         {{offender}}
                     </div>
 
+                    <div ng-if="policyName === 'fontsCount'">
+                        <url-link url="offender.url" max-length="70"></url-link>
+                        ({{offender.size | bytes}})
+                    </div>
                 </div>
             </div>
         </div>
 
+        <div ng-repeat="fileDetails in rule.offendersObj.byFile track by $index">
+            <h3>
+                <ng-pluralize count="fileDetails.count" when="{'one': '1 offender', 'other': '{} offenders'}"></ng-pluralize>
+                in
+                <url-link ng-if="fileDetails.url !== 'Inline CSS'" url="fileDetails.url" max-length="80"></url-link>
+                <span ng-if="fileDetails.url === 'Inline CSS'">inline CSS</span>
+            </h3>
 
-        <div ng-if="!rule.offendersObj.list" class="offendersHtml">
+            <div class="offendersTable">
+                <div ng-repeat="offender in fileDetails.offenders track by $index">
+                    <div ng-if="policyName === 'cssComplexSelectors' || policyName === 'cssComplexSelectorsByAttribute' || policyName === 'cssUniversalSelectors' || policyName === 'cssRedundantBodySelectors' || policyName === 'cssRedundantChildNodesSelectors'">
+                        <span ng-if="offender.bolded" ng-bind-html="offender.bolded"></span>
+                        <b ng-if="!offender.bolded">{{offender.css}}</b>
+                        <span ng-if="offender.line !== null && offender.column !== null"> @ {{offender.line}}:{{offender.column}}</span>
+                    </div>
+
+                    <div ng-if="policyName === 'cssMobileFirst'">
+                        <b>{{offender.query}}</b> for <ng-pluralize count="offender.rules" when="{'one':'1 rule','other':'{} rules'}"></ng-pluralize>
+                        <span ng-if="offender.line !== null && offender.column !== null"> @ {{offender.line}}:{{offender.column}}</span>
+                    </div>
+
+                    <div ng-if="policyName === 'cssDuplicatedSelectors'">
+                        {{offender.rule}} (<b>x{{offender.occurrences}}</b>)
+                    </div>
+
+                    <div ng-if="policyName === 'cssDuplicatedProperties'">
+                        Property <b>{{offender.property}}</b> duplicated in <b>{{offender.rule}} { }</b>
+                        <span ng-if="offender.line !== null && offender.column !== null"> @ {{offender.line}}:{{offender.column}}</span>
+                    </div>
+
+                    <div ng-if="policyName === 'cssEmptyRules'">
+                        <b>{{offender.css}} { }</b>
+                        <span ng-if="offender.line !== null && offender.column !== null"> @ {{offender.line}}:{{offender.column}}</span>
+                    </div>
+
+                    <div ng-if="policyName === 'cssExpressions'">
+                        {{offender.rule}} {{ '{' + offender.property}}: <b>expression(</b>{{offender.expression}}<b>)</b>}
+                        <span ng-if="offender.line !== null && offender.column !== null"> @ {{offender.line}}:{{offender.column}}</span>
+                    </div>
+
+                    <div ng-if="policyName === 'cssImportants'">
+                        {{offender.rule}} {{ '{' + offender.property}}: {{offender.value}} <b>!important</b>}
+                        <span ng-if="offender.line !== null && offender.column !== null"> @ {{offender.line}}:{{offender.column}}</span>
+                    </div>
+
+                    <div ng-if="policyName === 'cssOldIEFixes'">
+                        <span ng-if="offender.browser"><b>{{offender.browser}} fix:</b></span>
+                        <span ng-bind-html="offender.bolded"></span>
+                        <span ng-if="offender.line !== null && offender.column !== null"> @ {{offender.line}}:{{offender.column}}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div ng-if="!rule.offendersObj.list && !rule.offendersObj.byFile" class="offendersHtml">
             
             <div ng-if="policyName === 'DOMelementMaxDepth'">
                 <dom-tree tree="rule.offendersObj.tree"></dom-tree>
             </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 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 checker">
+                    <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 === 'totalWeight'">
+        <h3>Weight by MIME type</h3>
+        <div class="totalWeightPie">
+            <canvas class="chart chart-doughnut" chart-data="weightData" chart-labels="weightLabels" chart-options="weightOptions" chart-colors="weightColours"></canvas>
+        </div>
+        <div ng-repeat="type in weightLabels">
+            <h3>{{rule.offendersObj.list.byType[type].totalWeight | bytes}} of {{type}}</h3>
+            <div class="offendersTable">
+                <div ng-repeat="request in rule.offendersObj.list.byType[type].requests | orderBy:'-weight'" ng-if="request.weight > 0">
+                    <div><url-link url="request.url" max-length="60"></url-link></div>
+                    <div ng-class="{offenderProblem: request.weight > 102400}">{{request.weight | bytes}}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div ng-if="policyName === 'imageOptimization'">
+        <h3 ng-if="rule.value > 0">{{rule.value | bytes}} could be saved on <ng-pluralize count="rule.offendersObj.list.images.length" when="{'one': '1 image', 'other': '{} images'}"></ng-pluralize></h3>
+        <div class="imageOffenders">
+            <div ng-repeat="image in rule.offendersObj.list.images | orderBy:'-gain'">
+                <div>
+                    Current file: <url-link url="image.url" max-length="50"></url-link>
+                    <div><a href="{{image.url}}" target="_blank"><img ng-src="{{image.url | https}}" class="checker" /></a></div>
+                </div>
+                <div>
+                    <p ng-if="!image.afterCompression">Current weight: {{image.original | bytes}}</p>
+                    <p ng-if="image.afterCompression">Current weight: {{image.original | bytes}} ({{image.afterCompression | bytes}} gzipped)</p>
+                    <p ng-if="image.lossless && image.afterOptimizationAndCompression">With a lossless optimization:<br/>{{image.afterOptimizationAndCompression | bytes}} gzipped (<b>-{{image.gain | bytes}}</b> gzipped)</p>
+                    <p ng-if="image.lossless && !image.afterOptimizationAndCompression">With a lossless optimization:<br/>{{image.lossless | bytes}} <span ng-if="!image.lossy">(<b>-{{image.gain | bytes}}</b>)</span></p>
+                    <p ng-if="image.lossy && image.afterOptimizationAndCompression">With a lossy optimization:<br/>{{image.afterOptimizationAndCompression | bytes}} gzipped (<b>-{{image.gain | bytes}} gzipped</b>)</p>
+                    <p ng-if="image.lossy && !image.afterOptimizationAndCompression">With a lossy optimization:<br/>{{image.lossy | bytes}} (<b>-{{image.gain | bytes}}</b>)</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div ng-if="policyName === 'gzipCompression'">
+        <h3 ng-if="rule.value > 0">{{rule.value | bytes}} could be saved on <ng-pluralize count="rule.offendersObj.list.images.length" when="{'one': '1 file', 'other': '{} files'}"></ng-pluralize></h3>
+        <div class="table">
+            <div class="headers">
+                <div>File</div>
+                <div>Current weight</div>
+                <div>Gzipped</div>
+                <div>Gain</div>
+            </div>
+            <div ng-repeat="file in rule.offendersObj.list.files | orderBy:'-gain'">
+                <div>
+                    <url-link url="file.url" max-length="70"></url-link>
+                </div>
+                <div>{{file.original | bytes}}</div>
+                <div>{{file.gzipped | bytes}}</div>
+                <div><b>-{{file.gain | bytes}}</b></div>
+            </div>
+        </div>
+    </div>
+
+    <div ng-if="policyName === 'fileMinification'">
+        <h3 ng-if="rule.value > 0">{{rule.value | bytes}} could be saved on <ng-pluralize count="rule.offendersObj.list.files.length" when="{'one': '1 file', 'other': '{} files'}"></ng-pluralize></h3>
+        <div class="table">
+            <div class="headers">
+                <div>File</div>
+                <div>Current weight</div>
+                <div>Minified</div>
+                <div>Gain</div>
+            </div>
+            <div ng-repeat="file in rule.offendersObj.list.files | orderBy:'-gain'">
+                <div>
+                    <url-link url="file.url" max-length="70"></url-link>
+                </div>
+                <div ng-if="!file.afterCompression">{{file.original | bytes}} (gzipped)</div>
+                <div ng-if="file.afterCompression">{{file.original | bytes}} ({{file.afterCompression | bytes}} gzipped)</div>
+                <div ng-if="!file.afterCompression">{{file.afterOptimizationAndCompression | bytes}} (gzipped)</div>
+                <div ng-if="file.afterCompression">{{file.optimized | bytes}} ({{file.afterOptimizationAndCompression | bytes}} gzipped)</div>
+                <div><b>-{{file.gain | bytes}}</b></div>
+            </div>
+        </div>
+    </div>
+
+    <div ng-if="policyName === 'totalRequests'">
+        <h3>Requests by MIME type</h3>
+        <div ng-repeat="(type, requests) in rule.offendersObj.list.byType">
+            <h3><ng-pluralize count="requests.length" when="{'0': 'No ' + type + ' request', 'one': '1 ' + type + ' request', 'other': '{} ' + type + ' requests'}"></ng-pluralize></h3>
+            <p ng-if="type == 'css' && requests.length > 2">Reduce the number of stylesheets by concatenating them.</p>
+            <p ng-if="type == 'js' && requests.length > 3">Reduce the number of scripts by concatenating them.</p>
+            <p ng-if="type == 'image' && requests.length > 5">Reduce the number of images by lazyloading them or by spriting them.</p>
+            <p ng-if="type == 'webfont' && requests.length > 1">Fonts are generally loaded on the critical path of the head. Load as few as possible.</p>
+            <p ng-if="type == 'other' && requests.length > 0">They can be Flash, XML, music or any undetected format.</p>
+            <div class="offendersTable">
+                <div ng-repeat="request in requests track by $index">
+                    <div><url-link url="request" max-length="100"></url-link></div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div ng-if="policyName === 'identicalFiles'">
+        <div ng-repeat="offender in rule.offendersObj.list track by $index">
+            <h4>A file of {{offender.weight | bytes}} is loaded {{offender.urls.length}} times:</h4>
+            <div class="offendersTable">
+                <div ng-repeat="url in offender.urls">
+                    <div><url-link url="url" max-length="100"></url-link></div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div ng-if="policyName === 'smallRequests'">
+        <div ng-repeat="(type, requests) in rule.offendersObj.list.byType">
+            <h3><ng-pluralize count="requests.length" when="{'0': 'small ' + type + ' file', 'one': '1 small ' + type + ' file', 'other': '{} small ' + type + ' files'}"></ng-pluralize></h3>
+            <p ng-if="type == 'css' && requests.length > 0">Try to inline these styles in the head of the HTML or to merge them with other files.</p>
+            <p ng-if="type == 'js' && requests.length > 0">Try to inline these scripts in the HTML or merge them with other files.</p>
+            <p ng-if="type == 'image' && requests.length > 0">Try to inline these images (with base64 encoding for most image types except SVG that don't need base64 encoding). You can also create sprites.</p>
+            <div class="table">
+                <div class="headers">
+                    <div ng-if="type == 'image'">Preview</div>
+                    <div>File</div>
+                    <div>Weight (bytes)</div>
+                </div>
+                <div ng-repeat="request in requests track by $index">
+                    <div ng-if="type == 'image'"><img ng-src="{{request.url | https}}" class="smallPreview checker" /></div>
+                    <div><url-link url="request.url" max-length="100"></url-link></div>
+                    <div>{{request.size}}</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="policyName === 'cssBreakpoints'">
+        <div ng-if="rule.value > 0" class="cssBreakpointsGraph">
+            <h3>Breakpoints distribution graph</h3>
+            <canvas class="chart chart-line" chart-data="breakpointsData" chart-labels="breakpointsLabels" chart-options="breakpointsOptions" chart-colors="breakpointsColours" chart-series="breakpointsSeries" width="600" height="250"></canvas>
+            <h3>Breakpoints list</h3>
+            <div class="offendersTable">
+                <div ng-repeat="offender in rule.offendersObj | orderBy:'pixels'">
+                    <div>Breakpoint <b>{{offender.breakpoint}}</b> involves <ng-pluralize count="offender.count" when="{'one': '1 rule', 'other': '{} rules'}"></ng-pluralize></div>
+                </div>
+            </div>
+        </div>
+        <div ng-if="rule.value === 0">
+        No breakpoint
+        </div>
+    </div>
+
+    <div ng-if="policyName === 'heavyFonts'">
+        <div ng-repeat="font in rule.offendersObj.fonts | orderBy:'-weight' track by $index">
+            <h3><url-link url="font.url" max-length="80"></url-link></h3>
+            <div class="offendersTable">
+                <div>
+                    <div>Weight</div>
+                    <div ng-if="font.weight <= 40960">{{font.weight | bytes}}</div>
+                    <div ng-if="font.weight > 40960" class="offenderProblem">{{font.weight | bytes}}</div>
+                </div>
+                <div>
+                    <div>Number of glyphs</div>
+                    <div ng-if="font.numGlyphs <= 500">{{font.numGlyphs}}</div>
+                    <div ng-if="font.numGlyphs > 500" class="offenderProblem">{{font.numGlyphs}} (better &lt; 500)</div>
+                </div>
+                <div>
+                    <div>Average glyph complexity</div>
+                    <div ng-if="font.averageGlyphComplexity <= 35">{{font.averageGlyphComplexity}}</div>
+                    <div ng-if="font.averageGlyphComplexity > 35" class="offenderProblem">{{font.averageGlyphComplexity}} (better &lt; 35)</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div ng-if="policyName === 'unusedUnicodeRanges'">
+        <div ng-repeat="font in rule.offendersObj.fonts | orderBy:'-compressedWeigth' track by $index">
+            <h3><url-link url="font.url" max-length="60"></url-link> ({{font.weight | bytes}})</h3>
+            <div ng-if="font.isIconFont" class="offendersTable">
+                <div>
+                    <div>
+                        This font seems to be an icon font
+                        <span ng-if="font.numGlyphsInCommonWithPageContent / font.glyphs <= 0.05" class="offenderProblem">but only {{font.numGlyphsInCommonWithPageContent}} of its {{font.glyphs}} glyphs <ng-pluralize count="font.numGlyphsInCommonWithPageContent" when="{'one': 'is', 'other': 'are'}"></ng-pluralize> possibly used!</span>
+                        <span ng-if="font.numGlyphsInCommonWithPageContent / font.glyphs > 0.05">and {{font.numGlyphsInCommonWithPageContent}} of its {{font.glyphs}} glyphs <ng-pluralize count="font.numGlyphsInCommonWithPageContent" when="{'one': 'is', 'other': 'are'}"></ng-pluralize> possibly used.</span>
+                    </div>
+                </div>
+            </div>
+            <div ng-if="!font.isIconFont" class="offendersTable">
+                <div ng-repeat="range in font.unicodeRanges track by $index">
+                    <div><b>{{range.name}}</b></div>
+                    <div ng-if="!range.underused">{{range.numGlyphsInCommonWithPageContent}} of its {{range.charset.length}} glyphs <ng-pluralize count="range.numGlyphsInCommonWithPageContent" when="{'one': 'is', 'other': 'are'}"></ng-pluralize> possibly used</div>
+                    <div ng-if="range.underused" class="offenderProblem">{{range.numGlyphsInCommonWithPageContent}} of its {{range.charset.length}} glyphs are used</div>
+                    <div>
+                        <div class="offenderButton opens">
+                            glyphes list
+                            <div>{{range.charset | addSpaces}}</div>
+                        </div>
+                    </div>
+                </div>
+                <div ng-if="font.ligaturesOrHiddenChars > 0">
+                    <div><b>Ligatures or hidden chars</b></div>
+                    <div ng-class="{offenderProblem: (font.ligaturesOrHiddenChars > 25)}">{{font.ligaturesOrHiddenChars}} glyphs</div>
+                    <div></div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div ng-if="policyName === 'http2'">
+        <h3>Protocols advertised by the server</h3>
+        <div class="offendersTable">
+            <div ng-repeat="protocol in rule.offendersObj.list">
+                <div>{{protocol}}</div>
+            </div>
+            <div ng-if="!rule.offendersObj || rule.offendersObj.count == 0">
+                <div>none</div>
+            </div>
+        </div>
+    </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" ng-class="result.params.options.device">
+    <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

@@ -7,8 +7,8 @@
         </select>
     </div>
 
-    <h2>Javascript Timeline</h2>
-    <p>This graph gives a quick view of when the Javascript interactions with the DOM occur during the loading of the page.</p>
+    <h2>JavaScript Timeline</h2>
+    <p>This graph gives a quick view of when the JavaScript interactions with the DOM occur during the loading of the page.</p>
 
     <div class="timeline">
         <div class="chart">
@@ -16,14 +16,14 @@
                 <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" ng-class="{clickable: duration > 0}" scroll-on-click="{{$index * timelineIntervalDuration}}"></div>
                     <div class="tooltip detailsOverlay">
@@ -45,7 +45,7 @@
                 <div class="domComplete"><div class="color"></div>Page is complete</div>
             </div>
             <div class="tips">
-                <div>Executing Javascript and DOM queries here is a <b>bad practice</b> and slows down the DOM construction.</div>
+                <div>Executing JavaScript and DOM queries here is a <b>bad practice</b> and slows down the DOM construction.</div>
                 <div>Some frameworks do things here, but it's not reliable and should be avoided.</div>
                 <div>Also known as "document ready". This is where you should execute <b>top-priority</b> scripts, like binding action buttons or launch a video player.</div>
                 <div>Here you can execute <b>mid-priority</b> tasks. Loading a script with createElement('script') is one way to do so.</div>
@@ -54,17 +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>
+            <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" ng-class="{warningsFilterOn: warningsFilterOn}">
+    <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>

lib/metadata/scoreProfileGeneric.json

@@ -1,9 +1,32 @@
 {
     "categories": {
+        "pageWeight": {
+            "label": "Page weight",
+            "policies": {
+                "totalWeight": 5,
+                "imageOptimization": 2,
+                "imagesTooLarge": 2,
+                "gzipCompression": 2,
+                "fileMinification": 1
+            }
+        },
+        "requests": {
+            "label": "Requests",
+            "policies": {
+                "totalRequests": 5,
+                "domains": 3,
+                "notFound": 3,
+                "identicalFiles": 2,
+                "emptyRequests": 3,
+                "smallRequests": 1,
+                "lazyLoadableImagesBelowTheFold": 2,
+                "hiddenImages": 1
+            }
+        },
         "domComplexity": {
             "label": "DOM complexity",
             "policies": {
-                "DOMelementsCount": 1,
+                "DOMelementsCount": 3,
                 "DOMelementMaxDepth": 1,
                 "iframesCount": 1,
                 "DOMidDuplicated": 1
@@ -12,11 +35,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": {
@@ -24,21 +52,18 @@
             "policies": {
                 "jsErrors": 1,
                 "documentWriteCalls": 2,
+                "synchronousXHR": 5,
                 "consoleMessages": 0.5,
                 "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,
+                "jQueryCallsOnEmptyObject": 1,
+                "jQueryNotDelegatedEvents": 1
             }
         },
         "cssComplexity": {
@@ -46,13 +71,16 @@
             "policies": {
                 "cssRules": 2,
                 "cssComplexSelectors": 2,
-                "cssComplexSelectorsByAttribute": 1.5,
-                "cssColors": 0.5
+                "cssColors": 0.5,
+                "similarColors": 0.5,
+                "cssBreakpoints": 0.5,
+                "cssMobileFirst": 1
             }
         },
         "badCSS": {
             "label": "Bad CSS",
             "policies": {
+                "cssParsingErrors": 4,
                 "cssImports": 3,
                 "cssDuplicatedSelectors": 2,
                 "cssDuplicatedProperties": 1,
@@ -61,56 +89,41 @@
                 "cssImportants": 3,
                 "cssOldIEFixes": 1,
                 "cssOldPropertyPrefixes": 1,
-                "cssUniversalSelectors": 1,
                 "cssRedundantBodySelectors": 1,
                 "cssRedundantChildNodesSelectors": 1
             }
         },
-        "requests": {
-            "label": "Requests number",
+        "fonts": {
+            "label": "Web fonts",
             "policies": {
-                "requests": 5,
-                "htmlCount": 0,
-                "jsCount": 1,
-                "cssCount": 1,
-                "imageCount": 0,
-                "webfontCount": 2,
-                "videoCount": 0,
-                "jsonCount": 0,
-                "otherCount": 0
+                "fontsCount": 1,
+                "heavyFonts": 1,
+                "unusedUnicodeRanges": 1
             }
         },
-        "smallRequests": {
-            "label": "Small requests",
+        "serverConfig": {
+            "label": "Server config",
             "policies": {
-                "smallJsFiles": 1,
-                "smallCssFiles": 1,
-                "smallImages": 1
-            }
-        },
-        "network": {
-            "label": "Network",
-            "policies": {
-                "notFound": 2,
+                "http2": 2,
                 "closedConnections": 2,
-                "multipleRequests": 2,
                 "cachingNotSpecified": 1,
                 "cachingDisabled": 1,
-                "cachingTooShort": 1,
-                "domains": 1
+                "cachingTooShort": 1
             }
         }
     },
     "globalScore": {
-        "domComplexity": 1,
+        "pageWeight": 3,
+        "requests": 3,
+        "domComplexity": 2,
         "domManipulations": 2,
-        "badJavascript": 1,
-        "jQueryVersion": 1,
+        "scroll": 1,
+        "badJavascript": 2,
+        "jQuery": 1,
         "cssSyntaxError": 1,
         "cssComplexity": 1,
         "badCSS": 1,
-        "requests": 3,
-        "smallRequests": 1,
-        "network": 2
+        "fonts": 1,
+        "serverConfig": 1
     }
 }

lib/offendersHelpers.js

@@ -113,14 +113,17 @@ var OffendersHelpers = function() {
         if (traceArray) {
             var results = [];
             var parts = null;
+            var obj;
 
             for (var i=0 ; i<traceArray.length ; i++) {
-                parts = /^(([\w$]+) )?([^ ]+):(\d+)$/.exec(traceArray[i]);
+                // Handle the new PhantomJS 2.x syntax
+                parts = /^(([\w$]+)@)?([^ ]+):(\d+):(\d+)$/.exec(traceArray[i]);
 
                 if (parts) {
-                    var obj = {
+                    obj = {
                         file: parts[3],
-                        line: parseInt(parts[4], 10)
+                        line: parseInt(parts[4], 10),
+                        column: parseInt(parts[5], 10)
                     };
 
                     if (parts[2]) {
@@ -128,8 +131,26 @@ var OffendersHelpers = function() {
                     }
 
                     results.push(obj);
+
                 } else {
-                    return null;
+                    // Old syntax
+                    parts = /^(([\w$]+) )?\(?([^ ]+):(\d+)\)?$/.exec(traceArray[i]);
+
+                    if (parts) {
+                        obj = {
+                            file: parts[3],
+                            line: parseInt(parts[4], 10)
+                        };
+
+                        if (parts[2]) {
+                            obj.functionName = parts[2];
+                        }
+
+                        results.push(obj);
+
+                    } else {
+                        return null;
+                    }
                 }
             }
             return results;
@@ -151,7 +172,10 @@ var OffendersHelpers = function() {
     };
 
     this.cssOffenderPattern = function(offender) {
-        var parts = /^(.*) (?:<([^ \(]*)>|\[inline CSS\]) @ (\d+):(\d+)$/.exec(offender);
+        // Remove any line breaks
+        offender = offender.replace(/(\r\n|\n|\r)/gm, '');
+
+        var parts = /^(.*) (?:<([^ \(]*)>|\[inline CSS\]) ?@ ?(\d+):(\d+)$/.exec(offender);
         
         if (!parts) {
             return {
@@ -168,7 +192,7 @@ var OffendersHelpers = function() {
     };
 
     this.fileWithSizePattern = function(fileWithSize) {
-        var parts = /^([^ ]*) \((\d+\.\d{2}) kB\)$/.exec(fileWithSize);
+        var parts = /^([^ ]*) \((\d+\.\d{2}|NaN) kB\)$/.exec(fileWithSize);
 
         if (!parts) {
             return {
@@ -182,6 +206,34 @@ var OffendersHelpers = function() {
         }
     };
 
+    this.orderByFile = function(offenders) {
+        var byFileObj = {};
+
+        offenders.forEach(function(offender) {
+            var file = offender.file || 'Inline CSS';
+            delete offender.file;
+
+            if (!byFileObj[file]) {
+                byFileObj[file] = {
+                    url: file,
+                    count: 0,
+                    offenders: []
+                };
+            }
+
+            byFileObj[file].count ++;
+            byFileObj[file].offenders.push(offender);
+        });
+
+        // Transform object into array
+        var byFileArray = [];
+        for (var file in byFileObj) {
+            byFileArray.push(byFileObj[file]);
+        }
+
+        return {byFile: byFileArray};
+    };
+
 };
 
 module.exports = new OffendersHelpers();

lib/runner.js

@@ -3,6 +3,10 @@ var debug                   = require('debug')('ylt:runner');
 
 var phantomasWrapper        = require('./tools/phantomas/phantomasWrapper');
 var jsExecutionTransformer  = require('./tools/jsExecutionTransformer');
+var colorDiff               = require('./tools/colorDiff');
+var mediaQueriesChecker     = require('./tools/mediaQueriesChecker');
+var isHttp2                 = require('./tools/isHttp2');
+var redownload              = require('./tools/redownload/redownload');
 var rulesChecker            = require('./rulesChecker');
 var scoreCalculator         = require('./scoreCalculator');
 
@@ -19,14 +23,31 @@ var Runner = function(params) {
     };
 
     // Execute Phantomas first
-    phantomasWrapper.execute(data).then(function(phantomasResults) {
+    phantomasWrapper.execute(data)
+
+    .then(function(phantomasResults) {
         data.toolsResults.phantomas = phantomasResults;
 
         // Treat the JS Execution Tree from offenders
         data = jsExecutionTransformer.transform(data);
 
-        // Other tools go here
+        // Compare colors
+        data = colorDiff.compareAllColors(data);
 
+        // Check media queries
+        data = mediaQueriesChecker.analyzeMediaQueries(data);
+
+        // Redownload every file
+        return redownload.recheckAllFiles(data);
+
+    })
+
+    .then(function(data) {
+        // Check if HTTP2
+        return isHttp2.check(data);
+    })
+
+    .then(function(data) {
 
         // Rules checker
         var policies = require('./metadata/policies');
@@ -42,15 +63,20 @@ 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;
 
-    }).then(function(data) {
+        if (data.toolsResults.phantomas.offenders.blockedRequests) {
+            data.blockedRequests = data.toolsResults.phantomas.offenders.blockedRequests;
+        }
+
 
         // Finished!
         deferred.resolve(data);
+    })
 
-    }).fail(function(err) {
+    .fail(function(err) {
         debug('Run failed');
         debug(err);
 

lib/screenshotHandler.js

@@ -1,5 +1,5 @@
 var debug       = require('debug')('ylt:screenshotHandler');
-var lwip        = require('lwip');
+var Jimp        = require('jimp');
 var tmp         = require('temporary');
 var Q           = require('q');
 var fs          = require('fs');
@@ -48,6 +48,8 @@ var screenshotHandler = function() {
 
             })
 
+            .then(this.addWhiteBackground)
+
             .then(this.toBuffer);
     };
 
@@ -55,7 +57,7 @@ var screenshotHandler = function() {
     this.openImage = function(imagePath) {
         var deferred = Q.defer();
 
-        lwip.open(imagePath, function(err, image){
+        Jimp.read(imagePath, function(err, image){
             if (err) {
                 debug('Could not open imagePath %s', imagePath);
                 debug(err);
@@ -74,7 +76,7 @@ var screenshotHandler = function() {
     this.resizeImage = function(image, newWidth) {
         var deferred = Q.defer();
 
-        var currentWidth = image.width();
+        var currentWidth = image.bitmap.width;
         var ratio = newWidth / currentWidth;
 
         image.scale(ratio, function(err, image){
@@ -92,11 +94,44 @@ var screenshotHandler = function() {
         return deferred.promise;        
     };
 
+    // If the page doesn't set a bg color, the default PhantomJS one is transparent
+    // When transforming PNG to JPG, transparent pixels become black.
+    // This is why we need to add a transparent background.
+    this.addWhiteBackground = function(image) {
+        var deferred = Q.defer();
+
+        // Create a canvas with the same dimensions as your image:
+        new Jimp(image.bitmap.width, image.bitmap.height, 0xFFFFFF, function(err, canvas){
+            if (err) {
+                debug('Could not create a white canvas');
+                debug(err);
+
+                deferred.reject(err);
+            } else {
+                // Paste original image on top of the canvas
+                canvas.composite(image, 0, 0, function(err, image){
+                    if (err) {
+                        debug('Could not paste image on the white canvas');
+                        debug(err);
+
+                        deferred.reject(err);
+                    } else {
+                        // Now image has a white background...
+                        debug('White background correctly added');
+                        deferred.resolve(image);
+                    }
+                });
+            }
+        });
+
+        return deferred.promise;
+    };
+
 
     this.toBuffer = function(image) {
         var deferred = Q.defer();
 
-        image.toBuffer('jpg', {quality: 90}, function(err, buffer){
+        image.quality(90).getBuffer(Jimp.MIME_JPEG, function(err, buffer){
             if (err) {
                 debug('Could not save image to buffer');
                 debug(err);
@@ -108,7 +143,7 @@ var screenshotHandler = function() {
             }
         });
 
-        return deferred.promise;        
+        return deferred.promise;
     };
 
 
@@ -132,4 +167,4 @@ var screenshotHandler = function() {
     };
 };
 
-module.exports = new screenshotHandler();
+module.exports = new screenshotHandler();

lib/server/controllers/apiController.js

@@ -7,6 +7,7 @@ var RunsQueue           = require('../datastores/runsQueue');
 var RunsDatastore       = require('../datastores/runsDatastore');
 var ResultsDatastore    = require('../datastores/resultsDatastore');
 
+var serverSettings      = (process.env.IS_TEST) ? require('../../../test/fixtures/settings.json') : require('../../../server_config/settings.json');
 
 var ApiController = function(app) {
     'use strict';
@@ -15,8 +16,6 @@ var ApiController = function(app) {
     var runsDatastore = new RunsDatastore();
     var resultsDatastore = new ResultsDatastore();
 
-
-
     // Create a new run
     app.post('/api/runs', function(req, res) {
 
@@ -25,16 +24,30 @@ var ApiController = function(app) {
             req.body.url = 'http://' + req.body.url;
         }
 
+        // Block requests to unwanted websites (=spam)
+        if (req.body.url && isBlocked(req.body.url)) {
+            console.error('Test blocked for URL: %s', req.body.url);
+            res.status(403).send('Forbidden');
+            return;
+        }
+
         // Grab the test parameters and generate a random run ID
         var run = {
             runId: (Date.now()*1000 + Math.round(Math.random()*1000)).toString(36),
             params: {
                 url: req.body.url,
-                waitForResponse: req.body.waitForResponse !== false && req.body.waitForResponse !== 'false' && req.body.waitForResponse !== 0,
+                waitForResponse: req.body.waitForResponse === true || req.body.waitForResponse === 'true' || req.body.waitForResponse === 1,
                 partialResult: req.body.partialResult || null,
                 screenshot: req.body.screenshot || false,
-                jsTimeline: req.body.jsTimeline || false,
-                device: req.body.device || 'desktop'
+                device: req.body.device || 'desktop',
+                proxy: req.body.proxy || null,
+                waitForSelector: req.body.waitForSelector || null,
+                cookie: req.body.cookie || null,
+                authUser: req.body.authUser || null,
+                authPass: req.body.authPass || null,
+                blockDomain: req.body.blockDomain || null,
+                allowDomain: req.body.allowDomain || null,
+                noExternals: req.body.noExternals || false
             }
         };
 
@@ -48,7 +61,6 @@ var ApiController = function(app) {
         debug('Adding test %s to the queue', run.runId);
         var queuePromise = queue.push(run.runId);
 
-
         // Save the run to the datastore
         runsDatastore.add(run, queuePromise.startingPosition);
 
@@ -63,17 +75,26 @@ var ApiController = function(app) {
 
             runsDatastore.updatePosition(run.runId, 0);
 
-            debug('Launching test %s on %s', run.runId, run.params.url);
+            console.log('Launching test ' + run.runId + ' on ' + run.params.url);
 
             var runOptions = {
                 screenshot: run.params.screenshot ? screenshot.getTmpFilePath() : false,
-                jsDeepAnalysis: run.params.jsTimeline,
-                device: run.params.device
+                device: run.params.device,
+                proxy: run.params.proxy,
+                waitForSelector: run.params.waitForSelector,
+                cookie: run.params.cookie,
+                authUser: run.params.authUser,
+                authPass: run.params.authPass,
+                blockDomain: run.params.blockDomain,
+                allowDomain: run.params.allowDomain,
+                noExternals: run.params.noExternals,
+                phantomasEngine: serverSettings.phantomasEngine
             };
 
             return ylt(run.params.url, runOptions);
 
         })
+
         // Phantomas completed, let's save the screenshot if any
         .then(function(data) {
 
@@ -87,7 +108,7 @@ var ApiController = function(app) {
             if (run.params.screenshot) {
                 
                 // Replace the empty promise created earlier with Q.resolve()
-                screenshotPromise = screenshot.toThumbnail(400)
+                screenshotPromise = screenshot.toThumbnail(serverSettings.screenshotWidth || 400)
                 
                     // Read screenshot
                     .then(function(screenshotBuffer) {
@@ -97,12 +118,18 @@ var ApiController = function(app) {
                             data.screenshotBuffer = screenshotBuffer;
 
                             // Official path to get the image
-                            data.screenshotUrl = '/api/results/' + data.runId + '/screenshot.jpg';
+                            data.screenshotUrl = 'api/results/' + data.runId + '/screenshot.jpg';
                         }
 
                     })
+                    
                     // 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...');
+                    });
 
             }
 
@@ -114,12 +141,7 @@ var ApiController = function(app) {
                     // Remove uneeded temp screenshot path
                     delete data.params.options.screenshot;
 
-                    // Empty javascriptExecutionTree if not needed
-                    if (!run.params.jsTimeline) {
-                        data.javascriptExecutionTree = {};
-                    }
-
-                    // Remove tools results if not needed
+                    // Here we can remove tools results if not needed
 
                     return resultsDatastore.saveResult(data);
                 })
@@ -182,7 +204,7 @@ var ApiController = function(app) {
 
         // The user doesn't want to wait for the response, sending the run ID only
         if (!run.params.waitForResponse) {
-            console.log('Sending response without waiting.');
+            debug('Sending response without waiting.');
             res.setHeader('Content-Type', 'application/json');
             res.send(JSON.stringify({runId: run.runId}));
         }
@@ -234,6 +256,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;
         });
     });
@@ -302,6 +336,15 @@ var ApiController = function(app) {
             });
     });
 
+    function isBlocked(url) {
+        if (!serverSettings.blockedUrls) {
+            return false;
+        }
+
+        return serverSettings.blockedUrls.some(function(blockedUrl) {
+            return (url.indexOf(blockedUrl) === 0);
+        });
+    }
 };
 
-module.exports = ApiController;
+module.exports = ApiController;

lib/server/controllers/frontController.js

@@ -1,26 +1,42 @@
 var path        = require('path');
 var express     = require('express');
 
+var serverSettings = (process.env.IS_TEST) ? require('../../../test/fixtures/settings.json') : require('../../../server_config/settings.json');
+
 var FrontController = function(app) {
     'use strict';
 
     var cacheDuration = 365 * 24 * 60 * 60 * 1000; // One year
     var assetsPath = (app.get('env') === 'development') ? '../../../front/src' : '../../../front/build';
-    
+
+    // Routes templating    
     var routes = ['/', '/about', '/result/:runId', '/result/:runId/timeline', '/result/:runId/screenshot', '/result/:runId/rule/:policy', '/queue/:runId'];
+
     routes.forEach(function(route) {
         app.get(route, function(req, res) {
             res.setHeader('Cache-Control', 'public, max-age=20');
-            res.sendFile(path.join(__dirname, assetsPath, 'main.html'));
+            res.render(path.join(__dirname, assetsPath, 'main.html'), {
+                baseUrl: app.locals.baseUrl || '/',
+                sponsoring: serverSettings.sponsoring || {}
+            });
+        });
+    });
+
+    // Views templating
+    app.get('/views/:viewName', function(req, res) {
+        res.setHeader('Cache-Control', 'public, max-age=' + cacheDuration);
+        res.render(path.join(__dirname, assetsPath, 'views/' + req.params.viewName), {
+            baseUrl: app.locals.baseUrl || '/',
+            sponsoring: serverSettings.sponsoring || {}
         });
     });
     
+    // Static assets
     app.use('/css', express.static(path.join(__dirname, assetsPath, 'css'), { maxAge: cacheDuration }));
     app.use('/fonts', express.static(path.join(__dirname, assetsPath, 'fonts'), { maxAge: cacheDuration }));
     app.use('/img', express.static(path.join(__dirname, assetsPath, 'img'), { maxAge: cacheDuration }));
     app.use('/js', express.static(path.join(__dirname, assetsPath, 'js'), { maxAge: cacheDuration }));
-    app.use('/views', express.static(path.join(__dirname, assetsPath, 'views'), { maxAge: cacheDuration }));
-    app.use('/bower_components', express.static(path.join(__dirname, '../../../bower_components'), { maxAge: cacheDuration }));
+    app.use('/node_modules', express.static(path.join(__dirname, '../../../node_modules'), { maxAge: cacheDuration }));
 };
 
 module.exports = FrontController;

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/apiLimitsMiddleware.js

@@ -1,30 +1,32 @@
-var config      = require('../../../server_config/settings.json');
+var config = (process.env.IS_TEST) ? require('../../../test/fixtures/settings.json') : require('../../../server_config/settings.json');
 
-var debug       = require('debug')('apiLimitsMiddleware');
+var debug = require('debug')('apiLimitsMiddleware');
 
 
 var apiLimitsMiddleware = function(req, res, next) {
     'use strict';
 
-    debug('Entering API Limits Middleware with IP address %s', req.connection.remoteAddress);
+    var ipAddress = req.headers['x-forwarded-for'] || req.connection.remoteAddress;
+
+    debug('Entering API Limits Middleware with IP address %s', ipAddress);
 
     if (req.path.indexOf('/api/') === 0 && !res.locals.hasApiKey) {
         
         
         if (req.path === '/api/runs') {
             
-            if (!runsTable.accepts(req.connection.remoteAddress)) {
+            if (!runsTable.accepts(ipAddress)) {
                 // Sorry :/
-                debug('Too many tests launched from IP address %s', req.connection.remoteAddress);
+                debug('Too many tests launched from IP address %s', ipAddress);
                 res.status(429).send('Too many requests');
                 return;
             }
 
         }
 
-        if (!callsTable.accepts(req.connection.remoteAddress)) {
+        if (!callsTable.accepts(ipAddress)) {
             // Sorry :/
-            debug('Too many API requests from IP address %s', req.connection.remoteAddress);
+            debug('Too many API requests from IP address %s', ipAddress);
             res.status(429).send('Too many requests');
             return;
         }

lib/server/middlewares/authMiddleware.js

@@ -1,6 +1,6 @@
-var config      = require('../../../server_config/settings.json');
+var config = (process.env.IS_TEST) ? require('../../../test/fixtures/settings.json') : require('../../../server_config/settings.json');
 
-var debug       = require('debug')('authMiddleware');
+var debug = require('debug')('authMiddleware');
 
 
 var authMiddleware = function(req, res, next) {

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/colorDiff.js

@@ -0,0 +1,92 @@
+var debug   = require('debug')('ylt:colorDiff');
+var diff    = require('color-diff');
+var parse   = require('parse-color');
+
+
+var colorDiff = function() {
+
+    var COLOR_DIFF_THRESHOLD = 0.9;
+
+    this.compareAllColors = function(data) {
+        debug('Starting to compare all colors...');
+
+        var offenders = data.toolsResults.phantomas.offenders.cssColors;
+        var colors = (offenders) ? this.parseAllColors(offenders) : [];
+        var result = [];
+
+        // Compare colors to each other
+        for (var i = 0; i < colors.length - 1 ; i++) {
+            for (var j = i + 1; j < colors.length; j++) {
+                debug('Comparing color %s with color %s', colors[i].original, colors[j].original);
+                if (this.compareTwoColors(colors[i], colors[j])) {
+                    debug('Colors are similar!');
+                    result.push({
+                        color1: colors[i].original,
+                        color2: colors[j].original,
+                        isDark: (colors[i].Lab.L < 60)
+                    });
+                }
+            }
+        }
+
+        data.toolsResults.colorDiff = {
+            metrics: {
+                similarColors: result.length
+            },
+            offenders: {
+                similarColors: result
+            }
+        };
+
+        return data;
+    };
+
+    this.parseAllColors = function(offenders) {
+        var parsedOffenders = offenders.map(this.parseOffender);
+        var deduplicatedColors = {};
+
+        parsedOffenders.forEach(function(color) {
+            if (color !== null) {
+                deduplicatedColors[color] = color;
+            }
+        });
+
+        return Object.keys(deduplicatedColors).map(this.parseColor);
+    };
+
+    this.parseOffender = function(offender) {
+        var regexResult = /^(.*) \(\d+ times\)$/.exec(offender);
+        return regexResult ? regexResult[1] : null;
+    };
+
+    this.parseColor = function(color) {
+        var colorArray = parse(color).rgba;
+
+        var obj = {
+            R: colorArray[0],
+            G: colorArray[1],
+            B: colorArray[2],
+            A: colorArray[3]
+        };
+
+        obj.Lab = diff.rgb_to_lab(obj);
+        obj.original = color;
+
+        return obj;
+    };
+
+    this.compareTwoColors = function(color1, color2) {
+        if (color1.A !== color2.A) {
+            debug('Comparison not possible, because the alpha channel is different');
+            return false;
+        }
+
+        var delta = diff.diff(color1.Lab, color2.Lab);
+        debug('Delta is %d', delta);
+        
+        return delta <= COLOR_DIFF_THRESHOLD;
+    };
+
+};
+
+module.exports = new colorDiff();

lib/tools/isHttp2.js

@@ -0,0 +1,105 @@
+var debug   = require('debug')('ylt:isHttp2');
+var url     = require('url');
+var Q       = require('q');
+var http2   = require('is-http2');
+
+var isHttp2 = function() {
+    'use strict';
+
+    this.check = function(data) {
+        debug('Starting to check for HTTP2 support...');
+
+        return this.checkHttp2(data)
+
+            .then(function(result) {
+
+                if (result.isHttp) {
+                    debug('The website is not even in HTTPS');
+
+                    data.toolsResults.http2 = {
+                        metrics: {
+                            http2: false
+                        }
+                    };
+
+                } else if (result.isHttp2) {
+                    debug('HTTP/2 (or SPDY) is supported');
+
+                    data.toolsResults.http2 = {
+                        metrics: {
+                            http2: true
+                        }
+                    };
+                
+                } else {
+                    debug('HTTP/2 is not supported');
+                    
+                    data.toolsResults.http2 = {
+                        metrics: {
+                            http2: false
+                        }
+                    };
+                }
+
+                // Add the supported protocols as offenders
+                if (result.supportedProtocols) {
+                    debug('Supported protocols: ' + result.supportedProtocols.join(' '));
+                    data.toolsResults.http2.offenders = {
+                        http2: result.supportedProtocols
+                    };
+                }
+
+                debug('End of HTTP2 support check');
+
+                return data;
+            })
+
+            .fail(function() {
+                return data;
+            });
+    };
+
+    this.getParsedUrl = function(data) {
+        return url.parse(data.toolsResults.phantomas.url);
+    };
+
+    this.getProtocol = function(data) {
+        return this.getParsedUrl(data).protocol;
+    };
+
+    this.getDomain = function(data) {
+        return this.getParsedUrl(data).hostname;
+    };
+
+    this.checkHttp2 = function(data) {
+        var deferred = Q.defer();
+
+        // Check if it's HTTPS first
+        if (this.getProtocol(data) === 'http:') {
+            
+            deferred.resolve({
+                isHttp: true
+            });
+
+        } else {
+
+            // To make is-http2 work, you need to have openssl in a version greater than 1.0.0 installed and available in your $path.
+            http2(this.getDomain(data), {includeSpdy: true})
+
+                .then(function(result) {
+                    deferred.resolve(result);
+                })
+                
+                .catch(function(error) {
+                    debug('Error while checking HTTP2 support:');
+                    debug(error);
+                    deferred.reject('Error while checking for HTTP2 support');
+                });
+
+        }
+
+        return deferred.promise;
+    };
+};
+
+module.exports = new isHttp2();

lib/tools/jsExecutionTransformer.js

@@ -1,34 +1,65 @@
 var debug = require('debug')('ylt:jsExecutionTransformer');
 
-var offendersHelpers = require('../offendersHelpers');
+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 = {
-            domManipulations: 0,
-            queriesWithoutResults: 0,
-            jQueryCalls: 0,
-            jQueryCallsOnEmptyObject: 0
-            
+            domInteractive: 0,
+            domContentLoaded: 0,
+            domContentLoadedEnd: 0,
+            domComplete: 0,
+
+            DOMaccesses: 0,
+            DOMaccessesOnScroll: 0,
+            queriesWithoutResults: 0
         };
 
-        debug('Starting JS execution transformation');
+        var offenders = {};
+
+        var hasjQuery = (data.toolsResults.phantomas.metrics.jQueryVersionsLoaded > 0);
+        if (hasjQuery) {
+            metrics.jQueryCalls = 0;
+            metrics.jQueryCallsOnEmptyObject = 0;
+            metrics.jQueryNotDelegatedEvents = 0;
+        }
 
         try {
+
+            debug('Starting JS execution transformation');
             javascriptExecutionTree = JSON.parse(data.toolsResults.phantomas.offenders.javascriptExecutionTree[0]);
         
             if (javascriptExecutionTree.children) {
-                javascriptExecutionTree.children.forEach(function(node) {
+                javascriptExecutionTree.children.forEach(function(node, index) {
                     
-                    // 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
@@ -39,51 +70,71 @@ 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;
+                        }
+                    }
+                    // Fix rare bug when domComplete was never triggered
+                    if (index === javascriptExecutionTree.children.length - 1 && !javascriptExecutionTree.data.domComplete) {
+                        javascriptExecutionTree.data.domComplete = node.data.timestamp + 1000;
                     }
 
-                    // 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);
 
-                    // Change the list of dom paths into a tree
-                    treeRecursiveParser(node, 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]);
-                        }
-                    });
+                    // Count the number of DOM accesses, by counting the tree leafs
+                    metrics.DOMaccesses += countTreeLeafs(node);
                 });
-            }
 
+            }
             debug('JS execution transformation complete');
 
+
+            if (data.toolsResults.phantomas.offenders.scrollExecutionTree) {
+                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('Scroll execution transformation complete');
+            } else {
+                debug('Could not parse scrollExecutionTree');
+            }
+
         } catch(err) {
             throw err;
         }
 
         data.javascriptExecutionTree = javascriptExecutionTree;
+        
         data.toolsResults.jsExecutionTransformer = {
-            metrics: metrics
+            metrics: metrics,
+            offenders: offenders
         };
 
         return data;
@@ -97,6 +148,63 @@ var jsExecutionTransformer = function() {
         }
         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/mediaQueriesChecker.js

@@ -0,0 +1,168 @@
+var debug   = require('debug')('ylt:mediaQueriesChecker');
+var parseMediaQuery = require('css-mq-parser');
+var offendersHelpers = require('../offendersHelpers');
+
+
+var mediaQueriesChecker = function() {
+    'use strict';
+
+    var MOBILE_MIN_BREAKPOINT = 200;
+    var MOBILE_MAX_BREAKPOINT = 300;
+
+    this.analyzeMediaQueries = function(data) {
+        debug('Starting to check all media queries...');
+
+        var offenders = data.toolsResults.phantomas.offenders.cssMediaQueries;
+        var mediaQueries = (offenders) ? this.parseAllMediaQueries(offenders) : [];
+        
+        var notMobileFirstCount = 0;
+        var notMobileFirstOffenders = [];
+
+        var breakpointsOffenders = {};
+
+        for (var i = 0; i < mediaQueries.length; i++) {
+            var item = mediaQueries[i];
+
+            if (!item) {
+                continue;
+            }
+
+            if (item.isForMobile) {
+                notMobileFirstCount += item.mediaQuery.rules;
+                notMobileFirstOffenders.push(item.mediaQuery);
+            }
+
+            for (var j = 0; j < item.breakpoints.length; j++) {
+                var breakpointString = item.breakpoints[j].string;
+                if (!breakpointsOffenders[breakpointString]) {
+                    breakpointsOffenders[breakpointString] = {
+                        count: 1,
+                        pixels: item.breakpoints[j].pixels
+                    };
+                } else {
+                    breakpointsOffenders[breakpointString].count += 1;
+                }
+            }
+        }
+
+        data.toolsResults.mediaQueriesChecker = {
+            metrics: {
+                cssMobileFirst: notMobileFirstCount,
+                cssBreakpoints: Object.keys(breakpointsOffenders).length
+            },
+            offenders: {
+                cssMobileFirst: notMobileFirstOffenders,
+                cssBreakpoints: breakpointsOffenders
+            }
+        };
+
+        debug('End of media queries check');
+
+        return data;
+    };
+
+    this.parseAllMediaQueries = function(offenders) {
+        return offenders.map(this.parseOneMediaQuery);
+    };
+
+    this.parseOneMediaQuery = function(offender) {
+        var splittedOffender = offendersHelpers.cssOffenderPattern(offender);
+        var parts = /^@media (.*) \((\d+ rules)\)$/.exec(splittedOffender.css);
+
+        if (!parts) {
+            debug('Failed to parse media query ' + offender);
+            return false;
+        }
+
+        var rulesCount = parseInt(parts[2], 10);
+        var query = parts[1];
+
+        var isForMobile = false;
+        var breakpoints = [];
+
+        try {
+
+            var ast = parseMediaQuery(query);
+
+            var min = 0;
+            var max = Infinity;
+            var pixels;
+
+            ast.forEach(function(astItem) {
+                astItem.expressions.forEach(function(expression) {
+                    if (expression.feature === 'width' || expression.feature === 'device-width') {
+                        if (astItem.inverse === false) {
+                            if (expression.modifier === 'max') {
+                                pixels = toPixels(expression.value);
+                                max = Math.min(max, pixels);
+                                breakpoints.push({
+                                    string: expression.value,
+                                    pixels: pixels
+                                });
+                            } else if (expression.modifier === 'min') {
+                                pixels = toPixels(expression.value);
+                                min = Math.max(min, pixels);
+                                breakpoints.push({
+                                    string: expression.value,
+                                    pixels: pixels
+                                });
+                            }
+                        } else if (astItem.inverse === true) {
+                            if (expression.modifier === 'max') {
+                                pixels = toPixels(expression.value);
+                                min = Math.max(min, pixels);
+                                breakpoints.push({
+                                    string: expression.value,
+                                    pixels: pixels
+                                });
+                            } else if (expression.modifier === 'min') {
+                                pixels = toPixels(expression.value);
+                                max = Math.min(max, pixels);
+                                breakpoints.push({
+                                    string: expression.value,
+                                    pixels: pixels
+                                });
+                            }
+                        }
+                    }
+                });
+            });
+
+            isForMobile = (min <= MOBILE_MIN_BREAKPOINT && max >= MOBILE_MAX_BREAKPOINT && max !== Infinity);
+
+        } catch(error) {
+            debug('Failed to parse media query ' + offender);
+        }
+
+        return {
+            mediaQuery: {
+                query: query,
+                rules: rulesCount,
+                file: splittedOffender.file,
+                line: splittedOffender.line,
+                column: splittedOffender.column
+            },
+            isForMobile: isForMobile,
+            breakpoints: breakpoints
+        };
+    };
+
+    // Parses a size in em, pt (or px) and returns it in px
+    function toPixels(size) {
+        var splittedSize = /^([\d\.]+)(.*)/.exec(size);
+        var value = parseFloat(splittedSize[1]);
+        var unit = splittedSize[2];
+
+        if (unit === 'em') {
+            return value * 16;
+        }
+
+        if (unit === 'pt') {
+            return value / 12 * 16;
+        }
+
+        return value;
+    }
+};
+
+module.exports = new mediaQueriesChecker();

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

@@ -18,8 +18,8 @@ exports.module = function(phantomas) {
         responseEndTime = Date.now();
     });
 
-    phantomas.once('init', function() {
-        phantomas.evaluate(function(responseEndTime, deepAnalysis) {
+    phantomas.on('init', function() {
+        phantomas.evaluate(function(responseEndTime) {
             (function(phantomas) {
     
                 // Overwritting phantomas spy function
@@ -49,7 +49,7 @@ exports.module = function(phantomas) {
                             var err;
                             
                             // Before
-                            if (enabled) {
+                            if (enabled && callbackBefore) {
                                 callbackBefore.apply(this, arguments);
                             }
 
@@ -71,7 +71,8 @@ exports.module = function(phantomas) {
 
                                 // After
                                 if (enabled && callbackAfter) {
-                                    callbackAfter.call(this, result, arguments);
+                                    var args = Array.prototype.slice.call(arguments);
+                                    callbackAfter.apply(this, [result].concat(args));
                                 }
 
                                 if (err) {
@@ -104,49 +105,87 @@ exports.module = function(phantomas) {
 
                     var root = new ContextTreeNode(null, {type: 'main'});
                     var currentContext = root;
-                    if (deepAnalysis) {
-                        phantomas.log('Entering deep Javascript analysis mode');
-                    }
                     var depth = 0;
 
-                    // Add a child but don't enter his context
+
+                    // Add a child but don't enter its context
                     function pushContext(data) {
-                        if (depth === 0 || deepAnalysis) {
+                        
+                        // Some data is not needed on subchildren
+                        if (depth === 0) {
                             data.timestamp = Date.now() - responseEndTime;
                             data.loadingStep = phantomas.currentStep || '';
-                            currentContext.addChild(data);
                         }
+
+                        // Some data is not needed on subchildren
+                        if (depth > 0) {
+                            if (data.backtrace) {
+                                delete data.backtrace;
+                            }
+                            if (data.resultsNumber) {
+                                delete data.resultsNumber;
+                            }
+                        }
+
+                        currentContext.addChild(data);
                     }
                     
-                    // Add a child to the current context and enter his context
+                    // Add a child to the current context and enter its context
                     function enterContext(data) {
-                        if (depth === 0 || deepAnalysis) {
+                        
+                        // Some data is not needed on subchildren
+                        if (depth === 0) {
                             data.timestamp = Date.now() - responseEndTime;
                             data.loadingStep = phantomas.currentStep || '';
-                            currentContext = currentContext.addChild(data);
                         }
+
+                        // Some data is not needed on subchildren
+                        if (depth > 0) {
+                            if (data.backtrace) {
+                                delete data.backtrace;
+                            }
+                            if (data.resultsNumber) {
+                                delete data.resultsNumber;
+                            }
+                        }
+
+                        currentContext = currentContext.addChild(data);
+
                         depth ++;
                     }
                     
                     // Save given data in the current context and jump change current context to its parent
                     function leaveContext(moreData) {
-                        if (depth === 1 || deepAnalysis) {
+                        
+                        // Some data is not needed on subchildren
+                        if (depth === 1) {
                             currentContext.data.time = Date.now() - currentContext.data.timestamp - responseEndTime;
+                        }
 
-                            // Merge previous data with moreData (ovewrites if exists)
-                            if (moreData) {
-                                for (var key in moreData) {
-                                    currentContext.data[key] = moreData[key];
-                                }
+                        // Some data is not needed on subchildren
+                        if (depth > 1) {
+                            if (moreData && moreData.backtrace) {
+                                delete moreData.backtrace;
                             }
-
-                            var parent = currentContext.parent;
-                            if (parent === null) {
-                                console.error('Error: trying to close root context in ContextTree');
-                            } else {
-                                currentContext = parent;
+                            if (moreData && moreData.resultsNumber) {
+                                delete moreData.resultsNumber;
                             }
                         }
+
+                        // Merge previous data with moreData (ovewrites if exists)
+                        if (moreData) {
+                            for (var key in moreData) {
+                                currentContext.data[key] = moreData[key];
+                            }
+                        }
+
+                        var parent = currentContext.parent;
+                        if (parent === null) {
+                            console.error('Error: trying to close root context in ContextTree');
+                        } else {
+                            currentContext = parent;
+                        }
+
                         depth --;
                     }
                     
@@ -160,7 +199,6 @@ exports.module = function(phantomas) {
                         if (root !== currentContext) {
                             return null;
                         }
-                        var current = currentContext;
 
                         function recusiveRead(node) {
                             if (node.children.length === 0) {
@@ -176,6 +214,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,10 +241,11 @@ exports.module = function(phantomas) {
                     phantomas.leaveContext = leaveContext;
                     phantomas.getContextData = getContextData;
                     phantomas.readFullTree = readFullTree;
+                    phantomas.resetTree = resetTree;
 
                 })();
 
             })(window.__phantomas);
-        }, responseEndTime, phantomas.getParam('js-deep-analysis'));
+        }, responseEndTime);
     });
 };

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

@@ -0,0 +1,30 @@
+/**
+ * Analyzes AJAX requests
+ */
+/* global window: true */
+
+exports.version = '0.2.a';
+
+exports.module = function(phantomas) {
+    'use strict';
+
+    phantomas.setMetric('ajaxRequests'); // @desc number of AJAX requests
+    phantomas.setMetric('synchronousXHR'); // @desc number of synchronous 
+
+    phantomas.on('init', function() {
+        phantomas.evaluate(function() {
+            (function(phantomas) {
+                phantomas.spy(window.XMLHttpRequest.prototype, 'open', null, function(result, method, url, async) {
+                    phantomas.incrMetric('ajaxRequests');
+                    phantomas.addOffender('ajaxRequests', '<%s> [%s]', url, method);
+
+                    if (async === false) {
+                        phantomas.incrMetric('synchronousXHR');
+                        phantomas.addOffender('synchronousXHR', url);
+                        phantomas.log('ajaxRequests: synchronous XMLHttpRequest call to <%s>', url);
+                    }
+                }, true);
+            })(window.__phantomas);
+        });
+    });
+};

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

@@ -0,0 +1,71 @@
+/**
+ * Lists the number of different characters
+ */
+/* global document: true, Node: true, window: true */
+
+exports.version = '1.0';
+
+exports.module = function(phantomas) {
+    'use strict';
+
+    //phantomas.setMetric('differentCharacters'); // @desc the number of different characters in the body @offenders
+
+    phantomas.on('report', function() {
+        phantomas.log("charactersCount: starting to analyze characters on page...");
+
+        phantomas.evaluate(function() {
+            (function(phantomas) {
+
+                phantomas.spyEnabled(false, 'analyzing characters on page');
+
+                function getLetterCount(arr){
+                    return arr.reduce(function(prev, next){
+                        prev[next] = 1;
+                        return prev;
+                    }, {});
+                }
+
+                if (document.body && document.body.textContent) {
+                    var allText = '';
+
+                    // Traverse all DOM Tree to read text
+                    var runner = new phantomas.nodeRunner();
+                    runner.walk(document.body, function(node, depth) {
+                        switch (node.nodeType) {
+
+                            // Grabing text nodes
+                            case Node.TEXT_NODE:
+                                if (node.parentNode.tagName !== 'SCRIPT' && node.parentNode.tagName !== 'STYLE') {
+                                    allText += node.nodeValue;
+                                }
+                                break;
+
+                            // Grabing CSS content properties
+                            case Node.ELEMENT_NODE:
+                                if (node.tagName !== 'SCRIPT' && node.tagName !== 'STYLE') {
+                                    allText += window.getComputedStyle(node).getPropertyValue('content');
+                                    allText += window.getComputedStyle(node, ':before').getPropertyValue('content');
+                                    allText += window.getComputedStyle(node, ':after').getPropertyValue('content');
+                                }
+                                break;
+                        }
+                    });
+
+                    // Reduce all text found in page into a string of unique chars
+                    var charactersList = getLetterCount(allText.split(''));
+                    var charsetString = Object.keys(charactersList).sort().join('');
+                    
+                    // Remove blank characters
+                    charsetString = charsetString.replace(/\s/g, '');
+
+                    phantomas.setMetric('differentCharacters', charsetString.length);
+                    phantomas.addOffender('differentCharacters', charsetString);
+                }
+
+                phantomas.spyEnabled(true);
+            }(window.__phantomas));
+        });
+
+        phantomas.log("charactersCount: analyzing characters done.");
+    });
+};

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

@@ -3,21 +3,23 @@
  */
 /* global document: true, Node: true, window: true */
 
-exports.version = '0.1.a';
+exports.version = '1.0.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
+    phantomas.setMetric('hiddenImages'); // @desc number of hidden images that can be lazy-loaded @offenders
 
     // HTML size
     phantomas.on('report', function() {
         phantomas.evaluate(function() {
             (function(phantomas) {
-                phantomas.spyEnabled(false, 'checking the hiddenContentSize');
+                var runner = new phantomas.nodeRunner(),
+                    lazyLoadableImages = {};
 
-                var runner = new phantomas.nodeRunner();
+                phantomas.spyEnabled(false, 'analyzing hidden content');
 
                 runner.walk(document.body, function(node, depth) {
                     switch (node.nodeType) {
@@ -36,6 +38,31 @@ exports.module = function(phantomas) {
                                     }
                                 }
 
+                                // count hidden images that can be lazy loaded (issue #524)
+                                var images = [];
+                                if (node.tagName === 'IMG') {
+                                    images = [node];
+                                } else if (typeof node.querySelectorAll === 'function') {
+                                    images = node.querySelectorAll('img') || [];
+                                }
+
+                                for (var i = 0, len = images.length; i < len; i++) {
+                                    var src = images[i].src,
+                                        path;
+
+                                    if (src === '' || src.indexOf('data:image') === 0) continue;
+
+                                    if (images[i].width === 1 && images[i].height === 1) continue;
+
+                                    if (!lazyLoadableImages[src]) {
+                                        path = phantomas.getDOMPath(images[i]);
+
+                                        lazyLoadableImages[src] = {
+                                            path: path
+                                        };
+                                    }
+                                }
+
                                 // don't run for child nodes as they're hidden as well
                                 return false;
                             }
@@ -43,6 +70,15 @@ exports.module = function(phantomas) {
                     }
                 });
 
+                Object.keys(lazyLoadableImages).forEach(function(img) {
+                    var entry = lazyLoadableImages[img];
+
+                    phantomas.incrMetric('hiddenImages');
+                    phantomas.addOffender('hiddenImages', img);
+
+                    phantomas.log('hiddenImages: <%s> image (%s) is hidden and can be lazy-loaded', img, entry.path);
+                });
+
                 phantomas.spyEnabled(true);
             }(window.__phantomas));
         });

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

@@ -19,7 +19,7 @@ exports.module = function(phantomas) {
     phantomas.setMetric('DOMqueriesAvoidable'); // @desc number of repeated uses of a duplicated query
 
     // fake native DOM functions
-    phantomas.once('init', function() {
+    phantomas.on('init', function() {
         phantomas.evaluate(function() {
             (function(phantomas) {
                 function querySpy(type, query, fnName, context, hasNoResults) {
@@ -39,9 +39,9 @@ exports.module = function(phantomas) {
                     });
 
                 }, function(result, args) {
-                    var id = args[0];
+                    var id = args ? '#' + args[0] : undefined;
 
-                    querySpy('id', '#' + id, 'getElementById', '#document', (result === null));
+                    querySpy('id', id, 'getElementById', '#document', (result === null));
 
                     var moreData = {
                         resultsNumber : (result === null) ? 0 : 1
@@ -74,10 +74,10 @@ exports.module = function(phantomas) {
                 function selectorClassNameAfter(result, args) {
                     /*jshint validthis: true */
 
-                    var className = args[0];
+                    var className = args ? '.' + args[0] : undefined;
                     var context = phantomas.getDOMPath(this);
 
-                    querySpy('class', '.' + className, 'getElementsByClassName', context, (result.length === 0));
+                    querySpy('class', className, 'getElementsByClassName', context, (result.length === 0));
                     
                     var moreData = {
                         resultsNumber : (result && result.length > 0) ? result.length : 0
@@ -113,10 +113,10 @@ exports.module = function(phantomas) {
                 function selectorTagNameSpyAfter(result, args) {
                     /*jshint validthis: true */
                     
-                    var tagName = args[0];
+                    var tagName = args ? args[0].toLowerCase() : undefined;
                     var context = phantomas.getDOMPath(this);
 
-                    querySpy('tag name', tagName.toLowerCase(), 'getElementsByTagName', context, (result.length === 0));
+                    querySpy('tag name', tagName, 'getElementsByTagName', context, (result.length === 0));
                     
                     var moreData = {
                         resultsNumber : (result && result.length > 0) ? result.length : 0
@@ -156,7 +156,7 @@ exports.module = function(phantomas) {
                 function selectorQuerySpyAfter(result, args) {
                     /*jshint validthis: true */
 
-                    var selector = args[0];
+                    var selector = args ? args[0] : undefined;
                     var context = phantomas.getDOMPath(this);
 
                     querySpy('selector', selector, 'querySelectorAll', context, (!result || result.length === 0));
@@ -189,7 +189,7 @@ exports.module = function(phantomas) {
                 function selectorAllQuerySpryAfter(result, args) {
                     /*jshint validthis: true */
 
-                    var selector = args[0];
+                    var selector = args ? args[0] : undefined;
                     var context = phantomas.getDOMPath(this);
 
                     querySpy('selector', selector, 'querySelectorAll', context, (!result || result.length === 0));
@@ -365,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,49 +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: {
-                                length: 1,
-                                elements: [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.on('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

@@ -138,10 +138,9 @@ exports.module = function(phantomas) {
     jQueryFunctions = jQueryFunctions.concat(jQueryTraversalFunctions);
 
     // spy calls to jQuery functions
-    phantomas.once('init', function() {
+    phantomas.on('init', function() {
         phantomas.evaluate(function(jQueryFunctions, jQueryTraversalFunctions) {
             (function(phantomas) {
-                var jQuery;
                 var oldJQuery;
 
                 phantomas.spyGlobalVar('jQuery', function(jQuery) {
@@ -274,7 +273,6 @@ exports.module = function(phantomas) {
                             args = [].slice.call(arguments);
                             args.forEach(function(arg, index) {
                                 
-                                
                                 if (arg instanceof Array) {
                                     arg = '[Array]';
                                 }
@@ -296,6 +294,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]';
@@ -365,14 +370,6 @@ exports.module = function(phantomas) {
     });
 
 
-    // store the last resource that was received
-    // try to report where given jQuery version was loaded from
-    phantomas.on('recv', function(entry) {
-        if (entry.isJS) {
-            lastUrl = entry.url;
-        }
-    });
-
     phantomas.on('jQueryLoaded', function(version) {
         phantomas.log('jQuery: loaded v' + version);
         phantomas.setMetric('jQueryVersion', version);
@@ -380,7 +377,5 @@ exports.module = function(phantomas) {
         // report multiple jQuery "instances" (issue #435)
         phantomas.incrMetric('jQueryVersionsLoaded');
         phantomas.addOffender('jQueryVersionsLoaded', 'v%s', version);
-
-        phantomas.log('jQuery: v%s (probably loaded from <%s>)', version, lastUrl);
     });
 };

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

@@ -23,7 +23,7 @@ exports.module = function(phantomas) {
         phantomas.log('javaScriptBottlenecks: to spy calls to eval() run phantomas with --spy-eval option');
     }
 
-    phantomas.once('init', function() {
+    phantomas.on('init', function() {
         phantomas.evaluate(function(spyEval) {
             (function(phantomas) {
                 function report(msg, caller, backtrace, metric) {

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/lazyLoadableYLT/lazyLoadableYLT.js

@@ -0,0 +1,81 @@
+/**
+ * Analyzes images and detects which one can be lazy-loaded (are below the fold)
+ *
+ * @see https://github.com/macbre/phantomas/issues/494
+ */
+/* global document: true, window: true */
+
+exports.version = '1.0.a';
+
+exports.module = function(phantomas) {
+    'use strict';
+    
+    phantomas.setMetric('lazyLoadableImagesBelowTheFold'); // @desc number of images displayed below the fold that can be lazy-loaded
+
+    phantomas.on('report', function() {
+        phantomas.log('lazyLoadableImages: analyzing which images can be lazy-loaded...');
+
+        phantomas.evaluate(function() {
+            (function(phantomas) {
+                phantomas.spyEnabled(false, 'analyzing which images can be lazy-loaded');
+
+                var images = document.body.getElementsByTagName('img'),
+                    i,
+                    len = images.length,
+                    offset,
+                    path,
+                    processedImages = {},
+                    src,
+                    viewportHeight = window.innerHeight,
+                    // Add an offset of 100px under the height of the screen
+                    LAZYLOAD_OFFSET = 100;
+
+                phantomas.log('lazyLoadableImages: %d image(s) found, assuming %dpx offset to be the fold', len, viewportHeight);
+
+                for (i = 0; i < len; i++) {
+                    // @see https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
+                    offset = images[i].getBoundingClientRect().top;
+                    src = images[i].src;
+
+                    // ignore base64-encoded images
+                    if (src === '' || /^data:/.test(src)) {
+                        continue;
+                    }
+
+                    path = phantomas.getDOMPath(images[i]);
+
+                    // get the most top position for a given image (deduplicate by src)
+                    if (typeof processedImages[src] === 'undefined') {
+                        processedImages[src] = {
+                            offset: offset,
+                            path: path
+                        };
+                    }
+
+                    // maybe there's the same image loaded above the fold?
+                    if (offset < processedImages[src].offset) {
+                        processedImages[src] = {
+                            offset: offset,
+                            path: path
+                        };
+                    }
+                }
+
+                phantomas.log('lazyLoadableImages: checking %d unique image(s)', Object.keys(processedImages).length);
+
+                Object.keys(processedImages).forEach(function(src) {
+                    var img = processedImages[src];
+
+                    if (img.offset > viewportHeight + LAZYLOAD_OFFSET) {
+                        phantomas.log('lazyLoadableImages: <%s> image (%s) is below the fold (at %dpx)', src, img.path, img.offset);
+
+                        phantomas.incrMetric('lazyLoadableImagesBelowTheFold');
+                        phantomas.addOffender('lazyLoadableImagesBelowTheFold', src);
+                    }
+                });
+
+                phantomas.spyEnabled(true);
+            })(window.__phantomas);
+        });
+    });
+};

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

@@ -0,0 +1,23 @@
+/**
+ * Retries download on every request to get the real file size
+ *
+ */
+
+exports.version = '0.1';
+
+exports.module = function(phantomas) {
+    'use strict';
+
+    phantomas.setMetric('requestsList');
+
+    var requests = [];
+
+    phantomas.on('recv', function(entry, res) {
+        requests.push(entry);
+    });
+
+    phantomas.on('report', function() {
+        phantomas.setMetric('requestsList', true, true);
+        phantomas.addOffender('requestsList', JSON.stringify(requests));
+    });
+};

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

@@ -17,33 +17,41 @@ var PhantomasWrapper = function() {
         var deferred = Q.defer();
         var task = data.params;
 
-
         var options = {
+            
             // Cusomizable options
-            'timeout': task.options.timeout || 60,
-            'js-deep-analysis': task.options.jsDeepAnalysis || false,
-            '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,
+            'engine': task.options.phantomasEngine || 'webkit',
+            'timeout': task.options.timeout || 30,
+            'user-agent': (task.options.device === 'desktop') ? 'Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) YLT Chrome/27.0.1453.110 Safari/537.36' : null,
             'tablet': (task.options.device === 'tablet'),
             'phone': (task.options.device === 'phone'),
             'screenshot': task.options.screenshot || false,
+            'wait-for-selector': task.options.waitForSelector,
+            'cookie': task.options.cookie,
+            'auth-user': task.options.authUser,
+            'auth-pass': task.options.authPass,
+            'block-domain': task.options.blockDomain,
+            'allow-domain': task.options.allowDomain,
+            'no-externals': task.options.noExternals,
 
             // Mandatory
             'reporter': 'json:pretty',
             'analyze-css': true,
+            'ignore-ssl-errors': true,
             'skip-modules': [
-                'blockDomains', // not needed
-                'domHiddenContent', // overriden
+                'ajaxRequests', // overridden
+                'domHiddenContent', // overridden
                 'domMutations', // not compatible with webkit
-                'domQueries', // overriden
-                'eventListeners', // overridden
+                'domQueries', // 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
+                'lazyLoadableImages', //overridden
                 'pageSource', // not needed
-                'waitForSelector', // not needed
-                'windowPerformance' // overriden
+                'windowPerformance' // overridden
             ].join(','),
             'include-dirs': [
                 path.join(__dirname, 'custom_modules/core'),
@@ -51,6 +59,12 @@ var PhantomasWrapper = function() {
             ].join(',')
         };
 
+        // Proxy option can't be set to null or undefined...
+        // this is why it's set now and not in the object above
+        if (task.options.proxy) {
+            options.proxy = task.options.proxy;
+        }
+
         // Output the command line for debugging purpose
         debug('If you want to reproduce the phantomas task only, copy the following command line:');
         var optionsString = '';
@@ -63,7 +77,7 @@ var PhantomasWrapper = function() {
 
             if (value === true) {
                 optionsString += ' ' + '--' + opt;
-            } else if (value === false || value === null) {
+            } else if (value === false || value === null || value === undefined) {
                 // Nothing
             } else {
                 optionsString += ' ' + '--' + opt + '=' + value;
@@ -72,56 +86,84 @@ var PhantomasWrapper = function() {
         }
         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;
+        var currentTry = 0;
 
         async.retry(triesNumber, function(cb) {
+
+            currentTry ++;
+
             var process = phantomas(task.url, options, function(err, json, results) {
-                debug('Returning from Phantomas');
+                var errorCode = err ? parseInt(err.message, 10) : null;
+                
+                if (isKilled) {
+                    debug('Process was killed, too late Phantomas, sorry...');
+                    return;
+                }
+
+
+                debug('Returning from Phantomas with error %s', errorCode);
 
                 // Adding some YellowLabTools errors here
                 if (json && json.metrics && (!json.metrics.javascriptExecutionTree || !json.offenders.javascriptExecutionTree)) {
-                    err = 1001;
+                    errorCode = 1001;
                 }
 
-                if (!err && (!json || !json.metrics)) {
-                    err = 1002;
+                if (!errorCode && (!json || !json.metrics)) {
+                    errorCode = 1002;
                 }
 
                 // Don't cancel test if it is a timeout and we've got some results
-                if (err === 252 && json) {
+                if (errorCode === 252 && json) {
                     debug('Timeout after ' + options.timeout + ' seconds. But it\'s not a problem, the test is valid.');
-                    err = null;
+                    errorCode = null;
                 }
 
-                if (err) {
-                    debug('Attempt failed. Error code ' + err);
+                if (errorCode) {
+                    debug('Attempt failed. Error code ' + errorCode);
                 }
 
-                cb(err, json);
+                cb(errorCode, json);
+            
+            }).fail(function() {
+                // This function is useless, but the failing promise needs to be handled,
+                // otherwise the module meow writes in the console in case of a timeout (error code 252).
+                debug('Failing promise handled');
             });
             
             phantomasPid = process.pid;

lib/tools/redownload/contentTypeChecker.js

@@ -0,0 +1,188 @@
+var debug   = require('debug')('ylt:contentTypeChecker');
+var Q       = require('q');
+var isJpg   = require('is-jpg');
+var isPng   = require('is-png');
+var isSvg   = require('is-svg');
+var isGif   = require('is-gif');
+var isWoff  = require('is-woff');
+var isWoff2 = require('is-woff2');
+var isOtf   = require('is-otf');
+var isTtf   = require('is-ttf');
+var isEot   = require('is-eot');
+
+var ContentTypeChecker = function() {
+
+    function checkContentType(entry) {
+        var deferred = Q.defer();
+
+        debug('Entering contentTypeChecker');
+        
+        // Ignore very small files as they are generally tracking pixels
+        if (entry.weightCheck && entry.weightCheck.bodyBuffer && entry.weightCheck.bodySize > 100) {
+            var foundType;
+
+            try {
+                foundType = findContentType(entry.weightCheck.bodyBuffer);
+            
+                if (!entry.contentType || entry.contentType === '') {
+                    if (foundType === null) {
+                        debug('ContentType is empty for file %s', entry.url);
+                    } else {
+                        debug('ContentType is empty for file %s. It should be %s.', entry.url, foundType.mimes[0]);
+                        entry.oldContentType = null;
+                        rewriteContentType(entry, foundType);
+                    }
+                } else {
+                    if (foundType !== null && foundType.mimes.indexOf(entry.contentType) === -1) {
+                        debug('ContentType %s is wrong for %s. It should be %s.', entry.contentType, entry.url, foundType.mimes[0]);
+                        entry.oldContentType = entry.contentType;
+                        rewriteContentType(entry, foundType);
+                    }
+                }
+
+            } catch(err) {
+                debug('Error while analyzing the contentType of %s', entry.url);
+                debug(err);
+            }
+        }
+
+        deferred.resolve(entry);
+
+        return deferred.promise;
+    }
+
+    function findContentType(bodyBuffer) {
+        var bodyStr = bodyBuffer.toString();
+
+        if (isJpg(bodyBuffer)) {
+            return contentTypes.jpeg;
+        }
+
+        if (isPng(bodyBuffer)) {
+            return contentTypes.png;
+        }
+
+        // https://github.com/sindresorhus/is-svg/issues/7
+        if (/<svg/.test(bodyStr) && isSvg(bodyStr)) {
+            return contentTypes.svg;
+        }
+
+        if (isGif(bodyBuffer)) {
+            return contentTypes.gif;
+        }
+
+        if (isWoff(bodyBuffer)) {
+            return contentTypes.woff;
+        }
+
+        if (isWoff2(bodyBuffer)) {
+            return contentTypes.woff2;
+        }
+
+        if (isOtf(bodyBuffer)) {
+            return contentTypes.otf;
+        }
+
+        if (isTtf(bodyBuffer)) {
+            return contentTypes.ttf;
+        }
+
+        if (isEot(bodyBuffer)) {
+            return contentTypes.eot;
+        }
+
+        return null;
+    }
+
+
+    function rewriteContentType(entry, contentTypeObj) {
+        delete(entry.isHTML);
+        delete(entry.isXML);
+        delete(entry.isCSS);
+        delete(entry.isJS);
+        delete(entry.isJSON);
+        delete(entry.isImage);
+        delete(entry.isSVG);
+        delete(entry.isVideo);
+        delete(entry.isWebFont);
+        delete(entry.isTTF);
+        delete(entry.isFavicon);
+
+        entry.contentType = contentTypeObj.mimes[0];
+        contentTypeObj.updateFn(entry);
+    }
+
+    var contentTypes = {
+        jpeg: {
+            mimes: ['image/jpeg'],
+            updateFn: function(entry) {
+                entry.type = 'image';
+                entry.isImage = true;
+            }
+        },
+        png: {
+            mimes: ['image/png'],
+            updateFn: function(entry) {
+                entry.type = 'image';
+                entry.isImage = true;
+            }
+        },
+        svg: {
+            mimes: ['image/svg+xml'],
+            updateFn: function(entry) {
+                entry.type = 'image';
+                entry.isImage = true;
+                entry.isSVG = true;
+            }
+        },
+        gif: {
+            mimes: ['image/gif'],
+            updateFn: function(entry) {
+                entry.type = 'image';
+                entry.isImage = true;
+            }
+        },
+        woff: {
+            mimes: ['application/x-font-woff', 'application/font-woff', 'font/woff'],
+            updateFn: function(entry) {
+                entry.type = 'webfont';
+                entry.isWebFont = true;
+            }
+        },
+        woff2: {
+            mimes: ['font/woff2', 'application/x-font-woff2', 'application/font-woff2'],
+            updateFn: function(entry) {
+                entry.type = 'webfont';
+                entry.isWebFont = true;
+            }
+        },
+        otf: {
+            mimes: ['application/x-font-otf', 'font/otf', 'font/opentype', 'application/x-font-opentype'],
+            updateFn: function(entry) {
+                entry.type = 'webfont';
+                entry.isWebFont = true;
+            }
+        },
+        ttf: {
+            mimes: ['application/x-font-ttf', 'font/ttf', 'application/x-font-truetype'],
+            updateFn: function(entry) {
+                entry.type = 'webfont';
+                entry.isWebFont = true;
+            }
+        },
+        eot: {
+            mimes: ['application/vnd.ms-fontobject', 'font/eot'],
+            updateFn: function(entry) {
+                entry.type = 'webfont';
+                entry.isWebFont = true;
+            }
+        }
+    };
+    
+    return {
+        checkContentType: checkContentType,
+        findContentType: findContentType
+    };
+};
+
+module.exports = new ContentTypeChecker();

lib/tools/redownload/fileMinifier.js

@@ -0,0 +1,354 @@
+var debug = require('debug')('ylt:fileMinifier');
+
+var Q               = require('q');
+var UglifyJS        = require('uglify-js');
+var CleanCSS        = require('clean-css');
+var Minimize        = require('minimize');
+
+
+var FileMinifier = function() {
+
+    function minifyFile(entry) {
+        var deferred = Q.defer();
+
+        if (!entry.weightCheck || !entry.weightCheck.bodyBuffer) {
+            // No valid file available
+            deferred.resolve(entry);
+            return deferred.promise;
+        }
+
+        var fileSize = entry.weightCheck.uncompressedSize;
+        var bodyString = entry.weightCheck.bodyBuffer.toString();
+
+        debug('Let\'s try to optimize %s', entry.url);
+        debug('Current file size is %d', fileSize);
+        var startTime = Date.now();
+
+        if (entry.isJS && !isKnownAsMinified(entry.url) && !looksAlreadyMinified(bodyString)) {
+
+            debug('File is a JS');
+
+            return minifyJs(bodyString)
+
+            .then(function(newFile) {
+                if (!newFile) {
+                    debug('Optimization didn\'t work');
+                    return entry;
+                }
+
+                var endTime = Date.now();
+
+                var newFileSize = newFile.length;
+
+                debug('JS minification complete for %s', entry.url);
+                
+                if (gainIsEnough(fileSize, newFileSize)) {
+                    entry.weightCheck.bodyAfterOptimization = newFile;
+                    entry.weightCheck.optimized = newFileSize;
+                    entry.weightCheck.isOptimized = false;
+                    debug('Filesize is %d bytes smaller (-%d%)', fileSize - newFileSize, Math.round((fileSize - newFileSize) * 100 / fileSize));
+                }
+
+                return entry;
+            })
+
+            .fail(function(err) {
+                return entry;
+            });
+
+        } else if (entry.isCSS) {
+
+            debug('File is a CSS');
+
+            return minifyCss(entry.weightCheck.bodyBuffer.toString())
+
+            .then(function(newFile) {
+                if (!newFile) {
+                    debug('Optimization didn\'t work');
+                    return entry;
+                }
+
+                var endTime = Date.now();
+                debug('CSS minification took %dms', endTime - startTime);
+
+                var newFileSize = newFile.length;
+
+                debug('CSS minification complete for %s', entry.url);
+                
+                if (gainIsEnough(fileSize, newFileSize)) {
+                    entry.weightCheck.bodyAfterOptimization = newFile;
+                    entry.weightCheck.optimized = newFileSize;
+                    entry.weightCheck.isOptimized = false;
+                    debug('Filesize is %d bytes smaller (-%d%)', fileSize - newFileSize, Math.round((fileSize - newFileSize) * 100 / fileSize));
+                }
+
+                return entry;
+            })
+
+            .fail(function(err) {
+                return entry;
+            });
+
+        } else if (entry.isHTML) {
+
+            debug('File is an HTML');
+
+            return minifyHtml(entry.weightCheck.bodyBuffer.toString())
+
+            .then(function(newFile) {
+                if (!newFile) {
+                    debug('Optimization didn\'t work');
+                    return entry;
+                }
+
+                var endTime = Date.now();
+                debug('HTML minification took %dms', endTime - startTime);
+
+                var newFileSize = newFile.length;
+
+                debug('HTML minification complete for %s', entry.url);
+                
+                if (gainIsEnough(fileSize, newFileSize)) {
+                    entry.weightCheck.bodyAfterOptimization = newFile;
+                    entry.weightCheck.optimized = newFileSize;
+                    entry.weightCheck.isOptimized = false;
+                    debug('Filesize is %d bytes smaller (-%d%)', fileSize - newFileSize, Math.round((fileSize - newFileSize) * 100 / fileSize));
+                }
+
+                return entry;
+            })
+
+            .fail(function(err) {
+                return entry;
+            });
+
+        } else {
+            debug('Not minifiable type or already minified');
+            deferred.resolve(entry);
+        }
+
+        return deferred.promise;
+    }
+
+    // The gain is estimated of enough value if it's over 2KB or over 20%,
+    // but it's ignored if is below 400 bytes
+    function gainIsEnough(oldWeight, newWeight) {
+        var gain = oldWeight - newWeight;
+        var ratio = gain / oldWeight;
+        return (gain > 2096 || (ratio > 0.2 && gain > 400));
+    }
+
+    // Uglify
+    function minifyJs(body) {
+        
+        // Splitting the Uglify function because it sometime takes too long (more than 10 seconds)
+        // I hope that, by splitting, it can be a little more asynchronous, so the application doesn't freeze.
+
+        return splittedUglifyStep1(body)
+        .delay(1)
+        .then(splittedUglifyStep2)
+        .delay(1)
+        .then(function(ast) {
+            // Only do the compression step for smaller files
+            // otherwise it can take a very long time compared to the gain
+            if (body.length < 200*1024) {
+                return splittedUglifyStep3(ast);
+            } else {
+                debug('Skipping step 3 because the file is too big (%d bytes)!', body.length);
+                return ast;
+            }
+        })
+        .delay(1)
+        .then(splittedUglifyStep4)
+        .delay(1)
+        .then(splittedUglifyStep5)
+        .delay(1)
+        .then(splittedUglifyStep6)
+        .delay(1)
+        .then(splittedUglifyStep7);
+
+    }
+
+    function splittedUglifyStep1(code) {
+        var deferred = Q.defer();
+        var startTime = Date.now();
+
+        try {
+            var toplevel_ast = UglifyJS.parse(code);
+
+            var endTime = Date.now();
+            debug('Uglify step 1 took %dms', endTime - startTime);
+            deferred.resolve(toplevel_ast);
+
+        } catch(err) {
+            debug('JS syntax error, Uglify\'s parser failed (step 1)');
+            deferred.reject(err);
+        }
+
+        return deferred.promise;
+    }
+
+    function splittedUglifyStep2(toplevel) {
+        var deferred = Q.defer();
+        var startTime = Date.now();
+
+        toplevel.figure_out_scope();
+
+        var endTime = Date.now();
+        debug('Uglify step 2 took %dms', endTime - startTime);
+        deferred.resolve(toplevel);
+        return deferred.promise;
+    }
+
+    function splittedUglifyStep3(toplevel) {
+        var deferred = Q.defer();
+        var startTime = Date.now();
+
+        var compressor = UglifyJS.Compressor({warnings: false});
+        var compressed_ast = toplevel.transform(compressor);
+
+        var endTime = Date.now();
+        debug('Uglify step 3 took %dms', endTime - startTime);
+        deferred.resolve(compressed_ast);
+        return deferred.promise;
+    }
+
+    function splittedUglifyStep4(compressed_ast) {
+        var deferred = Q.defer();
+        var startTime = Date.now();
+
+        compressed_ast.figure_out_scope();
+
+        var endTime = Date.now();
+        debug('Uglify step 4 took %dms', endTime - startTime);
+        deferred.resolve(compressed_ast);
+        return deferred.promise;
+    }
+
+    function splittedUglifyStep5(compressed_ast) {
+        var deferred = Q.defer();
+        var startTime = Date.now();
+
+        compressed_ast.compute_char_frequency();
+
+        var endTime = Date.now();
+        debug('Uglify step 5 took %dms', endTime - startTime);
+        deferred.resolve(compressed_ast);
+        return deferred.promise;
+    }
+
+    function splittedUglifyStep6(compressed_ast) {
+        var deferred = Q.defer();
+        var startTime = Date.now();
+
+        compressed_ast.mangle_names();
+
+        var endTime = Date.now();
+        debug('Uglify step 6 took %dms', endTime - startTime);
+        deferred.resolve(compressed_ast);
+        return deferred.promise;
+    }
+
+    function splittedUglifyStep7(compressed_ast) {
+        var deferred = Q.defer();
+        var startTime = Date.now();
+
+        var code = compressed_ast.print_to_string();
+
+        var endTime = Date.now();
+        debug('Uglify step 7 took %dms', endTime - startTime);
+        deferred.resolve(code);
+        return deferred.promise;
+    }
+
+    // Clear-css
+    function minifyCss(body) {
+        var deferred = Q.defer();
+
+        try {
+            var result = new CleanCSS({compatibility: 'ie8'}).minify(body);
+            deferred.resolve(result.styles);
+        } catch(err) {
+            deferred.reject(err);
+        }
+
+        return deferred.promise;
+    }
+
+    // HTMLMinifier
+    function minifyHtml(body) {
+        var deferred = Q.defer();
+
+        var minimize = new Minimize({
+            empty: true,        // KEEP empty attributes
+            conditionals: true, // KEEP conditional internet explorer comments
+            spare: true         // KEEP redundant attributes
+        });
+
+        minimize.parse(body, function (error, data) {
+            if (error) {
+                deferred.reject(error);
+            } else {
+                deferred.resolve(data);
+            }
+        });
+
+        return deferred.promise;
+    }
+
+    // Avoid losing time trying to compress some JS libraries known as already compressed
+    function isKnownAsMinified(url) {
+        var result = false;
+
+        // Twitter
+        result = result || /^https?:\/\/platform\.twitter\.com\/widgets\.js/.test(url);
+
+        // Facebook
+        result = result || /^https:\/\/connect\.facebook\.net\/[^\/]*\/(sdk|all)\.js/.test(url);
+
+        // Google +1
+        result = result || /^https:\/\/apis\.google\.com\/js\/plusone\.js/.test(url);
+
+        // jQuery CDN
+        result = result || /^https?:\/\/code\.jquery\.com\/.*\.min.js/.test(url);
+
+        // Google Analytics
+        result = result || /^https?:\/\/(www|ssl)\.google-analytics\.com\/(.*)\.js/.test(url);
+
+        if (result === true) {
+            debug('This file is known as already minified. Skipping minification: %s', url);
+        }
+
+        return result;
+    }
+
+    // Avoid losing some trying to compress JS files if they already look minified
+    // by counting the number of lines compared to the total size.
+    // Less than 2KB per line is suspicious
+    function looksAlreadyMinified(code) {
+        var linesCount = code.split(/\r\n|\r|\n/).length;
+        var linesRatio = code.length / linesCount;
+        var looksMinified = linesRatio > 2 * 1024;
+        
+        debug('Lines ratio is %d bytes per line', Math.round(linesRatio));
+        debug(looksMinified ? 'It looks already minified' : 'It doesn\'t look minified');
+
+        return looksMinified;
+    }
+
+    function entryTypeCanBeMinified(entry) {
+        return entry.isJS || entry.isCSS || entry.isHTML;
+    }
+
+    return {
+        minifyFile: minifyFile,
+        minifyJs: minifyJs,
+        minifyCss: minifyCss,
+        minifyHtml: minifyHtml,
+        gainIsEnough: gainIsEnough,
+        entryTypeCanBeMinified: entryTypeCanBeMinified,
+        isKnownAsMinified: isKnownAsMinified
+    };
+};
+
+module.exports = new FileMinifier();

lib/tools/redownload/fontAnalyzer.js

@@ -0,0 +1,388 @@
+var debug = require('debug')('ylt:fontAnalyzer');
+
+var Q           = require('q');
+var fontkit     = require('fontkit');
+
+var FontAnalyzer = function() {
+
+    function analyzeFont(entry, charsListOnPage) {
+        var deferred = Q.defer();
+        
+        if (!entry.weightCheck || !entry.weightCheck.bodyBuffer) {
+            // No valid file available
+            deferred.resolve(entry);
+            return deferred.promise;
+        }
+
+        var fileSize = entry.weightCheck.uncompressedSize;
+
+        if (entry.isWebFont) {
+            debug('File %s is a font. Let\'s have a look inside!', entry.url);
+            
+            getMetricsFromFont(entry, charsListOnPage)
+
+            .then(function(fontMetrics) {
+                entry.fontMetrics = fontMetrics;
+                deferred.resolve(entry);
+            })
+
+            .fail(function(error) {
+                debug('Could not open the font: %s', error);
+                deferred.resolve(entry);
+            });
+
+        } else {
+            deferred.resolve(entry);
+        }
+        
+        return deferred.promise;
+    }
+
+    function getMetricsFromFont(entry, charsListOnPage) {
+        var deferred = Q.defer();
+        
+        try {
+            var startTime = Date.now();
+            var font = fontkit.create(entry.weightCheck.bodyBuffer);
+
+            var result = {
+                name: font.fullName || font.postscriptName || font.familyName,
+                numGlyphs: font.numGlyphs,
+                averageGlyphComplexity: getAverageGlyphComplexity(font),
+                compressedWeight: entry.weightCheck.afterCompression || entry.weightCheck.bodySize,
+                unicodeRanges: readUnicodeRanges(font.characterSet, charsListOnPage),
+                numGlyphsInCommonWithPageContent: countPossiblyUsedGlyphs(getCharacterSetAsString(font.characterSet), charsListOnPage)
+            };
+
+            var endTime = Date.now();
+            debug('Font analysis took %dms', endTime - startTime);
+
+            // Mark fonts that are not used on the page (#224)
+            var fontIsUsed = false;
+            for (var range in result.unicodeRanges) {
+                if (result.unicodeRanges[range].numGlyphsInCommonWithPageContent > 0) {
+                    fontIsUsed = true;
+                    break;
+                }
+            }
+            result.isUsed = fontIsUsed;
+
+            deferred.resolve(result);
+        } catch(error) {
+            deferred.reject(error);
+        }
+
+        return deferred.promise;
+    }
+
+    // Reads the number of vector commands (complexity) needed to render glyphs and
+    // returns the average. Only first 100 glyphes are tested, otherwise it would take tool long;
+    function getAverageGlyphComplexity(font) {
+        var max = Math.min(font.numGlyphs, 100);
+
+        var totalPathsCommands = 0;
+        for (var i = 0; i < max; i++) {
+            totalPathsCommands += font.getGlyph(i).path.commands.length;
+        }
+        return Math.round(totalPathsCommands / max * 10) / 10;
+    }
+
+    function readUnicodeRanges(charsetInFont, charsListOnPage) {
+        var ranges = {};
+
+        // Assign a range to each char found in the font
+        charsetInFont.forEach(function(char) {
+            
+            var currentRange = getUnicodeRangeFromChar(char);
+            var currentRangeName = currentRange.name;
+
+            if (!ranges[currentRangeName]) {
+                // Cloning the object
+                ranges[currentRangeName] = Object.assign({}, currentRange);
+            }
+
+            if (!ranges[currentRangeName].charset) {
+                ranges[currentRangeName].charset = '';
+            }
+
+            ranges[currentRangeName].charset += String.fromCharCode(char);
+        });
+
+        var range;
+        var expectedLength;
+        var actualLength;
+
+        for (var rangeName in ranges) {
+            /*jshint loopfunc: true */
+
+            range = ranges[rangeName];
+
+            // Estimate if range is used, based on the characters found in the page
+            range.numGlyphsInCommonWithPageContent = countPossiblyUsedGlyphs(range.charset, charsListOnPage);
+
+            // Calculate coverage
+            if (rangeName !== 'Others') {
+                expectedLength = range.rangeEnd - range.rangeStart + 1;
+                actualLength = range.charset.length;
+                range.coverage = Math.min(actualLength / expectedLength, 1);
+            }
+        }
+
+        return ranges;
+    }
+
+    function countPossiblyUsedGlyphs(charsetInFont, charsListOnPage) {
+        var count = 0;
+        charsListOnPage.split('').forEach(function(char) {
+            if (charsetInFont.indexOf(char) >= 0) {
+                count ++;
+            }
+        });
+        return count;
+    }
+
+    function getCharacterSetAsString(characterSet) {
+        var str = '';
+        characterSet.forEach(function(charCode) {
+            str += String.fromCharCode(charCode);
+        });
+        return str;
+    }
+
+    function getUnicodeRangeFromChar(char) {
+        return UNICODE_RANGES.find(function(range) {
+            return (char >= range.rangeStart && char <= range.rangeEnd);
+        }) || {name: 'Others'};
+    }
+
+
+    var UNICODE_RANGES = [
+        {
+            name: 'Basic Latin',
+            rangeStart: 0x0020,
+            rangeEnd: 0x007F
+        },
+        {
+            name: 'Latin-1 Supplement',
+            rangeStart: 0x00A0,
+            rangeEnd: 0x00FF
+        },
+        {
+            name: 'Latin Extended',
+            rangeStart: 0x0100,
+            rangeEnd: 0x024F
+        },
+        {
+            name: 'IPA Extensions',
+            rangeStart: 0x0250,
+            rangeEnd: 0x02AF
+        },
+        {
+            name: 'Greek and Coptic',
+            rangeStart: 0x0370,
+            rangeEnd: 0x03FF
+        },
+        {
+            name: 'Cyrillic',
+            rangeStart: 0x0400,
+            rangeEnd: 0x052F
+        },
+        {
+            name: 'Armenian',
+            rangeStart: 0x0530,
+            rangeEnd: 0x058F
+        },
+        {
+            name: 'Hebrew',
+            rangeStart: 0x0590,
+            rangeEnd: 0x05FF
+        },
+        {
+            name: 'Arabic',
+            rangeStart: 0x0600,
+            rangeEnd: 0x06FF
+        },
+        {
+            name: 'Syriac',
+            rangeStart: 0x0700,
+            rangeEnd: 0x074F
+        },
+        {
+            name: 'Thaana',
+            rangeStart: 0x0780,
+            rangeEnd: 0x07BF
+        },
+        {
+            name: 'Devanagari',
+            rangeStart: 0x0900,
+            rangeEnd: 0x097F
+        },
+        {
+            name: 'Bengali',
+            rangeStart: 0x0980,
+            rangeEnd: 0x09FF
+        },
+        {
+            name: 'Gurmukhi',
+            rangeStart: 0x0A00,
+            rangeEnd: 0x0A7F
+        },
+        {
+            name: 'Gujarati',
+            rangeStart: 0x0A80,
+            rangeEnd: 0x0AFF
+        },
+        {
+            name: 'Oriya',
+            rangeStart: 0x0B00,
+            rangeEnd: 0x0B7F
+        },
+        {
+            name: 'Tamil',
+            rangeStart: 0x0B80,
+            rangeEnd: 0x0BFF
+        },
+        {
+            name: 'Telugu',
+            rangeStart: 0x0C00,
+            rangeEnd: 0x0C7F
+        },
+        {
+            name: 'Kannada',
+            rangeStart: 0x0C80,
+            rangeEnd: 0x0CFF
+        },
+        {
+            name: 'Malayalam',
+            rangeStart: 0x0D00,
+            rangeEnd: 0x0D7F
+        },
+        {
+            name: 'Sinhala',
+            rangeStart: 0x0D80,
+            rangeEnd: 0x0DFF
+        },
+        {
+            name: 'Thai',
+            rangeStart: 0x0E00,
+            rangeEnd: 0x0E7F
+        },
+        {
+            name: 'Lao',
+            rangeStart: 0x0E80,
+            rangeEnd: 0x0EFF
+        },
+        {
+            name: 'Tibetan',
+            rangeStart: 0x0F00,
+            rangeEnd: 0x0FFF
+        },
+        {
+            name: 'Myanmar',
+            rangeStart: 0x1000,
+            rangeEnd: 0x109F
+        },
+        {
+            name: 'Georgian',
+            rangeStart: 0x10A0,
+            rangeEnd: 0x10FF
+        },
+        {
+            name: 'Hangul Jamo',
+            rangeStart: 0x1100,
+            rangeEnd: 0x11FF
+        },
+        {
+            name: 'Ethiopic',
+            rangeStart: 0x1200,
+            rangeEnd: 0x137F
+        },
+        {
+            name: 'Cherokee',
+            rangeStart: 0x13A0,
+            rangeEnd: 0x13FF
+        },
+        {
+            name: 'Unified Canadian Aboriginal Syllabics',
+            rangeStart: 0x1400,
+            rangeEnd: 0x167F
+        },
+        {
+            name: 'Ogham',
+            rangeStart: 0x1680,
+            rangeEnd: 0x169F
+        },
+        {
+            name: 'Runic',
+            rangeStart: 0x16A0,
+            rangeEnd: 0x16FF
+        },
+        {
+            name: 'Tagalog',
+            rangeStart: 0x1700,
+            rangeEnd: 0x171F
+        },
+        {
+            name: 'Hanunoo',
+            rangeStart: 0x1720,
+            rangeEnd: 0x173F
+        },
+        {
+            name: 'Buhid',
+            rangeStart: 0x1740,
+            rangeEnd: 0x175F
+        },
+        {
+            name: 'Tagbanwa',
+            rangeStart: 0x1760,
+            rangeEnd: 0x177F
+        },
+        {
+            name: 'Khmer',
+            rangeStart: 0x1780,
+            rangeEnd: 0x17FF
+        },
+        {
+            name: 'Mongolian',
+            rangeStart: 0x1800,
+            rangeEnd: 0x18AF
+        },
+        {
+            name: 'Limbu',
+            rangeStart: 0x1900,
+            rangeEnd: 0x194F
+        },
+        {
+            name: 'Tai Le',
+            rangeStart: 0x1950,
+            rangeEnd: 0x197F
+        },
+        {
+            name: 'Hiragana',
+            rangeStart: 0x3040,
+            rangeEnd: 0x309F
+        },
+        {
+            name: 'Katakana',
+            rangeStart: 0x30A0,
+            rangeEnd: 0x30FF
+        },
+        {
+            name: 'Bopomofo',
+            rangeStart: 0x3100,
+            rangeEnd: 0x312F
+        }
+    ];
+
+    return {
+        analyzeFont: analyzeFont,
+        getMetricsFromFont: getMetricsFromFont,
+        readUnicodeRanges: readUnicodeRanges,
+        getAverageGlyphComplexity: getAverageGlyphComplexity,
+        countPossiblyUsedGlyphs: countPossiblyUsedGlyphs,
+        getCharacterSetAsString: getCharacterSetAsString,
+        getUnicodeRangeFromChar: getUnicodeRangeFromChar
+    };
+};
+
+module.exports = new FontAnalyzer();

lib/tools/redownload/gzipCompressor.js

@@ -0,0 +1,102 @@
+var debug = require('debug')('ylt:gzipCompressor');
+
+var Q       = require('q');
+var zlib    = require('zlib');
+
+var GzipCompressor = function() {
+
+    function compressFile(entry) {
+        debug('Entering compressFile');
+        return gzipUncompressedFile(entry)
+
+        .then(gzipOptimizedFile);
+    }
+
+    // Gzip a file if it was not already gziped
+    function gzipUncompressedFile(entry) {
+        var deferred = Q.defer();
+
+        if (entryTypeCanBeGzipped(entry) && entry.weightCheck && !entry.weightCheck.isCompressed && entry.weightCheck.bodyBuffer) {
+            debug('Compression missing, trying to gzip file %s', entry.url);
+
+            var uncompressedSize = entry.weightCheck.uncompressedSize;
+
+            zlib.gzip(entry.weightCheck.bodyBuffer, function(err, buffer) {
+                if (err) {
+                    debug('Could not compress uncompressed file with gzip');
+                    debug(err);
+
+                    deferred.reject(err);
+                } else {
+                    var compressedSize = buffer.length;
+
+                    if (gainIsEnough(uncompressedSize, compressedSize)) {
+                        debug('File correctly gziped, was %d and is now %d bytes', uncompressedSize, compressedSize);
+
+                        entry.weightCheck.afterCompression = compressedSize;
+                    } else {
+                        debug('Gzip gain is not enough, was %d and is now %d bytes', uncompressedSize, compressedSize);
+                    }
+
+                    deferred.resolve(entry);
+                }
+            });
+        } else {
+            debug('Compression not needed');
+            deferred.resolve(entry);
+        }
+
+        return deferred.promise;
+    }
+
+    // Gzip a file after minification or optimization if this step was successful
+    function gzipOptimizedFile(entry) {
+        var deferred = Q.defer();
+
+        if (entryTypeCanBeGzipped(entry) && entry.weightCheck && entry.weightCheck.isOptimized === false) {
+            debug('Trying to gzip file after minification: %s', entry.url);
+
+            var uncompressedSize = entry.weightCheck.optimized;
+
+            zlib.gzip(new Buffer(entry.weightCheck.bodyAfterOptimization, 'utf8'), function(err, buffer) {
+                if (err) {
+                    debug('Could not compress minified file with gzip');
+                    debug(err);
+
+                    deferred.reject(err);
+                } else {
+                    var compressedSize = buffer.length;
+
+                    debug('Correctly gziped the minified file, was %d and is now %d bytes', uncompressedSize, compressedSize);
+                    entry.weightCheck.afterOptimizationAndCompression = compressedSize;
+
+                    deferred.resolve(entry);
+                }
+            });
+        } else {
+            debug('Compressing optimized file not needed');
+            deferred.resolve(entry);
+        }
+
+        return deferred.promise;
+    }
+
+    // The gain is estimated of enough value if it's over 1KB or over 20%,
+    // but it's ignored if is below 100 bytes
+    function gainIsEnough(oldWeight, newWeight) {
+        var gain = oldWeight - newWeight;
+        var ratio = gain / oldWeight;
+        return (gain > 2048 || (ratio > 0.2 && gain > 100));
+    }
+
+    function entryTypeCanBeGzipped(entry) {
+        return entry.isJS || entry.isCSS || entry.isHTML || entry.isJSON || entry.isSVG || entry.isTTF || entry.isXML || entry.isFavicon;
+    }
+
+    return {
+        compressFile: compressFile,
+        entryTypeCanBeGzipped: entryTypeCanBeGzipped
+    };
+};
+
+module.exports = new GzipCompressor();

lib/tools/redownload/imageDimensions.js

@@ -0,0 +1,51 @@
+var debug               = require('debug')('ylt:imageDimensions');
+var Q                   = require('q');
+var sizeOf              = require('image-size');
+
+var ImageDimensions = function() {
+
+    function getDimensions(entry) {
+        var deferred = Q.defer();
+
+        if (!entry.weightCheck || !entry.weightCheck.bodyBuffer) {
+            // No valid file available
+            deferred.resolve(entry);
+            return deferred.promise;
+        }
+
+        var fileSize = entry.weightCheck.uncompressedSize;
+
+        if (isJPEG(entry) || isPNG(entry)) {
+            try {
+                var dimensions = sizeOf(entry.weightCheck.bodyBuffer);
+                debug('Image dimensions of %s: %sx%s', entry.url, dimensions.width, dimensions.height);
+
+                entry.imageDimensions = {
+                    width: dimensions.width,
+                    height: dimensions.height
+                };
+            } catch(err) {
+                debug('Error while checking image dimensions:');
+                debug(err);
+            }
+        }
+        
+        deferred.resolve(entry);
+
+        return deferred.promise;
+    }
+
+    function isJPEG(entry) {
+        return entry.isImage && entry.contentType === 'image/jpeg';
+    }
+
+    function isPNG(entry) {
+        return entry.isImage && entry.contentType === 'image/png';
+    }
+
+    return {
+        getDimensions: getDimensions
+    };
+};
+
+module.exports = new ImageDimensions();

lib/tools/redownload/imageOptimizer.js

@@ -0,0 +1,245 @@
+var debug               = require('debug')('ylt:imageOptimizer');
+var Q                   = require('q');
+var imagemin            = require('imagemin');
+var imageminJpegtran    = require('imagemin-jpegtran');
+var imageminJpegoptim   = require('imagemin-jpegoptim');
+var imageminOptipng     = require('imagemin-optipng');
+var imageminSvgo        = require('imagemin-svgo');
+
+var ImageOptimizer = function() {
+
+    var MAX_JPEG_QUALITY = 85;
+    var OPTIPNG_COMPRESSION_LEVEL = 1;
+
+    function optimizeImage(entry) {
+        var deferred = Q.defer();
+
+        if (!entry.weightCheck || !entry.weightCheck.bodyBuffer) {
+            // No valid file available
+            deferred.resolve(entry);
+            return deferred.promise;
+        }
+
+        var fileSize = entry.weightCheck.uncompressedSize;
+        debug('Let\'s try to optimize %s', entry.url);
+        debug('Current file size is %d', fileSize);
+
+        if (isJPEG(entry)) {
+            debug('File is a JPEG');
+
+            // Starting softly with a lossless compression
+            return compressJpegLosslessly(entry.weightCheck.bodyBuffer)
+
+            .then(function(newFile) {
+                if (!newFile) {
+                    debug('Optimization didn\'t work');
+                    return entry;
+                }
+
+                var newFileSize = newFile.length;
+
+                debug('JPEG lossless compression complete for %s', entry.url);
+                
+                if (gainIsEnough(fileSize, newFileSize)) {
+                    entry.weightCheck.lossless = entry.weightCheck.optimized = newFileSize;
+                    entry.weightCheck.isOptimized = false;
+                    debug('Filesize is %d bytes smaller (-%d%)', fileSize - newFileSize, Math.round((fileSize - newFileSize) * 100 / fileSize));
+                }
+
+
+                // Now let's compress lossy to MAX_JPEG_QUALITY
+                return compressJpegLossly(entry.weightCheck.bodyBuffer);
+            })
+            
+            .then(function(newFile) {
+                if (!newFile) {
+                    debug('Optimization didn\'t work');
+                    return entry;
+                }
+
+                var newFileSize = newFile.length;
+
+                debug('JPEG lossy compression complete for %s', entry.url);
+
+                if (entry.weightCheck.lossless && entry.weightCheck.lossless < newFileSize) {
+                    debug('Lossy compression is not as good as lossless compression. Skipping the lossy.');
+                } else if (gainIsEnough(fileSize, newFileSize)) {
+                    
+                    if (entry.weightCheck.isOptimized !== false || newFileSize < entry.weightCheck.lossless) {
+                        entry.weightCheck.optimized = newFileSize;
+                    }
+
+                    entry.weightCheck.lossy = newFileSize;
+                    entry.weightCheck.isOptimized = false;
+                    debug('Filesize is %d bytes smaller (-%d%)', fileSize - newFileSize, Math.round((fileSize - newFileSize) * 100 / fileSize));
+                }
+
+                return entry;
+            })
+
+            .fail(function() {
+                return entry;
+            });
+
+        } else if (isPNG(entry)) {
+
+            debug('File is a PNG');
+
+            // Starting softly with a lossless compression
+            return compressPngLosslessly(entry.weightCheck.bodyBuffer)
+
+            .then(function(newFile) {
+                if (!newFile) {
+                    debug('Optimization didn\'t work');
+                    return entry;
+                }
+                
+                var newFileSize = newFile.length;
+
+                debug('PNG lossless compression complete for %s', entry.url);
+                
+                debug('Old file size: %d', fileSize);
+                debug('New file size: %d', newFileSize);
+                debug('newgainIsEnough: %s', gainIsEnough(fileSize, newFileSize) ? 'true':'false');
+
+                if (gainIsEnough(fileSize, newFileSize)) {
+                    entry.weightCheck.lossless = entry.weightCheck.optimized = newFileSize;
+                    entry.weightCheck.isOptimized = false;
+                    debug('Filesize is %d bytes smaller (-%d%)', fileSize - newFileSize, Math.round((fileSize - newFileSize) * 100 / fileSize));
+                }
+
+                return entry;
+            })
+
+            .fail(function() {
+                return entry;
+            });
+
+        } else if (isSVG(entry)) {
+
+            debug('File is an SVG');
+
+            // Starting softly with a lossless compression
+            return compressSvgLosslessly(entry.weightCheck.bodyBuffer)
+
+            .then(function(newFile) {
+                if (!newFile) {
+                    debug('Optimization didn\'t work');
+                    return entry;
+                }
+
+                var newFileSize = newFile.length;
+
+                debug('SVG lossless compression complete for %s', entry.url);
+                
+                if (gainIsEnough(fileSize, newFileSize)) {
+                    entry.weightCheck.bodyAfterOptimization = newFile.toString();
+                    entry.weightCheck.lossless = entry.weightCheck.optimized = newFileSize;
+                    entry.weightCheck.isOptimized = false;
+                    debug('Filesize is %d bytes smaller (-%d%)', fileSize - newFileSize, Math.round((fileSize - newFileSize) * 100 / fileSize));
+                }
+
+                return entry;
+            })
+
+            .fail(function() {
+                return entry;
+            });
+
+        } else {
+            debug('File type %s is not an optimizable image', entry.contentType);
+            deferred.resolve(entry);
+        }
+
+        return deferred.promise;
+    }
+
+    // The gain is estimated of enough value if it's over 2KB or over 20%,
+    // but it's ignored if is below 100 bytes
+    function gainIsEnough(oldWeight, newWeight) {
+        var gain = oldWeight - newWeight;
+        var ratio = gain / oldWeight;
+        return (gain > 2048 || (ratio > 0.2 && gain > 100));
+    }
+
+    function isJPEG(entry) {
+        return entry.isImage && entry.contentType === 'image/jpeg';
+    }
+
+    function isPNG(entry) {
+        return entry.isImage && entry.contentType === 'image/png';
+    }
+
+    function isSVG(entry) {
+        return entry.isImage && entry.isSVG;
+    }
+
+    function compressJpegLosslessly(imageBody) {
+        return imageminLauncher(imageBody, 'jpeg', false);
+    }
+
+    function compressJpegLossly(imageBody) {
+        return imageminLauncher(imageBody, 'jpeg', true);
+    }
+
+    function compressPngLosslessly(imageBody) {
+        return imageminLauncher(imageBody, 'png', false);
+    }
+
+    function compressSvgLosslessly(imageBody) {
+        return imageminLauncher(imageBody, 'svg', false);
+    }
+
+    function imageminLauncher(imageBody, type, lossy) {
+        var deferred = Q.defer();
+        var startTime = Date.now();
+
+        debug('Starting %s %s optimization', type, lossy ? 'lossy' : 'lossless');
+
+        var engine;
+        if (type === 'jpeg' && !lossy) {
+            engine = imageminJpegtran({progressive: true});
+        } else if (type === 'jpeg' && lossy) {
+            engine = imageminJpegoptim({progressive: true, max: MAX_JPEG_QUALITY});
+        } else if (type === 'png' && !lossy) {
+            engine = imageminOptipng({optimizationLevel: OPTIPNG_COMPRESSION_LEVEL});
+        } else if (type === 'svg' && !lossy) {
+            engine = imageminSvgo({ plugins: [ { removeUselessDefs: false } ] });
+        } else {
+            deferred.reject('No optimization engine found for imagemin');
+        }
+
+
+        imagemin.buffer(imageBody, {use: engine})
+
+        .then(function(file) {
+            var endTime = Date.now();
+            debug('Optimization for %s took %d ms', type, endTime - startTime);
+            deferred.resolve(file);
+        })
+
+        .catch(function(err) {
+            debug('Optimisation failed:');
+            debug(err);
+            deferred.resolve();
+        });
+
+        return deferred.promise;
+    }
+
+    function entryTypeCanBeOptimized(entry) {
+        return isJPEG(entry) || isPNG(entry) || isSVG(entry);
+    }
+
+    return {
+        optimizeImage: optimizeImage,
+        compressJpegLosslessly: compressJpegLosslessly,
+        compressJpegLossly: compressJpegLossly,
+        compressPngLosslessly: compressPngLosslessly,
+        compressSvgLosslessly: compressSvgLosslessly,
+        gainIsEnough: gainIsEnough,
+        entryTypeCanBeOptimized: entryTypeCanBeOptimized
+    };
+};
+
+module.exports = new ImageOptimizer();

lib/tools/redownload/redownload.js

@@ -0,0 +1,830 @@
+/*
+ * Redownloading every files after Phantomas has finished
+ * Checks weight and every kind of compression
+ *
+ */
+
+/*jshint -W069 */
+
+var debug               = require('debug')('ylt:redownload');
+var Q                   = require('q');
+var http                = require('http');
+var zlib                = require('zlib');
+var async               = require('async');
+var request             = require('request');
+var md5                 = require('md5');
+
+var imageOptimizer      = require('./imageOptimizer');
+var fileMinifier        = require('./fileMinifier');
+var gzipCompressor      = require('./gzipCompressor');
+var contentTypeChecker  = require('./contentTypeChecker');
+var fontAnalyzer        = require('./fontAnalyzer');
+var imageDimensions     = require('./imageDimensions');
+
+
+var Redownload = function() {
+
+    var MAX_PARALLEL_DOWNLOADS = 10;
+    var REQUEST_TIMEOUT = 15000; // 15 seconds
+
+
+    // This function will re-download every asset and check if it could be optimized
+    function recheckAllFiles(data) {
+        var startTime = Date.now();
+        debug('Redownload started');
+        var deferred = Q.defer();
+
+        var requestsList = JSON.parse(data.toolsResults.phantomas.offenders.requestsList);
+        delete data.toolsResults.phantomas.metrics.requestsList;
+        delete data.toolsResults.phantomas.offenders.requestsList;
+
+        var httpAuth = null;
+        if (data.params && data.params.options && data.params.options.authUser && data.params.options.authPass) {
+            httpAuth = {
+                username: data.params.options.authUser,
+                password: data.params.options.authPass
+            };
+        }
+
+        var proxy = null;
+        if (data.params && data.params.options && data.params.options.proxy) {
+            proxy = data.params.options.proxy;
+            if (proxy.indexOf('http:') === -1) {
+                proxy = 'http://' + proxy;
+            }
+        }
+
+        // Prevent a bug with the font analyzer on empty pages
+        var differentCharacters = '';
+        if (data.toolsResults.phantomas.offenders.differentCharacters && data.toolsResults.phantomas.offenders.differentCharacters.length > 0) {
+            differentCharacters = data.toolsResults.phantomas.offenders.differentCharacters[0];
+        }
+
+        // Transform every request into a download function with a callback when done
+        var redownloadList = requestsList.map(function(entry) {
+            return function(callback) {
+                
+                redownloadEntry(entry, httpAuth, proxy)
+
+                .then(contentTypeChecker.checkContentType)
+
+                .then(imageOptimizer.optimizeImage)
+
+                .then(imageDimensions.getDimensions)
+
+                .then(fileMinifier.minifyFile)
+
+                .then(gzipCompressor.compressFile)
+
+                .then(function(entry) {
+                    return fontAnalyzer.analyzeFont(entry, differentCharacters);
+                })
+
+                .then(function(newEntry) {
+                    debug('File %s - Redownloaded, optimized, minified, compressed, analyzed: done', entry.url);
+                    callback(null, newEntry);
+                })
+
+                .fail(function(err) {
+                    callback(err);
+                });
+            };
+        });
+
+        // Lanch all redownload functions and wait for completion
+        async.parallelLimit(redownloadList, MAX_PARALLEL_DOWNLOADS, function(err, results) {
+            
+            if (err) {
+                debug(err);
+                deferred.reject(err);
+            } else {
+
+                debug('All files checked');
+                endTime = Date.now();
+                debug('Redownload took %d ms', endTime - startTime);
+                
+                var metrics = {};
+                var offenders = {};
+
+                // Remove unused fonts that a normal browser would not download (fix #224)
+                results = results.filter(function(result) {
+                    if (result && result.fontMetrics) {
+                        return result.fontMetrics.isUsed !== false;
+                    }
+                    return true;
+                });
+
+                // Count requests
+                offenders.totalRequests = listRequestsByType(results);
+                metrics.totalRequests = offenders.totalRequests.total;
+
+
+                // Remove unwanted responses (redownload failed, about:blank)
+                results = results.filter(function(result) {
+                    return (result !== null && result.weightCheck && result.url.indexOf('about:blank') !== 0);
+                });
+
+
+                // Wrong contentType
+                offenders.incorrectContentTypes = listIncorrectContentTypes(results);
+                metrics.incorrectContentTypes = offenders.incorrectContentTypes.length;
+
+                // Total weight
+                offenders.totalWeight = listRequestWeight(results);
+                metrics.totalWeight = offenders.totalWeight.totalWeight;
+
+                // Empty files
+                offenders.emptyRequests = listEmptyRequests(results);
+                metrics.emptyRequests = offenders.emptyRequests.length;
+
+
+                // Now remove unwanted responses (redirections and empty files)
+                results = results.filter(function(result) {
+                    return ((result.status < 300 || result.status >= 400) && result.weightCheck.bodySize > 0);
+                });
+
+
+                // Image compression
+                offenders.imageOptimization = listImagesNotOptimized(results);
+                metrics.imageOptimization = offenders.imageOptimization.totalGain;
+
+                // Image width
+                var isMobile = data.params.options.device === 'phone';
+                offenders.imagesTooLarge = listImagesTooLarge(results, isMobile);
+                metrics.imagesTooLarge = offenders.imagesTooLarge.length;
+
+                // File minification
+                offenders.fileMinification = listFilesNotMinified(results);
+                metrics.fileMinification = offenders.fileMinification.totalGain;
+
+                // Gzip compression
+                offenders.gzipCompression = listFilesNotGzipped(results);
+                metrics.gzipCompression = offenders.gzipCompression.totalGain;
+
+                // Small requests
+                offenders.smallRequests = listSmallRequests(results);
+                metrics.smallRequests = offenders.smallRequests.total;
+
+                // Detect identical files
+                offenders.identicalFiles = listIdenticalFiles(results);
+                metrics.identicalFiles = offenders.identicalFiles.avoidableRequests;
+
+                // Fonts count
+                offenders.fontsCount = listFonts(results);
+                metrics.fontsCount = offenders.fontsCount.count;
+
+                // Heavy fonts
+                offenders.heavyFonts = listHeavyFonts(results);
+                metrics.heavyFonts = offenders.heavyFonts.totalGain;
+
+                // Unused Unicode ranges
+                offenders.unusedUnicodeRanges = listUnusedUnicodeRanges(results);
+                metrics.unusedUnicodeRanges = offenders.unusedUnicodeRanges.count;
+
+
+                data.toolsResults.redownload = {
+                    metrics: metrics,
+                    offenders: offenders
+                };
+
+                deferred.resolve(data);
+            }
+        });
+
+        return deferred.promise;
+    }
+
+    function listIncorrectContentTypes(requests) {
+        var results = [];
+        
+        requests.forEach(function(req) {
+            if (req.oldContentType || req.oldContentType === null) {
+                results.push({
+                    url: req.url,
+                    current: req.oldContentType,
+                    correct: req.contentType
+                });
+            }
+        });
+
+        return results;
+    }
+
+    function listEmptyRequests(requests) {
+        var results = [];
+        
+        requests.forEach(function(req) {
+            var weight = req.weightCheck.bodySize || req.contentLength;
+
+            if (weight === 0 && req.method === 'GET' && req.status === 200) {
+                results.push(req.url);
+            }
+        });
+
+        return results;
+    }
+
+    function listRequestWeight(requests) {
+        var results = {
+            totalWeight: 0,
+            byType: {
+                html: {
+                    totalWeight: 0,
+                    requests: []
+                },
+                css: {
+                    totalWeight: 0,
+                    requests: []
+                },
+                js: {
+                    totalWeight: 0,
+                    requests: []
+                },
+                json: {
+                    totalWeight: 0,
+                    requests: []
+                },
+                image: {
+                    totalWeight: 0,
+                    requests: []
+                },
+                video: {
+                    totalWeight: 0,
+                    requests: []
+                },
+                webfont: {
+                    totalWeight: 0,
+                    requests: []
+                },
+                other: {
+                    totalWeight: 0,
+                    requests: []
+                }
+            }
+        };
+
+        requests.forEach(function(req) {
+            var weight = ((typeof req.weightCheck.bodySize === 'number') ? req.weightCheck.bodySize + req.weightCheck.headersSize : req.contentLength) || 0;
+            var type = req.type || 'other';
+            type = (results.byType[type]) ? type : 'other';
+
+            results.totalWeight += weight;
+            results.byType[type].totalWeight += weight;
+
+            results.byType[type].requests.push({
+                url: req.url,
+                weight: weight
+            });
+        });
+
+        return results;
+    }
+
+
+    function listImagesNotOptimized(requests) {
+        var results = {
+            totalGain: 0,
+            images: []
+        };
+
+        requests.forEach(function(req) {
+            if (req.weightCheck.bodySize > 0 && imageOptimizer.entryTypeCanBeOptimized(req) && req.weightCheck.isOptimized === false) {
+                var before = req.weightCheck.afterCompression || req.weightCheck.bodySize;
+                var after = req.weightCheck.afterOptimizationAndCompression || req.weightCheck.optimized;
+                var gain = before - after;
+
+                if (gain > 200) {
+                    results.totalGain += gain;
+
+                    results.images.push({
+                        url: req.url,
+                        original: req.weightCheck.bodySize,
+                        isCompressed: req.weightCheck.isCompressed,
+                        afterCompression: req.weightCheck.afterCompression,
+                        afterOptimizationAndCompression: req.weightCheck.afterOptimizationAndCompression,
+                        lossless: req.weightCheck.lossless,
+                        lossy: req.weightCheck.lossy,
+                        gain: gain
+                    });
+                }
+            }
+        });
+
+        return results;
+    }
+
+    function listImagesTooLarge(requests, isMobile) {
+        var results = [];
+
+        requests.forEach(function(req) {
+            if (req.weightCheck.bodySize > 0 && 
+                req.imageDimensions &&
+                ((isMobile && req.imageDimensions.width > 800) || req.imageDimensions.width > 1500)) {
+
+                results.push({
+                    url: req.url,
+                    weight: req.weightCheck.bodySize,
+                    width: req.imageDimensions.width,
+                    height: req.imageDimensions.height
+                });
+            }
+        });
+
+        return results;
+    }
+
+
+    function listFilesNotMinified(requests) {
+        var results = {
+            totalGain: 0,
+            files: []
+        };
+
+        requests.forEach(function(req) {
+            if (req.weightCheck.bodySize > 0 && fileMinifier.entryTypeCanBeMinified(req) && req.weightCheck.isOptimized === false) {
+                var before = req.weightCheck.afterCompression || req.weightCheck.bodySize;
+                var after = req.weightCheck.afterOptimizationAndCompression || req.weightCheck.optimized;
+                var gain = before - after;
+
+                if (gain > 200) {
+                    results.totalGain += gain;
+
+                    results.files.push({
+                        url: req.url,
+                        original: req.weightCheck.bodySize,
+                        isCompressed: req.weightCheck.isCompressed,
+                        afterCompression: req.weightCheck.afterCompression,
+                        afterOptimizationAndCompression: req.weightCheck.afterOptimizationAndCompression,
+                        optimized: req.weightCheck.optimized,
+                        gain: gain
+                    });
+                }
+            }
+        });
+
+        return results;
+    }
+
+    function listFilesNotGzipped(requests) {
+        var results = {
+            totalGain: 0,
+            files: []
+        };
+
+        requests.forEach(function(req) {
+            if (req.weightCheck.uncompressedSize && req.weightCheck.isCompressed === false && req.weightCheck.afterCompression) {
+                var gain = req.weightCheck.uncompressedSize - req.weightCheck.afterCompression;
+
+                results.totalGain += gain;
+
+                results.files.push({
+                    url: req.url,
+                    original: req.weightCheck.uncompressedSize,
+                    gzipped: req.weightCheck.afterCompression,
+                    gain: gain
+                });
+            }
+        });
+
+        return results;
+    }
+
+    function listRequestsByType(requests) {
+        var results = {
+            total: 0,
+            byType: {
+                html: [],
+                css: [],
+                js: [],
+                json: [],
+                image: [],
+                video: [],
+                webfont: [],
+                other: []
+            }
+        };
+
+        requests.forEach(function(req) {
+            if (req.url !== 'about:blank') {
+                var type = req.type || 'other';
+                type = (results.byType[type]) ? type : 'other';
+                
+                results.byType[type].push(req.url);
+                results.total ++;
+            }
+        });
+
+        return results;
+    }
+
+    function listSmallRequests(requests) {
+        var results = {
+            total: 0,
+            byType: {
+                css: [],
+                js: [],
+                image: []
+            }
+        };
+
+        requests.forEach(function(req) {
+            if (req.weightCheck.bodySize > 0 && req.weightCheck.bodySize < 2048) {
+                if (req.isCSS || req.isJS || req.isImage) {
+                    results.byType[req.type].push({
+                        url: req.url,
+                        size: req.weightCheck.bodySize
+                    });
+                    results.total ++;
+                }
+            }
+        });
+
+        return results;
+    }
+
+    function listIdenticalFiles(requests) {
+        var hashes = {};
+        var list = [];
+        var avoidableRequestsCount = 0;
+
+        requests.forEach(function(req) {
+            var requestHash = md5(req.weightCheck.bodyBuffer);
+            
+            // Try to exclude tracking pixels
+            if (req.weightCheck.bodySize < 80 && req.type === 'image') {
+                return;
+            }
+
+            if (!hashes[requestHash]) {
+                hashes[requestHash] = {
+                    weight: req.weightCheck.bodySize,
+                    urls: []
+                };
+            }
+            
+            if (hashes[requestHash].urls.indexOf(req.url) === -1) {
+                hashes[requestHash].urls.push(req.url);
+            }
+        });
+
+        for (var hash in hashes) {
+            if (hashes[hash].urls.length > 1) {
+                list.push(hashes[hash]);
+                avoidableRequestsCount += hashes[hash].urls.length - 1;
+            }
+        }
+
+        return {
+            avoidableRequests: avoidableRequestsCount,
+            count: list.length,
+            list: list
+        };
+    }
+
+    function listFonts(requests) {
+        var list = [];
+
+        requests.forEach(function(req) {
+            if (req.isWebFont) {
+                list.push({
+                    url: req.url,
+                    size: req.weightCheck.bodySize
+                });
+            }
+        });
+
+        return {
+            count: list.length,
+            list: list
+        };
+    }
+
+    function listHeavyFonts(requests) {
+        var list = [];
+        var totalGain = 0;
+        var heavyFontsCount = 0;
+        var MAX_FONT_WEIGHT = 40 * 1024;
+
+        requests.forEach(function(req) {
+            if (req.isWebFont && req.fontMetrics) {
+                list.push({
+                    url: req.url,
+                    weight: req.weightCheck.bodySize,
+                    numGlyphs: req.fontMetrics.numGlyphs,
+                    averageGlyphComplexity: req.fontMetrics.averageGlyphComplexity
+                });
+                if (req.weightCheck.bodySize > MAX_FONT_WEIGHT) {
+                    totalGain += req.weightCheck.bodySize - MAX_FONT_WEIGHT;
+                    heavyFontsCount ++;
+                }
+            }
+        });
+
+        return {
+            count: heavyFontsCount,
+            fonts: list,
+            totalGain: totalGain
+        };
+    }
+
+    function listUnusedUnicodeRanges(requests) {
+        var list = [];
+        var unusedUnicodeRanges = 0;
+
+        requests.forEach(function(req) {
+            if (req.isWebFont && req.fontMetrics && req.fontMetrics.unicodeRanges) {
+                var ranges = [];
+                var others = null;
+                var rangeNames = Object.keys(req.fontMetrics.unicodeRanges);
+                var unicodePointsCount = 0;
+                var unusedRangesInFont = 0;
+                
+                rangeNames.forEach(function(rangeName) {
+                    var range = req.fontMetrics.unicodeRanges[rangeName];
+
+                    // Exclude "Others"
+                    if (rangeName === 'Others') {
+                        if (range.numGlyphsInCommonWithPageContent === 0 && range.charset.length > 50) {
+                            range.underused = true;
+                            unusedRangesInFont ++;
+                        }
+
+                        unicodePointsCount += range.charset.length;
+                        others = range;
+                    } else if (range.charset.length > 0) {
+                        // Now lets detect if the current Unicode range is unused.
+                        // Reminder: range.coverage = glyphs declared in this range, divided by the range size
+                        if (range.coverage > 0.25 && range.numGlyphsInCommonWithPageContent === 0) {
+                            range.underused = true;
+                            unusedRangesInFont ++;
+                        }
+
+                        unicodePointsCount += range.charset.length;
+                        ranges.push(range);
+                    }
+                });
+
+
+                // Detect if it's a icons font : if more than 90% of the icons are
+                // in the "Others", it looks like one.
+                if (others && others.charset.length / req.fontMetrics.numGlyphs > 0.9) {
+                    
+                    list.push({
+                        url: req.url,
+                        weight: req.weightCheck.bodySize,
+                        isIconFont: true,
+                        glyphs: req.fontMetrics.numGlyphs,
+                        numGlyphsInCommonWithPageContent: req.fontMetrics.numGlyphsInCommonWithPageContent
+                    });
+
+                    // And if less than 5% of the icons are used, let's report it as underused
+                    if (others && others.numGlyphsInCommonWithPageContent / others.charset.length <= 0.05) {
+                        unusedRangesInFont = 1;
+                    }
+
+                // Not an icons font
+                } else {
+                    if (others) {
+                        // Insert back "Others" at the end of the list
+                        ranges.push(others);
+                    }
+
+                    var ligaturesOrHiddenChars = req.fontMetrics.numGlyphs - unicodePointsCount;
+                    if (ligaturesOrHiddenChars > 25) {
+                        unusedUnicodeRanges ++;
+                    }
+
+                    list.push({
+                        url: req.url,
+                        weight: req.weightCheck.bodySize,
+                        isIconFont: false,
+                        unicodeRanges: ranges,
+                        ligaturesOrHiddenChars: ligaturesOrHiddenChars 
+                    });
+                }
+
+                unusedUnicodeRanges += unusedRangesInFont;
+            }
+        });
+
+        return {
+            count: unusedUnicodeRanges,
+            fonts: list
+        };
+    }
+
+
+    function redownloadEntry(entry, httpAuth, proxy) {
+        var deferred = Q.defer();
+        
+        function downloadError(message) {
+            debug('Could not download %s Error: %s', entry.url, message);
+            entry.weightCheck = {
+                message: message
+            };
+            deferred.resolve(entry);
+        }
+
+        // Not downloaded again but will be counted in totalWeight
+        function notDownloadableFile(message) {
+            entry.weightCheck = {
+                message: message
+            };
+            deferred.resolve(entry);
+        }
+
+        // Not counted in totalWeight
+        function unwantedFile(message) {
+            debug(message);
+            deferred.resolve(entry);
+        }
+
+        if (entry.method !== 'GET') {
+            notDownloadableFile('only downloading GET');
+            return deferred.promise;
+        }
+
+        if (entry.status !== 200) {
+            unwantedFile('only downloading requests with status code 200');
+            return deferred.promise;
+        }
+
+        if (entry.url === 'about:blank') {
+            unwantedFile('not downloading about:blank');
+            return deferred.promise;
+        }
+
+
+        debug('Downloading %s', entry.url);
+
+        // Always add a gzip header before sending, in case the server listens to it
+        var reqHeaders = entry.requestHeaders;
+        reqHeaders['Accept-Encoding'] = 'gzip, deflate';
+        reqHeaders['Connection'] = 'keep-alive';
+
+        var requestOptions = {
+            method: entry.method,
+            url: entry.url,
+            headers: reqHeaders,
+            timeout: REQUEST_TIMEOUT,
+            proxy: proxy
+        };
+
+        // Basic auth
+        if (httpAuth) {
+            requestOptions.auth = {
+                user: httpAuth.username,
+                pass: httpAuth.password,
+                sendImmediately: false // Tries a first time without auth, wait for a 401 error before resending
+            };
+        }
+
+        download(requestOptions, entry.contentType, function(error, result) {
+            if (error) {
+                if (error.code === 'ETIMEDOUT') {
+                    downloadError('timeout after ' + REQUEST_TIMEOUT + 'ms');
+                } else {
+                    downloadError('error while downloading: ' + error.code);
+                }
+                return;
+            }
+                
+            debug('%s downloaded correctly', entry.url);
+
+            entry.weightCheck = result;
+            deferred.resolve(entry);
+        });
+
+        return deferred.promise;
+    }
+
+    // Inspired by https://github.com/cvan/fastHAR-api/blob/10cec585/app.js
+    function download(requestOptions, contentType, callback) {
+
+        var statusCode;
+
+        try {
+
+            request(requestOptions)
+
+            .on('response', function(res) {
+                
+                // Raw headers were added in NodeJS v0.12
+                // (https://github.com/joyent/node/issues/4844), but let's
+                // reconstruct them for backwards compatibility.
+                var rawHeaders = ('HTTP/' + res.httpVersion + ' ' + res.statusCode +
+                                  ' ' + http.STATUS_CODES[res.statusCode] + '\r\n');
+                Object.keys(res.headers).forEach(function(headerKey) {
+                    rawHeaders += headerKey + ': ' + res.headers[headerKey] + '\r\n';
+                });
+                rawHeaders += '\r\n';
+
+                var uncompressedSize = 0;  // size after uncompression
+                var bodySize = 0;  // bytes size over the wire
+                var bodyChunks = [];  // an array of buffers
+                var isCompressed = false;
+
+                function tally() {
+
+                    if (statusCode !== 200) {
+                        callback({code: statusCode});
+                        return;
+                    }
+
+                    var body = Buffer.concat(bodyChunks);
+
+                    var result = {
+                        bodyBuffer: body,
+                        headersSize: Buffer.byteLength(rawHeaders, 'utf8'),
+                        bodySize: bodySize,
+                        isCompressed: isCompressed,
+                        uncompressedSize: uncompressedSize
+                    };
+
+                    callback(null, result);
+                }
+
+                switch (res.headers['content-encoding']) {
+                    case 'gzip':
+
+                        var gzip = zlib.createGunzip();
+
+                        gzip.on('data', function (data) {
+
+                            bodyChunks.push(data);
+                            uncompressedSize += data.length;
+                        }).on('end', function () {
+                            isCompressed = true;
+                            tally();
+                        }).on('error', function(err) {
+                            debug('Error while decoding %s', requestOptions.url);
+                            debug(err);
+                            callback(err);
+                        });
+
+                        res.on('data', function (data) {
+                            bodySize += data.length;
+                        }).pipe(gzip);
+
+                        break;
+                    case 'deflate':
+                        res.setEncoding('utf8');
+
+                        var deflate = zlib.createInflate();
+
+                        deflate.on('data', function (data) {
+                            bodyChunks.push(data);
+                            uncompressedSize += data.length;
+                        }).on('end', function () {
+                            isCompressed = true;
+                            tally();
+                        }).on('error', function(err) {
+                            debug('Error while decoding %s', requestOptions.url);
+                            debug(err);
+                            callback(err);
+                        });
+
+                        res.on('data', function (data) {
+                            bodySize += data.length;
+                        }).pipe(deflate);
+
+                        break;
+                    default:
+                        res.on('data', function (data) {
+                            bodyChunks.push(data);
+                            uncompressedSize += data.length;
+                            bodySize += data.length;
+                        }).on('end', function () {
+                            tally();
+                        });
+
+                        break;
+                }
+            })
+
+            .on('response', function(response) {
+                statusCode = response.statusCode;
+            })
+
+            .on('error', function(err) {
+                debug('Error while downloading %s', requestOptions.url);
+                debug(err);
+                callback(err);
+            });
+
+        } catch(err) {
+            debug('Error while downloading %s', requestOptions.url);
+            debug(err);
+            callback(err);
+        }
+    }
+
+    return {
+        recheckAllFiles: recheckAllFiles,
+        listRequestWeight: listRequestWeight,
+        redownloadEntry: redownloadEntry,
+        download: download
+    };
+};
+
+module.exports = new Redownload();

package.json

@@ -1,58 +1,111 @@
 {
   "name": "yellowlabtools",
-  "version": "1.4.0",
+  "version": "1.13.4",
   "description": "Online tool to audit a webpage for performance and front-end quality issues",
+  "license": "GPL-2.0",
+  "author": {
+    "name": "Gaël Métais",
+    "email": "gael@gaelmetais.com",
+    "url": "https://www.gaelmetais.com"
+  },
   "repository": {
     "type": "git",
-    "url": "git://github.com/gmetais/YellowLabTools.git"
+    "url": "git://github.com/YellowLabTools/YellowLabTools.git"
   },
   "bin": {
     "yellowlabtools": "./bin/cli.js"
   },
+  "engines": {
+    "node": ">= 4.0"
+  },
   "main": "./lib/index.js",
   "dependencies": {
-    "async": "~0.9.0",
-    "body-parser": "~1.12.3",
-    "compression": "~1.4.3",
-    "cors": "^2.5.3",
-    "debug": "~2.1.3",
-    "express": "~4.12.3",
-    "lwip": "0.0.6",
-    "meow": "^3.1.0",
-    "phantomas": "1.10.0",
-    "ps-node": "0.0.4",
-    "q": "~1.2.1",
-    "rimraf": "~2.3.2",
-    "temporary": "0.0.8"
+    "angular": "1.6.8",
+    "angular-animate": "1.6.8",
+    "angular-chart.js": "1.1.1",
+    "angular-local-storage": "0.7.1",
+    "angular-resource": "1.6.8",
+    "angular-route": "1.6.8",
+    "angular-sanitize": "1.6.8",
+    "async": "2.6.0",
+    "body-parser": "1.18.2",
+    "chart.js": "2.7.1",
+    "clean-css": "4.1.9",
+    "color-diff": "1.1.0",
+    "compression": "1.7.1",
+    "cors": "2.8.4",
+    "css-mq-parser": "0.0.3",
+    "debug": "3.1.0",
+    "easyxml": "2.0.1",
+    "ejs": "2.5.7",
+    "express": "4.16.2",
+    "fontkit": "1.7.7",
+    "image-size": "0.7.1",
+    "imagemin": "5.3.1",
+    "imagemin-jpegoptim": "5.2.0",
+    "imagemin-jpegtran": "5.0.2",
+    "imagemin-optipng": "5.2.1",
+    "imagemin-svgo": "6.0.0",
+    "is-eot": "1.0.0",
+    "is-gif": "1.0.0",
+    "is-http2": "1.2.0",
+    "is-jpg": "1.0.0",
+    "is-otf": "0.1.2",
+    "is-png": "1.1.0",
+    "is-svg": "2.1.0",
+    "is-ttf": "0.2.2",
+    "is-woff": "1.0.3",
+    "is-woff2": "1.0.0",
+    "jimp": "0.2.28",
+    "md5": "2.2.1",
+    "meow": "3.7.0",
+    "minimize": "2.1.0",
+    "parse-color": "1.0.0",
+    "phantomas": "1.19.0",
+    "ps-node": "0.1.6",
+    "q": "1.5.1",
+    "request": "2.83.0",
+    "rimraf": "2.6.2",
+    "temporary": "0.0.8",
+    "try-thread-sleep": "1.0.2",
+    "uglify-js": "2.8.29"
   },
   "devDependencies": {
-    "chai": "^2.3.0",
-    "grunt": "^0.4.5",
-    "grunt-blanket": "^0.0.8",
-    "grunt-contrib-clean": "^0.6.0",
-    "grunt-contrib-concat": "^0.5.1",
-    "grunt-contrib-copy": "^0.8.0",
-    "grunt-contrib-cssmin": "^0.12.2",
-    "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.3.1",
-    "grunt-inline-angular-templates": "^0.1.5",
-    "grunt-line-remover": "^0.0.2",
-    "grunt-mocha-test": "^0.12.7",
-    "grunt-replace": "^0.8.0",
-    "grunt-usemin": "^3.0.0",
-    "grunt-webfont": "^0.5.2",
-    "matchdep": "^0.3.0",
-    "mocha": "^2.2.4",
-    "request": "^2.55.0",
-    "sinon": "^1.14.1",
-    "sinon-chai": "^2.7.0"
+    "chai": "~4.1.2",
+    "grunt": "~1.0.1",
+    "grunt-contrib-clean": "~1.1.0",
+    "grunt-contrib-concat": "~1.0.1",
+    "grunt-contrib-copy": "~1.0.0",
+    "grunt-contrib-cssmin": "~2.2.1",
+    "grunt-contrib-htmlmin": "~2.4.0",
+    "grunt-contrib-jshint": "~1.1.0",
+    "grunt-contrib-less": "~1.4.1",
+    "grunt-contrib-uglify": "~3.3.0",
+    "grunt-contrib-watch": "~1.0.0",
+    "grunt-env": "~0.4.4",
+    "grunt-express": "~1.4.1",
+    "grunt-filerev": "~2.3.1",
+    "grunt-inline-angular-templates": "~0.1.5",
+    "grunt-mocha-test": "~0.13.3",
+    "grunt-parallel": "~0.5.1",
+    "grunt-replace": "~1.0.1",
+    "grunt-usemin": "~3.1.1",
+    "grunt-webfont": "~1.6.0",
+    "matchdep": "~2.0.0",
+    "mocha": "~4.1.0",
+    "sinon": "~4.1.6",
+    "sinon-chai": "~2.14.0"
   },
   "scripts": {
-    "test": "grunt test"
-  }
+    "test": "grunt test",
+    "build": "grunt build"
+  },
+  "keywords": [
+    "performance",
+    "metrics",
+    "webperf",
+    "pagespeed",
+    "budget",
+    "phantomas"
+  ]
 }

server_config/maintenance.js

@@ -0,0 +1,13 @@
+var express                 = require('express');
+var app                     = express();
+var server                  = require('http').createServer(app);
+
+var settings                = require('./settings.json');
+
+app.all('*', function(req, res) {
+    res.status(500).send('YellowLabTools is in maintenance. It should come back soon with a new version!');
+});
+
+server.listen(settings.serverPort, function() {
+    console.log('Maintenance mode started on port %d', server.address().port);
+});

server_config/server_install.sh

@@ -2,27 +2,22 @@
 
 # APT-GET
 sudo apt-get update
-sudo apt-get install lsb-release libfontconfig1 libfreetype6 -y --force-yes
-sudo apt-get install curl git python-software-properties build-essential make g++ -y --force-yes
+sudo apt-get install lsb-release libfontconfig1 libfreetype6 libjpeg-dev -y --force-yes > /dev/null 2>&1
+sudo apt-get install curl git software-properties-common build-essential make g++ -y --force-yes > /dev/null 2>&1
 
 # Installation of NodeJS
-sudo add-apt-repository -y ppa:chris-lea/node.js
-sudo apt-get update
-sudo apt-get install -y nodejs
+curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -
+sudo apt-get install -y nodejs > /dev/null 2>&1
 source ~/.profile
 
 # Installation of some packages globally
-npm install bower forever grunt-cli phantomjs -g
+npm install forever grunt-cli -g
 source ~/.profile
 
 # Installation of YellowLabTools
-sudo mkdir /space
-sudo chown $USER /space
-cd /space
-git clone https://github.com/gmetais/YellowLabTools.git --branch master
-cd YellowLabTools
-npm install
-bower install --config.interactive=false --allow-root
+sudo chown -R $USER /space
+cd /space/YellowLabTools
+npm install || exit 1
 
 # Front-end compilation
 grunt build