Bug Lag / delay in main.php on Firefox relay browser

Boesbert

Member
I am using KoLmafa v17.2 r16639.

I am not really sure what is happening. I am afraid it is just a Firefox issue but maybe/hopefully I can at least get some insight here.

Short description of what the problem is: At seemingly random times when clicking on anything that should affect change in the main.php frame of the relay browser, the change only shows up with a delay of several seconds (about five). This is most noticable during combats but sometimes also happens when trying to navigate to places from Ezandora's guide script. It only affects the display in main.php because I see the results of whatever action I performed go through in the GCLI. Also, the problem has not appeared while using either vanilla KoL on Firefox or relay browser on Chromium. It only appeared on relay browser on Firefox (so far).

This might be related to an update to Firefox 44.0 on my machine (Kubuntu 15.10) on the same day the problem started appearing (yesterday) although there are several hours in between the update and the problem first appearing. Also on the same day I updated Oracle Java 8, but since relay browser with Chromium does not reproduce the error, that, at least on its own, is probably not the cause of the problem.

I let debug run and the problem appeared during two snojo fights, first when entering "The X-32-F Combat Training Snowman" zone and then during the second fight when summoning love gnats and when summoning love stinkbug. Log attached, not sure if it is helpful at all.
 

Attachments

  • DEBUG_20160128.txt
    315.9 KB · Views: 70

xKiv

Active member
This may or may not be related, but I enabled trace debug, and noticed that inordinate amounts of time are being spent in the browser, between receiving mafia's response and requesting the next thing.
I also noticed in firebug that http://code.jquery.com/jquery-1.9.1.js (inserted by mafia in StationaryButtonDecorator) isn't loading for some reason, even though the same url loads instantly in a different tab. Probably some sort of same-origin policy.
Commenting out the line in StationaryButtonDecorator that adds it seems to help.
Here's a trace log with the line present, and then commented out (which happened a few minutes later, so it's not exactly conclusive - but I need to finish ALL my turns today still), with newchat... lines deleted, and slighlty annotated (the +x.y text on the right is "approximately this long since the first request from browser"). Note that there is significantly less time spent on the browser in the second case:
Code:
14548929 09.858: From Browser: GET /adventure.php?snarfblat=263 HTTP/1.1                        +0.0
14548929 09.879: Requesting: http://www.kingdomofloathing.com/adventure.php?snarfblat=263
14548929 10.071: Retrieved: http://www.kingdomofloathing.com/adventure.php?snarfblat=263        +0.2
14548929 10.071: To Browser: HTTP/1.1 302 Found: /adventure.php?snarfblat=263                   +0.2
14548929 10.816: From Browser: GET /fight.php?ireallymeanit=1454892909 HTTP/1.1                 +1.0    diff 0.8 on browser!
14548929 10.818: Requesting: http://www.kingdomofloathing.com/fight.php?ireallymeanit=1454892909
14548929 11.058: Retrieved: http://www.kingdomofloathing.com/fight.php?ireallymeanit=1454892909 +1.2
14548929 11.274: To Browser: HTTP/1.1 200 OK: /fight.php?ireallymeanit=1454892909               +1.4    0.2s on mafia
14548929 12.024: From Browser: GET /hotkeys.js HTTP/1.1                                         +2.2    another 0.8s on browser!
14548929 12.025: To Browser: HTTP/1.1 200 OK: /hotkeys.js
14548929 12.030: From Browser: GET /basics.js HTTP/1.1
14548929 12.030: To Browser: HTTP/1.1 200 OK: /basics.js
14548929 12.048: From Browser: GET /images/adventureimages/lich.gif HTTP/1.1
14548929 12.048: To Browser: HTTP/1.1 200 OK: /images/adventureimages/lich.gif
14548929 13.228: From Browser: GET /charpane.php HTTP/1.1
14548929 13.235: Requesting: http://www.kingdomofloathing.com/charpane.php
14548929 13.423: Retrieved: http://www.kingdomofloathing.com/charpane.php
14548929 13.692: To Browser: HTTP/1.1 200 OK: /charpane.php
14548929 14.189: From Browser: GET /basics.js HTTP/1.1
14548929 14.196: To Browser: HTTP/1.1 200 OK: /basics.js
14548929 14.207: From Browser: GET /chit.css HTTP/1.1
14548929 14.208: To Browser: HTTP/1.1 200 OK: /chit.css
14548929 14.220: From Browser: GET /chit_custom.css HTTP/1.1
14548929 14.221: To Browser: HTTP/1.1 200 OK: /chit_custom.css
14548929 14.267: From Browser: GET /chit.js HTTP/1.1
14548929 14.268: To Browser: HTTP/1.1 200 OK: /chit.js




