From 2aa819faed6e9c587fdd09ecb08c0081e0884d7a Mon Sep 17 00:00:00 2001 From: Ryosuke Niwa Date: Thu, 11 Jan 2024 15:50:12 -0800 Subject: [PATCH 01/21] Always instantiate Float32Array in the cost array of findOptimalSegmentationInternal. (#342) --- resources/perf.webkit.org/public/shared/statistics.js | 2 +- resources/perf.webkit.org/public/v3/bundled-scripts.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/resources/perf.webkit.org/public/shared/statistics.js b/resources/perf.webkit.org/public/shared/statistics.js index 5ed631a17..a47d17533 100644 --- a/resources/perf.webkit.org/public/shared/statistics.js +++ b/resources/perf.webkit.org/public/shared/statistics.js @@ -597,7 +597,7 @@ var Statistics = new (function () { function findOptimalSegmentationInternal(cost, previousNode, values, costMatrix, segmentCount) { - cost[0] = [0]; // The cost of segmenting single value is always 0. + cost[0] = new Float32Array([0]); // The cost of segmenting single value is always 0. previousNode[0] = [-1]; for (var segmentStart = 0; segmentStart < values.length; segmentStart++) { var costOfOptimalSegmentationThatEndAtCurrentStart = cost[segmentStart]; diff --git a/resources/perf.webkit.org/public/v3/bundled-scripts.js b/resources/perf.webkit.org/public/v3/bundled-scripts.js index 521eb05af..4e9162822 100644 --- a/resources/perf.webkit.org/public/v3/bundled-scripts.js +++ b/resources/perf.webkit.org/public/v3/bundled-scripts.js @@ -73,7 +73,7 @@ function allocatePreviousNodeForSegmentation(values,segmentCount) {var previousNode=new Array(values.length);for(var i=0;i Date: Thu, 11 Jan 2024 21:28:33 -0800 Subject: [PATCH 02/21] Fix Complex vs. non-complex DOM subtests order (#343) * interleave the stand-alone and the complex dom tests --- resources/tests.mjs | 362 ++++++++++++++++++++++---------------------- 1 file changed, 181 insertions(+), 181 deletions(-) diff --git a/resources/tests.mjs b/resources/tests.mjs index 94cea1140..300517c75 100644 --- a/resources/tests.mjs +++ b/resources/tests.mjs @@ -85,6 +85,36 @@ Suites.push({ ], }); +Suites.push({ + name: "TodoMVC-JavaScript-ES5-Complex-DOM", + url: "todomvc/vanilla-examples/javascript-es5-complex/dist/index.html", + tags: ["todomvc", "complex"], + disabled: true, + async prepare(page) { + (await page.waitForElement(".new-todo")).focus(); + }, + tests: [ + new BenchmarkTestStep(`Adding${numberOfItemsToAdd}Items`, (page) => { + const newTodo = page.querySelector(".new-todo"); + for (let i = 0; i < numberOfItemsToAdd; i++) { + newTodo.setValue(getTodoText("ja", i)); + newTodo.dispatchEvent("change"); + newTodo.enter("keypress"); + } + }), + new BenchmarkTestStep("CompletingAllItems", (page) => { + const checkboxes = page.querySelectorAll(".toggle"); + for (let i = 0; i < numberOfItemsToAdd; i++) + checkboxes[i].click(); + }), + new BenchmarkTestStep("DeletingAllItems", (page) => { + const deleteButtons = page.querySelectorAll(".destroy"); + for (let i = numberOfItemsToAdd - 1; i >= 0; i--) + deleteButtons[i].click(); + }), + ], +}); + Suites.push({ name: "TodoMVC-JavaScript-ES6-Webpack", url: "todomvc/vanilla-examples/javascript-es6-webpack/dist/index.html", @@ -116,6 +146,36 @@ Suites.push({ ], }); +Suites.push({ + name: "TodoMVC-JavaScript-ES6-Webpack-Complex-DOM", + url: "todomvc/vanilla-examples/javascript-es6-webpack-complex/dist/index.html", + tags: ["todomvc", "complex", "complex-default"], + async prepare(page) { + const element = await page.waitForElement(".new-todo"); + element.focus(); + }, + tests: [ + new BenchmarkTestStep(`Adding${numberOfItemsToAdd}Items`, (page) => { + const newTodo = page.querySelector(".new-todo"); + for (let i = 0; i < numberOfItemsToAdd; i++) { + newTodo.setValue(getTodoText("ru", i)); + newTodo.dispatchEvent("change"); + newTodo.enter("keypress"); + } + }), + new BenchmarkTestStep("CompletingAllItems", (page) => { + const checkboxes = page.querySelectorAll(".toggle"); + for (let i = 0; i < numberOfItemsToAdd; i++) + checkboxes[i].click(); + }), + new BenchmarkTestStep("DeletingAllItems", (page) => { + const deleteButtons = page.querySelectorAll(".destroy"); + for (let i = numberOfItemsToAdd - 1; i >= 0; i--) + deleteButtons[i].click(); + }), + ], +}); + Suites.push({ name: "TodoMVC-WebComponents", url: "todomvc/vanilla-examples/javascript-web-components/dist/index.html", @@ -150,40 +210,44 @@ Suites.push({ }); Suites.push({ - name: "TodoMVC-React", - url: "todomvc/architecture-examples/react/dist/index.html#/home", - tags: ["todomvc"], + name: "TodoMVC-WebComponents-Complex-DOM", + url: "todomvc/vanilla-examples/javascript-web-components-complex/dist/index.html", + tags: ["todomvc", "webcomponents", "complex"], disabled: true, async prepare(page) { - const element = await page.waitForElement(".new-todo"); - element.focus(); + await page.waitForElement("todo-app"); }, tests: [ new BenchmarkTestStep(`Adding${numberOfItemsToAdd}Items`, (page) => { - const newTodo = page.querySelector(".new-todo"); + const input = page.querySelector(".new-todo-input", ["todo-app", "todo-topbar"]); for (let i = 0; i < numberOfItemsToAdd; i++) { - newTodo.setValue(getTodoText(defaultLanguage, i)); - newTodo.dispatchEvent("input"); - newTodo.enter("keydown"); + input.setValue(getTodoText(defaultLanguage, i)); + input.dispatchEvent("input"); + input.enter("keyup"); } }), new BenchmarkTestStep("CompletingAllItems", (page) => { - const checkboxes = page.querySelectorAll(".toggle"); - for (let i = 0; i < numberOfItemsToAdd; i++) - checkboxes[i].click(); + const items = page.querySelectorAll("todo-item", ["todo-app", "todo-list"]); + for (let i = 0; i < numberOfItemsToAdd; i++) { + const item = items[i].querySelectorInShadowRoot(".toggle-todo-input"); + item.click(); + } }), new BenchmarkTestStep("DeletingAllItems", (page) => { - const deleteButtons = page.querySelectorAll(".destroy"); - for (let i = numberOfItemsToAdd - 1; i >= 0; i--) - deleteButtons[i].click(); + const items = page.querySelectorAll("todo-item", ["todo-app", "todo-list"]); + for (let i = numberOfItemsToAdd - 1; i >= 0; i--) { + const item = items[i].querySelectorInShadowRoot(".remove-todo-button"); + item.click(); + } }), ], }); Suites.push({ - name: "TodoMVC-React-Complex-DOM", - url: "todomvc/architecture-examples/react-complex/dist/index.html#/home", - tags: ["todomvc", "complex", "complex-default"], + name: "TodoMVC-React", + url: "todomvc/architecture-examples/react/dist/index.html#/home", + tags: ["todomvc"], + disabled: true, async prepare(page) { const element = await page.waitForElement(".new-todo"); element.focus(); @@ -211,9 +275,9 @@ Suites.push({ }); Suites.push({ - name: "TodoMVC-React-Redux", - url: "todomvc/architecture-examples/react-redux/dist/index.html", - tags: ["todomvc"], + name: "TodoMVC-React-Complex-DOM", + url: "todomvc/architecture-examples/react-complex/dist/index.html#/home", + tags: ["todomvc", "complex", "complex-default"], async prepare(page) { const element = await page.waitForElement(".new-todo"); element.focus(); @@ -223,6 +287,7 @@ Suites.push({ const newTodo = page.querySelector(".new-todo"); for (let i = 0; i < numberOfItemsToAdd; i++) { newTodo.setValue(getTodoText(defaultLanguage, i)); + newTodo.dispatchEvent("input"); newTodo.enter("keydown"); } }), @@ -240,21 +305,19 @@ Suites.push({ }); Suites.push({ - name: "TodoMVC-Backbone", - url: "todomvc/architecture-examples/backbone/dist/index.html", + name: "TodoMVC-React-Redux", + url: "todomvc/architecture-examples/react-redux/dist/index.html", tags: ["todomvc"], async prepare(page) { - await page.waitForElement("#appIsReady"); - const newTodo = page.querySelector(".new-todo"); - newTodo.focus(); + const element = await page.waitForElement(".new-todo"); + element.focus(); }, tests: [ new BenchmarkTestStep(`Adding${numberOfItemsToAdd}Items`, (page) => { const newTodo = page.querySelector(".new-todo"); for (let i = 0; i < numberOfItemsToAdd; i++) { newTodo.setValue(getTodoText(defaultLanguage, i)); - newTodo.dispatchEvent("change"); - newTodo.enter("keypress"); + newTodo.enter("keydown"); } }), new BenchmarkTestStep("CompletingAllItems", (page) => { @@ -271,9 +334,9 @@ Suites.push({ }); Suites.push({ - name: "TodoMVC-Angular", - url: "todomvc/architecture-examples/angular/dist/index.html", - tags: ["todomvc"], + name: "TodoMVC-React-Redux-Complex-DOM", + url: "todomvc/architecture-examples/react-redux-complex/dist/index.html", + tags: ["todomvc", "complex"], disabled: true, async prepare(page) { const element = await page.waitForElement(".new-todo"); @@ -284,8 +347,7 @@ Suites.push({ const newTodo = page.querySelector(".new-todo"); for (let i = 0; i < numberOfItemsToAdd; i++) { newTodo.setValue(getTodoText(defaultLanguage, i)); - newTodo.dispatchEvent("input"); - newTodo.enter("keyup"); + newTodo.enter("keydown"); } }), new BenchmarkTestStep("CompletingAllItems", (page) => { @@ -302,20 +364,21 @@ Suites.push({ }); Suites.push({ - name: "TodoMVC-Vue", - url: "todomvc/architecture-examples/vue/dist/index.html", + name: "TodoMVC-Backbone", + url: "todomvc/architecture-examples/backbone/dist/index.html", tags: ["todomvc"], async prepare(page) { - const element = await page.waitForElement(".new-todo"); - element.focus(); + await page.waitForElement("#appIsReady"); + const newTodo = page.querySelector(".new-todo"); + newTodo.focus(); }, tests: [ new BenchmarkTestStep(`Adding${numberOfItemsToAdd}Items`, (page) => { const newTodo = page.querySelector(".new-todo"); for (let i = 0; i < numberOfItemsToAdd; i++) { newTodo.setValue(getTodoText(defaultLanguage, i)); - newTodo.dispatchEvent("input"); - newTodo.enter("keyup"); + newTodo.dispatchEvent("change"); + newTodo.enter("keypress"); } }), new BenchmarkTestStep("CompletingAllItems", (page) => { @@ -332,12 +395,13 @@ Suites.push({ }); Suites.push({ - name: "TodoMVC-jQuery", - url: "todomvc/architecture-examples/jquery/dist/index.html", - tags: ["todomvc"], + name: "TodoMVC-Backbone-Complex-DOM", + url: "todomvc/architecture-examples/backbone-complex/dist/index.html", + tags: ["todomvc", "complex"], + disabled: true, async prepare(page) { await page.waitForElement("#appIsReady"); - const newTodo = page.getElementById("new-todo"); + const newTodo = page.querySelector(".new-todo"); newTodo.focus(); }, tests: [ @@ -345,7 +409,8 @@ Suites.push({ const newTodo = page.querySelector(".new-todo"); for (let i = 0; i < numberOfItemsToAdd; i++) { newTodo.setValue(getTodoText(defaultLanguage, i)); - newTodo.enter("keyup"); + newTodo.dispatchEvent("change"); + newTodo.enter("keypress"); } }), new BenchmarkTestStep("CompletingAllItems", (page) => { @@ -354,15 +419,16 @@ Suites.push({ checkboxes[i].click(); }), new BenchmarkTestStep("DeletingAllItems", (page) => { + const deleteButtons = page.querySelectorAll(".destroy"); for (let i = numberOfItemsToAdd - 1; i >= 0; i--) - page.querySelector(".destroy").click(); + deleteButtons[i].click(); }), ], }); Suites.push({ - name: "TodoMVC-Preact", - url: "todomvc/architecture-examples/preact/dist/index.html#/home", + name: "TodoMVC-Angular", + url: "todomvc/architecture-examples/angular/dist/index.html", tags: ["todomvc"], disabled: true, async prepare(page) { @@ -374,7 +440,8 @@ Suites.push({ const newTodo = page.querySelector(".new-todo"); for (let i = 0; i < numberOfItemsToAdd; i++) { newTodo.setValue(getTodoText(defaultLanguage, i)); - newTodo.enter("keydown"); + newTodo.dispatchEvent("input"); + newTodo.enter("keyup"); } }), new BenchmarkTestStep("CompletingAllItems", (page) => { @@ -391,10 +458,9 @@ Suites.push({ }); Suites.push({ - name: "TodoMVC-Svelte", - url: "todomvc/architecture-examples/svelte/dist/index.html", - tags: ["todomvc"], - disabled: true, + name: "TodoMVC-Angular-Complex-DOM", + url: "todomvc/architecture-examples/angular-complex/dist/index.html", + tags: ["todomvc", "complex", "complex-default"], async prepare(page) { const element = await page.waitForElement(".new-todo"); element.focus(); @@ -404,7 +470,8 @@ Suites.push({ const newTodo = page.querySelector(".new-todo"); for (let i = 0; i < numberOfItemsToAdd; i++) { newTodo.setValue(getTodoText(defaultLanguage, i)); - newTodo.enter("keydown"); + newTodo.dispatchEvent("input"); + newTodo.enter("keyup"); } }), new BenchmarkTestStep("CompletingAllItems", (page) => { @@ -421,53 +488,20 @@ Suites.push({ }); Suites.push({ - name: "TodoMVC-Lit", - url: "todomvc/architecture-examples/lit/dist/index.html", - tags: ["todomvc", "webcomponents"], - disabled: true, - async prepare(page) { - await page.waitForElement("todo-app"); - }, - tests: [ - new BenchmarkTestStep(`Adding${numberOfItemsToAdd}Items`, (page) => { - const newTodo = page.querySelector(".new-todo", ["todo-app", "todo-form"]); - for (let i = 0; i < numberOfItemsToAdd; i++) { - newTodo.setValue(getTodoText(defaultLanguage, i)); - newTodo.enter("keydown"); - } - }), - new BenchmarkTestStep("CompletingAllItems", (page) => { - const todoItems = page.querySelectorAll("todo-item", ["todo-app", "todo-list"]); - for (let i = 0; i < numberOfItemsToAdd; i++) { - const checkbox = todoItems[i].querySelectorInShadowRoot(".toggle"); - checkbox.click(); - } - }), - new BenchmarkTestStep("DeletingAllItems", (page) => { - const todoItems = page.querySelectorAll("todo-item", ["todo-app", "todo-list"]); - for (let i = numberOfItemsToAdd - 1; i >= 0; i--) { - const deleteButton = todoItems[i].querySelectorInShadowRoot(".destroy"); - deleteButton.click(); - } - }), - ], -}); - -Suites.push({ - name: "TodoMVC-JavaScript-ES5-Complex-DOM", - url: "todomvc/vanilla-examples/javascript-es5-complex/dist/index.html", - tags: ["todomvc", "complex"], - disabled: true, + name: "TodoMVC-Vue", + url: "todomvc/architecture-examples/vue/dist/index.html", + tags: ["todomvc"], async prepare(page) { - (await page.waitForElement(".new-todo")).focus(); + const element = await page.waitForElement(".new-todo"); + element.focus(); }, tests: [ new BenchmarkTestStep(`Adding${numberOfItemsToAdd}Items`, (page) => { const newTodo = page.querySelector(".new-todo"); for (let i = 0; i < numberOfItemsToAdd; i++) { - newTodo.setValue(getTodoText("ja", i)); - newTodo.dispatchEvent("change"); - newTodo.enter("keypress"); + newTodo.setValue(getTodoText(defaultLanguage, i)); + newTodo.dispatchEvent("input"); + newTodo.enter("keyup"); } }), new BenchmarkTestStep("CompletingAllItems", (page) => { @@ -484,9 +518,10 @@ Suites.push({ }); Suites.push({ - name: "TodoMVC-JavaScript-ES6-Webpack-Complex-DOM", - url: "todomvc/vanilla-examples/javascript-es6-webpack-complex/dist/index.html", + name: "TodoMVC-Vue-Complex-DOM", + url: "todomvc/architecture-examples/vue-complex/dist/index.html", tags: ["todomvc", "complex", "complex-default"], + disabled: true, async prepare(page) { const element = await page.waitForElement(".new-todo"); element.focus(); @@ -495,9 +530,9 @@ Suites.push({ new BenchmarkTestStep(`Adding${numberOfItemsToAdd}Items`, (page) => { const newTodo = page.querySelector(".new-todo"); for (let i = 0; i < numberOfItemsToAdd; i++) { - newTodo.setValue(getTodoText("ru", i)); - newTodo.dispatchEvent("change"); - newTodo.enter("keypress"); + newTodo.setValue(getTodoText(defaultLanguage, i)); + newTodo.dispatchEvent("input"); + newTodo.enter("keyup"); } }), new BenchmarkTestStep("CompletingAllItems", (page) => { @@ -514,54 +549,20 @@ Suites.push({ }); Suites.push({ - name: "TodoMVC-WebComponents-Complex-DOM", - url: "todomvc/vanilla-examples/javascript-web-components-complex/dist/index.html", - tags: ["todomvc", "webcomponents", "complex"], - disabled: true, - async prepare(page) { - await page.waitForElement("todo-app"); - }, - tests: [ - new BenchmarkTestStep(`Adding${numberOfItemsToAdd}Items`, (page) => { - const input = page.querySelector(".new-todo-input", ["todo-app", "todo-topbar"]); - for (let i = 0; i < numberOfItemsToAdd; i++) { - input.setValue(getTodoText(defaultLanguage, i)); - input.dispatchEvent("input"); - input.enter("keyup"); - } - }), - new BenchmarkTestStep("CompletingAllItems", (page) => { - const items = page.querySelectorAll("todo-item", ["todo-app", "todo-list"]); - for (let i = 0; i < numberOfItemsToAdd; i++) { - const item = items[i].querySelectorInShadowRoot(".toggle-todo-input"); - item.click(); - } - }), - new BenchmarkTestStep("DeletingAllItems", (page) => { - const items = page.querySelectorAll("todo-item", ["todo-app", "todo-list"]); - for (let i = numberOfItemsToAdd - 1; i >= 0; i--) { - const item = items[i].querySelectorInShadowRoot(".remove-todo-button"); - item.click(); - } - }), - ], -}); - -Suites.push({ - name: "TodoMVC-React-Redux-Complex-DOM", - url: "todomvc/architecture-examples/react-redux-complex/dist/index.html", - tags: ["todomvc", "complex"], - disabled: true, + name: "TodoMVC-jQuery", + url: "todomvc/architecture-examples/jquery/dist/index.html", + tags: ["todomvc"], async prepare(page) { - const element = await page.waitForElement(".new-todo"); - element.focus(); + await page.waitForElement("#appIsReady"); + const newTodo = page.getElementById("new-todo"); + newTodo.focus(); }, tests: [ new BenchmarkTestStep(`Adding${numberOfItemsToAdd}Items`, (page) => { const newTodo = page.querySelector(".new-todo"); for (let i = 0; i < numberOfItemsToAdd; i++) { newTodo.setValue(getTodoText(defaultLanguage, i)); - newTodo.enter("keydown"); + newTodo.enter("keyup"); } }), new BenchmarkTestStep("CompletingAllItems", (page) => { @@ -570,21 +571,20 @@ Suites.push({ checkboxes[i].click(); }), new BenchmarkTestStep("DeletingAllItems", (page) => { - const deleteButtons = page.querySelectorAll(".destroy"); for (let i = numberOfItemsToAdd - 1; i >= 0; i--) - deleteButtons[i].click(); + page.querySelector(".destroy").click(); }), ], }); Suites.push({ - name: "TodoMVC-Backbone-Complex-DOM", - url: "todomvc/architecture-examples/backbone-complex/dist/index.html", + name: "TodoMVC-jQuery-Complex-DOM", + url: "todomvc/architecture-examples/jquery-complex/dist/index.html", tags: ["todomvc", "complex"], disabled: true, async prepare(page) { await page.waitForElement("#appIsReady"); - const newTodo = page.querySelector(".new-todo"); + const newTodo = page.getElementById("new-todo"); newTodo.focus(); }, tests: [ @@ -592,8 +592,7 @@ Suites.push({ const newTodo = page.querySelector(".new-todo"); for (let i = 0; i < numberOfItemsToAdd; i++) { newTodo.setValue(getTodoText(defaultLanguage, i)); - newTodo.dispatchEvent("change"); - newTodo.enter("keypress"); + newTodo.enter("keyup"); } }), new BenchmarkTestStep("CompletingAllItems", (page) => { @@ -602,17 +601,17 @@ Suites.push({ checkboxes[i].click(); }), new BenchmarkTestStep("DeletingAllItems", (page) => { - const deleteButtons = page.querySelectorAll(".destroy"); for (let i = numberOfItemsToAdd - 1; i >= 0; i--) - deleteButtons[i].click(); + page.querySelector(".destroy").click(); }), ], }); Suites.push({ - name: "TodoMVC-Angular-Complex-DOM", - url: "todomvc/architecture-examples/angular-complex/dist/index.html", - tags: ["todomvc", "complex", "complex-default"], + name: "TodoMVC-Preact", + url: "todomvc/architecture-examples/preact/dist/index.html#/home", + tags: ["todomvc"], + disabled: true, async prepare(page) { const element = await page.waitForElement(".new-todo"); element.focus(); @@ -622,8 +621,7 @@ Suites.push({ const newTodo = page.querySelector(".new-todo"); for (let i = 0; i < numberOfItemsToAdd; i++) { newTodo.setValue(getTodoText(defaultLanguage, i)); - newTodo.dispatchEvent("input"); - newTodo.enter("keyup"); + newTodo.enter("keydown"); } }), new BenchmarkTestStep("CompletingAllItems", (page) => { @@ -640,10 +638,9 @@ Suites.push({ }); Suites.push({ - name: "TodoMVC-Vue-Complex-DOM", - url: "todomvc/architecture-examples/vue-complex/dist/index.html", + name: "TodoMVC-Preact-Complex-DOM", + url: "todomvc/architecture-examples/preact-complex/dist/index.html#/home", tags: ["todomvc", "complex", "complex-default"], - disabled: true, async prepare(page) { const element = await page.waitForElement(".new-todo"); element.focus(); @@ -653,8 +650,7 @@ Suites.push({ const newTodo = page.querySelector(".new-todo"); for (let i = 0; i < numberOfItemsToAdd; i++) { newTodo.setValue(getTodoText(defaultLanguage, i)); - newTodo.dispatchEvent("input"); - newTodo.enter("keyup"); + newTodo.enter("keydown"); } }), new BenchmarkTestStep("CompletingAllItems", (page) => { @@ -671,21 +667,20 @@ Suites.push({ }); Suites.push({ - name: "TodoMVC-jQuery-Complex-DOM", - url: "todomvc/architecture-examples/jquery-complex/dist/index.html", - tags: ["todomvc", "complex"], + name: "TodoMVC-Svelte", + url: "todomvc/architecture-examples/svelte/dist/index.html", + tags: ["todomvc"], disabled: true, async prepare(page) { - await page.waitForElement("#appIsReady"); - const newTodo = page.getElementById("new-todo"); - newTodo.focus(); + const element = await page.waitForElement(".new-todo"); + element.focus(); }, tests: [ new BenchmarkTestStep(`Adding${numberOfItemsToAdd}Items`, (page) => { const newTodo = page.querySelector(".new-todo"); for (let i = 0; i < numberOfItemsToAdd; i++) { newTodo.setValue(getTodoText(defaultLanguage, i)); - newTodo.enter("keyup"); + newTodo.enter("keydown"); } }), new BenchmarkTestStep("CompletingAllItems", (page) => { @@ -694,15 +689,16 @@ Suites.push({ checkboxes[i].click(); }), new BenchmarkTestStep("DeletingAllItems", (page) => { + const deleteButtons = page.querySelectorAll(".destroy"); for (let i = numberOfItemsToAdd - 1; i >= 0; i--) - page.querySelector(".destroy").click(); + deleteButtons[i].click(); }), ], }); Suites.push({ - name: "TodoMVC-Preact-Complex-DOM", - url: "todomvc/architecture-examples/preact-complex/dist/index.html#/home", + name: "TodoMVC-Svelte-Complex-DOM", + url: "todomvc/architecture-examples/svelte-complex/dist/index.html", tags: ["todomvc", "complex", "complex-default"], async prepare(page) { const element = await page.waitForElement(".new-todo"); @@ -730,30 +726,34 @@ Suites.push({ }); Suites.push({ - name: "TodoMVC-Svelte-Complex-DOM", - url: "todomvc/architecture-examples/svelte-complex/dist/index.html", - tags: ["todomvc", "complex", "complex-default"], + name: "TodoMVC-Lit", + url: "todomvc/architecture-examples/lit/dist/index.html", + tags: ["todomvc", "webcomponents"], + disabled: true, async prepare(page) { - const element = await page.waitForElement(".new-todo"); - element.focus(); + await page.waitForElement("todo-app"); }, tests: [ new BenchmarkTestStep(`Adding${numberOfItemsToAdd}Items`, (page) => { - const newTodo = page.querySelector(".new-todo"); + const newTodo = page.querySelector(".new-todo", ["todo-app", "todo-form"]); for (let i = 0; i < numberOfItemsToAdd; i++) { newTodo.setValue(getTodoText(defaultLanguage, i)); newTodo.enter("keydown"); } }), new BenchmarkTestStep("CompletingAllItems", (page) => { - const checkboxes = page.querySelectorAll(".toggle"); - for (let i = 0; i < numberOfItemsToAdd; i++) - checkboxes[i].click(); + const todoItems = page.querySelectorAll("todo-item", ["todo-app", "todo-list"]); + for (let i = 0; i < numberOfItemsToAdd; i++) { + const checkbox = todoItems[i].querySelectorInShadowRoot(".toggle"); + checkbox.click(); + } }), new BenchmarkTestStep("DeletingAllItems", (page) => { - const deleteButtons = page.querySelectorAll(".destroy"); - for (let i = numberOfItemsToAdd - 1; i >= 0; i--) - deleteButtons[i].click(); + const todoItems = page.querySelectorAll("todo-item", ["todo-app", "todo-list"]); + for (let i = numberOfItemsToAdd - 1; i >= 0; i--) { + const deleteButton = todoItems[i].querySelectorInShadowRoot(".destroy"); + deleteButton.click(); + } }), ], }); From 4b451d83884331dac3a0f03da469ef9ac84dcddd Mon Sep 17 00:00:00 2001 From: Camillo Bruni Date: Wed, 17 Jan 2024 10:33:43 +0100 Subject: [PATCH 03/21] Allow empty hash for cleaner default URLs on the home screen (#349) This makes sure we don't need the #home hash for the default page URL. --- resources/main.css | 3 ++- resources/main.mjs | 22 +++++++++++++++++----- 2 files changed, 19 insertions(+), 6 deletions(-) diff --git a/resources/main.css b/resources/main.css index 1a341f5d8..59435d623 100644 --- a/resources/main.css +++ b/resources/main.css @@ -287,7 +287,8 @@ section { border-radius: 20px; } -section:target { +section:target, +body:not(body:has(section:target)) #home { display: block; } diff --git a/resources/main.mjs b/resources/main.mjs index 43de1a675..9d0b91d8b 100644 --- a/resources/main.mjs +++ b/resources/main.mjs @@ -331,20 +331,32 @@ class MainBenchmarkClient { _showSection(hash) { if (this._isRunning) { - window.location.hash = "#running"; + this._setLocationHash("#running"); return; } else if (this._hasResults) { if (hash !== "#summary" && hash !== "#details") { - window.location.hash = "#summary"; + this._setLocationHash("#summary"); return; } } else { - if (hash !== "#home" && hash !== "#about") { - window.location.hash = "#home"; + if (hash !== "" && hash !== "#home" && hash !== "#about") { + this._setLocationHash("#home"); return; } } - window.location.hash = hash || "#home"; + this._setLocationHash(hash); + } + + _setLocationHash(hash) { + if (hash === "#home" || hash === "") + this._removeLocationHash(); + else + window.location.hash = hash; + } + + _removeLocationHash() { + const location = window.location; + window.history.pushState("", document.title, location.pathname + location.search); } } From 0f449aa70254f448b863f08096e2b63c0b75ed9f Mon Sep 17 00:00:00 2001 From: Julien Wajsberg Date: Mon, 22 Jan 2024 16:22:38 +0100 Subject: [PATCH 04/21] Remove tentative from the prettier and eslint ignore lists --- .eslintignore | 2 -- .prettierignore | 2 -- 2 files changed, 4 deletions(-) diff --git a/.eslintignore b/.eslintignore index 51b820f49..431c4a796 100644 --- a/.eslintignore +++ b/.eslintignore @@ -3,8 +3,6 @@ package-lock.json **/.angular -/resources/tentative/* - /resources/todomvc/architecture-examples/* !/resources/todomvc/architecture-examples/angular !/resources/todomvc/architecture-examples/angular-complex diff --git a/.prettierignore b/.prettierignore index 53472ed24..380c47c40 100644 --- a/.prettierignore +++ b/.prettierignore @@ -3,8 +3,6 @@ package-lock.json **/.angular -/resources/tentative/* - /resources/todomvc/architecture-examples/* !/resources/todomvc/architecture-examples/angular !/resources/todomvc/architecture-examples/angular-complex From 6ad43c3f5c081b202b445f5c6563c0fe7b920691 Mon Sep 17 00:00:00 2001 From: Julien Wajsberg Date: Mon, 22 Jan 2024 16:22:38 +0100 Subject: [PATCH 05/21] Makes tsx files checked by the formatters. --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 1d0ccf2ff..063ad7195 100644 --- a/package.json +++ b/package.json @@ -17,8 +17,8 @@ "scripts": { "dev": "http-server ./ -p 7000 -c-1 --cors", "server": "http-server ./ -p 7000 --cors", - "lint:check": "eslint **/*.mjs", - "lint:fix": "eslint \"**/*.{js,mjs,jsx,ts}\" --fix", + "lint:check": "eslint **/*.{js,mjs,jsx,ts,tsx}", + "lint:fix": "eslint \"**/*.{js,mjs,jsx,ts,tsx}\" --fix", "pretty:check": "prettier --check ./", "pretty:fix": "prettier --write ./", "format": "npm run pretty:fix ; npm run lint:fix", From c0269db7d7eb64d89b76f2ac218edc6b3b6b9d0c Mon Sep 17 00:00:00 2001 From: Julien Wajsberg Date: Mon, 22 Jan 2024 16:38:01 +0100 Subject: [PATCH 06/21] Add root: true to the top level eslint configuration file --- .eslintrc | 1 + 1 file changed, 1 insertion(+) diff --git a/.eslintrc b/.eslintrc index 4a666dff5..1843551b7 100644 --- a/.eslintrc +++ b/.eslintrc @@ -24,6 +24,7 @@ */ { + "root": true, "extends": ["eslint:recommended", "plugin:@typescript-eslint/base"], "env": { "browser": true, From 7ae836e55f2c300807e7f1da082ba0dca9033cb5 Mon Sep 17 00:00:00 2001 From: Julien Wajsberg Date: Mon, 22 Jan 2024 16:47:09 +0100 Subject: [PATCH 07/21] Configure the next eslint plugin so that there's no false positive error when running eslint --- resources/newssite/news-next/.eslintrc.json | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/resources/newssite/news-next/.eslintrc.json b/resources/newssite/news-next/.eslintrc.json index 0810c86b2..efde52a3c 100644 --- a/resources/newssite/news-next/.eslintrc.json +++ b/resources/newssite/news-next/.eslintrc.json @@ -1,3 +1,8 @@ { - "extends": "plugin:@next/next/recommended" + "extends": "plugin:@next/next/recommended", + "settings": { + "next": { + "rootDir": "resources/newssite/news-next/" + } + } } From 7c0931ee8c08f2a7e39bec104e972f87df96d5ca Mon Sep 17 00:00:00 2001 From: Julien Wajsberg Date: Mon, 22 Jan 2024 16:47:27 +0100 Subject: [PATCH 08/21] Run format on a previously unformatted file --- resources/developer-mode.mjs | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/resources/developer-mode.mjs b/resources/developer-mode.mjs index bd21a5753..728c786f4 100644 --- a/resources/developer-mode.mjs +++ b/resources/developer-mode.mjs @@ -88,7 +88,6 @@ export function createUIForIterationCount() { return label; } - export function createUIForSuites() { const control = document.createElement("nav"); const ol = document.createElement("ol"); @@ -186,14 +185,14 @@ export function createUIForSuites() { function createUIForRun() { let button = document.createElement("button"); - button.textContent = `Start Test`; + button.textContent = "Start Test"; button.onclick = (event) => { globalThis.benchmarkClient.start(); - } + }; let buttons = document.createElement("div"); buttons.className = "button-bar"; buttons.appendChild(button); - return buttons + return buttons; } function updateURL() { From 3d93f179b61c10106638b0f57f81880d5269c9a6 Mon Sep 17 00:00:00 2001 From: Camillo Bruni Date: Thu, 25 Jan 2024 10:21:12 +0100 Subject: [PATCH 09/21] Fix navigation for Firefox (#353) Refreshing the page with results and a #summary hash breaks on Firefox. Explicitly setting the #home has a workaround cleanly shows the main page again. --- resources/main.mjs | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/resources/main.mjs b/resources/main.mjs index 9d0b91d8b..bdfdb8cb6 100644 --- a/resources/main.mjs +++ b/resources/main.mjs @@ -348,10 +348,12 @@ class MainBenchmarkClient { } _setLocationHash(hash) { - if (hash === "#home" || hash === "") + if (hash === "#home" || hash === "") { + window.location.hash = "#home"; this._removeLocationHash(); - else + } else { window.location.hash = hash; + } } _removeLocationHash() { From b0a465d60caad8ff9fa113f4c3875564f7984d3c Mon Sep 17 00:00:00 2001 From: Camillo Bruni Date: Thu, 25 Jan 2024 11:17:48 +0100 Subject: [PATCH 10/21] Fix navigation recursion (#357) Conditionally update window.location.hash for #home to avoid navigation recursion. --- resources/main.mjs | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/resources/main.mjs b/resources/main.mjs index bdfdb8cb6..672fb8e68 100644 --- a/resources/main.mjs +++ b/resources/main.mjs @@ -349,7 +349,8 @@ class MainBenchmarkClient { _setLocationHash(hash) { if (hash === "#home" || hash === "") { - window.location.hash = "#home"; + if (window.location.hash !== hash) + window.location.hash = "#home"; this._removeLocationHash(); } else { window.location.hash = hash; From 638a9681cfbaa8a5f439f56c915bd17b0185be78 Mon Sep 17 00:00:00 2001 From: Camillo Bruni Date: Thu, 25 Jan 2024 11:21:55 +0100 Subject: [PATCH 11/21] Update document title (#354) Use a "data-title" attribute for each section to update document.title. --- index.html | 6 +++--- resources/main.mjs | 8 ++++++++ 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 4f288be58..a796c839b 100644 --- a/index.html +++ b/index.html @@ -49,7 +49,7 @@ -
+
@@ -89,7 +88,6 @@

Detailed Metrics