Implement DJE Safe Mode Feature

[Miraeld]

• Frontend Changes:

Remove the placeholder from the textarea. Add a checkbox labeled "Delay JavaScript Execution safe mode" before the textarea. Display a warning message when the checkbox is checked, detailing potential performance impacts and suggesting users contact support.

• Backend Changes:

Implement logic to handle the checkbox state. Update the exclusions list based on the checkbox state. Ensure the system correctly applies these changes when the settings are saved.

[Miraeld]

Scope a solution

Frontend changes

• Remove the placeholder from the textarea and text under it. Delete these lines: https://github.com/wp-media/wp-rocket/blob/73488699424f726bef28dbf2c934340efcab8e47/inc/Engine/Admin/Settings/Page.php#L515-L516 and empty the placeholder here: https://github.com/wp-media/wp-rocket/blob/73488699424f726bef28dbf2c934340efcab8e47/inc/Engine/Admin/Settings/Page.php#L811

• Add a checkbox labeled "Delay JavaScript Execution safe mode" before the textarea.
  Add this after delay_js_exclusions_selected item here

Click to expand code

``` php 'delay_js_execution_safe_mode' => [ 'type' => 'checkbox', 'label' => __( 'Delay JavaScript Execution safe mode', 'rocket' ), 'container_class' => [ 'wpr-field--children', 'wpr-isParent', ], 'description' => $invalid_license ? __( 'Delay JavaScript Execution safe mode temporarily resolves issues with Delay JavaScript execution but may reduce your PageSpeed Scores and performance. Contact support for help excluding problematic scripts to use this feature fully.', 'rocket' ) : '', 'section' => 'js', 'parent' => 'delay_js', 'page' => 'file_optimization', 'default' => 0, 'sanitize_callback' => 'sanitize_checkbox', 'input_attr' => [ 'disabled' => get_rocket_option( 'delay_js_execution_safe_mode' ) ? 1 : 0, ], 'helper' => '', ], 'delay_js_execution_safe_mode_method' => [ 'type' => 'radio_buttons', 'label' => __( 'Delay JavaScript Execution safe mode', 'rocket' ), 'container_class' => [ 'wpr-field--children', 'wpr-field--js-execution-safe-mode-delivery', 'wpr-field--optimize-css-delivery', ], 'buttons_container_class' => '', 'parent' => 'delay_js_execution_safe_mode', 'section' => 'js', 'page' => 'file_optimization', 'default' => 'dje_safe_mode', 'sanitize_callback' => 'sanitize_checkbox', 'options' => [ 'dje_safe_mode' => [ 'label' => __( 'Delay JavaScript Execution safe mode', 'rocket' ), 'disabled' => $invalid_license ? 'disabled' : false, 'description' => '', // translators: %1$s = opening tag, %2$s = closing tag. 'warning' => $invalid_license ? [] : [ 'title' => __( 'This will decrease the effect of Delay JavaScript Execution', 'rocket' ), 'description' => __( 'This mode temporarily resolves issues with Delay JavaScript execution but may reduce your PageSpeed Scores and performance. Contact support for help excluding problematic scripts to use this feature fully.', 'rocket' ), 'button_label' => __( 'Activate Safe Mode', 'rocket' ), ], 'sub_fields' => $invalid_license ? [] : [ 'delay_js_exclusions' => [ 'type' => 'textarea', 'label' => __( 'Excluded JavaScript Files', 'rocket' ), 'description' => __( 'Specify URLs or keywords that can identify inline or JavaScript files to be excluded from delaying execution (one per line).', 'rocket' ), 'parent' => '', 'section' => 'js', 'page' => 'file_optimization', 'default' => [], 'sanitize_callback' => 'sanitize_textarea', 'input_attr' => [ 'disabled' => get_rocket_option( 'delay_js_execution_safe_mode' ) ? 0 : 1, ], 'helper' => DelayJSSettings::exclusion_list_has_default() ? $delay_js_found_list_helper : $delay_js_list_helper, 'placeholder' => '', ], ], ], ], ```

• Display a warning message when the checkbox is checked, detailing potential performance impacts and suggesting users contact support.

Probably need to modify wpr-admin.js to display the notice on click of the checkbox.

Backend changes

• Step 1: Update the default exclusions list: https://github.com/wp-media/wp-rocket/blob/06381b8860eb46e570911b2812652f54a676dd6d/inc/Engine/Optimization/DelayJS/Admin/Settings.php#L147-L150 Here, add (?:/wp-content/|/wp-includes/)(.*) to the default list.

• Step 2: Update the settings save logic Modify https://github.com/wp-media/wp-rocket/blob/06381b8860eb46e570911b2812652f54a676dd6d/inc/Engine/Optimization/DelayJS/Admin/Settings.php#L86-L96 to take care of the newly created checkbox (delay_js_safe_mode) by adding : $input['delay_js_safe_mode'] = $settings->sanitize_checkbox( $input, 'delay_js_safe_mode' ); And delete default exclusion from the textarea if there are some.

• On upgrade, we need to keep the exclusions if there are some existing, for this we'll need to take care of it here: https://github.com/wp-media/wp-rocket/blob/06381b8860eb46e570911b2812652f54a676dd6d/inc/Engine/Optimization/DelayJS/Admin/Settings.php#L56

• When safe mode is enabled, add by default these regex to exclusions in this function https://github.com/wp-media/wp-rocket/blob/06381b8860eb46e570911b2812652f54a676dd6d/inc/Engine/Optimization/DelayJS/HTML.php#L92

      \/jquery(-migrate)?-?([0-9.]+)?(.min|.slim|.slim.min)?.js(\?(.*))?( |'|"|>)
      js-(before|after)
      (?:/wp-content/|/wp-includes/)(.*)

[mostafa-hisham]

@Miraeld I think the JS function that shows the warning is here. not sure if you need to edit the function but you can check https://github.com/wp-media/wp-rocket/blob/e3f0cb1b343f9e589ef6ce4bea005204d0d9b311/assets/js/wpr-admin.js#L564

[jeawhanlee]

LGTM