KristhianX/essential-buttons-toolbar

Overlapping over a webpage and other add-ons' UI

Closed this issue · 6 comments

MilaMurry commented

I believe this problem stems from the same root, so I'm going to combine them here.

I think this add-on should not overlap the contents and other add-ons' UI. Some pages have a search bar at the top and some even have a toolbar at the bottom like YouTube.
Switching to top/bottom isn't something you want to do often, so hopefully it can fix that in the near future.

Some add-ons that are affected are TWP - Translate Web Pages and Mobile Devtools.

KristhianX commented

Please take a look at this issue.

I don't want to configure site-specific settings for the toolbar; my aim is to make it behave consistently everywhere.

I am planning to have the 'hide toolbar' button minimize or collapse the toolbar into a floating, draggable button. This feature will be optional and likely available as a toolbar position option (top, bottom, hidden or minimized).

Personally, I use the move button, but it seems less practical than I expected. I might consider removing it in the next update, where I will introduce the hide to draggable button option. Please let me know what you think of this approach.

MilaMurry commented

Have you tried adding a margin-top / bottom to the iframe element? My problem here is that the current behavior hides other add-ons that may run on every page like TWP. Who knows if it is running if you can't see it?

I think you want to make it like eruda which is fine.

And if you don't mind, you could try adding a dummy element first with a one-lowered z-index and the same height either on top or over the iframe. I think that would probably fix the issue. 🤔

KristhianX commented

Who knows if it is running if you can't see it?

That is the point of having a bit of transparency.

I think you want to make it like eruda which is fine.

Exactly

And if you don't mind, you could try adding a dummy element first with a one-lowered z-index and the same height either on top or over the iframe. I think that would probably fix the issue. 🤔

Adding a margin is enough. Perhaps, in the future, I could provide an option for users to modify the toolbar CSS.

With a user styles extension (Stylus), you could create a style for all pages like this:

#essBtnsToolbar {
    margin: 42px 0 !important; /* Use the height in your settings */
}

Or in a userscript (not tested):

essBtnsToolbar.style.margin = '42px 0 !important'
KristhianX commented

Hi, I labeled this as a question. Have you tried the suggested workaround of adding a margin with a userstyle or userscript? I'd like to know your opinion.

MilaMurry commented

I did but they didn't work though. Currently I'm setting the body's style like so:

document.head.insertAdjacentHTML('beforeend', '<style>body { margin-bottom: 42px !important }</style>')

It's not that easy for me to test the add-on without being able to sideload it.
I'd suggest adding a class attribute so that it is easier to play with the css for example:

.essBtnsToolbarTop { margin-bottom: 50px !important } /* Toolbar at the top */
.essBtnsToolbarBottom { margin-top: 50px !important } /* At the bottom */

I don't think this is something that can be solved, especially with the other add-ons. My main concern for now is mostly with sites that renders this add-on useless like this and this (nsfw).

You can see the toolbar for a sec and then it's gone for the first site. The latter on the other hand uses the new tech called Permission-Policy header that disables iframes by setting the display to none.

Because I am unable to test it myself, not much else I can do. If I could, I'd use a custom element instead of an iframe, no src (origin issues) and wrap it in a new body like the following:

<html>
    <head> ... </head>
    <body> ... </body>
    <!-- When the toolbar at the bottom. -->
    <body class="essBtnsToolbar" style="margin-top: 42px !important"> <!-- margin-top here? -->
        <essBtnsToolbar ... /> <!-- or maybe here? -->
    </body>
</html>

That's it. Better just close this issue I think. Well, good luck. 👌

  • 👍1
KristhianX commented

Hi! Thanks for your detailed answer 👍

I did but they didn't work though. Currently I'm setting the body's style like so:

I think it is not working because you are using the body as the target instead of #essBtnsToolbar

It's not that easy for me to test the add-on without being able to sideload it.

You are right; sideloading unsigned add-ons on Android should be possible to make testing easier.

My main concern for now is mostly with sites that renders this add-on useless like this and this (nsfw).

Those sites have interesting behaviors. The first one adds a class to the iframe and appends it inside a div, outside the body. The second one, as you mentioned, sets the display to none. I made a couple of changes, and the toolbar should work fine now on both sites. There will be a blink on the first one.

If I could, I'd use a custom element instead of an iframe, no src (origin issues) and wrap it in a new body like the following

I gave it a try, but the style issues are way too much. It is much easier to avoid changes to a single element (iframe) than to all elements, especially commonly used ones like buttons and links.

Thanks for your good work and testing, I really appreciate it. Have a nice day 🤗