1476679 - Can't "inspect element" on twitter backgrounds

Status: RESOLVED WONTFIX

(DevTools :: Inspector, defect)

Description

[MarjaE]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:61.0) Gecko/20100101 Firefox/61.0
Build ID: 20180704003137

Steps to reproduce:

I have sometimes tried to read twitter threads.

I have visual processing issues, so the sheer between the scrolling threads and the non-scrolling background triggers my migraines.


Actual results:

I tried to click on the background to "inspect element," to figure out some way to kill the background and read the threads.

Instead of allowing me to inspect the element, it switched me to another page without the thread.


Expected results:

Ideally, Firefox should allow users to inspect elements.

Web sites should not inflict migraines.

Web sites shouldn't make it impossible to inspect and kil migraine-inducing elements.

Comment 1

[Gingerbread Man]

If I understood correctly, the report should read like this:

STR:
1. https://twitter.com/mozilla/status/1017841591514517504
2. Right-click the dimmed area to the side of the thread in the middle.

Actual results:
The context menu appears, but the thread and the dimming overlay both disappear.

Expected results:
The context menu appears, and the thread and the dimming overlay stay put.

Clear and concise reports help triage and resolve the issue quicker. Please note there's a User Story field if you need to provide additional background about how the bug affects you.
https://developer.mozilla.org/docs/Mozilla/QA/Bug_writing_guidelines


This requires a way to prevent sites from receiving a click event. Doing so would break quite a few sites. You can work around the problem by opening the developer tools either by pressing F12, or by clicking the menu button, then Web Developer, then Inspector.

The following in your userContent.css should do what you want, or at least serve as a staring point:
@-moz-document domain("twitter.com") {
.PermalinkOverlay-with-background { background: white !important; }
}

Comment 2

[Andrew Overholt [:overholt]]

Thanks for the report (and the great triage and clarity, Gingerbread Man)! I'd like to see if DevTools has a plan here.

Comment 3

[Patrick Brosset <:pbro>]

I'm afraid we don't have a plan for this specific issue.
There isn't much DevTools can do if a site listens to the context click event to do things. What Gingerbread Man suggested is great.
Additionally, I would suggest using the following shortcut: ctrl+shift+C (on Windows) or cmd+shift+C (on Mac). It opens DevTools in "pick mode". This means that the inspector will be opened and you will be able to immediately use your mouse to select the element in the page. This is similar to right-clicking on a element and choosing "inspect element", but sort of the other way around.

I'm marking this as WONTFIX for now. Feel free to re-open with other suggestions that could be implemented.

Comment 4

[Gingerbread Man]

(In reply to Patrick Brosset <:pbro> from comment #3)
> There isn't much DevTools can do if a site listens to the context click
> event to do things.

Which is why I'd placed this in Core :: Event Handling.
* Shift+Click displays the default context menu when the site replaces or prevents it. This could be extended to not dispatch the click event to the page.
* An about:config entry could be added to not dispatch click events.
* An entry in the Page Info window - Permissions section could be added to prevent specific sites from receiving click events. It would fit nicely next to "Override Keyboard Shortcuts".

(In reply to Andrew Overholt [:overholt] from comment #2)
> Thanks for the report (and the great triage and clarity, Gingerbread Man)!

You're welcome.