Fix hover effect loading glitch

[biancadanforth]

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?

[gregglind]

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 ***@***.***> 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 <#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: #35 Commit Summary - Fix hover effect loading glitch File Changes - *M* addon/webextension/background.js <https://github.com/gregglind/addon-wr/pull/35/files#diff-0> (3) - *M* addon/webextension/content-script.js <https://github.com/gregglind/addon-wr/pull/35/files#diff-1> (19) Patch Links: - https://github.com/gregglind/addon-wr/pull/35.patch - https://github.com/gregglind/addon-wr/pull/35.diff — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#35>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAKAjwyKm1llLTb9rKuLImZ8ONG9oZfLks5s_0FmgaJpZM4Q_8_m> .

[biancadanforth]

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

[gregglind]

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

…

On Tue, Dec 12, 2017 at 9:42 PM Bianca Danforth ***@***.***> 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 <#35 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAKAj0TGydnr_7yxblrtIGqb-AuhaPAtks5s_0esgaJpZM4Q_8_m> .

[biancadanforth]

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.