Sitecore Desktop in Firefox and production javascript debugging

9

December 23, 2008 by Alistair Deneys

Back in the pre Sitecore 5.3 days I would sometimes prefer to use Firefox when logging into the Sitecore desktop. Firefox was much faster than IE for this interface, and especially if I was looking at a slow implementation Firefox would help ease some frustration. The desktop didn’t look exactly as it should in Firefox, which is probably why Sitecore revoked support for the Sitecore desktop for anything non-IE starting with Sitecore 5.3. I also think it does much better for Sitecore if they allow people to use non-IE browsers to access the desktop interface. Warn them that it won’t look right, but let them make their own choice. (or even better, fully support the other browsers.)

So I started looking into how I could access the Sitecore 6 desktop by using Firefox. The login screen obviously was doing some kind of agent sniffing as it removes the desktop interface option if you’re not using IE. So I started by looking into the login form itself. This is located at /sitecore/login/default.aspx. Browsing the controls in this file I could see an advanced login control near the bottom of the file.

<div id="AdvancedLoginTabPanel" runat="server">
<login:AdvancedLogin runat="server" id="AdvancedLogin"/>
</div>

Knowing that the desktop interface is available on the advanced tab of the login screen I know this must be the control which will contain the desktop login option. Checking the ‘Register’ declarations at the top of the file I can find the advanced login control is contained in the /sitecore/login/advanced.ascx file. Opening this file I can find the button control which is the desktop interface option.

<button id="AdvancedDesktop" type="button" runat="server"
  onclick="javascript:onClick('AdvancedOptions', 'AdvancedDesktop', '/sitecore/shell/default.aspx')"
  ondblclick="javascript:onDblClick()">
<img class="AdvancedOptionImage"
  src="/sitecore/shell/themes/standard/People/32x32/monitor.png"
  alt="Desktop" border="0" />
Desktop
</button>

Note the javascript call for onclick. So that must mean that the interface selected for login must be stored by javascript and posted during the postback for the actual login. Well, seeing as though it’s this control which is hidden by Sitecore if you’re not using IE, then all I have to do is duplicate this control and change it’s ID. After all, it’s the javascript which is changing the selected interface.

ff login

And there we have it, the option to login to the desktop inside Firefox again. Ahh, the memories…

safari login

We can also satisfy ‘that mac guy’…

But what about the production javascript debugging bit in the title of this post? Javascript might be sandboxed off from the rest of the computer, but it is not sandboxed from the user.

So a typical example of debugging javascript would normally include placing a few alert statements throughout your misbehaving function to print the value of variables to see where and how your data is changing. On a production website you would never consider putting these debug statements in the javascript file as every visitor would have these debug messages interrupting them which is not acceptable. But you don’t need to change your javascript code if all you want to do is look at variable values, as long as they are global.

Through the address bar of my browser I can access the javascript sandbox of the web page. All I have to do is use the ‘javascript:’ protocol. So let’s say I have a global variable named loginOpt. All I have to do to view it’s value is enter the following in the address bar.

javascript:alert(loginOpt)

The javascript gets executed in the same sandbox as the web page, so I have access to all the global variables of the page. I could also call javascript functions such as the function that the desktop button calls to set the selected interface for login. So if I didn’t want to physically change the /sitecore/login/advanced.ascx file above, or if I didn’t have physical access to the file, I could set the desktop as the selected interface to log into on the Sitecore login page by executing the required javascript after the page has loaded by pasting the following into the address bar.

javascript:onClick('AdvancedOptions', 'AdvancedDesktop', '/sitecore/shell/default.aspx')

And then just login.

I first found the ability to execute javascript in the address bar in a consumer computer magazine (APC http://apcmag.com (sorry, can’t remember the issue)). The scenario given in the magazine was that of creating ‘javascript bookmarklets’ where you create a bookmark but instead of inputting a url you input some javascript to be run instead. The javascript they gave in the example was to remove the background image of a web page. I was recently reminded of this ability when I was debugging a page which was hosted from a server I didn’t have direct access to. I needed to work out how a particular function came to calculate it’s output value which was being done using jQuery (http://jquery.com/). So I just copied the jQuery section in question out of the external javascript file, pasted it into the address bar and quickly found my result. Again, we’re in the page’s sandbox, so if the page uses jQuery, we can also use jQuery.

So there you go. 2 techniques to allow non IE browsers to use the Sitecore desktop, and a little tidbit on investigating javascript without modifying the javascript files.

I’d also like to take this opportunity to wish everyone a Merry Christmas. I hope Santa brings you everything you wished for. πŸ™‚

Advertisements

9 thoughts on “Sitecore Desktop in Firefox and production javascript debugging

  1. Lars Nielsen says:

    Hi Alistair,

    Cool. However, there’s a reason we have chosen to hide the option for Firefox users. Don’t you experience all kind of problems with that interface? If you do, – which application causes problems?

  2. Aaron Powell says:

    hmmm, I distinctly remember a certain someone having a god at other CMS’s for having better IE compatibility/ IE restrictions on some components πŸ˜›

  3. adeneys says:

    Lars, yeah, the desktop and some applications don’t look as they should in FF. I only just worked out how to login in FF, so I haven’t had a chance to see which apps work and which ones don’t. I did notice some apps only use half their window size though. I’ll have a check and let you know.
    Az, the internet is running slow. Stop using up valuable bandwidth πŸ™‚
    If it were I on my soap box, I’m sure I would have been ranting about not being able to use other browsers at all. With Sitecore you can still at least perform most (if not all) of the day to day activities in other browsers using the other interfaces.

  4. Aaron Powell says:

    Opera is so far the only browser I’ve had Umbraco problems in, MOSS 2007 supports FF and IE (with some degredation of the WYSIWYG IIRC) and RedDot CMS is IE only for administration but FF and IE (Safari too IIRC) for content entry.

    Smart-arse πŸ˜›

  5. Akshay Sura says:

    this is great. For the longest time, I had to use IE but FF is my main browser. This resolves the issue. Hopefully the new FF releases dont affect this in any way.

  6. […] there are ways around that. Check my previous blog post on how to login to the desktop using Firefox in Sitecore 6.x […]

  7. Jack says:

    Hey, I just found your blog – thanks for writing. As an FYI that it’s not showing up correctly on the BlackBerry Browser (I have a Storm). Either way, I am now on your RSS feed on my laptop, so thanks!

  8. […] there are ways around that. Check my previous blog post on how to login to the desktop using Firefox in Sitecore 6.x […]

  9. […] there are ways around that. Check my previous blog post on how to login to the desktop using Firefox in Sitecore 6.x […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

The views expressed on this blog are solely my own and do not necessarily reflect the views of my employer.
%d bloggers like this: