media_file_edit_modal (CTools Modal) is injecting CSS which is removed via hook_css_alter() [#1783268]

Problem
Media module's ctools popup for ['media/%file/edit/%ctools_js'] injects CSS files which are overriden in my theme via hook_css_alter(). When I close the dialog, the css from system.theme.css is injected and breaks my entire website.

Replicate Problem

Install media module, and ctools (for modal popup)

Create a node with a media field. Add some images.

Create a theme. Enable this theme (also enable it for content editing), and let `seven` be your admin theme. Important, as I believe Media module falls back on your admin theme's css here.

Set your media browse theme settings to be your front-end theme here:
/admin/config/media/browser

In your enabled, non-admin theme add this hook

function YOURTHEME_css_alter(&$css) {
  $exclude = array(
    'modules/ctools/css/modal.css' => FALSE, 
    'misc/ui/jquery.ui.theme.css' => FALSE,       
    'misc/ui/jquery.ui.tabs.css' => FALSE,
    'misc/ui/jquery.ui.dialog.css' => FALSE,
    'misc/vertical-tabs.css' => FALSE,
    'modules/aggregator/aggregator.css' => FALSE, 
    'modules/block/block.css' => FALSE,
    'modules/book/book.css' => FALSE,
    'modules/comment/comment.css' => FALSE,
    'modules/dblog/dblog.css' => FALSE,
    'modules/file/file.css' => FALSE,
    'modules/filter/filter.css' => FALSE,
    'modules/forum/forum.css' => FALSE,
    'modules/help/help.css' => FALSE,
    'modules/menu/menu.css' => FALSE,
    'modules/node/node.css' => FALSE,
    'modules/openid/openid.css' => FALSE,
    'modules/poll/poll.css' => FALSE,
    'modules/profile/profile.css' => FALSE,
    'modules/search/search.css' => FALSE,
    'modules/statistics/statistics.css' => FALSE,
    'modules/syslog/syslog.css' => FALSE,
    'modules/system/admin.css' => FALSE,
    'modules/system/maintenance.css' => FALSE,
    'modules/system/system.css' => FALSE,
    'modules/system/system.admin.css' => FALSE,
    'modules/system/system.base.css' => FALSE,
    'modules/system/system.maintenance.css' => FALSE,
    'modules/system/system.menus.css' => FALSE,
    'modules/system/system.theme.css' => FALSE,
    'modules/taxonomy/taxonomy.css' => FALSE,
    'modules/tracker/tracker.css' => FALSE,
    'modules/update/update.css' => FALSE,
    'modules/user/user.css' => FALSE,
  );
  $css = array_diff_key($css, $exclude);
}

This should remove all the Drupal base CSS from your theme.

Then edit the node, where you've added some images to your media field. Click "edit media", then close the dialog.

You'll notice at this point that CSS like system.theme.css is injected via an AJAX call, even though you thought you've removed it via your hook_css_alter().

Solution (with patch)
The solution i've found was to add a `theme callback` to ['media/%file/edit/%ctools_js'] menu item. See attached patch.

Comment	File	Size	Author
	media-ctools-popup-css-injection-0.patch	350 bytes	j0rd

Comments

Comment #1

j0rd commented 13 September 2012 at 15:48

This could also be because of this hook `hook_admin_paths()`

/**
 * Implement hook_admin_paths().
 */ 
function media_admin_paths() {
  $paths['media/*/edit/*'] = TRUE; 
...
}

There's another `admin path` in file_entity which causes problems in the `Select Media` popup with regards to theming as well.

  $paths['file/*/edit'] = FALSE;

Which appears to force 'media/*/edit/*' to be an admin path, and thus I suppose use the admin theme, which was injecting the CSS into my front end user theme.

http://api.drupal.org/api/drupal/modules!system!system.api.php/function/hook_admin_paths/7

Edit: I can confirm that this also resolves the issue for me. Although I consider it a work around, as it doesn't deal with the issue of the dialog injecting CSS into the frontend theme.

/** 
 * Implements hook_admin_paths_alter(). 
 */ 
function YOURMODULE_paths_alter(&$paths) {
  // Treat all media edit pages as non-administrative in order to use site theme. 
  $paths['media/*/edit/*'] = FALSE; 
}