Turn the highlighter into a separate layer, so it impacts the page less

captainbrosset commented 6 years ago

Right now the highlighter (the thing that is displayed in content, to show which elements matched) is using an outline and pseudo-element:

[__devtools_highlighted] {
  outline: 1px solid #f06;
  position: relative;
}

[__devtools_highlighted]::before {
  position: absolute;
  content: "";
  background: #0006;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

It's bad because that means the outline isn't always visible, and these styles may interfere with styles already declared on a particular element.

The idea here would be to draw this highlighter in a separate layer instead. Stick an absolutely positioned element somewhere at the end of the <body> element and use that as the container.

That, in turn, means it's going to be much harder to make the highlighter appear at the right place, but at least it should always work.

captainbrosset commented 6 years ago

Of course, if there was a WebExtension API to just use the built-in DevTools highlighter, that would be awesome too. @rpl do you know if this is something that's on the roadmap for Firefox extensions?

rpl commented 6 years ago

@captainbrosset it is not in the roadmap, but it would be an interesting devtools API to prototype (e.g. to get a better picture about how it could be exposed as a WebExtensions API).

rajatvijay commented 6 years ago

@captainbrosset do you think prototyping an API like the built in devtools highlighter is a good approach to solve this issue? or should we figure out a somthing simpler pertaining just the use case?

captainbrosset commented 6 years ago

I think experimenting with a built-in highlighter API would be really good. In Firefox, there's a way to expose new (non-standard) WebExtension APIs and bundle them in another addon. This way we can play with a new API, and if it turns out to be really useful, make a case for having it added for real to the WebExtension APIs supported in Firefox. There are some docs about this here.

The pros I can see are:

we'd get a proper highlighting API that doesn't require a whole lot of added JS/HTML/CSS complexity in the addon itself,
it would be a good opportunity to experiment and see whether this could be added to Firefox proper,
it can be bundled with the addon, so it's transparent to users.

But there is a drawback:

this can only be used in nightly or dev-edition, which would make the addon not usable on release versions of Firefox.

I think it's still worth trying it out, but obviously requires knowledge of the internals of Firefox and DevTools. It would be better to do this in a separate issue, and I'd be interested in looking at it myself.

So, as a conclusion, in this issue, I think we should continue as planned, by doing something like what I said in the first comment.

captainbrosset / devtools-highlighter

Turn the highlighter into a separate layer, so it impacts the page less #3