14548949 34.642: From Browser: GET /adventure.php?snarfblat=261 HTTP/1.1                        +0.0
14548949 34.664: Requesting: http://www.kingdomofloathing.com/adventure.php?snarfblat=261
14548949 34.854: Retrieved: http://www.kingdomofloathing.com/adventure.php?snarfblat=261        +0.2
14548949 34.860: To Browser: HTTP/1.1 302 Found: /adventure.php?snarfblat=261
14548949 34.924: From Browser: GET /fight.php?ireallymeanit=1454894934 HTTP/1.1                 +0.3    diff 0.1 on browser
14548949 34.925: Requesting: http://www.kingdomofloathing.com/fight.php?ireallymeanit=1454894934
14548949 35.173: Retrieved: http://www.kingdomofloathing.com/fight.php?ireallymeanit=1454894934 +0.5
14548949 35.380: To Browser: HTTP/1.1 200 OK: /fight.php?ireallymeanit=1454894934               +0.7    0.2 on mafia
14548949 35.933: From Browser: GET /hotkeys.js HTTP/1.1                                         +1.3    0.6 on browser
14548949 35.933: To Browser: HTTP/1.1 200 OK: /hotkeys.js
14548949 35.938: From Browser: GET /basics.js HTTP/1.1
14548949 35.939: To Browser: HTTP/1.1 200 OK: /basics.js
14548949 36.004: From Browser: GET /charpane.php HTTP/1.1
14548949 36.005: Requesting: http://www.kingdomofloathing.com/charpane.php
14548949 36.203: Retrieved: http://www.kingdomofloathing.com/charpane.php
14548949 36.464: To Browser: HTTP/1.1 200 OK: /charpane.php
14548949 37.166: From Browser: GET /basics.js HTTP/1.1
14548949 37.167: To Browser: HTTP/1.1 200 OK: /basics.js
14548949 37.181: From Browser: GET /chit.css HTTP/1.1
14548949 37.181: To Browser: HTTP/1.1 200 OK: /chit.css
14548949 37.186: From Browser: GET /chit_custom.css HTTP/1.1
14548949 37.186: To Browser: HTTP/1.1 200 OK: /chit_custom.css
14548949 37.245: From Browser: GET /chit.js HTTP/1.1
14548949 37.246: To Browser: HTTP/1.1 200 OK: /chit.js
 

heeheehee

Developer
Staff member
I don't think stationarybuttons.1.js requires anything in jQuery 1.9 that isn't also available in 1.3.1 that KoL serves. Try r16665?
 

xKiv

Active member
Actually, I didn't notice ANY lack of functionality without stationarybuttons.1.js.
Is that the piece of JS that makes the page sometimes jump under my mouse when it finishes loading, causing me significant number of misclicks?
 

heeheehee

Developer
Staff member
It's the piece of js that sets the stationary buttons to the top when you load the page or resize the page.
 

xKiv

Active member
Code:
function resetPosition() {
	var topbar = $('#mafiabuttons').height();
	$('#content_').css( 'top', topbar + 'px' );
}

The #content_ DIV is *after* stationary buttons. This resets its position (top margin) to match the end of stationry buttons (which are already at the top just from the static html, and also from the stationarybuttons.1.css CSS which puts them at postition: absolute; top: 0;).

So I would definitely notice if I had smaller screen and the buttons didn't fit in the default 66px space (also defined in the css file). But since I have enough room, I instead just notice the page jumping.
It's possible that serving the jquery from a local copy will let the page "jump" before anything renders. Then I wouldn't notice the jump. I will have to check it.
 
Last edited:

heeheehee

Developer
Staff member
Sure, it could cause a jump if you were to click something other than the stationary buttons.

I'm not sure I understand why Mafia even needs a javascript file to handle this in the first place, instead of letting the renderer handle reflows.
 

xKiv

Active member
It cause a jump on most page loads, because the height of my stationary buttons is almost never 66px, and often very different from 66px (for example on noncombats, where it's probably closer to 14 px). Sometimes the jump happens before first paint, sometimes not.

When considering what the browser does, you should also not forget that it's not even starting to receive response until mafia is done *processing* the response, which is often significantly later (up to hundreds of milliseconds?) than receiving the first few bytes directly from kol would be. And then it get the entire response almost all at once. I believe that's not what browsers expect, so weird things may happen.


Javascript is definitely needed to reposition the content_ div in this case. You want to have:

1) a dynamically-sized (100% height of its (generated) content) div anchored "at the top" of its iframe
2) another div continuing from the bottom of the first, until the end of the iframe

I don't think you can do this statically without sacrificing the "stationary" part of "stationary buttons".
 

Veracity

Developer
Staff member
I don't think stationarybuttons.1.js requires anything in jQuery 1.9 that isn't also available in 1.3.1 that KoL serves. Try r16665?
The space for the stationary buttons no longer shrinks after a combat to be a single row with an "Again" button on it.

See the extra blank lines below the Again" button? Those used to have buttons for combat skills - and the space to hold combat skills used to grow or shrink as necessary. That no longer happens.

