Skip to content

fix: change tab order on tracking domains page #3152

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
giant1izards wants to merge 1 commit into from
+10 −7
Closed

fix: change tab order on tracking domains page #3152

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,3 +43,6 @@ tests/.pytest_cache

pkg
release-utils/config.sh

# development tooling

@ghostwords ghostwords Nov 24, 2025 •
edited
Loading

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What precisely produces .devcontainer/? "development tooling" is generic; lots of entries above are also "development tooling".

Also, suggest placing this next to related entries, like maybe following the Vim swap files entry?

.devcontainer/
4 changes: 2 additions & 2 deletions src/js/htmlutils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -211,11 +211,11 @@ let htmlUtils = {
<div class="${classes.join(' ')}" data-origin="${fqdn}">
<div class="origin" role="heading" aria-level="4">
<span class="ui-icon ui-icon-alert tooltip breakage-warning" title="${breakage_warning_tooltip}"></span>
<span class="origin-inner tooltip" title="${domain_tooltip}">${dnt_html}${shield_icon}${fqdn}</span>
<span class="origin-inner tooltip" title="${domain_tooltip}">${fqdn}${dnt_html}${shield_icon}</span>
</div>
<a href="" class="removeOrigin">&#10006</a>
${htmlUtils.getToggleHtml(fqdn, action, blockedFpScripts)}
<a href="" class="honeybadgerPowered tooltip" title="${undo_arrow_tooltip}"></a>
<a href="" class="removeOrigin">&#10006</a>
</div>
`.trim();
};
Expand Down
2 changes: 1 addition & 1 deletion src/skin/options-layout.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -367,7 +367,7 @@ header {
}

.honeybadgerPowered {
left: 470px;
left: 475px;
}
}

Expand Down
8 changes: 4 additions & 4 deletions src/skin/popup.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ button {
height: 40px;
overflow: hidden;
line-height: normal;
contain: layout;

@ghostwords ghostwords Nov 24, 2025

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What does this do?

}
.clicker:not(#not-yet-blocked-header):not(#non-trackers-header) {
direction: ltr;
Expand Down Expand Up @@ -117,7 +118,6 @@ button {
}

.dnt-compliant {
float: left;

@ghostwords ghostwords Nov 24, 2025

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also I moved the DNT icon to the right of the fqdn because it is focusable element and the tab flow of focusing on the fqdn, then going left to the DNT icon, then right again to the toggle seemed awkward. I am wondering if that even stood out to you as a problem to begin with, but also I want to make sure it's ok to move the icon. If it needs to stay on the left I can put it back and either leave the tabbing behavior as-is or adjust it a different way.

I think we should leave the DNT icon where it is for now, but fix its tab order.

display: inline;
padding-right: 5px;
}
Expand All @@ -127,9 +127,9 @@ button {
margin-right: 10px;
width: 20px;
height: 20px;
position: relative;
left: 340px;
bottom: 15px;
position: fixed;
left: 345px;

@lenacohen lenacohen Nov 25, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This style also needs to be updated for narrow screen sizes inside @media screen and (max-width: 400px){. Otherwise, the arrow is too close to the toggles on phones (pictured below).
Screenshot_20251124-205409 Screenshot_20251124-205359

bottom: 24px;
}
.userset .honeybadgerPowered {
display: block;
Expand Down