report: add details-element polyfill for Edge

[paulirish]

Split this out of #6459 as it's more complex then the other fixes. Hope that's cool, @wardpeet !

Edge doesn't support <details> but it's high priority for them.

Our clients:

DevTools Audits panel: Only Chrome support
Chrome extension: Only Chrome support
CLI -> HTML: Should support all browsers
Viewer: Should support all browsers
PSI: Should support all browsers

Where "All browsers" == current chrome, saf, ff, edge, but not IE11.

Polyfillin

This JS is essentially concatenated into the compiled-reportrenderer via the html-report-assets inclusion. It runs immediately and exits early if a feature test succeeds:

lighthouse/lighthouse-core/report/html/third_party/details-element-polyfill.js

Lines 13 to 39 in 65f9d6b

	support = {
	element: (function() {
	var closedHeight, element, openedHeight, parent, ref;
	element = document.createElement("details");
	if (!("open" in element)) {
	return false;
	}
	element.innerHTML = "<summary>a</summary>b";
	element.setAttribute("style", "position: absolute; left: -9999px");
	parent = (ref = document.body) != null ? ref : document.documentElement;
	parent.appendChild(element);
	closedHeight = element.offsetHeight;
	element.open = true;
	openedHeight = element.offsetHeight;
	parent.removeChild(element);
	return closedHeight !== openedHeight;
	})(),
	toggleEvent: (function() {
	var element;
	element = document.createElement("details");
	return "ontoggle" in element;
	})()
	};
	if (support.element && support.toggleEvent) {
	return;
	}

Shipping this polyfill this way fixes the CLI and Viewer. PSI is configured separately, but has a similar list of files for inclusion. DevTools is also unaffected, so that's cool. Note, this will add the polyfill superfluously to the extension bundle, but... eh.

---

@wardpeet note i removed these lines:

lighthouse/lighthouse-core/report/html/report-styles.css

Lines 128 to 131 in 7150174

	/* Edge doesn't recognize these, so we preemptively set to display:block */
	details, summary {
	display: block;
	}

I think that's fine as the polyfill will add these styles, and I expect that to happen before we ever render a <details> but lmk wyt :)

[patrickhulce]

travis is still unhappy about it being require'd from node during collecting strings, maybe we should have an early exit if it's in node?

[patrickhulce]

LGTM other than test issue!

[patrickhulce]

what was this one? :)

[wardpeet]

@paulirish you still need the details, summary part in the report.

lighthouse/lighthouse-core/report/html/report-styles.css

Lines 128 to 131 in 7150174

	/* Edge doesn't recognize these, so we preemptively set to display:block */
	details, summary {
	display: block;
	}

If you don't. Edge doesn't threat it as block elements. The polyfill only adds the details > summary { display: block; } so you still need to add details { display: block; } to the lighthouse css. Unknown elements are threated as display: inline

with details { display: block }

[wardpeet]

Can we ditch this empty function?

[wardpeet]

Same here?

[paulirish]

sg to all. updated.

[brendankenny]

You should also try out the "save as html" in viewer (should work fine since it inlines the html-report-assets into the copy of the generator and uses that to save a new version) and just a regular report (saves outerHTML, so may be trickier with polyfilled stuff and the polyfill itself copied over?)

[brendankenny]

can you link the edge bug?

[brendankenny]

I know there's a thing with copying the report renderer files around, but is it possible to support this in the top-level third-party/? It should really be there (it makes it very clear its relationship to lighthouse)

[brendankenny]

also need a license file in parallel to it, and ideally a readme that says the source commit and lists the modifications made

[paulirish]

I'll do these as a followup. It adds too much complexity to the roll right now.

[brendankenny]

LGTM

(I think the extension error isn't a real one, but should double check it)