--- a/devtools/client/webconsole/new-console-output/test/chrome/test_render_perf.html
+++ b/devtools/client/webconsole/new-console-output/test/chrome/test_render_perf.html
@@ -9,87 +9,90 @@
- http://creativecommons.org/publicdomain/zero/1.0/ -->
</head>
<body>
<p>Test for render perf</p>
<div id="output"></div>
<script type="text/javascript">
"use strict";
-
-const testPackets = [];
-const numMessages = 1000;
-for (let id = 0; id < numMessages; id++) {
- let message = "Odd text";
- if (id % 2 === 0) {
- message = "Even text";
+const numMessages = 2000;
+const testPackets = Array.from({length: numMessages}).map((el, id) => ({
+ "from": "server1.conn4.child1/consoleActor2",
+ "type": "consoleAPICall",
+ "message": {
+ "arguments": [
+ "foobar",
+ `${id % 2 === 0 ? "Even" : "Odd"} text`,
+ id
+ ],
+ "columnNumber": 1,
+ "counter": null,
+ "filename": "file:///test.html",
+ "functionName": "",
+ "groupName": "",
+ "level": "log",
+ "lineNumber": 1,
+ "private": false,
+ "styles": [],
+ "timeStamp": 1455064271115 + id,
+ "timer": null,
+ "workerType": "none",
+ "category": "webdev"
}
- testPackets.push({
- "from": "server1.conn4.child1/consoleActor2",
- "type": "consoleAPICall",
- "message": {
- "arguments": [
- "foobar",
- message,
- id
- ],
- "columnNumber": 1,
- "counter": null,
- "filename": "file:///test.html",
- "functionName": "",
- "groupName": "",
- "level": "log",
- "lineNumber": 1,
- "private": false,
- "styles": [],
- "timeStamp": 1455064271115 + id,
- "timer": null,
- "workerType": "none",
- "category": "webdev"
- }
- });
+}));
+
+async function timeit(cb) {
+ // Return a Promise that resolves the number of seconds cb takes.
+ let start = performance.now();
+ await cb();
+ let elapsed = performance.now() - start;
+ return elapsed;
}
-function timeit(cb) {
- // Return a Promise that resolves the number of seconds cb takes.
- return new Promise(resolve => {
- let start = performance.now();
- cb();
- let elapsed = performance.now() - start;
- resolve(elapsed / 1000);
- });
-}
+window.onload = async function () {
+ try {
+ const NewConsoleOutputWrapper = browserRequire(
+ "devtools/client/webconsole/new-console-output/new-console-output-wrapper");
+ const EventEmitter = browserRequire("devtools/shared/event-emitter");
-window.onload = Task.async(function* () {
- const { configureStore } = browserRequire(
- "devtools/client/webconsole/new-console-output/store");
- const { filterTextSet, filtersClear } = browserRequire(
- "devtools/client/webconsole/new-console-output/actions/index");
- const NewConsoleOutputWrapper = browserRequire(
- "devtools/client/webconsole/new-console-output/new-console-output-wrapper");
- const wrapper = new NewConsoleOutputWrapper(document.querySelector("#output"), {});
+ const wrapper = new NewConsoleOutputWrapper(
+ document.getElementById("output"),
+ {hud: EventEmitter.decorate({proxy: {}})},
+ {},
+ null,
+ document,
+ );
+ wrapper.init();
- const store = configureStore();
-
- let time = yield timeit(() => {
- testPackets.forEach((message) => {
- wrapper.dispatchMessageAdd(message);
- });
- });
- info("took " + time + " seconds to render messages");
+ let times = [];
+ const iterations = 10;
+ const lastPacket = testPackets.pop();
+ for (let i = 0; i < iterations; i++) {
+ let time = await timeit(() => {
+ testPackets.forEach((packet) => wrapper.dispatchMessageAdd(packet));
+ // Only wait for the last packet to minimize work.
+ return wrapper.dispatchMessageAdd(lastPacket, true);
+ });
+ info(`took ${time} ms to render messages`);
+ times.push(time);
- time = yield timeit(() => {
- store.dispatch(filterTextSet("Odd text"));
- });
- info("took " + time + " seconds to search filter half the messages");
+ info("Clear the console");
+ await new Promise(resolve => requestAnimationFrame(() => resolve()));
+ wrapper.dispatchMessagesClear();
+ }
- time = yield timeit(() => {
- store.dispatch(filtersClear());
- });
- info("took " + time + " seconds to clear the filter");
+ let totalTime = times.reduce((sum, t) => sum + t);
+ let avg = totalTime / times.length;
+ info(`On average, it took ${avg} ms to render ${numMessages} messages`);
- ok(true, "Yay, it didn't time out!");
+ ok(true, "Yay, it didn't time out!");
+ } catch (e) {
+ ok(false, `Error : ${e.message}
+ ${e.stack}
+ `);
+ }
SimpleTest.finish();
-});
+};
</script>
</body>
</html>