CSS caching in Google Chrome

[jamaur]

This issue is a weird one: it seems whenever I POST to a page, Chrome downloads the main stylesheet and ignores the cached one. If I click around normally, Chrome uses the cached stylesheet.

By "main stylesheet", I mean the theme/styles.php for the Essential theme.

To re-produce:

• Open Google Chrome and log into Moodle
• Press F12 and click "Network" to view the resources being downloaded
• Click around from one course to another, not POSTing anything. You should see the theme/styles.php CSS for Essential being used from cache
• Go to a course, click "Edit settings", change something (I change the shortname by a character or two) and click save.
• On the ensuing page, you should see that Chrome re-downloaded the theme/styles.php essential CSS and didn't load it from cache.

This behaviour doesn't happen in Firefox or Internet Explorer. I tried both the MOODLE_27 and the master branches.

For what it's worth, this behaviour doesn't happen using moodleman's fork found here: https://github.com/moodleman/moodle-theme_essential

I tried to compare yours and moodleman's code to see if I could pin point the issue but nothing jumps out at me (the 2 forks have diverged quite a bit).

[gjb2048]

Thanks for the report @jamaur - does this happen in other themes such as 'Clean'?

The new Essential does override the course format renderers so perhaps that is something to do with it. To be honest I'm not sure and knowing the code I don't think Essential can do anything about it.

[gjb2048]

What exact version of Essential are you using @jamaur please? As the style serving mechanism has recently changed in the pre-release of 2.7.8a.

[jamaur]

I can reproduce this using both 90545a6 (MOODLE_27 branch) and 694cf03 (master branch). This issue doesn't happen in other themes such as Clean.

[gjb2048]

In the master branch, essential.css is not served by styles.php. Only 'all' when TDM is off and a small collection of individual files when TDM is on.

[jamaur]

Right. I can see essential.css being served by pluginfile.php in master, and the caching behaves as expected (no re-downloading). The styles.php / "all" file still behaves as described above, though. On my end, that's adding 3.88s to the page load :/ .

Are you able to reproduce this?

[gjb2048]

Do you notice the theme revision changing? And I have not had time yet to replicate. Need to add to the long list of things I need to do.

[jamaur]

No, I made sure the revision numbers are the same.

I noticed that the styles.php / "all" sheet gets called twice everywhere. In other themes (clean, the moodleman fork of essential), it only gets called once. Maybe that has something to do with it.

[gjb2048]

Umm, you have no control over the theme revision (the 'rev' GET parameter). Its odd that the second initiator is yui_combo.php. What is the fill path of the URL? What is the red X error?

[jamaur]

This is what's calling it: yui_combo.php?rollup/3.15.0_1/yui-moodlesimple.js&rollup/1411411801/mcore-debug.js:7657

Here is the function is question:

/**
    * Check to see if named css module is already loaded on the page
    * @method isCSSLoaded
    * @param {String} name The name of the css file
    * @return Boolean
    */
    isCSSLoaded: function(name, skip) {
        //TODO - Make this call a batching call with name being an array
        if (!name || !YUI.Env.cssStampEl || (!skip && this.ignoreRegistered)) {
            return false;
        }
        var el = YUI.Env.cssStampEl,
            ret = false,
            mod = YUI.Env._cssLoaded[name],
            style = el.currentStyle; //IE

        if (mod !== undefined) {
            return mod;
        }

        //Add the classname to the element
        el.className = name;

        if (!style) {
            style = Y.config.doc.defaultView.getComputedStyle(el, null);
        }

        if (style && style.display === 'none') { //THIS IS LINE 7657 that Chrome references.
            ret = true;
        }

        el.className = ''; //Reset the classname to ''

        YUI.Env._cssLoaded[name] = ret;

        return ret;
    },

The error is a 404 because the file theme/essential/style/essential.treasure.map is not found (called from Gruntfile.js).

[gjb2048]

Thanks. So as TDM is off and debugging is set at 'Developer' does it happen when debugging is off?

And to help me replicate exactly, please screen shot the setting you are changing to make it happen.

[gjb2048]

Cannot replicate. I keep changing the course shortname and the 'all' file is retrieved from cache by the browser. Using Moodle 2.7.2+ (Build: 20140918) - 2014051202.02.

[gjb2048]

In your screen shots the 'rev' GET parameter value is changing, therefore the browser would download a new copy of the style sheet 'all' because that's how it works. So, what else is happening? Are you the only person on the installation when you tested?

[gjb2048]

Also not noticing that 'all' is downloaded twice, only once.

[jamaur]

