Dialog.js options ignored by Firefox 5, IE 9

OpenEMR Development
1

yehster wrote on Friday, July 29, 2011:

In /library/dialog.js
The specs for opening a new window with javascript without menubar or location bar (location=0, menubar=0) seem to be ignored by Firefox 5 and IE9.  So in these browsers dialogs such as add appointment which are sized to not need to scrollbars have them in those browsers. 
This is a minor cosmetic issue, but kind of a pain.  Thinking about how best to address this issue.  I’m adding extra pixels in my branch for now, but a proper fix for would be nice.

2

yehster wrote on Friday, July 29, 2011:

Figured it out.
http://kb.mozillazine.org/Dom.disable_window_open_feature.location
There is an about:config feature in firefox, dom.disable_window_open_feature.location that by default prevents javascript from removing the location bar.
I’m still going to give some thought to this issue as I suspect that many users won’t be savy enough to update their config, and will therefore have to scroll their dialog windows.

3

yehster wrote on Friday, July 29, 2011:

Further reading… The main purpose of preventing javascript from removing the location bar is to help guard against website spoofing.  It’s a useful security feature, that I don’t think it makes sense to have users disable in the interest of safety.  I think it makes sense to change the size of the dialog boxes to accommodate location bars. 

Also it seems that someone already realized that IE was doing this in the past.

 if (navigator.appName == 'Microsoft Internet Explorer')
 {
    var ua = navigator.userAgent;
    var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
    if (re.exec(ua) != null)
    rv = parseFloat( RegExp.$1 ); // this holds the version number
    height = height + 28;
 }

Firefox added this feature later, and the code was never adjusted to increase the size of dialogs when location could no longer be disabled by default.

Also the increase in size in IE9 still isn’t quite enough and there is a horizontal scrollbar.

The different browsers seem to render the dialog box contents in slightly different sizes, so the “perfect size” is different for each. 

I think I have a solution that works well to autosize the dialog with jQuery. Something along these lines.

retval.onload=(function()
{
    body=$(this.document).find("body");
    this.innerHeight= body.height()+30;
    this.innerWidth= body.width()+30;
});
4

yehster wrote on Saturday, July 30, 2011:

I have modified dialog.js so that for firefox (the innerHeight and innerWidth properties which make this clean are only supported in firefox) after the window loads for any dialog, it ensures that the body will fit in it’s entirety.

https://github.com/yehster/openemr/commit/64055aacc3f17880cb23ecc4a6f3f1c1e7a5ca0f

5

bradymiller wrote on Saturday, July 30, 2011:

yehster,
I tried the fix out in firefox and am still getting the vertical scrollbar.
-brady

6

bradymiller wrote on Saturday, July 30, 2011:

Also,
To be clear (looks like two commits you have), the diff looks like this:

- return window.open(url, winname, options +
+retval=window.open(url, winname, options +
  ",width="   + width + ",height="  + height +
  ",left="    + newx  + ",top="     + newy   +
  ",screenX=" + newx  + ",screenY=" + newy);
+        if(navigator.userAgent.indexOf("Firefox")!=-1)
+        {
+            $(retval).load(function()
+            {
+                body=$(this.document).find("body");
+                {
+                    retval.innerHeight=(body.outerHeight(true)+10);
+                    retval.innerWidth=(body.outerWidth(true));
+                }
+            }
+            );
+        }
+
+return retval;
7

yehster wrote on Saturday, July 30, 2011:

Lets try this again…
https://github.com/yehster/openemr/commit/e82d85100bc069d23c97963683b26edd866da8be
I still seem to be bad at figuring out how to do my commits right.  I’m glad its just small changes for now.

 -return window.open(url, winname, options +
+retval=window.open(url, winname, options +
  ",width="   + width + ",height="  + height +
  ",left="    + newx  + ",top="     + newy   +
  ",screenX=" + newx  + ",screenY=" + newy);
+ if(navigator.userAgent.indexOf("Firefox")!=-1)
+ {
+    // hook the resize code to the window onload event of the newly created window.
+    retval.onload=function()
+        {
+            //find the body element
+            body=$(retval.document).find("body");
+            //change the innerDimensions (the viewport size) of the new window.
+            retval.innerHeight=(body.outerHeight(true)+10);
+            retval.innerWidth=(body.outerWidth(true));
+        };
+}
+  
+return retval;
 }
-
8

bradymiller wrote on Saturday, July 30, 2011:

hi,
Commit looks good and it tested well. Just committed it to sourceforge.
Thanks for the contribution,
-brady

9

yehster wrote on Saturday, July 30, 2011:

Thanks Brady,
Question for you regarding git.  You mentioned that there’s a way to compact multiple commits in a branch into a single commit.  Can you describe the general idea behind that? 

-Kevin

10

bradymiller wrote on Saturday, July 30, 2011:

Hi,
Was hoping you would ask. Look up interactive rebasing; very powerful. Aas an example, lets say you wanted to combine last three commits:
git rebase -i HEAD~3
-you’ll now be sent to a text editor, which actually gives you instructions
-keep ‘pick’ on the first commit, but change the other two to squash
-write/save from the text editor
-now you can modify your comments for the new combined commit
-write/save from the text editor and now done

When I was learning this stuff, I generally would create another branch in case I screwed (then easy to go back). But once you learn the ‘reflog’ command you don’t even need to do this (reflog can be used to quickly reverse any changes).

Also note the above interactive rebase can do much more; for example, commits can also be reordered.

-brady