Working on implementing unicode ranges again

YellowLab Tools V2 - beta version

.bowerrc

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

.dockerignore

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

.gitignore

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

.travis.yml

@@ -1,8 +1,18 @@
 language: node_js
+sudo: false
 node_js:
-    - "0.10.33"
+  - "12.18"
+  - "14.7"
+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
-before_script: grunt test
+  - "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"]

FUNDING.yml

@@ -0,0 +1 @@
+ko_fi: gaelmetais

Gruntfile.js

@@ -11,20 +11,6 @@ module.exports = function(grunt) {
         pkg: grunt.file.readJSON('package.json'),
         settings: grunt.file.readJSON('./server_config/settings.json'),
         
-        font: {
-            icons: {
-                src: ['front/src/fonts/svg-icons/*.svg'],
-                destCss: 'front/src/less/icons.less',
-                destFonts: 'front/src/fonts/icons.woff',
-
-                // Optional: Custom routing of font filepaths for CSS
-                cssRouter: function (fontpath) {
-                    var pathArray = fontpath.split('/');
-                    var fileName = pathArray[pathArray.length - 1];
-                    return '/fonts/' + fileName;
-                }
-            }
-        },
         less: {
             all: {
                 files: [
@@ -38,25 +24,6 @@ module.exports = function(grunt) {
                 ]
             }
         },
-        replace: {
-            dist: {
-                options: {
-                    patterns: [
-                        {
-                            match: 'googleAnalyticsId',
-                            replacement: '<%= settings.googleAnalyticsId %>'
-                        },
-                        {
-                            match: 'version',
-                            replacement: 'v<%= pkg.version %>'
-                        }
-                    ]
-                },
-                files: [
-                    {expand: true, flatten: true, src: ['front/src/main.html'], dest: 'front/build/'}
-                ]
-            }
-        },
         jshint: {
             all: [
                 '*.js',
@@ -66,9 +33,14 @@ module.exports = function(grunt) {
                 'app/nodeControllers/*.js',
                 'app/public/scripts/*.js',
                 'phantomas_custom/**/*.js',
-                'test/**/*.js',
+                'test/api/*.js',
+                'test/core/*.js',
+                'test/fixtures/*.js',
                 'front/src/js/**/*.js'
-            ]
+            ],
+            options: {
+                esversion: 6
+            }
         },
         clean: {
             tmp: {
@@ -77,57 +49,24 @@ 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: [
-                    {src: ['test/**'], dest: 'coverage/'},
-                    {src: ['lib/metadata/**'], dest: 'coverage/'},
-                    {src: ['node_modules/phantomas/**'], dest: 'coverage/'},
-                    {src: ['lib/tools/phantomas/custom_modules/**'], dest: 'coverage/'}
-                ]
-            },
             build: {
                 files: [
-                    {src: ['./front/src/fonts/icons.woff'], dest: './front/build/fonts/icons.woff'},
+                    {src: ['./front/src/main.html'], dest: './front/build/main.html'},
                     {src: ['./front/src/img/favicon.png'], dest: './front/build/img/favicon.png'},
                     {src: ['./front/src/img/logo-large.png'], dest: './front/build/img/logo-large.png'},
                 ]
-            }
-        },
-        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/'
+            favicons: {
+                files: [
+                    {src: ['./front/src/img/favicon.png'], dest: './front/build/img/favicon.png'},
+                    {src: ['./front/src/img/favicon-fail.png'], dest: './front/build/img/favicon-fail.png'},
+                    {src: ['./front/src/img/favicon-success.png'], dest: './front/build/img/favicon-success.png'},
+                ]
             }
         },
         mochaTest: {
@@ -135,28 +74,20 @@ module.exports = function(grunt) {
                 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/core/mediaQueriesCheckerTest.js']
             }
         },
         env: {
             dev: {
                 NODE_ENV: 'development'
             },
-            builded: {
+            built: {
                 NODE_ENV: 'production'
             }
         },
@@ -169,7 +100,7 @@ module.exports = function(grunt) {
                     showStack: true
                 }
             },
-            builded: {
+            built: {
                 options: {
                     port: 8383,
                     server: './bin/server.js',
@@ -180,7 +111,7 @@ module.exports = function(grunt) {
             test: {
                 options: {
                     port: 8387,
-                    server: './coverage/bin/server.js',
+                    server: './bin/server.js',
                     showStack: true
                 }
             },
@@ -209,16 +140,14 @@ module.exports = function(grunt) {
             html: './front/build/main.html',
             css: './front/build/css/*.css',
             options: {
-                assetsDirs: ['front/build'],
-                patterns: {
-                    css: [[/(\/fonts\/icons\.woff)/gm, 'Replacing reference to icons.woff']]
-                }
+                assetsDirs: ['front/build']
             }
         },
         htmlmin: {
             options: {
                 removeComments: true,
-                collapseWhitespace: true
+                collapseWhitespace: true,
+                conservativeCollapse: true
             },
             main: {
                 files: [{
@@ -243,7 +172,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,41 +194,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', [
-        'font:icons',
-        'less',
-        'clean:tmp'
-    ]);
-
     grunt.registerTask('build', [
         'jshint',
         'clean:build',
@@ -305,13 +208,13 @@ module.exports = function(grunt) {
         'concat',
         'uglify',
         'cssmin',
-        'replace',
         'htmlmin:views',
         'inline_angular_templates',
         'filerev',
         'usemin',
         'htmlmin:main',
-        'clean:tmp'
+        'clean:tmp',
+        'copy:favicons'
     ]);
 
     grunt.registerTask('hint', [
@@ -323,31 +226,24 @@ module.exports = function(grunt) {
         'express:dev'
     ]);
 
-    grunt.registerTask('builded', [
-        'env:builded',
-        'express:builded'
+    grunt.registerTask('built', [
+        'env:built',
+        'express:built'
     ]);
 
     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,57 +1,91 @@
-# 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/home.png"></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 [PhantomasJS](http://phantomjs.org/) (a headless browser) and collects various metrics and statistics with the help of [Phantomas](https://github.com/macbre/phantomas). These metrics are categorized and transformed into scores. It also gives in-depth details so developpers can correct the detected issues.
+The tool loads the given URL 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!!!
+By the way, it's free because I am a geek, not businessmen. In return, you can add a ★ on GitHub, it will boost my motivation to add more awesome features!!!
+
+![example dashboard screenshot](./doc/img/screenshot.png)
 
 
-## Different ways to use YLT
+## Test your localhost
 
-#### 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.
-
-#### The Command Line Client:
-Might be useful if you want to build an automation tool. The documentation is [here](https://github.com/gmetais/YellowLabTools/wiki/Command-Line-Interface).
-
-#### The NPM module:
-Can be used to build automation tools in NodeJS. The documentation is [here](https://github.com/gmetais/YellowLabTools/wiki/NodeJS-module).
-
-#### The Public API:
-Hosted on our http://yellowlab.tools server, it is a RESTful API that allows you to launch distant tests. The documentation is [here](https://github.com/gmetais/YellowLabTools/wiki/Public-API).
+You can use [ngrok](https://ngrok.com/), a tool that creates a secure tunnel between your localhost and the online tool (or the public API). You can also use the CLI or the Grunt tasks as they run on your machine.
 
 
 ## Install your own private instance
 
-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!
+
+<a href='https://ko-fi.com/gaelmetais' target='_blank'><img height='35' style='border:0px;height:46px;' src='https://az743702.vo.msecnd.net/cdn/kofi3.png?v=0' border='0' alt='Buy me a coffee' /><a>
+
+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)
+- Km [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: [
@@ -12,18 +13,27 @@ var cli = meow({
         '  yellowlabtools <url> <options>',
         '',
         'Options:',
-        '  --screenshot     Will take a screenshot and use this value as the output path. It needs to end with ".png".',
+        '  --device             Simulates a device. Choose between phone (default), tablet, desktop and desktop-hd.',
+        '  --screenshot         Will take a screenshot and use this value as the output path. It needs to end with ".png".',
+        //'  --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.',
+        '  --allow-domain       Only allow requests to given (comma-separated) domains.',
+        '  --no-externals       Block all domains except the main one.',
+        '  --reporter           The output format: "json" or "xml". Default is "json".',
         ''
     ].join('\n'),
-    pkg: '../package.json'
+    pkg: require('../package.json')
 });
 
 
 
 // Check parameters
 if (cli.input.length < 1) {
-    console.error('Incorrect parameters: url not provided');
-    process.exit(1);
+    cli.showHelp();
 }
 
 var url = cli.input[0];
@@ -44,6 +54,32 @@ if (screenshot) {
     options.screenshot = cli.flags.screenshot;
 }
 
+// Device simulation
+options.device = cli.flags.device || 'mobile';
+
+// 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) {
@@ -54,7 +90,34 @@ if (screenshot) {
         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,12 +0,0 @@
-{
-  "name": "yellowlabtools",
-  "dependencies": {
-    "angular": "~1.3.8",
-    "angular-route": "~1.3.8",
-    "angular-resource": "~1.3.7",
-    "angular-sanitize": "~1.4.0-beta.0"
-  },
-  "resolutions": {
-    "angular": "~1.3.8"
-  }
-}

front/src/css/about.css

@@ -1,10 +1,18 @@
 .about {
   margin: 3em auto;
-  width: 50%;
+  width: 80%;
+}
+@media (min-width: 640px) {
+  .about {
+    width: 50%;
+  }
 }
 .about p {
   margin: 2em;
 }
 .about a {
-  color: #FFF;
+  color: #fff;
+}
+.sponsor {
+  color: #ffa319;
 }

front/src/css/dashboard.css

@@ -5,15 +5,8 @@
   text-align: center;
 }
 .summary .globalScore {
-  display: table;
-  width: 60%;
   margin: 3em auto;
 }
-.summary .globalScore > div {
-  display: table-cell;
-  width: 50%;
-  vertical-align: middle;
-}
 .summary .globalScore .globalGrade {
   margin: 0.5 auto;
   width: 2.5em;
@@ -21,12 +14,10 @@
   line-height: 2.5em;
   border-radius: 0.5em;
   font-size: 3em;
-  font-weight: bold;
   vertical-align: middle;
 }
 .summary .globalScore .on100 {
   font-size: 1.2em;
-  font-weight: bold;
   margin: 0.5em 0 1em;
 }
 .summary .globalScore .screenshotWrapper:hover {
@@ -46,28 +37,71 @@
   content: "+";
   opacity: 0.85;
 }
+.summary .globalScore .screenshotWrapper.phone:hover:after {
+  top: 1.7em;
+  left: 0.64em;
+}
+.summary .globalScore .screenshotWrapper.tablet:hover:after {
+  top: 1.5em;
+  left: 0.9em;
+}
+@media (min-width: 820px) {
+  .summary .globalScore {
+    width: 65%;
+    display: table;
+  }
+  .summary .globalScore > div {
+    display: table-cell;
+    width: 50%;
+    vertical-align: middle;
+  }
+}
 .summary .notations {
+  width: 100%;
   display: table;
-  width: 80%;
-  margin: 0 10% 1.5em;
-  border-spacing: 1em;
+  margin: 0 0 1.5em;
+  border-spacing: 0 1em;
+}
+@media (min-width: 820px) {
+  .summary .notations {
+    width: 80%;
+    margin: 0 10% 1.5em;
+    border-spacing: 1em;
+  }
 }
 .summary .notations > div {
   display: table-row;
 }
 .summary .notations > div > div {
-  display: table-cell;
-  height: 2.5em;
   vertical-align: middle;
 }
+@media (min-width: 820px) {
+  .summary .notations > div > div {
+    display: table-cell;
+    height: 2.5em;
+  }
+}
 .summary .notations .category {
-  font-weight: bold;
-  text-align: center;
-  width: 20%;
+  font-size: 1.2em;
+  width: 50%;
+  float: left;
+  text-align: left;
+  margin: 0.5em 0.25em;
+}
+@media (min-width: 820px) {
+  .summary .notations .category {
+    width: 20%;
+    text-align: center;
+    float: none;
+  }
 }
 .summary .notations .criteria {
   font-weight: normal;
-  width: 75%;
+}
+@media (min-width: 820px) {
+  .summary .notations .criteria {
+    width: 75%;
+  }
 }
 .summary .notations .A.categoryScore,
 .summary .notations .B.categoryScore,
@@ -79,10 +113,23 @@
   width: 2.5em;
   max-width: 2.5em;
   min-width: 2.5em;
-  font-size: 2em;
+  margin: 0.2em;
+  font-size: 1.5em;
   text-align: center;
   border-radius: 0.5em;
-  font-weight: bold;
+  float: right;
+}
+@media (min-width: 820px) {
+  .summary .notations .A.categoryScore,
+  .summary .notations .B.categoryScore,
+  .summary .notations .C.categoryScore,
+  .summary .notations .D.categoryScore,
+  .summary .notations .E.categoryScore,
+  .summary .notations .F.categoryScore,
+  .summary .notations .NA.categoryScore {
+    float: none;
+    font-size: 2em;
+  }
 }
 .summary .notations .grade .A,
 .summary .notations .grade .B,
@@ -101,15 +148,19 @@
 .summary .notations .criteria .table {
   width: 100%;
 }
-.summary .notations .criteria .table > div:hover > div {
-  background: #EBD8E2;
+.summary .notations .criteria .table > a {
+  text-decoration: none;
+  color: inherit;
+}
+.summary .notations .criteria .table > a:hover > div {
+  background: #d8ebe0;
   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 {
-  color: #EBD8E2;
+.summary .notations .criteria .table > a:hover > div.info svg {
+  fill: #d8ebe0;
 }
 .summary .notations .criteria .grade {
   width: 10%;
@@ -122,58 +173,40 @@
 }
 .summary .notations .criteria .result {
   width: 18%;
-  font-weight: bold;
   white-space: nowrap;
   text-align: center;
   vertical-align: middle;
 }
 .summary .notations .warning .label,
-.summary .notations .warning .result,
-.summary .notations .icon-warning {
+.summary .notations .warning .result {
   color: #FF1919;
 }
+.summary .notations .icon-warning svg {
+  fill: #FF1919;
+  margin: -2px 0;
+}
 .summary .notations .criteria .info {
-  width: 2%;
-  text-align: center;
-  vertical-align: middle;
-  background: #FFF;
-  padding-left: 0.1em;
-  padding-right: 0.1em;
+  display: none;
 }
-.summary .notations .criteria .icon-question {
-  color: transparent;
+@media (min-width: 820px) {
+  .summary .notations .criteria .info {
+    display: table-cell;
+    width: 2%;
+    text-align: center;
+    vertical-align: middle;
+    background: #FFF;
+    padding-left: 0.1em;
+    padding-right: 0.1em;
+  }
 }
-.summary .fromShare {
-  margin-bottom: 3em;
+.summary .notations .criteria .info svg {
+  fill: transparent;
 }
-.summary .apiTip {
-  font-size: 0.8em;
+.summary .sponsor {
+  font-size: 0.9em;
   margin-bottom: 4em;
-  color: #413;
+  color: #ffa319;
 }
-.summary .apiTip a {
+.summary .sponsor a {
   color: inherit;
 }
-.summary .tweet .tweetText {
-  color: #413;
-  background: #F2F2F2;
-  border: none;
-  width: 25em;
-  padding: 0.4em;
-  border-radius: 0.5em;
-  box-shadow: 0.05em 0.1em 0 0 #999;
-}
-.summary .tweet .tweetButton,
-.summary .tweet .linkedinButton {
-  color: #413;
-  background: #F2F2F2;
-  margin-right: 0;
-}
-.summary .tweet .tweetButton:hover,
-.summary .tweet .linkedinButton:hover {
-  color: #F2F2F2;
-  background: #e74c3c;
-}
-.summary .tweet input {
-  font-size: 0.9em;
-}

front/src/css/icons.css

@@ -1,6 +0,0 @@
-@font-face {
-  font-family: "fontsmith-icons";
-  src: url("/fonts/icons.woff") format("woff");
-  font-weight: normal;
-  font-style: normal;
-}

front/src/css/index.css

@@ -1,29 +1,175 @@
 .promess {
-  padding: 0em 2em 3em;
+  padding: 0em 2em;
+  margin-bottom: 0.5em;
   font-weight: normal;
   font-size: 1.2em;
 }
+.price {
+  padding: 0em 2em 3em;
+  margin-top: 0em;
+  font-size: 0.9em;
+}
 .url {
   width: 50%;
 }
 .launchBtn {
-  background: #e74c3c;
+  background: #ffa319;
   color: #fff;
 }
+.launchBtn:focus {
+  background: #e74c3c;
+}
 .launchBtn.disabled {
-  background: #deaca6;
+  background: #f1bd70;
+}
+.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;
+}
+.device .item {
+  display: inline-block;
+  margin: 1em 0.75em;
+  width: 5.5em;
+  height: 5.5em;
+  color: #FFF;
+  border: 1px solid #FFF;
+  padding: 1px;
+  border-radius: 0.5em;
+  cursor: pointer;
+  text-decoration: none;
+  font-size: 0.8em;
+}
+.device .item > svg {
+  display: block;
+  margin: 0.6em auto 0.3em;
+  fill: #fff;
+}
+.device .item.active {
+  color: #ffa319;
+  border: 2px solid #ffa319;
+  padding: 0;
+}
+.device .item.active > svg {
+  fill: #ffa319;
+}
+.device .item:hover {
+  color: #ffa319;
+}
+.device .item:hover > svg {
+  fill: #ffa319;
+}
+.settingsTooltip {
+  position: relative;
+}
+.settingsTooltip svg {
+  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;
+  word-break: break-all;
+  word-break: break-word;
+  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;
+  color: #8abfaf;
 }
-.features > div {
-  width: 33.3%;
-  display: table-cell;
-  padding: 0 1.5em;
+@media (min-width: 640px) {
+  .features > div {
+    width: 33.3%;
+    display: table-cell;
+    padding: 0 1.5em;
+  }
+}
+.features h3 {
+  font-size: 1.5em;
+  font-weight: normal;
+  color: #fff;
 }
 input[type=submit],
 input.url {
@@ -33,7 +179,6 @@ input.url {
   height: 2em;
   border: 0 solid;
   border-radius: 0.5em;
-  box-shadow: 0.1em 0.2em 0 0 #5e2846;
   outline: none;
 }
 input[type=submit]:hover {
@@ -46,3 +191,6 @@ input[type=submit].clicked {
   top: 0.2em;
   box-shadow: none;
 }
+.homeSponsor {
+  margin-top: 3em;
+}

front/src/css/main.css

@@ -1,16 +1,15 @@
-@font-face {
-  font-family: "fontsmith-icons";
-  src: url("/fonts/icons.woff") format("woff");
-  font-weight: normal;
-  font-style: normal;
-}
 html {
-  margin: 100px 50px;
+  margin: 35px 5px;
+}
+@media (min-width: 640px) {
+  html {
+    margin: 100px 50px;
+  }
 }
 body {
   margin: 0 auto;
   max-width: 1280px;
-  background: #9c4274;
+  background: #212240;
   color: #fff;
   font-size: 16px;
   text-align: center;
@@ -26,43 +25,61 @@ button {
 input[type=submit] {
   cursor: pointer;
 }
-h1 span {
-  display: inline-block;
-  height: 1em;
-  width: 1em;
-  color: #ffa319;
+h1 {
+  font-weight: 200;
 }
 .resultsMenu {
   margin-top: 2em;
 }
 .resultsMenu .menuItem {
+  font-size: 0.8em;
   display: inline-block;
-  margin: 1em;
-  width: 8em;
+  width: 7em;
   height: 7em;
   color: #fff;
-  border: 3px solid #fff;
-  border-radius: 0.5em;
   cursor: pointer;
   text-decoration: none;
 }
+@media (min-width: 640px) {
+  .resultsMenu .menuItem {
+    font-size: 1em;
+    margin: 1em;
+    width: 8em;
+    border: 2px solid #fff;
+    border-radius: 0.5em;
+  }
+}
+.resultsMenu .menuItem svg {
+  fill: #fff;
+}
 .resultsMenu .menuItem.back,
 .resultsMenu .menuItem.restart {
-  color: #413;
-  border-color: #413;
+  color: #fff;
+  border-color: #fff;
 }
 .resultsMenu .menuItem div {
   padding-top: 0.5em;
   font-size: 3em;
 }
+.resultsMenu svg {
+  display: block;
+  margin: 1.2em auto 0.2em;
+}
 .resultsMenu .active,
 .resultsMenu .menuItem.active:hover {
   color: #ffa319;
   border-color: #ffa319;
 }
+.resultsMenu .active svg,
+.resultsMenu .menuItem.active:hover svg {
+  fill: #ffa319;
+}
 .resultsMenu .menuItem:hover {
   color: #ffa319;
 }
+.resultsMenu .menuItem:hover svg {
+  fill: #ffa319;
+}
 .resultsMenu span {
   position: relative;
   top: 0.5em;
@@ -125,16 +142,30 @@ a.linkButton {
   color: #fff;
   text-decoration: none;
 }
-.screenshotWrapper.desktop {
+.screenshotWrapper {
   display: inline-block;
   position: relative;
-  border: 0.2em solid #AAA;
   background: #000;
+}
+.screenshotWrapper > div {
+  position: relative;
+  overflow: hidden;
+}
+.screenshotWrapper .screenshotImage {
+  width: 100%;
+}
+.screenshotWrapper .screenshotError {
+  color: #fff;
+}
+.screenshotWrapper.desktop,
+.screenshotWrapper.desktop-hd {
+  border: 0.2em solid #AAA;
   padding: 0.5em;
   border-top-left-radius: 0.4em;
   border-top-right-radius: 0.4em;
 }
-.screenshotWrapper.desktop:before {
+.screenshotWrapper.desktop:before,
+.screenshotWrapper.desktop-hd:before {
   position: absolute;
   width: 15em;
   height: 0.6em;
@@ -145,7 +176,8 @@ a.linkButton {
   border-bottom-right-radius: 0.2em;
   content: " ";
 }
-.screenshotWrapper.desktop:after {
+.screenshotWrapper.desktop:after,
+.screenshotWrapper.desktop-hd:after {
   position: absolute;
   width: 0.4em;
   height: 0.2em;
@@ -154,24 +186,82 @@ a.linkButton {
   background: lime;
   content: " ";
 }
-.screenshotWrapper.desktop > div {
+.screenshotWrapper.desktop > div,
+.screenshotWrapper.desktop-hd > div {
   width: 12em;
-  height: 6.75em;
-  overflow: scroll;
-  position: relative;
+  height: 7.5em;
 }
-.screenshotWrapper.desktop .screenshotImage {
+.screenshotWrapper.phone {
+  border: 0.07em solid #CCC;
+  padding: 1em 0.3em 1.5em;
+  border-radius: 0.6em;
+}
+.screenshotWrapper.phone:before {
+  position: absolute;
+  width: 0.8em;
+  height: 0.8em;
+  bottom: 0.3em;
+  left: 3.3em;
+  border: 0.07em solid #CCC;
+  border-radius: 0.5em;
+  content: " ";
+}
+.screenshotWrapper.phone:after {
+  position: absolute;
+  width: 1em;
+  height: 0.1em;
+  bottom: 13.9em;
+  left: 3.2em;
+  background: #555;
+  border-radius: 0.05em;
+  content: " ";
+}
+.screenshotWrapper.phone > div {
+  width: 6.75em;
+  height: 12em;
+}
+.screenshotWrapper.tablet {
+  border: 0.07em solid #CCC;
+  padding: 0.8em 0.5em 0.9em;
+  border-radius: 0.6em;
+}
+.screenshotWrapper.tablet:before {
+  position: absolute;
+  width: 0.5em;
+  height: 0.5em;
+  bottom: 0.15em;
+  left: 4.35em;
+  border: 0.07em solid #CCC;
+  border-radius: 0.4em;
+  content: " ";
+}
+.screenshotWrapper.tablet > div {
+  width: 8em;
+  height: 12.8em;
+}
+.table {
+  display: table;
   width: 100%;
+  border-spacing: 0.25em;
 }
-.star {
+.table > div,
+.table > a {
+  display: table-row;
+}
+.table > .headers > div {
   font-weight: bold;
+  padding: 0.5em 1em;
 }
-.star span {
-  font-size: 1.2em;
+.table > div > div,
+.table > a > div {
+  padding: 0.1em 1em;
+  background: #f2f2f2;
+  display: table-cell;
+  text-align: left;
 }
 .footer {
   padding: 3em;
-  color: #413;
+  color: #fff;
 }
 .footer a {
   color: inherit;
@@ -179,95 +269,12 @@ a.linkButton {
 .footer .version {
   font-size: 0.7em;
 }
-/* Icons */
-.icon-lab {
-  font-family: "fontsmith-icons";
-  speak: none;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-  -webkit-font-smoothing: antialiased;
+.footer .github {
+  margin: 1em 0 0 0.5em;
 }
-.icon-lab:before {
-  content: "\e004";
+.footer .sponsor {
+  font-size: 0.9em;
 }
-.icon-question {
-  font-family: "fontsmith-icons";
-  speak: none;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-  -webkit-font-smoothing: antialiased;
-}
-.icon-question:before {
-  content: "\e001";
-}
-.icon-warning {
-  font-family: "fontsmith-icons";
-  speak: none;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-  -webkit-font-smoothing: antialiased;
-}
-.icon-warning:before {
-  content: "\e000";
-}
-.icon-back {
-  font-family: "fontsmith-icons";
-  speak: none;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-  -webkit-font-smoothing: antialiased;
-}
-.icon-back:before {
-  content: "\e006";
-}
-.icon-summary {
-  font-family: "fontsmith-icons";
-  speak: none;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-  -webkit-font-smoothing: antialiased;
-}
-.icon-summary:before {
-  content: "\e003";
-}
-.icon-spaghetti {
-  font-family: "fontsmith-icons";
-  speak: none;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-  -webkit-font-smoothing: antialiased;
-}
-.icon-spaghetti:before {
-  content: "\e005";
-}
-.icon-loop {
-  font-family: "fontsmith-icons";
-  speak: none;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-  -webkit-font-smoothing: antialiased;
-}
-.icon-loop:before {
-  content: "\e002";
+.homeSponsor {
+  color: #ffa319;
 }

front/src/css/queue.css

@@ -6,3 +6,16 @@
   font-size: 0.8em;
   margin-bottom: 6em;
 }
+.progressBarEmpty {
+  width: 90%;
+  max-width: 300px;
+  margin: 1em auto;
+  padding: 0.05em;
+  border: 1px solid #ffa319;
+}
+.progressBarFilled {
+  width: 5%;
+  height: 0.5em;
+  background: #ffa319;
+  transition: width 3s ease-out;
+}

front/src/css/rule.css

@@ -2,7 +2,6 @@
   text-align: center;
 }
 .rule .ruleTable {
-  display: table;
   border-spacing: 1em;
   width: 90%;
   margin: 2em auto;
@@ -10,16 +9,20 @@
   border: 1px dashed #666;
   border-radius: 0.5em;
 }
-.rule .ruleTable > div {
-  display: table-cell;
-  vertical-align: middle;
-}
-.rule .ruleTable .left {
-  width: 33%;
-  font-weight: bold;
-}
-.rule .ruleTable .right {
-  width: 67%;
+@media (min-width: 820px) {
+  .rule .ruleTable {
+    display: table;
+  }
+  .rule .ruleTable > div {
+    display: table-cell;
+    vertical-align: middle;
+  }
+  .rule .ruleTable .left {
+    width: 33%;
+  }
+  .rule .ruleTable .right {
+    width: 67%;
+  }
 }
 .rule .score {
   font-size: 2.5em;
@@ -27,11 +30,18 @@
   height: 2em;
   width: 2em;
   border-radius: 0.5em;
-  margin: 0 auto 0.5em;
+  margin: 0 auto 0.25em;
+}
+.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;
@@ -60,7 +70,13 @@
   border-spacing: 0 0.25em;
   margin: 0 auto;
   min-width: 10%;
-  max-width: 90%;
+  font-size: 0.875em;
+}
+@media (min-width: 820px) {
+  .rule .offendersTable {
+    max-width: 90%;
+    font-size: 1em;
+  }
 }
 .rule .offendersTable > div {
   display: table-row;
@@ -68,12 +84,12 @@
 .rule .offendersTable > div > div {
   display: table-cell;
   background: #f2f2f2;
-  padding: 0 1em;
+  padding: 0 0.25em;
   word-wrap: break-word;
   word-break: break-all;
 }
 .rule .offendersTable > div > div:hover {
-  background: #EBD8E2;
+  background: #d8ebe0;
 }
 .rule .notFound {
   font-size: 1em;
@@ -82,7 +98,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 +110,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;
@@ -109,30 +133,43 @@
   border-bottom-left-radius: 0.4em;
   border-bottom-right-radius: 0.4em;
   border-top: 1px solid #999;
+  z-index: 2;
 }
-.offenders .offenderButton .domTree {
+.offendersTable .offenderButton .domTree,
+.value .offenderButton .domTree {
   text-align: left;
   white-space: nowrap;
 }
-.offenders .offenderButton .domTree > div {
+.offendersTable .offenderButton .domTree > div,
+.value .offenderButton .domTree > div {
   margin: 0.5em;
 }
-.offenders .offenderButton .domTree > div div {
+.offendersTable .offenderButton .domTree > div div,
+.value .offenderButton .domTree > div div {
   margin-left: 1em;
 }
-.offenders .offenderButton .backtrace,
-.offenders .offenderButton .cssFileAndLine {
+.offendersTable .offenderButton .backtrace,
+.value .offenderButton .backtrace,
+.offendersTable .offenderButton .cssFileAndLine,
+.value .offenderButton .cssFileAndLine {
   white-space: nowrap;
   padding: 0.5em;
 }
-.offenders .offenderButton.opens.mouseOver {
+.offendersTable .offenderButton.opens:hover,
+.value .offenderButton.opens:hover {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
   background: #ffe0cc;
   z-index: 2;
 }
-.offenders .offenderButton.opens.mouseOver > div {
+.offendersTable .offenderButton.opens:hover > div,
+.value .offenderButton.opens:hover > div {
   display: block;
+  background: #ffe0cc;
+}
+.offendersTable .smallerOffenders,
+.value .smallerOffenders {
+  font-size: 0.9em;
 }
 .offendersHtml {
   display: inline-block;
@@ -148,15 +185,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;
@@ -182,7 +221,6 @@
 .colorPalette > div:hover:after {
   content: " ";
   position: absolute;
-  background-color: inherit;
   left: -0.2em;
   top: -0.2em;
   width: 100%;
@@ -190,3 +228,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/screenshot.css

@@ -2,6 +2,16 @@
   text-align: center;
 }
 .screenshot .screenshotWrapper {
-  font-size: 2.08333333333333em;
+  font-size: 1.2em;
   margin-bottom: 0.5em;
 }
+@media (min-width: 420px) {
+  .screenshot .screenshotWrapper {
+    font-size: 1.6em;
+  }
+}
+@media (min-width: 640px) {
+  .screenshot .screenshotWrapper {
+    font-size: 2.08333333em;
+  }
+}

front/src/css/timeline.css

@@ -1,249 +0,0 @@
-/* Timeline colors, related to Window Performances */
-.execution {
-  text-align: center;
-}
-.timeline {
-  margin: 2em 0 5em;
-}
-.timeline .chart {
-  position: relative;
-  width: 100%;
-  border-bottom: 1px solid #000;
-}
-.timeline .startTime,
-.timeline .endTime {
-  position: absolute;
-  bottom: 0.5em;
-  font-size: 0.8em;
-}
-.timeline .startTime {
-  left: 0em;
-}
-.timeline .endTime {
-  right: 0em;
-}
-.timeline .chartPoints {
-  display: table;
-  height: 100px;
-  width: 99%;
-  margin: 0 auto;
-}
-.timeline .interval {
-  display: table-cell;
-  position: relative;
-  height: 100px;
-  width: 0.5%;
-}
-.timeline .interval .color {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-}
-.timeline div.interval:hover {
-  background: #9C4274;
-}
-.timeline .interval:hover .color {
-  background: #F04DA7;
-}
-.timeline .domComplete.interval {
-  background: #ede3ff;
-}
-.timeline .domComplete .color {
-  background: #c2a3ff;
-}
-.timeline .domContentLoadedEnd.interval {
-  background: #d8f0f0;
-}
-.timeline .domContentLoadedEnd .color {
-  background: #7ecccc;
-}
-.timeline .domContentLoaded.interval {
-  background: #e0ffd1;
-}
-.timeline .domContentLoaded .color {
-  background: #a7e846;
-}
-.timeline .domInteractive.interval {
-  background: #fffccc;
-}
-.timeline .domInteractive .color {
-  background: #ffe433;
-}
-.timeline .domCreation.interval {
-  background: #ffe0cc;
-}
-.timeline .domCreation .color {
-  background: #ff6600;
-}
-.timeline .tooltip.detailsOverlay {
-  position: absolute;
-  display: none;
-  width: auto;
-  padding: 0.5em 1em;
-  top: -1.5em;
-  right: 1em;
-}
-.timeline .interval:hover .tooltip {
-  display: block;
-}
-.timeline .legend {
-  display: table;
-  width: 100%;
-  margin-top: 1em;
-}
-.timeline .legend > div {
-  display: table-row;
-}
-.timeline .legend > div > div {
-  position: relative;
-  display: table-cell;
-  margin-top: 1em;
-}
-.timeline .titles {
-  font-weight: bold;
-}
-.timeline .titles > div {
-  padding: 0 1em 0 2em;
-}
-.timeline .tips {
-  font-size: 0.7em;
-}
-.timeline .tips > div {
-  padding: 1em 1em 0 0;
-}
-.timeline .legend .color {
-  display: block;
-  position: absolute;
-  left: 0;
-  height: 1.5em;
-  width: 1.5em;
-  border-radius: 0.2em;
-}
-.filters {
-  margin: 1em auto;
-  padding: 0.5em;
-  min-width: 30em;
-  width: 30%;
-  border: 1px dotted #aaa;
-  text-align: left;
-}
-.slowRequestsLimit {
-  width: 3em;
-  font-size: 1em;
-  text-align: right;
-  border: 1px solid #aaa;
-}
-input.textFilter {
-  box-shadow: none;
-  font-size: 1em;
-  padding: 0 0.2em;
-  border: 1px solid #aaa;
-  border-radius: none;
-  width: 15em;
-}
-.table {
-  display: table;
-  width: 100%;
-  border-spacing: 0.25em;
-}
-.table > div {
-  display: table-row;
-}
-.table > .headers > div {
-  font-weight: bold;
-  padding: 0.5em 1em;
-}
-.table > div > div {
-  padding: 0.1em 1em;
-  background: #f2f2f2;
-  display: table-cell;
-  text-align: left;
-}
-.table > div.jsError > .type,
-.table > div.jsError > .value {
-  color: #e74c3c;
-  font-weight: bold;
-}
-.table > div.windowPerformance > div,
-.table > div.windowPerformance > div.startTime {
-  background: #EBD8E2;
-}
-.table > div.showingDetails > div {
-  background: #f1c40f;
-}
-.table > div > .index {
-  color: #bbb;
-}
-.table > div > .type {
-  white-space: nowrap;
-}
-.table > div > .value {
-  width: 70%;
-  word-break: break-all;
-}
-.table > div > .details {
-  position: relative;
-}
-.table .details .icon-question {
-  color: #f1c40f;
-  cursor: pointer;
-}
-.table .icon-warning {
-  display: inline-block;
-  width: 0.8em;
-}
-.detailsOverlay {
-  position: absolute;
-  right: 3em;
-  top: -3em;
-  width: 45em;
-  min-height: 1em;
-  padding: 0 1em 1em;
-  background: #fff;
-  border: 2px solid #f1c40f;
-  border-radius: 0.5em;
-  z-index: 1;
-}
-@media screen and (max-width: 1024px) {
-  .detailsOverlay {
-    width: 25em;
-  }
-}
-.detailsOverlay .closeBtn {
-  position: absolute;
-  top: 0.5em;
-  right: 0.5em;
-  color: #f1c40f;
-  cursor: pointer;
-}
-.detailsOverlay .advice {
-  color: #e74c3c;
-  font-weight: bold;
-}
-.detailsOverlay .trace {
-  word-break: break-all;
-}
-.table > div > .duration,
-.table > div > .startTime {
-  text-align: center;
-  white-space: nowrap;
-}
-.table > div > .startTime.domComplete {
-  background: #ede3ff;
-}
-.table > div > .startTime.domContentLoadedEnd {
-  background: #d8f0f0;
-}
-.table > div > .startTime.domContentLoaded {
-  background: #e0ffd1;
-}
-.table > div > .startTime.domInteractive {
-  background: #fffccc;
-}
-.table > div > .startTime.domCreation {
-  background: #ffe0cc;
-}
-.execution .icon-warning {
-  color: #e74c3c;
-  cursor: pointer;
-}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

front/src/js/app.js

@@ -1,26 +1,47 @@
 var yltApp = angular.module('YellowLabTools', [
     'ngRoute',
     'ngSanitize',
+    'ngAnimate',
     'indexCtrl',
     'dashboardCtrl',
     'queueCtrl',
     'ruleCtrl',
     'screenshotCtrl',
-    'timelineCtrl',
     'runsFactory',
     'resultsFactory',
     'apiService',
     'menuService',
+    'settingsService',
     'gradeDirective',
-    'offendersDirectives'
+    'offendersDirectives',
+    'LocalStorageModule'
 ]);
 
 yltApp.run(['$rootScope', '$location', function($rootScope, $location) {
+    $rootScope.isTouchDevice = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(window.navigator.userAgent);
     $rootScope.loadedRunId = null;
 
+    var oldHash;
+
+    // We don't want the hash to be kept between two pages
+    $rootScope.$on('$locationChangeStart', function(param1, param2, param3, param4){
+        var newHash = $location.hash();
+        if (newHash === oldHash) {
+            $location.hash(null);
+        }
+        oldHash = newHash;
+    });
+
     // Google Analytics
     $rootScope.$on('$routeChangeSuccess', function(){
-        ga('send', 'pageview', {'page': $location.path()});
+        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';
     });
 }]);
 
@@ -42,10 +63,6 @@ yltApp.config(['$routeProvider', '$locationProvider',
                 templateUrl: 'views/dashboard.html',
                 controller: 'DashboardCtrl'
             }).
-            when('/result/:runId/timeline', {
-                templateUrl: 'views/timeline.html',
-                controller: 'TimelineCtrl'
-            }).
             when('/result/:runId/screenshot', {
                 templateUrl: 'views/screenshot.html',
                 controller: 'ScreenshotCtrl'
@@ -62,3 +79,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

@@ -3,12 +3,11 @@ var dashboardCtrl = angular.module('dashboardCtrl', ['resultsFactory', 'menuServ
 dashboardCtrl.controller('DashboardCtrl', ['$scope', '$rootScope', '$routeParams', '$location', 'Results', 'API', 'Menu', function($scope, $rootScope, $routeParams, $location, Results, API, Menu) {
     $scope.runId = $routeParams.runId;
     $scope.Menu = Menu.setCurrentPage('dashboard', $scope.runId);
-    $scope.fromSocialShare = $location.search().share;
     
     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,42 +25,12 @@ 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.launchTest($scope.result.params.url);
-    };
-
-    /// 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));
-    };
-
-    $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.'));
-    };
-
-    function openSocialPopup(url) {
-        var winHeight = 400;
-        var winWidth = 600;
-        var winTop = (screen.height / 2) - (winHeight / 2);
-        var winLeft = (screen.width / 2) - (winWidth / 2);
-        window.open(url, 'sharer', 'top=' + winTop + ',left=' + winLeft + ',toolbar=0,status=0,width=' + winWidth + ',height=' + winHeight);
-    }
-
-    // Returns the URL of the JSON result
-    $scope.getAPIUrl = function() {
-        return '/api/results/' + $scope.runId;
+        API.relaunchTest($scope.result);
     };
 
     loadResults();

front/src/js/controllers/indexCtrl.js

@@ -1,9 +1,23 @@
 var indexCtrl = angular.module('indexCtrl', []);
 
-indexCtrl.controller('IndexCtrl', ['$scope', '$location', 'API', function($scope, $location, API) {
+indexCtrl.controller('IndexCtrl', ['$scope', '$routeParams', '$location', 'Settings', 'API', function($scope, $routeParams, $location, Settings, API) {
+    
+    $scope.settings = Settings.getMergedSettings();
+
     $scope.launchTest = function() {
         if ($scope.url) {
-            API.launchTest($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/queueCtrl.js

@@ -5,26 +5,50 @@ queueCtrl.controller('QueueCtrl', ['$scope', '$routeParams', '$location', 'Runs'
 
     var numberOfTries = 0;
     
+    var favicon = document.querySelector('link[rel=icon]');
+    var faviconUrl = 'img/favicon.png';
+    var faviconSuccessUrl = 'img/favicon-success.png';
+    var faviconFailUrl = 'img/favicon-fail.png';
+    var faviconInterval = null;
+    var faviconCounter = 0;
+    var faviconCanvas = null;
+    var faviconCanvasContext = null;
+    var faviconImage = null;
+    
     function getRunStatus () {
         Runs.get({runId: $scope.runId}, function(data) {
             $scope.url = data.params.url;
             $scope.status = data.status;
+            $scope.progress = data.progress;
             $scope.notFound = false;
             $scope.connectionLost = false;
 
-            if (data.status.statusCode === 'running' || data.status.statusCode === 'awaiting') {
+            if (data.status.statusCode === 'awaiting') {
                 numberOfTries ++;
+                rotateFavicon();
 
-                // Retrying in 2 seconds (and increasing the delay a bit more each time)
+                // Retrying every 2 seconds (and increasing the delay a bit more each time)
                 setTimeout(getRunStatus, 2000 + (numberOfTries * 100));
 
+            } else if (data.status.statusCode === 'running') {
+                numberOfTries ++;
+                rotateFavicon();
+
+                // Retrying every second or so
+                setTimeout(getRunStatus, 1000 + (numberOfTries * 10));
+
             } else if (data.status.statusCode === 'complete') {
+                stopFavicon(true);
+
                 $location.path('/result/' + $scope.runId).replace();
             } else {
-                // Handled by the view
+                stopFavicon(false);
+
+                // The rest is handled by the view
             }
         }, function(response) {
             if (response.status === 404) {
+                stopFavicon(false);
                 $scope.notFound = true;
                 $scope.connectionLost = false;
             } else if (response.status === 0) {
@@ -35,6 +59,40 @@ queueCtrl.controller('QueueCtrl', ['$scope', '$routeParams', '$location', 'Runs'
             }
         });
     }
+
+    function rotateFavicon() {
+        if (!faviconInterval) {
+            faviconImage = new Image();
+            faviconImage.onload = function() {
+                faviconCanvas = document.getElementById('faviconRotator');
+                faviconCanvasContext = faviconCanvas.getContext('2d');
+                faviconCanvasContext.fillStyle = '#212240';
+                
+                if (!!faviconCanvasContext) {
+                    faviconInterval = window.setInterval(faviconTick, 300);
+                }
+            };
+            faviconImage.src = faviconUrl;
+        }
+    }
+
+    function faviconTick() {
+        faviconCounter ++;
+        faviconCanvasContext.save();
+        faviconCanvasContext.fillRect(0, 0, 32, 32);
+        faviconCanvasContext.translate(16, 16);
+        faviconCanvasContext.rotate(22.5 * faviconCounter * Math.PI / 180);
+        faviconCanvasContext.translate(-16, -16);
+        faviconCanvasContext.drawImage(faviconImage, 0, 0, 32, 32);
+        faviconCanvasContext.restore();
+        favicon.href = faviconCanvas.toDataURL('image/png');
+    }
+
+    function stopFavicon(isSuccess) {
+        window.clearInterval(faviconInterval);
+        faviconInterval = null;
+        favicon.href = isSuccess ? faviconSuccessUrl : faviconFailUrl;
+    }
     
     getRunStatus();
 }]);

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,39 @@ 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
+                    }
+                }
+            };
+        }
     }
 
     $scope.backToDashboard = function() {
@@ -29,7 +71,7 @@ ruleCtrl.controller('RuleCtrl', ['$scope', '$rootScope', '$routeParams', '$locat
     };
 
     $scope.testAgain = function() {
-        API.launchTest($scope.result.params.url);
+        API.relaunchTest($scope.result);
     };
 
     loadResults();

front/src/js/controllers/screenshotCtrl.js

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

front/src/js/controllers/timelineCtrl.js

@@ -1,140 +0,0 @@
-var timelineCtrl = angular.module('timelineCtrl', []);
-
-timelineCtrl.controller('TimelineCtrl', ['$scope', '$rootScope', '$routeParams', '$location', '$timeout', 'Menu', 'Results', 'API', function($scope, $rootScope, $routeParams, $location, $timeout, Menu, Results, API) {
-    $scope.runId = $routeParams.runId;
-    $scope.Menu = Menu.setCurrentPage('timeline', $scope.runId);
-
-    function loadResults() {
-        // Load result if needed
-        if (!$rootScope.loadedResult || $rootScope.loadedResult.runId !== $routeParams.runId) {
-            Results.get({runId: $routeParams.runId}, function(result) {
-                $rootScope.loadedResult = result;
-                $scope.result = result;
-                render();
-            });
-        } else {
-            $scope.result = $rootScope.loadedResult;
-            render();
-        }
-    }
-
-    function render() {
-        initExecutionTree();
-        initTimeline();
-        $timeout(initProfiler, 100);
-    }
-
-    function initExecutionTree() {
-        var originalExecutions = $scope.result.javascriptExecutionTree.children || [];
-        $scope.executionTree = [];
-
-        originalExecutions.forEach(function(node) {
-
-            // Prepare a faster angular search by creating a kind of search index
-            node.searchIndex = (node.data.callDetails) ? [node.data.type].concat(node.data.callDetails.arguments).join('°°') : node.data.type;
-
-            $scope.executionTree.push(node);
-        });
-    }
-
-    function initTimeline() {
-
-        // Split the timeline into 200 intervals
-        var numberOfIntervals = 199;
-        var lastEvent = $scope.executionTree[$scope.executionTree.length - 1];
-        $scope.endTime =  lastEvent.data.timestamp + (lastEvent.data.time || 0);
-        $scope.timelineIntervalDuration = $scope.endTime / numberOfIntervals;
-        
-        // Pre-fill array of as many elements as there are milleseconds
-        var millisecondsArray = Array.apply(null, new Array($scope.endTime + 1)).map(Number.prototype.valueOf,0);
-        
-        // Create the milliseconds array from the execution tree
-        $scope.executionTree.forEach(function(node) {
-            if (node.data.time !== undefined) {
-
-                // Ignore artefacts (durations > 100ms)
-                var time = Math.min(node.data.time, 100) || 1;
-
-                for (var i=node.data.timestamp, max=node.data.timestamp + time ; i<max ; i++) {
-                    millisecondsArray[i] |= 1;
-                }
-            }
-        });
-
-        // Pre-fill array of 200 elements
-        $scope.timeline = Array.apply(null, new Array(numberOfIntervals + 1)).map(Number.prototype.valueOf,0);
-
-        // Create the timeline from the milliseconds array
-        millisecondsArray.forEach(function(value, timestamp) {
-            if (value === 1) {
-                $scope.timeline[Math.floor(timestamp / $scope.timelineIntervalDuration)] += 1;
-            }
-        });
-        
-        // Get the maximum value of the array (needed for display)
-        $scope.timelineMax = Math.max.apply(Math, $scope.timeline);
-    }
-
-
-    function initProfiler() {
-        $scope.profilerData = $scope.executionTree;
-    }
-
-
-    function parseBacktrace(str) {
-        if (!str) {
-            return null;
-        }
-
-        var out = [];
-        var splited = str.split(' / ');
-        splited.forEach(function(trace) {
-            var result = /^(\S*)\s?\(?(https?:\/\/\S+):(\d+)\)?$/g.exec(trace);
-            if (result && result[2].length > 0) {
-                var filePath = result[2];
-                var chunks = filePath.split('/');
-                var fileName = chunks[chunks.length - 1];
-
-                out.push({
-                    fnName: result[1],
-                    fileName: fileName,
-                    filePath: filePath,
-                    line: result[3]
-                });
-            }
-        });
-        return out;
-    }
-
-    $scope.filter = function(textFilter, scriptName) {
-
-    };
-
-    $scope.onNodeDetailsClick = function(node) {
-        var isOpen = node.showDetails;
-        if (!isOpen) {
-            // Close all other nodes
-            $scope.executionTree.forEach(function(currentNode) {
-                currentNode.showDetails = false;
-            });
-
-            // Parse the backtrace
-            if (!node.parsedBacktrace) {
-                node.parsedBacktrace = parseBacktrace(node.data.backtrace);
-            }
-
-        }
-        node.showDetails = !isOpen;
-    };
-
-    $scope.backToDashboard = function() {
-        $location.path('/result/' + $scope.runId);
-    };
-
-    $scope.testAgain = function() {
-        API.launchTest($scope.result.params.url);
-    };
-
-    loadResults();
-
-}]);

front/src/js/directives/offendersDirectives.js

@@ -1,50 +1,195 @@
-var offendersDirectives = angular.module('offendersDirectives', []);
+(function() {
+    "use strict";
+    var offendersDirectives = angular.module('offendersDirectives', []);
 
-offendersDirectives.directive('domTree', function() {
-    return {
-        restrict: 'E',
-        scope: {
-            tree: '='
-        },
-        template: '<div class="domTree"></div>',
-        replace: true,
-        link: function(scope, element, attrs) {
-            
-            function recursiveHtmlBuilder(tree) {
-                var html = '';
-                var keys = Object.keys(tree);
-                
-                keys.forEach(function(key) {
-                    if (isNaN(tree[key])) {
-                        html += '<div><span>' + key + '</span>' + recursiveHtmlBuilder(tree[key]) + '</div>';
-                    } else if (tree[key] > 1) {
-                        html += '<div><span>' + key + ' <span>(x' + tree[key] + ')</span></span></div>';
-                    } else {
-                        html += '<div><span>' + key + '</span></div>';
-                    }
-                });
+    function getdomTreeHTML(tree) {
+        return '<div class="domTree">' + getdomTreeInnerHTML(tree) + '</div>';
+    }
 
-                return html;
+    function getdomTreeInnerHTML(tree) {
+        return recursiveHtmlBuilder(tree);
+    }
+
+    function recursiveHtmlBuilder(tree) {
+        var html = '';
+        var keys = Object.keys(tree);
+        
+        keys.forEach(function(key) {
+            if (isNaN(tree[key])) {
+                html += '<div><span>' + key + '</span>' + recursiveHtmlBuilder(tree[key]) + '</div>';
+            } else if (tree[key] > 1) {
+                html += '<div><span>' + key + ' <span>(x' + tree[key] + ')</span></span></div>';
+            } else {
+                html += '<div><span>' + key + '</span></div>';
             }
+        });
 
-            element.append(recursiveHtmlBuilder(scope.tree));
+        return html;
+    }
+
+    offendersDirectives.directive('domTree', function() {
+        return {
+            restrict: 'E',
+            scope: {
+                tree: '='
+            },
+            template: '<div class="domTree"></div>',
+            replace: true,
+            link: function(scope, element) {
+                element.append(getdomTreeInnerHTML(scope.tree));
+            }
+        };
+    });
+
+    function getDomElementButtonHTML(obj, onASingleLine) {
+        if (obj.tree && !onASingleLine) {
+            return '<div class="offenderButton opens">' + getDomElementButtonInnerHTML(obj, onASingleLine) + '</div>';
+        } else {
+            return '<div class="offenderButton">' + getDomElementButtonInnerHTML(obj, onASingleLine) + '</div>';
         }
-    };
-});
+    }
 
-offendersDirectives.directive('domElementButton', function() {
-    return {
-        restrict: 'E',
-        scope: {
-            obj: '='
-        },
-        templateUrl: 'views/domElementButton.html',
-        replace: true
-    };
-});
+    function getDomElementButtonInnerHTML(obj, onASingleLine) {
+        if (obj.type === 'html' ||
+            obj.type === 'body' ||
+            obj.type === 'head' ||
+            obj.type === 'window' ||
+            obj.type === 'document' ||
+            obj.type === 'fragment') {
+                return obj.type;
+        }
 
-offendersDirectives.filter('shortenUrl', function() {
-    return function(url, maxLength) {
+        if (obj.type === 'notAnElement') {
+            return 'Incorrect element';
+        }
+
+        var html = '';
+        if (obj.type === 'domElement') {
+            html = 'DOM element <b>' + obj.element + '</b>';
+        } else if (obj.type === 'fragmentElement') {
+            html = 'Fragment element <b>' + obj.element + '</b>';
+        } else if (obj.type === 'createdElement') {
+            html = 'Created element <b>' + obj.element + '</b>';
+        }
+
+        if (obj.tree && !onASingleLine) {
+            html += getdomTreeHTML(obj.tree);
+        }
+
+        return html;
+    }
+
+    offendersDirectives.directive('domElementButton', function() {
+        return {
+            restrict: 'E',
+            scope: {
+                obj: '='
+            },
+            template: '<div class="offenderButton" ng-class="{opens: obj.tree}"></div>',
+            replace: true,
+            link: function(scope, element) {                
+                element.append(getDomElementButtonInnerHTML(scope.obj));
+            }
+        };
+    });
+
+    offendersDirectives.filter('lastDOMNode', function() {
+        return function(str) {
+            var splited = str.split(' > ');
+            return splited[splited.length - 1];
+        };
+    });
+
+    function getBacktraceHTML(backtrace) {
+        var html = '';
+        var parsedBacktrace = parseBacktrace(backtrace);
+
+        if (!parsedBacktrace || parsedBacktrace.length === 0) {
+            html += '<div><div>can\'t find any backtrace :/</div></div>';
+        } else {
+            for (var i = 0 ; i < parsedBacktrace.length ; i++) {
+                html += '<div>';
+                html += '<div>' + (parsedBacktrace[i].fnName || '(anonymous function)') + '</div>';
+                html += '<div class="trace">' + getUrlLink(parsedBacktrace[i].filePath, 40) + '</div>';
+                if (parsedBacktrace[i].column) {
+                    html += '<div>' + parsedBacktrace[i].line + ':' + parsedBacktrace[i].column + '</div>';    
+                } else {
+                    html += '<div>line ' + parsedBacktrace[i].line + '</div>';
+                }
+                html += '</div>';
+            }
+        }
+
+        return html;
+    }
+
+    function parseBacktrace(str) {
+        if (!str) {
+            return null;
+        }
+
+        var out = [];
+        var splited = str.split(' / ');
+        
+        try {
+
+            splited.forEach(function(trace) {
+                var fnName = null, fileAndLine;
+
+                var withFnResult = /^([^\s\(]+) \((.+:\d+)\)$/.exec(trace);
+                
+                if (withFnResult === null) {
+                    // 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 {
+                    fnName = withFnResult[1];
+                    fileAndLine = withFnResult[2];
+                }
+
+                // 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];
+
+                // Filter phantomas code
+                if (filePath.indexOf('phantomjs://') === -1) {
+                    out.push({
+                        fnName: fnName,
+                        filePath: filePath,
+                        line: line,
+                        column: column
+                    });
+                }
+            });
+
+        } catch(e) {
+            return null;
+        }
+
+        return out;
+    }
+
+    function shortenUrl(url, maxLength) {
         if (!maxLength) {
             maxLength = 110;
         }
@@ -54,67 +199,109 @@ offendersDirectives.filter('shortenUrl', function() {
         var rightLength = Math.ceil((maxLength - 5) / 2.1);
 
         return (url.length > maxLength) ? url.substr(0, leftLength) + ' ... ' + url.substr(-rightLength) : url;
-    };
-});
+    }
 
-offendersDirectives.directive('urlLink', function() {
-    return {
-        restrict: 'E',
-        scope: {
-            url: '=',
-            maxLength: '='
-        },
-        template: '<a href="{{url}}" target="_blank" title="{{url}}">{{url | shortenUrl:maxLength}}</a>',
-        replace: true
-    };
-});
+    offendersDirectives.filter('shortenUrl', function() {
+        return shortenUrl;
+    });
 
-offendersDirectives.filter('encodeURIComponent', function() {
-    return window.encodeURIComponent;
-});
+    function getUrlLink(url, maxLength) {
+        return '<a href="' + url + '" target="_blank" title="' + url + '">' + shortenUrl(url, maxLength) + '</a>';
+    }
 
-offendersDirectives.directive('fileAndLine', function() {
-    return {
-        restrict: 'E',
-        scope: {
-            file: '=',
-            line: '=',
-            column: '='
-        },
-        template: '<span><span ng-if="file"><url-link url="file" max-length="60"></url-link></span><span ng-if="!file">&lt;inline CSS&gt;</span> @ {{line}}:{{column}}</span>',
-        replace: true
-    };
-});
+    offendersDirectives.directive('urlLink', function() {
+        return {
+            restrict: 'E',
+            scope: {
+                url: '=',
+                maxLength: '='
+            },
+            template: '<a href="{{url}}" target="_blank" title="{{url}}">{{url | shortenUrl:maxLength}}</a>',
+            replace: true
+        };
+    });
 
-offendersDirectives.directive('fileAndLineButton', function() {
-    return {
-        restrict: 'E',
-        scope: {
-            file: '=',
-            line: '=',
-            column: '='
-        },
-        template: '<div class="offenderButton opens">css file<div class="cssFileAndLine"><file-and-line file="file" line="line" column="column" button="true"></file-and-line></div></div>',
-        replace: true
-    };
-});
+    offendersDirectives.filter('encodeURIComponent', function() {
+        return window.encodeURIComponent;
+    });
 
-offendersDirectives.directive('offenderButton', function() {
-    return {
-        restrict: 'C',
-        link: function(scope, element, attrs) {
+    offendersDirectives.directive('fileAndLine', function() {
+        return {
+            restrict: 'E',
+            scope: {
+                file: '=',
+                line: '=',
+                column: '='
+            },
+            template: '<span><span ng-if="file"><url-link url="file" max-length="60"></url-link></span><span ng-if="!file">&lt;inline CSS&gt;</span><span ng-if="line !== null && column !== null"> @ {{line}}:{{column}}</span></span>',
+            replace: true
+        };
+    });
 
-            console.log('initializing touchstart');
+    offendersDirectives.directive('fileAndLineButton', function() {
+        return {
+            restrict: 'E',
+            scope: {
+                file: '=',
+                line: '=',
+                column: '='
+            },
+            template: '<div class="offenderButton opens">css file<div class="cssFileAndLine"><file-and-line file="file" line="line" column="column" button="true"></file-and-line></div></div>',
+            replace: true
+        };
+    });
 
-            element.bind('touchstart mouseenter', function(e) {
-                element.addClass('mouseOver');
-                e.preventDefault();
-            });
+    offendersDirectives.filter('bytes', function() {
+        return function(bytes) {
+            if (isNaN(parseFloat(bytes)) || !isFinite(bytes)) {
+                return '-';
+            }
+            
+            var kilo = bytes / 1024;
 
-            element.bind('touchend mouseleave click', function(e) {
-                element.removeClass('mouseOver');
-                e.preventDefault();
-            });
-        }
-    };
-});
+            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;
+        };
+    });
+
+    offendersDirectives.filter('roundNbr', function() {
+        return function(nbr) {
+            return Math.round(nbr);
+        };
+    });
+
+})();

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

@@ -4,23 +4,61 @@ apiService.factory('API', ['$location', 'Runs', 'Results', function($location, R
 
     return {
 
-        launchTest: function(url) {
-            Runs.save({
+        launchTest: function(url, settings) {
+            var runObject = {
                 url: url,
                 waitForResponse: false,
-                screenshot: true
-            }, function(data) {
+                screenshot: true,
+                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.domainsBlockOrAllow === 'block') {
+                runObject.blockDomain = this.parseDomains(settings.domains);
+            } else if (settings.domainsBlockOrAllow === 'allow') {
+                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...');
                 }
             });
+        },
+
+        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/menuService.js

@@ -22,9 +22,6 @@ menuService.factory('Menu', ['$location', function($location) {
                 case 'dashboard':
                     $location.path('/result/' + currentRunId);
                     break;
-                case 'timeline':
-                    $location.path('/result/' + currentRunId + '/timeline');
-                    break;
                 default:
                     console.err('Undefined Menu.changePage() destination');
             }

front/src/js/services/settingsService.js

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

front/src/less/about.less

@@ -1,6 +1,10 @@
 .about {
     margin: 3em auto;
-    width: 50%;
+    width: 80%;
+
+    @media (min-width: 640px) {
+        width: 50%;
+    }
 }
 
 .about p {
@@ -8,5 +12,9 @@
 }
 
 .about a {
-    color: #FFF;
+    color: #fff;
+}
+
+.sponsor {
+    color: #ffa319;
 }

front/src/less/dashboard.less

@@ -7,16 +7,8 @@
 }
 
 .summary .globalScore {
-    display: table;
-    width: 60%;
     margin: 3em auto;
 
-    > div {
-        display: table-cell;
-        width: 50%;
-        vertical-align: middle;
-    }
-
     .globalGrade {
         margin: 0.5 auto;
         width: 2.5em;
@@ -24,12 +16,10 @@
         line-height: 2.5em;
         border-radius: 0.5em;
         font-size: 3em;
-        font-weight: bold;
         vertical-align: middle;
     }
     .on100 {
         font-size: 1.2em;
-        font-weight: bold;
         margin: 0.5em 0 1em;
     }
 
@@ -51,40 +41,87 @@
             opacity: 0.85;
         }
     }
+
+    .screenshotWrapper.phone:hover:after {
+        top: 1.7em;
+        left: 0.64em;
+    }
+
+    .screenshotWrapper.tablet:hover:after {
+        top: 1.5em;
+        left: 0.9em;
+    }
+
+    @media (min-width: 820px) {
+        width: 65%;
+        display: table;
+
+        > div {
+            display: table-cell;
+            width: 50%;
+            vertical-align: middle;
+        }
+    }
 }
 
 .summary .notations {
+    width: 100%;
     display: table;
-    width: 80%;
-    margin: 0 10% 1.5em;
-    border-spacing: 1em;
+    margin: 0 0 1.5em;
+    border-spacing: 0 1em;
+
+    @media (min-width: 820px) {
+        width: 80%;
+        margin: 0 10% 1.5em;
+        border-spacing: 1em;
+    }
 }
 .summary .notations > div {
     display: table-row;
 }
 .summary .notations > div > div {
-    display: table-cell;
-    height: 2.5em;
     vertical-align: middle;
+
+    @media (min-width: 820px) {
+        display: table-cell;
+        height: 2.5em;
+    }
 }
 .summary .notations .category {
-    font-weight: bold;
-    text-align: center;
-    width: 20%;
+    font-size: 1.2em;
+    width: 50%;
+    float: left;
+    text-align: left;
+    margin: 0.5em 0.25em;
+
+    @media (min-width: 820px) {
+        width: 20%;
+        text-align: center;
+        float: none;
+    }
 }
 .summary .notations .criteria {
     font-weight: normal;
-    width: 75%;
+
+    @media (min-width: 820px) {
+        width: 75%;
+    }
 }
 .A, .B, .C, .D, .E, .F, .NA {
     .summary .notations &.categoryScore {
         width: 2.5em;
         max-width: 2.5em;
         min-width: 2.5em;
-        font-size: 2em;
+        margin: 0.2em;
+        font-size: 1.5em;
         text-align: center;
         border-radius: 0.5em;
-        font-weight: bold;
+        float: right;
+
+        @media (min-width: 820px) {
+            float: none;
+            font-size: 2em;
+        }
     }
     .summary .notations .grade & {
         width: 1em;
@@ -98,13 +135,17 @@
 
 .summary .notations .criteria .table {
     width: 100%;
-    > div:hover > div {
-        background: #EBD8E2;
+    > a {
+        text-decoration: none;
+        color: inherit;
+    }
+    > a:hover > div {
+        background: #d8ebe0;
         cursor: pointer;
         &.info {
             background: #FFF;
-            .icon-question {
-                color: #EBD8E2;
+            svg {
+                fill: #d8ebe0;
             }
         }
     }
@@ -120,59 +161,39 @@
 }
 .summary .notations .criteria .result {
     width: 18%;
-    font-weight: bold;
     white-space: nowrap;
     text-align: center;
     vertical-align: middle;
 }
-.summary .notations .warning .label, .summary .notations .warning .result, .summary .notations .icon-warning {
+.summary .notations .warning .label, .summary .notations .warning .result {
     color: #FF1919;
 }
+.summary .notations .icon-warning svg {
+    fill: #FF1919;
+    margin: -2px 0;
+}
 .summary .notations .criteria .info {
-    width: 2%;
-    text-align: center;
-    vertical-align: middle;
-    background: #FFF;
-    padding-left: 0.1em;
-    padding-right: 0.1em;
+    display: none;
+
+    @media (min-width: 820px) {
+        display: table-cell;
+        width: 2%;
+        text-align: center;
+        vertical-align: middle;
+        background: #FFF;
+        padding-left: 0.1em;
+        padding-right: 0.1em;
+    }
 }
-.summary .notations .criteria .icon-question {
-    color: transparent;
+.summary .notations .criteria .info svg {
+    fill: transparent;
 }
 
-.summary .fromShare {
-    margin-bottom: 3em;
-}
-
-.summary .apiTip {
-    font-size: 0.8em;
+.summary .sponsor {
+    font-size: 0.9em;
     margin-bottom: 4em;
-    color: #413;
+    color: #ffa319;
     a {
         color: inherit;
     }
-}
-
-.summary .tweet {
-    .tweetText {
-        color: #413;
-        background: #F2F2F2;
-        border: none;
-        width: 25em;
-        padding: 0.4em;
-        border-radius: 0.5em;
-        box-shadow: 0.05em 0.1em 0 0 #999;
-    }
-    .tweetButton, .linkedinButton {
-        color: #413;
-        background: #F2F2F2;
-        margin-right: 0;
-        &:hover {
-            color: #F2F2F2;
-            background: #e74c3c;
-        }
-    }
-    input {
-        font-size: 0.9em;
-    }
 }

front/src/less/icons.less

@@ -1,56 +0,0 @@
-@warning-font-family: "fontsmith-icons";
-@warning-value: "\e000";
-@warning: '"fontsmith-icons"' '"\\e000"';
-@question-font-family: "fontsmith-icons";
-@question-value: "\e001";
-@question: '"fontsmith-icons"' '"\\e001"';
-@lab-font-family: "fontsmith-icons";
-@lab-value: "\e004";
-@lab: '"fontsmith-icons"' '"\\e004"';
-@list-font-family: "fontsmith-icons";
-@list-value: "\e003";
-@list: '"fontsmith-icons"' '"\\e003"';
-@bars-font-family: "fontsmith-icons";
-@bars-value: "\e005";
-@bars: '"fontsmith-icons"' '"\\e005"';
-@arrow-left3-font-family: "fontsmith-icons";
-@arrow-left3-value: "\e006";
-@arrow-left3: '"fontsmith-icons"' '"\\e006"';
-@loop-font-family: "fontsmith-icons";
-@loop-value: "\e002";
-@loop: '"fontsmith-icons"' '"\\e002"';
-
-.icon-font-family(@char) {
-  font-family: ~`@{char}[0]`;
-}
-
-.icon-font() {
-  speak: none;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-  -webkit-font-smoothing: antialiased;
-}
-
-.icon-content(@char) {
-  content: ~`@{char}[1]`;
-}
-
-.icon(@char) {
-  .icon-font-family(@char);
-  .icon-font();
-
-  &:before {
-    .icon-content(@char);
-  }
-}
-
-@font-face {
-  font-family: "fontsmith-icons";
-  src:url("/fonts/icons.woff") format("woff"),
-    ;
-  font-weight: normal;
-  font-style: normal;
-}

front/src/less/index.less

@@ -1,32 +1,200 @@
 .promess {
-    padding: 0em 2em 3em;
+    padding: 0em 2em;
+    margin-bottom: 0.5em;
     font-weight: normal;
     font-size: 1.2em;
 }
 
+.price {
+    padding: 0em 2em 3em;
+    margin-top: 0em;
+    font-size: 0.9em;
+}
+
 .url {
     width: 50%;
 }
 
 .launchBtn {
-    background: #e74c3c;
+    background: #ffa319;
     color: #fff;
+    &:focus {
+        background: #e74c3c;
+    }
     &.disabled {
-        background: #deaca6;
+        background: #f1bd70;
+        &:focus {
+            color: #ddd;
+        }
+    }
+    
+}
+
+.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 {
+        display: inline-block;
+        margin: 1em 0.75em;
+        width: 5.5em;
+        height: 5.5em;
+        color: #FFF;
+        border: 1px solid #FFF;
+        padding: 1px;
+        border-radius: 0.5em;
+        cursor: pointer;
+        text-decoration: none;
+        font-size: 0.8em;
+
+        > svg {
+            display: block;
+            margin: 0.6em auto 0.3em;
+            fill: #fff;
+        }
+
+        &.active {
+            color: #ffa319;
+            border: 2px solid #ffa319;
+            padding: 0;
+
+            > svg {
+                fill: #ffa319;
+            }
+        }
+
+        &:hover {
+            color: #ffa319;
+
+            > svg {
+                fill: #ffa319;
+            }
+        }
+    }
+}
+
+.settingsTooltip {
+    position: relative;
+    svg {
+        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;
+        word-break: break-all;
+        word-break: break-word;
+        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;
+    color: #8abfaf;
 
     > div {
-        width: 33.3%;
-        display: table-cell;
-        padding: 0 1.5em;
+        @media (min-width: 640px) {
+            width: 33.3%;
+            display: table-cell;
+            padding: 0 1.5em;
+        }
+    }
+
+    h3 {
+        font-size: 1.5em;
+        font-weight: normal;
+        color: #fff;
     }
 }
 
@@ -37,7 +205,6 @@ input[type=submit], input.url {
     height: 2em;
     border: 0 solid;
     border-radius: 0.5em;
-    box-shadow: 0.1em 0.2em 0 0 #5e2846;
     outline: none;
 }
 input[type=submit]:hover {
@@ -49,4 +216,8 @@ input[type=submit].clicked {
     left: 0.1em;
     top: 0.2em;
     box-shadow: none;
+}
+
+.homeSponsor {
+    margin-top: 3em;
 }

front/src/less/main.less

@@ -1,13 +1,14 @@
-@import "icons.less";
-
 html {
-    margin: 100px 50px;
+    margin: 35px 5px;
+    @media (min-width: 640px) {
+        margin: 100px 50px;
+    }
 }
 
 body {
     margin: 0 auto;
     max-width: 1280px;
-    background: #9c4274;
+    background: #212240;
     color: #fff;
     font-size: 16px;
     text-align: center;
@@ -21,41 +22,61 @@ input[type=submit] {
     cursor: pointer;
 }
 
-h1 span {
-    display: inline-block;
-    height: 1em;
-    width: 1em;
-    color: #ffa319;
+h1 {
+    font-weight: 200;
 }
 
 .resultsMenu {
     margin-top: 2em;
 }
 .resultsMenu .menuItem {
+    font-size: 0.8em;
     display: inline-block;
-    margin: 1em;
-    width: 8em;
+    width: 7em;
     height: 7em;
     color: #fff;
-    border: 3px solid #fff;
-    border-radius: 0.5em;
     cursor: pointer;
     text-decoration: none;
+
+    @media (min-width: 640px) {
+        font-size: 1em;
+        margin: 1em;
+        width: 8em;
+        border: 2px solid #fff;
+        border-radius: 0.5em;
+    }
+
+    svg {
+        fill: #fff;
+    }
+
     &.back, &.restart {
-        color: #413;
-        border-color: #413;
+        color: #fff;
+        border-color: #fff;
     }
 }
 .resultsMenu .menuItem div {
     padding-top: 0.5em;
     font-size: 3em;
 }
+.resultsMenu svg {
+    display: block;
+    margin: 1.2em auto 0.2em;
+}
 .resultsMenu .active, .resultsMenu .menuItem.active:hover {
     color: #ffa319;
     border-color: #ffa319;
+
+    svg {
+        fill: #ffa319;
+    }
 }
 .resultsMenu .menuItem:hover {
     color: #ffa319;
+
+    svg {
+        fill: #ffa319;
+    }
 }
 .resultsMenu span {
     position: relative;
@@ -126,11 +147,27 @@ a.linkButton {
 }
 
 
-.screenshotWrapper.desktop {
+.screenshotWrapper {
     display: inline-block;
     position: relative;
-    border: 0.2em solid #AAA;
     background: #000;
+
+    > div {
+        position: relative;
+        overflow: hidden;
+    }
+
+    .screenshotImage {
+        width: 100%;
+    }
+
+    .screenshotError {
+        color: #fff;
+    }
+}
+
+.screenshotWrapper.desktop, .screenshotWrapper.desktop-hd {
+    border: 0.2em solid #AAA;
     padding: 0.5em;
     border-top-left-radius: 0.4em;
     border-top-right-radius: 0.4em;
@@ -159,54 +196,103 @@ a.linkButton {
 
     > div {
         width: 12em;
-        height: 6.75em;
-        overflow: scroll;
-        position: relative;
-    }
-
-    .screenshotImage {
-        width: 100%;
+        height: 7.5em;
     }
 }
 
+.screenshotWrapper.phone {
+    border: 0.07em solid #CCC;
+    padding: 1em 0.3em 1.5em;
+    border-radius: 0.6em;
 
-.star {
-    font-weight: bold;
-    span {
-        font-size: 1.2em;
+    &:before {
+        position: absolute;
+        width: 0.8em;
+        height: 0.8em;
+        bottom: 0.3em;
+        left: 3.3em;
+        border: 0.07em solid #CCC;
+        border-radius: 0.5em;
+        content: " ";
     }
+
+    &:after {
+        position: absolute;
+        width: 1em;
+        height: 0.1em;
+        bottom: 13.9em;
+        left: 3.2em;
+        background: #555;
+        border-radius: 0.05em;
+        content: " ";
+    }
+
+    > div {
+        width: 6.75em;
+        height: 12em;
+    }
+}
+
+.screenshotWrapper.tablet {
+    border: 0.07em solid #CCC;
+    padding: 0.8em 0.5em 0.9em;
+    border-radius: 0.6em;
+
+    &:before {
+        position: absolute;
+        width: 0.5em;
+        height: 0.5em;
+        bottom: 0.15em;
+        left: 4.35em;
+        border: 0.07em solid #CCC;
+        border-radius: 0.4em;
+        content: " ";
+    }
+
+    > div {
+        width: 8em;
+        height: 12.8em;
+    }
+}
+
+.table {
+    display: table;
+    width: 100%;
+    border-spacing: 0.25em;
+}
+.table > div,
+.table > a {
+    display: table-row;
+}
+.table > .headers > div {
+    font-weight: bold;
+    padding: 0.5em 1em;
+}
+.table > div > div,
+.table > a > div {
+    padding: 0.1em 1em;
+    background: #f2f2f2;
+    display: table-cell;
+    text-align: left;
 }
 
 .footer {
     padding: 3em;
-    color: #413;
+    color: #fff;
     a {
         color: inherit;
     }
     .version {
         font-size: 0.7em;
     }
+    .github {
+        margin: 1em 0 0 0.5em;
+    }
+    .sponsor {
+        font-size: 0.9em;
+    }
 }
 
-/* Icons */
-.icon-lab {
-    .icon(@lab);
-}
-.icon-question {
-    .icon(@question);
-}
-.icon-warning {
-    .icon(@warning);
-}
-.icon-back {
-    .icon(@arrow-left3);
-}
-.icon-summary {
-    .icon(@list);
-}
-.icon-spaghetti {
-    .icon(@bars);
-}
-.icon-loop {
-    .icon(@loop);
+.homeSponsor {
+    color: #ffa319;
 }

front/src/less/queue.less

@@ -6,4 +6,19 @@
 .statusSubMessage {
     font-size: 0.8em;
     margin-bottom: 6em;
+}
+
+.progressBarEmpty {
+    width: 90%;
+    max-width: 300px;
+    margin: 1em auto;
+    padding: 0.05em;
+    border: 1px solid #ffa319;
+}
+
+.progressBarFilled {
+    width: 5%;
+    height: 0.5em;
+    background: #ffa319;
+    transition: width 3s ease-out;
 }

front/src/less/rule.less

@@ -3,23 +3,27 @@
 }
 
 .rule .ruleTable {
-    display: table;
     border-spacing: 1em;
     width: 90%;
     margin: 2em auto;
     background: #f2f2f2;
     border: 1px dashed #666;
     border-radius: 0.5em;
-    > div {
-        display: table-cell;
-        vertical-align: middle;
-    }
-    .left {
-        width: 33%;
-        font-weight: bold;
-    }
-    .right {
-        width: 67%;
+
+    @media (min-width: 820px) {
+        display: table;
+
+        > div {
+            display: table-cell;
+            vertical-align: middle;
+        }
+
+        .left {
+            width: 33%;
+        }
+        .right {
+            width: 67%;
+        }
     }
 }
 
@@ -29,12 +33,21 @@
     height: 2em;
     width: 2em;
     border-radius: 0.5em;
-    margin: 0 auto 0.5em;
+    margin: 0 auto 0.25em;
+}
+
+.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;
     }
@@ -66,17 +79,23 @@
     border-spacing: 0 0.25em;
     margin: 0 auto;
     min-width: 10%;
-    max-width: 90%;
+    font-size: 0.875em;
+
+    @media (min-width: 820px) {
+        max-width: 90%;
+        font-size: 1em;
+    }
+
     > div {
         display: table-row;
         > div {
             display: table-cell;
             background: #f2f2f2;
-            padding: 0 1em;
+            padding: 0 0.25em;
             word-wrap: break-word;
             word-break: break-all;
             &:hover {
-                background: #EBD8E2;
+                background: #d8ebe0;
             }
         }
     }
@@ -90,7 +109,11 @@
     }
 }
 
-.offenders {
+.rule .startTime {
+    display: none;
+}
+
+.offendersTable, .value {
     .offenderButton {
         display: inline-block;
         position: relative;
@@ -99,6 +122,7 @@
         margin: 0.2em 0;
         border-radius: 0.4em;
         z-index: 1;
+        cursor: pointer;
 
         &.opens {
             padding-right: 0.75em;
@@ -120,6 +144,7 @@
             border-bottom-left-radius: 0.4em;
             border-bottom-right-radius: 0.4em;
             border-top: 1px solid #999;
+            z-index: 2;
         }
 
         .domTree {
@@ -140,7 +165,7 @@
             padding: 0.5em;
         }
 
-        &.opens.mouseOver {
+        &.opens:hover {
             border-bottom-left-radius: 0;
             border-bottom-right-radius: 0;
             background: #ffe0cc;
@@ -148,9 +173,14 @@
 
             > div {
                 display: block;
+                background: #ffe0cc;
             }
         }
     }
+
+    .smallerOffenders {
+        font-size: 0.9em;
+    }
 }
 
 .offendersHtml {
@@ -170,16 +200,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;
@@ -207,7 +239,6 @@
         &:hover:after {
             content: " ";
             position: absolute;
-            background-color: inherit;
             left: -0.2em;
             top: -0.2em;
             width: 100%;
@@ -216,4 +247,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/screenshot.less

@@ -3,6 +3,14 @@
 }
 
 .screenshot .screenshotWrapper {
-    font-size: 2.08333333333333em;
+    font-size: 1.2em;
     margin-bottom: 0.5em;
+
+    @media (min-width: 420px) {
+        font-size: 1.6em;
+    }
+
+    @media (min-width: 640px) {
+        font-size: 2.08333333333333em;
+    }
 }

front/src/less/timeline.less

@@ -1,271 +0,0 @@
-/* Timeline colors, related to Window Performances */
-@domCreationColor: #FF6600;
-@domCreationBg: #FFE0CC;
-@domContentLoadedColor: #A7E846;
-@domContentLoadedBg: #E0FFD1;
-@domContentLoadedEndColor: #7ECCCC;
-@domContentLoadedEndBg: #D8F0F0;
-@domCompleteColor: #C2A3FF;
-@domCompleteBg: #EDE3FF;
-@domInteractiveColor: #FFE433;
-@domInteractiveBg: #FFFCCC;
-
-.execution {
-    text-align: center;
-}
-
-.timeline {
-    margin: 2em 0 5em;
-}
-.timeline .chart {
-    position: relative;
-    width: 100%;
-    border-bottom: 1px solid #000;
-}
-.timeline .startTime, .timeline .endTime {
-    position: absolute;
-    bottom: 0.5em;
-    font-size: 0.8em;
-}
-.timeline .startTime {
-    left: 0em;
-}
-.timeline .endTime {
-    right: 0em;
-}
-.timeline .chartPoints {
-    display: table;
-    height: 100px;
-    width: 99%;
-    margin: 0 auto;
-}
-.timeline .interval {
-    display: table-cell;
-    position: relative;
-    height: 100px;
-    width: 0.5%;
-}
-.timeline .interval .color {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-}
-.timeline div.interval:hover {
-    background: #9C4274;
-}
-.timeline .interval:hover .color {
-    background: #F04DA7;
-}
-.timeline .domComplete.interval {
-    background: @domCompleteBg;
-}
-.timeline .domComplete .color {
-    background: @domCompleteColor;
-}
-.timeline .domContentLoadedEnd.interval {
-    background: @domContentLoadedEndBg;
-}
-.timeline .domContentLoadedEnd .color {
-    background: @domContentLoadedEndColor;
-}
-.timeline .domContentLoaded.interval {
-    background: @domContentLoadedBg;
-}
-.timeline .domContentLoaded .color {
-    background: @domContentLoadedColor;
-}
-.timeline .domInteractive.interval {
-    background: @domInteractiveBg;
-}
-.timeline .domInteractive .color {
-    background: @domInteractiveColor;
-}
-.timeline .domCreation.interval {
-    background: @domCreationBg;
-}
-.timeline .domCreation .color {
-    background: @domCreationColor;
-}
-.timeline .tooltip.detailsOverlay {
-    position: absolute;
-    display: none;
-    width: auto;
-    padding: 0.5em 1em;
-    top: -1.5em;
-    right: 1em;
-}
-.timeline .interval:hover .tooltip {
-    display: block;
-}
-
-.timeline .legend {
-    display: table;
-    width: 100%;
-    margin-top: 1em;
-}
-.timeline .legend > div {
-    display: table-row;
-}
-.timeline .legend > div > div {
-    position: relative;
-    display: table-cell;
-    margin-top: 1em;
-}
-.timeline .titles {
-    font-weight: bold;
-}
-.timeline .titles > div {
-    padding: 0 1em 0 2em;
-}
-.timeline .tips {
-    font-size: 0.7em;
-}
-.timeline .tips > div {
-    padding: 1em 1em 0 0;
-}
-.timeline .legend .color {
-    display: block;
-    position: absolute;
-    left: 0;
-    height: 1.5em;
-    width: 1.5em;
-    border-radius: 0.2em;
-}
-
-.filters {
-    margin: 1em auto;
-    padding: 0.5em;
-    min-width: 30em;
-    width: 30%;
-    border: 1px dotted #aaa;
-    text-align: left;
-}
-
-.slowRequestsLimit {
-    width: 3em;
-    font-size: 1em;
-    text-align: right;
-    border: 1px solid #aaa;
-}
-
-input.textFilter {
-    box-shadow: none;
-    font-size: 1em;
-    padding: 0 0.2em;
-    border: 1px solid #aaa;
-    border-radius: none;
-    width: 15em;
-}
-
-.table {
-    display: table;
-    width: 100%;
-    border-spacing: 0.25em;
-}
-
-.table > div {
-    display: table-row;
-}
-
-.table > .headers > div {
-    font-weight: bold;
-    padding: 0.5em 1em;
-}
-
-.table > div > div {
-    padding: 0.1em 1em;
-    background: #f2f2f2;
-    display: table-cell;
-    text-align: left;
-}
-.table > div.jsError > .type, .table > div.jsError > .value {
-    color: #e74c3c;
-    font-weight: bold;
-}
-.table > div.windowPerformance > div, .table > div.windowPerformance > div.startTime {
-    background: #EBD8E2;
-}
-.table > div.showingDetails > div {
-    background: #f1c40f;
-}
-
-.table > div > .index {
-    color: #bbb;
-}
-
-.table > div > .type {
-    white-space:nowrap;
-}
-
-.table > div > .value {
-    width: 70%;
-    word-break: break-all;
-}
-
-.table > div > .details {
-    position: relative;
-}
-.table .details .icon-question {
-    color: #f1c40f;
-    cursor: pointer;
-}
-.table .icon-warning {
-    display: inline-block;
-    width: 0.8em;
-}
-
-.detailsOverlay {
-    position: absolute;
-    right: 3em;
-    top: -3em;
-    width: 45em;
-    min-height: 1em;
-    padding: 0 1em 1em;
-    background: #fff;
-    border: 2px solid #f1c40f;
-    border-radius: 0.5em;
-    z-index: 1;
-}
-@media screen and (max-width: 1024px) {
-    .detailsOverlay {
-        width: 25em;
-    }
-}
-.detailsOverlay .closeBtn {
-    position: absolute;
-    top: 0.5em;
-    right: 0.5em;
-    color: #f1c40f;
-    cursor: pointer;
-}
-.detailsOverlay .advice {
-    color: #e74c3c;
-    font-weight: bold;
-}
-.detailsOverlay .trace {
-    word-break: break-all;
-}
-
-.table > div > .duration, .table > div > .startTime {
-    text-align: center;
-    white-space:nowrap;
-}
-.table > div > .startTime.domComplete {
-    background: @domCompleteBg;
-}
-.table > div > .startTime.domContentLoadedEnd {
-    background: @domContentLoadedEndBg;
-}
-.table > div > .startTime.domContentLoaded {
-    background: @domContentLoadedBg;
-}
-.table > div > .startTime.domInteractive {
-    background: @domInteractiveBg;
-}
-.table > div > .startTime.domCreation {
-    background: @domCreationBg;
-}
-.execution .icon-warning {
-    color: #e74c3c;
-    cursor: pointer;
-}

front/src/main.html

@@ -1,54 +1,66 @@
 <html>
 <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" />
-    <meta name="description" content="Free online web performance tool. Audit your webpage for performance and front-end quality issues. And it's open-source!" />
+    <title>Yellow Lab Tools - Page Speed audit</title>
+    <base href="<%= baseUrl %>">
+    <link rel="icon" type="image/png" href="img/favicon.png">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta property="og:image" content="img/logo-large.png" />
+    <meta name="description" content="Yellow Lab Tools is a free online web performance analyzer. It audits a 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/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="/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/directives/gradeDirective.js"></script>
-    <script src="/js/directives/offendersDirectives.js"></script>
-    <!-- endbuild -->
-<head>
+    <link rel="preconnect" href="https://www.google-analytics.com">
+    <link rel="preconnect" href="https://ghbtns.com">
+    <link rel="preconnect" href="https://api.github.com">
+
+</head>
 
 <body ng-app="YellowLabTools">
-    <div id="header"><h1>Yellow Lab <span class="icon-lab"></span> Tools</h1></div>
+    <div id="header"><h1>Yellow Lab <svg width="32" height="32" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="#ffa319"><path d="M478 402L320 139V32h16c9 0 16-7 16-16s-7-16-16-16H176c-9 0-16 7-16 16s7 16 16 16h16v107L34 402c-36 61-8 110 62 110h320c70 0 98-49 62-110zm-357-82l103-172V32h64v116l103 172H121z"/></svg> 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>
+        <span class="version" id="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="160px" 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/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');}
+        document.getElementById('version').innerHTML = "<%= version %>";
+        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="https://letstalkaboutwebperf.com/en/" 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>It is based on <a href="https://github.com/macbre/phantomas" target="_blank">Phantomas</a>, a tool that instruments Chrome Headless to collect dozens of metrics. These metrics are then categorized and transformed into scores. It also provides in-depth details so that developers can fix 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 entirely free</b>. In return, you can add <a href="https://github.com/YellowLabTools/YellowLabTools" target="_blank">a <span>&#9733;</span> on GitHub</a> or <a href="https://ko-fi.com/gaelmetais" target="_blank">buy me a coffee</a>. It will boost my 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 desktop">
+            <a href="result/{{result.runId}}/screenshot">
+                <div class="screenshotWrapper" ng-class="result.params.options.device || 'phone'">
                     <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,42 +35,36 @@
             <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.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>
+                            <span ng-if="rule.policy.unit == 'bytes'">{{rule.value | bytes}}</span>
+                            <span ng-if="rule.policy.unit != 'bytes'">{{rule.value}} <span ng-if="rule.policy.unit"> {{rule.policy.unit}}</span></span>
+                            <span ng-if="rule.abnormal" class="icon-warning"><svg width="16" height="16" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M256 79L84 448h344L256 79zm0-79c11 0 22 7 30 22l219 436c17 30 2 54-32 54H39c-34 0-49-24-32-54L226 22c8-15 19-22 30-22zm0 192c18 0 32 14 32 32l-10 96h-44l-10-96c0-18 14-32 32-32z"/><circle cx="256" cy="384" r="31" stroke="#000"/></svg></span>
+                            <span ng-if="rule.abnormalityScore <= -100" class="icon-warning"><svg width="16" height="16" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M256 79L84 448h344L256 79zm0-79c11 0 22 7 30 22l219 436c17 30 2 54-32 54H39c-34 0-49-24-32-54L226 22c8-15 19-22 30-22zm0 192c18 0 32 14 32 32l-10 96h-44l-10-96c0-18 14-32 32-32z"/><circle cx="256" cy="384" r="31" stroke="#000"/></svg></span>
+                            <span ng-if="rule.abnormalityScore <= -300" class="icon-warning"><svg width="16" height="16" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M256 79L84 448h344L256 79zm0-79c11 0 22 7 30 22l219 436c17 30 2 54-32 54H39c-34 0-49-24-32-54L226 22c8-15 19-22 30-22zm0 192c18 0 32 14 32 32l-10 96h-44l-10-96c0-18 14-32 32-32z"/><circle cx="256" cy="384" r="31" stroke="#000"/></svg></span>
                         </div>
-                        <div class="info"><span class="icon-question"></span></div>
-                    </div>
+                        <div class="info"><svg width="16" height="16" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M224 352h64v64h-64zm128-224c18 0 32 14 32 32v96l-96 64h-64v-32l96-64v-32H160v-64h192zm-96-80A207 207 0 0048 256a207 207 0 00208 208 207 207 0 00208-208A207 207 0 00256 48zm0-48a256 256 0 110 512 256 256 0 010-512z"/></svg></div>
+                    </a>
                 </div>
             </div>
         </div>
     </div>
 
-    <div ng-if="!error && !fromSocialShare" class="apiTip">
-        <b>Did you know? Yellow Lab Tools now has an API</b>! <a href="{{getAPIUrl()}}" target="_blank">Here</a> is the JSON output for this run. Checkout <a href="https://github.com/gmetais/YellowLabTools/wiki/Public-API" target="_blank">the API doc</a>.
-    </div>
+    <%if (sponsoring.wordpress) { %>
+        <div ng-if="result.frameworks.isWordPress && !error" class="sponsor"><%- sponsoring.wordpress %></div>
+    <% } %>
 
-    <div class="tweet" ng-if="!error && !fromSocialShare">
-        <form ng-submit="sendTweet()">
-            <input type="text" class="tweetText" ng-model="tweetText">
-            <input type="submit" class="tweetButton" value="Tweet this!" ng-click="shareOnTwitter(tweetText)">
-            <input type="submit" class="linkedinButton" value="LinkedIn this!" ng-click="shareOnLinkedin(tweetText)">
-        </form>
-    </div>
+    <%if (sponsoring.dashboard) { %>
+        <div ng-if="!error" class="sponsor"><%- sponsoring.dashboard %></div>
+    <% } %>
 
-    <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>
-    </div>
+    
+    
 
     <div ng-if="error">
         <h2>Run failed / Run not found</h2>

front/src/views/domElementButton.html

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

front/src/views/index.html

@@ -1,24 +1,117 @@
-<h2 class="promess">Free online test to help speeding up <b>heavy</b> web pages</h2>
+<h2 class="promess">Online test to help speeding up <b>heavy</b> web pages</h2>
+<p class="price">Free and open source!</p>
 
 <form ng-submit="launchTest()" >
-    <input type="text" name="url" ng-model="url" placeholder="http://www.mysite.com" class="url" />
+    <input type="text" name="url" ng-model="url" placeholder="https://www.mysite.com" class="url" />
     <input type="submit" value="Launch test" class="launchBtn" ng-class="{disabled: !url}" />
+    <div class="settings">
+        <div class="device">
+            <div>Choose the simulated device:</div>
+            <a href="" class="item" ng-class="{active: settings.device == 'phone'}" ng-click="settings.device = 'phone'"><svg width="38" height="38" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M368 0H144c-26 0-48 22-48 48v416c0 26 22 48 48 48h224c26 0 48-22 48-48V48c0-26-22-48-48-48zM192 24h128v16H192V24zm64 456a32 32 0 110-64 32 32 0 010 64zm128-96H128V64h256v320z"/></svg>Phone</a>
+            <a href="" class="item" ng-class="{active: settings.device == 'tablet'}" ng-click="settings.device = 'tablet'"><svg width="38" height="38" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M400 0H80C54 0 32 22 32 48v416c0 26 22 48 48 48h320c26 0 48-22 48-48V48c0-26-22-48-48-48zM240 496a16 16 0 110-32 16 16 0 010 32zm144-48H96V64h288v384z"/></svg>Tablet</a>
+            <a href="" class="item" ng-class="{active: settings.device == 'desktop'}" ng-click="settings.device = 'desktop'"><svg width="38" height="38" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M512 416V32H0v384h224v32h-96v32h256v-32h-96v-32h224zM64 96h384v256H64V96z"/></svg>Desktop</a>
+            <a href="" class="item" ng-class="{active: settings.device == 'desktop-hd'}" ng-click="settings.device = 'desktop-hd'"><svg width="38" height="38" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M512 416V32H0v384h224v32h-96v32h256v-32h-96v-32zM64 96h384v256H64z"/><path d="M270 297V161h28c14 0 25 2 33 4 8 3 16 7 23 14 14 13 21 29 21 50s-7 38-22 51c-7 6-15 11-23 13-8 3-18 4-32 4zm20-19h10c9 0 16-1 23-3a47 47 0 0031-46c0-15-5-27-15-36-9-8-22-12-39-12h-10zm-123-64h59v-53h20v136h-20v-63h-59v63h-20V161h20z"/></svg>Desktop</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">
+                        <svg width="14" height="14" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="#FFF" d="M224 352h64v64h-64zm128-224c18 0 32 14 32 32v96l-96 64h-64v-32l96-64v-32H160v-64h192zm-96-80A207 207 0 0048 256a207 207 0 00208 208 207 207 0 00208-208A207 207 0 00256 48zm0-48a256 256 0 110 512 256 256 0 010-512z"/></svg>
+                        <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">
+                        <svg width="14" height="14" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="#FFF" d="M224 352h64v64h-64zm128-224c18 0 32 14 32 32v96l-96 64h-64v-32l96-64v-32H160v-64h192zm-96-80A207 207 0 0048 256a207 207 0 00208 208 207 207 0 00208-208A207 207 0 00256 48zm0-48a256 256 0 110 512 256 256 0 010-512z"/></svg>
+                        <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">
+                        <svg width="14" height="14" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="#FFF" d="M224 352h64v64h-64zm128-224c18 0 32 14 32 32v96l-96 64h-64v-32l96-64v-32H160v-64h192zm-96-80A207 207 0 0048 256a207 207 0 00208 208 207 207 0 00208-208A207 207 0 00256 48zm0-48a256 256 0 110 512 256 256 0 010-512z"/></svg>
+                        <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">
+                        <svg width="14" height="14" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="#FFF" d="M224 352h64v64h-64zm128-224c18 0 32 14 32 32v96l-96 64h-64v-32l96-64v-32H160v-64h192zm-96-80A207 207 0 0048 256a207 207 0 00208 208 207 207 0 00208-208A207 207 0 00256 48zm0-48a256 256 0 110 512 256 256 0 010-512z"/></svg>
+                        <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">
+                        <svg width="14" height="14" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="#FFF" d="M224 352h64v64h-64zm128-224c18 0 32 14 32 32v96l-96 64h-64v-32l96-64v-32H160v-64h192zm-96-80A207 207 0 0048 256a207 207 0 00208 208 207 207 0 00208-208A207 207 0 00256 48zm0-48a256 256 0 110 512 256 256 0 010-512z"/></svg>
+                        <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 allow list will block all domains except the main domain.</div>
+                    </span>
+                </div>
+                <div>
+                    <div>
+                        <input type="radio" name="blockOrAllow" ng-model="settings.domainsBlockOrAllow" value="block" />block list
+                        <input type="radio" name="blockOrAllow" ng-model="settings.domainsBlockOrAllow" value="allow" />allow list
+                    </div>
+                    <textarea name="domains" ng-model="settings.domains" rows="5"></textarea>
+                </div>
+            </div>
+        </div>
+    </div>
 </form>
 
 
 <div class="features">
     <div>
-        <h3>Front-end quality</h3>
-        <p>Audits quality problems in the HTML, CSS and JS</p>
+        <h3>Page speed audit</h3>
+        <p>Checks if performance good practices are respected</p>
     </div>
 
     <div>
-        <h3>WebPerf</h3>
-        <p>Checks if performance good practices are applied</p>
+        <h3>Front-end analyzis</h3>
+        <p>Detects problems on HTML, CSS, JS, images, fonts and more</p>
     </div>
 
     <div>
-        <h3>JS Profiling</h3>
-        <p>Untangles the JavaScript spaghetti code</p>
+        <h3>In-depth details</h3>
+        <p>Provides precise information to fix the detected performance issues</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">
@@ -17,7 +17,16 @@
     </div>
     <div ng-if="status.statusCode == 'running'">
         <div class="status">Test is running...</div>
-        <p class="statusSubMessage">(auto-refresh activated)</p>
+        <div class="progress">
+            <div class="progressBarEmpty">
+                <div class="progressBarFilled" ng-style="{'width': (progress.estimatedProgress*100) + '%'}"></div>
+            </div>
+        </div>
+        <p class="statusSubMessage" ng-if="!progress">(Phantomas launched)</p>
+        <p class="statusSubMessage" ng-if="progress.milestone == 'domReady'">(DOM Ready fired)</p>
+        <p class="statusSubMessage" ng-if="progress.milestone == 'domComplete'">(page loaded, waiting for late requests)</p>
+        <p class="statusSubMessage" ng-if="progress.milestone == 'phantomas'">(now simulating compression, optimization and minification)</p>
+        <p class="statusSubMessage" ng-if="progress.milestone == 'redownload'">(calculating score and retrieving screenshot)</p>
     </div>
     <div ng-if="status.statusCode == 'complete'">
         <div class="status">Test complete</div>
@@ -26,11 +35,12 @@
 </div>
 <div ng-if="notFound == true">
     <div class="status">Error 404 (test not found)</div>
-    <p class="statusSubMessage">The server probably rebooted. We are very sorry about that, please try to launch the test again.</p>
+    <p class="statusSubMessage">The server probably just rebooted. We are very sorry about that, please try to launch the test again.</p>
     
-    <a class="linkButton" href="/">New test</a>
+    <a class="linkButton" href="<%= baseUrl %>">New test</a>
 </div>
 <div ng-if="connectionLost == true">
     <div class="status">Connection lost with server</div>
     <p class="statusSubMessage">Check your wifi cable, or maybe YellowLab.tools is rebooting.</p>
-</div>
+</div>
+<canvas id="faviconRotator" hidden width=32 height=32></canvas>

front/src/views/resultSubHeader.html

@@ -1,8 +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-back"></div><span>New test<span></a>
-    <a class="menuItem restart" href="" ng-click="testAgain()"><div class="icon-loop"></div><span>Test again<span></a>
-    <div class="menuItem" ng-class="{active: Menu.getCurrentPage() == 'dashboard'}" ng-click="Menu.changePage('dashboard')"><div class="icon-summary"></div><span>Dashboard</span></div>
-    <div class="menuItem" ng-class="{active: Menu.getCurrentPage() == 'timeline'}" ng-click="Menu.changePage('timeline')"><div class="icon-spaghetti"></div><span>JS Timeline</span></div>
+    <a class="menuItem back" href="<%= baseUrl %>"><svg width="48" height="48" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M256 0a256 256 0 110 512 256 256 0 010-512zm0 464a208 208 0 100-416 208 208 0 000 416zM105 233l128-128a32 32 0 1146 46l-74 73h179a32 32 0 010 64H205l74 73a32 32 0 01-46 46L105 279a32 32 0 010-46z"/></svg><span>New test<span></a>
+    <a class="menuItem restart" href="" ng-click="testAgain()"><svg width="48" height="48" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M437 75a255 255 0 00-421 91l60 23a192 192 0 01316-69l-72 72h192V0l-75 75zM256 448c-53 0-101-21-136-56l72-72H0v192l75-75a255 255 0 00421-91l-60-23c-27 73-98 125-180 125z"/></svg><span>Test again<span></a>
+    <div class="menuItem" ng-class="{active: Menu.getCurrentPage() == 'dashboard'}" ng-click="Menu.changePage('dashboard')"><svg width="48" height="48" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h128v128H0zm192 32h320v64H192zM0 192h128v128H0zm192 32h320v64H192zM0 384h128v128H0zm192 32h320v64H192z"/></svg><span>Dashboard</span></div>
 </div>

front/src/views/rule.html

@@ -9,7 +9,31 @@
             <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 ng-if="rule.policy.unit"> {{rule.policy.unit}}</span></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 ng-if="rule.policy.unit"> {{rule.policy.unit}}</span></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 on this issue.
+            </div>
+            <div class="okThreshold" ng-if="rule.globalScoreIfFixed > result.scoreProfiles.generic.globalScore && rule.globalScoreIfFixed > 0 && result.scoreProfiles.generic.globalScore >= 0">
+                Your new global score would increase by {{rule.globalScoreIfFixed - result.scoreProfiles.generic.globalScore}} points ({{rule.globalScoreIfFixed}}/100).
+            </div>
+            <div class="okThreshold" ng-if="rule.globalScoreIfFixed > result.scoreProfiles.generic.globalScore && rule.globalScoreIfFixed > 0 && result.scoreProfiles.generic.globalScore < 0">
+                Your new global score would increase by {{rule.globalScoreIfFixed}} points ({{rule.globalScoreIfFixed}}/100).
+            </div>
+            <div class="okThreshold" ng-if="rule.globalScoreIfFixed > result.scoreProfiles.generic.globalScore && rule.globalScoreIfFixed <= 0">
+                Your new global score would increase, but still not enough to reach 0/100. That's embarassing...
+            </div>
+            <div class="okThreshold" ng-if="rule.globalScoreIfFixed == result.scoreProfiles.generic.globalScore && rule.score < 100">
+                Your new global score would slightly increase, but not enough to gain a single point.
+            </div>
             <div ng-bind-html="rule.policy.message" class="message"></div>
         </div>
     </div>
@@ -18,7 +42,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 offender', '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">
@@ -27,24 +51,34 @@
                 </div>
                 <div ng-if="!offender.parseError">
 
-                    <div ng-if="policyName === 'DOMidDuplicated'">
-                        <b>{{offender.id}}</b>: {{offender.occurrences}} occurrences
+                    <div ng-if="policyName === 'iframesCount'">
+                        <span ng-if="offender.url">{{offender.url}}</span>
+                        <span ng-if="!offender.url">an iframe without URL</span>
                     </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 ng-if="policyName === 'DOMidDuplicated'">
+                        <b>{{offender.id}}</b>: {{offender.count}} occurrences
                     </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,66 +96,81 @@
                         </div>
                     </div>
 
+                    <div ng-if="policyName === 'jQueryFunctionsUsed'">
+                        function <b>{{offender.functionName}}</b> used {{offender.count}} times
+                    </div>
+
+                    <div ng-if="policyName === 'documentWriteCalls'">
+                        <b>{{offender.writeFn}}</b>
+                        <span ng-if="offender.from">
+                            called from
+                            <span ng-if="offender.from.functionName">{{offender.from.functionName}}()</span>
+                            <url-link url="offender.from.file" max-length="50"></url-link>
+                            line {{offender.from.line}}
+                        </span>
+                        <span ng-if="!offender.from">
+                            called from (no backtrace available)
+                        </span>
+                    </div>
+
+                    <div ng-if="policyName === 'cssRules'">
+                        <span ng-if="offender.url === '[inline CSS]'">inline CSS</span>
+                        <span ng-if="offender.url !== '[inline CSS]'"><url-link url="offender.url" max-length="80"></url-link></span>
+                        : <ng-pluralize count="offender.value" 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}}</b> {{offender.message}}
+                        <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'">
+                        <img ng-src="{{offender.url | https}}" class="smallPreview checker"></img>
+                        <url-link url="offender.url" max-length="70"></url-link> (offset: {{offender.offset | roundNbr}}px)
                     </div>
 
-                    <div ng-if="policyName === 'notFound' || policyName === 'closedConnections' || policyName === 'multipleRequests' || policyName === 'cachingDisabled' || policyName === 'cachingNotSpecified'">
+                    <div ng-if="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 === '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>
 
                     <div ng-if="policyName === 'cachingTooShort'">
-                        <url-link url="offender.file" max-length="100"></url-link>
+                        <url-link url="offender.url" max-length="100"></url-link>
                         cached for <b>{{offender.ttlWithUnit}} {{offender.unit}}</b>
                     </div>
 
@@ -130,16 +179,84 @@
                         (<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'">
                         {{offender}}
                     </div>
 
+                    <div ng-if="policyName === 'jQueryVersionsLoaded'">
+                        {{offender.version}}
+                    </div>
+
+                    <div ng-if="policyName === 'synchronousXHR'">
+                        {{offender.url}}
+                    </div>
+
+                    <div ng-if="policyName === 'fontsCount'">
+                        <url-link url="offender.url" max-length="70"></url-link>
+                        ({{offender.size | bytes}})
+                    </div>
+
+                    <div ng-if="policyName === 'oldHttpProtocol'">
+                        <b>{{offender.domain}}</b> sends <span ng-class="offender.requests > 4 ? 'offenderProblem' : ''"><b><ng-pluralize count="offender.requests" when="{'one':'1 request','other':'{} requests'}"></ng-pluralize></b></span> over {{offender.httpVersion}}
+                    </div>
+
+                    <div ng-if="policyName === 'oldTlsProtocol'">
+                        <b>{{offender.domain}}</b> uses {{offender.tlsVersion}} <span ng-if="offender.beforeDomReady === true" class="offenderProblem">and seems to be on the critical path</span>
+                    </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' && fileDetails.url !== '[inline CSS]'" url="fileDetails.url" max-length="80"></url-link>
+                <span ng-if="fileDetails.url === 'Inline CSS' || 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 === '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>
@@ -147,14 +264,247 @@
 
             <div ng-if="policyName === 'cssColors' && rule.offendersObj.count > 0">
                 <p>This is the colors palette, sized by total occurrences:</p>
-                <div class="colorPalette">
+                <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 === 'DOMaccesses'">
+        <div ng-repeat="(type, list) in rule.offendersObj.list.byType">
+            <h3>
+                <ng-pluralize count="list.length" when="{'0': 'No offender', 'one': '1 offender', 'other': '{} offenders'}"></ng-pluralize> from
+                <span ng-if="type === 'DOMqueriesById'">getElementById()</span>
+                <span ng-if="type === 'DOMqueriesByTagName'">getElementsByTagName()</span>
+                <span ng-if="type === 'DOMqueriesByClassName'">getElementsByClassName()</span>
+                <span ng-if="type === 'DOMqueriesByQuerySelectorAll'">querySelector() or querySelectorAll()</span>
+                <span ng-if="type === 'DOMinserts'">appendChild() or insertBefore()</span>
+                <span ng-if="type === 'DOMmutationsInserts'">added nodes</span>
+                <span ng-if="type === 'DOMmutationsRemoves'">removed nodes</span>
+                <span ng-if="type === 'DOMmutationsAttributes'">attribute changes</span>
+                <span ng-if="type === 'eventsBound'">addEventListener()</span>
+            </h3>
+            <div class="offendersTable">
+                <div ng-repeat="access in list">
+                    <div ng-if="type === 'DOMqueriesById'">#{{access.id}}</div>
+                    <div ng-if="type === 'DOMqueriesByTagName'">{{access.tag}} <b>on</b> <span title="{{access.node}}">{{access.node | lastDOMNode}}</span></div>
+                    <div ng-if="type === 'DOMqueriesByClassName'">.{{access.class}} <b>on</b> <span title="{{access.node}}">{{access.node | lastDOMNode}}</span></div>
+                    <div ng-if="type === 'DOMqueriesByQuerySelectorAll'">{{access.selector}} <b>on</b> <span title="{{access.node}}">{{access.node | lastDOMNode}}</span></div>
+                    <div ng-if="type === 'DOMinserts'"><span title="{{access.append}}">{{access.append | lastDOMNode}}</span> <b>added to</b> <span title="{{access.node}}">{{access.node | lastDOMNode}}</span></div>
+                    <div ng-if="type === 'DOMmutationsInserts'">{{access.node}} <b>added to</b> {{access.target}}</div>
+                    <div ng-if="type === 'DOMmutationsRemoves'">{{access.node}} <b>removed from</b> {{access.target}}</div>
+                    <div ng-if="type === 'DOMmutationsAttributes'">{{access.attribute}} <b>changed on</b> {{access.node}}</div>
+                    <div ng-if="type === 'eventsBound'">{{access.eventType}} <b>on</b> <span title="{{access.path}}">{{access.path | lastDOMNode}}</span></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.isCompressible || image.isCompressed">Current weight: {{image.originalWeigth | bytes}}</p>
+                    <p ng-if="image.isCompressible && !image.isCompressed">Current weight: {{image.originalWeigth | bytes}} ({{image.originalCompressedWeight | bytes}} compressed)</p>
+
+                    <p ng-if="image.lossless && image.isCompressible">With a lossless optimization:<br/>{{image.afterOptimizationAndCompression | bytes}} compressed (<b>-{{image.gain | bytes}}</b> compressed)</p>
+                    <p ng-if="image.lossless && !image.isCompressible">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.isCompressible">With a lossy optimization:<br/>{{image.afterOptimizationAndCompression | bytes}} compressed (<b>-{{image.gain | bytes}} compressed</b>)</p>
+                    <p ng-if="image.lossy && !image.isCompressible">With a lossy optimization:<br/>{{image.lossy | bytes}} (<b>-{{image.gain | bytes}}</b>)</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div ng-if="policyName === 'compression'">
+        <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>Gzip weight</div>
+                <div>Brotli</div>
+                <div>Gain</div>
+            </div>
+            <div ng-repeat="file in rule.offendersObj.list.files | orderBy:'-gain'">
+                <div>
+                    <url-link url="file.url" max-length="60"></url-link>
+                </div>
+                <div>{{file.originalSize | bytes}}</div>
+                
+                <div ng-if="file.wasCompressed"><i>already gzipped</i></div>
+                <div ng-if="!file.wasCompressed">{{file.gzipped | bytes}}</div>
+
+                <div>{{file.brotlified | 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="60"></url-link>
+                </div>
+                <div ng-if="file.isCompressed">{{file.originalWeigth | bytes}} (compressed)</div>
+                <div ng-if="!file.isCompressed">{{file.originalWeigth | bytes}} ({{file.originalCompressedWeight | bytes}} compressed)</div>
+                <div ng-if="file.isCompressed">{{file.afterOptimizationAndCompression | bytes}} (compressed)</div>
+                <div ng-if="!file.isCompressed">{{file.optimized | bytes}} ({{file.afterOptimizationAndCompression | bytes}} compressed)</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 === 'cssBreakpoints'">
+        <div ng-if="rule.value > 0">
+            <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 === 'nonWoff2Fonts'">
+        <h3 ng-if="rule.value > 0">{{rule.value | bytes}} could be saved on <ng-pluralize count="rule.offendersObj.list.fonts.length" when="{'one': '1 file', 'other': '{} files'}"></ng-pluralize></h3>
+        <div class="table">
+            <div class="headers">
+                <div>File</div>
+                <div>Current weight</div>
+                <div>WOFF 2 weight</div>
+                <div>Gain</div>
+            </div>
+            <div ng-repeat="file in rule.offendersObj.list.fonts | orderBy:'-gain'">
+                <div>
+                    <url-link url="file.url" max-length="70"></url-link>
+                </div>
+                <div>{{file.originalSize | bytes}}</div>
+                <div>{{file.woff2Size | bytes}}</div>
+                <div><b>-{{file.gain | bytes}}</b></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,13 +2,12 @@
 <div class="screenshot board">
     <h2>Screenshot</h2>
 
-    <div class="screenshotWrapper desktop">
+    <div class="screenshotWrapper" ng-class="result.params.options.device || 'phone'">
         <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>
 
-    <p>(scroll on the screenshot to see under the fold)</p>
-
     <div class="backToDashboard"><a href="#" ng-click="backToDashboard()">Back to dashboard</a></div>
 </div>

front/src/views/timeline.html

@@ -1,144 +0,0 @@
-<div ng-include="'views/resultSubHeader.html'"></div>
-<div class="execution board">
-    <h2>Javascript Timeline</h2>
-    <p>This graph gives a quick view of when the Javascript interactions with the DOM occur during the loading of the page.</p>
-
-    <div class="timeline">
-        <div class="chart">
-            <div class="chartPoints">
-                <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
-                     }">
-                    <div style="height: {{100 * duration / timelineMax | number: 0}}px" class="color"></div>
-                    <div class="tooltip detailsOverlay">
-                        <div>Timestamp: {{$index * timelineIntervalDuration | number: 0}} ms</div>
-                    </div>
-                </div>
-            </div>
-            <div class="startTime">0 ms</div>
-            <div class="endTime">{{endTime | number: 0}} ms</div>
-        </div>
-        <div class="legend">
-            <div class="titles">
-                <div class="domCreation"><div class="color"></div>DOM creation</div>
-                <div class="domInteractive"><div class="color"></div>DOM interactive</div>
-                <div class="domContentLoaded"><div class="color"></div>DOM content loaded event</div>
-                <div class="domContentLoadedEnd"><div class="color"></div>Page completion</div>
-                <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>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>
-                <div>The page is considered loaded, it's time for low <b>priority things</b> : trackers, social plugins, easter egg...</div>
-            </div>
-        </div>
-    </div>
-
-    <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.
-    </p>
-    <div class="filters">
-        <div>
-            <input type="checkbox" ng-model="warningsFilterOn" id="warningsFilterOn" />
-            <label for="warningsFilterOn">Show warnings only</label>
-        </div>
-        <div>
-            <input type="checkbox" ng-model="textFilterOn" />
-            Filter by
-            <input type="text" ng-model="textFilter" placeholder="search..." class="textFilter" ng-change="textFilterOn = true" />
-        </div>
-    </div>
-    <div class="table">
-
-        <toto data-info="mavariable"></toto>
-        <div class="headers">
-            <div><!-- index --></div>
-            <div>Type</div>
-            <div>Params</div>
-            <div><!-- details --></div>
-            <div>Timestamp</div>
-        </div>
-        <div ng-if="(!warningsFilterOn || node.warning || node.error) && (!textFilterOn || !textFilter.length || node.searchIndex.indexOf(textFilter) >= 0)"
-             ng-repeat="node in profilerData" ng-class="{
-                showingDetails: node.showDetails,
-                jsError: node.error,
-                windowPerformance: node.windowPerformance
-            }">
-
-            <div class="index">{{$index + 1}}</div>
-            <div class="type">{{node.data.type}}</div>
-
-            <div class="value">
-                {{node.data.callDetails.arguments[0]}}
-                <span ng-if="node.data.callDetails.arguments.length > 1"> : {{node.data.callDetails.arguments[1]}}</span>
-                <span ng-if="node.data.callDetails.arguments.length > 2"> : {{node.data.callDetails.arguments[2]}}</span>
-                <span ng-if="node.data.callDetails.arguments.length > 3"> : {{node.data.callDetails.arguments[3]}}</span>
-            </div>
-            
-            <div class="details">
-                <div ng-class="{'icon-question': !node.warning && !node.error, 'icon-warning': node.warning || node.error}"
-                     ng-click="onNodeDetailsClick(node)"
-                     ng-if="node.data.type != 'jQuery loaded' && node.data.type != 'jQuery version change' && !node.windowPerformance"></div>
-                
-                <div class="detailsOverlay" ng-if="node.showDetails">
-                    <div class="closeBtn" ng-click="onNodeDetailsClick(node)">✖</div>
-
-                    <div ng-if="node.data.callDetails.context.domElement">
-                        <h4>Called on DOM element</h4>
-                        <div>{{node.data.callDetails.context.domElement}}</div>
-                    </div>
-
-                    <div ng-if="node.data.callDetails.context.length === 0">
-                        <h4>Called on 0 jQuery element</h4>
-                        <p class="advice">Useless function call, as the jQuery object is empty.</p>
-                    </div>
-
-                    <div ng-if="node.data.callDetails.context.length == 1 && node.data.callDetails.context.firstElementPath">
-                        <h4>Called on 1 jQuery element</h4>
-                        <div>{{node.data.callDetails.context.firstElementPath}}</div>
-                    </div>
-
-                    <div ng-if="node.data.callDetails.context.length > 1">
-                        <h4>Called on {{node.data.callDetails.context.length}} jQuery elements</h4>
-                        <p class="advice" ng-if="node.data.type == 'jQuery - bind' && node.data.callDetails.context.length > 5">
-                            The .bind() method attaches the event listener to each jQuery element one by one. Using the .on() method is preferable if available (from v1.7).
-                        </p>
-                        <p ng-if="node.data.callDetails.context.firstElementPath"><b>First one is:</b> {{node.data.callDetails.context.firstElementPath}}</p>
-                    </div>
-
-                    <p class="advice" ng-if="node.data.resultsNumber === 0">
-                        The query returned 0 results. Could it be unused or dead code?
-                    </p>
-
-                    <div ng-if="node.parsedBacktrace">
-                        <h4>Backtrace</h4>
-                        <div class="table">
-                            <div ng-repeat="trace in node.parsedBacktrace track by $index">
-                                <div>{{trace.fnName || '(anonymous)'}}</div>
-                                <div class="trace"><a href="{{trace.filePath}}" title="{{trace.filePath}}" target="_blank">{{trace.fileName || 'HTML'}}</a>:{{trace.line}}</div>
-                            </div>
-                            <div ng-if="node.parsedBacktrace.length == 0 && node.data.type != 'script loaded'">
-                                <div>can't find any backtrace :/</div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="startTime" ng-class="node.data.loadingStep">{{node.data.timestamp | number: 0}} ms</div>
-        </div>
-    </div>
-
-    <div class="backToDashboard"><a href="#" ng-click="backToDashboard()">Back to dashboard</a></div>
-</div>

lib/index.js

@@ -24,9 +24,13 @@ var yellowLabTools = function(url, options) {
         };
 
         var runner = new Runner(params)
+        
+            .progress(deferred.notify)
+
             .then(function(data) {
                 deferred.resolve(data);
             })
+
             .fail(function(err) {
                 deferred.reject(err);
             });

lib/metadata/scoreProfileGeneric.json

@@ -1,44 +1,58 @@
 {
     "categories": {
+        "pageWeight": {
+            "label": "Page weight",
+            "policies": {
+                "totalWeight": 5,
+                "imageOptimization": 2,
+                "imagesTooLarge": 1,
+                "compression": 2,
+                "fileMinification": 2
+            }
+        },
+        "requests": {
+            "label": "Requests",
+            "policies": {
+                "totalRequests": 2,
+                "domains": 3,
+                "notFound": 2,
+                "identicalFiles": 2,
+                "emptyRequests": 3,
+                "lazyLoadableImagesBelowTheFold": 2,
+                "hiddenImages": 1
+            }
+        },
         "domComplexity": {
             "label": "DOM complexity",
             "policies": {
-                "DOMelementsCount": 1,
+                "DOMelementsCount": 3,
                 "DOMelementMaxDepth": 1,
                 "iframesCount": 1,
                 "DOMidDuplicated": 1
             }
         },
-        "domManipulations": {
-            "label": "DOM manipulations",
+        "javascriptComplexity": {
+            "label": "JS complexity",
             "policies": {
-                "DOMinserts": 2,
-                "DOMqueries": 1,
-                "DOMqueriesWithoutResults": 2,
-                "DOMqueriesAvoidable": 2,
-                "eventsBound": 1
+                "scriptDuration": 4,
+                "DOMaccesses": 2,
+                "eventsScrollBound": 1
             }
         },
         "badJavascript": {
-            "label": "Bad JavaScript",
+            "label": "Bad JS",
             "policies": {
                 "jsErrors": 1,
                 "documentWriteCalls": 2,
-                "consoleMessages": 0.5,
+                "synchronousXHR": 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
             }
         },
         "cssComplexity": {
@@ -46,70 +60,58 @@
             "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": {
-                "cssImports": 3,
+                "cssParsingErrors": 3,
+                "cssImports": 4,
                 "cssDuplicatedSelectors": 2,
                 "cssDuplicatedProperties": 1,
                 "cssEmptyRules": 2,
-                "cssExpressions": 1,
-                "cssImportants": 3,
+                "cssImportants": 2,
                 "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": 0.5,
+                "unusedUnicodeRanges": 0.5,
+                "nonWoff2Fonts": 0.5
             }
         },
-        "smallRequests": {
-            "label": "Small requests",
+        "serverConfig": {
+            "label": "Server config",
             "policies": {
-                "smallJsFiles": 1,
-                "smallCssFiles": 1,
-                "smallImages": 1
-            }
-        },
-        "network": {
-            "label": "Network",
-            "policies": {
-                "notFound": 3,
-                "closedConnections": 3,
-                "multipleRequests": 3,
+                "oldHttpProtocol": 2,
+                "oldTlsProtocol": 2,
+                "closedConnections": 2,
+                "cachingNotSpecified": 1,
                 "cachingDisabled": 1,
-                "cachingTooShort": 1,
-                "domains": 1
+                "cachingTooShort": 1
             }
         }
     },
     "globalScore": {
-        "domComplexity": 1,
-        "domManipulations": 2,
-        "badJavascript": 1,
-        "jQueryVersion": 1,
-        "cssSyntaxError": 1,
-        "cssComplexity": 1,
+        "pageWeight": 3,
+        "requests": 2,
+        "domComplexity": 2,
+        "javascriptComplexity": 2,
+        "badJavascript": 2,
+        "jQuery": 0.5,
+        "cssComplexity": 0.5,
         "badCSS": 1,
-        "requests": 3,
-        "smallRequests": 1,
-        "network": 2
+        "fonts": 1,
+        "serverConfig": 1
     }
 }

lib/offendersHelpers.js

@@ -32,6 +32,15 @@ var OffendersHelpers = function() {
     };
 
     this.domPathToDomElementObj = function(domPath) {
+
+        if (typeof domPath === 'boolean') {
+            return {
+                // Not a normal element path
+                type: 'notAnElement',
+                element: domPath
+            };
+        }
+
         var domArray = this.domPathToArray(domPath);
         var domTree = this.listOfDomArraysToTree([this.domPathToArray(domPath)]);
 
@@ -104,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 = /^\s*at( (\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]) {
@@ -119,8 +131,7 @@ var OffendersHelpers = function() {
                     }
 
                     results.push(obj);
-                } else {
-                    return null;
+
                 }
             }
             return results;
@@ -142,24 +153,19 @@ var OffendersHelpers = function() {
     };
 
     this.cssOffenderPattern = function(offender) {
-        var parts = /^(.*) (?:<([^ \(]*)>|\[inline CSS\]) @ (\d+):(\d+)$/.exec(offender);
-        
-        if (!parts) {
-            return {
-                offender: offender
-            };
-        } else {
-            return {
-                css: parts[1],
-                file: parts[2] || null,
-                line: parseInt(parts[3], 10),
-                column: parseInt(parts[4], 10)
-            };
-        }
+        // Used to work with strings
+        // As of Phantomas v2, offender is now in JSON format.
+        // Let's just adapt this for now and we'll see later if we remove completely this function
+        return {
+            css: offender.value.message,
+            file: offender.url,
+            line: offender.value.position.start.line,
+            column: offender.value.position.start.column
+        };
     };
 
     this.fileWithSizePattern = function(fileWithSize) {
-        var parts = /^([^ ]*) \((\d+\.\d{2}) kB\)$/.exec(fileWithSize);
+        var parts = /^([^ ]*) \((\d+\.\d{2}|NaN) kB\)$/.exec(fileWithSize);
 
         if (!parts) {
             return {
@@ -173,6 +179,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/rulesChecker.js

@@ -111,7 +111,8 @@ var RulesChecker = function() {
                 if (rule) {
                     rule.policy = {
                         label: policy.label,
-                        message: policy.message
+                        message: policy.message,
+                        hasOffenders: policy.hasOffenders || false
                     };
 
                     results[metricName] = rule;

lib/runner.js

@@ -2,7 +2,10 @@ var Q                       = require('q');
 var debug                   = require('debug')('ylt:runner');
 
 var phantomasWrapper        = require('./tools/phantomas/phantomasWrapper');
-var jsExecutionTransformer  = require('./tools/jsExecutionTransformer');
+var colorDiff               = require('./tools/colorDiff');
+var domAccessAgregator      = require('./tools/domAccessAgregator');
+var mediaQueriesChecker     = require('./tools/mediaQueriesChecker');
+var redownload              = require('./tools/redownload/redownload');
 var rulesChecker            = require('./rulesChecker');
 var scoreCalculator         = require('./scoreCalculator');
 
@@ -19,14 +22,67 @@ var Runner = function(params) {
     };
 
     // Execute Phantomas first
-    phantomasWrapper.execute(data).then(function(phantomasResults) {
+    phantomasWrapper.execute(data)
+
+    // For the progress bar
+    .progress(function(event) {
+        if (event === 'domReady') {
+            deferred.notify({
+                estimatedProgress: 0.15,
+                milestone: 'domReady'
+            });
+        }
+        if (event === 'domComplete') {
+            deferred.notify({
+                estimatedProgress: 0.25,
+                milestone: 'domComplete'
+            });
+        }
+    })
+
+    .then(function(phantomasResults) {
+        // For the progress bar
+        deferred.notify({
+            estimatedProgress: 0.4,
+            milestone: 'phantomas'
+        });
+
         data.toolsResults.phantomas = phantomasResults;
 
-        // Treat the JS Execution Tree from offenders
-        data.javascriptExecutionTree = jsExecutionTransformer.transform(data);
+        // Mix all DOM Access metrics together
+        data = domAccessAgregator.agregate(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)
+
+        .progress(function(redownloadedProgress) {
+            deferred.notify({
+                estimatedProgress: 0.4 + redownloadedProgress * 0.55,
+                milestone: 'phantomas'
+            });
+        });
+
+    })
+
+    .then(function(data) {
+
+        // For the progress bar
+        deferred.notify({
+            estimatedProgress: 0.99,
+            milestone: 'redownload'
+        });
+
+        // Fix: don't display Unicode ranges if the module is not present in Phantomas
+        if (!data.toolsResults.phantomas.metrics.charactersCount) {
+            delete data.toolsResults.redownload.metrics.unusedUnicodeRanges;
+            delete data.toolsResults.redownload.offenders.unusedUnicodeRanges;
+        }
 
         // Rules checker
         var policies = require('./metadata/policies');
@@ -36,21 +92,42 @@ var Runner = function(params) {
         // Scores calculator
         var scoreProfileGeneric = require('./metadata/scoreProfileGeneric.json');
         data.scoreProfiles = {
-            generic : scoreCalculator.calculate(data, scoreProfileGeneric)
+            generic : scoreCalculator.calculate(data, scoreProfileGeneric, true)
         };
 
-        
-        delete data.toolsResults.phantomas.metrics.javascriptExecutionTree;
-        delete data.toolsResults.phantomas.offenders.javascriptExecutionTree;
 
-        return data;
+        // Calculate "If you fix this issue, your new score is..." on each rule
+        debug('Calculate "If you fix this issue..." scores');
+        Object.keys(data.rules).forEach(function(ruleName) {
+            // Save current values
+            var oldScore = data.rules[ruleName].score;
+            var oldAbnormalityScore = data.rules[ruleName].abnormalityScore;
+            // Simulate a 100/100 score on a specific rule
+            data.rules[ruleName].score = 100;
+            data.rules[ruleName].abnormalityScore = 0;
+            // Calculate new score
+            data.rules[ruleName].globalScoreIfFixed = scoreCalculator.calculate(data, scoreProfileGeneric, false).globalScore;
+            // Revert values
+            data.rules[ruleName].score = oldScore;
+            data.rules[ruleName].abnormalityScore = oldAbnormalityScore;
+        });
+        debug('Calculating is finished');
 
-    }).then(function(data) {
+
+        if (data.toolsResults.phantomas.offenders.blockedRequests) {
+            data.blockedRequests = data.toolsResults.phantomas.offenders.blockedRequests;
+        }
+
+        // Report WordPress detection
+        if (data.toolsResults.redownload.metrics.isWordPress === true) {
+            data.frameworks = {isWordPress: true};
+        }
 
         // Finished!
         deferred.resolve(data);
+    })
 
-    }).fail(function(err) {
+    .fail(function(err) {
         debug('Run failed');
         debug(err);
 

lib/scoreCalculator.js

@@ -4,7 +4,7 @@ var debug = require('debug')('ylt:scoreCalculator');
 var ScoreCalculator = function() {
     'use strict';
 
-    this.calculate = function(data, profile) {
+    this.calculate = function(data, profile, debugFlag) {
 
         var results = {
             categories: {}
@@ -13,7 +13,9 @@ var ScoreCalculator = function() {
         var categoryName;
         var weight;
 
-        debug('Starting calculating scores');
+        if (debugFlag) {
+            debug('Starting calculating scores');
+        }
 
         // Calculate categories
         for (categoryName in profile.categories) {
@@ -31,7 +33,7 @@ var ScoreCalculator = function() {
                 if (data.rules[policyName]) {
                     policyScore = data.rules[policyName].score + (data.rules[policyName].abnormalityScore * 2);
                     categoryScore.push(policyScore, weight);
-                } else {
+                } else if (debugFlag) {
                     debug('Warning: could not find rule %s', policyName);
                 }
 
@@ -59,8 +61,10 @@ var ScoreCalculator = function() {
         results.globalScore = Math.round(globalScore.getScore());
 
 
-        debug('Score calculation finished:');
-        debug(results);
+        if (debugFlag) {
+            debug('Score calculation finished:');
+            debug(results);
+        }
 
         return results;
     };

lib/screenshotHandler.js

@@ -1,6 +1,5 @@
 var debug       = require('debug')('ylt:screenshotHandler');
-var lwip        = require('lwip');
-var tmp         = require('temporary');
+var Jimp        = require('jimp');
 var Q           = require('q');
 var fs          = require('fs');
 var path        = require('path');
@@ -8,44 +7,22 @@ var path        = require('path');
 
 var screenshotHandler = function() {
 
-    this.getScreenshotTempFile = function() {
-        
-        var screenshotTmpFolder = new tmp.Dir();
-        var tmpFilePath = path.join(screenshotTmpFolder.path, 'screenshot.jpg');
-        var that = this;
-        
-        return {
-            
-            getTmpFolder: function() {
-                return screenshotTmpFolder;
-            },
-            
-            getTmpFilePath: function() {
-                return tmpFilePath;
-            },
-            
-            toThumbnail: function(width) {
-                return that.optimize(tmpFilePath, width);
-            },
-            
-            deleteTmpFile: function() {
-                return that.deleteTmpFileAndFolder(tmpFilePath, screenshotTmpFolder);
-            }
-        };
-    };
+    var tmpFolderPath = 'tmp';
+    var tmpFolderFullPath = path.join(__dirname, '..', tmpFolderPath);
+    var tmpFileName = 'temp-screenshot.png';
+    var tmpFileFullPath = path.join(tmpFolderFullPath, tmpFileName);
 
 
-    this.optimize = function(imagePath, width) {
+    this.findAndOptimizeScreenshot = function(width) {
         var that = this;
 
         debug('Starting screenshot transformation');
 
-        return this.openImage(imagePath)
+        return this.openImage(tmpFileFullPath)
 
             .then(function(image) {
-
+                that.deleteTmpFile(tmpFileFullPath);
                 return that.resizeImage(image, width);
-
             })
 
             .then(this.toBuffer);
@@ -55,7 +32,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,20 +51,25 @@ var screenshotHandler = function() {
     this.resizeImage = function(image, newWidth) {
         var deferred = Q.defer();
 
-        var currentWidth = image.width();
-        var ratio = newWidth / currentWidth;
+        var currentWidth = image.bitmap.width;
 
-        image.scale(ratio, function(err, image){
-            if (err) {
-                debug('Could not resize image');
-                debug(err);
+        if (currentWidth > 0) {
+            var ratio = newWidth / currentWidth;
 
-                deferred.reject(err);
-            } else {
-                debug('Image correctly resized');
-                deferred.resolve(image);
-            }
-        });
+            image.scale(ratio, function(err, image){
+                if (err) {
+                    debug('Could not resize image');
+                    debug(err);
+
+                    deferred.reject(err);
+                } else {
+                    debug('Image correctly resized');
+                    deferred.resolve(image);
+                }
+            });
+        } else {
+            deferred.reject('Could not resize an empty image');
+        }
 
         return deferred.promise;        
     };
@@ -96,7 +78,7 @@ var screenshotHandler = function() {
     this.toBuffer = function(image) {
         var deferred = Q.defer();
 
-        image.toBuffer('jpg', {quality: 90}, function(err, buffer){
+        image.quality(85).getBuffer(Jimp.MIME_JPEG, function(err, buffer){
             if (err) {
                 debug('Could not save image to buffer');
                 debug(err);
@@ -108,28 +90,52 @@ var screenshotHandler = function() {
             }
         });
 
-        return deferred.promise;        
+        return deferred.promise;
     };
 
 
-    this.deleteTmpFileAndFolder = function(tmpFilePath, screenshotTmpFolder) {
+    this.deleteTmpFile = function(tmpFilePath) {
         var deferred = Q.defer();
 
         fs.unlink(tmpFilePath, function (err) {
             if (err) {
-                debug('Screenshot file not found, could not be deleted. But it is not a problem.');
+                debug('Screenshot temporary file not found, could not be deleted. But it is not a problem.');
             } else {
-                debug('Screenshot file deleted.');
+                debug('Screenshot temporary file deleted.');
             }
 
-            screenshotTmpFolder.rmdir();
-            debug('Screenshot temp folder deleted');
-
             deferred.resolve();
         });
 
         return deferred.promise;
     };
+
+    // Create a /tmp folder on the project's root directory
+    this.createTmpScreenshotFolder = function() {
+        var deferred = Q.defer();
+
+        // Create the folder if it doesn't exist
+        fs.exists(tmpFolderFullPath, function(exists) {
+            if (exists) {
+                deferred.resolve();
+            } else {
+                debug('Creating the tmp image folder', tmpFolderFullPath);
+                fs.mkdir(tmpFolderFullPath, function(err) {
+                    if (err) {
+                        deferred.reject(err);
+                    } else {
+                        deferred.resolve();
+                    }
+                });
+            }
+        });
+
+        return deferred.promise;
+    };
+
+    this.getTmpFileRelativePath = function() {
+        return tmpFolderPath + '/' + tmpFileName;
+    };
 };
 
-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,28 +24,40 @@ 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
+                screenshot: req.body.screenshot || false,
+                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
             }
         };
 
-        // Create a temporary folder to save the screenshot
-        var screenshot;
-        if (run.params.screenshot) {
-            screenshot = ScreenshotHandler.getScreenshotTempFile();
-        }
+        // Create the tmp folder if it doesn't exist
+        ScreenshotHandler.createTmpScreenshotFolder(run.runId);
 
         // Add test to the testQueue
         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);
 
@@ -61,53 +72,75 @@ 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
+                screenshot: run.params.screenshot ? ScreenshotHandler.getTmpFileRelativePath() : false,
+                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
             };
 
-            return ylt(run.params.url, runOptions);
+            return ylt(run.params.url, runOptions)
+
+            // Update the progress bar on each progress
+            .progress(function(progress) {
+                runsDatastore.updateRunProgress(run.runId, progress);
+            });
 
         })
-        // Phantomas completed, let's save the screenshot if any
+
+        // Phantomas completed
         .then(function(data) {
 
             debug('Success');
             data.runId = run.runId;
 
             
-            // Some conditional steps are made if there is a screenshot
+            // Some conditional steps exist if there is a screenshot
             var screenshotPromise = Q.resolve();
 
             if (run.params.screenshot) {
-                
+
+                var screenshotSize = serverSettings.screenshotWidth ? serverSettings.screenshotWidth[run.params.device] : 400;
+
                 // Replace the empty promise created earlier with Q.resolve()
-                screenshotPromise = screenshot.toThumbnail(400)
+                screenshotPromise = ScreenshotHandler.findAndOptimizeScreenshot(screenshotSize)
                 
                     // Read screenshot
                     .then(function(screenshotBuffer) {
-                        
                         if (screenshotBuffer) {
                             debug('Image optimized');
                             data.screenshotBuffer = screenshotBuffer;
-
-                            // Official path to get the image
                             data.screenshotUrl = '/api/results/' + data.runId + '/screenshot.jpg';
                         }
-
                     })
-                    // Delete screenshot temporary file
-                    .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...');
+                        debug(err);
+                    });
 
             }
 
             // Let's continue
-            screenshotPromise
+            return screenshotPromise
 
                 // Save results
                 .then(function() {
+                    // Remove uneeded temp screenshot path
                     delete data.params.options.screenshot;
+
+                    // Here we can remove tools results if not needed
+                    delete data.toolsResults.phantomas.offenders.requests;
+                    
                     return resultsDatastore.saveResult(data);
                 })
 
@@ -169,7 +202,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}));
         }
@@ -191,10 +224,11 @@ var ApiController = function(app) {
         }
     });
 
-    // Retrieve the list of all runs
-    /*app.get('/api/runs', function(req, res) {
-        // NOT YET
-    });*/
+    // Counts all pending runs
+    app.get('/api/runs', function(req, res) {
+        res.setHeader('Content-Type', 'application/json');
+        res.send(JSON.stringify({pendingRuns: queue.length()}, null, 2));
+    });
 
     // Delete one run by id
     /*app.delete('/api/runs/:id', function(req, res) {
@@ -221,6 +255,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;
         });
     });
@@ -289,6 +335,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,45 @@
 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 packageJson     = require('../../../package.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';
-    
-    var routes = ['/', '/about', '/result/:runId', '/result/:runId/timeline', '/result/:runId/screenshot', '/result/:runId/rule/:policy', '/queue/:runId'];
+
+    // Routes templating    
+    var routes = ['/', '/about', '/result/:runId', '/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'), {
+                version: 'v' + packageJson.version,
+                baseUrl: app.locals.baseUrl || '/',
+                googleAnalyticsId: serverSettings.googleAnalyticsId,
+                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/resultsDatastore.js

@@ -16,10 +16,13 @@ function ResultsDatastore() {
 
     this.saveResult = function(testResults) {
         
+        var screenshotFilePath = path.join(resultsDir, testResults.runId, resultScreenshotName);
+        var screenshotAPIPath = '/';
+
         return createResultFolder(testResults.runId)
 
             .then(function() {
-                return saveScreenshotIfExists(testResults);
+                return saveScreenshotIfExists(testResults, screenshotFilePath);
             })
 
             .then(function() {
@@ -56,10 +59,10 @@ function ResultsDatastore() {
 
 
     // The folder /results/folderName/
-    function createResultFolder(folderName) {
-        var folder = path.join(resultsDir, folderName);
+    function createResultFolder(runId) {
+        var folder = path.join(resultsDir, runId);
 
-        debug('Creating the folder %s', folderName);
+        debug('Creating the folder %s', runId);
 
         return createGlobalFolder().then(function() {
             return Q.nfcall(fs.mkdir, folder);
@@ -89,22 +92,35 @@ function ResultsDatastore() {
         return deferred.promise;
     }
 
+    this.getResultFolder = function(runId) {
+        return path.join(resultsDir, runId);
+    };
+
     // If there is a screenshot, save it as screenshot.jpg in the same folder as the results
-    function saveScreenshotIfExists(testResults) {
+    function saveScreenshotIfExists(testResults, path) {
         var deferred = Q.defer();
 
         if (testResults.screenshotBuffer) {
 
-            var screenshotFilePath = path.join(resultsDir, testResults.runId, resultScreenshotName);
-            fs.writeFile(screenshotFilePath, testResults.screenshotBuffer);
-
+            fs.writeFile(path, testResults.screenshotBuffer, function(err) {
+                if (err) {
+                    debug('Could not save final screenshot');
+                    debug(err);
+                    // But it is OK, we don't need to fail the run
+                    deferred.resolve();
+                } else {
+                    debug('Final screenshot saved: ' + path);
+                    deferred.resolve();
+                }
+            });
             delete testResults.screenshotBuffer;
 
         } else {
+            debug('Screenshot not found');
             deferred.resolve();
         }
 
-        return deferred;
+        return deferred.promise;
     }
 
     this.getScreenshot = function(runId) {

lib/server/datastores/runsDatastore.js

@@ -42,6 +42,16 @@ function RunsDatastore() {
     };
 
 
+    // When the test is launched, set the progress bar
+    this.updateRunProgress = function(runId, progress) {
+        var run = runs[runId];
+
+        run.progress = progress;
+
+        runs[runId] = run;
+    };
+
+
     this.markAsComplete = function(runId) {
         var run = runs[runId];
 
@@ -58,6 +68,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 +89,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.7;
+
+    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.value.message);
+        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/domAccessAgregator.js

@@ -0,0 +1,53 @@
+var debug   = require('debug')('ylt:domAccessAgregator');
+
+var domAccessAgregator = function() {
+    'use strict';
+
+    this.agregate = function(data) {
+        debug('Starting to agregate DOM Accesses...');
+
+        let count = 0;
+        let offenders = {
+            byType: {}
+        };
+
+        const metricsToGather = [
+            'DOMqueriesById',
+            'DOMqueriesByTagName',
+            'DOMqueriesByClassName',
+            'DOMqueriesByQuerySelectorAll',
+            'DOMinserts',
+            'DOMmutationsInserts',
+            'DOMmutationsRemoves',
+            'DOMmutationsAttributes',
+            'eventsBound'
+        ];
+
+        metricsToGather.forEach(key => {
+            
+            if (data.toolsResults.phantomas.metrics[key]) {
+                count += data.toolsResults.phantomas.metrics[key];
+            }
+            
+            offenders.byType[key] = [];
+            if (data.toolsResults.phantomas.offenders[key]) {
+                offenders.byType[key] = data.toolsResults.phantomas.offenders[key];
+            }
+        });
+
+        data.toolsResults.domAccessAgregator = {
+            metrics: {
+                DOMaccesses: count
+            },
+            offenders: {
+                DOMaccesses: offenders
+            }
+        };
+
+        debug('Done agregating DOM Accesses.');
+
+        return data;
+    };
+};
+
+module.exports = new domAccessAgregator();

lib/tools/jsExecutionTransformer.js

@@ -1,62 +0,0 @@
-var debug = require('debug')('ylt:jsExecutionTransformer');
-
-var jsExecutionTransformer = function() {
-
-    this.transform = function(data) {
-        var javascriptExecutionTree = {};
-
-        debug('Starting JS execution transformation');
-
-        try {
-            javascriptExecutionTree = JSON.parse(data.toolsResults.phantomas.offenders.javascriptExecutionTree[0]);
-        
-            if (javascriptExecutionTree.children) {
-                javascriptExecutionTree.children.forEach(function(node) {
-                    
-                    // Mark abnormal things with a warning flag
-                    var contextLenght = (node.data.callDetails && node.data.callDetails.context) ? node.data.callDetails.context.length : null;
-                    if ((node.data.type === 'jQuery - bind' && contextLenght > 5) ||
-                            node.data.resultsNumber === 0 ||
-                            contextLenght === 0) {
-                        node.warning = true;
-                    }
-
-                    // Mark errors with an error flag
-                    if (node.data.type === 'error' || node.data.type === 'jQuery version change') {
-                        node.error = true;
-                    }
-
-                    // Mark a performance flag
-                    if (['domInteractive', 'domContentLoaded', 'domContentLoadedEnd', 'domComplete'].indexOf(node.data.type) >= 0) {
-                        node.windowPerformance = true;
-                    }
-
-                    // 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;
-                    }
-                });
-            }
-
-            debug('JS execution transformation complete');
-
-        } catch(err) {
-            throw err;
-        }
-
-        return javascriptExecutionTree;
-    };
-};
-
-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

@@ -1,205 +0,0 @@
-/**
- * Overwritting the original spying functions in scope.js
- * This is done so we now have a before AND an after callback on the spy
- *
- * @see http://code.jquery.com/jquery-1.10.2.js
- * @see http://code.jquery.com/jquery-2.0.3.js
- */
-/* global document: true, window: true */
-
-exports.version = '0.2';
-
-exports.module = function(phantomas) {
-    'use strict';
-
-    var responseEndTime = Date.now();
-
-    phantomas.on('responseEnd', function() {
-        responseEndTime = Date.now();
-    });
-
-    phantomas.once('init', function() {
-        phantomas.evaluate(function(responseEndTime, deepAnalysis) {
-            (function(phantomas) {
-    
-                // Overwritting phantomas spy function
-                (function() {
-                    var enabled = true;
-
-                    // turn off spying to not include internal phantomas actions
-                    function spyEnabled(state, reason) {
-                        enabled = (state === true);
-
-                        phantomas.log('Spying ' + (enabled ? 'enabled' : 'disabled') + (reason ? ' - ' + reason : ''));
-                    }
-
-                    phantomas.log('Overwritting phantomas spy function');
-
-                    function spy(obj, fn, callbackBefore, callbackAfter) {
-                        var origFn = obj[fn];
-
-                        if (typeof origFn !== 'function') {
-                            return false;
-                        }
-
-                        phantomas.log('Attaching a YLT spy to "' + fn + '" function...');
-
-                        obj[fn] = function() {
-                            var result;
-                            var err;
-                            
-                            // Before
-                            if (enabled) {
-                                callbackBefore.apply(this, arguments);
-                            }
-
-                            // Execute
-                            try {
-
-                                result = origFn.apply(this, arguments);
-
-                            } catch(e) {
-
-                                // Catching the err for the moment, because we need to make sure the callbackAfter function is called.
-
-                                phantomas.log('Error catched on spyed function "' + fn + '": ' + e);
-                                phantomas.log(arguments);
-
-                                err = e;
-
-                            } finally {
-
-                                // After
-                                if (enabled && callbackAfter) {
-                                    callbackAfter.call(this, result, arguments);
-                                }
-
-                                if (err) {
-                                    phantomas.log('Re-throwing the error');
-                                    throw err;
-                                }
-                            }
-
-                            return result;
-                        };
-
-                        // copy custom properties of original function to the mocked one
-                        Object.keys(origFn).forEach(function(key) {
-                            obj[fn][key] = origFn[key];
-                        });
-
-                        obj[fn].prototype = origFn.prototype;
-
-                        return true;
-                    }
-
-                    phantomas.spyEnabled = spyEnabled;
-                    phantomas.spy = spy;
-                })();
-
-
-
-                // Adding some code for the Javascript execution tree construction
-                (function() {
-
-                    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
-                    function pushContext(data) {
-                        if (depth === 0 || deepAnalysis) {
-                            data.timestamp = Date.now() - responseEndTime;
-                            data.loadingStep = phantomas.currentStep || '';
-                            currentContext.addChild(data);
-                        }
-                    }
-                    
-                    // Add a child to the current context and enter his context
-                    function enterContext(data) {
-                        if (depth === 0 || deepAnalysis) {
-                            data.timestamp = Date.now() - responseEndTime;
-                            data.loadingStep = phantomas.currentStep || '';
-                            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) {
-                            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];
-                                }
-                            }
-
-                            var parent = currentContext.parent;
-                            if (parent === null) {
-                                console.error('Error: trying to close root context in ContextTree');
-                            } else {
-                                currentContext = parent;
-                            }
-                        }
-                        depth --;
-                    }
-                    
-                    function getContextData() {
-                        return currentContext.data;
-                    }
-                    
-                    // Returns a clean object, without the parent which causes recursive loops
-                    function readFullTree() {
-                        // Return null if the contextTree is not correctly closed
-                        if (root !== currentContext) {
-                            return null;
-                        }
-                        var current = currentContext;
-
-                        function recusiveRead(node) {
-                            if (node.children.length === 0) {
-                                delete node.children;
-                            } else {
-                                for (var i=0, max=node.children.length ; i<max ; i++) {
-                                    recusiveRead(node.children[i]);
-                                }
-                            }
-                            delete node.parent;
-                        }
-                        recusiveRead(root);
-
-                        return root;
-                    }
-                    
-
-                    function ContextTreeNode(parent, data) {
-                        this.data = data;
-                        this.parent = parent;
-                        this.children = [];
-
-                        this.addChild = function(data) {
-                            var child = new ContextTreeNode(this, data);
-                            this.children.push(child);
-                            return child;
-                        };
-                    }
-
-                    phantomas.log('Adding some contextTree functions to phantomas');
-                    phantomas.pushContext = pushContext;
-                    phantomas.enterContext = enterContext;
-                    phantomas.leaveContext = leaveContext;
-                    phantomas.getContextData = getContextData;
-                    phantomas.readFullTree = readFullTree;
-
-                })();
-
-            })(window.__phantomas);
-        }, responseEndTime, phantomas.getParam('js-deep-analysis'));
-    });
-};

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

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

lib/tools/phantomas/custom_modules/modules/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/domQYLT/domQYLT.js

@@ -1,313 +0,0 @@
-/**
- * Analyzes DOM queries done via native DOM methods
- */
-/* global Element: true, Document: true, Node: true, window: true */
-
-exports.version = '0.10.a';
-
-exports.module = function(phantomas) {
-    'use strict';
-
-    phantomas.setMetric('DOMqueries'); // @desc number of all DOM queries @offenders
-    phantomas.setMetric('DOMqueriesWithoutResults'); // @desc number of DOM queries that retutned nothing @offenders
-    phantomas.setMetric('DOMqueriesById'); // @desc number of document.getElementById calls
-    phantomas.setMetric('DOMqueriesByClassName'); // @desc number of document.getElementsByClassName calls
-    phantomas.setMetric('DOMqueriesByTagName'); // @desc number of document.getElementsByTagName calls
-    phantomas.setMetric('DOMqueriesByQuerySelectorAll'); // @desc number of document.querySelector(All) calls
-    phantomas.setMetric('DOMinserts'); // @desc number of DOM nodes inserts
-    phantomas.setMetric('DOMqueriesDuplicated'); // @desc number of DOM queries called more than once
-    phantomas.setMetric('DOMqueriesAvoidable'); // @desc number of repeated uses of a duplicated query
-
-    // fake native DOM functions
-    phantomas.once('init', function() {
-        phantomas.evaluate(function() {
-            (function(phantomas) {
-                function querySpy(type, query, fnName, context, hasNoResults) {
-                    phantomas.emit('domQuery', type, query, fnName, context, hasNoResults); // @desc DOM query has been made
-                }
-
-                phantomas.spy(Document.prototype, 'getElementById', function(id) {
-                    phantomas.incrMetric('DOMqueriesById');
-                    phantomas.addOffender('DOMqueriesById', '#%s (in %s)', id, '#document');
-
-                    phantomas.enterContext({
-                        type: 'getElementById',
-                        callDetails: {
-                            context: {
-                                domElement: '#document'
-                            },
-                            arguments: ['#' + id]
-                        },
-                        backtrace: phantomas.getBacktrace()
-                    });
-
-                }, function(result, args) {
-                    var id = args[0];
-
-                    querySpy('id', '#' + id, 'getElementById', '#document', (result === null));
-
-                    var moreData = {
-                        resultsNumber : (result === null) ? 0 : 1
-                    };
-                    phantomas.leaveContext(moreData);
-                });
-
-                // selectors by class name
-                function selectorClassNameSpyBefore(className) {
-                    /*jshint validthis: true */
-
-                    var context = phantomas.getDOMPath(this);
-
-                    phantomas.incrMetric('DOMqueriesByClassName');
-                    phantomas.addOffender('DOMqueriesByClassName', '.%s (in %s)', className, context);
-
-                    phantomas.enterContext({
-                        type: 'getElementsByClassName',
-                        callDetails: {
-                            context: {
-                                domElement: context
-                            },
-                            arguments: ['.' + className]
-                        },
-                        backtrace: phantomas.getBacktrace()
-                    });
-                }
-
-                function selectorClassNameAfter(result, args) {
-                    /*jshint validthis: true */
-
-                    var className = args[0];
-                    var context = phantomas.getDOMPath(this);
-
-                    querySpy('class', '.' + className, 'getElementsByClassName', context, (result.length === 0));
-                    
-                    var moreData = {
-                        resultsNumber : (result && result.length > 0) ? result.length : 0
-                    };
-                    phantomas.leaveContext(moreData);
-                }
-
-                phantomas.spy(Document.prototype, 'getElementsByClassName', selectorClassNameSpyBefore, selectorClassNameAfter);
-                phantomas.spy(Element.prototype, 'getElementsByClassName', selectorClassNameSpyBefore, selectorClassNameAfter);
-
-                // selectors by tag name
-                function selectorTagNameSpyBefore(tagName) {
-                    /*jshint validthis: true */
-
-                    var context = phantomas.getDOMPath(this);
-
-                    phantomas.incrMetric('DOMqueriesByTagName');
-                    phantomas.addOffender('DOMqueriesByTagName', '%s (in %s)', tagName, context);
-
-                    phantomas.enterContext({
-                        type: 'getElementsByTagName',
-                        callDetails: {
-                            context: {
-                                domElement: context
-                            },
-                            arguments: [tagName]
-                        },
-                        backtrace: phantomas.getBacktrace()
-                    });
-                }
-
-                function selectorTagNameSpyAfter(result, args) {
-                    /*jshint validthis: true */
-                    
-                    var tagName = args[0];
-                    var context = phantomas.getDOMPath(this);
-
-                    querySpy('tag name', tagName.toLowerCase(), 'getElementsByTagName', context, (result.length === 0));
-                    
-                    var moreData = {
-                        resultsNumber : (result && result.length > 0) ? result.length : 0
-                    };
-                    phantomas.leaveContext(moreData);
-                }
-
-                phantomas.spy(Document.prototype, 'getElementsByTagName', selectorTagNameSpyBefore, selectorTagNameSpyAfter);
-                phantomas.spy(Element.prototype, 'getElementsByTagName', selectorTagNameSpyBefore, selectorTagNameSpyAfter);
-
-
-                // selector queries
-                function selectorQuerySpy(selector, context) {
-                    phantomas.incrMetric('DOMqueriesByQuerySelectorAll');
-                    phantomas.addOffender('DOMqueriesByQuerySelectorAll', '%s (in %s)', selector, context);
-                }
-
-                function selectorQuerySpyBefore(selector) {
-                    /*jshint validthis: true */
-
-                    var context = phantomas.getDOMPath(this);
-                    selectorQuerySpy(selector, context);
-
-                    phantomas.enterContext({
-                        type: 'querySelector',
-                        callDetails: {
-                            context: {
-                                domElement: context
-                            },
-                            arguments: [selector]
-                        },
-                        backtrace: phantomas.getBacktrace()
-                    });
-                }
-
-                function selectorQuerySpyAfter(result, args) {
-                    /*jshint validthis: true */
-
-                    var selector = args[0];
-                    var context = phantomas.getDOMPath(this);
-
-                    querySpy('selector', selector, 'querySelectorAll', context, (!result || result.length === 0));
-                    
-                    var moreData = {
-                        resultsNumber : result ? 1 : 0
-                    };
-                    phantomas.leaveContext(moreData);
-                }
-
-                function selectorAllQuerySpyBefore(selector) {
-                    /*jshint validthis: true */
-
-                    var context = phantomas.getDOMPath(this);
-                    selectorQuerySpy(selector, context);
-
-                    phantomas.enterContext({
-                        type: 'querySelectorAll',
-                        callDetails: {
-                            context: {
-                                domElement: context
-                            },
-                            arguments: [selector]
-                        },
-                        backtrace: phantomas.getBacktrace()
-                    });
-                }
-
-                function selectorAllQuerySpryAfter(result, args) {
-                    /*jshint validthis: true */
-
-                    var selector = args[0];
-                    var context = phantomas.getDOMPath(this);
-
-                    querySpy('selector', selector, 'querySelectorAll', context, (!result || result.length === 0));
-
-                    var moreData = {
-                        resultsNumber : (result && result.length > 0) ? result.length : 0
-                    };
-                    phantomas.leaveContext(moreData);
-                }
-
-                phantomas.spy(Document.prototype, 'querySelector', selectorQuerySpyBefore, selectorQuerySpyAfter);
-                phantomas.spy(Document.prototype, 'querySelectorAll', selectorAllQuerySpyBefore, selectorAllQuerySpryAfter);
-                phantomas.spy(Element.prototype, 'querySelector', selectorQuerySpyBefore, selectorQuerySpyAfter);
-                phantomas.spy(Element.prototype, 'querySelectorAll', selectorAllQuerySpyBefore, selectorAllQuerySpryAfter);
-
-
-                // count DOM inserts
-                function appendChild(child, element, context, appended) {
-                    /*jshint validthis: true */
-
-                    // ignore appending to the node that's not yet added to DOM tree
-                    if (!element.parentNode) {
-                        return;
-                    }
-
-                    // don't count elements added to fragments as a DOM inserts (issue #350)
-                    // DocumentFragment > div[0]
-                    if (context.indexOf('DocumentFragment') === 0) {
-                        return;
-                    }
-
-                    phantomas.incrMetric('DOMinserts');
-                    phantomas.addOffender('DOMinserts', '"%s" appended to "%s"', appended, context);
-
-                    //phantomas.log('DOM insert: node "%s" appended to "%s"', appended, context);
-                }
-
-                function appendChildSpyBefore(child) {
-                    /*jshint validthis: true */
-
-                    var context = phantomas.getDOMPath(this);
-                    var appended = phantomas.getDOMPath(child);
-                    appendChild(child, this, context, appended);
-
-                    phantomas.enterContext({
-                        type: 'appendChild',
-                        callDetails: {
-                            context: {
-                                domElement: context
-                            },
-                            arguments: [appended]
-                        },
-                        backtrace: phantomas.getBacktrace()
-                    });
-                }
-
-                function insertBeforeSpyBefore(child) {
-                    /*jshint validthis: true */
-                    
-                    var context = phantomas.getDOMPath(this);
-                    var appended = phantomas.getDOMPath(child);
-                    appendChild(child, this, context, appended);
-
-                    phantomas.enterContext({
-                        type: 'insertBefore',
-                        callDetails: {
-                            context: {
-                                domElement: context
-                            },
-                            arguments: [appended]
-                        },
-                        backtrace: phantomas.getBacktrace()
-                    });
-                }
-
-                phantomas.spy(Node.prototype, 'appendChild', appendChildSpyBefore, function(result) {
-                    phantomas.leaveContext();
-                });
-                phantomas.spy(Node.prototype, 'insertBefore', insertBeforeSpyBefore, function(result) {
-                    phantomas.leaveContext();
-                });
-            })(window.__phantomas);
-        });
-    });
-
-    // report DOM queries that return no results (issue #420)
-    phantomas.on('domQuery', function(type, query, fnName, context, hasNoResults) {
-        // ignore DOM queries within DOM fragments (used internally by jQuery)
-        if (context.indexOf('body') !== 0 && context.indexOf('#document') !== 0) {
-            return;
-        }
-
-        if (hasNoResults === true) {
-            phantomas.incrMetric('DOMqueriesWithoutResults');
-            phantomas.addOffender('DOMqueriesWithoutResults', '%s (in %s) using %s', query, context, fnName);
-        }
-    });
-
-    // count DOM queries by either ID, tag name, class name and selector query
-    // @see https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-doctype
-    var Collection = require('../../util/collection'),
-        DOMqueries = new Collection();
-
-    phantomas.on('domQuery', function(type, query, fnName, context) {
-        phantomas.log('DOM query: by %s - "%s" (using %s) in %s', type, query, fnName, context);
-        phantomas.incrMetric('DOMqueries');
-
-        if (context && context.indexOf('DocumentFragment') === -1) {
-            DOMqueries.push(type + ' "' + query + '" with ' + fnName + ' (in context ' + context + ')');
-        }
-    });
-
-    phantomas.on('report', function() {
-        DOMqueries.sort().forEach(function(query, cnt) {
-            if (cnt > 1) {
-                phantomas.incrMetric('DOMqueriesDuplicated');
-                phantomas.incrMetric('DOMqueriesAvoidable', cnt - 1);
-                phantomas.addOffender('DOMqueriesDuplicated', '%s: %d queries', query, cnt);
-            }
-        });
-    });
-};

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

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

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

@@ -1,318 +0,0 @@
-/**
- * Analyzes jQuery activity
- *
- * @see http://code.jquery.com/jquery-1.10.2.js
- * @see http://code.jquery.com/jquery-2.0.3.js
- */
-/* global document: true, window: true */
-/* jshint -W030 */
-
-exports.version = '1.0.a';
-
-exports.module = function(phantomas) {
-    'use strict';
-
-    phantomas.setMetric('jQueryVersion', ''); // @desc version of jQuery framework (if loaded) [string]
-    phantomas.setMetric('jQueryVersionsLoaded'); // @desc number of loaded jQuery "instances" (even in the same version)
-    phantomas.setMetric('jQueryOnDOMReadyFunctions'); // @desc number of functions bound to onDOMReady event
-    phantomas.setMetric('jQueryWindowOnLoadFunctions'); // @desc number of functions bound to windowOnLoad event
-    phantomas.setMetric('jQuerySizzleCalls'); // @desc number of calls to Sizzle (including those that will be resolved using querySelectorAll)
-    //phantomas.setMetric('jQueryEventTriggers'); // @desc number of jQuery event triggers
-
-    var jQueryFunctions = [
-        // DOM manipulations
-        'html',
-        'append',
-        'appendTo',
-        'prepend',
-        'prependTo',
-        'before',
-        'insertBefore',
-        'after',
-        'insertAfter',
-        'remove',
-        'detach',
-        'empty',
-        'clone',
-        'replaceWith',
-        'replaceAll',
-        'text',
-        'wrap',
-        'wrapAll',
-        'wrapInner',
-        'unwrap',
-
-        // Style manipulations
-        'css',
-        'offset',
-        'position',
-        'height',
-        'innerHeight',
-        'outerHeight',
-        'width',
-        'innerWidth',
-        'outerWidth',
-        'scrollLeft',
-        'scrollTop',
-
-        // generic events
-        'on',
-        'off',
-        'live',
-        'die',
-        'delegate',
-        'undelegate',
-        'one',
-        'bind',
-        'unbind',
-
-        // more events
-        'blur',
-        'change',
-        'click',
-        'dblclick',
-        'error',
-        'focus',
-        'focusin',
-        'focusout',
-        'hover',
-        'keydown',
-        'keypress',
-        'keyup',
-        'load',
-        'mousedown',
-        'mouseenter',
-        'mouseleave',
-        'mousemove',
-        'mouseout',
-        'mouseover',
-        'mouseup',
-        'resize',
-        'scroll',
-        'select',
-        'submit',
-        'toggle',
-        'unload',
-
-        // attributes
-        'attr',
-        'prop',
-        'removeAttr',
-        'removeProp',
-        'val',
-        'hasClass',
-        'addClass',
-        'removeClass',
-        'toggleClass'
-    ];
-
-    // spy calls to jQuery functions
-    phantomas.once('init', function() {
-        phantomas.evaluate(function(jQueryFunctions) {
-            (function(phantomas) {
-                var jQuery;
-                var oldJQuery;
-
-                phantomas.spyGlobalVar('jQuery', function(jQuery) {
-                    var version;
-
-                    if (!jQuery || !jQuery.fn) {
-                        phantomas.log('jQuery: unable to detect version!');
-                        return;
-                    }
-
-                    // Tag the current version of jQuery to avoid multiple reports of jQuery being loaded
-                    // when it's actually only restored via $.noConflict(true) - see comments in #435
-                    if (jQuery.__phantomas === true) {
-                        phantomas.log('jQuery: this instance has already been seen by phantomas');
-                        return;
-                    }
-                    jQuery.__phantomas = true;
-
-                    // report the version of jQuery
-                    version = jQuery.fn.jquery;
-                    phantomas.emit('jQueryLoaded', version);
-
-                    phantomas.pushContext({
-                        type: (oldJQuery) ? 'jQuery version change' : 'jQuery loaded',
-                        callDetails: {
-                            arguments: ['version ' + version]
-                        },
-                        backtrace: phantomas.getBacktrace()
-                    });
-                    oldJQuery = version;
-
-                    // jQuery.ready.promise
-                    // works for jQuery 1.8.0+ (released Aug 09 2012)
-                    phantomas.spy(jQuery.ready, 'promise', function(func) {
-                        phantomas.incrMetric('jQueryOnDOMReadyFunctions');
-                        phantomas.addOffender('jQueryOnDOMReadyFunctions', phantomas.getCaller(3));
-
-                        phantomas.pushContext({
-                            type: 'jQuery - onDOMReady',
-                            callDetails: {
-                                arguments: [func]
-                            },
-                            backtrace: phantomas.getBacktrace()
-                        });
-
-                    }) || phantomas.log('jQuery: can not measure jQueryOnDOMReadyFunctions (jQuery used on the page is too old)!');
-
-
-                    // Sizzle calls - jQuery.find
-                    // works for jQuery 1.3+ (released Jan 13 2009)
-                    phantomas.spy(jQuery, 'find', function(selector, context) {
-                        phantomas.incrMetric('jQuerySizzleCalls');
-                        phantomas.addOffender('jQuerySizzleCalls', '%s (in %s)', selector, (phantomas.getDOMPath(context) || 'unknown'));
-                        
-                        phantomas.enterContext({
-                            type: 'jQuery - find',
-                            callDetails: {
-                                context: {
-                                    length: this.length,
-                                    firstElementPath: phantomas.getDOMPath(context)
-                                },
-                                arguments: [selector]
-                            },
-                            backtrace: phantomas.getBacktrace()
-                        });
-
-                    }, function(result) {
-                        var moreData = {
-                            resultsNumber : (result && result.length) ? result.length : 0
-                        };
-                        phantomas.leaveContext(moreData);
-                    }) || phantomas.log('jQuery: can not measure jQuerySizzleCalls (jQuery used on the page is too old)!');
-
-                    /*if (!jQuery.event) {
-                        phantomas.spy(jQuery.event, 'trigger', function(ev, data, elem) {
-                            var path = phantomas.getDOMPath(elem),
-                                type = ev.type || ev;
-
-                            phantomas.log('Event: triggered "%s" on "%s"', type, path);
-
-                            phantomas.incrMetric('jQueryEventTriggers');
-                            phantomas.addOffender('jQueryEventTriggers', '"%s" on "%s"', type, path);
-                        });
-                    }*/
-
-                    // jQuery events bound to window' onLoad event (#451)
-                    phantomas.spy(jQuery.fn, 'on', function(eventName, func) {
-                        if ((eventName === 'load') && (this[0] === window)) {
-                            phantomas.incrMetric('jQueryWindowOnLoadFunctions');
-                            phantomas.addOffender('jQueryWindowOnLoadFunctions', phantomas.getCaller(2));
-
-                            phantomas.pushContext({
-                                type: 'jQuery - windowOnLoad',
-                                callDetails: {
-                                    arguments: [func]
-                                },
-                                backtrace: phantomas.getBacktrace()
-                            });
-                        }
-                    });
-
-                    // Add spys on many jQuery functions
-                    jQueryFunctions.forEach(function(functionName) {
-                        var capitalizedName = functionName.substring(0,1).toUpperCase() + functionName.substring(1);
-                        
-                        phantomas.spy(jQuery.fn, functionName, function(args) {
-
-                            // Clean args
-                            args = [].slice.call(arguments);
-                            args.forEach(function(arg, index) {
-                                
-                                if (arg instanceof Object) {
-                                    
-                                    if (arg instanceof jQuery || (arg.jquery && arg.jquery.length > 0)) {
-                                        
-                                        arg = phantomas.getDOMPath(arg[0]) || 'unknown';
-
-                                    } else if (arg instanceof HTMLElement) {
-                                        
-                                        arg = phantomas.getDOMPath(arg) || 'unknown';
-
-                                    } else if (typeof arg === 'function') {
-
-                                        arg = '(function)';
-
-                                    } else {
-                                        
-                                        try {
-                                            arg = JSON.stringify(arg);
-                                        } catch(e) {
-                                            arg = '[Object]';
-                                        }
-                                        
-                                    }
-                                }
-
-                                if ((typeof arg === 'string' || arg instanceof String) && arg.length > 200) {
-                                    arg = arg.substring(0, 200) + '...';
-                                }
-
-                                if (typeof arg === 'function') {
-                                    arg = '(function)';
-                                }
-
-                                if (arg === true) {
-                                    arg = 'true';
-                                }
-
-                                if (arg === false) {
-                                    arg = 'false';
-                                }
-
-                                if (arg === null) {
-                                    arg = 'null';
-                                }
-
-                                if (typeof arg !== 'number' && typeof arg !== 'string' && !(arg instanceof String)) {
-                                    arg = 'undefined';
-                                }
-
-                                args[index] = arg;
-                            });
-
-
-                            phantomas.enterContext({
-                                type: 'jQuery - ' + functionName,
-                                callDetails: {
-                                    context: {
-                                        length: this.length,
-                                        firstElementPath: phantomas.getDOMPath(this[0])
-                                    },
-                                    arguments: args
-                                },
-                                backtrace: phantomas.getBacktrace()
-                            });
-
-                        }, function(result) {
-                            phantomas.leaveContext();
-                        }) || phantomas.log('jQuery: can not track jQuery - ' + capitalizedName + ' (this version of jQuery doesn\'t support it)');
-                    });
-                });
-            })(window.__phantomas);
-        }, jQueryFunctions);
-    });
-
-
-    // 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);
-
-        // 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

@@ -1,57 +0,0 @@
-/**
- * Reports the use of functions known to be serious performance bottlenecks in JS
- *
- * @see http://www.nczonline.net/blog/2013/06/25/eval-isnt-evil-just-misunderstood/
- * @see http://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html
- * @see http://www.stevesouders.com/blog/2012/04/10/dont-docwrite-scripts/
- */
-/* global document: true, window: true */
-
-exports.version = '0.1.a';
-
-exports.module = function(phantomas) {
-    'use strict';
-
-    phantomas.setMetric('documentWriteCalls'); //@desc number of calls to either document.write or document.writeln
-    phantomas.setMetric('evalCalls'); // @desc number of calls to eval (either direct or via setTimeout / setInterval)
-
-    phantomas.once('init', function() {
-        phantomas.evaluate(function() {
-            (function(phantomas) {
-                function report(msg, caller, backtrace, metric) {
-                    phantomas.log(msg + ': from ' + caller + '!');
-                    phantomas.log('Backtrace: ' + backtrace);
-                    phantomas.incrMetric(metric);
-                }
-
-                // spy calls to eval()
-                /*phantomas.spy(window, 'eval', function(code) {
-                    report('eval() called directly', phantomas.getCaller(), phantomas.getBacktrace(), 'evalCalls');
-                    phantomas.log('eval\'ed code: ' + (code || '').substring(0, 150) + '(...)');
-                });*/
-
-                // spy calls to setTimeout / setInterval with string passed instead of a function
-                /*phantomas.spy(window, 'setTimeout', function(fn, interval) {
-                    if (typeof fn !== 'string') return;
-
-                    report('eval() called via setTimeout("' + fn + '")', phantomas.getCaller(), phantomas.getBacktrace(), 'evalCalls');
-                });*/
-
-                /*phantomas.spy(window, 'setInterval', function(fn, interval) {
-                    if (typeof fn !== 'string') return;
-
-                    report('eval() called via setInterval("' + fn + '")', phantomas.getCaller(), phantomas.getBacktrace(), 'evalCalls');
-                });*/
-
-                // spy document.write(ln)
-                phantomas.spy(document, 'write', function(arg) {
-                    report('document.write() used', phantomas.getCaller(), phantomas.getBacktrace(), 'documentWriteCalls');
-                });
-
-                phantomas.spy(document, 'writeln', function(arg) {
-                    report('document.writeln() used', phantomas.getCaller(), phantomas.getBacktrace(), 'documentWriteCalls');
-                });
-            })(window.__phantomas);
-        });
-    });
-};

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

@@ -1,49 +0,0 @@
-/**
- * Meters the number of page errors, and provides traces as offenders for "jsErrors" metric
- */
-
-exports.version = '0.3.a';
-
-exports.module = function(phantomas) {
-    'use strict';
-    
-    phantomas.setMetric('jsErrors'); // @desc number of JavaScript errors
-    
-    function formatTrace(trace) {
-        var ret = [];
-
-        if(Array.isArray(trace)) {
-            trace.forEach(function(entry) {
-                ret.push((entry.function ? entry.function + ' ' : '') + (entry.sourceURL || entry.file) + ':' + entry.line);
-            });
-        }
-
-        return ret;
-    }
-
-    phantomas.on('jserror', function(msg, trace) {
-        trace = formatTrace(trace);
-
-        phantomas.log(msg);
-        phantomas.log('Backtrace: ' + trace.join(' / '));
-
-        phantomas.incrMetric('jsErrors');
-        phantomas.addOffender('jsErrors', msg + ' - ' + trace.join(' / '));
-
-        // Yeah, this is weird, i'm sending the error back to the browser...
-        phantomas.evaluate(function(msg, caller, trace) {
-            (function(phantomas) {
-
-                phantomas.pushContext({
-                    type: 'error',
-                    callDetails: {
-                        arguments: [msg]
-                    },
-                    caller: caller,
-                    backtrace: trace
-                });
-
-            })(window.__phantomas);
-        }, msg, trace[0], trace.join(' / '));
-    });
-};