deluge-web's password field has broken-looking focus outline, in Firefox, due to UA-string-sniffing

[Daniel Holbert]

Steps to reproduce:

(1) Visit a deluge-web instance, using Firefox as your web browser.

(2) Click to focus the password field.

ACTUAL RESULTS: There are awkward-looking colorful bars on the left side and the right side of the password field.

EXPECTED RESULTS: No such bars.

ANALYSIS: These bars are there as part of the browser's default focus outline, but they're only visible on the left and right sides because this particular element is inside of a clipped overflow:auto container.

This issue *would* affect Safari as well, since Safari draws very-similar default focus outlines to Firefox, but Deluge has some CSS to prevent this in Safari (using the "ext-webkit" CSS class selector, where "ext-webkit" is a class that Deluge adds to the page's body element when it detects that the browser is WebKit i.e. Safari). Here's the rule in question (which can be found in ​https://git.deluge-torrent.org/deluge/plain/deluge/ui/web/css/ext-all-notheme.css ):

.ext-webkit :focus {
    outline: none !important;
}

SUGGESTED TRIVIAL FIX: Deluge should just broaden that CSS rule to apply in Firefox as well (using "ext-gecko" selector). So it should instead start with:

.ext-webkit :focus, .ext-gecko :focus {

VERSION INFO: I'm using deluge-web package 1.3.15-2 in Raspbian (and Firefox 91 on Ubuntu 21.04). But I suspect this affects all newer deluge-web versions as well, given that the CSS rule is unchanged at ​https://git.deluge-torrent.org/deluge/plain/deluge/ui/web/css/ext-all-notheme.css (assuming that file is newer than 1.3.15).

[Daniel Holbert]

screenshot of issue

[Daniel Holbert]

ALTERNATE/BETTER SUGGESTED FIX: An even-better fix here would be to avoid clipping these outlines, by e.g. adding a few pixels of padding to some container element inside of the nearest overflow:auto clipping-container.

e.g. perhaps this ancestor of the password field:

<div class="x-form-item " tabindex="-1" id="ext-gen159">

This ancestor clips its descendants due to its x-form-item class which applies overflow: auto via your ext-all-notheme.css library. This is the most-proximate reason that the top and bottom of the focus-outline get clipped here.

If you give that ancestor padding-block: 2px, then that makes its clipping area slightly taller so that it actually has space for the browser to paint a focus-outline. This is nice so that users with low-vision accessibility needs can clearly see whether the password field is focused.