[Deluge] #3481: deluge-web's password field has broken-looking focus outline, in Firefox, due to UA-string-sniffing
Deluge
due to UA-string-sniffing
----------------------------+--------------------
Reporter: dholbert | Type: bug
Status: new | Priority: minor
Milestone: needs verified | Component: Web UI
Version: 1.3.15 | Keywords:
----------------------------+--------------------
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).
--
Ticket URL: <https://dev.deluge-torrent.org/ticket/3481>
Deluge <https://deluge-torrent.org/>
Deluge Project
Deluge
due to UA-string-sniffing
Reporter: dholbert | Owner:
Type: bug | Status: new
Priority: minor | Milestone: needs verified
Component: Web UI | Version: 1.3.15
-----------------------+----------------------------
Changes (by dholbert):
* Attachment "deluge-web-screenshot.png" added.
screenshot of issue
Deluge
due to UA-string-sniffing
Reporter: dholbert | Owner:
Type: bug | Status: new
Priority: minor | Milestone: needs verified
Component: Web UI | Version: 1.3.15
-----------------------+----------------------------
Comment (by dholbert):
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.
--
Ticket URL: <https://dev.deluge-torrent.org/ticket/3481#comment:1>