We Keep Coding

Can't focus elements on load in Chrome - very weird bug (in Chrome?)

I have a very, very weird issue that only seems to be an issue in Chrome.
When a user comes on the website, the user cannot focus any element (via mouse click, if they focus it via tabbing, the elements don't get the 'focused' state either) and that's only an issue in Chrome. That is, until the user resizes the window, minimizes the window, opens a new tab, opens developer tools, etc. Reloading the page does nothing. However, as soon as focus is "enabled", the user can navigate/refresh with purging cache, etc., close the browser and open it again, and everything works normally - the elements get the 'focused' state normally.
This behaviour can only be reproduced in Chrome and not on localhost.
The difference between localhost and beta environment is:
beta env requires authentication (basic http auth)
files in development env are concated in a single JS and single CSS file and both are minimized
beta env includes hotjar, while there's no hotjar on localhost
There are no custom event listeners that would listen for the 'resize' event. There are no errors in console and all javascript that doesn't depend on focused element state gets executed correctly. Hover events and all CSS styling that depends on hovered state all work correctly.
The main issue is, that a form which has to be filled out and includes a datepicker, cannot be filled out and thus the users can't really interact with the page. Datepicker doesn't open and, as the input elements don't get the focused state, they don't visually change (CSS :focused selector isn't working either) and thus give the impression to the user that they cannot type in the normal text inputs (which works, after clicking on the input, it is possible to type in the input).
I have tried removing hotjar and the problem persisted. The only thing that made the problem go away was removing the basic auth, however, that is not an option in this stage (it's a closed beta test, so we need to limit the access only to the users with password).
I also find it extremely odd that basic auth would interfere with the focused state of elements, especially as the error persists after you refresh and only goes away as soon as you interact with browser itself (minimize, open new tab, do anything that resizes your browser window or document), after that it works correctly and there are no errors whatsoever.
The problem only started to appear recently, but I do not believe it's an issue with the app itself, as I tried rolling back to a couple months old build and the problem persists. All of that makes me believe it's a bug in Chrome, but what can be done to fix it?
EDIT: I also tried to add autofocus property to an input element and, in beta environment, it doesn't get focused.

So it seems it indeed is a Chrome bug that's present both on mobile (Android and iOS) Chrome browsers, as well as desktop Chrome browser (tested both on a Windows and a Mac). I submitted an official bug report. In the bug report, a fellow user made a website that's accessible only through basic auth and only has 2 basic inputs, the input should get a red border on focus. As expected, after opening the webpage in Chrome (for ease of use - incognito mode), the input doesn't get focus and the border doesn't change.
For those who are also affected by this bug in Chrome, you can track the bug progress here: https://bugs.chromium.org/p/chromium/issues/detail?id=740652
Meanwhile, here's a hacky solution for those interested:
$(document).on("ready", function() {
var $inputs = $("input");
$inputs.off("click.trick");
if (!sessionStorage.fixedChromeFocus) {
sessionStorage.fixedChromeFocus = "true";
$inputs.on("click.trick", function() {
var win = window.open("/", "_blank");
setTimeout(function() {win.close()}, 1);
$inputs.off("click.trick");
});
}
});
The goal is to, somehow, interact with the browser outside of the current page, to make it somehow lose focus. You cannot use JS to minimize browser, cannot resize it, cannot open dev tools. What you can do, though, is open a new window. Of course, if you open a new window immediately, a pop-up blocker (as most people have it) will block it and the window itself (or rather your current tab) won't lose focus. Opening a new window can only be done as a reaction to a user event (without triggering potential pop-up blocker).
I also use some browser detection so the code will only be executed for Chrome and, using server-side conditioning, only for builds that include basic auth.
What the code does, quite self evidently, is that as soon as a user clicks on an input, it opens a new tab and quickly closes it, 1ms later. To prevent this from happening all the time, on every page load, sessionStorage, which gets cleared automatically after tabs from that domain are closed, is used (and we've already established that once focus starts working correctly, it will work as long as you keep your browser open).
The effect of this code is that the user will see a quick white flash the first time he clicks on the input, but everything will work correctly

How would you stop a page from refreshing automatically?

I have a problem when I am trying to check the source of an interesting page which keeps refreshing automatically every 3-5 seconds (presumably due to some js script) which resets my Inspect Element Inspector window every time the page is refreshed.
Is there any other way other to stop that page from refreshing or perhaps the Inspector window from resetting itself other than turning on NoScript to stop the page from refreshing automatically?

Usually I just open DevTools, switch to the appropriate panel if necessary, and hit pause.
Opening DevTools: Via menus, or by press F12, Ctrl+Shift+I, or Cmd+Shift+I depending on browser and OS.
Switching panels: Pick the panel from the tabs at the top of DevTools. It'll be called "Debugger" (Firefox, IE) or "Sources" (Chrome) or similar.
Pausing: In the Debugger/Sources panel, click the pause button (usually looks like the pause button on a television remote control, ||) or press the keyboard equivalent. Keyboard equivalents are
Firefox & Chrome: F8
IE: Ctrl+Shift+B

(Updated 2020-03-30)
In Firefox 74 this option is in Options -> Privacy & Security -> Permissions
(Original reply)
Firefox has the option to prevent refresh natively, the option is in Advanced->General->Warn me when websites try to redirect or reload the page

The most popular solution for this problem is to trap the beforeunload event. The browser will ask the user for confirmation to leave the page. The code, in its simplest form, looks like this:
window.onbeforeunload = function() { return true }
You can enter this code in console. Alternately, you can simply paste the following URL in the browser address bar (console not required). You can even bookmark it.
javascript:window.onbeforeunload = function() { return true }
Be advised that modern browsers might chop off the javascript: part when you paste it inside the address bar; make sure you type it back.
To determine the cause of redirect in Firefox, try the following:
Open Web Developer Tools (CTRL + SHIFT + I), open "Toolbox Options" and check the "Enable persistent logs" option. This makes the logs persist across page loads (logs are cleared otherwise).
Now switch to "Network Monitor" tab.
Open the URL and let it refresh.
Inside the Network Monitor > Cause column you will find out why the page reloads.
The cause column is pretty ambiguous (Chrome does a much better job). However, if JavaScript was used to trigger page (re)load then it at least shows you the filename and line number of that script.

When the page is still loading, you can press the Esc key. While the page is still white, press it. When you stop the page from loading at this point, this usually stops all the auto loaded javascript. Any scripts that run on actions are usually not effected. Each page is different, try different timings.
When I use a site called NovelUpdates there is javascript that can make certain elements hidden, and when I press Esc on page load all the elements that would be hidden after page load are visible. Then when I click a button that would execute javascript that operates with no problems. NoScript isn't going to solve your issue I believe.
Another example of this are those websites with annoying boxes that pop out after 10 seconds that says you aren't a member and can't view any more of this site without logging in, like some news article websites.

What you could do is use the command exit(), which is the equivalent to die in php and simply stops the script.
If you don't know what's causing it and you don't want to look for the "bad boy", then you might as well stop the entire script at the very bottom of the page.

Closing a tab without closing the window

Hi I have set up a task in my task scheduler to login to my UTM by opening a firefox window at regular intervals. When the relevant URL is loaded a auto-login GM script works on it and logs me in to UTM.
I would like to close that tab after the login is done. If I use
window.close();
It works fine but if no other tab is opened at the time, it simply closes the window.
Without going into details of UTM I would like the following -
A GM hack which closes the tab only if other tabs are already open. If it is the last tab of the window, then it should just replace it with a blank tab (so that window is not closed).
Probably GM cannot obtain any info about the other tabs, but is there any hack ?

As far as I'm aware this isn't possible, if nothing else then for security reasons: you don't spam javascript from your video streaming tab collecting all your data and submitting forms on your behalf.
Here's a thread with a solution that worked for IE7 that you may be able to manipulate but as I said it's not likely.
If you decide to have ago, don't think about identifying the number of tabs, it won't happen, instead focus on determining whether or not there are multiple tabs.
The linked example uses if(clientY == 0) to determine whether or not the browser is closing. This would be a good starting point.
Again, for security reasons, you won't be able to find out information about open tabs.

javascript : window.open

I am working in vb.net 2005. I am in a position to start a new browser with process.start().
Now I have to open that browser in a specific size(say height:300 width:500)
Process.Start("firefox.exe", "abc.html")
and I have written this following code on load of abc.html
var myRef = window.open('abc.html','','left=20,top=20,width=300,height=500');
but it does not resize.
If I add 1 button on this page and click on it (by writing same code on its click event), a new window with expected size opens.
Am I going wrong somewhere?
Thanx.

Firefox doesn't let pages resize the window by default. Also note, if you already have Firefox running then browser preferences will dictate whether you get a new window or a tab. You can force a separate instance of Firefox by using the -no-remote command line flag, but then you won't be able to use the default profile (only one Firefox instance per profile).
My questions for you are:
Why are you launching Firefox from another executable at all instead of just having users click on a link and have it open in their default browser?
If you do need to launch Firefox from an executable, why spend all this effort overriding the user's preferences and settings?
If you' re launching from an executable and are keen to annoy your users whatever the cost, why not just find and resize the Firefox window using the normal Windows APIs?

Open new browser windows in JavaScript without making it active

I have some JavaScript that makes an AJAX call and, if the call fails, opens a new windows (tab in Firefox) and displays the response from the server in that window. This is very convenient for debugging, because the error is typically from Pylons, so it's a full HTML page.
The only problem is that the new tab becomes the active tab, which would totally confuse a regular user. Is there any way to open the tab/window, but not make it active, ie. keep the current active window?
My code currently looks like this:
errorWindow = window.open("", "TCerrorWindow")
if (errorWindow)
errorWindow.document.write(xhr.responseText);

You can call errorWindow.blur(); window.focus(); after, forcing the browser to return focus to the previous window.
The effect you're trying to achieve is commonly called a pop-under window.

AFAIK this is not possible, as a security measure against pop-under windows. For debugging purposes you could
use Firebug (with a handy console, where you can output your own log messages from the code)
create a debug layer (div) on your page, where you output error messages in case an error happens