jQuery Modal Dialogs for Sitecore 6.5-7.0 to fix Chrome 37+ browser issues

tl;dr A fix for Google Chrome 37+ which removed support for showModalDialog() and broke a lot of functionality in older releases of Sitecore and can be found on Github

11/09/2014: Sitecore have officially released patches for v6.4 to 7.0 for this bug. Glad to see that I was not a million miles off in my implementation though. Please use these patches instead: https://kb.sitecore.net/articles/581527

With the release of Google Chrome 37 we have finally lost our beloved modal dialogs created with showModalDialog(). This is used in all versions of Sitecore up to version 7.1. There is no official workaround for this yet, aside from use EnableDeprecatedWebPlatformFeatures Chrome policy, use a different browser or upgrade as stated in this knowledge base.

There was a fair amount of talk of this issue towards the end of last week, I also contributed on the main SDN thread and it seems we totally missed the issue being raised by Alex Pershteyn a few weeks ago. Well it appears those showModalDialog() is deprecated messages in the console window actually meant something and apparently ignoring them didn’t make the problem go away 😦

What’s the problem with showModalDialog?

Apparently they are evil! And we all know how much Google does not want to be evil 🙂

So Google Chrome has now officially removed support, Opera will follow suit and Mozilla Firefox is not far behind!

There is no issue in Sitecore 7.1+ since those use the jQuery UI Dialog for it’s modalling needs, which is one of the recommended ways to achieve modals. The new fangled way is to use the HTML <dialog> element, but browser support isn’t exactly forthcoming.

I was hoping some sort of polyfill would be available, or we could simply provide our own implementation of window.showModalDialog(), which is the route I went down first:

if (!scForm.browser.isIE) {
  window.showModalDialog = function (showModalDialog) {
    return function (url, name, features) {
      // some browsers dont support the call() method so call the method directly in such cases
      return open.call ?
        open.call(window, url, name, features)
        : open( url, name, features);
      };
    }(window.showModalDialog);
}

Although it kind of fixed the issue and popups were now openeing, the problem with this was that there was no return value, unlike window.showModalDialog(), nor was it blocking code execution, which in itself is not a bad thing but if your code was not written with that in mind things may not work as expected!

Stop jabbering on and give me the code already!

Ok, here: Sitecore Modal Fix on Github.

Or follow the official recommendation from the Sitecore Knowledge Base article.

So what does this do?

I’ve back-ported the newer jQuery UI Dialog functionality from Sitecore 7.1

The newer version has gone away from using browser specific Javascript files (InternetExplorer.js and Gecko.js) to using a single Browser.js file. That was probably too much work to integrate back into the older versions of Sitecore.

My initial commit followed a similar approach as Sitecore by copying the modal functionality into Sitecore.js which worked for Chrome and Firefox in all versions that I tested, and also worked for IE11 for Sitecore 6.5. For some reason, the following line in Default.aspx causes IE to go into a strange V5 compatibility mode and the popups rendered at the end of the page:

<meta http-equiv="X-UA-Compatible" content="IE=5"/>

Since Internet Explorer still supports the forbidden dialog, I decided to not battle it and to make the changes only to Gecko.js, this fixes the issue for Chrome 37 and any other browser that uses (I couldn’t figure out how/where this was referenced from…) but leaves Internet Explorer alone so it uses standard Sitecore functionality. The showModalDialog method calls the jQuery dialog method instead now (which was renamed to stop a recursive loop):

scBrowser.prototype.showModalDialog = function (url, arguments, features, request, callback) {
  this.showjQueryModalDialog(url, arguments, features, request, callback);
}

I also copied across JQueryModalDialogs.html and the referenced jQuery+UI files. I merged across some other changes from Sitecore.js and Gecko.js, and decided to throw in some conditional browser detection statements in there:

if (this.browser.isIE) {
  this.browser.showModalDialog(command.value, new Array(window), command.features, request);
} else {
  this.browser.showModalDialog(command.value, [window], command.features, request, request.onCloseModalDialogCallback);
  request.onCloseModalDialogCallback = null;
}

This was all working, aside from the Upload Package dialog, which would throw a very cryptic JavaScript error. The file was uploading successfully though!

This bug took the majority of my time to track down. Eventually Firefox to the rescue. Firebug FTW!

I exported the code to a project using dotPeek and then used grepWin to find the offending code. Hardcoded JavaScript! Gaaaah!

HttpContext.Current.Response.Write(string.Format("<html><head><script type='text/JavaScript' language='javascript'>window.top.frames[0].scForm.postRequest('', '', '', '{0}(filename={1})')</script></head><body>Done</body></html>", (object) str1, (object) str2));

These pipelines upload the package file and send an OK response back to the browser. So I’ve provided new implementation of these 2 pipelines. Note that this uses a different JavaScript namespace than SC7.1 version since my modal dialog is declared in Gecko.js (so we need to declare it as scForm.browser. instead…)

window.top.scForm.browser.getTopModalDialog().frames[0].scForm.postRequest('', '', '', '{0}(filename={1})')

Take a look at the code on Github, I simply call the original Process method in IE otherwise render a modified version of Sitecore 7.1 code.

