Tuesday, April 3, 2012

Why Modal Dialogs should be used with extreme caution ?

By Renaud Bougueng

Modal dialogs have been extensively discussed in class[1]: what they are, how should they be used, etc. I personally thought I had a fairly good understanding of it until I stumble onto the situation I am about to share here.
Just as background information, a modal window, by definition, is 

"a child window that requires users to interact with it before they can return to operating the parent application, thus preventing the workflow of the application main window"[2].

It is important to keep that definition in mind in order to understand the trickiness in the story I am about to tell.

Now, this story specifically concerns modal pop-ups in Google Chrome browser application. It also involves the uOttawa virtual campus, and the Skype toolbar plug-in. But you will note that it could have been any other applications inside a given browser.

About the uOttawa virtual campus (WebCT) system: it is a really important web portal used by a major community of students and staff at the university of Ottawa. It is used per course, to post course materials, assignments, manage group discussion, submit and automatically grade students.

Now, here is the story:
  1. I was using the WebCT to attach some files from my local file system to a post I made in WebCT. The app to attach files in WebCT is a non-modal pop-up (which means it does not block possible interaction with its parent window) in which you can select the original location of your files. You can select files:
    • From WebCT local user repository ("My Files" icon on the picture below),

    • From the Class repository (in this case, it was "CSI3531" files), 

    • From your local file system. For the later, it is a file browser that is deployed as a java applet in which you can browse local folders and select your computer files.  

  2. Now, in order to open the file browser, I had to click on the third icon normally listed in the window with the name "My Computer". But I could not see it, instead there was a blank box. The icon had not been loaded.

  3. Then I realized there was an indication on the window (I could not capture it on time on the above screenshot) telling me that to access that functionality, I had to update my browser java plug-in to a later version. So, I went on the java website, downloaded and installed the new java version.

    I then had to restart my browser.

  4. Now, when I accessed the WebCT again and tried to open the upload window. I got a Security Warning pop-up saying that "Java has discovered application components that could indicate a security concern". By the time, I had switched to my uOttawa Webmail, but the dialog stayed on top of everything. It was persistent on my screen.

    Note that it was obviously not a useful warning since it was referring to the WebCT java applet for file upload which was not harmful. Also note that the pop-up was a modal dialog.

  5. Now, when I clicked on the "No" button from the Security Warning dialog to prevent the WebCT java applet from being blocked, it did not work. The button did not respond. Actually, any button was responding (Neither the "No" nor "Yes" buttons). Something was preventing me from interacting with this dialog at all.

    While trying to find out the cause of that behaviour, I realized that there was another pop-up hidden by the Security Warning one.

    In fact, what was happening is that, for unknown reason, a script error had occurred in the "Skype Toolbars" plug-in installed on my browser. So, another modal pop-up was created almost at the same time than the Security Warning one did. But because of its little size, it was hidden by the Warning security pop-up.

  6. The "Skype Toolbars" related pop-up was the second modal popup (child of the main browser window) and thus needed to be completed first in order to then complete the Security warning popup and get access back to the main browser window. But since it was hidden by the Security warning popup which is modal as well, I could not get to it. I could not complete the Security warning popup neither because the "Skype Toolbars" error pop-up window was preventing me from interacting with it.

    So in short, the Skype plug-in error modal dialog was hidden while the Java applet Security warning popup was “disabled” for interaction.

    I was thus stuck in a deadlock situation. I had to manually kill my browser, losing all state information.

  7. To kill my chrome application, I used the Windows Task Manager pop-up which is a good counter-example since it is non-modal dialog, thus allowing me to be able to interact with other windows.

  8. Hopefully, today browsers are smart enough to recover from crashes and recall their last safe state.

Nevertheless, this is a very interesting example of a situation we would not have thought of. And although, it might occur rarely, it is still a clear demonstration of why modal dialogs should be well thought before being used. Now, we can imagine if such an issue had happened during some critical browser activities (online order processing, banking transaction, online database critical transactions, etc), this would have been unacceptable. This is why modal dialogs should be used with extreme caution.


No comments:

Post a Comment