sitespeed.io 32.2.0 → 33.1.0

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

@@ -0,0 +1,240 @@
+/*! 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: 0.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: 0.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: 0.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: 0.9;}
+
+.time-scale line {stroke:#0cc; stroke-width:1;}
+.time-scale line.sub-second-line {stroke: #ccc; opacity: 0.75; stroke-width:0.50;}
+.time-scale text {font-weight:bold; fill: #ddd;}
+
+.row-item {cursor: pointer;}
+.row-item .even {fill: #222; opacity: 1;}
+.row-item .odd {fill: #333; opacity: 1;}
+.row-item:hover .odd,
+.row-item:hover .even {fill: #444; opacity: 1;}
+
+.row-item:focus {outline: solid 1.5px #aaa; outline-offset: -1.5px}
+.row-item:focus .odd,
+.row-item:focus .even {fill: #000; opacity: 0.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.status0 .even,
+.row-item.status0 .odd,
+.row-item.status5xx .even,
+.row-item.status5xx .odd,
+.row-item.status4xx .even,
+.row-item.status4xx .odd,
+.row-item.renderBlocking .even,
+.row-item.renderBlocking .odd,
+.row-item.potentiallyRenderBlocking .even,
+.row-item.potentiallyRenderBlocking .odd,
+.row-item.largestContentfulPaint .even,
+.row-item.largestContentfulPaint .odd,
+.row-item.status3xx .even,
+.row-item.status3xx .odd {opacity: 0.3;}
+.row-item.status0:hover .even,
+.row-item.status0:hover .odd,
+.row-item.status5xx:hover .even,
+.row-item.status5xx:hover .odd,
+.row-item.status4xx:hover .even,
+.row-item.status4xx:hover .odd,
+.row-item.renderBlocking:hover .even,
+.row-item.renderBlocking:hover .odd,
+.row-item.potentiallyRenderBlocking:hover .even,
+.row-item.potentiallyRenderBlocking:hover .odd,
+.row-item.largestContentfulPaint:hover .even,
+.row-item.largestContentfulPaint:hover .odd,
+.row-item.status3xx:hover .even,
+.row-item.status3xx:hover .odd {opacity: 0.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: 0.25em; font-size: 10px; display: inline-block; background: #111111dd; border: solid 1px #555; word-break: break-all; overflow-wrap: break-word; transition: opacity 300ms;}
+.tooltip-payload.no-anim {transition: none;}
+
+/** overlay animation settings **/
+.water-fall-chart .line-label-holder,
+.row-item,
+.water-fall-chart .line-holder line,
+.time-scale line,
+.time-scale text {transition:transform 60ms;}
+.water-fall-chart.closing {transition-delay: 60ms;}
+
+.labels {overflow: hidden;}
+
+/*block colours for MIME types*/
+.block-css {fill: #a6d18f;}
+.block-iframe,
+.block-html,
+.block-svg,
+.block-internal {fill: #82a8de;}
+.block-img,
+.block-image {fill: #b394cf;}
+.block-script,
+.block-javascript,
+.block-js {fill: #e0b483;}
+.block-link {fill: #89afe6;}
+.block-swf,
+.block-flash {fill: #42aab1;}
+.block-font {fill: #e15d4e;}
+.block-xmlhttprequest,
+.block-ajax {fill: #f00;} /*remove?*/
+.block-plain,
+.block-other {fill: #b3b3b3;}
+
+/*block colours for Timing*/
+.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 SVG - wrapper */
+.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 SVG - timings tab */
+.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;}
+
+/* Info overlay HTML - types */
+.type-css {background: #406B29;}/*a6d18f - 40%*/
+.type-iframe,
+.type-html,
+.type-svg,
+.type-internal {background: #1C4278;} /*82a8de - 40%*/
+.type-img,
+.type-image {background: #4D2E69;} /*b394cf - 40%*/
+.type-script,
+.type-javascript,
+.type-js {background: #7A4E1D;} /*e0b483 - 40%*/
+.type-link {background: #89afe6;} /*89afe6 - 40%*/
+.type-swf,
+.type-flash {background: #234980;} /*#42aab1 - 40%*/
+.type-font {background: #AE2A1B;} /*#e15d4e - 40%*/
+.type-xmlhttprequest,
+.type-ajax {background: #CC0000;} /* f00 40%*/
+.type-plain,
+.type-other {background: #808080;} /*#b3b3b3 - 40%*/
+
+/* Info overlay HTML - base */
+.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: $color--black; color: $color--white;}
+.info-overlay-holder body .wrapper {height: 450px; width: 100%; overflow: scroll;}
+
+/* Info overlay HTML - header */
+.info-overlay-holder header {position: relative; box-shadow: 0px 0px 2px 2px rgba(0,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:hover,
+.info-overlay-holder header a:focus {text-decoration: underline;}
+.info-overlay-holder .requestID {font-weight: bold;}
+.info-overlay-holder h3,
+.info-overlay-holder h3 a {font-size: 1.1em; padding: 1em; margin:0; font-weight: normal; 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: transparent; outline:0; border:0; border-bottom: solid 2px transparent; padding: 0.5em 1em; margin:0 0.25em;}
+.info-overlay-holder li:first-child button {margin-left: 1em;}
+.info-overlay-holder button:focus,
+.info-overlay-holder button.active:focus,
+.info-overlay-holder button:hover {border-color: rgba(255,255,255, 0.6);}
+.info-overlay-holder button.active {border-color: #fff; cursor: default;}
+.info-overlay-holder button.active:focus {border-color: rgba(255,255,255, 0.8);}
+.info-overlay-holder button.copy-tab-data {position: absolute; top:0.5em; right: 0.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: $color--white}
+
+/* Info overlay HTML - content */
+.info-overlay-holder dt {float: left; clear: both; margin-top: 0.5em; width: 25%; text-align: right; font-weight: bold;}
+.info-overlay-holder dd {float: left; width:73%; margin: 0.5em 0 0 2%; padding: 0 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:0.5em 0 0; padding: 0.5em 0 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;}
+
+/** Legend */
+.resource-legend {margin: 0; padding: 0; font-size: 0.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 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;}

package/lib/plugins/html/src/sass/dark/foundations/tables.scss

@@ -0,0 +1,161 @@
+//
+// TABLES
+// ===============
+//
+
+table {
+  width: 100%;
+  margin-bottom: 2.5rem;
+  border-collapse: separate;
+  border-spacing: 1px;
+  background-color: #222;
+}
+
+th,
+td {
+  padding: 4px 1rem;
+  vertical-align: top;
+  text-align: left;
+}
+
+th:first-child,
+td:first-child {
+  padding-left: 1rem;
+}
+
+th:last-child,
+td:last-child {
+  padding-right: 1rem;
+}
+
+tr {
+  &:nth-child(odd) {
+    background: #333;
+    // background: lighten($color--black, 10%);
+  }
+  &:nth-child(even) {
+    background: $color--black;
+  }
+  &.odd {
+    background: #333;
+    // background: lighten($color--black, 10%);
+  }
+  &.even {
+    background: $color--black;
+  }
+}
+
+th {
+  background: darken($color--blue, 20%);
+}
+
+td.number, th.number {
+  text-align: right;
+}
+
+td.right {
+  text-align: right;
+}
+
+/* Hack for long URLs in tables, please help us with a better way to do this! */
+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: bold;
+  background: #004d6c;
+}
+
+/** Responsive tables, wrap them in a div
+* We use Chris Coyiers (old) hide the table
+* solution https://css-tricks.com/responsive-data-tables/
+*/
+@media only screen and (max-width: 800px) {
+  /* Force table to not be like tables anymore */
+  .responsive table,
+  .responsive thead,
+  .responsive tbody,
+  .responsive th,
+  .responsive td,
+  .responsive tr {
+    display: block;
+  }
+
+  /* Hide/show in coach offending */
+  .responsive tr.u-hideable {
+    display: none;
+  }
+
+  /* Hide table headers (but not display: none;, for accessibility) */
+  .responsive thead tr {
+    position: absolute;
+    top: -9999px;
+    left: -9999px;
+  }
+
+  .responsive tr {
+    border: 2px solid $color--grey;
+  }
+
+  .responsive td {
+    /* Behave  like a "row" */
+    border: none;
+    border-bottom: 1px solid $color--grey;
+    position: relative;
+    padding-left: 50%;
+    white-space: normal;
+    text-align: left;
+    max-width: none;
+  }
+
+  .responsive td:before {
+    /* Now like a table header */
+    position: absolute;
+    /* Top/left values mimic padding */
+    top: 6px;
+    left: 6px;
+    width: 30%;
+    padding-right: 10px;
+    white-space: nowrap;
+    text-align: left;
+    font-weight: bold;
+  }
+
+  /*
+  Label the data
+  */
+  .responsive td:before {
+    content: attr(data-title);
+  }
+
+  .responsive td.url.offendingurl {
+    word-break: break-all;
+    padding-left: 2px;
+  }
+
+  .hidden-small {
+    display: none;
+  }
+}

package/lib/plugins/html/src/sass/dark/foundations/typography.scss

@@ -0,0 +1,109 @@
+//
+// TYPOGRAPHY
+// ===============
+//
+
+//
+// BASE STYLES
+//
+html {
+ font-size: $base--font-size;
+}
+
+body {
+ font-size: 1em;
+ line-height: $base--line-height;
+ font-weight: $base--font-weight;
+ font-family: $base--font-family;
+ color: $color--white;
+ background-color: $color--black;
+}
+
+//
+// HEADINGS
+//
+
+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;
+}
+
+//
+// LINKS
+//
+
+a {
+ color: $color--blue;
+}
+
+a:hover {
+ color: darken($color--blue, 10%);
+}
+
+pre,
+blockquote,
+dl,
+p {
+ margin-bottom: 2.5rem;
+}
+
+//
+// PRE-FORMATTED TEXT / CODE BLOCKS
+//
+code {
+ padding: 0.2rem 0.5rem;
+ margin: 0 0.2rem;
+ font-size: 0.9rem;
+ white-space: nowrap;
+ background: darken($color--black, 2);
+ border: 1px solid #444;
+ border-radius: 4px;
+}
+
+pre > code {
+ display: block;
+ padding: 1rem 1.5rem;
+ white-space: pre;
+ overflow: auto;
+}

package/lib/plugins/html/src/sass/dark/utilities/settings.scss

@@ -0,0 +1,41 @@
+//
+// SETTINGS
+// ========
+// Specific settings which can be changed to modify the basic look and
+// feel of the project with little effort.
+//
+// 1. COLOURS
+// 2. TYPEFACES
+// 3. BASE STYLES
+//
+
+//
+// 1. COLOURS
+//
+$color--blue: #0095d2;
+$color--white: #ffffff;
+$color--grey: #e1e1e1;
+$color--black: #222222;
+
+//
+// 2. TYPEFACES
+//
+
+$font--versions: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica,
+ Arial, sans-serif;
+
+$font--weight--light: 300;
+$font--weight--regular: 400;
+$font--weight--heavy: 800;
+
+//
+// 3. BASE STYLES
+//
+
+$base--font-family: $font--versions;
+$base--font-weight: $font--weight--regular;
+$base--font-color: $color--white;
+$base--font-size: 100%;
+$base--line-height: 1.6;
+$base--spacing: 20px;
+$base--body-bg: $color--black;

package/lib/plugins/html/src/sass/light/components/chartist-plugin-tooltip.scss

@@ -0,0 +1,34 @@
+.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; }
+
+/*# sourceMappingURL=chartist-plugin-tooltip.css.map */