Closes #7058: Implement DJE Safe Mode Feature

[Miraeld]

Description

Fixes #7058
This change introduces the "Delay JavaScript Execution safe mode" feature. It enhances user control over JavaScript execution, providing a checkbox to enable or disable safe mode, and displays a warning about potential performance impacts. This helps users manage their site's performance more effectively.

Type of change

• Enhancement (non-breaking change which improves an existing functionality).

Detailed scenario

To trigger the new code:

• Navigate to the plugin settings.
• Locate the "Delay JavaScript Execution" section.
• Check the "Delay JavaScript Execution safe mode" checkbox.
• Observe the warning message detailing potential performance impacts.
• Default exclusion will be added on the front-end.

Technical description

Documentation

The feature adds a checkbox labeled "Delay JavaScript Execution safe mode" and displays a warning when it is checked. The backend logic updates the exclusions list based on the checkbox state and ensures these changes are applied when settings are saved.
Also, when we load delay_js on the front-end, we check if the new option is enabled, and if this is the case, we add default exclusion to delay_js.

New dependencies

No new dependencies are introduced in this change.

Risks

None.

Mandatory Checklist

Code validation

• I validated all the Acceptance Criteria. If possible, provide screenshots or videos.
• I triggered all changed lines of code at least once without new errors/warnings/notices.
• I implemented built-in tests to cover the new/changed code.

Code style

• I wrote a self-explanatory code about what it does.
• I protected entry points against unexpected inputs.
• I did not introduce unnecessary complexity.
• Output messages (errors, notices, logs) are explicit enough for users to understand the issue and are actionnable.

[codacy-production]

Coverage summary from Codacy

See diff coverage on Codacy

Coverage variation	Diff coverage
✅ +0.00% (target: -0.10%)	❌ 38.78% (target: 50.00%)

Coverage variation details

	Coverable lines	Covered lines	Coverage
Common ancestor commit (82a2c24)	38228	16731	43.77%
Head commit (defadb8)	38261 (+33)	16745 (+14)	43.77% (+0.00%)

Coverage variation is the difference between the coverage for the head and common ancestor commits of the pull request branch: <coverage of head commit> - <coverage of common ancestor commit>

Diff coverage details

	Coverable lines	Covered lines	Diff coverage
Pull request (#7081)	49	19	38.78%

Diff coverage is the percentage of lines that are covered by tests out of the coverable lines that the pull request added or modified: <covered lines added or modified>/<coverable lines added or modified> * 100%

See your quality gate settings    Change summary preferences

_{Codacy stopped sending the deprecated coverage status on June 5th, 2024. Learn more}

[Miraeld]

Codacy Diff Coverage is failing due to the addition of a field on the front-end which isn't triggered in any test (as it's front-end). That's normal 👍

[Mai-Saad]

Testing notes [WIP , to be checked with PO what shall be changed here or on other GH]

• checkbox isnot before the exclusion text area
• The text for the checkbox is different than on the notion doc too
• warning text when checking the option is almost the same as the option description
• DJS exclusion safe mode is not unchecked when enabling safe mode while deactivating WPR, shouldn't it be unchecked?

[Mai-Saad]

@Miraeld Thanks For the PR. Can you please check the points below:
1- The checkbox shall be after the exclusion area not before it.
2- The wording shall match what's mentioned here https://www.notion.so/wpmedia/Turn-default-exclusions-to-a-checkbox-10eed22a22f080429916d8b0e8a384be?pvs=4#113ed22a22f080e7b452d8485b0cea5d
3- When check the option the ✔️ is not there till we accept the warning which is not the same behavior as when enabling RUCSS for example. =====> same with combine js . @wp-media/product what do you think?

Current o/p on PR

[Miraeld]

@Mai-Saad Feedbacks 1 & 2 have been fixed.

About the third feedback:

3- When check the option the ✔️ is not there till we accept the warning which is not the same behavior as when enabling RUCSS for example. =====> same with combine js . @wp-media/product what do you think?

If I may add something, I find it more logic to be like it is now, and I'll explain why.