The rev GET parameter changed because I was racking my brain, clearing the cache, etc. all day yesterday. I assure you whenever the rev parameter changes, I'm able to browse around, see 2 "all" stylesheets being cached, and then seeing the same rev get re-downloaded after editing a course setting.

To make sure I'm not going crazy, I just installed a fresh moodle, accepted all defaults, then installed essential from master, accepted all defaults, and the problem is there. No settings needed to be changed.

[jamaur]

Note that on the homepage, I see 1 'all' being downloaded. When I click into a course, I see 2.

[jamaur]

To replicate:

1. Click into a course. (You should see 2 'all' stylesheets being loaded from cache)
2. Click 'Edit settings' under 'Course administration'. (Still 2 'all' sheets from cache)
3. Change something and click save. (2 'all' sheets are re-downloaded and the cache is not used)

[gjb2048]

I do believe you, but if I cannot replicate , I cannot fix. I will try again later.

What is the cache timeout being sent in the HTTP headers for that file in your system?

[gjb2048]

Also, what course format are you using?

[gjb2048]

Also could you post the contents of the head tag of the problem page.

And, what WAMP / LAMP / MAMP stack are you using?

[jamaur]

Here's the header for the styles.php / 'all' sheet: "Cache-Control:public, max-age=5184000"

It happens with both weekly and topics course format.

I get this behaviour on both CentOS 6 using LAMP / cpanel and on CentOS 6 with nginx / php-fpm. Two very different server configurations.

Head tag contents:

<head>
    <title>Course: test</title>
    <link rel="shortcut icon" href="http://moodle2.jmaur.com/theme/image.php?theme=essential&amp;component=theme&amp;rev=1411477123&amp;image=favicon"/>
    <link rel="stylesheet" href="http://moodle2.jmaur.com/pluginfile.php?file=%2F1%2Ftheme_essential%2Fstyle%2F1411477123%2Fessential.css">    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="moodle, Course: test" />
