devtools-highlighter icon indicating copy to clipboard operation
devtools-highlighter copied to clipboard

Published 20 hours ago • verified publisher icon captainbrosset

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

Open captainbrosset opened this issue 7 years ago • 4 comments

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 avatar Dec 07 '17 22:12 captainbrosset

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?

captainbrosset avatar Dec 22 '17 11:12 captainbrosset

@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).

rpl avatar Dec 22 '17 12:12 rpl

@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?

rajatvijay avatar Mar 30 '18 13:03 rajatvijay

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 avatar Apr 04 '18 07:04 captainbrosset