sitespeed.io 32.2.0 → 33.0.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # CHANGELOG - sitespeed.io  (we use [semantic versioning](https://semver.org))
 
+## 33.0.0 - 2024-02-11
+
+*Announcement*: In the next major release we will remove all support for WebPageTest. If you still plan to use WebPageTest you can probaly still use the [plugin](https://github.com/sitespeedio/plugin-webpagetest) for a while if your WebPageTest installation works.
+
+### Breaking
+This is a breaking change if you use the compare plugin and do not set an id (`--compare.id`) for your test.
+* If you auto generate the id for your compare test, this PR add browser, connectivity name and slug to the file name where the compare metrics is stored [#4083](https://github.com/sitespeedio/sitespeed.io/pull/4083).
+
+
+### Added
+* Updated to [Browsertime 21.2.0](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#2120---2024-02-11) that adds a new way to stop your measureemnts if your navigation fails `measure.stopAsError(failureMessage, optionalURL)`. Perfect to use in a try/catch.
+* Use darkmode for result HTML by adding `--html.darkMode`, thank you [petemyron](https://github.com/petemyron) for PR [#4081](https://github.com/sitespeedio/sitespeed.io/pull/4081).
+
+### Fixed
+* Update co2.js to 0.14.2 [#4074](https://github.com/sitespeedio/sitespeed.io/pull/4074)
+* More solid error handling if one page fail in scripting. This fixes so that the HTML for the rest of pages should be generated [#4079](https://github.com/sitespeedio/sitespeed.io/pull/4079).
+* Remove console.errors of errors (they have already been reported in the log) [#4080](https://github.com/sitespeedio/sitespeed.io/pull/4080).
+* Fix automatically switch to Throttle as engine on Mac and Linux if you add -c THROTTLING[#4082](https://github.com/sitespeedio/sitespeed.io/pull/4082).
+
 ## 32.2.0 - 2024-01-24
 ### Added
 * Chrome and Chromedriver 121 in the Docker container [#4069](https://github.com/sitespeedio/sitespeed.io/pull/4069).

package/Dockerfile

@@ -1,4 +1,4 @@
-FROM sitespeedio/webbrowsers:chrome-121.0-firefox-122.0-edge-120.0
+FROM sitespeedio/webbrowsers:chrome-121.0-firefox-122.0-edge-121.0
 
 ARG TARGETPLATFORM=linux/amd64
 

package/bin/sitespeed.js

@@ -174,12 +174,10 @@ async function start() {
       }
 
       if (result.errors.length > 0) {
-        console.log('Errors while running:\n' + result.errors.join('\n'));
         throw new Error('Errors while running:\n' + result.errors.join('\n'));
       }
-    } catch (error) {
+    } catch {
       process.exitCode = 1;
-      console.log(error);
     } finally {
       process.exit();
     }

package/lib/cli/cli.js

@@ -1783,6 +1783,12 @@ export async function parseCommandLine() {
         'Configure the thresholds for red/yellow/green for the summary boxes.',
       group: 'HTML'
     })
+    .option('html.darkMode', {
+      alias: ['darkMode'],
+      describe: 'View test results with a dark theme.',
+      default: false,
+      type: 'boolean'
+    })
     .option('summary', {
       describe: 'Show brief text summary to stdout',
       default: false,
@@ -2228,7 +2234,7 @@ export async function parseCommandLine() {
     set(argv, 'browsertime.connectivity.engine', 'throttle');
   } else if (
     (platform() === 'darwin' || platform() === 'linux') &&
-    !argv.browsertime.android &&
+    !argv.browsertime.android.enabled &&
     !argv.browsertime.safari.ios &&
     !argv.browsertime.docker &&
     get(explicitOptions, 'browsertime.connectivity.engine', '') === '' &&

package/lib/plugins/browsertime/index.js

@@ -498,51 +498,55 @@ export default class BrowsertimePlugin extends SitespeedioPlugin {
 
               // If the coach is turned on, collect the coach result
               if (options.coach) {
-                const coachAdvice = browserScriptsData.coach.coachAdvice;
-                // check if the coach has error(s)
-                if (!isEmpty(coachAdvice.errors)) {
-                  log.error(
-                    '%s generated the following errors in the coach %:2j',
-                    url,
-                    coachAdvice.errors
-                  );
-                  super.sendMessage(
-                    'error',
-                    'The coach got the following errors: ' +
-                      JSON.stringify(coachAdvice.errors),
-                    {
+                try {
+                  const coachAdvice = browserScriptsData.coach.coachAdvice;
+                  // check if the coach has error(s)
+                  if (!isEmpty(coachAdvice.errors)) {
+                    log.error(
+                      '%s generated the following errors in the coach %:2j',
                       url,
-                      runIndex,
-                      iteration: runIndex + 1
-                    }
-                  );
-                }
+                      coachAdvice.errors
+                    );
+                    super.sendMessage(
+                      'error',
+                      'The coach got the following errors: ' +
+                        JSON.stringify(coachAdvice.errors),
+                      {
+                        url,
+                        runIndex,
+                        iteration: runIndex + 1
+                      }
+                    );
+                  }
 
-                let advice = coachAdvice;
-                // If we run without HAR
-                if (result.har) {
-                  // make sure to get the right run in the HAR
-                  const myHar = pickAPage(result.har, harIndex);
-
-                  const harResult = await analyseHar(
-                    myHar,
-                    undefined,
-                    coachAdvice,
-                    options
-                  );
-                  advice = merge(coachAdvice, harResult);
-                }
-                const thirdPartyWebVersion = getThirdPartyWebVersion();
-                const wappalyzerVersion = getWappalyzerCoreVersion();
-                advice.thirdPartyWebVersion = thirdPartyWebVersion;
-                advice.wappalyzerVersion = wappalyzerVersion;
+                  let advice = coachAdvice;
+                  // If we run without HAR
+                  if (result.har) {
+                    // make sure to get the right run in the HAR
+                    const myHar = pickAPage(result.har, harIndex);
+
+                    const harResult = await analyseHar(
+                      myHar,
+                      undefined,
+                      coachAdvice,
+                      options
+                    );
+                    advice = merge(coachAdvice, harResult);
+                  }
+                  const thirdPartyWebVersion = getThirdPartyWebVersion();
+                  const wappalyzerVersion = getWappalyzerCoreVersion();
+                  advice.thirdPartyWebVersion = thirdPartyWebVersion;
+                  advice.wappalyzerVersion = wappalyzerVersion;
 
-                super.sendMessage('coach.run', advice, {
-                  url,
-                  group,
-                  runIndex,
-                  iteration: runIndex + 1
-                });
+                  super.sendMessage('coach.run', advice, {
+                    url,
+                    group,
+                    runIndex,
+                    iteration: runIndex + 1
+                  });
+                } catch (error) {
+                  log.error('Could not generate coach data', error);
+                }
               }
 
               this.browsertimeAggregator.addToAggregate(run, group);

package/lib/plugins/compare/index.js

@@ -5,6 +5,7 @@ import { resolve, join } from 'node:path';
 import { SitespeedioPlugin } from '@sitespeed.io/plugin';
 import intel from 'intel';
 import merge from 'lodash.merge';
+import get from 'lodash.get';
 import dayjs from 'dayjs';
 
 import {
@@ -21,12 +22,18 @@ const __dirname = fileURLToPath(new URL('.', import.meta.url));
 const log = intel.getLogger('sitespeedio.plugin.compare');
 const defaultConfig = {};
 
-function urlToId(url) {
-  return url
+function urlToId(url, options) {
+  let id = url
     .replace(/^https?:\/\//, '')
     .replaceAll(/[^\d.A-Za-z]/g, '_')
     .replaceAll(/__+/g, '_')
     .replaceAll(/^_|_$/g, '');
+
+  const connectivityProfile = get(options, 'browsertime.connectivity.profile');
+
+  return `${options.slug ? options.slug + '-' : ''}${
+    connectivityProfile ? connectivityProfile + '-' : ''
+  }${id}${options.browser ? '-' + options.browser : ''}`;
 }
 
 const TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
@@ -101,7 +108,7 @@ export default class ComparePlugin extends SitespeedioPlugin {
       case 'sitespeedio.summarize': {
         for (let url of Object.keys(this.browsertimes)) {
           this.page++;
-          const id = this.options.compare.id || urlToId(url);
+          const id = this.options.compare.id || urlToId(url, this.options);
           const baseline = await getBaseline(
             id + '-' + this.page,
             this.compareOptions

package/lib/plugins/html/assets/css/index-dark.min.css

@@ -0,0 +1 @@
+/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}[hidden],template{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,optgroup,select,textarea{font:inherit;margin:0}optgroup{font-weight:700}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}*,:after,:before{box-sizing:border-box}ol,ul{margin-bottom:2.5rem}ul{margin-top:0;padding-left:0;list-style:circle inside}ul ol,ul ul{margin:1.5rem 0 1.5rem 3rem;font-size:.9rem}ol{margin-top:0;padding-left:0;list-style:decimal inside}ol ol,ol ul{margin:1.5rem 0 1.5rem 3rem;font-size:.9rem}li{margin-bottom:0}figure{margin-bottom:2.5rem}footer{text-align:center}hr{margin-top:3rem;margin-bottom:3.5rem;border-width:0;border-top:1px solid #e1e1e1}.container:after,.row:after{content:"";display:table;clear:both}.container{position:relative;width:100%;max-width:1140px;margin:0 auto;padding:0 20px;box-sizing:border-box}.column,.columns{width:100%;float:left;box-sizing:border-box}@media (min-width:400px){.container{width:85%;padding:0}}@media (min-width:550px){.container{width:80%}.column,.columns{margin-left:4%}.column:first-child,.columns:first-child{margin-left:0}.one.column,.one.columns{width:4.6666666667%}.two.columns{width:13.3333333333%}.three.columns{width:22%}.four.columns{width:30.6666666667%}.five.columns{width:39.3333333333%}.six.columns{width:48%}.seven.columns{width:56.6666666667%}.eight.columns{width:65.3333333333%}.nine.columns{width:74%}.ten.columns{width:82.6666666667%}.eleven.columns{width:91.3333333333%}.twelve.columns{width:100%;margin-left:0}.one-third.column{width:30.6666666667%}.two-thirds.column{width:65.3333333333%}.one-half.column{width:48%}.offset-by-one.column,.offset-by-one.columns{margin-left:8.6666666667%}.offset-by-two.column,.offset-by-two.columns{margin-left:17.3333333333%}.offset-by-three.column,.offset-by-three.columns{margin-left:26%}.offset-by-four.column,.offset-by-four.columns{margin-left:34.6666666667%}.offset-by-five.column,.offset-by-five.columns{margin-left:43.3333333333%}.offset-by-six.column,.offset-by-six.columns{margin-left:52%}.offset-by-seven.column,.offset-by-seven.columns{margin-left:60.6666666667%}.offset-by-eight.column,.offset-by-eight.columns{margin-left:69.3333333333%}.offset-by-nine.column,.offset-by-nine.columns{margin-left:78%}.offset-by-ten.column,.offset-by-ten.columns{margin-left:86.6666666667%}.offset-by-eleven.column,.offset-by-eleven.columns{margin-left:95.3333333333%}.offset-by-one-third.column,.offset-by-one-third.columns{margin-left:34.6666666667%}.offset-by-two-thirds.column,.offset-by-two-thirds.columns{margin-left:69.3333333333%}.offset-by-one-half.column,.offset-by-one-half.columns{margin-left:52%}}@media (min-width:1550px){.container{max-width:1400px;font-size:1.2em}}@media (min-width:1900px){.container{max-width:1800px;font-size:1.4em}}table{width:100%;margin-bottom:2.5rem;border-collapse:separate;border-spacing:1px;background-color:#222}td,th{padding:4px 1rem;vertical-align:top;text-align:left}td:first-child,th:first-child{padding-left:1rem}td:last-child,th:last-child{padding-right:1rem}tr:nth-child(odd){background:#333}tr:nth-child(2n){background:#222}tr.odd{background:#333}tr.even{background:#222}th{background:#004d6c}td.number,th.number{text-align:right}td.right{text-align:right}td.url{overflow-wrap:break-word;word-wrap:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;-moz-hyphens:auto;hyphens:auto}td.assetsurl{max-width:400px}td.pagesurl{max-width:350px}td.offendingurl{max-width:900px}td.break{word-break:break-all}td.extraheader{font-weight:700;background:#004d6c}@media only screen and (max-width:800px){.responsive table,.responsive tbody,.responsive td,.responsive th,.responsive thead,.responsive tr{display:block}.responsive tr.u-hideable{display:none}.responsive thead tr{position:absolute;top:-9999px;left:-9999px}.responsive tr{border:2px solid #e1e1e1}.responsive td{border:none;border-bottom:1px solid #e1e1e1;position:relative;padding-left:50%;white-space:normal;text-align:left;max-width:none}.responsive td:before{position:absolute;top:6px;left:6px;width:30%;padding-right:10px;white-space:nowrap;text-align:left;font-weight:700}.responsive td:before{content:attr(data-title)}.responsive td.url.offendingurl{word-break:break-all;padding-left:2px}.hidden-small{display:none}}html{font-size:100%}body{font-size:1em;line-height:1.6;font-weight:400;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;color:#fff;background-color:#222}h1,h2,h3,h4,h5,h6{margin-top:1rem;margin-bottom:2rem;font-weight:300}h1{font-size:3rem;line-height:1.2}h2{font-size:2.8rem;line-height:1.25}h3{font-size:2.6rem;line-height:1.3}h4{font-size:2.4rem;line-height:1.35}h5{font-size:1.8rem;line-height:1.5}h6{font-size:1.5rem;line-height:1.6;letter-spacing:0}p{margin-top:0}a{color:#0095d2}a:hover{color:#00719f}blockquote,dl,p,pre{margin-bottom:2.5rem}code{padding:.2rem .5rem;margin:0 .2rem;font-size:.9rem;white-space:nowrap;background:#1d1d1d;border:1px solid #444;border-radius:4px}pre>code{display:block;padding:1rem 1.5rem;white-space:pre;overflow:auto}.u-full-width{width:100%}.u-max-full-width{max-width:100%}.u-pull-right{float:right}.u-pull-left{float:left}.u-cf{content:"";display:table;clear:both}.u-hideable{display:none}.button{display:inline-block;height:38px;padding:0 30px;margin-bottom:1rem;color:#fff;text-align:center;font-size:80%;font-weight:600;line-height:38px;letter-spacing:.1rem;text-transform:uppercase;text-decoration:none;white-space:nowrap;background-color:transparent;border-radius:4px;border:1px solid #e1e1e1;cursor:pointer}.button:active,.button:focus,.button:hover{color:#fff;border-color:#aeaeae;outline:0}.button--primary{color:#222;background-color:#0095d2;border-color:#0095d2}.button--primary:active,.button--primary:focus,.button--primary:hover{color:#222;background-color:#0087be;border-color:#0087be}.button-download{color:#222;background-color:#ec971f;border-color:#eb9316;padding:0 10px;margin-right:1rem}.button-download:active,.button-download:focus,.button-download:hover{color:#222;background-color:#e38d13;border-color:#da8813}.navgrid{width:100%;min-width:0;margin-left:0;margin-right:0;padding-left:0;padding-right:10px}.nav{background:#0095d2}.nav ul{list-style:none;text-align:center;padding:0;margin:0;background-color:#0095d2}.nav li{line-height:40px;height:40px;border-bottom:none;margin-bottom:0}.nav a{text-decoration:none;color:#fff;display:block}.nav a:hover{background-color:#0073b0}.nav a.active{background-color:#0073b0;color:#fff;cursor:default}.logo{text-align:center;background-color:#0095d2}.navbar-brand{padding:0;font-size:18px;max-width:250px}@media screen and (min-width:820px){body{padding-top:50px}.navgrid{width:100%;max-width:1140px;min-width:755px;margin:0 auto;overflow:hidden}.nav{height:50px;width:100%;z-index:1000;position:fixed;top:0}.navbar-brand{padding:0;font-size:18px;float:left;max-width:250px}.nav{z-index:10;top:0;background-color:#0095d2}.nav a{padding-left:20px;padding-right:20px}.nav li{border-bottom:none;height:50px;line-height:50px;float:left;display:inline-block;margin-right:0}.nav a{text-decoration:none;color:#fff;display:block}.nav ul{list-style:none;text-align:center;padding:0;margin:0;background-color:#0095d2}:target:before{content:"";display:block;height:50px;margin:-50px 0 0}}@media (min-width:1550px){.nav li{font-size:1.2em}}@media (min-width:1900px){.nav li{font-size:1.4em}}table[data-sortable] th[data-sorted=true]{color:#fff;background:#06b7ff;border-bottom-color:#215169}table[data-sortable] th:not([data-sorted=false]){cursor:pointer;color:#fff;background:#0095d2;text-decoration:underline}.summarybox{padding:15px;margin-bottom:20px;border:1px solid transparent;border-radius:4px}.summarybox.ok{color:#bffdc0;background-color:#315523;border-color:#43810e}.summarybox.warning{color:#fad79b;background-color:#816e07;border-color:#b18633}.summarybox.error{color:#ffacab;background-color:#7b1212;border-color:#a31c30}.summarybox.info{background-color:#1d495f;border-color:#468a98;color:#94dafd}a.summaries{text-decoration:none}.summarynumber{font-size:2rem;line-height:1;font-weight:700}.summarysmall{font-size:1rem;line-height:1}.label{display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em}.normal{font-size:100%}.ok{background-color:#468847}.warning{background-color:#f0ad4e}.error{background-color:#d9534f}.info{background-color:#0095d2}ul.menu{list-style:none;font-size:125%;text-transform:uppercase}.errors{margin-bottom:1.333em;background:#ffb6c1;padding-left:1em}.subtableheader{background:#ffe3eb}.large{font-size:1.333rem;line-height:1.8rem}.hidden-small{display:inline}.url{overflow-wrap:break-word;word-wrap:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;-moz-hyphens:auto;hyphens:auto}/*! github.com/micmro/PerfCascade Version:2.11.0 (24/11/2021) */.water-fall-chart{width:100%;overflow:visible;font-size:12px;line-height:1em}.water-fall-chart *{box-sizing:border-box}.water-fall-chart button{cursor:pointer}.water-fall-holder{fill:#ccc}.water-fall-chart .left-fixed-holder{overflow:visible;fill:#ddd}.water-fall-chart .marker-holder{width:100%;fill:#ddd}.water-fall-chart .line-label-holder{cursor:pointer}.water-fall-chart .line-holder{stroke-width:1;stroke:#ccc;stroke-opacity:0.5;transition:all 60ms}.water-fall-chart .line-holder .line-mark{fill:#69009e;opacity:.01;stroke-width:0;transition:all 60ms}.water-fall-chart .line-holder.active{stroke:#69009e;stroke-width:2;stroke-opacity:1}.water-fall-chart .line-holder.active .line-mark{opacity:.4}.water-fall-chart .type-onload .line-holder{stroke:#c0c0ff}.water-fall-chart .type-oncontentload .line-holder{stroke:#d888df}.water-fall-chart .labels{width:100%}.water-fall-chart .labels .inner-label{pointer-events:none}.water-fall-chart .time-block.active{opacity:.8}.water-fall-chart .line-end,.water-fall-chart .line-start{display:none;stroke-width:1;stroke-opacity:0.5;stroke:#000}.water-fall-chart .line-end.active,.water-fall-chart .line-start.active{display:block}.left-fixed-holder .label-full-bg{fill:#111;opacity:.9}.time-scale line{stroke:#0cc;stroke-width:1}.time-scale line.sub-second-line{stroke:#ccc;opacity:.75;stroke-width:.5}.time-scale text{font-weight:700;fill:#ddd}.row-item{cursor:pointer}.row-item .even{fill:#222;opacity:1}.row-item .odd{fill:#333;opacity:1}.row-item:hover .even,.row-item:hover .odd{fill:#444;opacity:1}.row-item:focus{outline:solid 1.5px #aaa;outline-offset:-1.5px}.row-item:focus .even,.row-item:focus .odd{fill:#000;opacity:.2}.row-item .rect-holder text{fill:#aaa}.row-item.status0 .even,.row-item.status5xx .even{fill:#f66}.row-item.status0 .odd,.row-item.status5xx .odd{fill:#f00}.row-item.status4xx .even{fill:#c33}.row-item.status4xx .odd{fill:#c00}.row-item.status3xx .even{fill:#ff6}.row-item.status3xx .odd{fill:#ff0}.row-item.potentiallyRenderBlocking .even,.row-item.potentiallyRenderBlocking .odd{fill:#e5a331}.row-item.renderBlocking .even,.row-item.renderBlocking .odd{fill:#e57231;stroke-dasharray:5;stroke:black;stroke-width:2px}.row-item.largestContentfulPaint .even,.row-item.largestContentfulPaint .odd{fill:#c9e531;stroke-dasharray:8;stroke-width:2px;stroke:black}.row-item.largestContentfulPaint .even,.row-item.largestContentfulPaint .odd,.row-item.potentiallyRenderBlocking .even,.row-item.potentiallyRenderBlocking .odd,.row-item.renderBlocking .even,.row-item.renderBlocking .odd,.row-item.status0 .even,.row-item.status0 .odd,.row-item.status3xx .even,.row-item.status3xx .odd,.row-item.status4xx .even,.row-item.status4xx .odd,.row-item.status5xx .even,.row-item.status5xx .odd{opacity:.3}.row-item.largestContentfulPaint:hover .even,.row-item.largestContentfulPaint:hover .odd,.row-item.potentiallyRenderBlocking:hover .even,.row-item.potentiallyRenderBlocking:hover .odd,.row-item.renderBlocking:hover .even,.row-item.renderBlocking:hover .odd,.row-item.status0:hover .even,.row-item.status0:hover .odd,.row-item.status3xx:hover .even,.row-item.status3xx:hover .odd,.row-item.status4xx:hover .even,.row-item.status4xx:hover .odd,.row-item.status5xx:hover .even,.row-item.status5xx:hover .odd{opacity:.5}.tooltip-holder{overflow:visible}.tooltip *{padding:0;margin:0}.tooltip html{font-size:10px;line-height:1.2em}.tooltip body{position:relative}.tooltip-payload{position:absolute;top:0;left:0;padding:.25em;font-size:10px;display:inline-block;background:rgba(17,17,17,.8666666667);border:solid 1px #555;word-break:break-all;overflow-wrap:break-word;transition:opacity .3s}.tooltip-payload.no-anim{transition:none}.row-item,.time-scale line,.time-scale text,.water-fall-chart .line-holder line,.water-fall-chart .line-label-holder{transition:transform 60ms}.water-fall-chart.closing{transition-delay:60ms}.labels{overflow:hidden}.block-css{fill:#a6d18f}.block-html,.block-iframe,.block-internal,.block-svg{fill:#82a8de}.block-image,.block-img{fill:#b394cf}.block-javascript,.block-js,.block-script{fill:#e0b483}.block-link{fill:#89afe6}.block-flash,.block-swf{fill:#42aab1}.block-font{fill:#e15d4e}.block-ajax,.block-xmlhttprequest{fill:#f00}.block-other,.block-plain{fill:#b3b3b3}.block-blocked{fill:#aaa}.block-dns{fill:#159588}.block-connect{fill:#fd9727}.block-ssl{fill:#c141cd}.block-send{fill:#b0bec5}.block-wait{fill:#1ec659}.block-receive{fill:#1eaaf1}.block-receive-chunk{fill:#a1c3fa}.block-undefined{fill:#0f0}.info-overlay-bg{fill:#fff;stroke:#cdcdcd}.info-overlay-close-btn{fill:rgba(205,205,205,0.8);transform:translate(-23px,-23px);cursor:pointer}.info-overlay-close-btn text{fill:#111;pointer-events:none}.info-overlay-close-btn:focus{border:solid 1px #36c}.info-overlay-holder .connect{border-right:solid 5px #fd9727;padding-right:5px}.info-overlay-holder .blocked{border-right:solid 5px #aaa;padding-right:5px}.info-overlay-holder .ssltls{border-right:solid 5px #c141cd;padding-right:5px}.info-overlay-holder .send{border-right:solid 5px #b0bec5;padding-right:5px}.info-overlay-holder .wait{border-right:solid 5px #1ec659;padding-right:5px}.info-overlay-holder .receive{border-right:solid 5px #1eaaf1;padding-right:5px}.info-overlay-holder .dns{border-right:solid 5px #159588;padding-right:5px}.type-css{background:#406b29}.type-html,.type-iframe,.type-internal,.type-svg{background:#1c4278}.type-image,.type-img{background:#4d2e69}.type-javascript,.type-js,.type-script{background:#7a4e1d}.type-link{background:#89afe6}.type-flash,.type-swf{background:#234980}.type-font{background:#ae2a1b}.type-ajax,.type-xmlhttprequest{background:#c00}.type-other,.type-plain{background:grey}.info-overlay-holder *{padding:0;margin:0;font-size:12px}.info-overlay-holder body{position:relative;height:450px;clear:both;padding:0;margin:0;width:100%;background:#222;color:#fff}.info-overlay-holder body .wrapper{height:450px;width:100%;overflow:scroll}.info-overlay-holder header{position:relative;box-shadow:0 0 2px 2px rgba(0,0,0,.25)}.info-overlay-holder header,.info-overlay-holder header a,.info-overlay-holder header button{color:#fff;text-decoration:none}.info-overlay-holder header a:focus,.info-overlay-holder header a:hover{text-decoration:underline}.info-overlay-holder .requestID{font-weight:700}.info-overlay-holder h3,.info-overlay-holder h3 a{font-size:1.1em;padding:1em;margin:0;font-weight:400;overflow-wrap:break-word}.info-overlay-holder h3 strong{font-size:1.1em}.info-overlay-holder .tab-nav ul{margin:0;padding:0}.info-overlay-holder .tab-nav li{margin:0;padding:0;display:inline-block}.info-overlay-holder button{background:0 0;outline:0;border:0;border-bottom:solid 2px transparent;padding:.5em 1em;margin:0 .25em}.info-overlay-holder li:first-child button{margin-left:1em}.info-overlay-holder button.active:focus,.info-overlay-holder button:focus,.info-overlay-holder button:hover{border-color:rgba(255,255,255,.6)}.info-overlay-holder button.active{border-color:#fff;cursor:default}.info-overlay-holder button.active:focus{border-color:rgba(255,255,255,.8)}.info-overlay-holder button.copy-tab-data{position:absolute;top:.5em;right:.5em;border:0;margin:0;border-radius:1em;background:#555;color:#ccc}.info-overlay-holder button.copy-tab-data:focus,.info-overlay-holder button.copy-tab-data:hover{background:#777;color:#fff}.info-overlay-holder dt{float:left;clear:both;margin-top:.5em;width:25%;text-align:right;font-weight:700}.info-overlay-holder dd{float:left;width:73%;margin:.5em 0 0 2%;padding:0 0 .5em 0}.info-overlay-holder dt:after{content:":"}.info-overlay-holder pre{font-size:11px;line-height:23px;border-radius:0;background:#f6f3f3}.info-overlay-holder .tab{float:left;position:relative;width:100%;height:350px;padding:12px 12px 24px}.info-overlay-holder .tab h2{font-size:1.2em;margin:.5em 0 0;padding:.5em 0 .5em 1em;clear:both;border-top:solid 1px #efefef}.info-overlay-holder .tab h2:first-child{border-top:0;padding-top:0}.info-overlay-holder .tab pre{overflow-y:hidden;width:100%;min-height:100%}.info-overlay-holder .tab .preview{width:auto;max-width:100%;max-height:500px;border:solid 1px #666}.info-overlay-holder .tab dl:after{content:"";display:table;clear:both}.info-overlay-holder .tab.rendered-data{padding:0}.info-overlay-holder .tab.rendered-data pre{padding:12px 12px 24px;background-color:#111}.info-overlay-holder .tab.rendered-data pre>code{white-space:pre-wrap}.resource-legend{margin:0;padding:0;font-size:.75em;line-height:1.5em;display:inline-block}.resource-legend li{margin:0 1em 0 0;padding:0;white-space:nowrap;display:inline-block}.resource-legend li:before{content:"";width:1em;height:1em;margin:0 .5em 0 0;vertical-align:text-top;display:inline-block}.resource-legend .legend-blocked:before{background:#aaa}.resource-legend .legend-dns:before{background:#159588}.resource-legend .legend-connect:before{background:#fd9727}.resource-legend .legend-ssl:before{background:#c141cd}.resource-legend .legend-send:before{background:#b0bec5}.resource-legend .legend-wait:before{background:#1ec659}.resource-legend .legend-receive:before{background:#1eaaf1}.icon{fill:#ccc}.icon-4xx,.icon-5xx,.icon-no-cache,.icon-no-gzip,.icon-warning{fill:#b55}.full-label{background-color:#222;fill:#eee}.water-fall-chart .type-firstpaint .line-holder{stroke:#42f46e;stroke-opacity:1;stroke-width:3}.water-fall-chart .type-firstvisualchange .line-holder{stroke:#42f46e;stroke-opacity:1;stroke-width:3}.water-fall-chart .type-visualcomplete85 .line-holder{stroke:#ee7777;stroke-opacity:1;stroke-width:3}.water-fall-chart .type-lastvisualchange .line-holder{stroke:#ee42f4;stroke-opacity:1;stroke-width:3}.water-fall-chart .type-onload .line-holder{stroke:#9c99e5;stroke-opacity:1;stroke-width:3}.water-fall-chart .type-oncontentload .line-holder{stroke:#9842f4;stroke-opacity:1;stroke-width:3}.water-fall-chart .type-dominteractivetime .line-holder{stroke:#1842f4;stroke-opacity:1;stroke-width:2}.water-fall-chart .type-domcontentloadedtime .line-holder{stroke:#1212f4;stroke-opacity:1;stroke-width:2}.water-fall-chart .type-lastcpulongtask .line-holder{stroke:#f41229;stroke-opacity:1;stroke-width:3}.water-fall-chart .type-largestcontentfulpaint .line-holder{stroke:#c7f412;stroke-opacity:1;stroke-width:3}.water-fall-chart{font-size:14px}#page-selector{display:none;clear:both;margin:1em 0}*{box-sizing:border-box}@media screen and (max-width:400px){select{max-width:100%}}.screenshot{padding:4px;background-color:#fff;border:1px solid #ddd;border-radius:4px}*,:after,:before{margin:0;padding:0;box-sizing:border-box}section{display:block;padding:20px 0 0;border-top:1px solid #777}#tabs a{display:inline-block;margin:0 0 -1px;padding:15px 22px;font-weight:600;text-align:center;color:#ddd;border:1px solid transparent;text-decoration:none;text-transform:uppercase}#tabs a:before{font-weight:400}#tabs a:hover{color:#fff;cursor:pointer}#tabs a:target:focus{outline:0}#tabs a[selected]{color:#fff;border:1px solid #777;border-top:2px solid #0095d2;border-bottom:1px solid #222}@media screen and (max-width:650px){#tabs a:before{margin:0;font-size:18px}}@media screen and (max-width:400px){#tabs a{padding:13px}}.group-item{position:relative;display:block;padding:10px 15px;margin-bottom:-1px;background-color:#111;border:1px solid #333;font-weight:700}.group-item.active{z-index:2;color:#fff;background-color:#337ab7;border-color:#337ab7}.group-item:first-child{border-top-left-radius:4px;border-top-right-radius:4px}.group-item:last-child{margin-bottom:0;border-bottom-right-radius:4px;border-bottom-left-radius:4px}.loader,.loader:after,.loader:before{background:#000;-webkit-animation:load1 1s infinite ease-in-out;animation:load1 1s infinite ease-in-out;width:1em;height:4em}.loader{color:#000;text-indent:-9999em;margin:88px auto;position:relative;font-size:11px;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation-delay:-.16s;animation-delay:-.16s}.loader:after,.loader:before{position:absolute;top:0;content:""}.loader:before{left:-1.5em;-webkit-animation-delay:-.32s;animation-delay:-.32s}.loader:after{left:1.5em}@-webkit-keyframes load1{0%,100%,80%{box-shadow:0 0;height:4em}40%{box-shadow:0 -2em;height:5em}}@keyframes load1{0%,100%,80%{box-shadow:0 0;height:4em}40%{box-shadow:0 -2em;height:5em}}.ct-label{fill:rgba(0,0,0,0.4);color:rgba(0,0,0,.4);font-size:.75rem;line-height:1}.ct-chart-bar .ct-label,.ct-chart-line .ct-label{display:block;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex}.ct-chart-donut .ct-label,.ct-chart-pie .ct-label{dominant-baseline:central}.ct-label.ct-horizontal.ct-start{-webkit-box-align:flex-end;-webkit-align-items:flex-end;-ms-flex-align:flex-end;align-items:flex-end;-webkit-box-pack:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:flex-start;justify-content:flex-start;text-align:left;text-anchor:start}.ct-label.ct-horizontal.ct-end{-webkit-box-align:flex-start;-webkit-align-items:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-box-pack:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:flex-start;justify-content:flex-start;text-align:left;text-anchor:start}.ct-label.ct-vertical.ct-start{-webkit-box-align:flex-end;-webkit-align-items:flex-end;-ms-flex-align:flex-end;align-items:flex-end;-webkit-box-pack:flex-end;-webkit-justify-content:flex-end;-ms-flex-pack:flex-end;justify-content:flex-end;text-align:right;text-anchor:end}.ct-label.ct-vertical.ct-end{-webkit-box-align:flex-end;-webkit-align-items:flex-end;-ms-flex-align:flex-end;align-items:flex-end;-webkit-box-pack:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:flex-start;justify-content:flex-start;text-align:left;text-anchor:start}.ct-chart-bar .ct-label.ct-horizontal.ct-start{-webkit-box-align:flex-end;-webkit-align-items:flex-end;-ms-flex-align:flex-end;align-items:flex-end;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center;text-anchor:start}.ct-chart-bar .ct-label.ct-horizontal.ct-end{-webkit-box-align:flex-start;-webkit-align-items:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center;text-anchor:start}.ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-start{-webkit-box-align:flex-end;-webkit-align-items:flex-end;-ms-flex-align:flex-end;align-items:flex-end;-webkit-box-pack:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:flex-start;justify-content:flex-start;text-align:left;text-anchor:start}.ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-end{-webkit-box-align:flex-start;-webkit-align-items:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-box-pack:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:flex-start;justify-content:flex-start;text-align:left;text-anchor:start}.ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-start{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:flex-end;-webkit-justify-content:flex-end;-ms-flex-pack:flex-end;justify-content:flex-end;text-align:right;text-anchor:end}.ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-end{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:flex-start;justify-content:flex-start;text-align:left;text-anchor:end}.ct-grid{stroke:rgba(0,0,0,0.2);stroke-width:1px;stroke-dasharray:2px}.ct-grid-background{fill:none}.ct-point{stroke-width:10px;stroke-linecap:round}.ct-line{fill:none;stroke-width:4px}.ct-area{stroke:none;fill-opacity:0.1}.ct-bar{fill:none;stroke-width:10px}.ct-slice-donut{fill:none;stroke-width:60px}.ct-series-a .ct-bar,.ct-series-a .ct-line,.ct-series-a .ct-point,.ct-series-a .ct-slice-donut{stroke:#d70206}.ct-series-a .ct-area,.ct-series-a .ct-slice-donut-solid,.ct-series-a .ct-slice-pie{fill:#d70206}.ct-series-b .ct-bar,.ct-series-b .ct-line,.ct-series-b .ct-point,.ct-series-b .ct-slice-donut{stroke:#f05b4f}.ct-series-b .ct-area,.ct-series-b .ct-slice-donut-solid,.ct-series-b .ct-slice-pie{fill:#f05b4f}.ct-series-c .ct-bar,.ct-series-c .ct-line,.ct-series-c .ct-point,.ct-series-c .ct-slice-donut{stroke:#f4c63d}.ct-series-c .ct-area,.ct-series-c .ct-slice-donut-solid,.ct-series-c .ct-slice-pie{fill:#f4c63d}.ct-series-d .ct-bar,.ct-series-d .ct-line,.ct-series-d .ct-point,.ct-series-d .ct-slice-donut{stroke:#d17905}.ct-series-d .ct-area,.ct-series-d .ct-slice-donut-solid,.ct-series-d .ct-slice-pie{fill:#d17905}.ct-series-e .ct-bar,.ct-series-e .ct-line,.ct-series-e .ct-point,.ct-series-e .ct-slice-donut{stroke:#453d3f}.ct-series-e .ct-area,.ct-series-e .ct-slice-donut-solid,.ct-series-e .ct-slice-pie{fill:#453d3f}.ct-series-f .ct-bar,.ct-series-f .ct-line,.ct-series-f .ct-point,.ct-series-f .ct-slice-donut{stroke:#59922b}.ct-series-f .ct-area,.ct-series-f .ct-slice-donut-solid,.ct-series-f .ct-slice-pie{fill:#59922b}.ct-series-g .ct-bar,.ct-series-g .ct-line,.ct-series-g .ct-point,.ct-series-g .ct-slice-donut{stroke:#0544d3}.ct-series-g .ct-area,.ct-series-g .ct-slice-donut-solid,.ct-series-g .ct-slice-pie{fill:#0544d3}.ct-series-h .ct-bar,.ct-series-h .ct-line,.ct-series-h .ct-point,.ct-series-h .ct-slice-donut{stroke:#6b0392}.ct-series-h .ct-area,.ct-series-h .ct-slice-donut-solid,.ct-series-h .ct-slice-pie{fill:#6b0392}.ct-series-i .ct-bar,.ct-series-i .ct-line,.ct-series-i .ct-point,.ct-series-i .ct-slice-donut{stroke:#f05b4f}.ct-series-i .ct-area,.ct-series-i .ct-slice-donut-solid,.ct-series-i .ct-slice-pie{fill:#f05b4f}.ct-series-j .ct-bar,.ct-series-j .ct-line,.ct-series-j .ct-point,.ct-series-j .ct-slice-donut{stroke:#dda458}.ct-series-j .ct-area,.ct-series-j .ct-slice-donut-solid,.ct-series-j .ct-slice-pie{fill:#dda458}.ct-series-k .ct-bar,.ct-series-k .ct-line,.ct-series-k .ct-point,.ct-series-k .ct-slice-donut{stroke:#eacf7d}.ct-series-k .ct-area,.ct-series-k .ct-slice-donut-solid,.ct-series-k .ct-slice-pie{fill:#eacf7d}.ct-series-l .ct-bar,.ct-series-l .ct-line,.ct-series-l .ct-point,.ct-series-l .ct-slice-donut{stroke:#86797d}.ct-series-l .ct-area,.ct-series-l .ct-slice-donut-solid,.ct-series-l .ct-slice-pie{fill:#86797d}.ct-series-m .ct-bar,.ct-series-m .ct-line,.ct-series-m .ct-point,.ct-series-m .ct-slice-donut{stroke:#b2c326}.ct-series-m .ct-area,.ct-series-m .ct-slice-donut-solid,.ct-series-m .ct-slice-pie{fill:#b2c326}.ct-series-n .ct-bar,.ct-series-n .ct-line,.ct-series-n .ct-point,.ct-series-n .ct-slice-donut{stroke:#6188e2}.ct-series-n .ct-area,.ct-series-n .ct-slice-donut-solid,.ct-series-n .ct-slice-pie{fill:#6188e2}.ct-series-o .ct-bar,.ct-series-o .ct-line,.ct-series-o .ct-point,.ct-series-o .ct-slice-donut{stroke:#a748ca}.ct-series-o .ct-area,.ct-series-o .ct-slice-donut-solid,.ct-series-o .ct-slice-pie{fill:#a748ca}.ct-square{display:block;position:relative;width:100%}.ct-square:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:100%}.ct-square:after{content:"";display:table;clear:both}.ct-square>svg{display:block;position:absolute;top:0;left:0}.ct-minor-second{display:block;position:relative;width:100%}.ct-minor-second:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:93.75%}.ct-minor-second:after{content:"";display:table;clear:both}.ct-minor-second>svg{display:block;position:absolute;top:0;left:0}.ct-major-second{display:block;position:relative;width:100%}.ct-major-second:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:88.8888888889%}.ct-major-second:after{content:"";display:table;clear:both}.ct-major-second>svg{display:block;position:absolute;top:0;left:0}.ct-minor-third{display:block;position:relative;width:100%}.ct-minor-third:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:83.3333333333%}.ct-minor-third:after{content:"";display:table;clear:both}.ct-minor-third>svg{display:block;position:absolute;top:0;left:0}.ct-major-third{display:block;position:relative;width:100%}.ct-major-third:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:80%}.ct-major-third:after{content:"";display:table;clear:both}.ct-major-third>svg{display:block;position:absolute;top:0;left:0}.ct-perfect-fourth{display:block;position:relative;width:100%}.ct-perfect-fourth:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:75%}.ct-perfect-fourth:after{content:"";display:table;clear:both}.ct-perfect-fourth>svg{display:block;position:absolute;top:0;left:0}.ct-perfect-fifth{display:block;position:relative;width:100%}.ct-perfect-fifth:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:66.6666666667%}.ct-perfect-fifth:after{content:"";display:table;clear:both}.ct-perfect-fifth>svg{display:block;position:absolute;top:0;left:0}.ct-minor-sixth{display:block;position:relative;width:100%}.ct-minor-sixth:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:62.5%}.ct-minor-sixth:after{content:"";display:table;clear:both}.ct-minor-sixth>svg{display:block;position:absolute;top:0;left:0}.ct-golden-section{display:block;position:relative;width:100%}.ct-golden-section:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:61.804697157%}.ct-golden-section:after{content:"";display:table;clear:both}.ct-golden-section>svg{display:block;position:absolute;top:0;left:0}.ct-major-sixth{display:block;position:relative;width:100%}.ct-major-sixth:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:60%}.ct-major-sixth:after{content:"";display:table;clear:both}.ct-major-sixth>svg{display:block;position:absolute;top:0;left:0}.ct-minor-seventh{display:block;position:relative;width:100%}.ct-minor-seventh:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:56.25%}.ct-minor-seventh:after{content:"";display:table;clear:both}.ct-minor-seventh>svg{display:block;position:absolute;top:0;left:0}.ct-major-seventh{display:block;position:relative;width:100%}.ct-major-seventh:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:53.3333333333%}.ct-major-seventh:after{content:"";display:table;clear:both}.ct-major-seventh>svg{display:block;position:absolute;top:0;left:0}.ct-octave{display:block;position:relative;width:100%}.ct-octave:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:50%}.ct-octave:after{content:"";display:table;clear:both}.ct-octave>svg{display:block;position:absolute;top:0;left:0}.ct-major-tenth{display:block;position:relative;width:100%}.ct-major-tenth:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:40%}.ct-major-tenth:after{content:"";display:table;clear:both}.ct-major-tenth>svg{display:block;position:absolute;top:0;left:0}.ct-major-eleventh{display:block;position:relative;width:100%}.ct-major-eleventh:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:37.5%}.ct-major-eleventh:after{content:"";display:table;clear:both}.ct-major-eleventh>svg{display:block;position:absolute;top:0;left:0}.ct-major-twelfth{display:block;position:relative;width:100%}.ct-major-twelfth:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:33.3333333333%}.ct-major-twelfth:after{content:"";display:table;clear:both}.ct-major-twelfth>svg{display:block;position:absolute;top:0;left:0}.ct-double-octave{display:block;position:relative;width:100%}.ct-double-octave:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:25%}.ct-double-octave:after{content:"";display:table;clear:both}.ct-double-octave>svg{display:block;position:absolute;top:0;left:0}.ct-legend{display:flex;margin-top:10px;margin-left:16px;margin-bottom:14x}.ct-legend-item{display:flex;margin-right:15px;line-height:18px}.ct-legend-item i{display:inline-block;width:18px;height:18px;margin-right:5px}.baseline-series .ct-line,.baseline-series .ct-point{stroke:green}.current-series .ct-line,.current-series .ct-point{stroke:blue}.chartist-tooltip{position:absolute;display:inline-block;opacity:0;min-width:5em;padding:.5em;background:#f4c63d;color:#453d3f;font-family:Oxygen,Helvetica,Arial,sans-serif;font-weight:700;text-align:center;pointer-events:none;z-index:1;-webkit-transition:opacity .2s linear;-moz-transition:opacity .2s linear;-o-transition:opacity .2s linear;transition:opacity .2s linear}.chartist-tooltip:before{content:"";position:absolute;top:100%;left:50%;width:0;height:0;margin-left:-15px;border:15px solid transparent;border-top-color:#f4c63d}.chartist-tooltip.tooltip-show{opacity:1}.ct-area,.ct-line{pointer-events:none}.chartist-tooltip{background:#0095d2;color:#fff}.chartist-tooltip:before{border-top-color:#0095d2}.ct-bar{stroke-width:16px}.ct-series-a .ct-bar,.ct-series-a .ct-line,.ct-series-a .ct-point,.ct-series-a .ct-slice-donut{stroke:#82b5fc}.ct-series-a .ct-area,.ct-series-a .ct-slice-donut-solid,.ct-series-a .ct-slice-pie{fill:#468847}.ct-series-b .ct-bar,.ct-series-b .ct-line,.ct-series-b .ct-point,.ct-series-b .ct-slice-donut{stroke:#b2ea94}.ct-series-b .ct-area,.ct-series-b .ct-slice-donut-solid,.ct-series-b .ct-slice-pie{fill:#c09853}.ct-series-c .ct-bar,.ct-series-c .ct-line,.ct-series-c .ct-point,.ct-series-c .ct-slice-donut{stroke:#fec584}.ct-series-c .ct-area,.ct-series-c .ct-slice-donut-solid,.ct-series-c .ct-slice-pie{fill:#b94a48}.ct-series-d .ct-bar,.ct-series-d .ct-line,.ct-series-d .ct-point,.ct-series-d .ct-slice-donut{stroke:#c49ae8}.ct-series-d .ct-area,.ct-series-d .ct-slice-donut-solid,.ct-series-d .ct-slice-pie{fill:#c49ae8}.ct-series-e .ct-bar,.ct-series-e .ct-line,.ct-series-e .ct-point,.ct-series-e .ct-slice-donut{stroke:#ff523e}.ct-series-e .ct-area,.ct-series-e .ct-slice-donut-solid,.ct-series-e .ct-slice-pie{fill:#ff523e}.ct-series-f .ct-bar,.ct-series-f .ct-line,.ct-series-f .ct-point,.ct-series-f .ct-slice-donut{stroke:#c4c4c4}.ct-series-f .ct-area,.ct-series-f .ct-slice-donut-solid,.ct-series-f .ct-slice-pie{fill:#c4c4c4}.ct-series-g .ct-bar,.ct-series-g .ct-line,.ct-series-g .ct-point,.ct-series-g .ct-slice-donut{stroke:#c4c4c4}.ct-series-g .ct-area,.ct-series-g .ct-slice-donut-solid,.ct-series-g .ct-slice-pie{fill:#c4c4c4}.ct-series-h .ct-bar,.ct-series-h .ct-line,.ct-series-h .ct-point,.ct-series-h .ct-slice-donut{stroke:#c4c4c4}.ct-series-h .ct-area,.ct-series-h .ct-slice-donut-solid,.ct-series-h .ct-slice-pie{fill:#c4c4c4}.ct-series-i .ct-bar,.ct-series-i .ct-line,.ct-series-i .ct-point,.ct-series-i .ct-slice-donut{stroke:#EAB839}.ct-series-i .ct-area,.ct-series-i .ct-slice-donut-solid,.ct-series-i .ct-slice-pie{fill:#EAB839}.ct-chart .ct-legend{position:relative;z-index:10;list-style:none;text-align:left;line-height:.8;font-size:.8em}.ct-chart .ct-legend li{padding-left:23px;margin-right:10px;margin-bottom:3px;cursor:pointer}.ct-chart .ct-legend li:before{width:12px;height:12px;position:absolute;left:0;content:"";border:3px solid transparent;border-radius:2px}.ct-chart .ct-legend li .inactive:before{background:0 0}.ct-chart .ct-legend li:first-child::before{background-color:#468847}.ct-chart .ct-legend li:nth-child(2)::before{background-color:#c09853}.ct-chart .ct-legend li:nth-child(3)::before{background-color:#b94a48}.ct-chart .ct-legend .ct-legend-inside{position:absolute;top:0;right:0}.ct-chart g:not(.ct-grids):not(.ct-labels) g:first-child .ct-line,.ct-chart g:not(.ct-grids):not(.ct-labels) g:first-child .ct-point{stroke:#468847}.ct-chart g:not(.ct-grids):not(.ct-labels) g:nth-child(2) .ct-line,.ct-chart g:not(.ct-grids):not(.ct-labels) g:nth-child(2) .ct-point{stroke:#c09853}.ct-chart g:not(.ct-grids):not(.ct-labels) g:nth-child(3) .ct-line,.ct-chart g:not(.ct-grids):not(.ct-labels) g:nth-child(3) .ct-point{stroke:#b94a48}.filmstrip{padding-bottom:20px}.videoframe{vertical-align:top;display:inline-block;padding:4px;background-color:#fff;border:1px solid #ddd;border-radius:4px;width:100%}.videoframe.blue{border:2px solid #0095d2}.videoframetime{text-align:center;display:block}.videoframetext{text-align:left;display:block;line-height:1.2em;font-size:.8em;white-space:nowrap;margin-bottom:.2em}

package/lib/plugins/html/defaultConfig.js

@@ -1,6 +1,7 @@
 export default {
   html: {
     showAllWaterfallSummary: false,
+    darkMode: false,
     pageSummaryMetrics: [
       'transferSize.total',
       'requests.total',

package/lib/plugins/html/src/sass/dark/components/buttons.scss

@@ -0,0 +1,57 @@
+.button {
+ display: inline-block;
+ height: 38px;
+ padding: 0 30px;
+ margin-bottom: 1rem;
+ color: $color--white;
+ text-align: center;
+ font-size: 80%;
+ font-weight: 600;
+ line-height: 38px;
+ letter-spacing: 0.1rem;
+ text-transform: uppercase;
+ text-decoration: none;
+ white-space: nowrap;
+ background-color: transparent;
+ border-radius: 4px;
+ border: 1px solid $color--grey;
+ cursor: pointer;
+
+ &:hover,
+ &:focus,
+ &:active {
+  color: $color--white;
+  border-color: darken($color--grey, 20%);
+  outline: 0;
+ }
+}
+
+.button--primary {
+ color: $color--black;
+ background-color: $color--blue;
+ border-color: $color--blue;
+
+ &:hover,
+ &:focus,
+ &:active {
+  color: $color--black;
+  background-color: darken($color--blue, 4%);
+  border-color: darken($color--blue, 4%);
+ }
+}
+
+.button-download {
+ color: $color--black;
+ background-color: #ec971f;
+ border-color: #eb9316;
+ padding: 0 10px;
+ margin-right: 1rem;
+
+ &:hover,
+ &:focus,
+ &:active {
+  color: $color--black;
+  background-color: darken(#ec971f, 4%);
+  border-color: darken(#eb9316, 4%);
+ }
+}

package/lib/plugins/html/src/sass/dark/components/groupitem.scss

@@ -0,0 +1,24 @@
+.group-item {
+  position: relative;
+  display: block;
+  padding: 10px 15px;
+  margin-bottom: -1px;
+  background-color: #111;
+  border: 1px solid #333;
+  font-weight: bold;
+}
+.group-item.active {
+  z-index: 2;
+  color: #fff;
+  background-color: #337ab7;
+  border-color: #337ab7;
+}
+.group-item:first-child {
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+}
+.group-item:last-child {
+  margin-bottom: 0;
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 4px;
+}

package/lib/plugins/html/src/sass/dark/components/sortable.scss

@@ -0,0 +1,21 @@
+//
+// SORTABLE
+// ===============
+//
+
+table[data-sortable] th {
+  &[data-sorted="true"] {
+    color: $color--white;
+    background: lighten($color--blue, 10%);
+    // background: #215169;
+    // background: #d9edf7;
+    border-bottom-color: #215169;
+  }
+  &:not([data-sorted="false"]) {
+    cursor: pointer;
+    color: $color--white;
+    background: $color--blue;
+    // background: #215169;
+    text-decoration: underline;
+  }
+}

package/lib/plugins/html/src/sass/dark/components/summarybox.scss

@@ -0,0 +1,51 @@
+//
+// SUMMARY BOX
+// ===============
+// Boxes on the start summary page
+//
+
+.summarybox {
+  padding: 15px;
+  margin-bottom: 20px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+
+  &.ok {
+    color: #bffdc0;
+    background-color: #315523;
+    border-color: #43810e;
+  }
+
+  &.warning {
+    color: #fad79b;
+    background-color: #816e07;
+    border-color: #b18633;
+  }
+
+  &.error {
+    color: #ffacab;
+    background-color: #7b1212;
+    border-color: #a31c30;
+  }
+
+  &.info {
+    background-color: #1d495f;
+    border-color: #468a98;
+    color: #94dafd;
+  }
+}
+
+a.summaries {
+  text-decoration: none;
+}
+
+.summarynumber {
+  font-size: 2rem;
+  line-height: 1;
+  font-weight: bold;
+}
+
+.summarysmall {
+  font-size: 1rem;
+  line-height: 1;
+}

package/lib/plugins/html/src/sass/dark/components/tabs.scss

@@ -0,0 +1,69 @@
+/*
+Thanks Oliver Knoblich
+http://codepen.io/oknoblich/pen/tfjFl
+*/
+
+*,
+*:before,
+*:after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+section {
+ display: block;
+ padding: 20px 0 0;
+ border-top: 1px solid #777;
+}
+
+#tabs {
+ a {
+  display: inline-block;
+  margin: 0 0 -1px;
+  padding: 15px 22px;
+  font-weight: 600;
+  text-align: center;
+  color: #ddd;
+  border: 1px solid transparent;
+  text-decoration: none;
+  text-transform: uppercase;
+ }
+
+ a:before {
+  //font-family: fontawesome;
+  font-weight: normal;
+  // margin-right: 10px;
+ }
+
+ a:hover {
+  color: #fff;
+  cursor: pointer;
+ }
+
+ a:target:focus {
+  outline: none;
+ }
+
+ a[selected] {
+  color: $color--white;
+  border: 1px solid #777;
+  border-top: 2px solid $color--blue;
+  border-bottom: 1px solid $color--black;
+ }
+}
+
+@media screen and (max-width: 650px) {
+ #tabs {
+  a:before {
+   margin: 0;
+   font-size: 18px;
+  }
+ }
+}
+
+@media screen and (max-width: 400px) {
+ #tabs a {
+  padding: 13px;
+ }
+}