The ordering of CSS and Javascript files by top_head.jsp needs to be standardized

• Type: Bug
• Status: Closed
• Resolution: Fixed
• Affects Version/s: 5.1.2
• Fix Version/s: 5.2.3
• Component/s: None
• Labels: None
• Branch Version/s:
  5.1.x
• Backported to Branch:
  Committed

This is an improvement that fixes this ticket: http://issues.liferay.com/browse/LPS-2282

The backstory on this fix is that maintaining the theme's portal_normal.vm has become an issue because there are a lot of times that a user has overwritten portal_normal.vm, and many of our custom themes overwrite it as well.

However, there is a certain ordering that needs to happen in the head and footer portions of a given page.
This fix removes the responsibility of maintaining that order from the theme and instead offsets it to the $top_head_include $bottom_include.

This fix also makes it a convention that a themes main.css is included by the portal and not on theme level. A user can still add links to other files and if they wish they can either empty main.css or use it to import other CSS files.
The same convention now also exists for javascript.js. It is automatically included by the $bottom_include, and if a theme developer wishes, they can clear out the file, or add more links to other files from portal_normal.vm.

Here is how the JavaScript and CSS is loaded by the portal.

$top_head_include is really a reference for top_head.jsp and $bottom_include is a reference for bottom.jsp, both of which exist in the portal.

top_head.jsp includes information in the head of the document this way:

• Portal CSS - this is Portal needed CSS that is required

• Porlet CSS links - these are the files that portlets include by defining them in liferay-portlet.xml

• Portal JavaScript - these are files needed by the portal to add functionality.
• Portal JavaScript added by the EXT environment - This is anything added by a developer using the EXT environment

• Portlet JavaScript links - these are files that portlets include by defining them in liferay-portlet.xml.

• Developer included fragments, typically CSS or JavaScript
• JSR286 Markup Fragments - this can be any information that a developer wishes to be included in the head of the document
• Liferay fragments - in a portlet or taglib in Liferay, a developer can include information they wish to be included in the head of the document

• Custom CSS
• Theme CSS - this is the main.css file located in a theme's css directory.
• Page specific CSS - this is CSS added by the user inside of Manage Pages.
• Portlet specific CSS - this is CSS that is added by customizing a portlet using the Look & Feel Editor

bottom.jsp includes information in the footer of the page this way:

• Portal JavaScript - This is any JavaScript that is needed by the portal. This is different from the JavaScript that is included by top_head.jsp. The files in top_head.jsp are libraries and other information that is needed to load so that portlets and other content can access it on the page.

• Portlet JavaScript - These are files included by portlets using liferay-portlet.xml. A portlet can have javascript files that are loaded at the end of the page, and they are referenced here.

• Developer included Fragments, typically this is Javascript
• Liferay fragments - in a portlet or taglib in Liferay, a developer can include information they wish to be included at the bottom of the document

• Custom JavaScript
• Theme JavaScript - This is the javascript.js file located in the javascript directory of the theme
• Page specific JavaScript - This is JavaScript that is added by the user in Manage Pages

• Google Analytics - A user can decide to have Google Analytics automatically included and this is where the file is placed

The pattern here is that there is an heirarchy of customization.
Portal needed stuff is included first
Then portlet developer stuff is included
Then theme developer stuff is included
Then end-user stuff is included