Bug 242338 - Web Inspector: Styles: CSS documentation popover is needlessly persistent with broken background
Summary: Web Inspector: Styles: CSS documentation popover is needlessly persistent wit...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: WebKit Nightly Build
Hardware: All All
: P2 Normal
Assignee: Razvan Caliman
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2022-07-05 05:33 PDT by Razvan Caliman
Modified: 2022-07-06 05:50 PDT (History)
2 users (show)

See Also:


Attachments
test case (1.06 KB, text/html)
2022-07-05 05:34 PDT, Razvan Caliman
no flags Details
Video of issue (725.99 KB, video/mp4)
2022-07-05 05:35 PDT, Razvan Caliman
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Razvan Caliman 2022-07-05 05:33:39 PDT
The pop-up for CSS documentation remains visible while clicking in the CSS value field. 
Clicking on an inline swatch in the same value field causes another pop-up to show. 
The CSS documentation pop-up is not hidden automatically. 


Steps to reproduce:
- Load the attached test case
- Inspect the `<body>` element
- In the Styles panel, click the "info" icon next to a CSS declaration to open the CSS documentation pop-up.
- For the same CSS declaration, click the "equals" next to the CSS variable to see its resolved value.


Result:
Both pop-ups are visible.
The documentation pop-up looks broken because its background image is sourced from the same canvas context used for all visible pop-ups.
As the pop-up for an inline swatch is drawn, its background is shared with the other visible pop-up.

```
https://searchfox.org/wubkat/rev/3db59430108ca0e3f01ec4d6ac7adbc8ec6fa7c4/Source/WebInspectorUI/UserInterface/Views/Popover.js#425
```
let context = document.getCSSCanvasContext("2d", "popover", scaledWidth, scaledHeight);
```

https://searchfox.org/wubkat/rev/3db59430108ca0e3f01ec4d6ac7adbc8ec6fa7c4/Source/WebInspectorUI/UserInterface/Views/Popover.css#38
```
.popover {
    ...
    background-image: -webkit-canvas(popover);
}

This shared context is by design: 

https://webkit.org/blog/176/css-canvas-drawing/
"All objects that observe a CSS canvas of the same name are sharing that canvas."
Comment 1 Radar WebKit Bug Importer 2022-07-05 05:34:26 PDT
<rdar://problem/96433005>
Comment 2 Razvan Caliman 2022-07-05 05:34:43 PDT
Created attachment 460678 [details]
test case
Comment 3 Razvan Caliman 2022-07-05 05:35:11 PDT
Created attachment 460679 [details]
Video of issue
Comment 4 Razvan Caliman 2022-07-05 05:59:34 PDT
Pull request: https://github.com/WebKit/WebKit/pull/2076
Comment 5 EWS 2022-07-06 05:50:52 PDT
Committed 252175@main (a56e4283f9a6): <https://commits.webkit.org/252175@main>

Reviewed commits have been landed. Closing PR #2076 and removing active labels.