Skip to content

Commit

Permalink
move CRC.render() to a static method
Browse files Browse the repository at this point in the history 
fix closure issues
  • Loading branch information
@brendankenny
brendankenny committed May 13, 2017
1 parent 66941e5 commit 1797d9c
Show file tree
Hide file tree
Showing 6 changed files with 61 additions and 158 deletions.
95 changes: 1 addition & 94 deletions lighthouse-cli/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,6 @@ brace-expansion@^1.1.7:
balanced-match "^0.4.1"
concat-map "0.0.1"

browser-stdout@1.3.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/browser-stdout/-/browser-stdout-1.3.0.tgz#f351d32969d32fa5d7a5567154263d928ae3bd1f"

clang-format@^1.0.50:
version "1.0.50"
resolved "https://registry.yarnpkg.com/clang-format/-/clang-format-1.0.50.tgz#b40926fd5c8573f7d37ed074a32da9a370dbdbcf"
Expand All @@ -33,35 +29,15 @@ clang-format@^1.0.50:
glob "^7.0.0"
resolve "^1.1.6"

commander@2.9.0:
version "2.9.0"
resolved "https://registry.yarnpkg.com/commander/-/commander-2.9.0.tgz#9c99094176e12240cb22d6c5146098400fe0f7d4"
dependencies:
graceful-readlink ">= 1.0.0"

concat-map@0.0.1:
version "0.0.1"
resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"

debug@2.6.0:
version "2.6.0"
resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.0.tgz#bc596bcabe7617f11d9fa15361eded5608b8499b"
dependencies:
ms "0.7.2"

diff@3.2.0:
version "3.2.0"
resolved "https://registry.yarnpkg.com/diff/-/diff-3.2.0.tgz#c9ce393a4b7cbd0b058a725c93df299027868ff9"

escape-string-regexp@1.0.5:
version "1.0.5"
resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"

fs.realpath@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"

glob@7.1.1, glob@^7.0.0:
glob@^7.0.0:
version "7.1.1"
resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.1.tgz#805211df04faaf1c63a3600306cdf5ade50b2ec8"
dependencies:
Expand All @@ -72,18 +48,6 @@ glob@7.1.1, glob@^7.0.0:
once "^1.3.0"
path-is-absolute "^1.0.0"

"graceful-readlink@>= 1.0.0":
version "1.0.1"
resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"

growl@1.9.2:
version "1.9.2"
resolved "https://registry.yarnpkg.com/growl/-/growl-1.9.2.tgz#0ea7743715db8d8de2c5ede1775e1b45ac85c02f"

has-flag@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"

inflight@^1.0.4:
version "1.0.6"
resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
Expand All @@ -95,57 +59,6 @@ inherits@2:
version "2.0.3"
resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"

json3@3.3.2:
version "3.3.2"
resolved "https://registry.yarnpkg.com/json3/-/json3-3.3.2.tgz#3c0434743df93e2f5c42aee7b19bcb483575f4e1"

lodash._baseassign@^3.0.0:
version "3.2.0"
resolved "https://registry.yarnpkg.com/lodash._baseassign/-/lodash._baseassign-3.2.0.tgz#8c38a099500f215ad09e59f1722fd0c52bfe0a4e"
dependencies:
lodash._basecopy "^3.0.0"
lodash.keys "^3.0.0"

lodash._basecopy@^3.0.0:
version "3.0.1"
resolved "https://registry.yarnpkg.com/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz#8da0e6a876cf344c0ad8a54882111dd3c5c7ca36"

lodash._basecreate@^3.0.0:
version "3.0.3"
resolved "https://registry.yarnpkg.com/lodash._basecreate/-/lodash._basecreate-3.0.3.tgz#1bc661614daa7fc311b7d03bf16806a0213cf821"

lodash._getnative@^3.0.0:
version "3.9.1"
resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5"

lodash._isiterateecall@^3.0.0:
version "3.0.9"
resolved "https://registry.yarnpkg.com/lodash._isiterateecall/-/lodash._isiterateecall-3.0.9.tgz#5203ad7ba425fae842460e696db9cf3e6aac057c"

lodash.create@3.1.1:
version "3.1.1"
resolved "https://registry.yarnpkg.com/lodash.create/-/lodash.create-3.1.1.tgz#d7f2849f0dbda7e04682bb8cd72ab022461debe7"
dependencies:
lodash._baseassign "^3.0.0"
lodash._basecreate "^3.0.0"
lodash._isiterateecall "^3.0.0"

