Child Windows Issues

At my work we have a web application which is designed as a single main page which is sort of a “main control page”, that needs to be staying open all the time. Also, there are many other pages on the app which provides the ability to manage data, preform actions, configure settings, etc. The user needs some way to reach those pages, but since the main page has to stay open all the time, it was decided that those pages will be opened in a pop-up styled separate window. That way the users can do what they like while the main page remains opened at the background. For example:

That’s not all.

Some of those child windows show their own pop-ups that are opened as a modal dialog (mostly to interact with the user – success/failure of operations, validation…). As you may or may not know, modal dialogs block the parent window, and only the parent window (in fact, it freezes the parent window from running JavaScript at the background). That means that the main window stays reactive all the time. Generally it looks like this: 

Also, some of those pop-up windows have links to other windows, which are opened as pop-ups of the pop-up window. Confused? Me too. The main window has a child window, which also has a child window. So actually we possibly have an unknown number of “levels” of child windows. In theory that number can get very large.

Combining all of the above, it may look like this:

Here comes the problem. Recently we’ve noticed that the end users sometimes close the app’s main page, and forget to close a child window which accidently stayed opened. The result is an “orphan” pop-up which, of course, is useless without the main page :)

After we discovered this issue, we decided that the main page should be responsible for the closure of all its child windows when it is closed. We had to come up with a smart enough way to handle the complex cases we have.

In the next post I’ll show the implementation for this, stay tuned.