Skip to content

Commit

Permalink
Release v2.10.1
Browse files Browse the repository at this point in the history
  • Loading branch information
@micmro
micmro committed Jun 10, 2021
1 parent 8bed1fe commit 214be0f
Show file tree
Hide file tree
Showing 5 changed files with 72 additions and 39 deletions.
4 changes: 2 additions & 2 deletions perf-cascade-file-reader.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/*! github.com/micmro/PerfCascade Version:2.10.0 (09/06/2021) */
/*! github.com/micmro/PerfCascade Version:2.10.1 (09/06/2021) */
/*
Copyright (c) 2013 Gildas Lormeau. All rights reserved.
Expand Down Expand Up @@ -3122,7 +3122,7 @@
env.Inflater = env._jzlib_Inflater = Inflater;
})(this);

/*! github.com/micmro/PerfCascade Version:2.10.0 (09/06/2021) */
/*! github.com/micmro/PerfCascade Version:2.10.1 (09/06/2021) */

(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.perfCascadeFileReader = f()}})(function(){var define,module,exports;return (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
"use strict";
Expand Down
2 changes: 1 addition & 1 deletion perf-cascade-file-reader.min.js
View file

Large diffs are not rendered by default.

80 changes: 49 additions & 31 deletions perf-cascade.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/*! github.com/micmro/PerfCascade Version:2.10.0 (09/06/2021) */
/*! github.com/micmro/PerfCascade Version:2.10.1 (09/06/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;}
Expand All @@ -11,9 +11,9 @@
.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 .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;}
Expand All @@ -37,7 +37,7 @@

.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:focus .even {fill: #000; opacity: 0.2;}

.row-item .rect-holder text {fill: #aaa}
.row-item.status0 .even,
Expand All @@ -49,12 +49,25 @@
.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,
Expand All @@ -63,14 +76,23 @@
.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: rgba(255,255,255, 0.9); border: solid 1px #f0f0f0; word-break: break-all; overflow-wrap: break-word; transition: opacity 300ms;}
.tooltip-payload {position: absolute; top:0; left:0; padding: 0.25em; font-size: 10px; display: inline-block; background: rgba(255,255,255, 0.9); border: solid 1px #f0f0f0; word-break: break-all; overflow-wrap: break-word; transition: opacity 300ms;}
.tooltip-payload.no-anim {transition: none;}

/** overlay animation settings **/
Expand All @@ -81,7 +103,7 @@
.time-scale text {transition:transform 60ms;}
.water-fall-chart.closing {transition-delay: 60ms;}

.labels { overflow: hidden;}
.labels {overflow: hidden;}

/*block colours for MIME types*/
.block-css {fill: #a6d18f;}
Expand Down Expand Up @@ -149,9 +171,9 @@
.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: #fff; color: #666;}
.info-overlay-holder body .wrapper { height: 450px; width: 100%; overflow: scroll;}
.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: #fff; color: #666;}
.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);}
Expand All @@ -166,22 +188,22 @@
.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 {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: #e0e0e0;}
.info-overlay-holder button.copy-tab-data:focus,
.info-overlay-holder button.copy-tab-data:hover { background: #ccc; }
.info-overlay-holder button.copy-tab-data:hover {background: #ccc;}

/* 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 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 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;}
Expand All @@ -194,26 +216,22 @@
.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 {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 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; }
.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: #666;
}
.icon {fill: #666;}

.icon-4xx,
.icon-5xx,
.icon-no-cache,
.icon-no-gzip,
.icon-warning {
fill: #b55;
}
.icon-warning {fill: #b55;}
21 changes: 18 additions & 3 deletions perf-cascade.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/*! github.com/micmro/PerfCascade Version:2.10.0 (09/06/2021) */
/*! github.com/micmro/PerfCascade Version:2.10.1 (09/06/2021) */

(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.perfCascade = f()}})(function(){var define,module,exports;return (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
"use strict";
Expand Down Expand Up @@ -1099,6 +1099,8 @@ function parseGeneralDetails(entry, startRelative, requestID) {
["Expires", entry._expires],
["Cache Time", parse_1.parseAndFormat(entry._cache_time, parse_1.parsePositive, parse_1.formatSeconds)],
["CDN Provider", entry._cdn_provider],
["Render blocking", entry._renderBlocking],
["Is Largest Contentful Paint", entry._isLCP ? "yes" : undefined],
byteSizeProperty("ObjectSize", entry._objectSize),
byteSizeProperty("Bytes In (downloaded)", entry._bytesIn),
byteSizeProperty("Bytes Out (uploaded)", entry._bytesOut),
Expand Down Expand Up @@ -1735,11 +1737,13 @@ var getTimePair = function (key, harEntry, collect, startRelative) {
var createResponseDetails = function (entry, indicators) {
var requestType = helpers_1.mimeToRequestType(entry.response.content.mimeType);
var statusClean = parse_1.toInt(entry.response.status) || 0;
var renderBlockingStatus = entry._renderBlocking || "";
var largestContentfulPaintStatus = entry._isLCP || false;
return {
icon: helpers_1.makeMimeTypeIcon(statusClean, entry.response.statusText, requestType, entry.response.redirectURL),
indicators: indicators,
requestType: requestType,
rowClass: helpers_1.makeRowCssClasses(statusClean),
rowClass: helpers_1.makeRowCssClasses(statusClean, renderBlockingStatus, largestContentfulPaintStatus),
statusCode: statusClean,
};
};
Expand Down Expand Up @@ -1850,9 +1854,11 @@ exports.createWaterfallEntryTiming = createWaterfallEntryTiming;
/**
* Creates the css classes for a row based on it's status code
* @param {number} status - HTTP status code
* @param {string} renderBlockingStatus - Render blocking status (Chrome only)
* @param {boolean} largestContentfulPaintStatus -if largest contentful paint
* @returns string - concatinated css class names
*/
function makeRowCssClasses(status) {
function makeRowCssClasses(status, renderBlockingStatus, largestContentfulPaintStatus) {
var classes = ["row-item"];
if (misc_1.isInStatusCodeRange(status, 500, 599)) {
classes.push("status5xx");
Expand All @@ -1869,6 +1875,15 @@ function makeRowCssClasses(status) {
// eg connection refused, or connection timeout etc then the http status code defaults to 0
classes.push("status0");
}
if (largestContentfulPaintStatus === true) {
classes.push("largestContentfulPaint");
}
if (renderBlockingStatus === "potentially_blocking") {
classes.push("potentiallyRenderBlocking");
}
else if (renderBlockingStatus === "blocking") {
classes.push("renderBlocking");
}
return classes.join(" ");
}
exports.makeRowCssClasses = makeRowCssClasses;
Expand Down
4 changes: 2 additions & 2 deletions perf-cascade.min.js
View file

Large diffs are not rendered by default.

0 comments on commit 214be0f

Please sign in to comment.