WebUI stuck on loading (in multiple browsers)

[frazor]

I realise 3 out of 4 of these are Beta browsers, and some of the issues may be known, I'm just posting these as a heads up.

Please scroll down. The Opera error is large, but after that the Firefox, IE and Safari ones are much shorter. IE7 is the only non-beta browser, but it's not working in that for me right now either.

------------------

1. Opera 9.50 Beta Build 9755

http://my.opera.com/desktopteam/blog/2008/01/25/new-snapshot-experimenting-with-document-all-cloaking

Opera have dropped support for Document.All, which is what I expect has caused WebUI to stop working. The Error Console (Tools > Advanced > Error Console) says this:

JavaScript - http://192.168.1.100:49320/gui/
Event thread: DOMContentLoaded
Error:
name: TypeError
message: Statement on line 1: Cannot convert undefined or null to Object
Backtrace:
  Line 1 of linked script http://192.168.1.100:49320/gui/stable.js
    function(){var i,aRows,aAlign,j;aAlign=new Array();for(i=0;i<this.cols;i++){switch(this.colsdata[i].align){case ALIGN_LEFT:align="left";break;case ALIGN_CENTER:align="center";break;case ALIGN_RIGHT:align="right";break;case ALIGN_AUTO:default:switch(this.colsdata[i].type){case TYPE_NUMBER:align="right";break;default:align="left";}}aAlign.push(align);}for(i=0,j=0;i<this.cols;i++){this.tHeadCols[i].style.textAlign=aAlign[i];}var _9c=this.tBody.getElementsByTagName("colgroup")[0].getElementsByTagName("col");var _9d=_9c.length;if(document.all||browser.isAppleWebKit){for(var i=0;i<_9d;i++){_9c[i].align=aAlign[i];}}else{var ss=null,rules=null;for(var n=0,l=document.styleSheets.length;n<l;n++){if(document.styleSheets[n].href.indexOf("stable.css")==-1){continue;}ss=document.styleSheets[n];rules=ss.cssRules;}if(rules==null){return;}if(typeof this.colRules=="undefined"){this.colRules=new Array();}for(var j=0;j<_9d;j++){var k=this.colOrder[j];if(!this.colRules[k]){for(var i=0,l=rules.length;i<l;i++){if((rules[i].type==CSSRule.STYLE_RULE)&&(rules[i].selectorText==".stable-"+this.dCont.id+"-col-"+k)){this.colRules[k]=rules[i];break;}}}if(typeof this.colRules[k]!="undefined"){this.colRules[k].style.textAlign=aAlign[j];}else{this.colRules[k]=ss.insertRule(".stable-"+this.dCont.id+"-col-"+k+" div { text-align: "+aAlign[j]+" };",0);}}}}
  Line 1 of linked script http://192.168.1.100:49320/gui/stable.js
    function(){if(navigator.product=="Gecko"){for(var n=0,l=document.styleSheets.length;n<l;n++){if(document.styleSheets[n].href.indexOf("style.css")==-1){continue;}var _55=document.styleSheets[n].cssRules;for(var i=0;i<_55.length;i++){if((_55[i].type==CSSRule.STYLE_RULE)&&(_55[i].selectorText==".stable-head")){_55[i].style.overflow="-moz-scrollbars-none";}}}}this.assignEvents();this.setAlignment();}
  Line 1 of linked script http://192.168.1.100:49320/gui/stable.js
    function(_2,_3){var tr,td,cl,cg,div;this.dCont=_2;this.dHead=ELE_DIV.cloneNode(true);this.dBody=ELE_DIV.cloneNode(true);this.dCont.className="stable";this.dHead.className="stable-head";this.dBody.className="stable-body";this.dCont.appendChild(this.dHead);this.dCont.appendChild(this.dBody);this.tHead=ELE_TABLE.cloneNode(true);this.tHead.style.width="100px";this.tHead.cellSpacing=0;this.tHead.cellPadding=0;this.dHead.appendChild(this.tHead);this.tHead.tb=ELE_TBODY.cloneNode(true);this.tHead.appendChild(this.tHead.tb);tr=ELE_TR.cloneNode(true);this.tHead.tb.appendChild(tr);var _5=this,span;addEvent(window,"unload",function(){_5.clearRows();});var j=0;for(var i=0,l=_3.length;i<l;i++){if(typeof this.colOrder[i]=="undefined"){this.colOrder[i]=i;}if(typeof _3[this.colOrder[i]].enabled=="undefined"){_3[this.colOrder[i]].enabled=true;}this.cols++;this.colsdata[i]=_3[this.colOrder[i]];if(!_3[this.colOrder[i]].enabled){continue;}td=ELE_TD.cloneNode(true);tr.appendChild(td);td.onmousemove=function(e){if(_5.isResizing){return;}e=FixEvent(e);var x=mouse.X-getOffsetLeft(this)+_5.dBody.scrollLeft;this.lastMouseX=e.clientX;var w=this.offsetWidth;var i=parseInt(this.getAttribute("index"));if(x<=8){if(i!=0){_5.hotCell=i-1;this.style.cursor="e-resize";}else{_5.hotCell=-1;this.style.cursor="default";}}else{if(x>=w-1){_5.hotCell=i;this.style.cursor="e-resize";}else{_5.hotCell=-1;this.style.cursor="default";}}};span=ELE_DIV.cloneNode(true);span.innerHTML=_3[this.colOrder[i]].text;td.appendChild(span);td.style.width=(_3[this.colOrder[i]].width)?_3[this.colOrder[i]].width:"auto";td.setAttribute("index",i);this.colMove.init(td,preventSort,null,moveColumn);addEvent(td,"mouseup",function(e){_5.Sort(e,this);});this.tHeadCols[i]=td;j++;}this.tBody=ELE_TABLE.cloneNode(true);this.tBody.style.width="0";this.tBody.cellSpacing=0;this.tBody.cellPadding=0;this.tpad=ELE_DIV.cloneNode(true);this.tpad.className="stable-virtpad";this.dBody.appendChild(this.tpad);this.dBody.appendChild(this.tBody);this.bpad=ELE_DIV.cloneNode(true);this.bpad.className="stable-virtpad";this.dBody.appendChild(this.bpad);this.tBody.tb=ELE_TBODY.cloneNode(true);this.tBody.appendChild(this.tBody.tb);cg=ELE_COLGROUP.cloneNode(true);this.tBody.appendChild(cg);for(var i=0,l=_3.length,j=0;i<l;i++){if(!_3[this.colOrder[i]].enabled){continue;}cl=ELE_COL.cloneNode(true);cl.style.width=(this.colsdata[i].width)?this.colsdata[i].width:"auto";cg.appendChild(cl);this.tBodyCols[j]=cl;j++;}this.scp=ELE_SPAN.cloneNode(true);this.scp.className="stable-scrollpos";this.dCont.appendChild(this.scp);this.dCont.style.position="relative";this.init();}
  Line 1 of linked script http://192.168.1.100:49320/gui/script.js: In function init
    function init(){if(arguments.callee.done){return;}arguments.callee.done=true;if(_timer){clearInterval(_timer);}log("WebUI started.");if((browser.isIE&&(!browser.isIE7x||!browser.isIE7up))||browser.isAppleWebkit){$("msg").innerHTML=WUILang.Doesnt_support;return;}document.title="\xb5Torrent WebUI v"+version;Key.onKeyDown=keyDown;window.onresize=function(e){if(browser.isIE&&(resizing==false)){if(resizeTimeout!=null){window.clearTimeout(resizeTimeout);}resizeTimeout=window.setTimeout("resizeUI()",500);}else{resizeUI();}};ContextMenu.init("ContextMenu");if(browser.isIE&&!browser.isIE7x){$("List").style.width="99%";}utWebUI.init();var o=$("stg_c");o.innerHTML=stgHtml;utWebUI.getSettings(false);utWebUI.config();var _3=new Array();var _4=[{"text":WUILang.Name,"width":"200px","type":TYPE_STRING},{"text":WUILang.Status,"width":"100px","type":TYPE_STRING},{"text":WUILang.Size,"width":"60px","type":TYPE_NUMBER},{"text":WUILang.Done,"width":"80px","type":TYPE_NUMBER},{"text":WUILang.Downloaded,"width":"100px","type":TYPE_NUMBER},{"text":WUILang.Uploaded,"width":"80px","type":TYPE_NUMBER},{"text":WUILang.Ratio,"width":"60px","type":TYPE_NUMBER},{"text":WUILang.DL,"width":"60px","type":TYPE_NUMBER},{"text":WUILang.UL,"width":"60px","type":TYPE_NUMBER},{"text":WUILang.ETA,"width":"60px","type":TYPE_NUMBER},{"text":WUILang.Label,"width":"60px","type":TYPE_STRING},{"text":WUILang.Peers,"width":"60px","type":TYPE_NUMBER},{"text":WUILang.Seeds,"width":"60px","type":TYPE_NUMBER},{"text":WUILang.Avail,"width":"60px","type":TYPE_NUMBER},{"text":"#","width":"30px","type":TYPE_NUMBER,"align":ALIGN_LEFT},{"text":WUILang.Remaining,"width":"90px","type":TYPE_NUMBER}];if($_COOKIE["webui.trt.colwidth"]!=null){_3=$_COOKIE["webui.trt.colwidth"];for(var i=0,l=_3.length;i<l;i++){_4[i].width=_3[i]+"px";}}var ol=$("List");utWebUI.trtTable.format=FormatTL;utWebUI.trtTable.create(ol,_4);utWebUI.trtTable.reverse=utWebUI.trtSortR;var aB=[{"text":WUILang.Name,"width":"200px","type":TYPE_STRING},{"text":WUILang.Size,"width":"60px","type":TYPE_NUMBER,"align":ALIGN_RIGHT},{"text":WUILang.Done,"width":"80px","type":TYPE_NUMBER},{"text":"%","width":"100px","type":TYPE_NUMBER},{"text":WUILang.Priority,"width":"80px","type":TYPE_NUMBER}];if($_COOKIE["webui.fls.colwidth"]!=null){_3=$_COOKIE["webui.fls.colwidth"];for(var i=0;i<5;i++){if(iv(_3[i])==0){continue;}aB[i].width=_3[i]+"px";}}var fl=$("FileList");utWebUI.flsTable.format=FormatFL;utWebUI.flsTable.create(fl,aB);utWebUI.flsTable.reverse=utWebUI.flsSortR;Update();resizeUI();$("query").onkeydown=function(e){if(!e){e=window.event;}var k=e.keyCode||e.which;if(k==13){Search();}};stimer=window.setInterval("UpdateStatus()",100);Drag.mask=$("dragmask");var ww=getWindowWidth(),wh=getWindowHeight();Drag.init($("stg_h"),$("stg"),0,ww,0,wh,true);Drag.init($("tadd_h"),$("tadd"),0,ww,0,wh,true);Drag.init($("dlgProps-header"),$("dlgProps"),0,ww,0,wh,true);Drag.init($("dlgAbout-header"),$("dlgAbout"),0,ww,0,wh,true);Drag.init($("dlgRss-header"),$("dlgRss"),0,ww,0,wh,true);Drag.init($("dlgLabel-header"),$("dlgLabel"),0,ww,0,wh,true);Drag.init($("dlgDelTor-header"),$("dlgDelTor"),0,ww,0,wh,true);window.setTimeout(ShowUI,1000);var d=$("HDivider");d.onmousedown=function(e){e=FixEvent(e);this.lastX=e.clientX;smm=addEvent(document,"mousemove",function(e){SepMove(e,0);});smu=addEvent(document,"mouseup",function(e){SepUp(e,0);});};d=$("VDivider");d.onmousedown=function(e){e=FixEvent(e);this.lastY=e.clientY;smm=addEvent(document,"mousemove",function(e){SepMove(e,1);});smu=addEvent(document,"mouseup",function(e){SepUp(e,1);});};tdTabs.show("gcont");}
  ...