<script type="text/javascript">
//<![CDATA[
var M = {}; M.yui = {};
M.pageloadstarttime = new Date();
M.cfg = {"wwwroot":"http:\/\/moodle2.jmaur.com","sesskey":"Ce5cjnF7DA","loadingicon":"http:\/\/moodle2.jmaur.com\/theme\/image.php?theme=essential&component=core&rev=1411477123&image=i%2Floading_small","themerev":"1411477123","slasharguments":0,"theme":"essential","jsrev":"1411477123","svgicons":true};var yui1ConfigFn = function(me) {if(/-skin|reset|fonts|grids|base/.test(me.name)){me.type='css';me.path=me.path.replace(/\.js/,'.css');me.path=me.path.replace(/\/yui2-skin/,'/assets/skins/sam/yui2-skin')}};
var yui2ConfigFn = function(me) {var parts=me.name.replace(/^moodle-/,'').split('-'),component=parts.shift(),module=parts[0],min='-min';if(/-(skin|core)$/.test(me.name)){parts.pop();me.type='css';min=''};if(module){var filename=parts.join('-');me.path=component+'/'+module+'/'+filename+min+'.'+me.type}else me.path=component+'/'+component+'.'+me.type};
YUI_config = {"debug":false,"base":"http:\/\/moodle2.jmaur.com\/lib\/yuilib\/3.15.0\/","comboBase":"http:\/\/moodle2.jmaur.com\/theme\/yui_combo.php?","combine":true,"filter":null,"insertBefore":"firstthemesheet","groups":{"yui-patched":{"combine":true,"root":"3.15.0_1\/","patterns":{"dd-drag":{"group":"yui-patched"},"dd-gestures":{"group":"yui-patched"}},"modules":{"dd-drag":[],"dd-gestures":[]}},"yui2":{"base":"http:\/\/moodle2.jmaur.com\/lib\/yuilib\/2in3\/2.9.0\/build\/","comboBase":"http:\/\/moodle2.jmaur.com\/theme\/yui_combo.php?","combine":true,"ext":false,"root":"2in3\/2.9.0\/build\/","patterns":{"yui2-":{"group":"yui2","configFn":yui1ConfigFn}}},"moodle":{"name":"moodle","base":"http:\/\/moodle2.jmaur.com\/theme\/yui_combo.php?m\/1411477123\/","combine":true,"comboBase":"http:\/\/moodle2.jmaur.com\/theme\/yui_combo.php?","ext":false,"root":"m\/1411477123\/","patterns":{"moodle-":{"group":"moodle","configFn":yui2ConfigFn}},"filter":null,"modules":{"moodle-core-event":{"requires":["event-custom"]},"moodle-core-maintenancemodetimer":{"requires":["base","node"]},"moodle-core-checknet":{"requires":["base-base","moodle-core-notification-alert","io-base"]},"moodle-core-blocks":{"requires":["base","node","io","dom","dd","dd-scroll","moodle-core-dragdrop","moodle-core-notification"]},"moodle-core-dock":{"requires":["base","node","event-custom","event-mouseenter","event-resize","escape","moodle-core-dock-loader"]},"moodle-core-dock-loader":{"requires":["escape"]},"moodle-core-handlebars":{"condition":{"trigger":"handlebars","when":"after"}},"moodle-core-notification":{"requires":["moodle-core-notification-dialogue","moodle-core-notification-alert","moodle-core-notification-confirm","moodle-core-notification-exception","moodle-core-notification-ajaxexception"]},"moodle-core-notification-dialogue":{"requires":["base","node","panel","escape","event-key","dd-plugin","moodle-core-widget-focusafterclose","moodle-core-lockscroll"]},"moodle-core-notification-alert":{"requires":["moodle-core-notification-dialogue"]},"moodle-core-notification-confirm":{"requires":["moodle-core-notification-dialogue"]},"moodle-core-notification-exception":{"requires":["moodle-core-notification-dialogue"]},"moodle-core-notification-ajaxexception":{"requires":["moodle-core-notification-dialogue"]},"moodle-core-formautosubmit":{"requires":["base","event-key"]},"moodle-core-dragdrop":{"requires":["base","node","io","dom","dd","event-key","event-focus","moodle-core-notification"]},"moodle-core-lockscroll":{"requires":["plugin","base-build"]},"moodle-core-chooserdialogue":{"requires":["base","panel","moodle-core-notification"]},"moodle-core-popuphelp":{"requires":["moodle-core-tooltip"]},"moodle-core-tooltip":{"requires":["base","node","io-base","moodle-core-notification-dialogue","json-parse","widget-position","widget-position-align","event-outside","cache-base"]},"moodle-core-actionmenu":{"requires":["base","event","node-event-simulate"]},"moodle-core-formchangechecker":{"requires":["base","event-focus"]},"moodle-core_availability-form":{"requires":["base","node","event","panel","moodle-core-notification-dialogue","json"]},"moodle-backup-confirmcancel":{"requires":["node","node-event-simulate","moodle-core-notification-confirm"]},"moodle-backup-backupselectall":{"requires":["node","event","node-event-simulate","anim"]},"moodle-calendar-eventmanager":{"requires":["base","node","event-mouseenter","overlay","moodle-calendar-eventmanager-skin"]},"moodle-course-util":{"requires":["node"],"use":["moodle-course-util-base"],"submodules":{"moodle-course-util-base":{},"moodle-course-util-section":{"requires":["node","moodle-course-util-base"]},"moodle-course-util-cm":{"requires":["node","moodle-course-util-base"]}}},"moodle-course-modchooser":{"requires":["moodle-core-chooserdialogue","moodle-course-coursebase"]},"moodle-course-management":{"requires":["base","node","io-base","moodle-core-notification-exception","json-parse","dd-constrain","dd-proxy","dd-drop","dd-delegate","node-event-delegate"]},"moodle-course-toolboxes":{"requires":["node","base","event-key","node","io","moodle-course-coursebase","moodle-course-util"]},"moodle-course-formatchooser":{"requires":["base","node","node-event-simulate"]},"moodle-course-dragdrop":{"requires":["base","node","io","dom","dd","dd-scroll","moodle-core-dragdrop","moodle-core-notification","moodle-course-coursebase","moodle-course-util"]},"moodle-course-categoryexpander":{"requires":["node","event-key"]},"moodle-form-showadvanced":{"requires":["node","base","selector-css3"]},"moodle-form-passwordunmask":{"requires":["node","base"]},"moodle-form-shortforms":{"requires":["node","base","selector-css3"]},"moodle-question-preview":{"requires":["base","dom","event-delegate","event-key","core_question_engine"]},"moodle-question-qbankmanager":{"requires":["node","selector-css3"]},"moodle-question-chooser":{"requires":["moodle-core-chooserdialogue"]},"moodle-question-searchform":{"requires":["base","node"]},"moodle-availability_completion-form":{"requires":["base","node","event","moodle-core_availability-form"]},"moodle-availability_date-form":{"requires":["base","node","event","io","moodle-core_availability-form"]},"moodle-availability_grade-form":{"requires":["base","node","event","moodle-core_availability-form"]},"moodle-availability_group-form":{"requires":["base","node","event","moodle-core_availability-form"]},"moodle-availability_grouping-form":{"requires":["base","node","event","moodle-core_availability-form"]},"moodle-availability_profile-form":{"requires":["base","node","event","moodle-core_availability-form"]},"moodle-mod_assign-history":{"requires":["node","transition"]},"moodle-mod_quiz-autosave":{"requires":["base","node","event","event-valuechange","node-event-delegate","io-form"]},"moodle-message_airnotifier-toolboxes":{"requires":["base","node","io"]},"moodle-block_navigation-navigation":{"requires":["base","io-base","node","event-synthetic","event-delegate","json-parse"]},"moodle-filter_glossary-autolinker":{"requires":["base","node","io-base","json-parse","event-delegate","overlay","moodle-core-event","moodle-core-notification-alert"]},"moodle-filter_mathjaxloader-loader":{"requires":["moodle-core-event"]},"moodle-editor_atto-editor":{"requires":["node","io","overlay","escape","event","event-simulate","event-custom","yui-throttle","moodle-core-notification-dialogue","moodle-editor_atto-rangy","handlebars","timers"]},"moodle-editor_atto-plugin":{"requires":["node","base","escape","event","event-outside","handlebars","event-custom","timers"]},"moodle-editor_atto-menu":{"requires":["moodle-core-notification-dialogue","node","event","event-custom"]},"moodle-editor_atto-rangy":{"requires":[]},"moodle-report_eventlist-eventfilter":{"requires":["base","event","node","node-event-delegate","datatable","autocomplete","autocomplete-filters"]},"moodle-report_loglive-fetchlogs":{"requires":["base","event","node","io","node-event-delegate"]},"moodle-gradereport_grader-scrollview":{"requires":["base","node"]},"moodle-tool_capability-search":{"requires":["base","node"]},"moodle-theme_bootstrapbase-bootstrap":{"requires":["node","selector-css3"]},"moodle-assignfeedback_editpdf-editor":{"requires":["base","event","node","io","graphics","json","event-move","querystring-stringify-simple","moodle-core-notification-dialog","moodle-core-notification-exception","moodle-core-notification-ajaxexception"]},"moodle-atto_accessibilitychecker-button":{"requires":["color-base","moodle-editor_atto-plugin"]},"moodle-atto_accessibilityhelper-button":{"requires":["moodle-editor_atto-plugin"]},"moodle-atto_align-button":{"requires":["moodle-editor_atto-plugin"]},"moodle-atto_bold-button":{"requires":["moodle-editor_atto-plugin"]},"moodle-atto_charmap-button":{"requires":["moodle-editor_atto-plugin"]},"moodle-atto_clear-button":{"requires":["moodle-editor_atto-plugin"]},"moodle-atto_collapse-button":{"requires":["moodle-editor_atto-plugin"]},"moodle-atto_emoticon-button":{"requires":["moodle-editor_atto-plugin"]},"moodle-atto_equation-button":{"requires":["moodle-editor_atto-plugin","moodle-core-event","io","event-valuechange","tabview","array-extras"]},"moodle-atto_html-button":{"requires":["moodle-editor_atto-plugin","event-valuechange"]},"moodle-atto_image-button":{"requires":["moodle-editor_atto-plugin"]},"moodle-atto_indent-button":{"requires":["moodle-editor_atto-plugin"]},"moodle-atto_italic-button":{"requires":["moodle-editor_atto-plugin"]},"moodle-atto_link-button":{"requires":["moodle-editor_atto-plugin"]},"moodle-atto_managefiles-usedfiles":{"requires":["node","escape"]},"moodle-atto_managefiles-button":{"requires":["moodle-editor_atto-plugin"]},"moodle-atto_media-button":{"requires":["moodle-editor_atto-plugin"]},"moodle-atto_noautolink-button":{"requires":["moodle-editor_atto-plugin"]},"moodle-atto_orderedlist-button":{"requires":["moodle-editor_atto-plugin"]},"moodle-atto_rtl-button":{"requires":["moodle-editor_atto-plugin"]},"moodle-atto_strike-button":{"requires":["moodle-editor_atto-plugin"]},"moodle-atto_subscript-button":{"requires":["moodle-editor_atto-plugin"]},"moodle-atto_superscript-button":{"requires":["moodle-editor_atto-plugin"]},"moodle-atto_table-button":{"requires":["moodle-editor_atto-plugin","moodle-editor_atto-menu","event","event-valuechange"]},"moodle-atto_title-button":{"requires":["moodle-editor_atto-plugin"]},"moodle-atto_underline-button":{"requires":["moodle-editor_atto-plugin"]},"moodle-atto_undo-button":{"requires":["moodle-editor_atto-plugin"]},"moodle-atto_unorderedlist-button":{"requires":["moodle-editor_atto-plugin"]}}},"gallery":{"name":"gallery","base":"http:\/\/moodle2.jmaur.com\/lib\/yuilib\/gallery\/","combine":true,"comboBase":"http:\/\/moodle2.jmaur.com\/theme\/yui_combo.php?","ext":false,"root":"gallery\/1411477123\/","patterns":{"gallery-":{"group":"gallery"}}}},"modules":{"core_filepicker":{"name":"core_filepicker","fullpath":"http:\/\/moodle2.jmaur.com\/lib\/javascript.php?rev=1411477123&jsfile=%2Frepository%2Ffilepicker.js","requires":["base","node","node-event-simulate","json","async-queue","io-base","io-upload-iframe","io-form","yui2-treeview","panel","cookie","datatable","datatable-sort","resize-plugin","dd-plugin","escape","moodle-core_filepicker"]}}};
M.yui.loader = {modules: {}};

