Pagespeed 2.3.0 Adjustments (BoldGrid#660)

* Fixed placeholder issue. Fixed grammar issue. Fixed breakdown/recommendation block width issues if the data table is too broad. Added links to URLs within data breakdown to allow users to view reported URLs/files. Fixed localization issues under certain translations that would break JavaScript.
* Added missing title attributes in allowed tags. Updated URL breakdown items for better escaping. Added the absent breakdown for "source" items.
* Added clarification comment for the URL field conditionals to explain why the else doesn't escape the value.
* Added GA tracking for user interaction. Updated JS register to match the format of other enqueues.
* Updated escaping of JS/CSS files in enqueue/register.
* Updated GA send format for better readability. I removed unused code from PageSpeed widget JS.

Author: jacobd91

PageSpeed_Page.php

@@ -38,7 +38,7 @@ public function run() {
 	public static function admin_print_scripts_w3tc_pagespeed() {
 		wp_register_script(
 			'w3tc-pagespeed',
-			esc_url( plugin_dir_url( __FILE__ ) . 'PageSpeed_Page_View.js' ),
+			esc_url( plugins_url( 'PageSpeed_Page_View.js', W3TC_FILE ) ),
 			array(),
 			W3TC_VERSION,
 			true
@@ -57,7 +57,7 @@ public static function admin_print_scripts_w3tc_pagespeed() {
 
 		wp_enqueue_style(
 			'w3tc-pagespeed',
-			plugins_url( 'PageSpeed_Page_View.css', W3TC_FILE ),
+			esc_url( plugins_url( 'PageSpeed_Page_View.css', W3TC_FILE ) ),
 			array(),
 			W3TC_VERSION
 		);

PageSpeed_Page_View.js

@@ -67,6 +67,20 @@ jQuery(document).ready(function ($) {
 	 * @return void
 	 */
 	function w3tcps_breakdown_items_toggle() {
+		if (window.w3tc_ga) {
+			w3tc_ga(
+				'send',
+				'event',
+				{
+					eventCategory: 'w3tc_pagespeed',
+					eventAction: 'metric',
+					eventLabel: $(this).text(),
+					eventValue: 0,
+					transport: 'beacon'
+				}
+			);
+		}
+
 		$(this).find('.dashicons').toggleClass("dashicons-arrow-up-alt2 dashicons-arrow-down-alt2");
 		$(this).next().slideToggle();
 	}
@@ -79,6 +93,20 @@ jQuery(document).ready(function ($) {
 	 * @return void
 	 */
 	function w3tcps_mobile_toggle() {
+		if (window.w3tc_ga) {
+			w3tc_ga(
+				'send',
+				'event',
+				{
+					eventCategory: 'w3tc_pagespeed',
+					eventAction: 'mobile_tab',
+					eventLabel: $('#w3tcps_control_mobile').text(),
+					eventValue: 0,
+					transport: 'beacon'
+				}
+			);
+		}
+
 		$('#w3tcps_control_desktop').removeClass('nav-tab-active');
 		$('#w3tcps_desktop').hide();
 		$('#w3tcps_control_mobile').addClass('nav-tab-active');
@@ -93,6 +121,20 @@ jQuery(document).ready(function ($) {
 	 * @return void
 	 */
 	function w3tcps_desktop_toggle() {
+		if (window.w3tc_ga) {
+			w3tc_ga(
+				'send',
+				'event',
+				{
+					eventCategory: 'w3tc_pagespeed',
+					eventAction: 'desktop_tab',
+					eventLabel: $('#w3tcps_control_desktop').text(),
+					eventValue: 0,
+					transport: 'beacon'
+				}
+			);
+		}
+
 		$('#w3tcps_control_mobile').removeClass('nav-tab-active');
 		$('#w3tcps_mobile').hide();
 		$('#w3tcps_control_desktop').addClass('nav-tab-active');
@@ -108,6 +150,21 @@ jQuery(document).ready(function ($) {
 	 */
 	function w3tcps_audit_filter(event) {
 		event.preventDefault();
+
+		if (window.w3tc_ga) {
+			w3tc_ga(
+				'send',
+				'event',
+				{
+					eventCategory: 'w3tc_pagespeed',
+					eventAction: 'filter_tab',
+					eventLabel: $(this).text(),
+					eventValue: 0,
+					transport: 'beacon'
+				}
+			);
+		}
+
 		if ('ALL' === $(this).text()) {
 			$('.w3tcps_breakdown .audits').show();
 		} else if ($(this).text().trim) {
@@ -188,6 +245,20 @@ jQuery(document).ready(function ($) {
 	$(document).on('click', '.copyurl', w3tcps_copyurl);
 
 	$('.w3tcps_content').on('click', '.w3tcps_analyze', function () {
+		if (window.w3tc_ga) {
+			w3tc_ga(
+				'send',
+				'event',
+				{
+					eventCategory: 'w3tc_pagespeed',
+					eventAction: 're_analyze',
+					eventLabel: $(this).closest('.page_post').find('.w3tcps_buttons').attr('page_post_url'),
+					eventValue: 0,
+					transport: 'beacon'
+				}
+			);
+		}
+
 		w3tcps_analyze($(this).closest('.page_post'), true);
 	});
 

PageSpeed_Widget.php

@@ -40,7 +40,7 @@ public function run() {
 	public static function admin_print_scripts_w3tc_pagespeed_widget() {
 		wp_register_script(
 			'w3tc-widget-pagespeed',
-			plugins_url( 'PageSpeed_Widget_View.js', W3TC_FILE ),
+			esc_url( plugins_url( 'PageSpeed_Widget_View.js', W3TC_FILE ) ),
 			array(),
 			W3TC_VERSION,
 			'true'
@@ -58,7 +58,7 @@ public static function admin_print_scripts_w3tc_pagespeed_widget() {
 
 		wp_enqueue_style(
 			'w3tc-widget-pagespeed',
-			plugins_url( 'PageSpeed_Widget_View.css', W3TC_FILE ),
+			esc_url( plugins_url( 'PageSpeed_Widget_View.css', W3TC_FILE ) ),
 			array(),
 			W3TC_VERSION
 		);

PageSpeed_Widget_View.js

@@ -52,37 +52,6 @@ jQuery(document).ready(function ($) {
 		});
 	}
 
-	/**
-	 * Toggle mobile view.
-	 *
-	 * @since 2.3.0
-	 *
-	 * @return void
-	 */
-	function w3tcps_mobile_toggle() {
-		$('#w3tcps_control_desktop').removeClass('nav-tab-active');
-		$('#w3tcps_desktop').hide();
-		$('#w3tcps_control_mobile').addClass('nav-tab-active');
-		$('#w3tcps_mobile').show();
-	}
-
-	/**
-	 * Toggle desktop view.
-	 *
-	 * @since 2.3.0
-	 *
-	 * @return void
-	 */
-	function w3tcps_desktop_toggle() {
-		$('#w3tcps_control_mobile').removeClass('nav-tab-active');
-		$('#w3tcps_mobile').hide();
-		$('#w3tcps_control_desktop').addClass('nav-tab-active');
-		$('#w3tcps_desktop').show();
-	}
-
-	$(document).on('click', '#w3tcps_control_mobile', w3tcps_mobile_toggle);
-	$(document).on('click', '#w3tcps_control_desktop', w3tcps_desktop_toggle);
-
 	$('.w3tcps_buttons').on('click', '.w3tcps_refresh', function () {
 		w3tcps_load(true);
 	});