New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 806194 link

Starred by 1 user

Issue metadata

Status: Fixed
Owner:
Closed: May 2018
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Windows
Pri: 2
Type: Bug



Sign in to add a comment

DevTools: Unable to view method in object popover when name is too long

Reported by likw...@gmail.com, Jan 26 2018

Issue description

UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36

Steps to reproduce the problem:
Please refer to video attached

What is the expected behavior?

What went wrong?
Unable to view method during debug

Did this work before? N/A 

Chrome version: 63.0.3239.132  Channel: n/a
OS Version: 10.0
Flash Version: Shockwave Flash 28.0 r0
 
2018-01-26_1249.swf
909 KB Download
Labels: Needs-Triage-M63

Comment 2 by l...@chromium.org, Jan 31 2018

Labels: Needs-Feedback
Summary: DevTools: Unable to view method during debug (was: Unable to view method during debug)
Thank you for the screencast.  I was not able to reproduce this issue, unfortunately.  Would you happen to have an open source code that could help us investigate?

Comment 3 by likw...@gmail.com, Feb 1 2018

Hi, this issue reproduces if you try to see in a tooltip large method.
As you see from videos 6s if method content is large it shows 2nd tooltip right above first tooltip and triggers focus out for first one which causes its to disappearance. It is likly to reproduce when dev tools window has reasonable small height like in video.
Project Member

Comment 4 by sheriffbot@chromium.org, Feb 1 2018

Cc: l...@chromium.org
Labels: -Needs-Feedback
Thank you for providing more feedback. Adding requester "luoe@chromium.org" to the cc list and removing "Needs-Feedback" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

Comment 5 by l...@chromium.org, Feb 1 2018

Cc: -l...@chromium.org
Owner: l...@chromium.org
Status: Assigned (was: Unconfirmed)
Summary: DevTools: Unable to view method in object popover when name is too long (was: DevTools: Unable to view method during debug)
Oh!  I see what you mean, I can now reproduce it with a long function name and relatively small DevTools window dimensions.  I'll take a look.
Project Member

Comment 6 by bugdroid1@chromium.org, May 29 2018

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/c68fece6362635a1d14b92c54f330f12d2998e47

commit c68fece6362635a1d14b92c54f330f12d2998e47
Author: Erik Luo <luoe@chromium.org>
Date: Tue May 29 18:41:09 2018

DevTools: avoid covering or hiding popover when tooltip is shown

- Adds 'pointer-events: none' so that hovering a tooltip does not
  cause a popover to blur and disappear.
- Accounts for cursor offset when positioning a tooltip above the
  cursor.
- Trims function tooltips everywhere to 500 chars.

Screenshots:
https://imgur.com/a/8mfMGXA
https://imgur.com/a/aWsRsKX

Bug:  806194 
Change-Id: I64a479aa5d93b10ade286d59957c52df4997851c
Reviewed-on: https://chromium-review.googlesource.com/1072738
Commit-Queue: Erik Luo <luoe@chromium.org>
Reviewed-by: Dmitry Gozman <dgozman@chromium.org>
Cr-Commit-Position: refs/heads/master@{#562521}
[modify] https://crrev.com/c68fece6362635a1d14b92c54f330f12d2998e47/third_party/blink/renderer/devtools/front_end/object_ui/ObjectPropertiesSection.js
[modify] https://crrev.com/c68fece6362635a1d14b92c54f330f12d2998e47/third_party/blink/renderer/devtools/front_end/ui/Tooltip.js
[modify] https://crrev.com/c68fece6362635a1d14b92c54f330f12d2998e47/third_party/blink/renderer/devtools/front_end/ui/tooltip.css

Comment 7 by l...@chromium.org, May 29 2018

Status: Fixed (was: Assigned)
Cc: krajshree@chromium.org
Labels: Needs-Feedback
luoe@ - Could you please provide a sample test file/url to verify the issue from TE-end.

Thanks...!!

Comment 9 by l...@chromium.org, May 30 2018

Sure, here's a repro:
- Open DevTools
- Navigate to https://jsfiddle.net/rdgv2vmj/
- Once DevTools is paused on the 'debugger' line, scroll the code editor until the `function abcdefg()` text is close to the bottom of the window: https://imgur.com/a/VQGE4pC
- Hover the mouse over the function name `abcdefg` until a popover appears
- Hover the mouse on the `f abcdefg` in the popover body, and wait for a gray tooltip to appear

Actual: Upon hovering over the popover body, the tooltip may appear for a few frames then the popover will disappear
Expected: Popover should remain visible

You can also see the repro in action in this: https://imgur.com/a/8mfMGXA

Hope this helps

Sign in to add a comment