//]]>
</script>
<link rel="stylesheet" type="text/css" href="http://moodle2.jmaur.com/theme/yui_combo.php?rollup/3.15.0/yui-moodlesimple-min.css" /><script type="text/javascript" src="http://moodle2.jmaur.com/theme/yui_combo.php?rollup/3.15.0_1/yui-moodlesimple-min.js&amp;rollup/1411477123/mcore-min.js"></script><script type="text/javascript" src="http://moodle2.jmaur.com/lib/jquery/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://moodle2.jmaur.com/theme/essential/jquery/bootstrap_2_3_2.js"></script>
<script type="text/javascript" src="http://moodle2.jmaur.com/theme/essential/jquery/jBreadCrumb_1_1.js"></script>
<script type="text/javascript" src="http://moodle2.jmaur.com/theme/essential/jquery/fitvids_1_1.js"></script>
<script id="firstthemesheet" type="text/css">/** Required in order to fix style inclusion problems in IE with YUI **/</script><link rel="stylesheet" type="text/css" href="http://moodle2.jmaur.com/theme/styles.php?theme=essential&amp;rev=1411477123&amp;type=all" />
<script type="text/javascript" src="http://moodle2.jmaur.com/lib/javascript.php?rev=1411477123&amp;jsfile=%2Flib%2Fjavascript-static.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Google web fonts -->
        <!-- iOS Homescreen Icons -->

