Enable Speedometer to use an external config.json file #515
Conversation
✅ Deploy Preview for webkit-speedometer-preview ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
| function isValidJsonUrl(url) { | ||
| try { | ||
| return new URL(url) && url.toLowerCase().endsWith(".json"); | ||
| } catch (_) { |
There was a problem hiding this comment.
(optional) You can do this now:
| } catch (_) { | |
| } catch { |
It's broadly supported.
| return new URL(url) && url.toLowerCase().endsWith(".json"); | ||
| } catch (_) { | ||
| return false; | ||
| } |
There was a problem hiding this comment.
In the future we'll be able to use URL.parse but I think it's still a bit early.
|
|
||
| _containsAllowedUrl(suite) { | ||
| // 1. Check for relative URL | ||
| if (!suite.url.startsWith("http://") && !suite.url.startsWith("https://") && !suite.url.startsWith("//") && !suite.url.startsWith("./")) { |
There was a problem hiding this comment.
good job checking for //. But I think we could reject this case at first, because it makes things more difficult and doesn't seem useful in this case.
Also I don't understand the last bit, why do you consider that ./ URLs are not relative?
| const parsedUrl = new URL(suite.url, baseUrl); | ||
| if (parsedUrl.origin === baseUrl) | ||
| return true; |
There was a problem hiding this comment.
it's not clear to me why we need more checks than the first condition...
Or are you only checking that this is a proper URL?
If yes, it could be good to extract that bit to a separate function (like you did in params.mjs) such as isValidUrl, and we don't need to check the origin IMO.
| return this._suites; | ||
| } | ||
|
|
||
| _containsAllowedUrl(suite) { |
There was a problem hiding this comment.
nit: please add a comment explaining all the URLs we allow
| }); | ||
| const tagsSet = new Set(tags); | ||
| this._suites.forEach((suite) => { | ||
| suite.disabled = !suite.tags.some((tag) => tagsSet.has(tag)); |
There was a problem hiding this comment.
maybe in a few months we'll be able to use Set's new methods for these sort of things, but it may be a bit too early.
| } else { | ||
| console.warn("Neither names nor tags provided. Enabling all default suites."); | ||
| this._suites.forEach((suite) => { | ||
| suite.disabled = !("default" in suite.tags); |
There was a problem hiding this comment.
I think you want suite.tags.includes("default")?
| export function createDeveloperModeContainer() { | ||
| let suites, tags; | ||
|
|
||
| export function createDeveloperModeContainer(_suites, _tags) { |
There was a problem hiding this comment.
nit: usually prefixing with a _ means that it's unused.
You could call them aSuites and aTags...
| import { renderMetricView } from "./metric-ui.mjs"; | ||
| import { defaultParams, params } from "./shared/params.mjs"; | ||
| import { createDeveloperModeContainer } from "./developer-mode.mjs"; | ||
|
|
||
| const { dataProvider } = await import("../resources/data-provider.mjs"); |
There was a problem hiding this comment.
I feel like you use await here because you have the top level await in data-provider, but that's not necessary, I'd say to just use a static import.
see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await#top_level_await
Although we might want to avoid the top level await and instead have a promise we can wait for in the constructor below, or something like that.
|
|
||
| constructor() { | ||
| window.addEventListener("DOMContentLoaded", () => this.prepareUI()); |
There was a problem hiding this comment.
we're not waiting for DOMContentLoaded anymore?
Or is it because of the await above we're usually past this event... but this is racy so we should probably keep it but also check for document.readyState...
This pr sets up Speedometer to use an optional
configurl param, to assign different workloads / tests to use with the benchmark.The initial config.json enables the news site next workload, which is currently the only workload that opted into the postMessage api for it's experimental version. The test name in the config is optional, if the default tests are targeted.
The new `data-provider' checks an allowed list of external urls that the workloads can be pulled in from. Currently this just houses the netlify preview folder.
Other changes:
the
suitesandtagsare not global anymore and thedata-provideris the source of truth. This is to ensure that thedata-providercan process the suites / tests, prior to running speedometer in any mode.news-site dist folder changed, since I had to run the
buildagain, after updating shared files from the benchmark.Preview with config assigned:
https://deploy-preview-515--webkit-speedometer-preview.netlify.app/?config=https://deploy-preview-515--webkit-speedometer-preview.netlify.app/resources/config.json