{"action":"created","issue":{"url":"https://api.github.com/repos/tridactyl/tridactyl/issues/981","repository_url":"https://api.github.com/repos/tridactyl/tridactyl","labels_url":"https://api.github.com/repos/tridactyl/tridactyl/issues/981/labels{/name}","comments_url":"https://api.github.com/repos/tridactyl/tridactyl/issues/981/comments","events_url":"https://api.github.com/repos/tridactyl/tridactyl/issues/981/events","html_url":"https://github.com/tridactyl/tridactyl/issues/981","id":357314722,"node_id":"MDU6SXNzdWUzNTczMTQ3MjI=","number":981,"title":"Hint mode style is still present after coming back to the previous page for some links","user":{"login":"guigot","id":10174360,"node_id":"MDQ6VXNlcjEwMTc0MzYw","avatar_url":"https://avatars2.githubusercontent.com/u/10174360?v=4","gravatar_id":"","url":"https://api.github.com/users/guigot","html_url":"https://github.com/guigot","followers_url":"https://api.github.com/users/guigot/followers","following_url":"https://api.github.com/users/guigot/following{/other_user}","gists_url":"https://api.github.com/users/guigot/gists{/gist_id}","starred_url":"https://api.github.com/users/guigot/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/guigot/subscriptions","organizations_url":"https://api.github.com/users/guigot/orgs","repos_url":"https://api.github.com/users/guigot/repos","events_url":"https://api.github.com/users/guigot/events{/privacy}","received_events_url":"https://api.github.com/users/guigot/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2018-09-05T16:46:49Z","updated_at":"2018-09-06T08:10:25Z","closed_at":null,"author_association":"NONE","body":"Hello,\r\n\r\n*   Brief description of the problem: \r\nWhen I use hint mode to access some links in particular, the hint mode style is still present after coming back to the previous page. Here it is a screenshot to be clearer : https://screenshots.firefox.com/t3snJeZlH7gtSJP2/github.com\r\nI saw this issue only on github.com, for the tab \"Issues\" and \"Pull requests\", issues topics...\r\n\r\n*   Steps to reproduce:\r\n\r\n    1. Use hint mode to access an URL (tab \"Issues\" on github.com/tridactyl/tridactyl for example)\r\n    2. Come back to the previous page\r\n\r\n*   Tridactyl version (`:version`): 1.14.0 (this issue happened in previous versions, saw it for the first time from 1.13.3 I think)\r\n\r\n*   Firefox version (Top right menu > Help > About Firefox): 61.0.1"},"comment":{"url":"https://api.github.com/repos/tridactyl/tridactyl/issues/comments/419004959","html_url":"https://github.com/tridactyl/tridactyl/issues/981#issuecomment-419004959","issue_url":"https://api.github.com/repos/tridactyl/tridactyl/issues/981","id":419004959,"node_id":"MDEyOklzc3VlQ29tbWVudDQxOTAwNDk1OQ==","user":{"login":"saulrh","id":560724,"node_id":"MDQ6VXNlcjU2MDcyNA==","avatar_url":"https://avatars0.githubusercontent.com/u/560724?v=4","gravatar_id":"","url":"https://api.github.com/users/saulrh","html_url":"https://github.com/saulrh","followers_url":"https://api.github.com/users/saulrh/followers","following_url":"https://api.github.com/users/saulrh/following{/other_user}","gists_url":"https://api.github.com/users/saulrh/gists{/gist_id}","starred_url":"https://api.github.com/users/saulrh/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/saulrh/subscriptions","organizations_url":"https://api.github.com/users/saulrh/orgs","repos_url":"https://api.github.com/users/saulrh/repos","events_url":"https://api.github.com/users/saulrh/events{/privacy}","received_events_url":"https://api.github.com/users/saulrh/received_events","type":"User","site_admin":false},"created_at":"2018-09-06T08:10:25Z","updated_at":"2018-09-06T08:10:25Z","author_association":"CONTRIBUTOR","body":"Yep, it looks like github's SPA implements \"navigation\" by mutating the DOM without ever unloading or loading the document. I predict that we'll observe these kinds of issues on most SPAs implemented with a functional-reactive framework. It also looks like I'm completely failing to understand how adding elements to the DOM works; Tridactyl's code says it's adding and placing a bunch of elements for hints, but the inspector says it's actually adding and removing its classes on existing page elements. The delay after a hint selection also means that the SPA swaps out the hinted elements before tridactyl gets around to removing its classes, so when the SPA swaps those elements back in the hint classes are still set.\r\n\r\nAs evidence, the hints can also be removed by running excmds like this:\r\n```\r\njs document.querySelectorAll(\".TridactylHintElem\").forEach(elem => elem.classList.remove(\"TridactylHintElem\"))\r\n```\r\n\r\nThere are a couple of things that'd deal with this:\r\n* Find some events that we can hook to detect navigation-like events like this, and on each of them query the entire document for elements with Tridactyl hint classes and remove them. The query above should be pretty fast, and if we want to specifically target problematic sites we could even implement these as autocmds.\r\n* Make the hinting system use the `CSSStyleSheet` [interface](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet) to add and remove selectors from `static/hint.css` as an additional way to ensure that hints aren't shown when they shouldn't be."}}
{"actor":{"display_login":"saulrh"}}