Bug 242338

Summary: Web Inspector: Styles: CSS documentation popover is needlessly persistent with broken background
Product: WebKit Reporter: Razvan Caliman <rcaliman>
Component: Web InspectorAssignee: Razvan Caliman <rcaliman>
Status: RESOLVED FIXED    
Severity: Normal CC: inspector-bugzilla-changes, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: WebKit Nightly Build   
Hardware: All   
OS: All   
Attachments:
Description Flags
test case
none
Video of issue none

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.