if (Sitecore.UIUtil.IsIE())
{
    base.Process(args);
    return;
}

There’s not much to it, but just diff the original files (which I have included in the source folder) with the modified files in Release. The only thing I should mention is that there was minimal differences between Sitecore 6.6 and 7.0 files, most likely bug fixes, which on the face of it should not make much difference hence the reason there is a single version for those.

So now IE is using the existing the functionality which continues to work and the other browsers use functionality from Sitecore 7.1+ release.

Does it actually work?

I’ve tested in following versions of Sitecore:

• 6.5 rev 121009 (SP2)
• 6.6 rev 140410 (SP2)
• 7.0 rev 140408 (SP1)
• Jetstream 2.0 demo – which uses 7.0 rev 130810

With the following browsers:

• Internet Explorer 11
• Mozilla Firefox 31
• Google Chrome 36 + 37

Some of the basic tests I have carried out:

• Publish window opens correctly
• Package Installation Wizard opens correctly, able to select package and upload package correctly.
• Prompts to overwrite existing files and Items displayed correctly
• Can open Layout details, edit presentation renderings, add new controls, set datasources and edit rendering parameters
• Can upload images to media library, attach new image and detach as expected, using both normal and advanced upload options.
• Able to rename Items, set display name and change templates
• General Link, Image Field and Rich Text Field command working correctly in Content Editor
• Able to edit content in Page Editor, add new controls, set datasources, edit rendering parameters, insert images and DMS functionality working.
• Basic tests using Web Forms for Marketers module.
• Various other “blocking” popups working – e.g. Aliases, Publishing Viewer, My Item Locks, Clones.

Installation

Copy the files from the Release folder into your Sitecore installation. If you are using Sitecore 6.5 then rename the Geko.SC65.js and Sitecore.SC65.js files.

Something gone horribly wrong? Delete the patch include files and revert the original js files from the source folder.

The usual disclaimer, use at your own risk. This is highly experimental and not in any way officially endorsed by Sitecore.

What is remaining?

Plenty probably. The main issue will be hardcoded JavaScript code present in Sitecore.Kernel.dll and Sitecore.Client.dll

I’ve fixed 2 of the issues in the uiUpload pipeline, but there is code present in the following classes which may need to be addressed. I couldn’t actually find how to invoke this code so unable to fix/test. If you know, please get in touch:

Sitecore.Client.dll – Contains references to window.top.frames[0].scForm.postRequest() and window.top.close()

• Sitecore.Shell.Application.Dialogs.Attach.AttachPage2
• Sitecore.Shell.Application.Dialogs.Upload.UploadForm
• Sitecore.Shell.Application.Install.Dialogs.UploadPackageForm
• Sitecore.Shell.Application.Media.UploadMedia.UploadMediaPage2

Sitecore.Kernel.dll – Contains reference to window.top.close()

• Sitecore.Shell.Framework.Windows

There is still a reference to showModalDialog() in Gecko.js but this only affects those using the Safari browser:

scBrowser.prototype.prompt = function(text, defaultValue) {
  if (!this.isSafari) {
    return prompt(text, defaultValue);
  } else {
    var arguments = new Array(text, defaultValue);
    var features = "dialogWidth:400px;dialogHeight:110px;help:no;scroll:no;resizable:no;status:no;center:yes";
    return showModalDialog("/sitecore/shell/prompt.html", arguments, features);
  }
};

But the newer Browser.js still uses something similar so maybe this will be ok…

scBrowser.prototype.prompt = function (text, defaultValue) {
  if (navigator.userAgent.indexOf('Trident') > -1 || this.isSafari) {
    var arguments = new Array(text, defaultValue);
    var data = { height: "110"};
    var features = "dialogWidth:400px;dialogHeight:#{height}px;help:no;scroll:no;resizable:no;status:no;center:yes".interpolate(data);
    return showModalDialog("/sitecore/shell/prompt.html", arguments, features);
  } else {
    return prompt(text, defaultValue);
  }
};

What next?

This needs testing. I haven’t done anything more than what I have said above, which is no way near enough for a production system! If it works for you then please let me know, if it doesn’t then:

• Fork it on Github and make a pull request with suggested fixes
• Comment and let me know what the issue is
• Contact me on Twitter

---

UPDATE – 05-Sept-14:

Thanks to the testing and feedback from Rob and Ola there has been a small update to EditorPage.js file. When in Page Editor mode and you edit a Rich Text field by launching the RTE editor the modal would not correctly close when you click accept or reject. The code has been updated from Sitecore 7.1 with an IE specific check:

// Page editor
if (scForm.browser.isIE) {
  window.close();
} else if (top._scDialogs.length != 0) {
  top.dialogClose();
} else {
  scCloseRadWindow();
}

There may be more of this type of update that needs to be made, your testing and feedback appreciated.

---

More Reading:

• showModalDialog disabled by default in Chrome 37 on SDN Forum
• Sitecore modals and problems in newer browser
• Sitecore Modal Pop-ups are not working in Chrome
• Sitecore Modal Dialogs Fix For Chrome 37+

Screenshots:

Chrome and Firefox now use the new jQuery Modal Dialogs:

Internet Explorer continues to use the old, in-built modal (wich are draggable outside the window context):