lodash.isarguments@^3.0.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a"

lodash.isarray@^3.0.0:
version "3.0.4"
resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55"

lodash.keys@^3.0.0:
version "3.1.2"
resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-3.1.2.tgz#4dbc0472b156be50a0b286855d1bd0b0c656098a"
dependencies:
lodash._getnative "^3.0.0"
lodash.isarguments "^3.0.0"
lodash.isarray "^3.0.0"

minimatch@^3.0.2:
version "3.0.4"
resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
Expand Down Expand Up @@ -202,12 +115,6 @@ resolve@^1.1.6:
dependencies:
path-parse "^1.0.5"

supports-color@3.1.2:
version "3.1.2"
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.1.2.tgz#72a262894d9d408b956ca05ff37b2ed8a6e2a2d5"
dependencies:
has-flag "^1.0.0"

typescript@2.2.1:
version "2.2.1"
resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.2.1.tgz#4862b662b988a4c8ff691cc7969622d24db76ae9"
Expand Down
6 changes: 3 additions & 3 deletions lighthouse-core/report/v2/renderer/category-renderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -175,11 +175,11 @@ class CategoryRenderer {
* Renders the group container for a group of audits. Individual audit elements can be added
* directly to the returned element.
* @param {!ReportRenderer.GroupJSON} group
* @return {!Element}
* @return {!HTMLDetailsElement}
*/
_renderAuditGroup(group) {
const auditGroupElem = this._dom.createElement('details',
'lh-audit-group lh-expandable-details');
const auditGroupElem = /** @type {!HTMLDetailsElement} */ (this._dom.createElement('details',
'lh-audit-group lh-expandable-details'));
const auditGroupHeader = this._dom.createElement('div',
'lh-audit-group__header lh-expandable-details__header');
auditGroupHeader.textContent = group.title;
Expand Down
100 changes: 48 additions & 52 deletions lighthouse-core/report/v2/renderer/crc-details-renderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,26 +24,12 @@
/* globals self Util */

class CriticalRequestChainRenderer {

/**
* @param {!DOM} dom
* @param {!Node} templateContext
*/
constructor(dom, templateContext) {
/** @private {!DOM} */
this._dom = dom;
/** @private {!DocumentFragment} */
this._tmpl = this._dom.cloneTemplate('#tmpl-lh-crc', templateContext);
/** @private {!CriticalRequestChainRenderer.CRCDetailsJSON} */
this._details; // eslint-disable-line no-unused-expressions
}

/**
* Create render context for critical-request-chain tree display.
* @param {!Object<string, !CriticalRequestChainRenderer.CRCNode>} tree
* @return {{tree: !Object<string, !CriticalRequestChainRenderer.CRCNode>, startTime: number, transferSize: number}}
*/
initTree(tree) {
static initTree(tree) {
let startTime = 0;
const rootNodes = Object.keys(tree);
if (rootNodes.length > 0) {
Expand All @@ -67,7 +53,7 @@ class CriticalRequestChainRenderer {
* @param {boolean=} parentIsLastChild
* @return {!CriticalRequestChainRenderer.CRCSegment}
*/
createSegment(parent, id, startTime, transferSize, treeMarkers, parentIsLastChild) {
static createSegment(parent, id, startTime, transferSize, treeMarkers, parentIsLastChild) {
const node = parent[id];
const siblings = Object.keys(parent);
const isLastChild = siblings.indexOf(id) === (siblings.length - 1);
Expand All @@ -93,54 +79,57 @@ class CriticalRequestChainRenderer {

/**
* Creates the DOM for a tree segment.
* @param {!DOM} dom
* @param {!DocumentFragment} tmpl
* @param {!CriticalRequestChainRenderer.CRCSegment} segment
* @param {!CriticalRequestChainRenderer.CRCDetailsJSON} details
* @return {!Node}
*/
createChainNode(segment) {
const chainsEl = this._dom.cloneTemplate('#tmpl-lh-crc__chains', this._tmpl);
static createChainNode(dom, tmpl, segment, details) {
const chainsEl = dom.cloneTemplate('#tmpl-lh-crc__chains', tmpl);

// Hovering over request shows full URL.
this._dom.find('.crc-node', chainsEl).setAttribute('title', segment.node.request.url);
dom.find('.crc-node', chainsEl).setAttribute('title', segment.node.request.url);

const treeMarkeEl = this._dom.find('.crc-node__tree-marker', chainsEl);
const treeMarkeEl = dom.find('.crc-node__tree-marker', chainsEl);

// Construct lines and add spacers for sub requests.
segment.treeMarkers.forEach(separator => {
if (separator) {
treeMarkeEl.appendChild(this._dom.createElement('span', 'tree-marker vert'));
treeMarkeEl.appendChild(this._dom.createElement('span', 'tree-marker'));
treeMarkeEl.appendChild(dom.createElement('span', 'tree-marker vert'));
treeMarkeEl.appendChild(dom.createElement('span', 'tree-marker'));
} else {
treeMarkeEl.appendChild(this._dom.createElement('span', 'tree-marker'));
treeMarkeEl.appendChild(this._dom.createElement('span', 'tree-marker'));
treeMarkeEl.appendChild(dom.createElement('span', 'tree-marker'));
treeMarkeEl.appendChild(dom.createElement('span', 'tree-marker'));
}
});

if (segment.isLastChild) {
treeMarkeEl.appendChild(this._dom.createElement('span', 'tree-marker up-right'));
treeMarkeEl.appendChild(this._dom.createElement('span', 'tree-marker right'));
treeMarkeEl.appendChild(dom.createElement('span', 'tree-marker up-right'));
treeMarkeEl.appendChild(dom.createElement('span', 'tree-marker right'));
} else {
treeMarkeEl.appendChild(this._dom.createElement('span', 'tree-marker vert-right'));
treeMarkeEl.appendChild(this._dom.createElement('span', 'tree-marker right'));
treeMarkeEl.appendChild(dom.createElement('span', 'tree-marker vert-right'));
treeMarkeEl.appendChild(dom.createElement('span', 'tree-marker right'));
}

if (segment.hasChildren) {
treeMarkeEl.appendChild(this._dom.createElement('span', 'tree-marker horiz-down'));
treeMarkeEl.appendChild(dom.createElement('span', 'tree-marker horiz-down'));
} else {
treeMarkeEl.appendChild(this._dom.createElement('span', 'tree-marker right'));
treeMarkeEl.appendChild(dom.createElement('span', 'tree-marker right'));
}

// Fill in url, host, and request size information.
const {file, hostname} = Util.parseURL(segment.node.request.url);
const treevalEl = this._dom.find('.crc-node__tree-value', chainsEl);
this._dom.find('.crc-node__tree-file', treevalEl).textContent = `${file}`;
this._dom.find('.crc-node__tree-hostname', treevalEl).textContent = `(${hostname})`;
const treevalEl = dom.find('.crc-node__tree-value', chainsEl);
dom.find('.crc-node__tree-file', treevalEl).textContent = `${file}`;
dom.find('.crc-node__tree-hostname', treevalEl).textContent = `(${hostname})`;

if (!segment.hasChildren) {
const span = this._dom.createElement('span', 'crc-node__chain-duration');
const span = dom.createElement('span', 'crc-node__chain-duration');
span.textContent = ' - ' + Util.chainDuration(
segment.node.request.startTime, segment.node.request.endTime) + 'ms, ';
const span2 = this._dom.createElement('span', 'crc-node__chain-duration');
span2.textContent = Util.formateBytesToKB(this._details.longestChain.transferSize) + 'KB';
const span2 = dom.createElement('span', 'crc-node__chain-duration');
span2.textContent = Util.formateBytesToKB(details.longestChain.transferSize) + 'KB';

treevalEl.appendChild(span);
treevalEl.appendChild(span2);
Expand All @@ -151,45 +140,52 @@ class CriticalRequestChainRenderer {

/**
* Recursively builds a tree from segments.
* @param {!DOM} dom
* @param {!DocumentFragment} tmpl
* @param {!CriticalRequestChainRenderer.CRCSegment} segment
* @param {!Element} detailsEl Parent details element.
* @param {!CriticalRequestChainRenderer.CRCDetailsJSON} details
*/
buildTree(segment, detailsEl) {
detailsEl.appendChild(this.createChainNode(segment));
static buildTree(dom, tmpl, segment, detailsEl, details) {
detailsEl.appendChild(CriticalRequestChainRenderer.createChainNode(dom, tmpl, segment,
details));

for (const key of Object.keys(segment.node.children)) {
const childSegment = this.createSegment(segment.node.children, key,
const childSegment = CriticalRequestChainRenderer.createSegment(segment.node.children, key,
segment.startTime, segment.transferSize, segment.treeMarkers, segment.isLastChild);
this.buildTree(childSegment, detailsEl);
CriticalRequestChainRenderer.buildTree(dom, tmpl, childSegment, detailsEl, details);
}
}

/**
* @param {!DOM} dom
* @param {!Node} templateContext
* @param {!CriticalRequestChainRenderer.CRCDetailsJSON} details
* @return {!Node}
*/
render(details) {
this._details = details;
static render(dom, templateContext, details) {
const tmpl = dom.cloneTemplate('#tmpl-lh-crc', templateContext);

// Fill in top summary.
this._dom.find('.lh-crc__longest_duration', this._tmpl).textContent =
dom.find('.lh-crc__longest_duration', tmpl).textContent =
Util.formatNumber(details.longestChain.duration) + 'ms';
this._dom.find('.lh-crc__longest_length', this._tmpl).textContent = details.longestChain.length;
this._dom.find('.lh-crc__longest_transfersize', this._tmpl).textContent =
dom.find('.lh-crc__longest_length', tmpl).textContent = details.longestChain.length;
dom.find('.lh-crc__longest_transfersize', tmpl).textContent =
Util.formateBytesToKB(details.longestChain.transferSize) + 'KB';

const detailsEl = this._dom.find('.lh-details', this._tmpl);
const detailsEl = dom.find('.lh-details', tmpl);

this._dom.find('.lh-details > summary', this._tmpl).textContent = details.header.text;
dom.find('.lh-details > summary', tmpl).textContent = details.header.text;

// Construct visual tree.
const root = this.initTree(details.chains);
const root = CriticalRequestChainRenderer.initTree(details.chains);
for (const key of Object.keys(root.tree)) {
const segment = this.createSegment(root.tree, key, root.startTime, root.transferSize);
this.buildTree(segment, detailsEl);
const segment = CriticalRequestChainRenderer.createSegment(root.tree, key,
root.startTime, root.transferSize);
CriticalRequestChainRenderer.buildTree(dom, tmpl, segment, detailsEl, details);
}

return this._tmpl;
return tmpl;
}
}

Expand All @@ -202,7 +198,7 @@ if (typeof module !== 'undefined' && module.exports) {

/** @typedef {{
* type: string,
* header: ({text: string}|undefined),
* header: {text: string},
* longestChain: {duration: number, length: number, transferSize: number},
* chains: !Object<string, !CriticalRequestChainRenderer.CRCNode>
* }}
Expand Down
7 changes: 3 additions & 4 deletions lighthouse-core/report/v2/renderer/details-renderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ class DetailsRenderer {
case 'url':
return this._renderURL(details);
case 'thumbnail':
return this._renderThumbnail(details);
return this._renderThumbnail(/** @type {!DetailsRenderer.ThumbnailDetails} */ (details));
case 'cards':
return this._renderCards(/** @type {!DetailsRenderer.CardsDetailsJSON} */ (details));
case 'table':
Expand All @@ -55,9 +55,8 @@ class DetailsRenderer {
return this._renderCode(details);
case 'node':
return this.renderNode(/** @type {!DetailsRenderer.NodeDetailsJSON} */(details));
case 'criticalrequestchain': // eslint-disable-line no-case-declarations
const crcRenderer = new CriticalRequestChainRenderer(this._dom, this._templateContext);
return crcRenderer.render(
case 'criticalrequestchain':
return CriticalRequestChainRenderer.render(this._dom, this._templateContext,
/** @type {!CriticalRequestChainRenderer.CRCDetailsJSON} */ (details));
case 'list':
return this._renderList(/** @type {!DetailsRenderer.ListDetailsJSON} */ (details));
Expand Down
7 changes: 5 additions & 2 deletions lighthouse-core/report/v2/renderer/util.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,8 +86,11 @@ class Util {
* @param {{numPathParts: (number|undefined), preserveQuery: (boolean|undefined), preserveHost: (boolean|undefined)}=} options
* @return {string}
*/
static getURLDisplayName(parsedUrl,
{numPathParts = 2, preserveQuery = true, preserveHost = false} = {}) {
static getURLDisplayName(parsedUrl, options = {}) {
const numPathParts = options.numPathParts !== undefined ? options.numPathParts : 2;
const preserveQuery = options.preserveQuery !== undefined ? options.preserveQuery : true;
const preserveHost = options.preserveHost || false;

let name;

if (parsedUrl.protocol === 'about:' || parsedUrl.protocol === 'data:') {
Expand Down
Loading

0 comments on commit 1797d9c

Please sign in to comment.