ASSIGNED 143862
Web Inspector: Implement stacktrace popovers 
https://bugs.webkit.org/show_bug.cgi?id=143862
Summary Web Inspector: Implement stacktrace popovers
Nikita Vasilyev
Reported 2015-04-16 21:32:11 PDT
Created attachment 251001 [details] [Animated GIF] Stacktrace popover http://timothy.hatcher.name/console/
Attachments
[Animated GIF] Stacktrace popover (135.46 KB, image/gif)
2015-04-16 21:32 PDT, Nikita Vasilyev 		no flags
Details
Timeline stacktrace popover (72.12 KB, image/png)
2015-04-22 23:37 PDT, Nikita Vasilyev 		no flags
Details
[Animated GIF] WIP #1 (1.01 MB, image/gif)
2015-04-24 06:45 PDT, Nikita Vasilyev 		no flags
Details
Patch (13.16 KB, patch)
2015-04-24 07:01 PDT, Nikita Vasilyev 		nvasilyev: review-
nvasilyev: commit-queue-
DetailsFormatted DiffDiff
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2015-04-16 21:32:57 PDT
<rdar://problem/20582649>
Nikita Vasilyev
Comment 2 2015-04-19 21:24:44 PDT
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
Comment 3 2015-04-20 03:05:20 PDT
No, we don't have one like this. This one mimics a menu.
Nikita Vasilyev
Comment 4 2015-04-20 16:58:47 PDT
*** Bug 143853 has been marked as a duplicate of this bug. ***
Timothy Hatcher
Comment 5 2015-04-21 17:34:24 PDT
Per our conversation today, we are going to use a <select> like we do for NavigationItems.
Nikita Vasilyev
Comment 6 2015-04-22 18:01:39 PDT
(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
Comment 7 2015-04-22 21:14:26 PDT
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
Comment 8 2015-04-22 23:37:28 PDT
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
Comment 9 2015-04-23 04:27:10 PDT
Yes, they could use the same UI.
Nikita Vasilyev
Comment 10 2015-04-24 06:45:25 PDT
Created attachment 251548 [details] [Animated GIF] WIP #1 First take. I reused popover from the Timeline as the quickest solution.
Nikita Vasilyev
Comment 11 2015-04-24 07:01:17 PDT
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
Comment 12 2015-04-24 13:41:14 PDT
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.
Note You need to log in before you can comment on or make changes to this bug.