conflicts between webextension styles and embedded lib styles in Safari

[balmas]

The problem with the incorrect width of a treebank panel in Safari seems to be the conflict with the old version of the Safari App Extension. Whenever an extension is installed and active, it injects its own CSS stylesheets. Those styles has a higher priority than the styles loaded by the webpage.

In the Safari test, texts-test.alpheios.net was defining the width of the panel as 100% in its own styles (which is correct), but the extension was loading an older stylesheet, where the width is defined as 690px (incorrect). However, because of the higher priority of the extension's styles, 690px value prevailed.

@monzug, can you please verify that this is the case? Please go to Safari's Preferences, select an Extensions tab, and uncheck the box next to the Alpheios reading tools to disable the extension. Then reload the page. This should fix the issue.

Originally posted by @kirlat in https://github.com/alpheios-project/alpheios-core/issues/507#issuecomment-671931926

[balmas]

I think we would like people to be able to have the extension installed and use the texts environment. The extension should be automatically deactivated on a page with the embedded library and it would be better if it didn't load the stylesheets in the page when it's not activated. But maybe this will be resolved automatically if we switch to the web extension api compatible architecture in Safari. We can look into it when we work on that.

[kirlat]

The extension should be automatically deactivated on a page with the embedded library and it would be better if it didn't load the stylesheets in the page when it's not activated.

We can't unload the stylesheets at the current level of technologies. We do deactivate the extension (i.e. call the deactivate() method on the app controller) but that it not enough. In order to remove the extension's stylesheets from the page, we have to disable an extension in the Safari preferences. We cannot do that programmatically now. That makes sense due to security reasons: why would a page (a JS code on a page) be allowed to turn off extensions installed in the browser?

Maybe the new extension architecture will change some things here. Maybe they will not inject stylesheets automatically and will delegate that to the extension's code as in webextensions. But I'm not holding my breath, even though hoping for that secretly 🙂.

If stylesheets injected by the webextension and the app extension are of the same version, we have no problem. Issues start when there is a version mismatch. We maybe can detect that and give user a warning asking him or her to disable the app extension but I'm not sure if it'll make a good UX. We can wait to see how the thing will unfold with the new extension model in Safari 14.