Javascript: showHide() disable effects when applied to big tables

[GoogleCodeExporter]

At the moment showHide() always uses some effect to "smooth" show / hide the 
additinoal infos. This is nice when you`ve got some small detail tables or 
graphs. I.e. with detailsGraph or thread_0. But on some tables this is very 
annoying, especially with detailshttp, which can have many rows. In my 
application there are easily more then 5000 different requests, on some days 
even close to 10000 requests.

I`m not sure if showHide() is so slow because of the effect, or just because 
the table is so big. But at the moment it takes ages to show the details on my 
Nexus 7 tablet. (On the desktop its more or less ok, taking about 5 seconds to 
show the table with nearly 6000 requests in it, because there is just enough 
raw CPU power)

Original issue reported on code.google.com by Emmeran....@gmail.com on 26 Jan 2014 at 4:10

[GoogleCodeExporter]

I think that we can detect tablets and smartphones in the javascript, then 
disable the slide effect in this case.

For this, do you know what would be a good javascript condition to detect all 
smartphones and tablets, for example using matchMedia?

https://github.com/paulirish/matchMedia.js/

Original comment by evernat@free.fr on 27 Jan 2014 at 6:24

[GoogleCodeExporter]

For me this ui performance problem isn´t only on mobile devices. There it is 
just very visible.

I would be already happy with a filter config parameter to disable all 
Javascript effects. They are nice, but I dont need them :)

An other solution would be to investigate, why the big tables need so long to 
render. Is it possible to speed that up using some CSS tricks? I think that the 
first column in the details table has a dynamic size causes a big performance 
problem. What about adding a css class like:

.aprevUrls {
    text-overflow: ellipsis;
    width: 40%;
    white-space: nowrap;
    overflow: hidden;
}

to the rows, and allow to toggle this class? So that by default very long URLs 
are not displayed fully and the table has a exact size without the need to 
calculate all rows.

Original comment by Emmeran....@gmail.com on 28 Jan 2014 at 10:10

[GoogleCodeExporter]

Since v1.36, you can disable slide up and down effects like this:

1. Add a "monitoringEffects.js" file, at the root of the web content in your 
webapp, with the following content:

/* Slide effects disabled */
var Effect = {};
Effect.SlideDown = function(element) { throw("disabled"); }
Effect.SlideUp = function(element) { throw("disabled"); }

2. Add the following in the web.xml file of your webapp:
        <filter>
        <filter-name>customResourceFilter</filter-name>
        <filter-class>net.bull.javamelody.CustomResourceFilter</filter-class>
        <init-param>
            <param-name>effects.js</param-name>
            <param-value>/monitoringEffects.js</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>customResourceFilter</filter-name>
        <url-pattern>/monitoring</url-pattern>
    </filter-mapping>

So this is now documented.

Original comment by evernat@free.fr on 16 Feb 2014 at 3:59

• Changed state: Done