Move “View on Frontend” link to customize-footer-actions; make persistent

[westonruter]

In the plugin right now, a “View on Frontend” link/button appears in the customize-header-actions whenever the snapshot is saved. With changesets, however, the state is saved at AUTOSAVE_INTERVAL and it is saved whenever focus on the window is removed. In short, the changeset can be considered to be saved at any time and not require a proactive Save. Because of this, the “View on Frontend” link can be persistent and not only show up when the changeset is saved. Also, I think it makes more sense for this link to be on the bottom next to Collapse (Hide Controls) and the device preview buttons, since really this is just another way to preview the changes. Maybe it could be added along with the device preview buttons but with an external dashicon.

Here is the logic for opening the frontend URL in a new window on demand:

var urlParser = document.createElement( 'a' );
urlParser.href = previewFrame.previewUrl();

params = _.extend(
	api.utils.parseQueryString( urlParser.search.substr( 1 ) ),
	{
		customize_changeset_uuid: previewFrame.query.customize_changeset_uuid,
		customize_theme: previewFrame.query.customize_theme
	}
);
urlParser.search = $.param( params );

onceProcessingComplete = function() {
	var request;
	if ( api.state( 'processing' ).get() > 0 ) {
		return;
	}

	api.state( 'processing' ).unbind( onceProcessingComplete );

	request = api.requestChangesetUpdate();
	request.done( function() {
		window.open( urlParser.href ); // <= Open the frontend URL in a new window.
	} );
};

if ( 0 === api.state( 'processing' ).get() ) {
	onceProcessingComplete();
} else {
	api.state( 'processing' ).bind( onceProcessingComplete );
}

[westonruter]

The JS logic here should probably be encapsulated into a new core API, like wp.customize.previewer.getFrontendPreviewUrl().

[westonruter]

This feature has been merged into 4.9 via the Publish Settings section.