stacktrace:   ...  Line 1 of linked script http://192.168.1.100:49320/gui/stable.js
    function(){if(navigator.product=="Gecko"){for(var n=0,l=document.styleSheets.length;n<l;n++){if(document.styleSheets[n].href.indexOf("style.css")==-1){continue;}var _55=document.styleSheets[n].cssRules;for(var i=0;i<_55.length;i++){if((_55[i].type==CSSRule.STYLE_RULE)&&(_55[i].selectorText==".stable-head")){_55[i].style.overflow="-moz-scrollbars-none";}}}}this.assignEvents();this.setAlignment();}
  Line 1 of linked script http://192.168.1.100:49320/gui/stable.js
    function(_2,_3){var tr,td,cl,cg,div;this.dCont=_2;this.dHead=ELE_DIV.cloneNode(true);this.dBody=ELE_DIV.cloneNode(true);this.dCont.className="stable";this.dHead.className="stable-head";this.dBody.className="stable-body";this.dCont.appendChild(this.dHead);this.dCont.appendChild(this.dBody);this.tHead=ELE_TABLE.cloneNode(true);this.tHead.style.width="100px";this.tHead.cellSpacing=0;this.tHead.cellPadding=0;this.dHead.appendChild(this.tHead);this.tHead.tb=ELE_TBODY.cloneNode(true);this.tHead.appendChild(this.tHead.tb);tr=ELE_TR.cloneNode(true);this.tHead.tb.appendChild(tr);var _5=this,span;addEvent(window,"unload",function(){_5.clearRows();});var j=0;for(var i=0,l=_3.length;i<l;i++){if(typeof this.colOrder[i]=="undefined"){this.colOrder[i]=i;}if(typeof _3[this.colOrder[i]].enabled=="undefined"){_3[this.colOrder[i]].enabled=true;}this.cols++;this.colsdata[i]=_3[this.colOrder[i]];if(!_3[this.colOrder[i]].enabled){continue;}td=ELE_TD.cloneNode(true);tr.appendChild(td);td.onmousemove=function(e){if(_5.isResizing){return;}e=FixEvent(e);var x=mouse.X-getOffsetLeft(this)+_5.dBody.scrollLeft;this.lastMouseX=e.clientX;var w=this.offsetWidth;var i=parseInt(this.getAttribute("index"));if(x<=8){if(i!=0){_5.hotCell=i-1;this.style.cursor="e-resize";}else{_5.hotCell=-1;this.style.cursor="default";}}else{if(x>=w-1){_5.hotCell=i;this.style.cursor="e-resize";}else{_5.hotCell=-1;this.style.cursor="default";}}};span=ELE_DIV.cloneNode(true);span.innerHTML=_3[this.colOrder[i]].text;td.appendChild(span);td.style.width=(_3[this.colOrder[i]].width)?_3[this.colOrder[i]].width:"auto";td.setAttribute("index",i);this.colMove.init(td,preventSort,null,moveColumn);addEvent(td,"mouseup",function(e){_5.Sort(e,this);});this.tHeadCols[i]=td;j++;}this.tBody=ELE_TABLE.cloneNode(true);this.tBody.style.width="0";this.tBody.cellSpacing=0;this.tBody.cellPadding=0;this.tpad=ELE_DIV.cloneNode(true);this.tpad.className="stable-virtpad";this.dBody.appendChild(this.tpad);this.dBody.appendChild(this.tBody);this.bpad=ELE_DIV.cloneNode(true);this.bpad.className="stable-virtpad";this.dBody.appendChild(this.bpad);this.tBody.tb=ELE_TBODY.cloneNode(true);this.tBody.appendChild(this.tBody.tb);cg=ELE_COLGROUP.cloneNode(true);this.tBody.appendChild(cg);for(var i=0,l=_3.length,j=0;i<l;i++){if(!_3[this.colOrder[i]].enabled){continue;}cl=ELE_COL.cloneNode(true);cl.style.width=(this.colsdata[i].width)?this.colsdata[i].width:"auto";cg.appendChild(cl);this.tBodyCols[j]=cl;j++;}this.scp=ELE_SPAN.cloneNode(true);this.scp.className="stable-scrollpos";this.dCont.appendChild(this.scp);this.dCont.style.position="relative";this.init();}
  Line 1 of linked script http://192.168.1.100:49320/gui/script.js: In function init
    function init(){if(arguments.callee.done){return;}arguments.callee.done=true;if(_timer){clearInterval(_timer);}log("WebUI started.");if((browser.isIE&&(!browser.isIE7x||!browser.isIE7up))||browser.isAppleWebkit){$("msg").innerHTML=WUILang.Doesnt_support;return;}document.title="\xb5Torrent WebUI v"+version;Key.onKeyDown=keyDown;window.onresize=function(e){if(browser.isIE&&(resizing==false)){if(resizeTimeout!=null){window.clearTimeout(resizeTimeout);}resizeTimeout=window.setTimeout("resizeUI()",500);}else{resizeUI();}};ContextMenu.init("ContextMenu");if(browser.isIE&&!browser.isIE7x){$("List").style.width="99%";}utWebUI.init();var o=$("stg_c");o.innerHTML=stgHtml;utWebUI.getSettings(false);utWebUI.config();var _3=new Array();var _4=[{"text":WUILang.Name,"width":"200px","type":TYPE_STRING},{"text":WUILang.Status,"width":"100px","type":TYPE_STRING},{"text":WUILang.Size,"width":"60px","type":TYPE_NUMBER},{"text":WUILang.Done,"width":"80px","type":TYPE_NUMBER},{"text":WUILang.Downloaded,"width":"100px","type":TYPE_NUMBER},{"text":WUILang.Uploaded,"width":"80px","type":TYPE_NUMBER},{"text":WUILang.Ratio,"width":"60px","type":TYPE_NUMBER},{"text":WUILang.DL,"width":"60px","type":TYPE_NUMBER},{"text":WUILang.UL,"width":"60px","type":TYPE_NUMBER},{"text":WUILang.ETA,"width":"60px","type":TYPE_NUMBER},{"text":WUILang.Label,"width":"60px","type":TYPE_STRING},{"text":WUILang.Peers,"width":"60px","type":TYPE_NUMBER},{"text":WUILang.Seeds,"width":"60px","type":TYPE_NUMBER},{"text":WUILang.Avail,"width":"60px","type":TYPE_NUMBER},{"text":"#","width":"30px","type":TYPE_NUMBER,"align":ALIGN_LEFT},{"text":WUILang.Remaining,"width":"90px","type":TYPE_NUMBER}];if($_COOKIE["webui.trt.colwidth"]!=null){_3=$_COOKIE["webui.trt.colwidth"];for(var i=0,l=_3.length;i<l;i++){_4[i].width=_3[i]+"px";}}var ol=$("List");utWebUI.trtTable.format=FormatTL;utWebUI.trtTable.create(ol,_4);utWebUI.trtTable.reverse=utWebUI.trtSortR;var aB=[{"text":WUILang.Name,"width":"200px","type":TYPE_STRING},{"text":WUILang.Size,"width":"60px","type":TYPE_NUMBER,"align":ALIGN_RIGHT},{"text":WUILang.Done,"width":"80px","type":TYPE_NUMBER},{"text":"%","width":"100px","type":TYPE_NUMBER},{"text":WUILang.Priority,"width":"80px","type":TYPE_NUMBER}];if($_COOKIE["webui.fls.colwidth"]!=null){_3=$_COOKIE["webui.fls.colwidth"];for(var i=0;i<5;i++){if(iv(_3[i])==0){continue;}aB[i].width=_3[i]+"px";}}var fl=$("FileList");utWebUI.flsTable.format=FormatFL;utWebUI.flsTable.create(fl,aB);utWebUI.flsTable.reverse=utWebUI.flsSortR;Update();resizeUI();$("query").onkeydown=function(e){if(!e){e=window.event;}var k=e.keyCode||e.which;if(k==13){Search();}};stimer=window.setInterval("UpdateStatus()",100);Drag.mask=$("dragmask");var ww=getWindowWidth(),wh=getWindowHeight();Drag.init($("stg_h"),$("stg"),0,ww,0,wh,true);Drag.init($("tadd_h"),$("tadd"),0,ww,0,wh,true);Drag.init($("dlgProps-header"),$("dlgProps"),0,ww,0,wh,true);Drag.init($("dlgAbout-header"),$("dlgAbout"),0,ww,0,wh,true);Drag.init($("dlgRss-header"),$("dlgRss"),0,ww,0,wh,true);Drag.init($("dlgLabel-header"),$("dlgLabel"),0,ww,0,wh,true);Drag.init($("dlgDelTor-header"),$("dlgDelTor"),0,ww,0,wh,true);window.setTimeout(ShowUI,1000);var d=$("HDivider");d.onmousedown=function(e){e=FixEvent(e);this.lastX=e.clientX;smm=addEvent(document,"mousemove",function(e){SepMove(e,0);});smu=addEvent(document,"mouseup",function(e){SepUp(e,0);});};d=$("VDivider");d.onmousedown=function(e){e=FixEvent(e);this.lastY=e.clientY;smm=addEvent(document,"mousemove",function(e){SepMove(e,1);});smu=addEvent(document,"mouseup",function(e){SepUp(e,1);});};tdTabs.show("gcont");}
  ...

------------------

2. Firefox 3 Beta 2

Same symptom, not sure of cause, but it's been reported on here before. Here's the error from Firebug:

document.styleSheets[n].href is null
dxSTable()stable.js (line 1)
dxSTable(div#List.stable, [Object text=Name width=309px type=0 enabled=true, Object text=Status width=59px type=0 enabled=true, Object text=Size width=74px type=1 enabled=true, 13 more...])stable.js (line 1)
init()script.js (line 1)
[Break on this error] var TYPE_STRING=0;var TYPE_NUMBER=1;var TYPE_DATE=2;var TYPE_STRING_NO_CASE=3;va...

------------------

3. Internet Explorer 7

For some reason it's also broken in IE7. The error (such that it is) is as follows:

'WUILang' is undefined.

------------------

4. Safari 3.04 Beta

The Loading bar is stuck right at the top of the screen. I can't find an error console, but it doesn't progress any further than that.

------------------

The upshot is that right now is that on all 3 of my installed browsers, WebUI doesn't work. That'll teach me to live on the edge.

[uPDATE:]

I've tracked the IE7 issue down. The last updated version in the WebUI thread that I downloaded, as posted by penknife (http://forum.utorrent.com/viewtopic.php?pid=294240#p294240) is broken.

As is the one before that from emc (http://forum.utorrent.com/viewtopic.php?pid=291816#p291816)

So reverting back to the original one has meant that it now works in IE7. It's still not working in the other 3 browsers though.

[jewelisheaven]

It has worked in IE7 ... since release.

[Esseb]

There are two problems in Opera 9.50 Beta Build 9755 as far as I can tell:

* The first issue is that document.styleSheets[n].href is null for inline stylesheets, which is a problem in the Firefox 3 beta also. This is according to the spec, so both Opera and Firefox are correct here.

* The second issue is that Opera throws an exception when encountering a CSS error in document.styleSheets[n].insertRule. I'm not sure if this is correct or not, but this can easily be fixed by changing this line in stable.js:

ss.insertRule(".stable-"+this.dCont.id+"-col-"+k+" div { text-align: "+aAlign[j]+" };",0);

to

ss.insertRule(".stable-"+this.dCont.id+"-col-"+k+" div { text-align: "+aAlign[j]+" }",0);

Note the erroneous semicolon that was removed.

[abacusnero]

Yes, the spec has changed for href return value with inline styles.

FYI:

http://developer.mozilla.org/en/docs/DOM:stylesheet.href