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.

Sign up for GitHub

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

Jump to bottom

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

Open
captainbrosset opened this issue Dec 7, 2017 · 4 comments
Open

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

captainbrosset opened this issue Dec 7, 2017 · 4 comments
Labels
enhancement help wanted

Comments

@captainbrosset
Copy link
Owner

captainbrosset commented Dec 7, 2017 •
edited
Loading

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 captainbrosset changed the title Implement a new highlight as a separate layer, like the DevTools one. Turn the highlighter into a separate layer, so it impacts the page less Dec 21, 2017
@captainbrosset
Copy link
Owner Author

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
Copy link

rpl commented Dec 22, 2017

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

@captainbrosset captainbrosset mentioned this issue Mar 21, 2018
Closed
@rajatvijay
Copy link
Contributor

@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
Copy link
Owner Author

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.

@rajatvijay rajatvijay mentioned this issue Apr 5, 2018
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement help wanted
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@rpl @captainbrosset @rajatvijay