1741736 - Add overlay to Screenshots component implementation

Status: RESOLVED FIXED

(Firefox :: Screenshots, enhancement, P2)

Description

[Sam Foster [:sfoster] (he/him)]

We need to use the anonymous content document, similar to devtool's highlighters here.

You can also reference the prototype I did at D120915 but bear in mind that we have made changes and some different decisions since this was written.

Comment 1

[Sam Foster [:sfoster] (he/him)]

For now the overlay should just set a translucent background color I think, and we should make sure it is correctly destroyed.
The idea at this point is that we shouldn't need any strings. The only UI will be the drag handles and box highlights - any buttons or other strings will be in the parent if we need them.

Comment 2

[Niklas Baumgardner [:niklas]]

Attachment: Bug 1741736 - Add overlay to Screenshots component implementation. r=sfoster!

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/843d1e2cee98
Add overlay to Screenshots component implementation. r=sfoster,fluent-reviewers

Comment 4

[Iulian Moraru]

Backed out for causing mochitest failures on browser_all_files_referenced.js.

Push with failures

Failure log

Backout link

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/fb53fb5009a4
Add overlay to Screenshots component implementation. r=sfoster,fluent-reviewers

Comment 6

[Sandor Molnar[:smolnar]]

Backed out for causing browser-chrome failures in browser_parsable_css.

Backout link: https://hg.mozilla.org/integration/autoland/rev/60bbfbc4cb16d6b603882bc60cba9aa344601bb0

Push with failures

Failure log

 INFO - TEST-UNEXPECTED-FAIL | browser/base/content/test/static/browser_parsable_css.js | Got error message for chrome://browser/content/screenshots/overlay/overlay.css: Unknown pseudo-class or pseudo-element ‘-moz-native-anonymous’.  Ruleset ignored due to bad selector. - 
[task 2022-01-14T15:24:48.069Z] 15:24:48     INFO - Stack trace:
[task 2022-01-14T15:24:48.069Z] 15:24:48     INFO - chrome://mochikit/content/browser-test.js:test_ok:1375
[task 2022-01-14T15:24:48.069Z] 15:24:48     INFO - chrome://mochitests/content/browser/browser/base/content/test/static/browser_parsable_css.js:messageIsCSSError:267
[task 2022-01-14T15:24:48.069Z] 15:24:48     INFO - chrome://mochitests/content/browser/browser/base/content/test/static/browser_parsable_css.js:checkAllTheCSS:502
[task 2022-01-14T15:24:48.069Z] 15:24:48     INFO - Not taking screenshot here: see the one that was previously logged
[task 2022-01-14T15:24:48.070Z] 15:24:48     INFO - TEST-UNEXPECTED-FAIL | browser/base/content/test/static/browser_parsable_css.js | Got error message for chrome://browser/content/screenshots/overlay/overlay.css: Unknown pseudo-class or pseudo-element ‘-moz-native-anonymous’.  Ruleset ignored due to bad selector. - 
[task 2022-01-14T15:24:48.070Z] 15:24:48     INFO - Stack trace:

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/b30500c53be5
Add overlay to Screenshots component implementation. r=sfoster,fluent-reviewers

Comment 8

[Marian-Vasile Laza]

https://hg.mozilla.org/mozilla-central/rev/b30500c53be5