Merge branch 'master' of github.com:sitespeedio/sitespeed.io

.travis.yml

@@ -15,7 +15,7 @@ addons:
     packages:
     - g++-4.8
     - google-chrome-stable
-  firefox: "54.0"
+  firefox: 'latest-nightly'
 before_install:
 - firefox --version 2>/dev/null
 - google-chrome --product-version
@@ -29,7 +29,7 @@ script:
 - bin/sitespeed.js -b firefox -n 2 --budget.configPath test/budget.json --summary https://www.sitespeed.io/
 - bin/sitespeed.js -b chrome -n 2 https://www.sitespeed.io/ --preScript test/prepostscripts/preSample.js
   --postScript test/prepostscripts/postSample.js
-- bin/sitespeed.js -b chrome -n 2 --summaryDetail --browsertime.chrome.dumpTraceCategoriesLog https://www.sitespeed.io/ --webpagetest.key $WPTKEY
+- bin/sitespeed.js -b chrome -n 2 --summaryDetail --browsertime.chrome.timeline https://www.sitespeed.io/ --webpagetest.key $WPTKEY
 # - 'if [ "$WPTKEY" != "false" ]; then bash bin/sitespeed.js -b chrome -n 2 --summaryDetail --browsertime.chrome.dumpTraceCategoriesLog https://www.sitespeed.io/ --webpagetest.key $WPTKEY; fi'
 # - test "$TRAVIS_PULL_REQUEST_SLUG" = "" -o "$TRAVIS_PULL_REQUEST_SLUG" = "sitespeedio/sitespeed.io" && bin/sitespeed.js -b chrome -n 2 --summaryDetail --browsertime.chrome.dumpTraceCategoriesLog https://www.sitespeed.io/
 #  --webpagetest.key $WPTKEY

CHANGELOG.md

@@ -1,5 +1,21 @@
 # CHANGELOG - sitespeed.io
 
