When using IMCE file browser, aggregated JS files within default/files/js created by the AdvAgg module appear to contain all sorts of gibberish characters when loaded by the browser. Inspecting the page in Chrome dev tools reveals errors including "Uncaught SyntaxError: Invalid or unexpected token", "Uncaught ReferenceError: Drupal is not defined", and "Uncaught ReferenceError: imce is not defined". Inspecting the JS files through dev tools shows the gibberish characters, but they look OK when downloaded and viewed with FTP. Using the AdvAgg bypass cookie to disable Advagg temporarily resolves the issue. Changing the compression routine doesn't seem to matter.

Based on the several errors arising including Drupal and imce being undefined I suspect there's a load order issue, but I'm unsure how to manually override AdvAggs load order. Alternatively, I was thinking I could disable Advagg within IMCE windows, but I'm not sure how to go about that.

Thanks in advance!

CommentFileSizeAuthor
#29 advagg-2817523-29-fix-imce-not-advagg.patch4.81 KBmikeytown2
#25 advagg-2817523-25-disable-core-js-imce.patch493 bytesmikeytown2
#12 firebug_js_response_1.jpg212.77 KBcwkosman
#7 html_response_1.jpg165.09 KBcwkosman
#7 html_headers_1.jpg114.36 KBcwkosman
#7 js_response_1.jpg238.87 KBcwkosman
#7 js_headers_1.jpg112 KBcwkosman

Comments

ckosman created an issue. See original summary.

mikeytown2’s picture

mikeytown2 commented

Gibberish usually means gzip problems. The latest dev of advagg has some changes to the .htaccess file; it might help. In any case, fixing the gzip issue would be priority #1.

What does the network panel say about the Content-Encoding for the js files? If you click on the response tab is it gibberish ?

cwkosman’s picture

cwkosman commented

Hey mikeytown2,

Thanks for your quick reply! Enabling the content-encoding column in the network panel of dev tools, its blank for all js files in the IMCE window. Those files are jquery.min.js, jquery.ui.min.js, and all the aggregated JS files (5 in this case, the number I arbitrarily specified in the Bundler options).

mikeytown2’s picture

mikeytown2 commented

3 things
Response headers: Content-Encoding - You confirmed it's empty
Request headers: what does Accept-Encoding say?
Response tab - is it gibberish?

cwkosman’s picture

cwkosman commented

1. Response headers => Content encoding is gzip for the html file, but is blank for each of the javascript files.
2. Accepting encoding (on the html document) is gzip, deflate, sdch, br
3. Nope. The head has all of the javascript files called in, starts with jquery (from google cdn), then one of the aggregated files (containing jquery once, among other things), then jquery ui, then the rest of the aggregated js.

mikeytown2’s picture

mikeytown2 commented

If the response tab is readable then the browser can parse it as well. My guess is that deferred or footer changes done by the modifier is causing the issues you're seeing. Disable it and see if the problem still exists.

cwkosman’s picture

cwkosman commented
StatusFileSize
new js_headers_1.jpg112 KB
new js_response_1.jpg238.87 KB
new html_headers_1.jpg114.36 KB
new html_response_1.jpg165.09 KB

Hey mikeytown2,

