Custom Admin CSS not applied to WP2.6 Edit Image page (TinyMCE plugin wpeditimage/editimage.html)

[caesarsgrunt]

Custom admin colours set using the wp_admin_css_color() function are not applied to WP2.6's new Edit Image page (TinyMCE plugin wpeditimage/editimage.html).
Instead they actually cause the default colour scheme to be removed, leaving no colour scheme applied to that iframe. Screenshot attached.

[caesarsgrunt]

screenshot illustrating bug

[azaozz]

Replying to caesarsgrunt:

Custom admin colours set using the wp_admin_css_color() function are not applied to WP2.6's new Edit Image page (TinyMCE plugin wpeditimage/editimage.html).

Are there any js errors reported? The right css file is chosen by js and added to the iframe's head to avoid having to load lots of unnecessary files.

[caesarsgrunt]

Replying to azaozz:

Are there any js errors reported? The right css file is chosen by js and added to the iframe's head to avoid having to load lots of unnecessary files.

Nope, no JS errors.

I had realised that JS was used to insert the stylesheet (although I can't actually find the bit of JS that does it...)
The relevant styleheet tag isn't inserted at all when custom colours are enabled. I've tried both my own colours and the example admin colours plugin 'Brazil'; neither works.

I don't supppose it's relevant, but if I try opening /wp-includes/js/tinymce/plugins/wpeditimage/editimage.html directyly, ie not in the iframe, it loads plenty of code but nothing is visible, just a blank page, and it throws three JS errors to do with tinymce not being defined.

[caesarsgrunt]

OK; I've found the problem.

Here's the function which detects the styleheet used by the parent (lines 76-84 of /wp-includes/js/tinymce/plugins/wpeditimage/js/editimage.js) :

// import colors stylesheet from parent
var win = tinyMCEPopup.getWin();
var styles = win.document.styleSheets;

for ( i = 0; i < styles.length; i++ ) {
	var url = styles.item(i).href;
	if ( url && url.indexOf('colors-') != -1 )
		document.write( '<link rel="stylesheet" href="'+url+'" type="text/css" media="all" />' );
}

The problem is line 82 :

	if ( url && url.indexOf('colors-') != -1 )

Neither of the admin stylesheets I tried has 'colours-' in the name... so they weren't being detected.

Is there any need for the hyphen? Removing it would increase compatibility greatly... I removed in on my test server and it worked perfectly.

For the moment I'll rename my custom CSS file from 'admin-colours.css' to something with a hyphen after 'colours'.

[caesarsgrunt]

Proposed fixed version of editimage.js, with 'colours-' changed to 'colours'.

[azaozz]

Yes, it expects the custom colors stylesheets to follow the default file names: colors-classic, colors-fresh, colors-[custom], etc. Of course the hyphen can be removed to improve compatibility.

[azaozz]

(In [8356]) fixes #7311 for trunk.

[azaozz]

(In [8357]) Improve compatibility when importing custom colors css, props caesarsgrunt. fixes #7311 for 2.6.