1312146 - Can't "inspect element" on a scrollbar

Status: RESOLVED DUPLICATE of bug 1521712

(DevTools :: Inspector, enhancement, P2)

Description

[MarjaE]

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

Steps to reproduce:

1. Open Google Scholar

2. Encounter mess of overlapping scrollbars, which break my scrolling software

3. Try to "inspect element" on one of the extra scrollbars, in case it revealed anything about the bug.


Actual results:

4. Couldn't "inspect element" on an extra scrollbar.

5. Could on the rest of the page, and clicked on some extra scrollbars, but didn't get different lines.

6. Also got STROBED by the page while trying to do this.


Expected results:

7. Should have been able to inspect what was creating the extra scrollbars.

8. Shouldn't have been STROBED. It hurts. I spent all yesterday in agony after a nasty strobing. It can trigger some people's seizures too.

Comment 1

[Patrick Brosset <:pbro>]

(In reply to MarjaE from comment #0)
> 2. Encounter mess of overlapping scrollbars, which break my scrolling
> software
Could you elaborate a little bit here please? I'm not seeing a mess of scrollbars on this site. But also, I'm not familiar with google scholar nor am I logged in, so I might just be not looking at the right thing.
An isolated HTML test case would be awesome, but in case that's not possible, that's fine, just give more info by what you mean by the mess of overlapping scrollbars.

> 4. Couldn't "inspect element" on an extra scrollbar.
> 
> 5. Could on the rest of the page, and clicked on some extra scrollbars, but
> didn't get different lines.
Could you elaborate here too? I'm assuming that the problem is that you can't select a scrollbar with the inspector tool. But what do you mean by the fact that you "could on the rest of the page"? And what "lines" are you referring to?

I think I understand the problem, let me know if this is correct: on a page with scrollbars, it would be nice if clicking on a scrollbar actually selected the corresponding overflowing element so that it would be easy for someone to then take a look at the CSS rules and size of the element and margins etc. and figure out how to get rid of the scrollbar.
If this description is correct, then I totally agree that that would be useful. Sometimes you have a number of DIVs nested in each other, all having the same size, and it's not easy to find which one actually has the scrollbar. So that would be nice.

> 6. Also got STROBED by the page while trying to do this.
> 8. Shouldn't have been STROBED. It hurts. I spent all yesterday in agony
> after a nasty strobing. It can trigger some people's seizures too.
This is very interesting, but I want to understand what caused this exactly in the inspector. Is the highlighter (the thing that is overlaid on elements in the page to show their sizes/margins/paddings/borders) responsible for the strobing?

Comment 2

[MarjaE]

Attachment: Mess of Overlapping Scrollbars

I don't have a Google Scholar account, this is just how Google scholar displays for me.

Comment 3

[MarjaE]

"I think I understand the problem, let me know if this is correct: on a page with scrollbars, it would be nice if clicking on a scrollbar actually selected the corresponding overflowing element so that it would be easy for someone to then take a look at the CSS rules and size of the element and margins etc. and figure out how to get rid of the scrollbar."

Basically yes, I was hoping to get some idea of what went wrong. I am not really familiar with the inspector though. I've accidentally opened it, but that was about it until then.

"Is the highlighter (the thing that is overlaid on elements in the page to show their sizes/margins/paddings/borders) responsible for the strobing?"

Yes. I know that should be its own bug, especially if we accidentally open it.

Comment 4

[Patrick Brosset <:pbro>]

Thanks MarjaE.

Let's keep this bug for investigating a potential solution to inspecting scrollbars. This would be a very nice layout debugging tool indeed.
Flagging as a P2 enhancement.

I've moved the strobing problem part to bug 1314006.

Comment 5

[Patrick Brosset <:pbro>]

Attachment: scrollbar-support-in-inspector.diff

I'm not planning on working on this now, but I'm starting to spend some time on more layout-debugging tools, and while doing so, I came up with these improvements to the inspector to support scrollbars better.

3 changes:
- by changing the element picker to mouseup rather than click, we can now click on scrollbar areas and receive an event, so we can select the container element by clicking on its scrollbar areas
- in the walker, I'm also returning <scrollbar> nodes (if they are visible). I'm doing this all the time for now, but this should probably be behind a pref.
- related to that, in the NodeActor, I'm filtering pretty much all attributes out for <scrollbar> nodes, to make them simpler looking for users. Also this should be dependent on prefs (if the devtools.inspector.showAllAnonymousContent pref is true, all attributes should be shown).

Comment 6

[Patrick Brosset <:pbro>]

Whoops, looks like I attempted a similar fix in bug 1521712, and didn't even remember that I had done this patch here.
So let me dupe this bug to bug 1521712, and reference the patch there.