From 239672116b68b5a964e94b0819cf5132ee147844 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20M=C3=A9tais?= Date: Sat, 20 Dec 2014 09:25:26 +0100 Subject: [PATCH] Removing the old server --- app/lib/strReplace.js | 8 - app/node_controllers/indexController.js | 27 - app/node_controllers/launchTestController.js | 79 -- app/node_controllers/resultsController.js | 47 - app/node_controllers/waitingQueueSocket.js | 60 -- app/node_views/index.html | 35 - app/node_views/launchTest.html | 97 -- app/node_views/results.html | 933 ------------------- app/public/fonts/icons.woff | Bin 2136 -> 0 bytes app/public/fonts/svg-icons/arrow-left3.svg | 1 - app/public/fonts/svg-icons/bars.svg | 1 - app/public/fonts/svg-icons/eye.svg | 1 - app/public/fonts/svg-icons/lab.svg | 1 - app/public/fonts/svg-icons/list.svg | 1 - app/public/fonts/svg-icons/question.svg | 1 - app/public/fonts/svg-icons/warning.svg | 1 - app/public/scripts/app.js | 7 - app/public/scripts/resultsCtrl.js | 406 -------- app/public/scripts/showOffenders.js | 17 - app/public/styles/index.css | 33 - app/public/styles/launchTest.css | 25 - app/public/styles/less/icons.less | 56 -- app/public/styles/less/index.less | 35 - app/public/styles/less/launchTest.less | 19 - app/public/styles/less/main.less | 66 -- app/public/styles/less/results.less | 497 ---------- app/public/styles/main.css | 139 --- app/public/styles/results.css | 465 --------- {app/public => front/src}/img/favicon.png | Bin front/src/main.html | 18 +- package.json | 5 +- server.js | 59 -- src | 672 ------------- 33 files changed, 10 insertions(+), 3802 deletions(-) delete mode 100644 app/lib/strReplace.js delete mode 100644 app/node_controllers/indexController.js delete mode 100644 app/node_controllers/launchTestController.js delete mode 100644 app/node_controllers/resultsController.js delete mode 100644 app/node_controllers/waitingQueueSocket.js delete mode 100644 app/node_views/index.html delete mode 100644 app/node_views/launchTest.html delete mode 100644 app/node_views/results.html delete mode 100644 app/public/fonts/icons.woff delete mode 100755 app/public/fonts/svg-icons/arrow-left3.svg delete mode 100755 app/public/fonts/svg-icons/bars.svg delete mode 100755 app/public/fonts/svg-icons/eye.svg delete mode 100755 app/public/fonts/svg-icons/lab.svg delete mode 100755 app/public/fonts/svg-icons/list.svg delete mode 100755 app/public/fonts/svg-icons/question.svg delete mode 100755 app/public/fonts/svg-icons/warning.svg delete mode 100644 app/public/scripts/app.js delete mode 100644 app/public/scripts/resultsCtrl.js delete mode 100644 app/public/scripts/showOffenders.js delete mode 100644 app/public/styles/index.css delete mode 100644 app/public/styles/launchTest.css delete mode 100644 app/public/styles/less/icons.less delete mode 100644 app/public/styles/less/index.less delete mode 100644 app/public/styles/less/launchTest.less delete mode 100644 app/public/styles/less/main.less delete mode 100644 app/public/styles/less/results.less delete mode 100644 app/public/styles/main.css delete mode 100644 app/public/styles/results.css rename {app/public => front/src}/img/favicon.png (100%) delete mode 100644 server.js delete mode 100644 src diff --git a/app/lib/strReplace.js b/app/lib/strReplace.js deleted file mode 100644 index 4b36abb..0000000 --- a/app/lib/strReplace.js +++ /dev/null @@ -1,8 +0,0 @@ -/** - * Alternative to the standard String.prototype.replace function - * Avoids problems with $$, $1, $2, ... - */ - -module.exports = function(str, searched, replacement) { - return str.split(searched).join(replacement); -}; \ No newline at end of file diff --git a/app/node_controllers/indexController.js b/app/node_controllers/indexController.js deleted file mode 100644 index b5c488c..0000000 --- a/app/node_controllers/indexController.js +++ /dev/null @@ -1,27 +0,0 @@ -/** - * Yellow Lab Tools home page controller - */ - -var async = require('async'); -var fs = require ('fs'); -var strReplace = require('../lib/strReplace'); - -var indexController = function(req, res, googleAnalyticsId) { - 'use strict'; - - async.parallel({ - - htmlTemplate: function(callback) { - fs.readFile('./app/node_views/index.html', {encoding: 'utf8'}, callback); - } - - }, function(err, results) { - var html = results.htmlTemplate; - html = strReplace(html, '%%GA_ID%%', googleAnalyticsId); - - res.setHeader('Content-Type', 'text/html'); - res.send(html); - }); - }; - - module.exports = indexController; \ No newline at end of file diff --git a/app/node_controllers/launchTestController.js b/app/node_controllers/launchTestController.js deleted file mode 100644 index a3ee5fc..0000000 --- a/app/node_controllers/launchTestController.js +++ /dev/null @@ -1,79 +0,0 @@ -/** - * Controller for the test launching page (the waiting page, after the user submited a test on the index page) - */ - -var async = require('async'); -var fs = require ('fs'); -var strReplace = require('../lib/strReplace'); - -var launchTestController = function(req, res, testQueue, googleAnalyticsId) { - 'use strict'; - - var resultsPath = 'results/' + testId; - var phantomasResultsPath = resultsPath + '/results.json'; - - var url = req.body.url; - - var options = {}; - if (req.body.timeout) { - options.timeout = req.body.timeout; - } - - async.waterfall([ - - function htmlTemplate(callback) { - fs.readFile('./app/node_views/launchTest.html', {encoding: 'utf8'}, callback); - }, - - function sendResponse(html, callback) { - - html = strReplace(html, '%%TEST_URL%%', url); - html = strReplace(html, '%%TEST_ID%%', testId); - html = strReplace(html, '%%GA_ID%%', googleAnalyticsId); - - res.setHeader('Content-Type', 'text/html'); - res.send(html); - - callback(); - }, - - function createFolder(callback) { - // Create results folder - fs.mkdir(resultsPath, callback); - }, - - function executePhantomas(callback) { - console.log('Adding test ' + testId + ' on ' + url + ' to the queue'); - - var task = { - testId: testId, - url: url, - options: options - }; - - testQueue.push(task, callback); - }, - - function writeResults(json, resultsObject, callback) { - console.log('Saving Phantomas results file to ' + phantomasResultsPath); - fs.writeFile(phantomasResultsPath, JSON.stringify(json, null, 4), callback); - } - - ], function(err) { - if (err) { - console.log('An error occured in the phantomas test: ', err); - - fs.writeFile(phantomasResultsPath, JSON.stringify({url: url, error: err}, null, 4), function(err) { - if (err) { - console.log('Could not even write an error message on file ' + phantomasResultsPath); - console.log(err); - } - }); - testQueue.testFailed(testId); - } else { - testQueue.testComplete(testId); - } - }); - }; - - module.exports = launchTestController; \ No newline at end of file diff --git a/app/node_controllers/resultsController.js b/app/node_controllers/resultsController.js deleted file mode 100644 index d1cdb97..0000000 --- a/app/node_controllers/resultsController.js +++ /dev/null @@ -1,47 +0,0 @@ -/** - * The page that dispays the results - */ - -var async = require('async'); -var fs = require('fs'); -var strReplace = require('../lib/strReplace'); - -var resultsController = function(req, res, googleAnalyticsId) { - 'use strict'; - - var testId = req.params.testId; - var resultsPath = 'results/' + testId; - var phantomasResultsPath = resultsPath + '/results.json'; - - console.log('Opening test ' + testId + ' results as HTML'); - - async.parallel({ - - htmlTemplate: function(callback) { - fs.readFile('./app/node_views/results.html', {encoding: 'utf8'}, callback); - }, - - phantomasResults: function(callback) { - fs.readFile(phantomasResultsPath, {encoding: 'utf8'}, callback); - } - - }, function(err, results) { - if (err) { - console.log(err); - return res.status(404).send('Sorry, test not found...'); - } - - // Escape "" because it can interfer with the HTML parser - var phantomasResults = results.phantomasResults; - phantomasResults = phantomasResults.replace(/<\/script>/g, '\\u003c/script>'); - - var html = results.htmlTemplate; - html = strReplace(html, '%%RESULTS%%', phantomasResults); - html = strReplace(html, '%%GA_ID%%', googleAnalyticsId); - - res.setHeader('Content-Type', 'text/html'); - res.send(html); - }); -}; - -module.exports = resultsController; \ No newline at end of file diff --git a/app/node_controllers/waitingQueueSocket.js b/app/node_controllers/waitingQueueSocket.js deleted file mode 100644 index b8fd30f..0000000 --- a/app/node_controllers/waitingQueueSocket.js +++ /dev/null @@ -1,60 +0,0 @@ -/** - * Socket.io handler - */ - -var fs = require('fs'); - -var waitingQueueSocket = function(socket, testQueue) { - - socket.on('waiting', function(testId) { - console.log('User waiting for test id ' + testId); - - sendTestStatus(testId); - - testQueue.on('testComplete', function(id) { - if (testId === id) { - socket.emit('complete'); - console.log('Sending complete event to test id ' + testId); - } - }); - - testQueue.on('testFailed', function(id) { - if (testId === id) { - socket.emit('failed'); - console.log('Sending failed event to test id ' + testId); - } - }); - - testQueue.on('queueMoving', function() { - var positionInQueue = testQueue.indexOf(testId); - if (positionInQueue >= 0) { - socket.emit('position', positionInQueue); - console.log('Sending position to test id ' + testId); - } - }); - }); - - // Finds the status of a test and send it to the client - function sendTestStatus(testId) { - // Check task position in queue - var positionInQueue = testQueue.indexOf(testId); - - if (positionInQueue >= 0) { - socket.emit('position', positionInQueue); - } else { - // Find in results files - var exists = fs.exists('results/' + testId + '/results.json', function(exists) { - if (exists) { - // TODO : find a way to make sure the file is completely written - setTimeout(function() { - socket.emit('complete'); - }, 4000); - } else { - socket.emit('404'); - } - }); - } - } -}; - -module.exports = waitingQueueSocket; \ No newline at end of file diff --git a/app/node_views/index.html b/app/node_views/index.html deleted file mode 100644 index 5cd772b..0000000 --- a/app/node_views/index.html +++ /dev/null @@ -1,35 +0,0 @@ - - - - Yellow Lab Tools - - - - - -

Yellow Lab Tools

-

Free online test to help speeding up heavy web pages

-
- - -
-

(This is a BETA, your feedback is more than welcome)

- -
-

Yellow Lab Tools is an open source project by Gaël Métais, based on Phantomas.
If you like it, give it a ★ on GitHub!

-
- - - - \ No newline at end of file diff --git a/app/node_views/launchTest.html b/app/node_views/launchTest.html deleted file mode 100644 index 9d31ffc..0000000 --- a/app/node_views/launchTest.html +++ /dev/null @@ -1,97 +0,0 @@ - - - - Yellow Lab Tools - Awaiting - - - - - - -

Yellow Lab Tools

- -
- -
%%TEST_URL%%
- -
-

Yellow Lab Tools is an open source project by Gaël Métais, based on Phantomas.
If you like it, give it a ★ on GitHub!

-
- - - - \ No newline at end of file diff --git a/app/node_views/results.html b/app/node_views/results.html deleted file mode 100644 index 6d2c686..0000000 --- a/app/node_views/results.html +++ /dev/null @@ -1,933 +0,0 @@ - - - - Yellow Lab Tools - Results page - - - - - - - - - - -

Yellow Lab Tools

- -
Untangling and counting the spaghettis...
- -
-
Tested url:   {{phantomasResults.url}}
- -
-
New test -
JS Timeline
-
Grades
-
- -
-

Error: {{phantomasResults.error}}

-
Phantomas timed out
-
Phantomas config error
-
Phantomas failed to load page
-
Phantomas internal error
-
Javascript execution tree error
-
JSON undefined error
-
- -
-

Grades

- -
-
-
{{notations.domComplexity}}
-
DOM complexity
-
-
-
-
DOM elements count
-
- {{phantomasResults.metrics.DOMelementsCount}} -
-
-
- -

A high number of DOM elements means a lot of work for the browser to render the page.

-

It also slows down Javascript DOM queries, as there are more elements to search through.

- -
-
-
-
DOM max depth
-
- {{phantomasResults.metrics.DOMelementMaxDepth}} - -
-
-
- -

A deep DOM makes the CSS matching with DOM elements difficult.

-

It also slows down Javascript modifications to the DOM because changing the dimensions of an element makes the browser re-calculate the dimensions of it's parents. Same thing for Javascript events, that bubble up to the document root.

- -
-
-
-
Number of iframes
-
- {{phantomasResults.metrics.iframesCount}} -
-
-
- -

iFrames are the most complex HTML elements. They are pages, just like the main page, and the browser needs to create a new page context, which has a cost.

- -
-
-
-
IDs duplicated
-
- {{phantomasResults.metrics.DOMidDuplicated}} - -
-
-
- -

IDs of HTML elements must be document-wide unique. This can cause problems with getElementById returning the wrong element.

- -
-
-
-
-
-
-
{{notations.jsDomManipulations}}
-
DOM manipulations
-
-
-
-
DOM inserts
-
- {{phantomasResults.metrics.DOMinserts}} - -
-
-
- -

Working with the DOM in Javascript triggers layout calculations and slows down the page.

-

Try, as much as possible, to have an HTML page fully generated by the server instead of making changes with JS.

- -
-
-
-
DOM queries
-
- {{phantomasResults.metrics.DOMqueries}} -
-
-
- -

DOM queries are like looking in a large catalog of items. Even if the browsers made progress on the performances of queries, websites often make hundreds of them.

-

Try to reduce the number of queries by refactoring your Javascript code.

-

Avoid also to have a read query between two write queries. To be able to reduce the number repaints and optimize performances, browsers buffer the DOM writing operations and treat them in bulk. But each time a DOM reading is asked, the browser needs to empty the buffer. This can be particularly slow inside a loop.

- -
-
-
-
Avoidable queries
-
- {{phantomasResults.metrics.DOMqueriesAvoidable}} - -
-
-
- -

This is the number of queries that could be avoided by removing all duplicated queries.

-

Simply save the result of a query in a variable. Ok it is not always simple, especially with third-party scripts, but at least do it with your own code.

- -
-
-
-
Events bound
-
- {{phantomasResults.metrics.eventsBound}} - -
-
-
- -

Binding too many events has a cost.

-

It can be avoided by using "event delegation". Instead of binding events on each element one by one, events delegation binds them on the top level document element and uses the bubbling principle. It will imperceptibly slow down the event when it occurs, but the loading of the page will speed-up.

- -
-
-
-
-
-
-
{{notations.jsBadPractices}}
-
Bad Javascript
-
-
-
-
Javascript errors
-
- {{phantomasResults.metrics.jsErrors}} - -
-
-
- -

Just to let you know there are some errors on the page.

-

Please note that some errors only occur in the PhantomJS browser, so you might need to double check on other browsers.

- -
-
-
-
eval calls
-
{{phantomasResults.metrics.evalCalls}}
-
-
- -

The 'eval' function is slow and a bad coding practice. Try to get rid of it.

- -
-
-
-
document.write calls
-
{{phantomasResults.metrics.documentWriteCalls}}
-
-
- -

They slow down the page construction, especially if they are used to insert scripts in the page. Remove them ASAP.

-

If you cannot remove them because they come from a third-party script (such as ads), have a look at PostScribe.

- -
-
-
-
Console messages
-
{{phantomasResults.metrics.consoleMessages}}
-
-
- -

Try to keep your console clean when in production. Debugging is good for development only.

-

Writing in the console has a cost, especially when dumping large object variables.

-

There is also a problem with Internet Explorer 8, not knowing the console object.

- -
-
-
-
Global variables
-
- {{phantomasResults.metrics.globalVariables}} - -
-
-
- -

It is a bad practice because they clutter up the global namespace. If two scripts use the same variable name in the global scope, it can cause conflicts and it is generally hard to debug.

-

Global variables also take a (very) little bit longer to be accessed than variables in the local scope of a function.

- -
-
-
-
DOM manipulations in body
-
- {{inBodyDomManipulations}} -
-
-
- -

This metric counts the number of DOM queries, DOM inserts, binds, etc. made by the Javascript before the DOMContentLoaded event.

-

Wait for this event before manipulating the DOM. Do not execute Javascript in the middle of the BODY as it slows down the construction of the DOM and makes a poor maintainability. This is what i call spaghetti code.

-

The JS Timeline tab can help you identify what's happening.

- -
-
-
-
-
-
-
{{notations.jQueryLoading}}
-
jQuery version
-
-
-
-
jQuery version
-
{{phantomasResults.metrics.jQueryVersion}}
-
-
- -

Current latest versions of jQuery are 1.11 (with support for old IE versions) and 2.1 (without).

-

Each new version of jQuery optimizes performances. Do not keep an old version of jQuery. Updating can sometimes break a few things, but it is generally quite easy to fix them up. So don't hesitate.

- -
-
-
-
{{phantomasResults.metrics.jQueryDifferentVersions}} versions loaded
-
- {{version}} & -
-
-
- -

jQuery is a heavy library. You should **never** load jQuery more than one on the same page.

- -
-
-
-
-
-
-
{{notations.cssComplexity}}
-
CSS complexity
-
-
-
-
Rules count
-
- {{phantomasResults.metrics.cssRules}} -
-
-
- -

Having a huge number of CSS rules hurts performances. If the number of CSS rules is higher than the number of DOM elements, there is clearly a problem.

-

Huge stylesheets generally occur when the different pages of a website load all the CSS, concatenated in a single stylesheet, even if a large part of the rules are page-specific. Solution is to create one main CSS file with global rules and one custom files per page.

- -
-
-
-
Complex selectors
-
- {{phantomasResults.metrics.cssComplexSelectors}} - -
-
-
- -

Complex selectors are CSS selectors with 4 or more expressions, like "#header ul li .foo".

-

They are adding more work for the browser, and this could be avoided by simplifying selectors.

- -
-
-
-
Complex attributes selector
-
- {{phantomasResults.metrics.cssComplexSelectorsByAttribute}} - -
-
-
- -

Complex attributes selectors are one of these: -

    -
  • .foo[type*=bar] (contains bar)
    • -
  • .foo[type^=bar] (starts with bar)
    • -
  • .foo[type|=bar] (starts with bar or bar-)
    • -
  • .foo[type$=bar] (ends with bar)
    • -
  • .foo[type~=bar baz] (bar or baz)
    • -
-

-

Their matching process needs more CPU and it has a cost on performances.

- -
-
-
-
-
-
-
{{notations.badCss}}
-
Bad CSS
-
-
-
-
CSS syntax error
-
- {{phantomasResults.metrics.cssParsingErrors}} - -
-
-
- -

Yellow Lab Tools failed to parse a CSS file. I doubt the problem comes from the css parser.

-

Maybe a CSS validator can help you.

- -
-
-
-
Uses of @import
-
- {{phantomasResults.metrics.cssImports}} - -
-
-
- -

It’s bad for performance to use @import because CSS files don't get downloaded in parallel.

-

You should use <link rel='stylesheet' href='a.css'> instead.

- -
-
-
-
Duplicated selectors
-
- {{phantomasResults.metrics.cssDuplicatedSelectors}} - -
-
-
- -

This is when two or more selectors are strictly identical and should be merged.

- -
-
-
-
Duplicated properties
-
- {{phantomasResults.metrics.cssDuplicatedProperties}} - -
-
-
- -

This is the number of property definitions duplicated within a selector.

- -
-
-
-
Empty rules
-
- {{phantomasResults.metrics.cssEmptyRules}} - -
-
-
- -

Very easy to fix.

- -
-
-
-
CSS expressions
-
- {{phantomasResults.metrics.cssExpressions}} - -
-
-
- -

Such as: expression( document.body.clientWidth > 600 ? "600px" : "auto" )

-

This is a bad practice as it slows down browsers. There are some simpler CSS3 methods for doing this.

- -
-
-
-
Uses of !important
-
- {{phantomasResults.metrics.cssImportants}} - -
-
-
- -

It can be useful, but only as a last resort. It is a bad practice because it overrides the normal cascading logic. The more you use !important, the more you need it again to over-override. This conducts to a poor maintainability.

- -
-
-
-
Old IE fixes
-
- {{phantomasResults.metrics.cssOldIEFixes}} - -
-
-
- -

What browser do you need to support? Once you've got the answer, take a look at these old rules that pollute your CSS code and remove them.

-

IE6: -

    -
  • * html
    • -
  • html > body (everything but IE6)
    • -
-

-

IE7: -

    -
  • *height: 123px;
    • -
  • height: 123px !ie;
    • -
-

-

IE9: -

    -
  • -ms-filter
    • -
  • progid:DXImageTransform.Microsoft
    • -
-

- -
-
-
-
Old prefixes
-
- {{phantomasResults.metrics.cssOldPropertyPrefixes}} - -
-
-
- -

Many property prefixes such as -moz- or -webkit- are not needed anymore, or by very few people. You can remove them or replace them with the non-prefixed version. This will help reducing your stylesheets weight.

- -
-
-
-
Universal selectors
-
- {{phantomasResults.metrics.cssUniversalSelectors}} - -
-
-
- -

Universal selectors are the most expensive CSS selectors.

-

More informations here.

- -
-
-
-
Redundant body selectors
-
- {{phantomasResults.metrics.cssRedundantBodySelectors}} - -
-
-
- -

This is one way to remove complexity from a CSS rule. Generally, when "body" is specified in a rule it can be removed, because an element is necessarily inside the body.

- -
-
-
-
Redundant tags selectors
-
- {{phantomasResults.metrics.cssRedundantChildNodesSelectors}} - -
-
-
- -

Some tags included inside other tags are obvious. For example, when "ul li" is specified in a rule, "ul" can be removed because the "li" element is always inside a "ul". Same thing for "tr td", "select option", ...

-

Lowering compexity in CSS selectors can make the page load a little faster.

- -
-
-
-
-
-
-
{{notations.requests}}
-
Requests number
-
-
-
-
Total requests
-
- {{phantomasResults.metrics.requests}} -
-
-
- -

This is one of the most important performance rule. Every request is slowing down the page loading.

-

There are several technics to reduce their number: -

    -
  • Concatenate JS files
    • -
  • Concatenate CSS files
    • -
  • Embed or inline small JS or CSS files in the HTML
    • -
  • Create sprites or icon fonts
    • -
  • Base64 encode small images in HTML or stylesheets
    • -
  • Use lazyloading for images
    • -
-

- -
-
-
-
Documents
-
- {{phantomasResults.metrics.htmlCount}} - -
-
-
-
-
Scripts
-
- {{phantomasResults.metrics.jsCount}} - -
-
-
-
-
Stylesheets
-
- {{phantomasResults.metrics.cssCount}} - -
-
-
-
-
Images
-
- {{phantomasResults.metrics.imageCount}} - -
-
-
-
-
Fonts
-
- {{phantomasResults.metrics.webfontCount}} - -
-
-
-
-
Videos
-
- {{phantomasResults.metrics.videoCount}} - -
-
-
-
-
JSON
-
- {{phantomasResults.metrics.jsonCount}} - -
-
-
-
-
Other
-
- {{phantomasResults.metrics.otherCount}} - -
-
-
-
-
-
-
-
{{notations.network}}
-
Network
-
-
-
-
404 not found
-
- {{phantomasResults.metrics.notFound}} - -
-
-
- -

404 errors are never cached, so each time a page ask for it, it hits se server. Even if it is behind a CDN or a reverse-proxy cache.

- -
-
-
-
Connections closed
-
- {{phantomasResults.metrics.closedConnections}} - -
-
-
- -

This counts the number of requests not keeping the connection alive (specifying "Connection: close" in the response headers). It is only counting a request if it is followed by another request on the same domain.

-

This is slowing down the next request, because the brower needs to open a new connection to the server, which means a additional round-trip.

-

Correct the problem by setting a Keep-Alive header on the guilty server.

- -
-
-
-
Duplicated requests
-
- {{phantomasResults.metrics.multipleRequests}} - -
-
-
- -

This only happens when the asset has no cache and is requested more than once on the same page. Be very careful about it.

- -
-
-
-
Caching disabled
-
- {{phantomasResults.metrics.cachingDisabled}} - -
-
-
- -

Counts responses with caching disabled (max-age=0)

-

Fix immediatly if on static assets.

- -
-
-
-
Caching not specified
-
- {{phantomasResults.metrics.cachingNotSpecified}} - -
-
-
- -

Responses with no caching header sent (either Cache-Control or Expires).

-

Every request should have a cache time specified. If you really don't want cache, specify "max-age=0", otherwise some browsers will try to cache.

- -
-
-
-
Caching too short
-
- {{phantomasResults.metrics.cachingTooShort}} - -
-
-
- -

Responses with too short caching time (less than a week).

-

The longer you cache, the better. Add versionning to your static assets, if it's not already done, and set their cache time to one year.

- -
-
-
-
Different domains
-
- {{phantomasResults.metrics.domains}} - -
-
-
- -

For each domain met, the browser needs to make a DNS look-up, which is slow. Avoid having to many different domains and the page should render faster.

-

By the way, domain sharding is not a good practice anymore.

- -
-
-
-
-
-
-
- -
-

Javascript Timeline

-

- This graph gives a quick view of when the Javascript interactions with the DOM occur during the loading of the page. -

-
-
-
-
-
-
-
Timestamp: {{$index * timelineIntervalDuration | number: 0}} ms
-
-
-
-
0 ms
-
{{endTime | number: 0}} ms
-
-
-
-
DOM creation
-
DOM interactive
-
DOM content loaded event
-
Page completion
-
Page is complete
-
-
-
Executing Javascript and DOM queries here is a bad practice and slows down the DOM construction.
-
Some frameworks do things here, but it's not reliable and should be avoided.
-
Also known as "document ready". This is where you should execute top-priority scripts, like binding action buttons or launch a video player.
-
Here you can execute mid-priority tasks. Loading a script with createElement('script') is one way to do so.
-
The page is considered loaded, it's time for low priority things : trackers, social plugins, easter egg...
-
-
-
- -

Javascript Profiler

-

- The table below shows the interactions between Javascript and the DOM. It is useful to understand what happens while the page loads. -

-
-
- - -
-
- - Filter by - -
-
-
- - -
-
-
Type
-
Params
-
-
Timestamp
-
-
-
{{$index + 1}}
-
{{node.data.type}}
- -
- {{node.data.callDetails.arguments[0]}} - : {{node.data.callDetails.arguments[1]}} - : {{node.data.callDetails.arguments[2]}} - : {{node.data.callDetails.arguments[3]}} -
- -
-
-
-
✖
- -
-

Called on DOM element

-
{{node.data.callDetails.context.domElement}}
-
- -
-

Called on 0 jQuery element

-

Useless function call, as the jQuery object is empty.

-
- -
-

Called on 1 jQuery element

-
{{node.data.callDetails.context.firstElementPath}}
-
- -
-

Called on {{node.data.callDetails.context.length}} jQuery elements

-

- 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). -

-

First one is: {{node.data.callDetails.context.firstElementPath}}

-
- -

- The query returned 0 results. Could it be unused or dead code? -

- -
-

Backtrace

-
-
-
{{trace.fnName || '(anonymous)'}}
-
{{trace.fileName || 'HTML'}}:{{trace.line}}
-
-
-
can't find any backtrace :/
-
-
-
- -
-

Sub processes

-
-
-
-
Type
-
Params
-
Duration
-
-
-
{{$index}}
-
{{node.data.type}}
-
- {{node.data.callDetails.arguments[0]}} - : {{node.data.callDetails.arguments[1]}} - : {{node.data.callDetails.arguments[2]}} - : {{node.data.callDetails.arguments[3]}} -
-
{{node.data.time}} ms
-
-
-
-
-
-
-
{{node.data.timestamp | number: 0}} ms
-
-
-
-
- -
-

Yellow Lab Tools is an open source project by Gaël Métais, based on Phantomas.
If you like it, give it a ★ on GitHub!

-
- - - - \ No newline at end of file diff --git a/app/public/fonts/icons.woff b/app/public/fonts/icons.woff deleted file mode 100644 index 832a8a8809b188082bbe7d8602d50a98e77f7f37..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2136 zcmZXWc{H2Z8^>=XlAwqd&15vfG_^#nvF}@|4JEc(hKaSBkq$-Ww2ZAail&5W`KhVa zS`?+GqC_=R7h0`-4QflS4taBET~`5ir6(*TAQ%7?gaA|n7>J;< z62c$|F>T1>Ass|ucHf3EqgfDhfxHYPECPBm16a^{C}=)Fev_CBI32(Yfmk@?1yGGk zW1RGh5x+!1eV`p7wg(aczyV+t#(4OJyL(`Y8YV3BVv_Ftd`!*v)gW%DgxX@2jT{qK zmE9twA??2>9C9fUB`INU$|`pkTS|{1U`syMulDY%Buh25y;#6rV#pjo3``@QK|tyYd3&W9GY9<+6hWr(gF^YzS|s+OxNU6BjRf!pQ@T z(+4He^7Cahn^ zLp}bJXy>tt7kJgY5ZVZJS6W(p$6>&^l3FT%p)5X=6%~n5`uQw=W^UgHTjEb{DuInL zGWQ?0Dwj=5PTZ)j6&~MBUM(Vi=3Z@TDKVv`tCi)Jx45aHh}ZN7D-Tz4d7j1d zwarr5dyd75S0e;Z-@3AMJ^i5q{VBVW%_t9X+8-UzT0-)O|JGEnAXP>vURk zqL(cZ9dyPP-OHAOE7%RNu;DV}5Sa#t%*7R|vsF{`NbsJky80 z>-kx@@@S#PATN%l+j}*6)l=+>q?xw6sx$Vs)w3u|}jZ~D#Cdh*SqFQWY3 z$k@TM_)>u@dpH{R4~kw>@-psI)Vg6`S6Gr|Dq55Ke!b1&+&LBMT|(1=c#cxW!1J=h z5&`N*wcmy1{caJ)e;sU&H=CMYExL@pvOJ4x%*E`~{q*v3%EHL}sAEK`aI<;CkMDb9 zZMvSZlF?JTKFJ+*;4fKR=*xFXC5O&3ZiwqUGK z96l+m_ICati+CAxB&vP?21TwmgA3aI&vwraBVW9(=Xt z{8`DM$6H!2$jR4aX2oz31ZCGmNB()bUT=8OW^G01f#HNot58Azo_P9hyp_Isj`uY0(#vW_%(?!$6I<(CzqS9E z;WTVsl;?Bj;U-TCh@X*R>hS9bGmyig+vW)B)}|wCZ4%hiyTA$IyY}_G45HKN!5~?$ zDWf-KQGzIx4j=<+Crb9ev0yq~01p&HV(5W%gpCv-6t;>5h+DuEI&i!91Ht*xz7r>obV1d^X(vgQjq1j~ujaQJM>t~7QHtEjC?hB7+j zRDseD0AsU9@!vi|6Y1X}DM-vRYz6x$P96y-^uR7S5-y>_6|rA-Q4LsvhUg&}r9xAi z9voyf&vpRdl^MG6-(H|z!Hi_(wgrE6EG|S48VHiU?nh>A7v;DoQ#$cSDP$cPc(_Rn z{%>z_%e$}?{60ARu_clqCTk6Q0hkN$^>6XOL~uy8hkz~yU<$}XH2{FFDY37y7`6^W z#9B6$H!wg*%~CHZ>`?B})T3H01CGhX*6uou3ixdUV~0@%r4V*D{4KiK?$@EAk_ds$ z)Xpkz!%~nJE8bf!NIgHB^w(2Xcc$U2>sI-vG_|R&pe5cJ`8m61ep4~?Nq_aRx+Nwb zW> z-BnGW$A#$xXX5&;laj}_XLaWcxMl07r!~C$UsMUIx=_t`YyNPJn7_G8bzD3_ms>4< YljX8q)tXRRX>$DAcWsA$BH{t!AH^=4T>t<8 diff --git a/app/public/fonts/svg-icons/arrow-left3.svg b/app/public/fonts/svg-icons/arrow-left3.svg deleted file mode 100755 index d96cc70..0000000 --- a/app/public/fonts/svg-icons/arrow-left3.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/public/fonts/svg-icons/bars.svg b/app/public/fonts/svg-icons/bars.svg deleted file mode 100755 index 2e7adca..0000000 --- a/app/public/fonts/svg-icons/bars.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/public/fonts/svg-icons/eye.svg b/app/public/fonts/svg-icons/eye.svg deleted file mode 100755 index 59ff3c2..0000000 --- a/app/public/fonts/svg-icons/eye.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/public/fonts/svg-icons/lab.svg b/app/public/fonts/svg-icons/lab.svg deleted file mode 100755 index 28b3aa8..0000000 --- a/app/public/fonts/svg-icons/lab.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/public/fonts/svg-icons/list.svg b/app/public/fonts/svg-icons/list.svg deleted file mode 100755 index 403a80a..0000000 --- a/app/public/fonts/svg-icons/list.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/public/fonts/svg-icons/question.svg b/app/public/fonts/svg-icons/question.svg deleted file mode 100755 index 49e9fc3..0000000 --- a/app/public/fonts/svg-icons/question.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/public/fonts/svg-icons/warning.svg b/app/public/fonts/svg-icons/warning.svg deleted file mode 100755 index 85f8300..0000000 --- a/app/public/fonts/svg-icons/warning.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/public/scripts/app.js b/app/public/scripts/app.js deleted file mode 100644 index ec4f9b9..0000000 --- a/app/public/scripts/app.js +++ /dev/null @@ -1,7 +0,0 @@ -angular.module('YellowLabTools', [ - 'Results', - 'Runs', - 'ngModal', - 'ShowOffendersDirective' -]); - diff --git a/app/public/scripts/resultsCtrl.js b/app/public/scripts/resultsCtrl.js deleted file mode 100644 index 0325b0e..0000000 --- a/app/public/scripts/resultsCtrl.js +++ /dev/null @@ -1,406 +0,0 @@ -var app = angular.module('Results', []); - -app.controller('ResultsCtrl', function ($scope) { - // Grab results from nodeJS served page - $scope.phantomasResults = window._phantomas_results; - - $scope.view = 'execution'; - - if ($scope.phantomasResults.metrics && $scope.phantomasResults.offenders && $scope.phantomasResults.offenders.javascriptExecutionTree) { - - // Get the execution tree from the offenders - $scope.javascript = JSON.parse($scope.phantomasResults.offenders.javascriptExecutionTree); - - // Sort globalVariables offenders alphabetically - if ($scope.phantomasResults.offenders.globalVariables) { - $scope.phantomasResults.offenders.globalVariables.sort(); - } - - - initSummaryView(); - initJSTimelineView(); - - } - - $scope.setView = function(viewName) { - $scope.view = viewName; - }; - - $scope.onNodeDetailsClick = function(node) { - var isOpen = node.data.showDetails; - if (!isOpen) { - // Close all other nodes - $scope.javascript.children.forEach(function(currentNode) { - currentNode.data.showDetails = false; - }); - - // Parse the backtrace - if (!node.data.parsedBacktrace) { - node.data.parsedBacktrace = parseBacktrace(node.data.backtrace); - } - - } - node.data.showDetails = !isOpen; - }; - - function initSummaryView() { - - // Read the main elements of the tree and sum the total time - $scope.totalJSTime = 0; - $scope.inBodyDomManipulations = 0; - treeRunner($scope.javascript, function(node) { - if (node.data.time) { - $scope.totalJSTime += node.data.time; - } - - if (node.data.timestamp < $scope.phantomasResults.metrics.domInteractive && - node.data.type !== 'jQuery - onDOMReady') { - $scope.inBodyDomManipulations ++; - } - - if (node.data.type !== 'main') { - // Don't check the children - return false; - } - }); - - // Grab the notes - $scope.notations = { - domComplexity: getDomComplexityScore(), - jsDomManipulations: getJsDomManipulationsScore(), - jsBadPractices: getJSBadPracticesScore(), - jQueryLoading: getJQueryLoadingScore(), - cssComplexity: getCSSComplexityScore(), - badCss: getBadCssScore(), - requests: requestsScore(), - network: networkScore() - }; - } - - function initJSTimelineView() { - - if (!$scope.javascript.children) { - return; - } - - // Read the execution tree and adjust the navigation timings (cause their not very well synchronised) - treeRunner($scope.javascript, function(node) { - switch(node.data.type) { - case 'domInteractive': - $scope.phantomasResults.metrics.domInteractive = node.data.timestamp; - break; - case 'domContentLoaded': - $scope.phantomasResults.metrics.domContentLoaded = node.data.timestamp; - break; - case 'domContentLoadedEnd': - $scope.phantomasResults.metrics.domContentLoadedEnd = node.data.timestamp; - break; - case 'domComplete': - $scope.phantomasResults.metrics.domComplete = node.data.timestamp; - break; - } - - if (node.data.type !== 'main') { - // Don't check the children - return false; - } - }); - - - // Now read the tree and display it on a timeline - - // Split the timeline into 200 intervals - var numberOfIntervals = 199; - var lastEvent = $scope.javascript.children[$scope.javascript.children.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 - treeRunner($scope.javascript, 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 1000) { - note = 'B'; - } - if (score > 1500) { - note = 'C'; - } - if (score > 2000) { - note = 'D'; - } - if (score > 3000) { - note = 'E'; - } - if (score > 4000) { - note = 'F'; - } - return note; - } - - function getJsDomManipulationsScore() { - var note = 'A'; - var score = $scope.phantomasResults.metrics.DOMinserts * 2 + - $scope.phantomasResults.metrics.DOMqueries + - $scope.phantomasResults.metrics.DOMqueriesAvoidable * 2 + - $scope.phantomasResults.metrics.eventsBound; - if (score > 300) { - note = 'B'; - } - if (score > 500) { - note = 'C'; - } - if (score > 700) { - note = 'D'; - } - if (score > 1000) { - note = 'E'; - } - if (score > 1400) { - note = 'F'; - } - return note; - } - - function getJSBadPracticesScore() { - var note = 'A'; - var score = $scope.phantomasResults.metrics.documentWriteCalls * 3 + - $scope.phantomasResults.metrics.evalCalls * 2 + - $scope.phantomasResults.metrics.jsErrors * 10 + - $scope.phantomasResults.metrics.consoleMessages / 2 + - $scope.phantomasResults.metrics.globalVariables / 20 + - Math.sqrt($scope.inBodyDomManipulations); - if (score > 10) { - note = 'B'; - } - if (score > 15) { - note = 'C'; - } - if (score > 20) { - note = 'D'; - } - if (score > 30) { - note = 'E'; - } - if (score > 45) { - note = 'F'; - } - return note; - } - - function getJQueryLoadingScore() { - var note = 'NA'; - if ($scope.phantomasResults.metrics.jQueryDifferentVersions > 1) { - note = 'F'; - } else if ($scope.phantomasResults.metrics.jQueryVersion) { - if ($scope.phantomasResults.metrics.jQueryVersion.indexOf('1.11.') === 0 || - $scope.phantomasResults.metrics.jQueryVersion.indexOf('1.12.') === 0 || - $scope.phantomasResults.metrics.jQueryVersion.indexOf('2.1.') === 0 || - $scope.phantomasResults.metrics.jQueryVersion.indexOf('2.2.') === 0) { - note = 'A'; - } else if ($scope.phantomasResults.metrics.jQueryVersion.indexOf('1.9.') === 0 || - $scope.phantomasResults.metrics.jQueryVersion.indexOf('1.10.') === 0 || - $scope.phantomasResults.metrics.jQueryVersion.indexOf('2.0.') === 0) { - note = 'B'; - } else if ($scope.phantomasResults.metrics.jQueryVersion.indexOf('1.7.') === 0 || - $scope.phantomasResults.metrics.jQueryVersion.indexOf('1.8.') === 0) { - note = 'C'; - } else if ($scope.phantomasResults.metrics.jQueryVersion.indexOf('1.5.') === 0 || - $scope.phantomasResults.metrics.jQueryVersion.indexOf('1.6.') === 0) { - note = 'D'; - } else if ($scope.phantomasResults.metrics.jQueryVersion.indexOf('1.2.') === 0 || - $scope.phantomasResults.metrics.jQueryVersion.indexOf('1.3.') === 0 || - $scope.phantomasResults.metrics.jQueryVersion.indexOf('1.4.') === 0) { - note = 'E'; - } - } - return note; - } - - function getCSSComplexityScore() { - if (!$scope.phantomasResults.metrics.cssRules) { - return 'NA'; - } - - var note = 'A'; - var score = $scope.phantomasResults.metrics.cssRules + - $scope.phantomasResults.metrics.cssComplexSelectors * 5 + - $scope.phantomasResults.metrics.cssComplexSelectorsByAttribute * 10; - if (score > 800) { - note = 'B'; - } - if (score > 1200) { - note = 'C'; - } - if (score > 2500) { - note = 'D'; - } - if (score > 4000) { - note = 'E'; - } - if (score > 6000) { - note = 'F'; - } - return note; - } - - function getBadCssScore() { - if ($scope.phantomasResults.metrics.cssParsingErrors) { - return 'F'; - } else if (!$scope.phantomasResults.metrics.cssRules) { - return 'NA'; - } - - var note = 'A'; - var score = $scope.phantomasResults.metrics.cssDuplicatedSelectors + - $scope.phantomasResults.metrics.cssDuplicatedProperties + - $scope.phantomasResults.metrics.cssEmptyRules + - $scope.phantomasResults.metrics.cssExpressions * 10 + - $scope.phantomasResults.metrics.cssImportants * 2 + - $scope.phantomasResults.metrics.cssOldIEFixes * 10 + - $scope.phantomasResults.metrics.cssOldPropertyPrefixes + - $scope.phantomasResults.metrics.cssUniversalSelectors * 5 + - $scope.phantomasResults.metrics.cssRedundantBodySelectors * 0.5 + - $scope.phantomasResults.metrics.cssRedundantChildNodesSelectors * 0.5 + - $scope.phantomasResults.metrics.cssImports * 50; - if (score > 50) { - note = 'B'; - } - if (score > 100) { - note = 'C'; - } - if (score > 200) { - note = 'D'; - } - if (score > 500) { - note = 'E'; - } - if (score > 1000) { - note = 'F'; - } - return note; - } - - function requestsScore() { - var note = 'A'; - var score = $scope.phantomasResults.metrics.requests; - if (score > 30) { - note = 'B'; - } - if (score > 45) { - note = 'C'; - } - if (score > 60) { - note = 'D'; - } - if (score > 80) { - note = 'E'; - } - if (score > 100) { - note = 'F'; - } - return note; - } - - function networkScore() { - var note = 'A'; - var score = $scope.phantomasResults.metrics.notFound * 25 + - $scope.phantomasResults.metrics.closedConnections * 10 + - $scope.phantomasResults.metrics.multipleRequests * 10 + - $scope.phantomasResults.metrics.cachingDisabled * 2 + - $scope.phantomasResults.metrics.cachingNotSpecified + - $scope.phantomasResults.metrics.cachingTooShort / 2 + - $scope.phantomasResults.metrics.domains; - if (score > 20) { - note = 'B'; - } - if (score > 40) { - note = 'C'; - } - if (score > 60) { - note = 'D'; - } - if (score > 80) { - note = 'E'; - } - if (score > 100) { - note = 'F'; - } - return note; - } - - - - 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; - } - - // Goes on every node of the tree and calls the function fn. If fn returns false on a node, its children won't be checked. - function treeRunner(node, fn) { - if (fn(node) !== false && node.children) { - node.children.forEach(function(child) { - treeRunner(child, fn); - }); - } - } - -}); \ No newline at end of file diff --git a/app/public/scripts/showOffenders.js b/app/public/scripts/showOffenders.js deleted file mode 100644 index b4e16c8..0000000 --- a/app/public/scripts/showOffenders.js +++ /dev/null @@ -1,17 +0,0 @@ -var app = angular.module("ShowOffendersDirective", []); - -app.directive('showOffenders', function() { - return { - restrict: 'E', - transclude: true, - scope: { - modalTitle: "@", - metricName: "@", - phantomasResults: "=" - }, - controller: function($scope, $element, $attrs, $location) { - $scope.dialogShown = false; - }, - template: ' 
  • {{offender}}
' - }; -}); \ No newline at end of file diff --git a/app/public/styles/index.css b/app/public/styles/index.css deleted file mode 100644 index a555cef..0000000 --- a/app/public/styles/index.css +++ /dev/null @@ -1,33 +0,0 @@ -.promess { - padding: 0em 2em 3em; - font-weight: normal; - font-size: 1.2em; -} -.url { - width: 50%; -} -.launchBtn { - background: #e74c3c; - color: #fff; -} -input[type=submit], -input.url { - padding: 0 0.5em; - margin: 0.5em; - font-size: 1.2em; - height: 2em; - border: 0 solid; - border-radius: 0.5em; - box-shadow: 0.1em 0.2em 0 0 #5e2846; - outline: none; -} -input[type=submit]:hover { - color: #ddd; -} -input[type=submit].clicked { - color: #ddd; - position: relative; - left: 0.1em; - top: 0.2em; - box-shadow: none; -} diff --git a/app/public/styles/launchTest.css b/app/public/styles/launchTest.css deleted file mode 100644 index 47bcde3..0000000 --- a/app/public/styles/launchTest.css +++ /dev/null @@ -1,25 +0,0 @@ -#status { - margin-top: 2em; - font-size: 2.5em; -} -@-webkit-keyframes rotating { - from { - -webkit-transform: rotate(0deg); - } - to { - -webkit-transform: rotate(360deg); - } -} -@keyframes rotating { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} -.waiting .icon-lab { - -webkit-animation: rotating 3s linear 0s infinite; - -webkit-transform: translateZ(0); - animation: rotating 3s linear 0s infinite; -} diff --git a/app/public/styles/less/icons.less b/app/public/styles/less/icons.less deleted file mode 100644 index dbdc9f3..0000000 --- a/app/public/styles/less/icons.less +++ /dev/null @@ -1,56 +0,0 @@ -@eye-font-family: "fontsmith-icons"; -@eye-value: "\e004"; -@eye: '"fontsmith-icons"' '"\\e004"'; -@lab-font-family: "fontsmith-icons"; -@lab-value: "\e003"; -@lab: '"fontsmith-icons"' '"\\e003"'; -@bars-font-family: "fontsmith-icons"; -@bars-value: "\e005"; -@bars: '"fontsmith-icons"' '"\\e005"'; -@warning-font-family: "fontsmith-icons"; -@warning-value: "\e000"; -@warning: '"fontsmith-icons"' '"\\e000"'; -@arrow-left3-font-family: "fontsmith-icons"; -@arrow-left3-value: "\e006"; -@arrow-left3: '"fontsmith-icons"' '"\\e006"'; -@question-font-family: "fontsmith-icons"; -@question-value: "\e001"; -@question: '"fontsmith-icons"' '"\\e001"'; -@list-font-family: "fontsmith-icons"; -@list-value: "\e002"; -@list: '"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("/public/fonts/icons.woff") format("woff"), - ; - font-weight: normal; - font-style: normal; -} \ No newline at end of file diff --git a/app/public/styles/less/index.less b/app/public/styles/less/index.less deleted file mode 100644 index ff487ad..0000000 --- a/app/public/styles/less/index.less +++ /dev/null @@ -1,35 +0,0 @@ -.promess { - padding: 0em 2em 3em; - font-weight: normal; - font-size: 1.2em; -} - -.url { - width: 50%; -} - -.launchBtn { - background: #e74c3c; - color: #fff; -} - -input[type=submit], input.url { - padding: 0 0.5em; - margin: 0.5em; - font-size: 1.2em; - height: 2em; - border: 0 solid; - border-radius: 0.5em; - box-shadow: 0.1em 0.2em 0 0 #5e2846; - outline: none; -} -input[type=submit]:hover { - color: #ddd; -} -input[type=submit].clicked { - color: #ddd; - position: relative; - left: 0.1em; - top: 0.2em; - box-shadow: none; -} \ No newline at end of file diff --git a/app/public/styles/less/launchTest.less b/app/public/styles/less/launchTest.less deleted file mode 100644 index 92788fc..0000000 --- a/app/public/styles/less/launchTest.less +++ /dev/null @@ -1,19 +0,0 @@ -#status { - margin-top: 2em; - font-size: 2.5em; -} - -@-webkit-keyframes rotating { - from { -webkit-transform: rotate(0deg); } - to { -webkit-transform: rotate(360deg); } -} -@keyframes rotating { - from { transform: rotate(0deg); } - to { transform: rotate(360deg); } -} - -.waiting .icon-lab { - -webkit-animation: rotating 3s linear 0s infinite; - -webkit-transform: translateZ(0); - animation: rotating 3s linear 0s infinite; -} \ No newline at end of file diff --git a/app/public/styles/less/main.less b/app/public/styles/less/main.less deleted file mode 100644 index 79f6dd2..0000000 --- a/app/public/styles/less/main.less +++ /dev/null @@ -1,66 +0,0 @@ -@import "icons.less"; - -html { - margin: 100px 50px; -} - -body { - margin: 0 auto; - max-width: 1280px; - background: #9c4274; - color: #fff; - font-size: 16px; - text-align: center; -} - -body, input[type=submit], input[type=text], input[type=url], input[type=number], button { - font-family: 'Century Gothic', helvetica, arial, sans-serif; -} - -input[type=submit] { - cursor: pointer; -} - -h1 span { - display: inline-block; - height: 1em; - width: 1em; - color: #ffa319; -} - -.footer { - padding: 3em; - color: #4e1836; - a { - color: inherit; - } - .star { - font-weight: bold; - span { - font-size: 1.2em; - } - } -} - -/* 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-eye { - .icon(@eye); -} \ No newline at end of file diff --git a/app/public/styles/less/results.less b/app/public/styles/less/results.less deleted file mode 100644 index fbd9d64..0000000 --- a/app/public/styles/less/results.less +++ /dev/null @@ -1,497 +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; - - -.resultsMenu { - margin-top: 2em; -} - -.resultsMenu .menuItem { - display: inline-block; - margin: 1em; - width: 8em; - height: 7em; - color: #fff; - border: 3px solid #fff; - border-radius: 0.5em; - cursor: pointer; - text-decoration: none; -} -.resultsMenu .back { - color: #5e2846; - border-color: #5e2846; -} -.resultsMenu .menuItem div { - padding-top: 0.5em; - font-size: 3em; -} -.resultsMenu .active, .resultsMenu .menuItem.active:hover { - color: #ffa319; - border-color: #ffa319; -} -.resultsMenu .menuItem:hover { - color: #ffa319; -} - -.resultsMenu span { - position: relative; - top: 0.5em; -} - -.testedUrl { - color: inherit; -} - -h4 { - margin-bottom: 0.5em; -} - -.summary, .metrics, .execution { - margin-top: 2em; - padding: 1em; - background: #fff; - color: #000; - border-radius: 0.5em; - text-align: left; -} - -.notations { - display: table; - width: 90%; - margin: 0 10%; - border-spacing: 1em; -} -.notations > div { - display: table-row; -} -.notations > div > div { - display: table-cell; - height: 2.5em; - vertical-align: middle; -} -.notations .notation { - font-weight: bold; - text-align: center; -} -.notations .criteria { - font-weight: normal; -} -.notations .A, .notations .B, .notations .C, .notations .D, .notations .E, .notations .F, .notations .NA { - width: 2.5em; - font-size: 2em; - text-align: center; - border-radius: 0.5em; - font-weight: bold; -} -.notations .A { - /* green */ - background: #00DB61; -} -.notations .B { - /* green */ - background: #CAD63D; -} -.notations .C { - /* yellow */ - background: #FFD119; -} -.notations .D { - /* orange */ - background: #FFA319; -} -.notations .E { - /* red */ - background: #FF6600; -} -.notations .F { - /* red */ - background: #FF1919; -} -.notations .NA { - /* Non applicable */ - background: #CCC; -} -.notations .icon-eye { - color: #9c4274; - cursor: pointer; -} - -.notations .criteria .table { - width: 75%; -} -.notations .criteria .label { - width: 70%; -} -.notations .criteria .result { - width: 20%; - font-weight: bold; - white-space: nowrap; - text-align: center; -} -.notations .warning .label, .notations .warning .result { - color: #FF1919; -} -.notations .criteria .info { - width: 10%; - text-align: center; -} -.notations .criteria .icon-question { - color: #f1c40f; - cursor: pointer; -} - - -.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; -} - - -.metrics h4 { - padding-left: 2em; -} - -.metrics .module { - padding-left: 4em; - padding-top: 0.5em; -} - -.metrics .legend { - font-style: italic; - color: #aaa; -} - -.metrics .offenders { - padding-left: 0em; - font-size: 0.8em; -} - -.metrics .offenders div { - cursor: pointer; -} - -.metrics .offenders ul { - margin-top: 0.5em; -} - -.filters { - margin: 1em 0; - padding: 0.5em; - border: 1px dotted #aaa; -} - -.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 .details .icon-warning { - cursor: pointer; -} - -.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; -} - -.table .icon-warning { - color: #e74c3c; -} - - -/**** NgModal popin (have a look inside bower_components) ****/ -.ng-modal { - position: fixed; - z-index: 9999; - top: 0; - left: 0; - width: 100%; - height: 100%; - text-align: left; -} -.ng-modal-overlay { - position: absolute; - z-index: 9999; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: #000; - opacity: 0.5; -} -.ng-modal-dialog { - z-index: 10000; - position: absolute; - top: 50%; - left: 50%; - width: 50%; - transform: translate(-50%, -50%); - -webkit-transform: translate(-50%, -50%); - background-color: #fff; - padding: 10px; - border: 3px solid #f1c40f; - border-radius: 0.5em; - color: #000; -} -.ng-modal-dialog-content { - overflow-x: hidden; - overflow-y: scroll; - word-wrap: break-word; - max-height: 20em; - font-weight: normal; - white-space: normal; -} -.ng-modal-close { - position: absolute; - top: 3px; - right: 5px; - cursor: pointer; - font-size: 120%; - padding: 5px; - display: inline-block; -} -.ng-modal-close-x { - font-weight: bold; - font-family: Arial, sans-serif; -} -.ng-modal-title { - font-weight: bold; - font-size: 1.5em; - display: block; - margin-bottom: 10px; - padding-bottom: 7px; - border-bottom: solid 1px #999; -} diff --git a/app/public/styles/main.css b/app/public/styles/main.css deleted file mode 100644 index 5a8669b..0000000 --- a/app/public/styles/main.css +++ /dev/null @@ -1,139 +0,0 @@ -@font-face { - font-family: "fontsmith-icons"; - src: url("/public/fonts/icons.woff") format("woff"); - font-weight: normal; - font-style: normal; -} -html { - margin: 100px 50px; -} -body { - margin: 0 auto; - max-width: 1280px; - background: #9c4274; - color: #fff; - font-size: 16px; - text-align: center; -} -body, -input[type=submit], -input[type=text], -input[type=url], -input[type=number], -button { - font-family: 'Century Gothic', helvetica, arial, sans-serif; -} -input[type=submit] { - cursor: pointer; -} -h1 span { - display: inline-block; - height: 1em; - width: 1em; - color: #ffa319; -} -.footer { - padding: 3em; - color: #4e1836; -} -.footer a { - color: inherit; -} -.footer .star { - font-weight: bold; -} -.footer .star span { - font-size: 1.2em; -} -/* 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; -} -.icon-lab:before { - content: "\e003"; -} -.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: "\e002"; -} -.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-eye { - 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-eye:before { - content: "\e004"; -} diff --git a/app/public/styles/results.css b/app/public/styles/results.css deleted file mode 100644 index 05a0ac7..0000000 --- a/app/public/styles/results.css +++ /dev/null @@ -1,465 +0,0 @@ -/* Timeline colors, related to Window Performances */ -.resultsMenu { - margin-top: 2em; -} -.resultsMenu .menuItem { - display: inline-block; - margin: 1em; - width: 8em; - height: 7em; - color: #fff; - border: 3px solid #fff; - border-radius: 0.5em; - cursor: pointer; - text-decoration: none; -} -.resultsMenu .back { - color: #5e2846; - border-color: #5e2846; -} -.resultsMenu .menuItem div { - padding-top: 0.5em; - font-size: 3em; -} -.resultsMenu .active, -.resultsMenu .menuItem.active:hover { - color: #ffa319; - border-color: #ffa319; -} -.resultsMenu .menuItem:hover { - color: #ffa319; -} -.resultsMenu span { - position: relative; - top: 0.5em; -} -.testedUrl { - color: inherit; -} -h4 { - margin-bottom: 0.5em; -} -.summary, -.metrics, -.execution { - margin-top: 2em; - padding: 1em; - background: #fff; - color: #000; - border-radius: 0.5em; - text-align: left; -} -.notations { - display: table; - width: 90%; - margin: 0 10%; - border-spacing: 1em; -} -.notations > div { - display: table-row; -} -.notations > div > div { - display: table-cell; - height: 2.5em; - vertical-align: middle; -} -.notations .notation { - font-weight: bold; - text-align: center; -} -.notations .criteria { - font-weight: normal; -} -.notations .A, -.notations .B, -.notations .C, -.notations .D, -.notations .E, -.notations .F, -.notations .NA { - width: 2.5em; - font-size: 2em; - text-align: center; - border-radius: 0.5em; - font-weight: bold; -} -.notations .A { - /* green */ - background: #00DB61; -} -.notations .B { - /* green */ - background: #CAD63D; -} -.notations .C { - /* yellow */ - background: #FFD119; -} -.notations .D { - /* orange */ - background: #FFA319; -} -.notations .E { - /* red */ - background: #FF6600; -} -.notations .F { - /* red */ - background: #FF1919; -} -.notations .NA { - /* Non applicable */ - background: #CCC; -} -.notations .icon-eye { - color: #9c4274; - cursor: pointer; -} -.notations .criteria .table { - width: 75%; -} -.notations .criteria .label { - width: 70%; -} -.notations .criteria .result { - width: 20%; - font-weight: bold; - white-space: nowrap; - text-align: center; -} -.notations .warning .label, -.notations .warning .result { - color: #FF1919; -} -.notations .criteria .info { - width: 10%; - text-align: center; -} -.notations .criteria .icon-question { - color: #f1c40f; - cursor: pointer; -} -.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; -} -.metrics h4 { - padding-left: 2em; -} -.metrics .module { - padding-left: 4em; - padding-top: 0.5em; -} -.metrics .legend { - font-style: italic; - color: #aaa; -} -.metrics .offenders { - padding-left: 0em; - font-size: 0.8em; -} -.metrics .offenders div { - cursor: pointer; -} -.metrics .offenders ul { - margin-top: 0.5em; -} -.filters { - margin: 1em 0; - padding: 0.5em; - border: 1px dotted #aaa; -} -.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 .details .icon-warning { - cursor: pointer; -} -.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; -} -.table .icon-warning { - color: #e74c3c; -} -/**** NgModal popin (have a look inside bower_components) ****/ -.ng-modal { - position: fixed; - z-index: 9999; - top: 0; - left: 0; - width: 100%; - height: 100%; - text-align: left; -} -.ng-modal-overlay { - position: absolute; - z-index: 9999; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: #000; - opacity: 0.5; -} -.ng-modal-dialog { - z-index: 10000; - position: absolute; - top: 50%; - left: 50%; - width: 50%; - transform: translate(-50%, -50%); - -webkit-transform: translate(-50%, -50%); - background-color: #fff; - padding: 10px; - border: 3px solid #f1c40f; - border-radius: 0.5em; - color: #000; -} -.ng-modal-dialog-content { - overflow-x: hidden; - overflow-y: scroll; - word-wrap: break-word; - max-height: 20em; - font-weight: normal; - white-space: normal; -} -.ng-modal-close { - position: absolute; - top: 3px; - right: 5px; - cursor: pointer; - font-size: 120%; - padding: 5px; - display: inline-block; -} -.ng-modal-close-x { - font-weight: bold; - font-family: Arial, sans-serif; -} -.ng-modal-title { - font-weight: bold; - font-size: 1.5em; - display: block; - margin-bottom: 10px; - padding-bottom: 7px; - border-bottom: solid 1px #999; -} diff --git a/app/public/img/favicon.png b/front/src/img/favicon.png similarity index 100% rename from app/public/img/favicon.png rename to front/src/img/favicon.png diff --git a/front/src/main.html b/front/src/main.html index d6cddde..1d55d31 100644 --- a/front/src/main.html +++ b/front/src/main.html @@ -3,10 +3,13 @@ Yellow Lab Tools - - - - + + + + + + + @@ -18,18 +21,13 @@ - -

Yellow Lab Tools is an open source project by Gaël Métais, based on Phantomas.
If you like it, give it a ★ on GitHub!

- - - - + \ No newline at end of file diff --git a/package.json b/package.json index 1c0eb59..c7cfe8c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "yellowlabtools", - "version": "1.0.0", + "version": "1.1.0", "repository": { "type": "git", "url": "git://github.com/gmetais/YellowLabTools.git" @@ -17,7 +17,7 @@ "express": "~4.10.4", "phantomas": "1.7.0", "rimraf": "^2.2.8", - "socket.io": "~1.2.0" + "q": "^1.1.2" }, "devDependencies": { "chai": "^1.10.0", @@ -33,7 +33,6 @@ "matchdep": "^0.3.0", "mocha": "^2.0.1", "phantomjs": "^1.9.12", - "q": "^1.1.2", "request": "^2.49.0", "sinon": "^1.12.1", "sinon-chai": "^2.6.0" diff --git a/server.js b/server.js deleted file mode 100644 index dcb4b1a..0000000 --- a/server.js +++ /dev/null @@ -1,59 +0,0 @@ -// Config file -var settings = require('./server_config/settings.json'); - -// Libraries -var fs = require('fs'); -var async = require('async'); -var express = require('express'); -var app = express(); -var server = require('http').createServer(app); -var io = require('socket.io').listen(server); -var bodyParser = require('body-parser'); -var compress = require('compression'); - -// Internals -var indexController = require('./app/node_controllers/indexController'); -var launchTestController = require('./app/node_controllers/launchTestController'); -var resultsController = require('./app/node_controllers/resultsController'); -var waitingQueueSocket = require('./app/node_controllers/waitingQueueSocket'); -var testQueue = require('./app/lib/testQueue'); - -app.use(compress()); -app.use(bodyParser.urlencoded({ extended: false })); - - -// Redirect www.yellowlab.tools to yellowlab.tools (for SEO) -app.all('*', function(req, res, next) { - if (req.hostname && req.hostname.match(/^www\.yellowlab\.tools/) !== null) { - res.redirect('http://' + req.hostname.replace(/^www\.yellowlab\.tools/, 'yellowlab.tools') + req.url); - } else { - next(); - } -}); - -// Routes definition -app.get('/', function(req, res) { indexController(req, res, settings.googleAnalyticsId); }); -app.post('/launchTest', function(req, res) { launchTestController(req, res, testQueue, settings.googleAnalyticsId); }); -app.get('/results/:testId', function(req, res) { resultsController(req, res, settings.googleAnalyticsId); }); - - -// Static files -app.use('/public', express.static(__dirname + '/app/public')); -app.use('/bower_components', express.static(__dirname + '/bower_components')); - - -// Socket.io -io.on('connection', function(socket){ - waitingQueueSocket(socket, testQueue); -}); - -// Create the results folder if it doesn't exist -var resultsPath = 'results'; -if (!fs.existsSync(resultsPath)) { - fs.mkdirSync(resultsPath); -} - -// Launch the server -server.listen(settings.serverPort, function() { - console.log('Listening on port %d', server.address().port); -}); \ No newline at end of file diff --git a/src b/src deleted file mode 100644 index 36a8a55..0000000 --- a/src +++ /dev/null @@ -1,672 +0,0 @@ -/* Timeline colors, related to Window Performances */ -.resultsMenu { - margin-top: 2em; -} -.resultsMenu .menuItem { - display: inline-block; - margin: 1em; - width: 8em; - height: 7em; - color: #fff; - border: 3px solid #fff; - border-radius: 0.5em; - cursor: pointer; - text-decoration: none; -} -.resultsMenu .back { - color: #5e2846; - border-color: #5e2846; -} -.resultsMenu .menuItem div { - padding-top: 0.5em; - font-size: 3em; -} -.resultsMenu .active, -.resultsMenu .menuItem.active:hover { - color: #ffa319; - border-color: #ffa319; -} -.resultsMenu .menuItem:hover { - color: #ffa319; -} -.resultsMenu span { - position: relative; - top: 0.5em; -} -.testedUrl { - color: inherit; -} -h4 { - margin-bottom: 0.5em; -} -.summary, -.metrics, -.execution { - margin-top: 2em; - padding: 1em; - background: #fff; - color: #000; - border-radius: 0.5em; - text-align: left; -} -.notations { - display: table; - width: 90%; - margin: 0 10%; - border-spacing: 1em; -} -.notations > div { - display: table-row; -} -.notations > div > div { - display: table-cell; - height: 2.5em; - vertical-align: middle; -} -.notations .notation { - font-weight: bold; - text-align: center; -} -.notations .criteria { - font-weight: normal; -} -.notations .A, -.notations .B, -.notations .C, -.notations .D, -.notations .E, -.notations .F, -.notations .NA { - width: 2.5em; - font-size: 2em; - text-align: center; - border-radius: 0.5em; - font-weight: bold; -} -.notations .A { - /* green */ - background: #00DB61; -} -.notations .B { - /* green */ - background: #CAD63D; -} -.notations .C { - /* yellow */ - background: #FFD119; -} -.notations .D { - /* orange */ - background: #FFA319; -} -.notations .E { - /* red */ - background: #FF6600; -} -.notations .F { - /* red */ - background: #FF1919; -} -.notations .NA { - /* Non applicable */ - background: #CCC; -} -.notations .icon-eye { - color: #9c4274; - cursor: pointer; -} -.notations .criteria .table { - width: 75%; -} -.notations .criteria .label { - width: 70%; -} -.notations .criteria .result { - width: 20%; - font-weight: bold; - white-space: nowrap; - text-align: center; -} -.notations .warning .label, -.notations .warning .result { - color: #FF1919; -} -.notations .criteria .info { - width: 10%; - text-align: center; -} -.notations .criteria .icon-question { - color: #f1c40f; - cursor: pointer; -} -.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; -} -.metrics h4 { - padding-left: 2em; -} -.metrics .module { - padding-left: 4em; - padding-top: 0.5em; -} -.metrics .legend { - font-style: italic; - color: #aaa; -} -.metrics .offenders { - padding-left: 0em; - font-size: 0.8em; -} -.metrics .offenders div { - cursor: pointer; -} -.metrics .offenders ul { - margin-top: 0.5em; -} -.filters { - margin: 1em 0; - padding: 0.5em; - border: 1px dotted #aaa; -} -.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 .details .icon-warning { - cursor: pointer; -} -.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; -} -.table .icon-warning { - color: #e74c3c; -} -/**** NgModal popin (have a look inside bower_components) ****/ -.ng-modal { - position: fixed; - z-index: 9999; - top: 0; - left: 0; - width: 100%; - height: 100%; - text-align: left; -} -.ng-modal-overlay { - position: absolute; - z-index: 9999; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: #000; - opacity: 0.5; -} -.ng-modal-dialog { - z-index: 10000; - position: absolute; - top: 50%; - left: 50%; - width: 50%; - transform: translate(-50%, -50%); - -webkit-transform: translate(-50%, -50%); - background-color: #fff; - padding: 10px; - border: 3px solid #f1c40f; - border-radius: 0.5em; - color: #000; -} -.ng-modal-dialog-content { - overflow-x: hidden; - overflow-y: scroll; - word-wrap: break-word; - max-height: 20em; - font-weight: normal; - white-space: normal; -} -.ng-modal-close { - position: absolute; - top: 3px; - right: 5px; - cursor: pointer; - font-size: 120%; - padding: 5px; - display: inline-block; -} -.ng-modal-close-x { - font-weight: bold; - font-family: Arial, sans-serif; -} -.ng-modal-title { - font-weight: bold; - font-size: 1.5em; - display: block; - margin-bottom: 10px; - padding-bottom: 7px; - border-bottom: solid 1px #999; -} - -@font-face { - font-family: "fontsmith-icons"; - src: url("/public/fonts/icons.woff") format("woff"); - font-weight: normal; - font-style: normal; -} - -.promess { - padding: 0em 2em 3em; - font-weight: normal; - font-size: 1.2em; -} -.url { - width: 50%; -} -.launchBtn { - background: #e74c3c; - color: #fff; -} -input[type=submit], -input.url { - padding: 0 0.5em; - margin: 0.5em; - font-size: 1.2em; - height: 2em; - border: 0 solid; - border-radius: 0.5em; - box-shadow: 0.1em 0.2em 0 0 #5e2846; - outline: none; -} -input[type=submit]:hover { - color: #ddd; -} -input[type=submit].clicked { - color: #ddd; - position: relative; - left: 0.1em; - top: 0.2em; - box-shadow: none; -} - -#status { - margin-top: 2em; - font-size: 2.5em; -} -@-webkit-keyframes rotating { - from { - -webkit-transform: rotate(0deg); - } - to { - -webkit-transform: rotate(360deg); - } -} -@keyframes rotating { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} -.waiting .icon-lab { - -webkit-animation: rotating 3s linear 0s infinite; - -webkit-transform: translateZ(0); - animation: rotating 3s linear 0s infinite; -} - -@font-face { - font-family: "fontsmith-icons"; - src: url("/public/fonts/icons.woff") format("woff"); - font-weight: normal; - font-style: normal; -} -html { - margin: 100px 50px; -} -body { - margin: 0 auto; - max-width: 1280px; - background: #9c4274; - color: #fff; - font-size: 16px; - text-align: center; -} -body, -input[type=submit], -input[type=text], -input[type=url], -input[type=number], -button { - font-family: 'Century Gothic', helvetica, arial, sans-serif; -} -input[type=submit] { - cursor: pointer; -} -h1 span { - display: inline-block; - height: 1em; - width: 1em; - color: #ffa319; -} -.footer { - padding: 3em; - color: #4e1836; -} -.footer a { - color: inherit; -} -.footer .star { - font-weight: bold; -} -.footer .star span { - font-size: 1.2em; -} -/* 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; -} -.icon-lab:before { - content: "\e003"; -} -.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: "\e002"; -} -.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-eye { - 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-eye:before { - content: "\e004"; -}