Skip to content
Browse files
Web Inspector: Styles: Pop-up for resolved CSS variable values is inc…
…onsistent with other pop-ups

Reviewed by Patrick Angle.

Make the pop-up for `WI.InlineSwatch.Type.Variable` consistent with other pop-ups:
- remove animation of dimensions
- remove unnecessary height from container

* Source/WebInspectorUI/UserInterface/Views/InlineSwatch.css:
(.inline-swatch-variable-popover .CodeMirror-sizer):
The CodeMirror document `min-height` is set as an inline style in exact units based on an internal calculation of its contents.
CodeMirror _should have_ respected the `height: auto;` of its host element and grow appropriately:
This didn't happen.

Other solutions suggested by the CodeMirror documentation didn't work in this context either.
As a fix, we resort to deliberately overwrite the inline style with `min-height: fit-content !important`
to force the CodeMirror document to size itself accordingly.

* Source/WebInspectorUI/UserInterface/Views/InlineSwatch.js:

Canonical link:
  • Loading branch information
rcaliman-apple committed Jul 5, 2022
1 parent c923ed2 commit 8109e785685bbda8ff9a6193cd41c86fa14d9a8d
Showing 2 changed files with 7 additions and 1 deletion.
@@ -123,6 +123,11 @@
padding: 0 3px;

.inline-swatch-variable-popover .CodeMirror-sizer {
/* Override min-height set as inline style by CodeMirror which sizes its container disproportionally tall. */
min-height: fit-content !important;

@media (prefers-color-scheme: dark) { > svg,
.inline-swatch.alignment > span {
@@ -342,7 +342,8 @@ WI.InlineSwatch = class InlineSwatch extends WI.Object
readOnly: true,
this._valueEditor.codeMirror.on("update", () => {
const shouldAnimate = false;

0 comments on commit 8109e78

Please sign in to comment.