TestCafe debug footer blocks page interaction - debugging

I have buttons on the bottom of the screen that is covered up by the TestCafe footer when I stop for client-side debugging (t.debug). When I select "Unlock Page" I can interact with my app except for any widgets under the footer. My app has a button toolbar at the bottom which makes the manual interactive mode pretty useless.
NOTE: I can tab to the buttons in the toolbar and hit enter, but this is not a workaround my QA department finds acceptable from an efficiency standpoint.
Is there any way to make the footer disappear or to make the web page act as if its viewport ends above the footer?

Currently, there's no way to hide the footer or move the page content above it. We are aware of this limitation and will work on improving this behavior in the context of this thread:
Allow access to elements under the status panel in debug mode

Related

Disable auto refresh when switching to Responsive Design Mode in Firefox?

To adjust my site CSS, I often go in developer mode and adjust CSS directly there to have a live preview. but then, I want to switch responsive design mode on or off to see if other display is not broken by what I just edited. Unfortunately, it reloads the page and discard all modifications I had just done.
How to avoid auto reload of the page in Firefox when toggling Responsive Design Mode on or off?
There are two options Reload when touch simulation is toggled and Reload when user agent is changed that cause the page to reload automatically when enabled.
If you disable those two options the page should not get reloaded when switching to Responsive Design Mode.

Clicking Kendo Panelbar causes page to jump to top on mobile devices

I have a Kendo UI panelbar on a website I'm developing, with a large number of panels (dynamic, but it can be up to 12). On mobile devices, I've found that clicking a panel bar to expand or collapse it will also cause the page to jump to the top. Since the panels are a bit further down the page, we're finding this to be really annoying. It does not happen on a desktop screen though, even if I shrink the window down to about a mobile size (it does happen when I use Chrome's mobile emulation setting, however). Is there a way that I can prevent this from happening?
EDIT: This behavior only occurs with panels that have a Kendo Grid within them, which is most of them; it does NOT occur with panels that just have text.

KendoUI version of JQUERY animated side navigation

I am fond of the type of side navigation menu that is common in mobile apps. An example is: http://www.jqueryscript.net/menu/jQuery-Animated-Side-Navigation-Menu-Plugin-Sidebar.html
Which works also for web pages. However, the vast majority of my page is in KendoUI, and I don't want to load another framework just for that.
Is there a combination of tricks with Kendo (draw control for example) that I could use to get the same effect?
Alternatively, I am all wet. I just want a quick way to have a "pop-up" of settings that are only occasionally used, and most of the time save the screen real-estate. So maybe just a button and a pop-up window is the correct approach?
Any advice?

Why does the Flattr popup covers the button in firefox?

I have manually implemented the Flattr button to my site.
In Firefox (Windows) the "popout" covers the button so one can't press it.
Any other browser renders the popout in the correct place. Can someone confirm this? Or is it a conflict on my site?
Since you don't mention which site is yours I'm left to speculate on the reasons for this and if I do then I think it is that your body-element doesn't start at the top left of your browser and that therefor positioning of the popout fails due to browsers inability to correctly account for offset body elements.
We've had reports of people experiencing this problem in eg. WordPress where the admin-bar that's showed when a user is logged in pushes the entire site down 20 pixels or something and makes the position of the popout be of by 20 pixels. Could it be something similar for you - that you're logged in in Firefox and not in other browsers?
As far as I know there's no workaround for this limitation - eg. jQuery can't account for it either.
Good thing though: If your layout has a body with an offset or something else that makes the popout not work for you you can disable it by setting popout 0 in the settings of the button.

Firefox add-on tab-specific buttons and scripts, similar to Page Actions in Google Chrome

I want to write a Firefox extension that acts exactly like the built-in RSS feed scanner (as an exercise). It should do the following:
On each new page / tab load, it should scan the content of the page for RSS feeds
If there are RSS feeds in the page, it should put a button in the location bar that the user can click
On clicking the button, a speech bubble should appear under the button (the way a speech bubble appears under the bookmarks star when you click on it), with information on the feeds and buttons to subscribe to them
So my main questions are:
What is the process to run specific content scripts for specific pages?
What is the process to use the results of those scripts to update the speech bubble for each location bar button for each tab?
Basically, I'm trying to figure out how to do in Firefox what Page Actions are in Google Chrome.
To clarify, I want to replicate this functionality in Firefox: http://code.google.com/chrome/extensions/pageAction.html
Please help! :)
This question is similar to this question:
how to have tab-specific xul control with firefox
to have tab specific control. Usually (or maybe I am wrong),the newly added control is the same one across all the different tabs. Change from any tab will change its appearance in all tabs.
still looking for solutions or ideas.

Resources