tools/wave/www/comparison.html - external/github.com/web-platform-tests/wpt - Git at Google

 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <title>Compare Results - Web Platform Test</title>
     <link rel="stylesheet" href="css/bulma-0.7.5/bulma.min.css" />
     <link rel="stylesheet" href="css/fontawesome-5.7.2.min.css" />
     <script src="lib/utils.js"></script>
     <script src="lib/wave-service.js"></script>
     <script src="lib/ui.js"></script>
     <style>
       body {
         margin: 0;
         padding: 0;
         width: 100vw;
         height: 100vh;
         display: flex;
         justify-content: center;
         font-family: "Noto Sans", sans-serif;
         overflow-y: auto;
         overflow-x: hidden;
         background-color: white;
         color: #000;
       }

       .site-logo {
         max-width: 300px;
         margin-left: -15px;
       }

       .content {
         width: 1000px;
       }

       .header {
         display: flex;
         margin: 50px 0 30px 0;
       }

       .header :first-child {
         flex: 1;
       }

       .session-header {
         display: flex;
         justify-content: center;
         align-items: center;
         cursor: pointer;
       }

       .session-header div {
         padding: 5px;
         font-weight: bold;
       }

       .session-header:hover div {
         text-decoration: underline;
       }
     </style>
   </head>
   <body>
     <script>
       window.onload = () => {
         let { tokens, reftokens } = utils.parseQuery(location.search);
         tokens = tokens ? tokens.split(",") : [];
         const refTokens = reftokens ? reftokens.split(",") : [];
         if (tokens) {
           WaveService.readStatus(function(config) {
             comparisonUi.state.reportsEnabled = config.reportsEnabled;
             comparisonUi.render();
           });
           WaveService.addRecentSessions(tokens);
           WaveService.addRecentSessions(refTokens);
           comparisonUi.state.tokens = tokens;
           comparisonUi.state.refTokens = refTokens;
           comparisonUi.render();
           comparisonUi.refreshData();
         }
       };

       const comparisonUi = {
         state: {
           tokens: [],
           refTokens: [],
           sessions: {}
         },
         refreshData: () => {
           const { tokens, refTokens } = comparisonUi.state;
           const allTokens = tokens.slice();
           refTokens
             .filter(token => allTokens.indexOf(token) === -1)
             .forEach(token => allTokens.push(token));

           WaveService.readMultipleSessions(allTokens, configurations => {
             const sessions = {};
             configurations.forEach(
               details => (sessions[details.token] = details)
             );
             comparisonUi.state.sessions = sessions;

             WaveService.readResultComparison(tokens, results => {
               comparisonUi.state.results = results;
               comparisonUi.renderApiResults();
             });

             const sessionsReferenceTokens = [];
             configurations.forEach(({ referenceTokens }) =>
               referenceTokens
                 .filter(token => refTokens.indexOf(token) === -1)
                 .filter(token => sessionsReferenceTokens.indexOf(token) === -1)
                 .forEach(token => sessionsReferenceTokens.push(token))
             );

             sessionsReferenceTokens.forEach(token =>
               comparisonUi.state.refTokens.push(token)
             );

             WaveService.readMultipleSessions(
               sessionsReferenceTokens,
               configurations => {
                 const { sessions } = comparisonUi.state;
                 configurations.forEach(
                   details => (sessions[details.token] = details)
                 );
                 comparisonUi.renderDetails();
               }
             );
           });
         },
         openResultsOverview() {
           location.href = WEB_ROOT + "overview.html";
         },
         render() {
           const comparisonView = UI.createElement({
             className: "content",
             style: "margin-bottom: 40px;",
             children: [
               {
                 className: "header",
                 children: [
                   {
                     children: [
                       {
                         element: "img",
                         src: "res/wavelogo_2016.jpg",
                         className: "site-logo"
                       }
                     ]
                   },
                   {
                     className: "button is-dark is-outlined",
                     onClick: comparisonUi.openResultsOverview,
                     children: [
                       {
                         element: "span",
                         className: "icon",
                         children: [
                           {
                             element: "i",
                             className: "fas fa-arrow-left"
                           }
                         ]
                       },
                       {
                         text: "Results Overview",
                         element: "span"
                       }
                     ]
                   }
                 ]
               },
               {
                 id: "header",
                 children: [
                   { className: "title", text: "Comparison" },
                   { id: "controls" }
                 ]
               },
               { id: "details" },
               { id: "api-results" }
             ]
           });

           const root = UI.getRoot();
           root.innerHTML = "";
           root.appendChild(comparisonView);
           comparisonUi.renderDetails();
           comparisonUi.renderApiResults();
         },
         renderDetails() {
           const detailsView = UI.createElement({
             style: "margin-bottom: 20px"
           });

           const { refTokens } = comparisonUi.state;
           const detailsTable = UI.createElement({
             element: "table",
             children: {
               element: "tbody",
               children: [
                 {
                   element: "tr",
                   id: "reference-sessions"
                 }
               ]
             }
           });
           detailsView.appendChild(detailsTable);

           const details = UI.getElement("details");
           details.innerHTML = "";
           details.appendChild(detailsView);
           comparisonUi.renderReferenceSessions();
         },
         renderReferenceSessions() {
           const { sessions, refTokens } = comparisonUi.state;
           if (!refTokens || refTokens.length === 0) return;
           if (!Object.keys(sessions) || Object.keys(sessions).length === 0)
             return;
           const referenceSessions = refTokens.map(token => sessions[token]);
           const referenceSessionsTarget = UI.getElement("reference-sessions");
           referenceSessionsTarget.innerHTML = "";

           const referenceSessionsLabel = UI.createElement({
             element: "td",
             text: "Reference Sessions:",
             style: "width: 175px"
           });
           referenceSessionsTarget.appendChild(referenceSessionsLabel);

           const referenceSessionsList = UI.createElement({ element: "td" });
           referenceSessions.forEach(session => {
             const { token, browser } = session;
             const referenceSessionItem = UI.createElement({
               style: "margin-right: 10px",
               className: "button is-dark is-small is-rounded is-outlined",
               onClick: () => WaveService.openSession(token),
               children: [
                 {
                   element: "span",
                   className: "icon",
                   children: {
                     element: "i",
                     className: utils.getBrowserIcon(browser.name)
                   }
                 },
                 {
                   element: "span",
                   className: "is-family-monospace",
                   text: token.split("-").shift()
                 }
               ]
             });
             referenceSessionsList.appendChild(referenceSessionItem);
           });
           referenceSessionsTarget.appendChild(referenceSessionsList);
         },
         renderApiResults() {
           const apiResultsView = UI.createElement({
             style: "margin-bottom: 20px"
           });

           const heading = UI.createElement({
             className: "title is-4",
             text: "Results"
           });
           apiResultsView.appendChild(heading);

           const { results, tokens, sessions } = comparisonUi.state;

           if (!results) {
             const loadingIndicator = UI.createElement({
               className: "level",
               children: {
                 element: "span",
                 className: "level-item icon",
                 children: [
                   {
                     element: "i",
                     className: "fas fa-spinner fa-pulse"
                   },
                   {
                     style: "margin-left: 0.4em;",
                     text: "Loading comparison ..."
                   }
                 ]
               }
             });
             apiResultsView.appendChild(loadingIndicator);

             const apiResults = UI.getElement("api-results");
             apiResults.innerHTML = "";
             apiResults.appendChild(apiResultsView);
             return;
           }

           const resultsTable = UI.createElement({
             element: "table"
           });
           apiResultsView.appendChild(resultsTable);

           const getColor = percent => {
             const tRed = 28;
             const tGreen = 166;
             const tBlue = 76;
             const mRed = 204;
             const mGreen = 163;
             const mBlue = 0;
             const bRed = 255;
             const bGreen = 56;
             const bBlue = 96;
             if (percent > 50) {
               const red = mRed + ((percent - 50) / 50) * (tRed - mRed);
               const green = mGreen + ((percent - 50) / 50) * (tGreen - mGreen);
               const blue = mBlue + ((percent - 50) / 50) * (tBlue - mBlue);
               return `rgb(${red}, ${green}, ${blue})`;
             } else {
               const red = bRed + (percent / 50) * (mRed - bRed);
               const green = bGreen + (percent / 50) * (mGreen - bGreen);
               const blue = bBlue + (percent / 50) * (mBlue - bBlue);
               return `rgb(${red}, ${green}, ${blue})`;
             }
           };

           const resultsTableHeader = UI.createElement({
             element: "thead",
             children: {
               element: "tr",
               children: [
                 {
                   element: "td",
                   text: "API",
                   style: "vertical-align: bottom; width: 200px"
                 }
               ]
                 .concat(
                   tokens.map(token => ({
                     element: "td",
                     children: {
                       onClick: () => WaveService.openSession(token),
                       className: "session-header",
                       children: [
                         {
                           element: "i",
                           style: "font-size: 1.5em; margin-right: 0.1em",
                           className: utils.getBrowserIcon(
                             sessions[token].browser.name
                           )
                         },
                         {
                           children: [
                             {
                               style: "margin: 0; padding: 0;",
                               className: "is-family-monospace",
                               text: `${token.split("-").shift()}`
                             },
                             {
                               style: "margin: 0; padding: 0;",
                               text: `${sessions[token].browser.name} ${
                                 sessions[token].browser.version
                               }`
                             }
                           ]
                         }
                       ]
                     }
                   }))
                 )
                 .concat([{ element: "td", style: "width: 80px" }])
             }
           });
           resultsTable.appendChild(resultsTableHeader);

           let apis = [];
           tokens.forEach(token =>
             Object.keys(results[token])
               .filter(api => apis.indexOf(api) === -1)
               .forEach(api => apis.push(api))
           );
           apis = apis.sort((apiA, apiB) =>
             apiA.toLowerCase() > apiB.toLowerCase() ? 1 : -1
           );

           const resultsTableBody = UI.createElement({
             element: "tbody",
             children: apis.map(api => ({
               element: "tr",
               children: [{ element: "td", text: api }]
                 .concat(
                   tokens.map(token =>
                     results[token][api]
                       ? {
                           element: "td",
                           style:
                             "text-align: center; font-weight: bold;" +
                             `color: ${getColor(
                               utils.percent(
                                 results[token][api],
                                 results["total"][api]
                               )
                             )}`,
                           text: `${utils.percent(
                             results[token][api],
                             results["total"][api]
                           )}%`
                         }
                       : {
                           element: "td",
                           text: "Not Tested",
                           style: "text-align: center;"
                         }
                   )
                 )
                 .concat([
                   comparisonUi.state.reportsEnabled ?
                   {
                     element: "td",
                     children: {
                       className:
                         "html-report button is-dark is-outlined is-small",
                       onclick: () =>
                         WaveService.readMultiReportUri(
                           comparisonUi.state.tokens,
                           api,
                           function(uri) {
                             window.open(uri, "_blank");
                           }
                         ),
                       text: "report"
                     }
                   } : null
                 ])
             }))
           });
           resultsTable.appendChild(resultsTableBody);

           const apiResults = UI.getElement("api-results");
           apiResults.innerHTML = "";
           apiResults.appendChild(apiResultsView);
         }
       };
     </script>
   </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<title>Compare Results - Web Platform Test</title>
	<link rel="stylesheet" href="css/bulma-0.7.5/bulma.min.css" />
	<link rel="stylesheet" href="css/fontawesome-5.7.2.min.css" />
	<script src="lib/utils.js"></script>
	<script src="lib/wave-service.js"></script>
	<script src="lib/ui.js"></script>
	<style>
	body {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	font-family: "Noto Sans", sans-serif;
	overflow-y: auto;
	overflow-x: hidden;
	background-color: white;
	color: #000;
	}

	.site-logo {
	max-width: 300px;
	margin-left: -15px;
	}

	.content {
	width: 1000px;
	}

	.header {
	display: flex;
	margin: 50px 0 30px 0;
	}

	.header :first-child {
	flex: 1;
	}

	.session-header {
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	}

	.session-header div {
	padding: 5px;
	font-weight: bold;
	}

	.session-header:hover div {
	text-decoration: underline;
	}
	</style>
	</head>
	<body>
	<script>
	window.onload = () => {
	let { tokens, reftokens } = utils.parseQuery(location.search);
	tokens = tokens ? tokens.split(",") : [];
	const refTokens = reftokens ? reftokens.split(",") : [];
	if (tokens) {
	WaveService.readStatus(function(config) {
	comparisonUi.state.reportsEnabled = config.reportsEnabled;
	comparisonUi.render();
	});
	WaveService.addRecentSessions(tokens);
	WaveService.addRecentSessions(refTokens);
	comparisonUi.state.tokens = tokens;
	comparisonUi.state.refTokens = refTokens;
	comparisonUi.render();
	comparisonUi.refreshData();
	}
	};

	const comparisonUi = {
	state: {
	tokens: [],
	refTokens: [],
	sessions: {}
	},
	refreshData: () => {
	const { tokens, refTokens } = comparisonUi.state;
	const allTokens = tokens.slice();
	refTokens
	.filter(token => allTokens.indexOf(token) === -1)
	.forEach(token => allTokens.push(token));

	WaveService.readMultipleSessions(allTokens, configurations => {
	const sessions = {};
	configurations.forEach(
	details => (sessions[details.token] = details)
	);
	comparisonUi.state.sessions = sessions;

	WaveService.readResultComparison(tokens, results => {
	comparisonUi.state.results = results;
	comparisonUi.renderApiResults();
	});

	const sessionsReferenceTokens = [];
	configurations.forEach(({ referenceTokens }) =>
	referenceTokens
	.filter(token => refTokens.indexOf(token) === -1)
	.filter(token => sessionsReferenceTokens.indexOf(token) === -1)
	.forEach(token => sessionsReferenceTokens.push(token))
	);

	sessionsReferenceTokens.forEach(token =>
	comparisonUi.state.refTokens.push(token)
	);

	WaveService.readMultipleSessions(
	sessionsReferenceTokens,
	configurations => {
	const { sessions } = comparisonUi.state;
	configurations.forEach(
	details => (sessions[details.token] = details)
	);
	comparisonUi.renderDetails();
	}
	);
	});
	},
	openResultsOverview() {
	location.href = WEB_ROOT + "overview.html";
	},
	render() {
	const comparisonView = UI.createElement({
	className: "content",
	style: "margin-bottom: 40px;",
	children: [
	{
	className: "header",
	children: [
	{
	children: [
	{
	element: "img",
	src: "res/wavelogo_2016.jpg",
	className: "site-logo"
	}
	]
	},
	{
	className: "button is-dark is-outlined",
	onClick: comparisonUi.openResultsOverview,
	children: [
	{
	element: "span",
	className: "icon",
	children: [
	{
	element: "i",
	className: "fas fa-arrow-left"
	}
	]
	},
	{
	text: "Results Overview",
	element: "span"
	}
	]
	}
	]
	},
	{
	id: "header",
	children: [
	{ className: "title", text: "Comparison" },
	{ id: "controls" }
	]
	},
	{ id: "details" },
	{ id: "api-results" }
	]
	});

	const root = UI.getRoot();
	root.innerHTML = "";
	root.appendChild(comparisonView);
	comparisonUi.renderDetails();
	comparisonUi.renderApiResults();
	},
	renderDetails() {
	const detailsView = UI.createElement({
	style: "margin-bottom: 20px"
	});

	const { refTokens } = comparisonUi.state;
	const detailsTable = UI.createElement({
	element: "table",
	children: {
	element: "tbody",
	children: [
	{
	element: "tr",
	id: "reference-sessions"
	}
	]
	}
	});
	detailsView.appendChild(detailsTable);

	const details = UI.getElement("details");
	details.innerHTML = "";
	details.appendChild(detailsView);
	comparisonUi.renderReferenceSessions();
	},
	renderReferenceSessions() {
	const { sessions, refTokens } = comparisonUi.state;
	if (!refTokens \|\| refTokens.length === 0) return;
	if (!Object.keys(sessions) \|\| Object.keys(sessions).length === 0)
	return;
	const referenceSessions = refTokens.map(token => sessions[token]);
	const referenceSessionsTarget = UI.getElement("reference-sessions");
	referenceSessionsTarget.innerHTML = "";

	const referenceSessionsLabel = UI.createElement({
	element: "td",
	text: "Reference Sessions:",
	style: "width: 175px"
	});
	referenceSessionsTarget.appendChild(referenceSessionsLabel);

	const referenceSessionsList = UI.createElement({ element: "td" });
	referenceSessions.forEach(session => {
	const { token, browser } = session;
	const referenceSessionItem = UI.createElement({
	style: "margin-right: 10px",
	className: "button is-dark is-small is-rounded is-outlined",
	onClick: () => WaveService.openSession(token),
	children: [
	{
	element: "span",
	className: "icon",
	children: {
	element: "i",
	className: utils.getBrowserIcon(browser.name)
	}
	},
	{
	element: "span",
	className: "is-family-monospace",
	text: token.split("-").shift()
	}
	]
	});
	referenceSessionsList.appendChild(referenceSessionItem);
	});
	referenceSessionsTarget.appendChild(referenceSessionsList);
	},
	renderApiResults() {
	const apiResultsView = UI.createElement({
	style: "margin-bottom: 20px"
	});

	const heading = UI.createElement({
	className: "title is-4",
	text: "Results"
	});
	apiResultsView.appendChild(heading);

	const { results, tokens, sessions } = comparisonUi.state;

	if (!results) {
	const loadingIndicator = UI.createElement({
	className: "level",
	children: {
	element: "span",
	className: "level-item icon",
	children: [
	{
	element: "i",
	className: "fas fa-spinner fa-pulse"
	},
	{
	style: "margin-left: 0.4em;",
	text: "Loading comparison ..."
	}
	]
	}
	});
	apiResultsView.appendChild(loadingIndicator);

	const apiResults = UI.getElement("api-results");
	apiResults.innerHTML = "";
	apiResults.appendChild(apiResultsView);
	return;
	}

	const resultsTable = UI.createElement({
	element: "table"
	});
	apiResultsView.appendChild(resultsTable);

	const getColor = percent => {
	const tRed = 28;
	const tGreen = 166;
	const tBlue = 76;
	const mRed = 204;
	const mGreen = 163;
	const mBlue = 0;
	const bRed = 255;
	const bGreen = 56;
	const bBlue = 96;
	if (percent > 50) {
	const red = mRed + ((percent - 50) / 50) * (tRed - mRed);
	const green = mGreen + ((percent - 50) / 50) * (tGreen - mGreen);
	const blue = mBlue + ((percent - 50) / 50) * (tBlue - mBlue);
	return `rgb(${red}, ${green}, ${blue})`;
	} else {
	const red = bRed + (percent / 50) * (mRed - bRed);
	const green = bGreen + (percent / 50) * (mGreen - bGreen);
	const blue = bBlue + (percent / 50) * (mBlue - bBlue);
	return `rgb(${red}, ${green}, ${blue})`;
	}
	};

	const resultsTableHeader = UI.createElement({
	element: "thead",
	children: {
	element: "tr",
	children: [
	{
	element: "td",
	text: "API",
	style: "vertical-align: bottom; width: 200px"
	}
	]
	.concat(
	tokens.map(token => ({
	element: "td",
	children: {
	onClick: () => WaveService.openSession(token),
	className: "session-header",
	children: [
	{
	element: "i",
	style: "font-size: 1.5em; margin-right: 0.1em",
	className: utils.getBrowserIcon(
	sessions[token].browser.name
	)
	},
	{
	children: [
	{
	style: "margin: 0; padding: 0;",
	className: "is-family-monospace",
	text: `${token.split("-").shift()}`
	},
	{
	style: "margin: 0; padding: 0;",
	text: `${sessions[token].browser.name} ${
	sessions[token].browser.version
	}`
	}
	]
	}
	]
	}
	}))
	)
	.concat([{ element: "td", style: "width: 80px" }])
	}
	});
	resultsTable.appendChild(resultsTableHeader);

	let apis = [];
	tokens.forEach(token =>
	Object.keys(results[token])
	.filter(api => apis.indexOf(api) === -1)
	.forEach(api => apis.push(api))
	);
	apis = apis.sort((apiA, apiB) =>
	apiA.toLowerCase() > apiB.toLowerCase() ? 1 : -1
	);

	const resultsTableBody = UI.createElement({
	element: "tbody",
	children: apis.map(api => ({
	element: "tr",
	children: [{ element: "td", text: api }]
	.concat(
	tokens.map(token =>
	results[token][api]
	? {
	element: "td",
	style:
	"text-align: center; font-weight: bold;" +
	`color: ${getColor(
	utils.percent(
	results[token][api],
	results["total"][api]
	)
	)}`,
	text: `${utils.percent(
	results[token][api],
	results["total"][api]
	)}%`
	}
	: {
	element: "td",
	text: "Not Tested",
	style: "text-align: center;"
	}
	)
	)
	.concat([
	comparisonUi.state.reportsEnabled ?
	{
	element: "td",
	children: {
	className:
	"html-report button is-dark is-outlined is-small",
	onclick: () =>
	WaveService.readMultiReportUri(
	comparisonUi.state.tokens,
	api,
	function(uri) {
	window.open(uri, "_blank");
	}
	),
	text: "report"
	}
	} : null
	])
	}))
	});
	resultsTable.appendChild(resultsTableBody);

	const apiResults = UI.getElement("api-results");
	apiResults.innerHTML = "";
	apiResults.appendChild(apiResultsView);
	}
	};
	</script>
	</body>
	</html>