Experimental Workload: Responsive Design

[issackjohn]

This pull request introduces a new experimental responsive design workload, featuring a single-page cooking website built with Lit and Tailwind CSS.

The hosted version can be found here.
Quick link to dev mode with workload selected.

Please look at the README in experimental/responsive-design for more information about the code and how it is organized.

Not included in this PR:

• Support for different languages

[issackjohn]

Adding reviewers for visibility, feel free to take a look :)

[rniwa]

It seems to me that the test doesn't really take the advantage of responsive design since iframe's size is always same. Maybe we should add steps to resize iframe so that responsive design comes into play?

[issackjohn]

It seems to me that the test doesn't really take the advantage of responsive design since iframe's size is always same. Maybe we should add steps to resize iframe so that responsive design comes into play?

Currently, we are resizing the the iframe with id #content-iframe in the ReduceWidthIn5Steps & IncreaseWidthIn5Steps steps. Do you mean that we should be resizing a different iframe?

[rniwa]

It seems to me that the test doesn't really take the advantage of responsive design since iframe's size is always same. Maybe we should add steps to resize iframe so that responsive design comes into play?

Currently, we are resizing the the iframe with id #content-iframe in the ReduceWidthIn5Steps & IncreaseWidthIn5Steps steps. Do you mean that we should be resizing a different iframe

Oh, I see. We're resizing the inner iframe. I guess that works.

[issackjohn]

Gentle ping 😄

[camillobruni]

I still see rather short run times for individual steps (close to 1.6ms in chrome canary) which might introduce a bit too much noise in the long run.

Responsive-Design
Responsive-Design/LoadChatAndExpandRecipe	5.85	±	0.46 (7.9%)	ms
Responsive-Design/ReduceWidthIn5Steps  12.96	±	0.45 (3.5%)	ms
Responsive-Design/ScrollToChatAndSendMessage	1.68	±	0.07 (4.4%)	ms
Responsive-Design/IncreaseWidthIn5Steps	11.37	±	0.28 (2.5%)	

ScrollToChatAndSendMessage and (and especially it's sub-items) will show some aliasing from timer resolution which is ~ 0.1ms on chrome.
In general, i'd bump the step durations by 1.5x or 2x even to be on par with other workloads.

[camillobruni]

Can we start off with 100% width/height as the maximum size (the step-resize sounds ok to be done with explicit sizes again)?
Albeit not fully exposed, we can set a custom viewport size in the params.mjs and it's used in the runner.
This workload would currently not support this directly.

[issackjohn]

Sounds good to me

[issackjohn]

I still see rather short run times for individual steps (close to 1.6ms in chrome canary) which might introduce a bit too much noise in the long run.

Responsive-Design
Responsive-Design/LoadChatAndExpandRecipe	5.85	±	0.46 (7.9%)	ms
Responsive-Design/ReduceWidthIn5Steps  12.96	±	0.45 (3.5%)	ms
Responsive-Design/ScrollToChatAndSendMessage	1.68	±	0.07 (4.4%)	ms
Responsive-Design/IncreaseWidthIn5Steps	11.37	±	0.28 (2.5%)	

ScrollToChatAndSendMessage and (and especially it's sub-items) will show some aliasing from timer resolution which is ~ 0.1ms on chrome. In general, i'd bump the step durations by 1.5x or 2x even to be on par with other workloads.

To bump up the step durations, I am thinking of

1. Expanding all the recipes as part of LoadChatAndExpandRecipe
2. Collapsing all the recipes as part of ScrollToChatAndSendMessage
   2.1 Sending a few more messages in the chat instead of just one.

currently no proposed changes for ReduceWidthIn5Steps & IncreaseWidthIn5Steps

[flashdesignory]

Some visual questions - these might not be relevant to the tests:

Is this spacing as expected?

The collapsed grid looks fine, but once expanded, the item moves to the next row - is that expected?
collapsed

expanded

The video tiles don't work - those are just placeholders?

[issackjohn]

Some visual questions - these might not be relevant to the tests:

Is this spacing as expected?

I'll add a fix for that. The webpage was designed to be viewed in 800x600, as that's how it will appear within the benchmark.

The collapsed grid looks fine, but once expanded, the item moves to the next row - is that expected? collapsed

Yes, that is expected. Do we prefer a different behavior?

The video tiles don't work - those are just placeholders?

Yes, they are just placeholders. We intended the video elements to be there but did not plan for them to play any actual videos.

[flashdesignory]

Some visual questions - these might not be relevant to the tests:
Is this spacing as expected?

I'll add a fix for that. The webpage was designed to be viewed in 800x600, as that's how it will appear within the benchmark.

• Thanks - I'd vote for supporting larger viewport sizes. This will ensure that the workload looks usable at larger viewports, in case we want to change what's supported in Speedometer later on.

The collapsed grid looks fine, but once expanded, the item moves to the next row - is that expected? collapsed

Yes, that is expected. Do we prefer a different behavior?

I guess it makes sense for the tests, since it shifts elements on the page. That said, it's not something you'd see on the web (hopefully). I'd expected a modal or something like that instead.

The video tiles don't work - those are just placeholders?

Yes, they are just placeholders. We intended the video elements to be there but did not plan for them to play any actual videos.

Thanks for clarifying.

[flashdesignory]

@issackjohn - maybe rebase / merge main, to get the updated test runner in there. That should ensure the checks don't fail.

[camillobruni]

Let's aim for > 5ms for each measured subtest (I'd still aim for roughly 10ms if possible). Does this sound reasonable?

[issackjohn]

@issackjohn - maybe rebase / merge main, to get the updated test runner in there. That should ensure the checks don't fail.

Sounds good.

[issackjohn]

Let's aim for > 5ms for each measured subtest (I'd still aim for roughly 10ms if possible). Does this sound reasonable?

Sounds reasonable to me, I'll add some more actions.

[camillobruni]

Just double checked on Chrome, Firefox, Safari and the noise levels are in-sync with the rest of the workloads.
The minimum step times look good now I would say.