Mobile preview on standalone

Description - Feature on standalone to allow the users to preview their plugins on mobile and other screen sizes. Similar to chrome tool in the console to preview a website in different screen sizes.

Goal - More activations

Eng notes on preview: https://www.loom.com/share/cee930b1879d445f9b9579ff4b437cc6

\ Scenario: Start an A/B

Given any user

When they open standalone on P1 apps - Comments, Countdown Timer, FAQ, Form Builder, Galleries, PayPal Button, Popup, Sliders, Social Feed, Social feed, Gallery, Multislider

And their platform is not Wix/Weebly

Then they should be assigned either to “control” or “mobile_preview” groups of “mobile_preview” A/b

Scenario: New floating button in app view in standalone top bar

Given a user in group “mobile_preview”

And they are not on mobile device

When they open standalone

Then they should see a new floating button on the right of page with fa-desktop icon on it

Note: Style - the same as language dropdown on Standalone, but with icon font size 20px

alt_text

Scenario: On hover show “Preview screen size” text

Given a user sees the floating button

When they hover on the button

Then they should see a popover text saying “Preview screen size”

Scenario: Show dropdown title and screen size options on click

Given a user sees the floating button

When they click on it

Then they should see a dropdown with screen size options and “Preview screen size” title

Options:

Desktop - Icon fa-desktop - size as it is without limits

Tablet - Icon fa-tablet - width 768

Mobile - Icon fa-mobile - width 360

alt_text

Scenario: Change the preview when user changes to different screen size

Given a user sees dropdown with screen size options

When they click on any option

Then the dropdown should close

And the app preview width should change accordingly to the selected option with animation (animation nice to have, no hard requirement)

And the icon of the floating button should change accordingly

And the event should be written to GA with following parameters:

Category: standalone_click

Action: change_preview_size

Label: desktop / tablet / mobile - depending on which button was clicked

Note - animation similar to this:

alt_text

Scenario: Background on tablet and mobile should be color7 from style guide

Given a user sees dropdown with screen size options

When they select Tablet or Mobile option

Then the outside of app preview pane should be color7 from style guide

Scenario: This should work seamlessly for all P1 apps

P1 apps: Comments, Countdown Timer, FAQ, Form Builder, Galleries, PayPal Button, Popup, Sliders, Social Feed

Given a user opens standalone on P1 apps

When they select Tablet or Mobile option

Then they should not see broken mobile versions