Bug 143862 – Web Inspector: Implement stacktrace popovers

• Component: Web Inspector
• Status: ASSIGNED

[Nikita Vasilyev]

Created attachment 251001 [details]
[Animated GIF] Stacktrace popover

http://timothy.hatcher.name/console/

[Radar WebKit Bug Importer]

<rdar://problem/20582649>

[Nikita Vasilyev]

Do we already have a popover that I can use? The one that is used for a color picker is different as it doesn’t overlay the target and has a pointy arrow instead.

[Timothy Hatcher]

No, we don't have one like this. This one mimics a menu.

[Nikita Vasilyev]

*** Bug 143853 has been marked as a duplicate of this bug. ***

[Timothy Hatcher]

Per our conversation today, we are going to use a <select> like we do for NavigationItems.

[Nikita Vasilyev]

(In reply to comment #5)
> Per our conversation today, we are going to use a <select> like we do for
> NavigationItems.

If select is used, it wouldn’t be possible to just hover over the text and click to go to the source location. E.g. on http://timothy.hatcher.name/console/ I want to be able to hover over initializeBanners, click it, jump to container.html:16.

I'm working on the popover that would look exactly like on your prototype.

[Timothy Hatcher]

Sorry, I didn't intend hover to be the final design. It should be click. If you can make a popover, I would still make it be on mouse down.

[Nikita Vasilyev]

Created attachment 251412 [details]
Timeline stacktrace popover

I’ve been looking to use WebInspector.CallFrameTreeElement for stacktrace popovers in the Console. I’ve noticed it’s already used in the Timeline. Do we want to eventually unify the UI for these two?

[Timothy Hatcher]

Yes, they could use the same UI.

[Nikita Vasilyev]

Created attachment 251548 [details]
[Animated GIF] WIP #1

First take. I reused popover from the Timeline as the quickest solution.

[Nikita Vasilyev]

Created attachment 251549 [details]
Patch

I introduced StackTracePopOver.js and StackTracePopOver.css. It’s based on the current Timeline stacktrace popover. In this patch, it is only used in the console, but the plan is to use it for the Timeline as well.

In this patch, mouse over triggers the popover. I’ll change that, it was the easiest to implement.

Few other problems I’m aware of:
– an extra space at the bottom of the popover
– an empty space on the right side of the list item
– lots of CSS issues

[Timothy Hatcher]

One thing missing from this patch that I would like to see: Function icon and name with location instead of just the location as we have today. I would do that part first. It is what you see right away.

If we go with a popover, hover is likely still correct. Rarely do you have a popover on mouse down. Though I am not too fond of the popover in this case. I would much rather it be a <select> or a menu like UI.

Nit: Popover not PopOver.