[#19744] - [4.0] Improve assets handling
- Fixed in Code Base
- 22 May 2018
- Medium
- Build: 4.0-dev
- # 19744
- Diff
- dgrammatiko:html/assets
User tests: Successful: Unsuccessful:
Pull Request for Issue #19637 .
Summary of Changes
This improves the way assets are handled.
So it has a logic of first loonking for the minified and then the non minified version if in normal mode and if in debugging mode it reverses the order.
In plain english even if you do JHtml::_('script', 'my-awesome-script.js'); or
JHtml::_('script', 'my-awesome-script.min.js'); it doesn't matter! Joomla will pick the right one for you!
Testing Instructions
Apply patch, rename /media/system/js/core.min.js to /media/system/js/x-core.min.js
core.js is loaded, revert the change
Enable debug mode
rename /media/system/js/core.js to /media/system/js/x-core.js
core.min.js is loaded, revert the change
Test is successful!
Expected result
Actual result
Documentation Changes Required
No
There is a change from enabling browser dependant script to be searched automatically to false, this is a performance improvement (checking for less files), but the functionality remains there, it just needs the right attribute to be passed in the JHtml::_()
This are the php changes to remove the minified version of assets, the rest will come when/if the rest of the affect scripts gets updated
| Status | New | ⇒ | Pending |
joomla-cms-bot
- | Category | ⇒ | Libraries |
| Labels |
Added:
?
|
||
what if you want to load one of those specifically?
Can you give me a practical example where this logic will be annoying?
Just thinking aloud. I am developing a site and I have not yet minified the files so I specifically reference the non minified file in my template. However because I do not have debug mode on I will see the old non-minified version
@brianteeman that's why Joomla 4 (thanks to @asika32764 ) provides a watch function for js and scss files for developers, so you'll never have to resolve a non issue
Subject to that being documented my question is answered
| Category | Libraries | ⇒ | Libraries Unit Tests |
| Labels |
Added:
?
|
||
Documentation Changes Required
Well it's not the detectBrowser option that is changed here in a not B/C way. There is the drop of the script.js / script-uncompressed.js that is dropped as well in favour of only one way of defining compressible assets, like script.min.js / script.js. This change aligns joomla to the rest of the world about naming conventions of such assets and also reduces the processing power consumed having to check all the different conventions. Being different here is not helping us at all especially for the hustle we create for newcomers.
SO NO MORE script-uncompressed.js, DEAL WITH IT!
It actually wasn't us being different for the sake of being different. At one point that was the naming convention used for the MooTools files (by them, not us) and the rest of the API just followed suit on that convention until we started including files in core using the .min.foo convention and adding support for that instead of renaming everything we included. So don't get angry with us on this one
I'm not angry with nobody that put some code into the project. Well done, even if it was the wrong approach or not even delivering what was promised. Also I think that nobody will oppose fixing this now in J4, otherwise the project will continue currying the mootool bag for loooong long time. Now we have a chance to do it.
@dgt41 Is this PR ready for testing?
If I assign this branch no css is loading in my case.
The path to the css files is not correct. Instead of
<script src="/JOOMLA/joomla4/joomla-cms/media/mod_sampledata/js/sampledata-process.js"></script>
the path is
<script src="/media/mod_sampledata/js/sampledata-process.min.js"></script>
@astridx that's interesting, probably this https://github.com/joomla/joomla-cms/pull/19744/files#diff-8f6485b51d191985c4d1e9fbbf1a743aR1364 doesn't work as expected. Are you on a windows machine?
No, I am not on Linux. I am on Ubuntu.
Edit: I meat I am not on windows :)
I think JPATH_ROOT is OK. It is /var/www/html/JOOMLA/joomla4/joomla-cms as you can see on top of the attached picture.
@Anu1601CS is your installation on a subdirectory?
@Anu1601CS is your installation on a subdirectory?
No
@Anu1601CS ok can you share the head of the page that fails? what are the paths for these scripts?
@Anu1601CS the paths seem fine, but I still need the full src of the js/css there and in the image you shared after the ? everything gets hidden...
Also you do have the .min files in this installation? Right?
Forget it, I just saw that you are in a subdirectory...
I have tested this item
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/19744.
I want to test this PR again.
@dgt41 Sorry I missed the question for the head above. But now I send you my head :)
I am on branch 4.0-dev in debug mode and everything is fine.
I fetch branch html/asset (git fetch origin pull/19744/head:html/assets) and change to branch html/asset (git checkout html/asset) and refesh the site I see no CSS. Do I make a mistake?
This is my head:
<!DOCTYPE html>
<html lang="en-gb" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#1c3d5c">
<meta name="generator" content="Joomla! - Open Source Content Management">
<title>**Global Configuration** - tes - **Administration**</title>
<link href="/JOOMLA/joomla4/joomla-cms/administrator/templates/atum/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
<link href="/media/system/webcomponents/css/joomla-field-switcher.css?f40e1a10d455f4d4fa38109c590ae41a" rel="stylesheet" />
<link href="/media/system/webcomponents/css/joomla-field-media.css?f40e1a10d455f4d4fa38109c590ae41a" rel="stylesheet" />
<link href="/media/plg_system_debug/css/debug.css?f40e1a10d455f4d4fa38109c590ae41a" rel="stylesheet" />
<link href="/administrator/templates/atum/css/bootstrap.css?f40e1a10d455f4d4fa38109c590ae41a" rel="stylesheet" />
<link href="/administrator/templates/atum/css/font-awesome.css?f40e1a10d455f4d4fa38109c590ae41a" rel="stylesheet" />
<link href="/administrator/templates/atum/css/template.css?f40e1a10d455f4d4fa38109c590ae41a" rel="stylesheet" />
<link href="/media/vendor/joomla-custom-elements/css/joomla-alert.min.css?f40e1a10d455f4d4fa38109c590ae41a" rel="stylesheet" />
<script type="application/json" class="joomla-script-options new">{
"csrf.token": "645d62d47136387a418199d794e492c4",
"system.paths": {
"root": "\/JOOMLA\/joomla4\/joomla-cms",
"rootFull": "http:\/\/localhost\/JOOMLA\/joomla4\/joomla-cms\/",
"base": "\/JOOMLA\/joomla4\/joomla-cms\/administrator"
},
"joomla.jtext": {
"JLIB_FORM_CONTAINS_INVALID_FIELDS": "**The form cannot be submitted as it's missing required data. <br> Please correct the marked fields and try again.**",
"JLIB_FORM_FIELD_REQUIRED_VALUE": "**Field value cannot be empty**",
"JLIB_FORM_FIELD_REQUIRED_CHECK": "**One of the options must be selected**",
"JLIB_FORM_FIELD_INVALID_VALUE": "**This value is not valid**",
"ERROR": "**Error**",
"WARNING": "**Warning**",
"NOTICE": "**Notice**",
"MESSAGE": "**Message**",
"JLIB_FORM_MEDIA_PREVIEW_EMPTY": "**No image selected.**",
"JFIELD_PASSWORD_INDICATE_INCOMPLETE": "**Password doesn't meet site's requirements**",
"JFIELD_PASSWORD_INDICATE_COMPLETE": "**Password accepted**",
"JSHOW": "**Show**",
"JHIDE": "**Hide**",
"JLIB_JS_AJAX_ERROR_CONNECTION_ABORT": "**A connection abort has occurred while fetching the JSON data.**",
"JLIB_JS_AJAX_ERROR_NO_CONTENT": "**No content was returned.**",
"JLIB_JS_AJAX_ERROR_OTHER": "**An error has occurred while fetching the JSON data: HTTP %s status code.**",
"JLIB_JS_AJAX_ERROR_PARSE": "**A parse error has occurred while processing the following JSON data:<br><code style=\"color:inherit;white-space:pre-wrap;padding:0;margin:0;border:0;background:inherit;\">%s<\/code>**",
"JLIB_JS_AJAX_ERROR_TIMEOUT": "**A timeout has occurred while fetching the JSON data.**",
"JLIB_HTML_PLEASE_MAKE_A_SELECTION_FROM_THE_LIST": "**Please first make a selection from the list.**"
},
"system.keepalive": {
"interval": 840000,
"uri": "\/JOOMLA\/joomla4\/joomla-cms\/administrator\/index.php?option=com_ajax&format=json"
},
"webcomponents": {
"joomla-switcher": "\/media\/system\/webcomponents\/js\/joomla-field-switcher.min.js?f40e1a10d455f4d4fa38109c590ae41a",
"joomla-field-media": "\/media\/system\/webcomponents\/js\/joomla-field-media.js?f40e1a10d455f4d4fa38109c590ae41a",
"joomla-field-send-mail": "\/media\/system\/webcomponents\/js\/joomla-field-send-test-mail.min.js?f40e1a10d455f4d4fa38109c590ae41a",
"joomla-alert": "\/media\/vendor\/joomla-custom-elements\/js\/joomla-alert.min.js?f40e1a10d455f4d4fa38109c590ae41a"
},
"bootstrap.popover": {
".hasPopover": {
"container": "body",
"html": true,
"trigger": "hover focus",
"constraints": {
"to": "scrollParent",
"attachment": "together",
"pin": true
},
"offset": "0 0"
}
},
"keySave": {
"task": "application.apply"
}
}</script>
<script src="/media/system/js/core.js?f40e1a10d455f4d4fa38109c590ae41a"></script>
<script src="/media/vendor/punycode/js/punycode.js?f40e1a10d455f4d4fa38109c590ae41a"></script>
<script src="/media/system/js/fields/validate.js?f40e1a10d455f4d4fa38109c590ae41a"></script>
<script src="/media/system/js/keepalive.js?f40e1a10d455f4d4fa38109c590ae41a"></script>
<script src="/media/vendor/jquery/js/jquery.js?f40e1a10d455f4d4fa38109c590ae41a"></script>
<script src="/media/legacy/js/jquery-noconflict.js?f40e1a10d455f4d4fa38109c590ae41a"></script>
<script src="/media/legacy/js/tabs-state.js?f40e1a10d455f4d4fa38109c590ae41a"></script>
<script src="/media/system/js/cms.js?f40e1a10d455f4d4fa38109c590ae41a"></script>
<script src="/media/vendor/bootstrap/js/bootstrap.bundle.js?f40e1a10d455f4d4fa38109c590ae41a"></script>
<script src="/media/legacy/js/bootstrap-init.js?f40e1a10d455f4d4fa38109c590ae41a"></script>
<script src="/media/legacy/js/helpsite.js?f40e1a10d455f4d4fa38109c590ae41a"></script>
<script src="/media/system/js/fields/passwordview.js?f40e1a10d455f4d4fa38109c590ae41a"></script>
<script src="/media/system/js/fields/permissions.js?f40e1a10d455f4d4fa38109c590ae41a"></script>
<script src="/media/plg_system_debug/js/debug.js?f40e1a10d455f4d4fa38109c590ae41a"></script>
<script src="/media/vendor/flying-focus-a11y/js/flying-focus.js?f40e1a10d455f4d4fa38109c590ae41a"></script>
<script src="/media/legacy/js/toolbar.js?f40e1a10d455f4d4fa38109c590ae41a"></script>
<script src="/media/mod_menu/js/admin-menu.js?f40e1a10d455f4d4fa38109c590ae41a" defer></script>
</head>
instead of
<!DOCTYPE html>
| <html lang="en-gb" dir="ltr">
| <head>
| <meta charset="utf-8">
| <meta name="viewport" content="width=device-width, initial-scale=1">
| <meta name="theme-color" content="#1c3d5c">
| <meta name="generator" content="Joomla! - Open Source Content Management">
| <title>**Global Configuration** - tes - **Administration**</title>
| <link href="/JOOMLA/joomla4/joomla-cms/administrator/templates/atum/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
|
| <link href="/JOOMLA/joomla4/joomla-cms/media/system/webcomponents/css/joomla-field-switcher.css?8324ca156ad174f512939f1d000eb985" rel="stylesheet" />
| <link href="/JOOMLA/joomla4/joomla-cms/media/system/webcomponents/css/joomla-field-media.css?8324ca156ad174f512939f1d000eb985" rel="stylesheet" />
| <link href="/JOOMLA/joomla4/joomla-cms/media/plg_system_debug/css/debug.css?8324ca156ad174f512939f1d000eb985" rel="stylesheet" />
| <link href="/JOOMLA/joomla4/joomla-cms/administrator/templates/atum/css/bootstrap.css?8324ca156ad174f512939f1d000eb985" rel="stylesheet" />
| <link href="/JOOMLA/joomla4/joomla-cms/administrator/templates/atum/css/font-awesome.css?8324ca156ad174f512939f1d000eb985" rel="stylesheet" />
| <link href="/JOOMLA/joomla4/joomla-cms/administrator/templates/atum/css/template.css?8324ca156ad174f512939f1d000eb985" rel="stylesheet" />
| <link href="/JOOMLA/joomla4/joomla-cms/media/vendor/joomla-custom-elements/css/joomla-alert.min.css?8324ca156ad174f512939f1d000eb985" rel="stylesheet" />
| <script type="application/json" class="joomla-script-options new">{
| "csrf.token": "645d62d47136387a418199d794e492c4",
| "system.paths": {
| "root": "\/JOOMLA\/joomla4\/joomla-cms",
| "rootFull": "http:\/\/localhost\/JOOMLA\/joomla4\/joomla-cms\/",
| "base": "\/JOOMLA\/joomla4\/joomla-cms\/administrator"
| },
| "joomla.jtext": {
| "JLIB_FORM_CONTAINS_INVALID_FIELDS": "**The form cannot be submitted as it's missing required data. <br> Please correct the marked fields and try again.**",
| "JLIB_FORM_FIELD_REQUIRED_VALUE": "**Field value cannot be empty**",
| "JLIB_FORM_FIELD_REQUIRED_CHECK": "**One of the options must be selected**",
| "JLIB_FORM_FIELD_INVALID_VALUE": "**This value is not valid**",
| "ERROR": "**Error**",
| "WARNING": "**Warning**",
| "NOTICE": "**Notice**",
| "MESSAGE": "**Message**",
| "JLIB_FORM_MEDIA_PREVIEW_EMPTY": "**No image selected.**",
| "JFIELD_PASSWORD_INDICATE_INCOMPLETE": "**Password doesn't meet site's requirements**",
| "JFIELD_PASSWORD_INDICATE_COMPLETE": "**Password accepted**",
| "JSHOW": "**Show**",
| "JHIDE": "**Hide**",
| "JLIB_JS_AJAX_ERROR_CONNECTION_ABORT": "**A connection abort has occurred while fetching the JSON data.**",
| "JLIB_JS_AJAX_ERROR_NO_CONTENT": "**No content was returned.**",
| "JLIB_JS_AJAX_ERROR_OTHER": "**An error has occurred while fetching the JSON data: HTTP %s status code.**",
| "JLIB_JS_AJAX_ERROR_PARSE": "**A parse error has occurred while processing the following JSON data:<br><code style=\"color:inherit;white-space:pre-wrap;padding:0;margin:0;border:0;background:inherit;\">%s<\/code>**",
| "JLIB_JS_AJAX_ERROR_TIMEOUT": "**A timeout has occurred while fetching the JSON data.**",
| "JLIB_HTML_PLEASE_MAKE_A_SELECTION_FROM_THE_LIST": "**Please first make a selection from the list.**"
| },
| "system.keepalive": {
| "interval": 840000,
| "uri": "\/JOOMLA\/joomla4\/joomla-cms\/administrator\/index.php?option=com_ajax&format=json"
| },
| "webcomponents": {
| "joomla-switcher": "\/JOOMLA\/joomla4\/joomla-cms\/media\/system\/webcomponents\/js\/joomla-field-switcher.min.js?8324ca156ad174f512939f1d000eb985",
| "joomla-field-media": "\/JOOMLA\/joomla4\/joomla-cms\/media\/system\/webcomponents\/js\/joomla-field-media.js?8324ca156ad174f512939f1d000eb985",
| "joomla-field-send-mail": "\/JOOMLA\/joomla4\/joomla-cms\/media\/system\/webcomponents\/js\/joomla-field-send-test-mail.min.js?8324ca156ad174f512939f1d000eb985",
| "joomla-alert": "\/JOOMLA\/joomla4\/joomla-cms\/media\/vendor\/joomla-custom-elements\/js\/joomla-alert.min.js?8324ca156ad174f512939f1d000eb985"
| },
| "bootstrap.popover": {
| ".hasPopover": {
| "container": "body",
| "html": true,
| "trigger": "hover focus",
| "constraints": {
| "to": "scrollParent",
| "attachment": "together",
| "pin": true
| },
| "offset": "0 0"
| }
| },
| "keySave": {
| "task": "application.apply"
| }
| }</script>
|
| <script src="/JOOMLA/joomla4/joomla-cms/media/system/js/core.js?8324ca156ad174f512939f1d000eb985"></script>
| <script src="/JOOMLA/joomla4/joomla-cms/media/vendor/punycode/js/punycode.js?8324ca156ad174f512939f1d000eb985"></script>
| <script src="/JOOMLA/joomla4/joomla-cms/media/system/js/fields/validate.js?8324ca156ad174f512939f1d000eb985"></script>
| <script src="/JOOMLA/joomla4/joomla-cms/media/system/js/keepalive.js?8324ca156ad174f512939f1d000eb985"></script>
| <script src="/JOOMLA/joomla4/joomla-cms/media/vendor/jquery/js/jquery.js?8324ca156ad174f512939f1d000eb985"></script>
| <script src="/JOOMLA/joomla4/joomla-cms/media/legacy/js/jquery-noconflict.js?8324ca156ad174f512939f1d000eb985"></script>
| <script src="/JOOMLA/joomla4/joomla-cms/media/legacy/js/tabs-state.js?8324ca156ad174f512939f1d000eb985"></script>
| <script src="/JOOMLA/joomla4/joomla-cms/media/system/js/cms.js?8324ca156ad174f512939f1d000eb985"></script>
| <script src="/JOOMLA/joomla4/joomla-cms/media/vendor/bootstrap/js/bootstrap.bundle.js?8324ca156ad174f512939f1d000eb985"></script>
| <script src="/JOOMLA/joomla4/joomla-cms/media/legacy/js/bootstrap-init.js?8324ca156ad174f512939f1d000eb985"></script>
| <script src="/JOOMLA/joomla4/joomla-cms/media/legacy/js/helpsite.js?8324ca156ad174f512939f1d000eb985"></script>
| <script src="/JOOMLA/joomla4/joomla-cms/media/system/js/fields/passwordview.js?8324ca156ad174f512939f1d000eb985"></script>
| <script src="/JOOMLA/joomla4/joomla-cms/media/system/js/fields/permissions.js?8324ca156ad174f512939f1d000eb985"></script>
| <script src="/JOOMLA/joomla4/joomla-cms/media/plg_system_debug/js/debug.js?8324ca156ad174f512939f1d000eb985"></script>
| <script src="/JOOMLA/joomla4/joomla-cms/media/vendor/flying-focus-a11y/js/flying-focus.js?8324ca156ad174f512939f1d000eb985"></script>
| <script src="/JOOMLA/joomla4/joomla-cms/media/legacy/js/toolbar.js?8324ca156ad174f512939f1d000eb985"></script>
| <script src="/JOOMLA/joomla4/joomla-cms/media/mod_menu/js/admin-menu.js?8324ca156ad174f512939f1d000eb985" defer></script>
|
| </head>
```
Yes, i changed
$relativeFilePath = str_replace(JPATH_ROOT, '', $path);
to
$relativeFilePath = Uri::root(true) . str_replace(JPATH_ROOT, '', $path);
and now CSS is loaded.
I have tested this item
That is what I tested:
I have activated debug mode.
I change to your branch and I see that core.js is loaded.
I renamed core.js.
I refresh page and I see that core.min.js is loaded.
I deactivated debug mode and I see that core.min.js is loaded
I revert renaming of core.js and renamed core.min.js and I see, that core.js is leaded.
Without applying this patch
In no-debug-mode i need a core.min.js. If there is only a core.js no core styles are loaded.
In debug-mode core.js is loaded. If there is no core.js the minified version is loaded.
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/19744.
I have tested this item
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/19744.
| Status | Pending | ⇒ | Ready to Commit |
Ready to Commit after two successful tests.
IMO yes get it merged.
No issues with the proposal. What should we do with the tests? Also let's fix the conflicts.
| Labels |
Added:
?
|
||
| Category | Libraries Unit Tests | ⇒ | Libraries |
| Labels |
Removed:
?
|
||
Ok, this is synced once more
I have tested this item
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/19744.
| Status | Ready to Commit | ⇒ | Fixed in Code Base |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2018-05-22 13:11:08 |
| Closed_By | ⇒ | laoneo |
carlitorweb
-
what if you want to load one of those specifically?