diff --git a/lighthouse-cli/performance-experiment/report/partials/config-panel.html b/lighthouse-cli/performance-experiment/report/partials/config-panel.html index 5207c071c52b..51e2e749ca17 100644 --- a/lighthouse-cli/performance-experiment/report/partials/config-panel.html +++ b/lighthouse-cli/performance-experiment/report/partials/config-panel.html @@ -114,6 +114,7 @@ transform: translate(0px, 5px); border: none; flex: 0 0 auto; + vertical-align: top; background-repeat: no-repeat; background-position: center center; background-size: 16px 16px; diff --git a/lighthouse-cli/performance-experiment/report/scripts/perf-x.js b/lighthouse-cli/performance-experiment/report/scripts/perf-x.js index a4262a14dcca..f46972e3202d 100644 --- a/lighthouse-cli/performance-experiment/report/scripts/perf-x.js +++ b/lighthouse-cli/performance-experiment/report/scripts/perf-x.js @@ -31,7 +31,8 @@ class ConfigPanel { this._messageField = this._configPanel.querySelector('.js-message'); this._urlBlockingList = this._configPanel.querySelector('.js-url-blocking-patterns'); this._urlBlockingStatus = {}; - this._reportId = new URL(window.location).searchParams.get('id'); + const match = location.search.match(/[?&]id=([^&]*)/); + this._reportId = match ? match[1]: ''; const bodyToggle = this._configPanel.querySelector('.js-panel-toggle'); bodyToggle.addEventListener('click', () => this._toggleBody()); @@ -83,15 +84,6 @@ class ConfigPanel { } }); }); - - // get and recover blocked URL patterns of current run - fetch(`/flags?id=${this._reportId}`).then(response => { - return response.json(); - }).then(flags => { - const blockedUrlPatterns = flags.blockedUrlPatterns || []; - blockedUrlPatterns.forEach(urlPattern => this.addBlockedUrlPattern(urlPattern)); - this.log(''); - }); } /** @@ -100,15 +92,24 @@ class ConfigPanel { */ _rerunLighthouse() { this.log('Start Rerunning Lighthouse'); - const options = { blockedUrlPatterns: this.getBlockedUrlPatterns() }; - return fetch(`/rerun?id=${this._reportId}`, {method: 'POST', body: JSON.stringify(options)}) - .then(response => response.text()) - .then(newReportId => location.assign(`?id=${newReportId}`)) - .catch(err => this.log(`Lighthouse Runtime Error: ${err}`)); + const xhr = new XMLHttpRequest(); + xhr.open('POST', `/rerun?id=${this._reportId}`, true); + xhr.onreadystatechange = () => { + if (xhr.readyState !== 4) { + return; + } + + if (xhr.status === 200) { + location.assign(`?id=${xhr.responseText}`); + } else if (xhr.status === 500) { + this.log('Error: Lighthouse runtime error'); + } + }; + xhr.send(JSON.stringify(options)); } /** @@ -118,8 +119,12 @@ class ConfigPanel { * @param {string} urlPattern */ addBlockedUrlPattern(urlPattern) { - if (this._urlBlockingStatus[urlPattern]) { - this.log(`${urlPattern} is already in the list`); + urlPattern = urlPattern.trim(); + if (urlPattern.length === 0) { + this.log('Error: URL blocking pattern is an empty string'); + return; + } else if (this._urlBlockingStatus[urlPattern]) { + this.log(`Error: ${urlPattern} is already in the list`); return; } @@ -150,8 +155,9 @@ class ConfigPanel { * @param {string} urlPattern */ removeBlockedUrlPattern(urlPattern) { + urlPattern = urlPattern.trim(); if (!this._urlBlockingStatus[urlPattern]) { - this.log(`${urlPattern} is not in the list`); + this.log(`Error: ${urlPattern} is not in the list`); return; } @@ -193,5 +199,11 @@ class ConfigPanel { } window.addEventListener('DOMContentLoaded', () => { - new ConfigPanel(); + const configPanel = new ConfigPanel(); + + // init recover blocked URL patterns + [...document.querySelectorAll('.js-currently-blocked-url')].forEach(ele => { + configPanel.addBlockedUrlPattern(ele.getAttribute('data-url-pattern')); + }); + configPanel.log(''); }); diff --git a/lighthouse-cli/performance-experiment/server.js b/lighthouse-cli/performance-experiment/server.js index 2343d2a5dc6b..2e9ed311573f 100644 --- a/lighthouse-cli/performance-experiment/server.js +++ b/lighthouse-cli/performance-experiment/server.js @@ -25,7 +25,6 @@ * Browser can request lighthousr rerun by sending POST request to URL: /rerun?id=[REPORT_ID] * This will rerun lighthouse with additional cli-flags received from POST request data and * return the new report id - * Flags can be access via URL: /flags?id=[REPORT_ID] */ const http = require('http'); @@ -69,8 +68,6 @@ function requestHandler(request, response) { if (request.method === 'GET') { if (pathname === '/') { reportRequestHandler(request, response); - } else if (pathname === '/flags') { - flagsRequestHandler(request, response); } else { throw new HTTPError(404); } @@ -118,15 +115,6 @@ function reportRequestHandler(request, response) { } } -function flagsRequestHandler(request, response) { - try { - response.writeHead(200, {'Content-Type': 'text/json'}); - response.end(JSON.stringify(database.getFlags(request.parsedUrl.query.id || fallbackReportId))); - } catch (err) { - throw new HTTPError(404); - } -} - function rerunRequestHandler(request, response) { try { const flags = database.getFlags(request.parsedUrl.query.id || fallbackReportId); @@ -142,6 +130,10 @@ function rerunRequestHandler(request, response) { const id = database.saveData(flags, results); response.writeHead(200); response.end(id); + }).catch(err => { + log.error('PerformanceXServer', err.code, err); + response.writeHead(500); + response.end(http.STATUS_CODES[500]); }); }); } catch (err) { diff --git a/lighthouse-core/report/styles/report.css b/lighthouse-core/report/styles/report.css index e074b4e70b22..c31111fcec33 100644 --- a/lighthouse-core/report/styles/report.css +++ b/lighthouse-core/report/styles/report.css @@ -433,6 +433,7 @@ body { display: none; padding: 10px 0 10px 42px; top: 100%; + left: 0; position: absolute; width: 100%; background: inherit; diff --git a/lighthouse-core/report/templates/report-template.html b/lighthouse-core/report/templates/report-template.html index edff114059d1..703acb73a9d6 100644 --- a/lighthouse-core/report/templates/report-template.html +++ b/lighthouse-core/report/templates/report-template.html @@ -108,7 +108,7 @@

Runtime Environment

Blocked URL Patterns