I apologize, I think I misinterpreted what you were asking in your 3rd point of (#4). In the response tab when opening IMCE windows, the javascript files are gibberish, but the html document is fine. To clarify, I've attached to this comment:

  1. a screenshot of the Chrome dev tools with one of the offending javascript files selected and the headers tab open (screenshot entitled "js_headers_1")
  2. a screenshot of the response tab for the same javascript file ("js_response_1")
  3. a screenshot the headers tab for the html document ("html_headers_1")
  4. a screenshot of the response tab for the html document ("html_response_1")

Re: your suggestion in #6, the gibberish is present with AdvAgg Modifier turned off; it was never turned on.

Thanks for your time and patience!

cwkosman’s picture

cwkosman commented

The plot thickens: I've been using Chrome, where the developer tools show the javascript is jibberish in the response tab. In Firefox, the issue is not present at all: it's developer tools show all javascript working as intended. In internet explorer, the IMCE windows takes quite a long time to display (~15 seconds), but ends up working.

Compare the following aggregated javascript files from the site I'm working on:
https://dev.eoas.ubc.ca/sites/default/files/js/js_3TykeRWpejhD4-J3vdlaNX...
vs.
https://dev.eoas.ubc.ca/sites/default/files/js/js_3TykeRWpejhD4-J3vdlaNX... (this is produced because I have "create .gz files" checked off under Configuration => Obscure Options).

In Chrome, entering the first one in the address bar returns gibberish, the second one doesn't.
In Firefox, both are the same.
In IE, both are the same.

mikeytown2’s picture

mikeytown2 commented

What does firebug in firefox say?

mikeytown2’s picture

mikeytown2 commented
Title: Unknown characters in JS files within IMCE » Nginx & Chrome - gzip issues

Thanks for providing a link to the js file. Pretty odd behavior. I think it's nginx related.

mikeytown2’s picture

mikeytown2 commented

In Chrome

https://dev.eoas.ubc.ca/sites/default/files/js/js_3TykeRWpejhD4-J3vdlaNX...
Content-Length:19775

https://dev.eoas.ubc.ca/sites/default/files/js/js_3TykeRWpejhD4-J3vdlaNX...
Content-Length:6607

In Firefox

https://dev.eoas.ubc.ca/sites/default/files/js/js_3TykeRWpejhD4-J3vdlaNX...
Content-Length:6607
Content-Encoding:gzip

https://dev.eoas.ubc.ca/sites/default/files/js/js_3TykeRWpejhD4-J3vdlaNX...
Content-Length:6607
Content-Encoding:gzip

In the filesystem what are the sizes of these 2 files?

cwkosman’s picture

cwkosman commented
StatusFileSize
new firebug_js_response_1.jpg212.77 KB

In firebug on the html document:
Response header: content-encoding is gzip
Request headers, accept encoding is gzip, deflate, br
Response tab is identical.

On an offending javascript file:
The response tab shows regular, non-gibberish javascript. See attached screenshot.

cwkosman’s picture

cwkosman commented

In the file system:
– the js file ending in .gz is 19,775
– the js file ending in .js is 6,607

mikeytown2’s picture

mikeytown2 commented

The filesystem seems like the issue; the .js.gz and .js files got swapped somehow. Delete both files and then hit them again; in order to regenerate them.

cwkosman’s picture

cwkosman commented

I should additionally note: the jibberish appearing in the .js file but not on the js.gz file in Chrome doesn't happen for every single file Advagg creates in default/files/js.

For example, the following both behave in Chrome:
https://dev.eoas.ubc.ca/sites/default/files/js/js_5R5dHItglZFGN9-W55Aoqd...
and
https://dev.eoas.ubc.ca/sites/default/files/js/js_5R5dHItglZFGN9-W55Aoqd...

Yet they are in the same directory as the files cited in comment (#8) and (#11).

cwkosman’s picture

cwkosman commented

Cleared both the .js.gz and .js versions, cleared Drupal caches and my own browser caches, and had the files regenerated but the issue persists.

mikeytown2’s picture

mikeytown2 commented

Chrome

https://dev.eoas.ubc.ca/sites/default/files/js/js_5R5dHItglZFGN9-W55Aoqd...
Content-Length:24450

https://dev.eoas.ubc.ca/sites/default/files/js/js_5R5dHItglZFGN9-W55Aoqd...
Content-Length:13443
Content-Encoding:gzip

In any case these files are not inside of the advagg_js dir. You have issues with core; which means there's a not a lot I can do to help you if you're not using advagg.

mikeytown2’s picture

mikeytown2 commented

Go to admin/config/development/performance/advagg/info and under Hook Theme Info and Hook Render Info what is listed?

cwkosman’s picture

cwkosman commented

Hook theme info:
template_process
advagg_mod_process_move_js
_advagg_process_html
ctools_process
rdf_process

Hook render info:
scripts:
#pre_render - _advagg_mod_pre_render_scripts, advagg_pre_render_scripts, advagg_modify_js_pre_render
#group_callback - advagg_group_js
#aggregate_callback - _advagg_aggregate_js
#after_build - conditional_fields_element_after_build
styles:
#pre_render - _advagg_mod_pre_render_styles, advagg_pre_render_styles, advagg_modify_css_pre_render
#group_callback - drupal_group_css
#aggregate_callback - _advagg_aggregate_css
#after_build - conditional_fields_element_after_build

cwkosman’s picture

cwkosman commented

Just updated core from 7.50 to 7.51. Jibberish javascript still present, but now IMCE window works. Unsure how that's possible.

Next move is to change to dev version of advagg

mikeytown2’s picture

mikeytown2 commented

In the HTML source see if the script tags point to the advagg_js dir or the js dir.

cwkosman’s picture

cwkosman commented

Only in IMCE dialogue windows, the HTML script tags in the head point to the js directory.
Every other page on the site, including all other administration pages, HTML script tags in the head point to advagg_js directory.

On that note, I'll point out this is similar to the issue at https://www.drupal.org/node/2153217

mikeytown2’s picture

mikeytown2 commented

Makes me wonder what runs after advagg_ajax_render_alter(); which is where advagg takes over ajax responses and renders the js.

What does this output?

print_r(module_implements('ajax_render_alter'));
cwkosman’s picture

cwkosman commented

Array
(
[0] => advagg
[1] => devel
)

mikeytown2’s picture

mikeytown2 commented
Title: Nginx & Chrome - gzip issues » imce-page.tpl.php is incompatible with advagg aggregation. Core gzip issues with nginx.
Status: Active » Needs review
StatusFileSize
new advagg-2817523-25-disable-core-js-imce.patch493 bytes

OK so imce does it's own html page http://cgit.drupalcode.org/imce/tree/tpl/imce-page.tpl.php

No way around this. If you're having issues my recommendation is to disable js aggregation on the imce page.

Put this in hook_init().

  $args = arg();
  if ($args[0] === 'imce' && empty($args[1])) {
    $GLOBALS['conf']['preprocess_js'] = FALSE;
  }

If this fixes your issue I might include it inside of advagg as a hidden setting that can be turned on inside of settings.php. Guessing other people will have the same issue given the popularity of imce.

mikeytown2’s picture

mikeytown2 commented

hmmm ok so there might be a way to get this to work. theme('imce_page') is what calls imce-page.tpl.php so in theory I could copy imce-page.tpl.php and use advagg to overwrite it so that it looks like this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php print $GLOBALS['language']->language; ?>" xml:lang="<?php print $GLOBALS['language']->language; ?>" class="imce">

<head>
  <title><?php print t('File Browser'); ?></title>
  <meta name="robots" content="noindex,nofollow" />
  <?php if (isset($_GET['app'])): drupal_add_js(drupal_get_path('module', 'imce') .'/js/imce_set_app.js'); endif;?>
  <?php print drupal_get_html_head(); ?>
  <?php print drupal_get_css(); ?>
  <?php $scripts_header_array = advagg_get_js('header'); print drupal_render($scripts_header_array); ?>
  <style media="all" type="text/css">/*Quick-override*/</style>
</head>

<body class="imce">
<div id="imce-messages"><?php print theme('status_messages'); ?></div>
<?php print $content; ?>
<?php $scripts_footer_array = advagg_get_js('footer'); print drupal_render($scripts_footer_array); ?>
</body>

</html>

Can you test this out? Inside of sites/all/modules/imce/tpl/imce-page.tpl.php

Change
print drupal_get_js('header');
to
$scripts_header_array = advagg_get_js('header'); print drupal_render($scripts_header_array);

and change
print drupal_get_js('footer');
to
$scripts_footer_array = advagg_get_js('footer'); print drupal_render($scripts_footer_array);

Note to self

            [imce_page] => Array (
                    [template] => imce-page
                    [variables] => Array (
                            [content] =>
                        )
                    [path] => sites/all/modules/imce/tpl
                    [type] => module
                    [theme path] => sites/all/modules/imce
                    [preprocess functions] => Array (
                            [0] => template_preprocess
                            [1] => omega_initialize_attributes
                            [2] => contextual_preprocess
                        )
                    [process functions] => Array (
                            [0] => omega_cleanup_attributes
                            [1] => template_process
                            [2] => ctools_process
                        )
                )
cwkosman’s picture

cwkosman commented

I'm happy to report that both solutions (#25) and (#26) work.

The solution in #25 successfully bypassed Advagg in IMCE windows; no console errors, including jibberish javascript, were reported.

The solution in #26 also worked. It called in aggregated JS files from sites/default/files/advagg_js rather than sites/default/files/js and no console errors were reported.

Nice work and thank you so much for your time and patience.

mikeytown2’s picture

mikeytown2 commented

#25 bypasses core not advagg.

I'll work on a solution based off of #26.

mikeytown2’s picture

mikeytown2 commented
StatusFileSize
new advagg-2817523-29-fix-imce-not-advagg.patch4.81 KB

  • mikeytown2 committed 18d1fca on 7.x-2.x 
    Issue #2817523 by mikeytown2, ckosman: imce-page.tpl.php is incompatible...
mikeytown2’s picture

mikeytown2 commented
Status: Needs review » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.