Bug 128482 - Web Inspector: element details hanger in inspector overlay should have better placement logic
Summary: Web Inspector: element details hanger in inspector overlay should have better...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Normal
Assignee: Matt Baker
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2014-02-08 19:21 PST by BJ Burg
Modified: 2018-05-15 22:30 PDT (History)
8 users (show)

See Also:


Attachments
Patch (2.92 KB, patch)
2018-05-15 18:08 PDT, Matt Baker
no flags Details | Formatted Diff | Diff
[Video] Before (638.77 KB, video/mp4)
2018-05-15 18:17 PDT, Matt Baker
no flags Details
[Video] After (639.90 KB, video/mp4)
2018-05-15 18:17 PDT, Matt Baker
no flags Details
[HTML] Test Page (1.92 KB, text/html)
2018-05-15 18:20 PDT, Matt Baker
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description BJ Burg 2014-02-08 19:21:43 PST
The current implementation only places the hanger with the selected element's class name and dimensions to the right, and mangles the text by wrapping it if it's too far right.

An example of this done correctly is the popovers used in the main web inspector UI.
Comment 1 Radar WebKit Bug Importer 2014-02-08 19:22:18 PST
<rdar://problem/16020709>
Comment 2 Timothy Hatcher 2014-02-10 13:05:09 PST
Yeah, this bugs me. Especially for elements that have a near-zero width or height.
Comment 3 Matt Baker 2018-05-15 18:08:28 PDT
Created attachment 340455 [details]
Patch
Comment 4 Matt Baker 2018-05-15 18:17:23 PDT
Created attachment 340457 [details]
[Video] Before
Comment 5 Matt Baker 2018-05-15 18:17:37 PDT
Created attachment 340458 [details]
[Video] After
Comment 6 Matt Baker 2018-05-15 18:20:19 PDT
Created attachment 340460 [details]
[HTML] Test Page

This test includes eight boxes for testing element selection edge cases.

Boxes 1-4 are aligned with the four corners of the view.
Boxes 5-8 are aligned with the middle of each edge, but offset by their size to be completely outside the view. Hints are shown (each has an edge adjacent with the corresponding offscreen box).
Comment 7 Matt Baker 2018-05-15 18:20:59 PDT
This patch addresses tip positioning, but does not attempt to better position the arrow. That should be left as a follow-up.
Comment 8 WebKit Commit Bot 2018-05-15 22:30:14 PDT
Comment on attachment 340455 [details]
Patch

Clearing flags on attachment: 340455

Committed r231838: <https://trac.webkit.org/changeset/231838>
Comment 9 WebKit Commit Bot 2018-05-15 22:30:16 PDT
All reviewed patches have been landed.  Closing bug.