New bug.

SS1.png
 

xKiv

Active member
Try removing the (now obsolete) "$.noConflict();" from stationarybuttons.1.js?

Disclaimer: I am only trying it out on a much simplified local "page":
Code:
<html>
	<head><title>blatest</title>
		<script language=Javascript src="http://images.kingdomofloathing.com/scripts/jquery-1.3.1.min.js"></script>
<style type='text/css'>
#page {
	height: 100%;
}
#mafiabuttons {
	position: absolute;
	width: 100%;
	top: 0px;
	left: 0px;
}
#content_ {
	position: fixed;
	top: 66px;
	margin: 0px;
	padding: 0px;	
	left: 0px;
	right: 0px;
	bottom: 0px;
	width: 100%;
	overflow: auto;
}
#btnwrap{
    width: 100%;
}

</style>
<script language="javascript">
$(document).ready( resetPosition );
$(window).resize( resetPosition );
$.noConflict();

function resetPosition() {
alert('3');
	var topbar = $('#mafiabuttons').height();
alert('4: ' + topbar);
	$('#content_').css( 'top', topbar + 'px' );
alert('5');
}
</script>
	</head>
	<body>
<div id="page">
<div id="mafiabuttons" >
blablabla button1 button 2
</div>
<div id="content_">
nejaky text
asdf
asdf
<hr>
asdf
<hr>
asdf
<hr>
asdf
<hr>
asdf
asdf
<hr>
asdf
<hr>
asdf
<hr>
asdf
<hr>
asdf
asdf
<hr>
asdf
<hr>
asdf
<hr>
asdf
<hr>
asdf
asdf
<hr>
asdf
<hr>
asdf
<hr>
asdf
<hr>
asdf
asdf
<hr>
asdf
<hr>
asdf
<hr>
asdf
<hr>
asdf
asdf
<hr>
asdf
<hr>
asdf
<hr>
asdf
<hr>
asdf
asdf
<hr>
asdf
<hr>
asdf
<hr>
asdf
<hr>
asdf
asdf
<hr>
asdf
<hr>
asdf
<hr>
asdf
<hr>
asdf
asdf
<hr>
asdf
<hr>
asdf
<hr>
asdf
<hr>
asdf
asdf
<hr>
asdf
<hr>
asdf
<hr>
asdf
<hr>
asdf
asdf
<hr>
asdf
<hr>
asdf
<hr>
asdf
<hr>
asdf
asdf
<hr>
asdf
<hr>
asdf
<hr>
asdf
<hr>
asdf
asdf
<hr>
asdf
<hr>
asdf
<hr>
asdf
<hr>
asdf
asdf
<hr>
asdf
<hr>
asdf
<hr>
asdf
<hr>
asdf
asdf
<hr>
asdf
<hr>
asdf
<hr>
asdf
<hr>
asdf
asdf
<hr>
asdf
<hr>
asdf
<hr>
asdf
<hr>
asdf
asdf
<hr>
asdf
<hr>
asdf
<hr>
asdf
<hr>
asdf
asdf
<hr>
asdf
<hr>
asdf
<hr>
asdf
<hr>
asdf
asdf
<hr>
asdf
<hr>
asdf
<hr>
asdf
<hr>
asdf
asdf
<hr>
asdf
<hr>
asdf
<hr>
asdf
<hr>
asdf
<hr>
asdf
<hr>
asdf
<hr>
asdf
<hr>
asdf
</div>
</div>
	</body>
</html>
 

Veracity

Developer
Staff member
What I tried was actually putting jquery.1.9.1.js into our images directory and serving it from there, rather than going to code.jquery.com. It worked. And I submitted it, since I depend on stationary buttons, and I don't have time to spend a lot of time "fixing" them.

I suppose we could try your idea.

Otherwise, we should probably do this:

- use jquery.1.9.1.min.js
- put it in lib/images, rather than src/images, since we didn't actually write it.
- make that work, since it doesn't currently exist.
- Include the jquery license:

Code:
/*!
 * jQuery JavaScript Library v1.9.1
 * http://jquery.com/
 *
 * Includes Sizzle.js
 * http://sizzlejs.com/
 *
 * Copyright 2005, 2012 jQuery Foundation, Inc. and other contributors
 * Released under the MIT license
 * http://jquery.org/license
 *
 * Date: 2013-2-4
 */
Since you and heeheehee seem to be our local Javascript experts, I'll let you guys work it out. :)
 

xKiv

Active member
That is what I would try if removing the "replace $ with what it was before last loading of jquery (i.e. with nothing, since only one jquery was loaded)" call wouldn't work.
 

xKiv

Active member
Update: seems like the last change at least works, and lets me play significantly faster than before (unless something else conincidentally cleared up).

There's still a ton of time spent (wasted?) on the browser, but I don't even know how to start looking into that.
 
Top