Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support for fields in Shadow DOM #273

Open
ziontee113 opened this issue Mar 20, 2023 · 4 comments
Open

Support for fields in Shadow DOM #273

ziontee113 opened this issue Mar 20, 2023 · 4 comments

Comments

@ziontee113
Copy link

Setup

Browser: Firefox
Editor: Neovim

Description

Thank you for the amazing extension. It works pretty much everywhere except for local installation of AUTOMATIC1111 Stable Diffusion WebUI.
https://github.com/AUTOMATIC1111/stable-diffusion-webui

But it does work on https://huggingface.co/spaces/camenduru/webui

I think it has something to do with the way GhostText detects textareas inside this <gradio-app> tag, but I'm not sure.
Screenshot from 2023-03-20 14-17-38

Please tell me which other information I can provide to clarify this issue. Thank you very much.

@fregante fregante changed the title "No supported fields found" error on AUTOMATIC1111 Stable Diffusion WebUI Support for fields in Shadow DOM Mar 20, 2023
@fregante
Copy link
Owner

Indeed it doesn't work when fields are in the Shadow DOM:

@fregante
Copy link
Owner

fregante commented Mar 20, 2023

Those fields don't seem to be easily accessible: https://developer.chrome.com/blog/remove-shadow-piercing/

The only way to find them would be to loop through every element on the page searching for shadow roots, like:

$$('*').flatMap(el => [...el.shadowRoot?.querySelectorAll('textarea')??[]])

This piece of code does find the shadowed textarea at the bottom of the Test page, but it might be expensive to run on large pages. It would be interesting nonetheless. PR welcome (ideally supporting other fields)

for (const element of document.querySelectorAll(selector)) {

Example:

function registerElements(root) {
	for (const element of root.querySelectorAll(selector)) {
		// TODO: Only handle areas that are visible
		//  && element.getBoundingClientRect().width > 20
		if (!knownElements.has(element)) {
			knownElements.set(element, new GhostTextField(element));
		}
	}
}

registerElements(document);
for (const {shadowRoot} of document.querySelectorAll('*')) {
	if (shadowRoot) {
		registerElements(shadowRoot);
	}
}

@ziontee113
Copy link
Author

Thank you for the info. If it's expensive, we could dedicate its own "button". If the user wants to deliberately seek out those shadow elements, they know what they're getting themselves into.

@fregante
Copy link
Owner

fregante commented Feb 11, 2024

A extension API was recently added for this:

But it would only enable access if GhostText already knows which element has a shadow root, I think. So probably it can only detect fields if you right click on them for example, and only in Firefox since it's the only browser that tells you which element was right clicked:

This might eventually be useful if added:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants