Funny behaviour when using Administration Menu Module

I have just installed admin menu 6.x-1.5 and I cannot get it to behave this way. Using a zen theme. The imagepicker page is in an Iframe so I would guess this is a theming issue although I don't know how to fix it :-(

I get this as well. I'm using a custom theme based on the framework theme. Its showing up because of the <?php echo $scripts ?> in the imagepicker-page.tpl.php file.

If you make a copy of the file and put it in your own theme it overrides the module version. Then if you remove the <?php echo $scripts ?> from the imagepicker-page.tpl.php file you don't get the admin menu anymore.

However you aren't able to insert the image, so its pretty much useless.

I have tried to replicate this behaviour using fckeditor under wysiwyg module, with framewok and zen, using admin menu.
I copied over magepicker-page.tpl.php to the theme, flushed cache as in devel module and everything works, I can see imagepicker and the template is picked up (I added a comment so I could distinguish from the default). I am able to paste into fckeditor.
Framework failed to make the tabs but presented a bulleted list, it does not have secondary links by default, same as Garland. This can be overcome by copying over the primary links definitions in css to secondary links. Zen does not have this problem, nor does good old-fashioned Bluemarine.

So I'm sorry but I cannot replicate the behaviour you have described.

I've found that the behavior is easy to replicate - It happens on every install I have where ImagePicker is sitting along-side of admin_menu/admin_menu_toolbar.

Theme: Giordani

Here's what I found:

The problem appears with ImagePicker (and a couple other modules like TinyMCE) because admin_menu_toolbar.module does a unilateral replacement of the admin menu elements and re-injects them into the document object (this is fine). This replacement also happens when imagepicker is being rendered on any edit page because the imagepicker "edit" module is shown as an <iframe> within the page stream (specifically - imagepicker.tpl.php and imagepicker.page.tpl.php [iframe template files]) (this is not fine). ImagePicker re-loads ALL of the STYLES and SCRIPTS which then reinvokes the admin_menu within the <iframe>. This is (in my opinion) a flaw in the ImagePicker implementation (with some scrutiny warranted on the injection mechanism for admin_menu) and should be corrected because this "re-embedding" plays bad games with the TinyMCE module as well. Specifically - if TinyMCE, admin_menu and ImagePicker are all loaded, the edit pages are completely hosed.

So that's why you see the embedded iframe is also getting the admin_menu_toolbar injected into it as it's being rendered.

Imagepicker and TinyMCE are the subjects of lots of strangeness like this and suffers the same side-effects from some other modules which manipulate the DOM contents.

I love both modules but I need a working ImagePicker so I had to deactivate admin_menu_toolbar. For similar reasons - (probably a bad interaction with JavaScripts) Disabling admin_menu enables TinyMCE to work with ImagePicker even though the STYLES and SCRIPTS are being reloaded in the <iframe>.

I look forward to all of them playing nicely together soon!

Confirming this issue with latest dev versions of Image Picker, CKEditor and the custom-made themes I am using.

Subscribing to see how all this goes.

I see that there is a function admin_menu_suppress()
I can't test this as I'm not getting this problem, but if anyone is in a position to test could you try adding

if (module_exists('admin_menu')) {
  admin_menu_suppress();
}

to function theme_imagepicker() in imagepicker.theme.inc

This partially worked for me.

I say 'partially' because it had some side-effects to my theme. I wasn't sure at which place exactly I should paste the code within the function theme_imagepicker().

- At first I tried right after the function's first '{'.

This made the Admin Menu go away from the Image Picker's iframe, but caused the iframe to have a smaller version of the full background of my site as its own background (I use a wallpaper-sized .jpg file). The Admin Menu bar went away though, which is a good thing. I now can see the 'Upload', 'Browse', 'Browse Public' & 'Groups' + the 'Your quota is Unlimited and you have used 0 B in 0 images' message that were hidden before. That is a good thing too. The bad thing is that these buttons' mouse-over effect is messed up. They all show perfectly, but when I mouse over them they disappear and a blank box is placed in their place. This doesn't happen to the bottom 'Upload' button that seems to behave normally.

- Then I tried placing the code right after the:

variable_get('imagepicker_thickbox_enable', 1)),
      ),
    );

    drupal_add_js($settings, 'setting');
    drupal_add_js($path .'/imagepicker_iframe.js');
  }

and just before the:

