Add paired browsing interface for Transitional mode to aid with checking parity

[westonruter]

Currently when checking a site for AMP compatibility, we have guidance to use Transitional mode and then check the AMP vs non-AMP version to see if there are discrepancies. One way to do that is to have the non-AMP version open in one window and the AMP version in another and browse around the site in both windows to check for parity. There are a couple problems with this:

1. When in Transitional mode, links on an AMP page do not link to the AMP version for URLs of the site. In other words, there is not yet any AMP-to-AMP linking (Automatically append ?amp to URLs in Paired mode (AMP-to-AMP navigation) #1389). This means the user would have to constantly click the admin bar item to go to the AMP version after navigating. That's annoying and the user is prone to forget they aren't looking at the AMP version.
2. Manually navigating in two windows is tedious, as you have to perform every navigation twice, while also keep scrolling both windows to ensure visual consistency all the way down the page.

What if administrators had an interface in Transitional mode which facilitates a side-by-side comparisons? Now that the Admin Bar can be used in AMP pages along with custom scripts (#3187), we can use this to include an AMP admin bar menu item called “Compare with AMP version”. Clicking this link can start a paired browsing session in another window:

Imagine being on the non-AMP version and clicking that admin menu option to open a new window with the AMP version. As you navigate between around the site in the initial non-AMP window, the corresponding slave AMP window could be synchronized, including the current URL and scroll position. That would make it really easy to quickly navigate around the site and compare the AMP and non-AMP version for parity.

Note that window.resizeTo() does not work unless you've explicitly opened a window via window.open(). Therefore, it wouldn't be possible to programmatically resize the current window. Therefore, achieving this may require using two iframes placed side-by-side on a page. The two windows would each report to the parent window the current scroll position and URL via postMessage and the parent window would relay the position and current URL to the other window.

In order to achieve this, we'd need to make sure that when in this mode, the frontend of the site gets X-Frame-Options: SAMEORIGIN and Content-Security-Policy: frame-ancestors 'self' sent, as the Customizer preview does in \WP_Customize_Manager::filter_iframe_security_headers() (and in send_frame_options_header()). Perhaps we could just send those headers always when the Admin Bar is shown. We should also consider just going ahead and enabling A2A linking (#1389), at least when the user is logged-in. There could be a filter to override whether A2A is enabled, where it is enabled by default on Transitional mode and disabled by default when in Reader mode.

[westonruter]

I put together a quick prototype of this, extending the AMP-to-AMP Linking plugin (see #1389).

Here's a video demo: https://youtu.be/T9LZq7CE0JY

The paired browsing option is made available to sites in Transitional mode.

A couple screenshots:

Non-AMP and AMP versions are shown side-by-side with locked scroll positions:

[csossi]

Verified in QA