search

mozilla / addon-wr

Looking Glass is a collaboration between Mozilla and the makers of Mr. Robot to provide a shared world experience.
https://support.mozilla.org/kb/lookingglass
51 stars 15 forks source link

Fix hover effect loading glitch #35

Closed biancadanforth closed 6 years ago

biancadanforth commented 6 years ago

Claim: This solves issue #34 .

There were cases where the content script would inject HTML into a page for the hover effect before the CSS would be loaded for that page by the background script. This resulted in seeing the contents of the hover effect in the page briefly before the CSS was applied. Now, we properly ensure the CSS is loaded before injecting the HTML in the content script.

Since the timers for the effect were added mostly to mitigate the effect of this UI bug, I have removed them to make the effect less subtle (Issue #22). Now the inverted words stay inverted and the hover effect also persists on the page.

@gregglind Can you test this branch to check if you still get the loading glitch you saw below?

loadingglitch
gregglind commented 6 years ago

The timer also ensured that the hover text would eventually go away, on pages where the hover text was showing inline forever.

On Tue, Dec 12, 2017 at 9:15 PM Bianca Danforth notifications@github.com wrote:

There were cases where the content script would inject HTML into a page for the hover effect before the CSS would be loaded for that page by the background script. This resulted in seeing the contents of the hover effect in the page briefly before the CSS was applied. Now, we properly ensure the CSS is loaded before injecting the HTML in the content script.

Since the timers for the effect were added mostly mitigate the effect of this UI bug, I have removed them to make the effect less subtle (Issue #22 https://github.com/gregglind/addon-wr/issues/22). Now the inverted words stay inverted and the hover effect also persists on the page.

@gregglind https://github.com/gregglind Can you test this branch to check if you still get the loading glitch you saw below? [image: loadingglitch] https://user-images.githubusercontent.com/17437436/33920048-83d6db98-df81-11e7-8980-b3ad8e314845.png

You can view, comment on, or merge this pull request online at:

https://github.com/gregglind/addon-wr/pull/35 Commit Summary

  • Fix hover effect loading glitch

File Changes

Patch Links:

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/gregglind/addon-wr/pull/35, or mute the thread https://github.com/notifications/unsubscribe-auth/AAKAjwyKm1llLTb9rKuLImZ8ONG9oZfLks5s_0FmgaJpZM4Q_8_m .

biancadanforth commented 6 years ago

Well my claim is that the hover text will never show inline again with this patch. :)

gregglind commented 6 years ago

Try it on dictionary.com :). Let’s see!

On Tue, Dec 12, 2017 at 9:42 PM Bianca Danforth notifications@github.com wrote:

Well my claim is that the hover text will never show inline again with this patch. :)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/gregglind/addon-wr/pull/35#issuecomment-351273507, or mute the thread https://github.com/notifications/unsubscribe-auth/AAKAj0TGydnr_7yxblrtIGqb-AuhaPAtks5s_0esgaJpZM4Q_8_m .

biancadanforth commented 6 years ago

The dictionary.com display issue is not a symptom of the HTML loading before the CSS, which the initial commit was for; it is due to ancestor elements to the inverted word having a style of overflow: hidden. My second commit has a naive and non-comprehensive solution for this type of display issue that does now make the effect display properly on Dictionary.com and Google search result headers. Still not a perfect solution, sadly, as I note in the commit! All incremental improvements though.