ProtoFluid

Overview #

ProtoFluid delivers an in-document responsive design testing app that manages flexible <iframe> viewports, pop-up windows, viewport meta modification and more.

Browser Support #

ProtoFluid is targeted at web developers and takes advantage of modern web browser features.

It assumes an up-to-date web browser. The most recent versions of Chrome (Blink), Firefox (Gecko) and Safari (WebKit) are supported.

Hopefully Servo as well, one day :)

The ProtoFluid app #

Page rendering #

ProtoFluid does not simulate mobile devices.

Each frame/pop-up provides an accurate viewport for the purpose of testing.

Try ProtoFluid in different operating systems and browsers to maximise your responsive testing coverage.

Refresh #

ProtoFluid offers two refresh options, depending on which mode it is in.

  1. Document refresh.
  2. CSS refresh.

Both use cache busting to achieve a hard refresh.

CSS refresh only applies to external CSS.

Scroll to selector #

Find elements across one or multiple viewports.

It can be used to iterate through content. For example: section by section:

section

Scrollbars #

Inset scrollbars that occupy viewport space can affect content layout.

ProtoFluid offers scrollbar overrides to handle this.

Viewport zoom #

Zoom in for increased detail.

It can be hard to test large screen viewports on devices like laptops.

Set the viewport to the large size you wish to test and scale it down with the zoom controls.

Installation#

  1. Download ProtoFluid.
  2. Add the /ProtoFluid folder and contents to your project.
  3. Import the ProtoFluidButton.js script.
  4. Add a <protofluid-button> element.

Like this one

  1. Load up your project.
  2. Click the button to initialise ProtoFluid.

ProtoFluid.js does not support being loaded as a module.

Robustness #

The app is designed to operate in potentially hostile environments.

  • Everything is contained in an IIFE.
  • CSS is specific to the ProtoFluid web components.
  • The design leans heavily on progressive enhancement.

Everything required to run the app is contained within the script.

No remote resources are fetched.

App initialisation #

Inclusion as a script will initialise automatically, but the user interface is not automatically shown as it might be confusing if not expecting it.

Show the app #

The app is initially hidden when included as a <script>.

The ProtoFluid button is the recommended method of loading/showing ProtoFluid.

However, you can included the script directly and run protofluid.show() in the dev console.

Adding frame definitions #

Coming soon!

You will be able to edit the app frame definitions via config.json

Viewport meta testing #

The app will modify the viewport meta tag to achieve your chosen viewport width.

This enables testing multiple viewports on a single device. You could test the entire range of iPhone sizes on one iPhone.

The ProtoFluid button #

ProtoFluid can be loaded on-demand via the <protofluid-button> component.

The component's button loads and then shows the ProtoFluid app when clicked.

The ProtoFluid button inherits your project's <button> styles.

Installation

Include the script and markup:

<protofluid-button></protofluid-button>

The ‘hidden’ attribute ensures that the button is not shown until the ProtoFluidButton.js script enables it.

ProtoFluid.js is sourced from the same directory as ProtoFluidButton.js

You can supply custom button text:

<protofluid-button>Custom text</protofluid-button>

Button text will default to ‘ProtoFluid’ if none is provided.

Theme

If a custom theme color is not supplied, ProtoFluid will use the button background.

Custom CSS #

Coming soon!

ProtoFluid will support CSS theming.

  • Create a CSS file containing your style adjustments.
  • Set config.theme in ProtoFluid.js to the file location.

Keyboard Shortcuts #

Coming soon!

  • W: Clip height
  • S: Extend height
  • E: Orientation switch
  • R: Refresh CSS

Content security policy #

Frames #

If you use a CSP it can be configured to allow ProtoFluid to create an <iframe>

This means editing the frame-src directive.

'self' will allow ProtoFluid to create iframes since it operates on the same origin.

frame-src 'self'

frame-ancestors 'none' will prevent the app loading an <iframe>.

Trusted Types #

ProtoFluid writes new content to the page.

Strict use of Trusted Types will disallow this.

You can add a Content Security Policy exception for ProtoFluid.

<meta
	http-equiv='Content-Security-Policy'
	content="require-trusted-types-for 'script'; trusted-types protofluid;"
>

X-Frame-Options #


This feature is obsolete.

Use Content Security Policy instead.

App frame creation will fail if X-Frame-Options is set to DENY. The app qualifies as SAMEORIGIN.

The app will not be able to load your document if X-Frame-Options is set to DENY or SAMEORIGIN.

Script-based iframe breakout

If you are running code that breaks out of an <iframe> this will prevent ProtoFluid from creating one.

You can still use the window and viewport meta testing methods.