Skip to content
Permalink
Browse files
Web Inspector: Styles: CSS documentation popover is needlessly persis…
…tent with broken background

https://bugs.webkit.org/show_bug.cgi?id=242338

Reviewed by Devin Rousso.

Prevent the CSS documentation popover from staying visible when clicking on the CSS value field.
Avoids having multiple popovers shown at the same time as a result of clicking on inline swatches.

The original intent to keep the the documentation popover visible while editing a CSS value was
that a user could reference the syntax section. But the syntax section is not shown  because
most entries are written with specialized identifiers to aid spec implementers, not users.
We don't yet have a solution to make it user-legible so the syntax section remains hidden.

Given this constraint, it doesn't make sense to keep the CSS documentation open while clicking
or typing in the CSS value field.

An implementation side-effect makes the lingering popover background look broken.
Its background is drawn as a CSS image, `background: -webkit-canvas(popover)`, sourced from a shared canvas context:
`document.getCSSCanvasContext("2d", "popover", scaledWidth, scaledHeight)`.

When another popover is shown, it redraws the image on the canvas which is then reflected on all visible popovers.

* Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js:
(WI.SpreadsheetStyleProperty.prototype.willDismissPopover):
(WI.SpreadsheetStyleProperty.prototype._presentCSSDocumentation):

Canonical link: https://commits.webkit.org/252175@main
  • Loading branch information
rcaliman-apple committed Jul 6, 2022
1 parent 04bc9e6 commit a56e4283f9a69844b05317ec64c7f78b4dcf4918
Showing 1 changed file with 0 additions and 3 deletions.
@@ -469,7 +469,6 @@ WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object

willDismissPopover()
{
this._valueElement.classList.remove(WI.Popover.IgnoreAutoDismissClassName);
this._cssDocumentationPopover = null;
}

@@ -581,8 +580,6 @@ WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object
{
this._cssDocumentationPopover ??= new WI.CSSDocumentationPopover(this._property, this);
this._cssDocumentationPopover.show(this._nameElement);
if (this._isEditable())
this._valueElement.classList.add(WI.Popover.IgnoreAutoDismissClassName);
}

_createInlineSwatch(type, contents, valueObject)

0 comments on commit a56e428

Please sign in to comment.