<link rel="apple-touch-icon-precomposed" sizes="57x57" href="http://moodle2.jmaur.com/theme/image.php?theme=essential&amp;component=theme&amp;rev=1411477123&amp;image=homeicon%2Fiphone"/>
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://moodle2.jmaur.com/theme/image.php?theme=essential&amp;component=theme&amp;rev=1411477123&amp;image=homeicon%2Fipad"/>
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://moodle2.jmaur.com/theme/image.php?theme=essential&amp;component=theme&amp;rev=1411477123&amp;image=homeicon%2Fiphone_retina"/>
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://moodle2.jmaur.com/theme/image.php?theme=essential&amp;component=theme&amp;rev=1411477123&amp;image=homeicon%2Fipad_retina"/>    <!-- Start Analytics -->
        <!-- End Analytics -->
</head>

[gjb2048]

Ok, thanks for the header. I do notice that there is only one line for 'all' but realise that it could be in the footer too.

For the life of me I still cannot replicate no matter what I do:

Where you can see the server I am using and other details. List of files sorted on type so duplicates would show in that screen shot.

[jamaur]

Wow, I think I pinned this one down. It looks like if there's no pagebackground set in the theme's settings, then we get the following CSS rule:

body {
  background-image: url();
}

That causes Chrome or YUI to behave oddly and call in an extra 'all' sheet and demand a fresh copy of both.

So, to reproduce: make sure the pagebackground is not set in the theme's General settings.

To fix: put a pagebackground or comment out the "background-image: url([[setting:pagebackground]]);" line in settings.css (i.e., disable the background).

As a proof of concept, I added the following line to the end of theme/clean/style/custom.css:

body { background-image: url(); }

and I get the same behaviour described above :D .

[gjb2048]

Thanks for the information. Odd one that. I'll see if I can replicate sometime tomorrow.

[gjb2048]

Fixed in https://github.com/DBezemer/moodle-theme_essential/commit/ce687ceebaf346587edcdc9813105b2a2a7f6872