First, an introduction. "ATLAS" is a free (as in beer) framework from Microsoft aimed at building rich, responsive UIs by utilizing AJAX techniques on the web. This framework is different from other AJAX libraries/frameworks as it is built for, and fully integrates with the ASP.NET 2.0 server-based development framework. This tight integration makes adding AJAX-ish functionality to your existing ASP.NET applications quick and (relatively) painless.

My First Take

I recently decided to look into using ATLAS as the AJAX Framework of choice for the Subtext project. After running through the step-by-step installation instructions, and reading a few quick How-To's, I was ready to go. At least that's what I thought. I quickly ran into an issue when trying to test my new ATLAS code in Firefox.

My test page was pretty simple... I added the ScriptManager declaration to an existing ASPX page, and then added an UpdatePanel that was conditionally updated based on a Trigger. The UpdatePanel contained a plain old asp:Panel, an asp:CheckBox, and an asp:Button. The idea was that when the button was clicked, one of two messages was returned from the server and written to the panel based on whether or not the CheckBox was checked. Simple enough, yes?

The ATLAS Markup:

<atlas:ScriptManager ID="scriptMgr" runat="server" 
  EnablePartialRendering="true" />
....
<atlas:UpdatePanel id="uppnlClearContent" runat="server" 
  Mode="Conditional">
  <Triggers>
    <atlas:ControlEventTrigger ControlID="btnClearContent" 
      EventName="Click" />
  </Triggers>
  <ContentTemplate>
    <asp:Panel id="pnlClearContent" runat="server"></asp:Panel>
    <p><asp:CheckBox id="chkClearContent" runat="server" 
          Text="Clear Content." Checked="false" /></p>
    <p><asp:Button id="btnClearContent" runat="server" 
          Text="Clear It!" CausesValidation="false" 
          OnClick="btnClearContent_Click"/></p>
  </ContentTemplate>
</atlas:UpdatePanel>

All worked as expected when I clicked the button the first time. The request hit the server, the page's code-behind class was able to determine if the check box was checked and send back a corresponding message to the panel. Sweet!

The breakdown happens when trying to click the button a second time. Remember, this was an AJAX request so we didn't reload the page, but rather we dynamically updated the DOM. When clicking the button a second time, nothing happened... the page just sat there like I hadn't clicked the button. After taking a look at the Firefox JavaScript Console, I found that subsequent clicks never triggered the AJAX call b/c a JavaScript exception was being thrown in the callback handler from the first click. I needed to refresh/reload the page in order to kick off another request... kind of defeats the purpose of AJAX, huh?

The exact JavaScript exception being thrown was:

Error: [Exception... "Access to restricted URI denied"  code: "1012" 
  nsresult: "0x805303f4 (NS_ERROR_DOM_BAD_URI)"

Line #5 (see below) is the root cause of the issue, and the symptom (a NS_ERROR_DOM_BAD_URI exception) is caused by line #13.

The Problematic JavaScript:

   1:  this._updateStyleSheet = function(cssText)
   2:  {
   3:    var head = document.getElementsByTagName('HEAD')[0];
   4:    var styles = document.styleSheets;
   5:    var styleSheet = styles[styles.length - 1];
   6:   
   7:    if (Sys.Runtime.get_hostType() == Sys.HostType.InternetExplorer)
   8:    {
   9:      styleSheet.cssText = cssText;
  10:    }
  11:    else
  12:    {              
  13:      for (var i = styleSheet.cssRules.length - 1; i >= 0; i--)
  14:      {
  15:        styleSheet.deleteRule(i);
  16:      }
  17:      var ruleLines =cssText.split('}');
  18:      for (var j =0;j <ruleLines.length;j++)
  19:      {
  20:        var rule =ruleLines[j];
  21:        var index =rule.indexOf('{');
  22:        var style =rule.substr(index +1).trim();
  23:        if (style.length !=0)
  24:        {
  25:          var selector =rule.substring(0,index).trim();
  26:          styleSheet.insertRule(selector +'{'+style +'}', 
                  styleSheet.cssRules.length);
  27:        }
  28:      }
  29:    }
  30:  }

What's Wrong with That?

Here's the problem... some Firefox extensions (i.e. - the CoComment Extension) will load an external stylesheet after the page has been downloaded, putting the extension's stylesheet at the end of the document.styleSheets array. This is a problem as the _updateStyleSheet method expects the last item of the array to be some stylesheet specific to the ATLAS framework. But due to the extension, it isn't at the end of the array (at index styles.length-1), instead it's two positions from the end (at index styles.length-2).

With the CoComment extension this causes an issue because we don't seem to have access to the URI, and styleSheet.cssRules will throw the mentioned exception. I would suggest that instead of blindly assuming the ATLAS specific styleSheet is at the end of the array, the _updateStyleSheet method should go thru the array (from end to start) looking for a specific attribute of the <script> tag ... or better yet, the id attribute!

What to do about it?

IMHO, this should be considered a big issue as I'm sure there are plenty of other extensions for Firefox (and likely other browsers) that will cause the same problem. I made a post to the ATLAS Forums at asp.net, but have yet to get a reply... so I figured I'd try to get the issue a bit more exposure by posting here.

So, if any of you have any ideas, comments, suggestions as to how best to get this issue raised to the ATLAS team and or a proper fix, please let me know by leaving a feedback item to this post.

UPDATE #1: I have filed an official bug report for this issue at the Microsoft Connect site. Please go check it out and throw your voice behind it so we can get this thing fixed for the next release!

UPDATE #2: According to a comment left by Matt Gibbs, we can expect a fix for this bug in the next release... which he estimate will be available around October.