If you take the RUCSS as example, when you click on the option you get the ☑️ however it won't be enable until you select one of the method. If you don't click on one of the method, but save, it won't be ☑️ anymore. That's a bit confusing.

However here, you won't get the ☑️ until you click "ACTIVATE SAFE MODE", which means the user confirm their intention to use the safemode.

Just my point of view.

[Mai-Saad]

@Miraeld Thanks for the update.
When we update WPR to PR while having default exclusions in text area, we remove it from the text area. As per previous discussion with @piotrbak we should have no connection now between the text area and the safe mode checkbox. /cc @wp-media/product (note: now import settings with default exclusions, it won't be added in text area as well)

[Miraeld]

Hello hello @Mai-Saad

I've made some changes and mostly on the regex to be considered as "default" exclusion of the safemode.
Before we had /jquery(-migrate)?-?([0-9.]+)?(.min|.slim|.slim.min)?.js(\?(.*))?( |'|"|>) while it should be \/jquery(-migrate)?-?([0-9.]+)?(.min|.slim|.slim.min)?.js(\?(.*))?( |'|"|>)
So it's been changed.

Also, I've made some modification on the condition to delete default exclusion brought by safemode from the textarea only when the safemode is enabled, following this comment.

Until now, we were deleting from the textarea even tho the safemode was disabled.
And that's why on update we were deleting the default exclusions from the textarea. That's not the case anymore.

---

A technical update of the whole PR:

This pull request introduces a new feature called "Safe Mode for Delay JavaScript Execution" and includes several related changes across multiple files. The most important changes are grouped by theme below:

Feature Addition:

• Added a new checkbox option delay_js_execution_safe_mode to the settings page, which prevents all internal scripts from being delayed when enabled.
• Implemented the get_safe_mode_exclusions method to provide a list of default exclusions for the safe mode.
• Updated the delay_js method in HTML.php to include safe mode exclusions if the safe mode is enabled.

Settings and Options:

• Updated the add_options and sanitize_options methods to include the new delay_js_execution_safe_mode option. [1] [2]
• Modified the constructor and other relevant methods in Settings.php to handle the new safe mode option. [1] [2]

User Interface:

• Added JavaScript to automatically uncheck the safe mode checkbox when the main delay JS option is disabled.

Testing:

• Updated test fixtures and test cases to account for the new delay_js_execution_safe_mode option. [1] [2] [3] [4]

These changes ensure that the new safe mode feature is integrated into the existing delay JS functionality and properly tested.

[codacy-production]

Coverage summary from Codacy

See diff coverage on Codacy

Coverage variation	Diff coverage
✅ +0.00% (target: -0.10%)	❌ 40.00% (target: 50.00%)

Coverage variation details

	Coverable lines	Covered lines	Coverage
Common ancestor commit (82a2c24)	38228	16731	43.77%
Head commit (fd98d5e)	38262 (+34)	16746 (+15)	43.77% (+0.00%)

Coverage variation is the difference between the coverage for the head and common ancestor commits of the pull request branch: <coverage of head commit> - <coverage of common ancestor commit>

Diff coverage details

	Coverable lines	Covered lines	Diff coverage
Pull request (#7081)	50	20	40.00%

Diff coverage is the percentage of lines that are covered by tests out of the coverable lines that the pull request added or modified: <covered lines added or modified>/<coverable lines added or modified> * 100%

See your quality gate settings    Change summary preferences

_{Codacy stopped sending the deprecated coverage status on June 5th, 2024. Learn more}

[Mai-Saad]

@Miraeld thanks for the update. Now updating while having default exclusions, will keep it in the text area and safe mode is unchecked.
But

1. When enable safe mode, if we have default exclusion in text area , it will be removed (unchecking safe mode won't add the text back) ==> This was supposed to be implemented later ===> accepted as is for now, may need an enhancement later as per @piotrbak
2. When enable safe mode of deactivation, neither DJS save mode nor the one click exclusion gets unchecked
   @wp-media/product What do you think? is this acceptable now? do we need any other GH? ==> As per discussion with @piotrbak Fine for now as DJS itself is off