+## UNRELASED 7.0
+We are working on the new 7.0 that will include Browsertime 3.0. More info soon.
+
+## Changed
+* To collect the Chrome timeline you should now use --browsertime.chrome.timeline instead of the old --browsertime.chrome.collectTracingEvents
+
+* To collect Visual Metrics add --visualMetrics (instead of the old --speedIndex)
+
+* You can now choose for what kind of content you want to include the response bodies when you use Firefox: --browsertime.firefox.includeResponseBodies 'none', 'all', 'html'
+
+## Breaking changes
+
+### Plugin makers
+* The screenshot is not passed as messages anymore to decrease the memory impact.
+* The Chrome trace log is not passed as messages anymore to decrease the memory impact.
+
 ## 6.5.3 2018-04-07
 ## Added
 * Upgraded to Browsertime 2.5.0 with fixes for the HAR in Chrome 66 and fix with User Timing measurements. Thanks [@knaos](https://github.com/knaos) for reporting and finding the issue.

Dockerfile

@@ -3,7 +3,7 @@ FROM sitespeedio/webbrowsers:chrome-66-beta-firefox-61-nightly
 ENV SITESPEED_IO_BROWSERTIME__XVFB true
 ENV SITESPEED_IO_BROWSERTIME__DOCKER true
 ENV SITESPEED_IO_BROWSERTIME__VIDEO true
-ENV SITESPEED_IO_BROWSERTIME__speedIndex true
+ENV SITESPEED_IO_BROWSERTIME__visualMetrics true
 
 # This is needed for Sharp to compile
 RUN sudo apt-get update && sudo apt-get install build-essential -y --no-install-recommends

README.md

@@ -11,6 +11,8 @@
 
 ## Welcome to the wonderful world of web performance!
 
+**Warning**: Master is hot for coming 7.0. If you want to push changes to current 6.x use the [6.x](https://github.com/sitespeedio/sitespeed.io/tree/6.x) branch.
+
 **Sitespeed.io is a *complete web performance tool* that helps you measure the performance of your website. What exactly does that mean?**
 
 We think of a complete web performance tool as having three key capabilities:

lib/cli/cli.js

@@ -13,8 +13,7 @@ let yargs = require('yargs'),
   browsertimeConfig = require('../plugins/browsertime/index').config,
   metricsConfig = require('../plugins/metrics/index').config,
   webPageTestConfig = require('../plugins/webpagetest/index').config,
-  slackConfig = require('../plugins/slack/index').config,
-  screenshotConfig = require('../plugins/screenshot/index').config;
+  slackConfig = require('../plugins/slack/index').config;
 
 module.exports.parseCommandLine = function parseCommandLine() {
   let parsed = yargs
@@ -139,8 +138,8 @@ module.exports.parseCommandLine = function parseCommandLine() {
         'Delay between runs, in milliseconds. Use it if your web server needs to rest between runs :)',
       group: 'Browser'
     })
-    .option('browsertime.speedIndex', {
-      alias: 'speedIndex',
+    .option('browsertime.visualMetrics', {
+      alias: ['visualMetrics', 'speedIndex'],
       type: 'boolean',
       describe: 'Calculate SpeedIndex. Requires FFMpeg and python dependencies',
       group: 'Browser'
@@ -182,9 +181,10 @@ module.exports.parseCommandLine = function parseCommandLine() {
       group: 'Browser'
     })
     .option('browsertime.firefox.includeResponseBodies', {
-      describe: 'Include response bodies in HAR when using Firefox.',
-      type: 'boolean',
-      group: 'Browser'
+      describe: 'Include response bodies in HAR',
+      default: 'none',
+      choices: ['none', 'all', 'html'],
+      group: 'firefox'
     })
     .option('browsertime.chrome.args', {
       describe:
@@ -192,9 +192,10 @@ module.exports.parseCommandLine = function parseCommandLine() {
         'To add multiple arguments to Chrome, repeat --browsertime.chrome.args once per argument.',
       group: 'Browser'
     })
-    .option('browsertime.chrome.collectTracingEvents', {
+    .option('browsertime.chrome.timeline', {
+      describe:
+        'Collect the timeline data. Drag and drop the JSON in your Chrome detvools timeline panel or check out the CPU metrics.',
       type: 'boolean',
-      describe: 'Collect Chromes traceCategories',
       group: 'Browser'
     })
     .option('browsertime.chrome.android.package', {
@@ -207,11 +208,6 @@ module.exports.parseCommandLine = function parseCommandLine() {
         'Choose which device to use. If you do not set it, the first found device will be used.',
       group: 'Browser'
     })
-    // legacy naming of collectTracingEvents
-    .option('browsertime.chrome.dumpTraceCategoriesLog', {
-      type: 'boolean',
-      describe: false
-    })
     .option('browsertime.chrome.collectNetLog', {
       type: 'boolean',
       describe: 'Collect network log from Chrome and save to disk.',
@@ -356,25 +352,29 @@ module.exports.parseCommandLine = function parseCommandLine() {
       group: 'Budget'
     })
     /** Screenshot */
-    .option('screenshot.type', {
+    .option('browsertime.screenshotParams.type', {
+      alias: 'screenshot.type',
       describe: 'Set the file type of the screenshot',
       choices: ['png', 'jpg'],
-      default: screenshotConfig.type,
+      default: browsertimeConfig.screenshotParams.type,
       group: 'Screenshot'
     })
-    .option('screenshot.png.compressionLevel', {
+    .option('browsertime.screenshotParams.png.compressionLevel', {
+      alias: 'screenshot.png.compressionLevel',
       describe: 'zlib compression level',
-      default: screenshotConfig.png.compressionLevel,
+      default: browsertimeConfig.screenshotParams.png.compressionLevel,
       group: 'Screenshot'
     })
-    .option('screenshot.jpg.quality', {
+    .option('browsertime.screenshotParams.jpg.quality', {
+      alias: 'screenshot.jpg.quality',
       describe: 'Quality of the JPEG screenshot. 1-100',
-      default: screenshotConfig.jpg.quality,
+      default: browsertimeConfig.screenshotParams.jpg.quality,
       group: 'Screenshot'
     })
-    .option('screenshot.maxSize', {
+    .option('browsertime.screenshotParams.maxSize', {
+      alias: 'screenshot.maxSize',
       describe: 'The max size of the screenshot (width and height).',
-      default: screenshotConfig.maxSize,
+      default: browsertimeConfig.screenshotParams.maxSize,
       group: 'Screenshot'
     })
     /**

lib/core/pluginLoader.js

@@ -13,7 +13,6 @@ const defaultPlugins = new Set([
   'domains',
   'assets',
   'html',
-  'screenshot',
   'metrics',
   'text',
   'harstorer',

lib/plugins/analysisstorer/index.js

@@ -6,7 +6,6 @@ function shouldIgnoreMessage(message) {
       'url',
       'error',
       'sitespeedio.summarize',
-      'browsertime.screenshot',
       'browsertime.har',
       'webpagetest.har',
       'aggregateassets.summary',

lib/plugins/browsertime/analyzer.js

@@ -77,7 +77,7 @@ function setupAsynScripts(asyncScripts) {
 }
 
 module.exports = {
-  analyzeUrl(url, options, pluginScripts, pluginAsyncScripts) {
+  async analyzeUrl(url, options, pluginScripts, pluginAsyncScripts) {
     const btOptions = merge({}, defaultBrowsertimeOptions, options);
 
     // set mobile options
@@ -112,9 +112,8 @@ module.exports = {
     if (btOptions.coach) {
       scriptsByCategory = addCoachScripts(scriptsByCategory);
     }
-    scriptsByCategory = addExtraScripts(scriptsByCategory, pluginScripts);
-
-    let engine = new browsertime.Engine(btOptions);
+    scriptsByCategory = await addExtraScripts(scriptsByCategory, pluginScripts);
+    const engine = new browsertime.Engine(btOptions);
     log.info(
       'Starting %s for analysing %s %s time(s)',
       btOptions.browser,
@@ -124,12 +123,15 @@ module.exports = {
 
     const asyncScript =
       pluginAsyncScripts.length > 0
-        ? setupAsynScripts(pluginAsyncScripts)
+        ? await setupAsynScripts(pluginAsyncScripts)
         : undefined;
 
-    return engine
-      .start()
-      .then(() => engine.run(url, scriptsByCategory, asyncScript))
-      .finally(() => engine.stop());
+    try {
+      await engine.start();
+      const result = await engine.run(url, scriptsByCategory, asyncScript);
+      return result;
+    } finally {
+      await engine.stop();
+    }
   }
 };

lib/plugins/browsertime/index.js

@@ -12,7 +12,6 @@ const analyzer = require('./analyzer');
 const moment = require('moment');
 const isEmpty = require('lodash.isempty');
 const get = require('lodash.get');
-const screenshotConfig = require('../screenshot/index').config;
 
 const visitedUrls = new Set();
 
@@ -28,8 +27,22 @@ const defaultConfig = {
     latency: undefined,
     engine: 'external'
   },
+  screenshot: true,
+  screenshotParams: {
+    type: 'png',
+    png: {
+      compressionLevel: 6
+    },
+    jpg: {
+      quality: 80
+    },
+    maxSize: 2000
+  },
   viewPort: '1366x708',
-  delay: 0
+  delay: 0,
+  xvfbParams: {
+    display: 99
+  }
 };
 
 const DEFAULT_METRICS_PAGE_SUMMARY = [
@@ -82,8 +95,8 @@ module.exports = {
     browsertime.logging.configure(options);
     this.screenshotType = get(
       options,
-      'screenshot.type',
-      screenshotConfig.type
+      'browsertime.screenshotParams.type',
+      defaultConfig.screenshotParams.type
     );
 
     // hack for disabling viewport on Android that's not supported
@@ -163,6 +176,15 @@ module.exports = {
       case 'sitespeedio.setup': {
         // Let other plugins know that the browsertime plugin is alive
         queue.postMessage(make('browsertime.setup'));
+
+        if (this.options.screenshot) {
+          queue.postMessage(
+            make('browsertime.config', {
+              screenshot: true,
+              screenshotType: this.screenshotType
+            })
+          );
+        }
         break;
       }
       case 'browsertime.config': {
@@ -233,7 +255,7 @@ module.exports = {
                 }
                 if (this.resultUrls.hasBaseUrl()) {
                   const base = this.resultUrls.absoluteSummaryPageUrl(url);
-                  _meta.screenshot = `${base}data/screenshots/${runIndex}.${
+                  _meta.screenshot = `${base}data/screenshots/${runIndex + 1}.${
                     this.screenshotType
                   }`;
                   _meta.result = `${base}${runIndex}.html`;
@@ -305,16 +327,6 @@ module.exports = {
               }
             });
           })
-          .tap(results => {
-            if (results.screenshots) {
-              queue.postMessage(
-                make('browsertime.screenshot', results.screenshots, {
-                  url,
-                  group
-                })
-              );
-            }
-          })
           .tap(results => {
             if (this.options.coach) {
               return processCoachOutput(url, group, results);

lib/plugins/html/templates/url/index.pug

@@ -96,7 +96,7 @@ block content
         .one-half.column
             if hasScreenShots
               - var width = options.mobile ? 150 : '100%';
-              - var screenshotName = 'data/screenshots/0.' + screenShotType
+              - var screenshotName = 'data/screenshots/1.' + screenShotType
               a(href=screenshotName)
                 img.screenshot(src=screenshotName, width=width, alt='Screenshot of run 1')
             else if !d.browsertime && d.webpagetest

lib/plugins/html/templates/url/run.pug

@@ -99,7 +99,7 @@ block content
 
          .one-half.column
              if hasScreenShots
-               - screenshotName = 'data/screenshots/' + runIndex + '.' + screenShotType
+               - screenshotName = 'data/screenshots/' + (runIndex+1) + '.' + screenShotType
                - var width = options.mobile ? 150 : '100%';
                a(href=screenshotName)
                  img.screenshot(src=screenshotName, width=width, alt='Screenshot')

lib/plugins/screenshot/index.js

@@ -1,88 +0,0 @@
-'use strict';
-
-const Promise = require('bluebird');
-const sharp = require('sharp');
-const merge = require('lodash.merge');
-
-const defaultConfig = {
-  type: 'png',
-  png: {
-    compressionLevel: 6
-  },
-  jpg: {
-    quality: 80
-  },
-  maxSize: 2000
-};
-
-function getImagesAndName(images, imageType) {
-  return images.map((image, index) => {
-    return {
-      data: image,
-      name: index + '.' + imageType
-    };
-  });
-}
-
-function storeScreenshots(url, imagesAndName, storageManager, config) {
-  return Promise.map(imagesAndName, screenshot => {
-    if (config.type === 'png') {
-      return sharp(screenshot.data)
-        .png({ compressionLevel: config.png.compressionLevel })
-        .resize(config.maxSize, config.maxSize)
-        .max()
-        .toBuffer()
-        .then(newBuff =>
-          storageManager.writeDataForUrl(
-            newBuff,
-            screenshot.name,
-            url,
-            'screenshots'
-          )
-        );
-    } else {
-      return sharp(screenshot.data)
-        .jpeg({ quality: config.jpg.quality })
-        .resize(config.maxSize, config.maxSize)
-        .max()
-        .toBuffer()
-        .then(newBuff =>
-          storageManager.writeDataForUrl(
-            newBuff,
-            screenshot.name,
-            url,
-            'screenshots'
-          )
-        );
-    }
-  });
-}
-
-module.exports = {
-  open(context, options) {
-    this.storageManager = context.storageManager;
-    this.make = context.messageMaker('screenshot').make;
-    this.config = merge({}, defaultConfig, options.screenshot);
-  },
-  processMessage(message, queue) {
-    switch (message.type) {
-      case 'browsertime.setup': {
-        queue.postMessage(
-          this.make('browsertime.config', {
-            screenshot: true,
-            screenshotType: this.config.type
-          })
-        );
-        break;
-      }
-      case 'browsertime.screenshot':
-        return storeScreenshots(
-          message.url,
-          getImagesAndName(message.data, this.config.type),
-          this.storageManager,
-          this.config
-        );
-    }
-  },
-  config: defaultConfig
-};

package.json

@@ -69,7 +69,7 @@
   "dependencies": {
     "aws-sdk": "2.168.0",
     "bluebird": "3.5.1",
-    "browsertime": "2.5.0",
+    "browsertime": "3.0.0-alpha.1",
     "cli-color": "1.2.0",
     "concurrent-queue": "7.0.2",
     "fast-stats": "0.0.3",
@@ -96,7 +96,6 @@
     "pagexray": "2.2.1",
     "pug": "2.0.1",
     "s3": "4.4.0",
-    "sharp": "0.20.0",
     "simplecrawler": "1.1.6",
     "tape": "4.9.0",
     "text-table": "0.2.0",