fixed color glitches in FireFox

[giwih]

Description

Related Issues

• Issue Closes [Bug] Colour glitches on start since last update #308

Checklist

• I have read and followed the Contributing Guidelines.
• I have added necessary tests.
• The project builds and runs without issues.

[ZiClaud]

It works, thank you!

[itz-rj-here]

@prem-k-r please review it
I guess it’s ok

[prem-k-r]

Related Issues

• Issue [Bug] Colour glitches on start since last update #308

Github trick: You can write as Closes #308 in PR description, it will automatically closes the issue when the PR is merged :)

[XengShi]

This change will disable live changes of colors in Chrome. I think live updates provide a better user experience. Therefore, I am merging this change into the Firefox-specific branch.

Screencast.From.2024-12-16.18-27-12.mp4

[ZiClaud]

I'd like for this to be reopened and changed the code to:

// Function to detect if the browser is Firefox
function isFirefox() {
    return navigator.userAgent.toLowerCase().includes('firefox');
}

// Apply appropriate listeners based on the browser
if (isFirefox()) {
    // Add listeners for Firefox
    colorPicker.removeEventListener('change', handleColorPickerChange);
    colorPicker.addEventListener('change', handleColorPickerChange);
} else {
    // Add listeners for Chrome and Safari
    colorPicker.removeEventListener('input', handleColorPickerChange);
    colorPicker.addEventListener('input', handleColorPickerChange);
}

And remove the Firefox-specific branch

I've tested it on both Firefox and Chrome, and it works.
Didn't test it on Safari, Brave and others.

Also, to make the code more solid, create a folder: browserUtils.js and put in there

// browserUtils.js

/**
 * Detect if the browser is Firefox.
 * @returns {boolean} True if the browser is Firefox.
 */
export function isFirefox() {
    return navigator.userAgent.toLowerCase().includes('firefox');
}

/**
 * Detect if the browser is Chrome.
 * @returns {boolean} True if the browser is Chrome.
 */
export function isChrome() {
    return navigator.userAgent.toLowerCase().includes('chrome') &&
           !navigator.userAgent.toLowerCase().includes('edge') &&
           !navigator.userAgent.toLowerCase().includes('opera');
}

@XengShi @giwih @prem-k-r

[prem-k-r]

we can define isfirefox there in a line, maybe no need for browserUtils.js

there has been an extra option added for firefox #323 , so not a good idea to delete the branch