visibilitychange and visibilityState doesn't work when using HTTP and DevTools is Open

[jcubic]

Description

I've tried to write code that use both API and the even don't fire when you change tabs and the visibilityState is always 'visible'.

Steps to reproduce

1. Write this code:

function in_focus() {
    return document.visibilityState === 'visible';
}
document.addEventListener("visibilitychange", () => {
     console.log('visibilitychange', in_focus());
});

2. Open the page on one tab
3. Open DevTools
4. Switch tabs

Actual result

No logs in console until you close the DevTools before you switch tabs.

Expected result

The event should fire the document.visibilityState should change

Reproduces how often

Easily reproduced

Brave version (brave://version info)

• Brave: 1.73.91 Chromium: 131.0.6778.85 (Oficjalna wersja) (64-bitowa)
• Wersja: 35427fa72a008a7e861fa9828e07a0ba2cd46ebd
• System operacyjny: Linux

Channel information

• release (stable)
• beta
• nightly

Reproducibility

• with Brave Shields disabled
• with Brave Rewards disabled
• in the latest version of Chrome

Miscellaneous information

It works fine in Google Chrome and Firefox

Additionally, document.hasFocus() doesn't work on localhost. It always returns true when DevTools is Open.

EDIT just checked if this is by chance not an issue with HTTP vs HTTPS, and It turns out the same issue happens on any host when a page is served via HTTP.

Here is reproduction: http://u.just.net.pl

To test the issue, open the page and switch tab and back and open dev tools. Do the same when dev tools is open.

EDIT 2: Just installing SSL certificate for localhost, and serving files with https don't solve the issue. visibilityState still don't change when dev tools is open.