$vars['content'] = $content;
$vars['head_title']  = (drupal_get_title() ?...

This made the background issue mentioned above go away, but didn't solve the messed up buttons.

So, can you please advice as where exactly we need to place the code in order to avoid such issues?

Thank you in advance.

I'm sure that the background issue and the messed up buttons issue can be fixed in your theme. You can try copying imagepicker-page.tpl.php to your theme and work on it there. The buttons are menu_local_task and if you can see them then they are being rendered, things like mouseover causing it to go black probably means an image is missing.
None of these issues are caused by admin menu suppression I'm sure, just make sure you flush the caches and rebuild the theme registry, I use devel module for that.

I have added

  if (module_exists('admin_menu')) {
    admin_menu_suppress();
  }

To CVS, this will appear in the latest dev version tomorrow.

well, the background issue was solved by placing the code in the correct place within the imagepicker.theme.inc as I've explained in my previous post. Still, the buttons' mouseover issue remains. This is weird, because the rest of the buttons in the page are rendered correctly...

For example, I use the theme Switcher Module, so in the same page there are the Theme Switcher block's 'Switch' button and at the bottom of my edit-content-type page there are also the 'Save' and 'Preview' buttons. All these render ok.

Now, within the Image Picker iframe, there is the top set of the 'Upload', 'Browse', 'Browse Public' & 'Groups' buttons that seem to have the problem. At the bottom of the same iframe, there is the 'Upload' button that behaves normally.

If there was a missing button image, wouldn't the rest of the buttons (especially the 'Upload' button within the same iframe) also have the same issue?

Anyways, this might be a completely different issue and as you say, it might not have anything to do with the Admin Menu being used. I'll test some more, I'll even try copying the imagepicker-page.tpl.php to my theme and see how that works out.

PS: I did flash all caches as you suggest. Still no luck.

Update:...

Checking the css behind the buttons with the help of the Web Developer firefox plugin, showed that somehow different css code applies for the buttons with the issue. Normally-behaving buttons have:

input, select (line 1406)
{
font-family: Tahoma,Arial,Helvetica,Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;

while the ones with the issue have this instead:

a (line 1075)
{
font-family: Tahoma,Arial,Helvetica,Sans-Serif;
text-decoration: underline;
color: #326671;
}
a:visited, a.visited (line 1090)
{
font-family: Tahoma,Arial,Helvetica,Sans-Serif;
text-decoration: underline;
color: #577785;
}
a:hover, a.hover (line 1098)
{
font-family: Tahoma,Arial,Helvetica,Sans-Serif;
text-decoration: none;
color: #326671;

plus this at the end of their css code:

ul.primary li a (line 228)
{
background-color: #dddddd;
border-top-color: #bbbbbb;
border-right-color-value: #bbbbbb;
border-bottom-color: #bbbbbb;
border-left-color-value: #bbbbbb;
border-left-color-ltr-source: physical;
border-left-color-rtl-source: physical;
border-right-color-ltr-source: physical;
border-right-color-rtl-source: physical;
border-top-width: 1px;
border-right-width-value: 1px;
border-bottom-width: 1px;
border-left-width-value: 1px;
border-left-width-ltr-source: physical;
border-left-width-rtl-source: physical;
border-right-width-ltr-source: physical;
border-right-width-rtl-source: physical;
border-top-style: solid;
border-right-style-value: solid;
border-bottom-style: none;
border-left-style-value: solid;
border-left-style-ltr-source: physical;
border-left-style-rtl-source: physical;
border-right-style-ltr-source: physical;
border-right-style-rtl-source: physical;
height: auto;
margin-right: 0.5em;
padding-top: 0pt;
padding-right: 1em;
padding-bottom: 0pt;
padding-left: 1em;
text-decoration: none;
}
ul.primary li a:hover (line 243)
{
background-color: #eeeeee;
border-top-color: #cccccc;
border-right-color-value: #cccccc;
border-left-color-value: #cccccc;
border-left-color-ltr-source: physical;
border-left-color-rtl-source: physical;
border-right-color-ltr-source: physical;
border-right-color-rtl-source: physical;
border-bottom-color: #eeeeee;
}

I have omitted the part of the css that is identical for both working and non-working buttons.

Any ideas why this might be happening?

Save, Preview, Upload etc are form elements, the buttons along the top are not buttons at all, they are a modified list rendered as tabs, eg <ul class="tabs primary">
This css code uses things like border-right-color-rtl-source: physical; which I have not seen before, no mention of 'border-right-color-rtl-source' in the css reference nor do I see any reference to 'physical' as a value for border. See w3schools
Any function in imagepicker.theme.inc (except the first one) can be copied to your theme's template.php, renamed appropriately and tweaked there.