Fixes #335: Prevent complex DOM workloads from hitting a specific Web…

…Kit pathology (#338) * Utility function to create css variants for big-dom.css * update build scripts * update dists
WebKit · Dec 21, 2023 · a268ec4 · a268ec4
1 parent 2414364
commit a268ec4
Show file tree

Hide file tree

Showing 53 changed files with 4,734 additions and 3,772 deletions.
diff --git a/.../react-complex/dist/big-dom-generator.css → ...-dom-with-stacking-context-scrollable.css b/.../react-complex/dist/big-dom-generator.css → ...-dom-with-stacking-context-scrollable.css
diff --git a/resources/todomvc/architecture-examples/angular-complex/dist/index.html b/resources/todomvc/architecture-examples/angular-complex/dist/index.html
diff --git a/resources/todomvc/architecture-examples/angular-complex/scripts/build.js b/resources/todomvc/architecture-examples/angular-complex/scripts/build.js
@@ -8,11 +8,12 @@ const options = {
     callerDirectory: path.resolve(__dirname),
     sourceDirectory: path.join("..", "node_modules", "todomvc-angular", "dist"),
     title: "TodoMVC: Angular Complex DOM",
-    filesToMove: ["node_modules/big-dom-generator/dist/big-dom-generator.css", "node_modules/big-dom-generator/dist/logo.png"],
+    filesToMove: ["node_modules/big-dom-generator/dist/big-dom-with-stacking-context-scrollable.css", "node_modules/big-dom-generator/dist/logo.png"],
     cssFilePath: path.resolve(__dirname, "..", "node_modules", "big-dom-generator", "utils", "app.css"),
     cssFileNamePattern: /^styles.*\.css$/,
     standaloneDirectory: path.resolve(__dirname, "..", "..", "angular"),
     complexDirectory: path.resolve(__dirname, ".."),
+    cssFilesToAddLinksFor: ["big-dom-with-stacking-context-scrollable.css"],
 };
 
 buildComplex(options);
diff --git a/...-redux-complex/dist/big-dom-generator.css → ...-dom-with-stacking-context-scrollable.css b/...-redux-complex/dist/big-dom-generator.css → ...-dom-with-stacking-context-scrollable.css
diff --git a/resources/todomvc/architecture-examples/backbone-complex/dist/index.html b/resources/todomvc/architecture-examples/backbone-complex/dist/index.html
diff --git a/resources/todomvc/architecture-examples/backbone-complex/scripts/build.js b/resources/todomvc/architecture-examples/backbone-complex/scripts/build.js
@@ -8,11 +8,12 @@ const options = {
     callerDirectory: path.resolve(__dirname),
     sourceDirectory: path.join("..", "node_modules", "todomvc-backbone", "dist"),
     title: "TodoMVC: Backbone Complex DOM",
-    filesToMove: ["node_modules/big-dom-generator/dist/big-dom-generator.css", "node_modules/big-dom-generator/dist/logo.png"],
+    filesToMove: ["node_modules/big-dom-generator/dist/big-dom-with-stacking-context-scrollable.css", "node_modules/big-dom-generator/dist/logo.png"],
     cssFilePath: path.resolve(__dirname, "..", "node_modules", "big-dom-generator", "utils", "app.css"),
     cssFileNamePattern: /^index.*\.css$/,
     standaloneDirectory: path.resolve(__dirname, "..", "..", "backbone"),
     complexDirectory: path.resolve(__dirname, ".."),
+    cssFilesToAddLinksFor: ["big-dom-with-stacking-context-scrollable.css"],
 };
 
 buildComplex(options);
diff --git a/...svelte-complex/dist/big-dom-generator.css → ...-dom-with-stacking-context-scrollable.css b/...svelte-complex/dist/big-dom-generator.css → ...-dom-with-stacking-context-scrollable.css
diff --git a/resources/todomvc/architecture-examples/jquery-complex/dist/index.html b/resources/todomvc/architecture-examples/jquery-complex/dist/index.html
diff --git a/resources/todomvc/architecture-examples/jquery-complex/scripts/build.js b/resources/todomvc/architecture-examples/jquery-complex/scripts/build.js
@@ -9,13 +9,14 @@ const options = {
     sourceDirectory: path.join("..", "node_modules", "todomvc-jquery", "dist"),
     title: "jQuery • TodoMVC Complex DOM",
     filesToMove: [
-        "node_modules/big-dom-generator/dist/big-dom-generator.css",
+        "node_modules/big-dom-generator/dist/big-dom-with-stacking-context-scrollable.css",
         "node_modules/big-dom-generator/dist/logo.png"
     ],
     cssFilePath: path.resolve(__dirname, "..", "node_modules", "big-dom-generator", "utils", "app.css"),
     cssFileNamePattern: /^index.*\.css$/,
     standaloneDirectory: path.resolve(__dirname, "..", "..", "jquery"),
     complexDirectory: path.resolve(__dirname, ".."),
+    cssFilesToAddLinksFor: ["big-dom-with-stacking-context-scrollable.css"],
 };
 
 buildComplex(options);
diff --git a/...es/vue-complex/dist/big-dom-generator.css → ...-dom-with-stacking-context-scrollable.css b/...es/vue-complex/dist/big-dom-generator.css → ...-dom-with-stacking-context-scrollable.css
diff --git a/resources/todomvc/architecture-examples/lit-complex/dist/index.html b/resources/todomvc/architecture-examples/lit-complex/dist/index.html
diff --git a/resources/todomvc/architecture-examples/lit-complex/scripts/build.js b/resources/todomvc/architecture-examples/lit-complex/scripts/build.js
@@ -9,7 +9,7 @@ const options = {
     sourceDirectory: path.join("..", "node_modules", "todomvc-lit", "dist"),
     title: "TodoMVC: Lit Complex DOM",
     filesToMove: [
-        "node_modules/big-dom-generator/dist/big-dom-generator.css",
+        "node_modules/big-dom-generator/dist/big-dom-with-stacking-context-scrollable.css",
         "node_modules/big-dom-generator/dist/logo.png",
         "node_modules/big-dom-generator/utils/web-components-css/app.css",
         "node_modules/big-dom-generator/utils/web-components-css/default-variables.css",
@@ -20,6 +20,7 @@ const options = {
     scriptsToLink: ["todo-item-extra-css.js", "todo-list-extra-css.js"],
     standaloneDirectory: path.resolve(__dirname, "..", "..", "lit"),
     complexDirectory: path.resolve(__dirname, ".."),
+    cssFilesToAddLinksFor: ["big-dom-with-stacking-context-scrollable.css"],
 };
 
 buildComplex(options);
diff --git a/...vc/architecture-examples/preact-complex/dist/big-dom-with-stacking-context-scrollable.css b/...vc/architecture-examples/preact-complex/dist/big-dom-with-stacking-context-scrollable.css
diff --git a/resources/todomvc/architecture-examples/preact-complex/dist/index.html b/resources/todomvc/architecture-examples/preact-complex/dist/index.html
diff --git a/resources/todomvc/architecture-examples/preact-complex/scripts/build.js b/resources/todomvc/architecture-examples/preact-complex/scripts/build.js
@@ -8,9 +8,10 @@ const options = {
     callerDirectory: path.resolve(__dirname),
     sourceDirectory: path.join("..", "node_modules", "todomvc-preact", "dist"),
     title: "TodoMVC: Preact Complex DOM",
-    filesToMove: ["node_modules/big-dom-generator/dist/big-dom-generator.css", "node_modules/big-dom-generator/dist/logo.png", "node_modules/big-dom-generator/utils/app.css"],
+    filesToMove: ["node_modules/big-dom-generator/dist/big-dom-with-stacking-context-scrollable.css", "node_modules/big-dom-generator/dist/logo.png", "node_modules/big-dom-generator/utils/app.css"],
     standaloneDirectory: path.resolve(__dirname, "..", "..", "preact"),
     complexDirectory: path.resolve(__dirname, ".."),
+    cssFilesToAddLinksFor: ["big-dom-with-stacking-context-scrollable.css"],
 };
 
 buildComplex(options);
diff --git a/...ngular-complex/dist/big-dom-generator.css → ...e-examples/react-complex/dist/big-dom.css b/...ngular-complex/dist/big-dom-generator.css → ...e-examples/react-complex/dist/big-dom.css
diff --git a/resources/todomvc/architecture-examples/react-complex/dist/index.html b/resources/todomvc/architecture-examples/react-complex/dist/index.html
diff --git a/resources/todomvc/architecture-examples/react-complex/scripts/build.js b/resources/todomvc/architecture-examples/react-complex/scripts/build.js
@@ -8,7 +8,7 @@ const options = {
     callerDirectory: path.resolve(__dirname),
     sourceDirectory: path.join("..", "node_modules", "todomvc-react", "dist"),
     title: "TodoMVC: React Complex DOM",
-    filesToMove: ["node_modules/big-dom-generator/dist/big-dom-generator.css", "node_modules/big-dom-generator/dist/logo.png", "node_modules/big-dom-generator/utils/app.css"],
+    filesToMove: ["node_modules/big-dom-generator/dist/big-dom.css", "node_modules/big-dom-generator/dist/logo.png", "node_modules/big-dom-generator/utils/app.css"],
     standaloneDirectory: path.resolve(__dirname, "..", "..", "react"),
     complexDirectory: path.resolve(__dirname, ".."),
 };

diff --git a/...chitecture-examples/react-redux-complex/dist/big-dom-with-stacking-context-scrollable.css b/...chitecture-examples/react-redux-complex/dist/big-dom-with-stacking-context-scrollable.css
diff --git a/resources/todomvc/architecture-examples/react-redux-complex/dist/index.html b/resources/todomvc/architecture-examples/react-redux-complex/dist/index.html
diff --git a/resources/todomvc/architecture-examples/react-redux-complex/scripts/build.js b/resources/todomvc/architecture-examples/react-redux-complex/scripts/build.js
@@ -8,9 +8,10 @@ const options = {
     callerDirectory: path.resolve(__dirname),
     sourceDirectory: path.join("..", "node_modules", "todomvc-react-redux", "dist"),
     title: "TodoMVC: React-Redux Complex DOM",
-    filesToMove: ["node_modules/big-dom-generator/dist/big-dom-generator.css", "node_modules/big-dom-generator/dist/logo.png", "node_modules/big-dom-generator/utils/app.css"],
+    filesToMove: ["node_modules/big-dom-generator/dist/big-dom-with-stacking-context-scrollable.css", "node_modules/big-dom-generator/dist/logo.png", "node_modules/big-dom-generator/utils/app.css"],
     standaloneDirectory: path.resolve(__dirname, "..", "..", "react-redux"),
     complexDirectory: path.resolve(__dirname, ".."),
+    cssFilesToAddLinksFor: ["big-dom-with-stacking-context-scrollable.css"],
 };
 
 buildComplex(options);
diff --git a/...vc/architecture-examples/svelte-complex/dist/big-dom-with-stacking-context-scrollable.css b/...vc/architecture-examples/svelte-complex/dist/big-dom-with-stacking-context-scrollable.css
diff --git a/resources/todomvc/architecture-examples/svelte-complex/dist/index.html b/resources/todomvc/architecture-examples/svelte-complex/dist/index.html
diff --git a/resources/todomvc/architecture-examples/svelte-complex/scripts/build.js b/resources/todomvc/architecture-examples/svelte-complex/scripts/build.js
@@ -8,9 +8,10 @@ const options = {
     callerDirectory: path.resolve(__dirname),
     sourceDirectory: path.join("..", "node_modules", "todomvc-svelte", "dist"),
     title: "TodoMVC: Svelte Complex DOM",
-    filesToMove: ["node_modules/big-dom-generator/dist/big-dom-generator.css", "node_modules/big-dom-generator/dist/logo.png", "node_modules/big-dom-generator/utils/app.css"],
+    filesToMove: ["node_modules/big-dom-generator/dist/big-dom-with-stacking-context-scrollable.css", "node_modules/big-dom-generator/dist/logo.png", "node_modules/big-dom-generator/utils/app.css"],
     standaloneDirectory: path.resolve(__dirname, "..", "..", "svelte"),
     complexDirectory: path.resolve(__dirname, ".."),
+    cssFilesToAddLinksFor: ["big-dom-with-stacking-context-scrollable.css"],
 };
 
 buildComplex(options);
diff --git a/...ckbone-complex/dist/big-dom-generator.css → ...ure-examples/vue-complex/dist/big-dom.css b/...ckbone-complex/dist/big-dom-generator.css → ...ure-examples/vue-complex/dist/big-dom.css
diff --git a/resources/todomvc/architecture-examples/vue-complex/dist/index.html b/resources/todomvc/architecture-examples/vue-complex/dist/index.html
diff --git a/...mples/vue-complex/dist/js/app.2f47dc41.js → ...mples/vue-complex/dist/js/app.5ee6a5db.js b/...mples/vue-complex/dist/js/app.2f47dc41.js → ...mples/vue-complex/dist/js/app.5ee6a5db.js
diff --git a/...s/vue-complex/dist/js/app.2f47dc41.js.map → ...s/vue-complex/dist/js/app.5ee6a5db.js.map b/...s/vue-complex/dist/js/app.2f47dc41.js.map → ...s/vue-complex/dist/js/app.5ee6a5db.js.map
diff --git a/resources/todomvc/architecture-examples/vue-complex/scripts/build.js b/resources/todomvc/architecture-examples/vue-complex/scripts/build.js
@@ -8,7 +8,7 @@ const options = {
     callerDirectory: path.resolve(__dirname),
     sourceDirectory: path.join("..", "node_modules", "todomvc-vue", "dist"),
     title: "TodoMVC: Vue Complex DOM",
-    filesToMove: ["node_modules/big-dom-generator/dist/big-dom-generator.css", "node_modules/big-dom-generator/dist/logo.png"],
+    filesToMove: ["node_modules/big-dom-generator/dist/big-dom.css", "node_modules/big-dom-generator/dist/logo.png"],
     cssFilePath: path.resolve(__dirname, "..", "node_modules", "big-dom-generator", "utils", "app.css"),
     cssFolder: "css",
     cssFileNamePattern: /^app.*\.css$/,

diff --git a/resources/todomvc/architecture-examples/vue/dist/index.html b/resources/todomvc/architecture-examples/vue/dist/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en" data-framework="vue" data-version="3.2.47" data-features="webpack"><head><meta charset="UTF-8"/><meta name="description" content="A TodoMVC workload app for Speedometer!"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta http-equiv="X-UA-Compatible" content="ie=edge"/><title>TodoMVC: Vue</title><script defer="defer" src="js/chunk-vendors.cbd90c7c.js"></script><script defer="defer" src="js/app.2f47dc41.js"></script><link href="css/app.319576e1.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but todomvc-vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><section class="todoapp"></section><footer class="info"><p>Click on input field to write your todo.</p><p>At least two characters are needed to be a valid entry.</p><p>Press 'enter' to add the todo.</p><p>Double-click to edit a todo</p></footer></body></html>
+<!doctype html><html lang="en" data-framework="vue" data-version="3.2.47" data-features="webpack"><head><meta charset="UTF-8"/><meta name="description" content="A TodoMVC workload app for Speedometer!"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta http-equiv="X-UA-Compatible" content="ie=edge"/><title>TodoMVC: Vue</title><script defer="defer" src="js/chunk-vendors.cbd90c7c.js"></script><script defer="defer" src="js/app.5ee6a5db.js"></script><link href="css/app.319576e1.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but todomvc-vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><section class="todoapp"></section><footer class="info"><p>Click on input field to write your todo.</p><p>At least two characters are needed to be a valid entry.</p><p>Press 'enter' to add the todo.</p><p>Double-click to edit a todo</p></footer></body></html>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html><html lang="en" data-framework="vue" data-version="3.2.47" data-features="webpack"><head><meta charset="UTF-8"/><meta name="description" content="A TodoMVC workload app for Speedometer!"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta http-equiv="X-UA-Compatible" content="ie=edge"/><title>TodoMVC: Vue</title><script defer="defer" src="js/chunk-vendors.cbd90c7c.js"></script><script defer="defer" src="js/app.2f47dc41.js"></script><link href="css/app.319576e1.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but todomvc-vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><section class="todoapp"></section><footer class="info"><p>Click on input field to write your todo.</p><p>At least two characters are needed to be a valid entry.</p><p>Press 'enter' to add the todo.</p><p>Double-click to edit a todo</p></footer></body></html>
		<!doctype html><html lang="en" data-framework="vue" data-version="3.2.47" data-features="webpack"><head><meta charset="UTF-8"/><meta name="description" content="A TodoMVC workload app for Speedometer!"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta http-equiv="X-UA-Compatible" content="ie=edge"/><title>TodoMVC: Vue</title><script defer="defer" src="js/chunk-vendors.cbd90c7c.js"></script><script defer="defer" src="js/app.5ee6a5db.js"></script><link href="css/app.319576e1.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but todomvc-vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><section class="todoapp"></section><footer class="info"><p>Click on input field to write your todo.</p><p>At least two characters are needed to be a valid entry.</p><p>Press 'enter' to add the todo.</p><p>Double-click to edit a todo</p></footer></body></html>