Implement simplified zoom interface

Based on the image in the issue description, the range slider for zoom should not include additional values like X, and Y points or the "debug to scroll" button. Do I need to hide these in the current tray or create a new one for the range slider? Thank you.

Could we add a "debug" prop to the component to show these things? In a future issue, we could consider toggling that based on an environment variable (or something else) but for now it could be something that developers would have to turn on manually within code.

I have added a prop debug, if it is true then it will display the X, Y coordinates and "Debug: scroll to middle" button and on debug false it will only display the zoom range slider.

Debug: false

Debug: True

Those screenshots look great, @Gauravvvv! 🤩

Keeping at , but IMHO this should be integrated with AppConfiguration (introduced by #3452582) — see MR review.

Merged in upstream, CI should be green again 👍

This looks pretty nice! It would be super cool if we could slightly smoothen the transition when zooming. This can be a follow-up but could be worked on here too in case you're interested in this 😊

Addressed feedback on using AppConfiguration as well smoothen the transition when zooming

Gauravvvv → changed the visibility of the branch 3463307-zoom-interface to hidden.

Gauravvvv → changed the visibility of the branch 3463307-zoom-interface to active.

Unit tests and E2E tests are failing … 😅

Still not passing tests … 😅 why are you marking this ? 🤔

Hi @Wim Leers, I changed the status to needs review before the test results.

This is now ready for review. I picked up from the work by @gauravvvv and implemented the suggestion from @lauriii in #10. Zoom controls now exist in their own React component and an array of tests have been added (and the existing tests cleaned up as a result of me getting absolutely stuck on a weird race condition that seemingly was nothing to do with this issue!)

Looking good - got some nits and bits in the MR that I'm sure can be addressed pretty easily.

Awesome progress here! 👏

Can we get an updated GIF in the issue summary to showcase that awesomeness? 🙏😇

Also: AFAICT this is ready for review! 😄

Just adding a comment here to note that there is some testing code added in ✨ Include component props form in undo Needs review (commit in MR: 5aa96e) which should be updated once this issue lands and we have the `loadURLandWaitForXBLoaded` command available.

Removed the debugging controls from the PoC and updated the IS accordingly. I don't think there is really a need for them right now and we can easily add them back if that changes in the future.

So nice to see this improvement land! 🚀 🎉