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:

  wp-rocket/inc/Engine/Admin/Settings/Page.php

  Lines 515 to 516 in 7348869

  	$delay_js_list_helper = esc_html__( 'If you have problems after activating this option, copy and paste the default exclusions to quickly resolve issues:', 'rocket' );
  	$delay_js_list_helper .= sprintf( '<br><pre><code>%1$s</code></pre><br>', implode( '<br>', DelayJSSettings::get_delay_js_default_exclusions() ) );

  and empty the placeholder here:

  wp-rocket/inc/Engine/Admin/Settings/Page.php

  Line 811 in 7348869

  'placeholder' => '/wp-includes/js/jquery/jquery.min.js',

• 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

'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 <a> tag, %2$s = closing </a> 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:
  

  wp-rocket/inc/Engine/Optimization/DelayJS/Admin/Settings.php

  Lines 147 to 150 in 06381b8

  	$exclusions = [
  	'\/jquery(-migrate)?-?([0-9.]+)?(.min|.slim|.slim.min)?.js(\?(.*))?( |\'|"|>)',
  	'js-(before|after)',
  	];

  Here, add (?:/wp-content/|/wp-includes/)(.*) to the default list.

• Step 2: Update the settings save logic
  Modify

  wp-rocket/inc/Engine/Optimization/DelayJS/Admin/Settings.php

  Lines 86 to 96 in 06381b8

  	public function sanitize_options( $input, $settings ): array {
  	$input['delay_js'] = $settings->sanitize_checkbox( $input, 'delay_js' );
  	$input['delay_js_exclusions'] =
  	! empty( $input['delay_js_exclusions'] )
  	?
  	rocket_sanitize_textarea_field( 'delay_js_exclusions', $input['delay_js_exclusions'] )
  	:
  	[];
  	return $input;
  	}

  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:
  

  wp-rocket/inc/Engine/Optimization/DelayJS/Admin/Settings.php

  Line 56 in 06381b8

  public function set_option_on_update( $old_version ) {

• When safe mode is enabled, add by default these regex to exclusions in this function

  wp-rocket/inc/Engine/Optimization/DelayJS/HTML.php

  Line 92 in 06381b8

  public function delay_js( $html ): string {

		\/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

wp-rocket/assets/js/wpr-admin.js

Line 564 in e3f0cb1

function wprShowRadioWarning($elm) {

[jeawhanlee]

LGTM