Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (285982 => 285983)
--- trunk/Source/WebInspectorUI/ChangeLog 2021-11-18 06:26:50 UTC (rev 285982)
+++ trunk/Source/WebInspectorUI/ChangeLog 2021-11-18 07:18:04 UTC (rev 285983)
@@ -1,3 +1,56 @@
+2021-11-17 Nikita Vasilyev <nvasil...@apple.com>
+
+ Web Inspector: Add a swatch for align-content
+ https://bugs.webkit.org/show_bug.cgi?id=230065
+ <rdar://problem/82891361>
+
+ Reviewed by Devin Rousso.
+
+ Introduce an inline swatch for `align-content`, that shows icons for common align-content values:
+ start, center, end, space-between, space-around, space-evenly, and stretch.
+
+ * UserInterface/Images/AlignmentCenter.svg: Added.
+ * UserInterface/Images/AlignmentEnd.svg: Added.
+ * UserInterface/Images/AlignmentSpaceAround.svg: Added.
+ * UserInterface/Images/AlignmentSpaceBetween.svg: Added.
+ * UserInterface/Images/AlignmentSpaceEvenly.svg: Added.
+ * UserInterface/Images/AlignmentStart.svg: Added.
+ * UserInterface/Images/AlignmentStretch.svg: Added.
+ * UserInterface/Images/AlignmentUnknown.svg: Added.
+
+ * UserInterface/Main.html:
+ * UserInterface/Views/AlignmentEditor.css: Added.
+ (.alignment-editor .glyph):
+ (.alignment-editor .glyph:not(:last-child)):
+ (.alignment-editor .glyph:active):
+ (.alignment-editor .glyph.selected):
+ (.alignment-editor .glyph.selected + .glyph):
+ (.alignment-editor .glyph.selected:active):
+
+ * UserInterface/Views/AlignmentEditor.js: Added.
+ (WI.AlignmentEditor):
+ (WI.AlignmentEditor.isAlignContentValue):
+ (WI.AlignmentEditor.prototype.get element):
+ (WI.AlignmentEditor.prototype.get value):
+ (WI.AlignmentEditor.prototype.set value):
+ (WI.AlignmentEditor.prototype._updateSelected):
+
+ * UserInterface/Views/InlineSwatch.css:
+ (.inline-swatch:not(.read-only):matches(.bezier, .box-shadow, .spring, .variable, .alignment):hover):
+ (.inline-swatch:not(.read-only):matches(.bezier, .box-shadow, .spring, .variable, .alignment):active):
+ (.inline-swatch:is(.image, .alignment) > span):
+ (@media (prefers-color-scheme: dark) .inline-swatch.box-shadow > svg,):
+
+ * UserInterface/Views/InlineSwatch.js:
+ (WI.InlineSwatch):
+ (WI.InlineSwatch.prototype.didDismissPopover):
+ (WI.InlineSwatch.prototype._updateSwatch):
+ (WI.InlineSwatch.prototype._valueEditorValueDidChange):
+
+ * UserInterface/Views/SpreadsheetStyleProperty.js:
+ (WI.SpreadsheetStyleProperty.prototype._replaceSpecialTokens):
+ (WI.SpreadsheetStyleProperty.prototype._addAlignmentTokens):
+
2021-11-17 Devin Rousso <drou...@apple.com>
Web Inspector: assertion failures in `WI.GridOverlayConfigurationDiagnosticEventRecorder`
Added: trunk/Source/WebInspectorUI/UserInterface/Images/AlignmentCenter.svg (0 => 285983)
--- trunk/Source/WebInspectorUI/UserInterface/Images/AlignmentCenter.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/AlignmentCenter.svg 2021-11-18 07:18:04 UTC (rev 285983)
@@ -0,0 +1,5 @@
+<!-- Copyright © 2021 Apple Inc. All rights reserved. -->
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" id="root">
+ <rect x="2" y="8" width="12" height="2" fill="currentColor"/>
+ <rect x="2" y="5" width="12" height="2" fill="currentColor"/>
+</svg>
Added: trunk/Source/WebInspectorUI/UserInterface/Images/AlignmentEnd.svg (0 => 285983)
--- trunk/Source/WebInspectorUI/UserInterface/Images/AlignmentEnd.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/AlignmentEnd.svg 2021-11-18 07:18:04 UTC (rev 285983)
@@ -0,0 +1,5 @@
+<!-- Copyright © 2021 Apple Inc. All rights reserved. -->
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" id="root">
+ <rect x="2" y="9.5" width="12" height="2" fill="currentColor"/>
+ <rect x="2" y="12.5" width="12" height="2" fill="currentColor"/>
+</svg>
Added: trunk/Source/WebInspectorUI/UserInterface/Images/AlignmentSpaceAround.svg (0 => 285983)
--- trunk/Source/WebInspectorUI/UserInterface/Images/AlignmentSpaceAround.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/AlignmentSpaceAround.svg 2021-11-18 07:18:04 UTC (rev 285983)
@@ -0,0 +1,5 @@
+<!-- Copyright © 2021 Apple Inc. All rights reserved. -->
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" id="root">
+ <rect x="2" y="3" width="12" height="2" fill="currentColor"/>
+ <rect x="2" y="11" width="12" height="2" fill="currentColor"/>
+</svg>
Added: trunk/Source/WebInspectorUI/UserInterface/Images/AlignmentSpaceBetween.svg (0 => 285983)
--- trunk/Source/WebInspectorUI/UserInterface/Images/AlignmentSpaceBetween.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/AlignmentSpaceBetween.svg 2021-11-18 07:18:04 UTC (rev 285983)
@@ -0,0 +1,5 @@
+<!-- Copyright © 2021 Apple Inc. All rights reserved. -->
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" id="root">
+ <rect x="2" y="1" width="12" height="2" fill="currentColor"/>
+ <rect x="2" y="12.5" width="12" height="2" fill="currentColor"/>
+</svg>
Added: trunk/Source/WebInspectorUI/UserInterface/Images/AlignmentSpaceEvenly.svg (0 => 285983)
--- trunk/Source/WebInspectorUI/UserInterface/Images/AlignmentSpaceEvenly.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/AlignmentSpaceEvenly.svg 2021-11-18 07:18:04 UTC (rev 285983)
@@ -0,0 +1,5 @@
+<!-- Copyright © 2021 Apple Inc. All rights reserved. -->
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" id="root">
+ <rect x="2" y="4" width="12" height="2" fill="currentColor"/>
+ <rect x="2" y="10" width="12" height="2" fill="currentColor"/>
+</svg>
Added: trunk/Source/WebInspectorUI/UserInterface/Images/AlignmentStart.svg (0 => 285983)
--- trunk/Source/WebInspectorUI/UserInterface/Images/AlignmentStart.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/AlignmentStart.svg 2021-11-18 07:18:04 UTC (rev 285983)
@@ -0,0 +1,5 @@
+<!-- Copyright © 2021 Apple Inc. All rights reserved. -->
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" id="root">
+ <rect x="2" y="1" width="12" height="2" fill="currentColor"/>
+ <rect x="2" y="4" width="12" height="2" fill="currentColor"/>
+</svg>
Added: trunk/Source/WebInspectorUI/UserInterface/Images/AlignmentStretch.svg (0 => 285983)
--- trunk/Source/WebInspectorUI/UserInterface/Images/AlignmentStretch.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/AlignmentStretch.svg 2021-11-18 07:18:04 UTC (rev 285983)
@@ -0,0 +1,5 @@
+<!-- Copyright © 2021 Apple Inc. All rights reserved. -->
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" id="root">
+ <rect x="2" y="1" width="12" height="6.5" fill="currentColor"/>
+ <rect x="2" y="8" width="12" height="6.5" fill="currentColor"/>
+</svg>
Added: trunk/Source/WebInspectorUI/UserInterface/Images/AlignmentUnknown.svg (0 => 285983)
--- trunk/Source/WebInspectorUI/UserInterface/Images/AlignmentUnknown.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/AlignmentUnknown.svg 2021-11-18 07:18:04 UTC (rev 285983)
@@ -0,0 +1,7 @@
+<!-- Copyright © 2021 Apple Inc. All rights reserved. -->
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" id="root">
+ <rect x="2" y="2" width="4" height="6" fill="black"/>
+ <rect x="8" y="2" width="6" height="6" fill="black"/>
+ <rect x="10" y="10" width="4" height="4" fill="black"/>
+ <rect x="2" y="10" width="6" height="4" fill="black"/>
+</svg>
Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (285982 => 285983)
--- trunk/Source/WebInspectorUI/UserInterface/Main.html 2021-11-18 06:26:50 UTC (rev 285982)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html 2021-11-18 07:18:04 UTC (rev 285983)
@@ -34,6 +34,7 @@
<link rel="stylesheet" href=""
+ <link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
@@ -618,6 +619,7 @@
<script src=""
<script src=""
+ <script src=""
<script src=""
<script src=""
<script src=""
Added: trunk/Source/WebInspectorUI/UserInterface/Views/AlignmentEditor.css (0 => 285983)
--- trunk/Source/WebInspectorUI/UserInterface/Views/AlignmentEditor.css (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/AlignmentEditor.css 2021-11-18 07:18:04 UTC (rev 285983)
@@ -0,0 +1,56 @@
+/*
+ * Copyright (C) 2021 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.alignment-editor .glyph {
+ display: inline-block;
+ width: 16px;
+ height: 16px;
+ background-color: var(--background-color-content);
+ box-sizing: content-box;
+ border: 1px solid var(--border-color);
+ color: var(--glyph-color);
+}
+
+.alignment-editor .glyph:not(:last-child) {
+ border-inline-end-width: 0;
+}
+
+.alignment-editor .glyph:active {
+ color: var(--glyph-color-pressed);
+}
+
+.alignment-editor .glyph.selected {
+ color: var(--glyph-color-active);
+ border-color: var(--glyph-color-active);
+}
+
+.alignment-editor .glyph.selected + .glyph {
+ border-inline-start-color: var(--glyph-color-active);
+}
+
+.alignment-editor .glyph.selected:active {
+ color: var(--glyph-color-active-pressed);
+ outline-color: var(--glyph-color-active-pressed);
+}
Added: trunk/Source/WebInspectorUI/UserInterface/Views/AlignmentEditor.js (0 => 285983)
--- trunk/Source/WebInspectorUI/UserInterface/Views/AlignmentEditor.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/AlignmentEditor.js 2021-11-18 07:18:04 UTC (rev 285983)
@@ -0,0 +1,105 @@
+/*
+ * Copyright (C) 2021 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WI.AlignmentEditor = class AlignmentEditor extends WI.Object
+{
+ constructor()
+ {
+ super();
+
+ this._value = null;
+ this._valueToGlyphElement = new Map;
+
+ this._element = document.createElement("div");
+ this._element.className = "alignment-editor";
+
+ // FIXME: <https://webkit.org/b/233053> Web Inspector: mirror/rotate alignment icons when flex-direction/grid-auto-flow/RTL affect axis or direction
+ for (let [value, path] of Object.entries(WI.AlignmentEditor.ValueGlyphs)) {
+ let glyphElement = WI.ImageUtilities.useSVGSymbol(path, "glyph", value);
+ this._element.append(glyphElement);
+ glyphElement.addEventListener("click", () => {
+ this.dispatchEventToListeners(WI.AlignmentEditor.Event.ValueChanged, {value});
+ this.value = value;
+ });
+ this._valueToGlyphElement.set(value, glyphElement);
+ }
+ this._updateSelected();
+ }
+
+ // Static
+
+ static isAlignContentValue(value)
+ {
+ return WI.AlignmentEditor.ValueGlyphs.hasOwnProperty(value);
+ }
+
+ // Public
+
+ get element() { return this._element; }
+
+ get value()
+ {
+ return this._value;
+ }
+
+ set value(value)
+ {
+ if (this._value && WI.AlignmentEditor.isAlignContentValue(this._value)) {
+ let previousGlyphElement = this._valueToGlyphElement.get(this._value);
+ previousGlyphElement.classList.remove("selected");
+ }
+ this._value = value;
+ this._updateSelected();
+ }
+
+ // Private
+
+ _updateSelected()
+ {
+ if (!this._value || !WI.AlignmentEditor.isAlignContentValue(this._value))
+ return;
+
+ let glyphElement = this._valueToGlyphElement.get(this._value);
+ glyphElement.classList.add("selected");
+ }
+};
+
+// FIXME: <https://webkit.org/b/233054> Web Inspector: Add a swatch for align-items and align-self
+// FIXME: <https://webkit.org/b/233055> Web Inspector: Add a swatch for justify-content, justify-items, and justify-self
+WI.AlignmentEditor.ValueGlyphs = {
+ "start": "Images/AlignmentStart.svg",
+ "center": "Images/AlignmentCenter.svg",
+ "end": "Images/AlignmentEnd.svg",
+ "space-between": "Images/AlignmentSpaceBetween.svg",
+ "space-around": "Images/AlignmentSpaceAround.svg",
+ "space-evenly": "Images/AlignmentSpaceEvenly.svg",
+ "stretch": "Images/AlignmentStretch.svg",
+};
+
+WI.AlignmentEditor.UnknownValueGlyph = "Images/AlignmentUnknown.svg";
+
+WI.AlignmentEditor.Event = {
+ ValueChanged: "alignment-editor-value-changed",
+};
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.css (285982 => 285983)
--- trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.css 2021-11-18 06:26:50 UTC (rev 285982)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.css 2021-11-18 07:18:04 UTC (rev 285983)
@@ -58,11 +58,11 @@
margin-right: 2px;
}
-.inline-swatch:not(.read-only):matches(.bezier, .box-shadow, .spring, .variable):hover {
+.inline-swatch:not(.read-only):matches(.bezier, .box-shadow, .spring, .variable, .alignment):hover {
filter: brightness(0.9);
}
-.inline-swatch:not(.read-only):matches(.bezier, .box-shadow, .spring, .variable):active {
+.inline-swatch:not(.read-only):matches(.bezier, .box-shadow, .spring, .variable, .alignment):active {
filter: brightness(0.8);
}
@@ -98,7 +98,7 @@
display: none;
}
-.inline-swatch.image > span {
+.inline-swatch:is(.image, .alignment) > span {
background-size: cover;
background-repeat: no-repeat;
}
@@ -120,7 +120,8 @@
}
@media (prefers-color-scheme: dark) {
- .inline-swatch.box-shadow > svg {
+ .inline-swatch.box-shadow > svg,
+ .inline-swatch.alignment > span {
filter: invert();
}
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.js (285982 => 285983)
--- trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.js 2021-11-18 06:26:50 UTC (rev 285982)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.js 2021-11-18 07:18:04 UTC (rev 285983)
@@ -70,6 +70,10 @@
// Handled later by _updateSwatch.
break;
+ case WI.InlineSwatch.Type.Alignment:
+ // Handled later by _updateSwatch.
+ break;
+
case WI.InlineSwatch.Type.Gradient:
this._swatchElement.title = WI.UIString("Edit custom gradient");
break;
@@ -151,6 +155,8 @@
this._valueEditor.removeEventListener(WI.GradientEditor.Event.GradientChanged, this._valueEditorValueDidChange, this);
else if (this._valueEditor instanceof WI.SpringEditor)
this._valueEditor.removeEventListener(WI.SpringEditor.Event.SpringChanged, this._valueEditorValueDidChange, this);
+ else if (this._valueEditor instanceof WI.AlignmentEditor)
+ this._valueEditor.removeEventListener(WI.AlignmentEditor.Event.ValueChanged, this._valueEditorValueDidChange, this);
this._valueEditor = null;
@@ -181,16 +187,26 @@
{
let value = this.value;
- if (this._type === WI.InlineSwatch.Type.Color || this._type === WI.InlineSwatch.Type.Gradient)
- this._swatchInnerElement.style.background = "" ? value.toString() : null;
- else if (this._type === WI.InlineSwatch.Type.Image)
- this._swatchInnerElement.style.setProperty("background-image", `url(${value.src})`);
-
- if (this._type === WI.InlineSwatch.Type.Color) {
+ switch (this._type) {
+ case WI.InlineSwatch.Type.Color:
if (this._allowChangingColorFormats())
this._swatchElement.title = WI.UIString("Click to select a color\nShift-click to switch color formats");
else
this._swatchElement.title = WI.UIString("Click to select a color");
+ // fallthrough
+
+ case WI.InlineSwatch.Type.Gradient:
+ this._swatchInnerElement.style.background = "" ? value.toString() : null;
+ break;
+
+ case WI.InlineSwatch.Type.Image:
+ this._swatchInnerElement.style.setProperty("background-image", `url(${value.src})`);
+ break;
+
+ case WI.InlineSwatch.Type.Alignment:
+ let glyphPath = WI.AlignmentEditor.ValueGlyphs[value] || WI.AlignmentEditor.UnknownValueGlyph;
+ this._swatchInnerElement.style.backgroundImage = `url(${glyphPath})`;
+ break;
}
if (!dontFireEvents)
@@ -285,6 +301,13 @@
this._valueEditor.addEventListener(WI.SpringEditor.Event.SpringChanged, this._valueEditorValueDidChange, this);
break;
+ case WI.InlineSwatch.Type.Alignment:
+ // FIXME: <https://webkit.org/b/233054> Web Inspector: Add a swatch for align-items and align-self
+ // FIXME: <https://webkit.org/b/233055> Web Inspector: Add a swatch for justify-content, justify-items, and justify-self
+ this._valueEditor = new WI.AlignmentEditor;
+ this._valueEditor.addEventListener(WI.AlignmentEditor.Event.ValueChanged, this._valueEditorValueDidChange, this);
+ break;
+
case WI.InlineSwatch.Type.Variable:
this._valueEditor = {};
@@ -331,6 +354,10 @@
this._valueEditor.spring = value;
break;
+ case WI.InlineSwatch.Type.Alignment:
+ this._valueEditor.value = value;
+ break;
+
case WI.InlineSwatch.Type.Variable: {
let codeMirror = this._valueEditor.codeMirror;
codeMirror.setValue(value);
@@ -376,6 +403,10 @@
case WI.InlineSwatch.Type.Spring:
this._value = event.data.spring;
break;
+
+ case WI.InlineSwatch.Type.Alignment:
+ this._value = event.data.value;
+ break;
}
this._updateSwatch();
@@ -525,6 +556,7 @@
Spring: "inline-swatch-type-spring",
Variable: "inline-swatch-type-variable",
Image: "inline-swatch-type-image",
+ Alignment: "inline-swatch-type-alignment",
};
WI.InlineSwatch.Event = {
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js (285982 => 285983)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js 2021-11-18 06:26:50 UTC (rev 285982)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js 2021-11-18 07:18:04 UTC (rev 285983)
@@ -627,10 +627,15 @@
_replaceSpecialTokens(tokens)
{
// FIXME: <https://webkit.org/b/178636> Web Inspector: Styles: Make inline widgets work with CSS functions (var(), calc(), etc.)
+ // FIXME: <https://webkit.org/b/233054> Web Inspector: Add a swatch for align-items and align-self
+ // FIXME: <https://webkit.org/b/233055> Web Inspector: Add a swatch for justify-content, justify-items, and justify-self
if (this._property.name === "box-shadow")
return this._addBoxShadowTokens(tokens);
+ if (this._property.name === "align-content")
+ return this._addAlignmentTokens(tokens);
+
if (this._property.isVariable || WI.CSSKeywordCompletions.isColorAwareProperty(this._property.name)) {
tokens = this._addGradientTokens(tokens);
tokens = this._addColorTokens(tokens);
@@ -844,6 +849,14 @@
return newTokens;
}
+ _addAlignmentTokens(tokens)
+ {
+ // FIXME: <https://webkit.org/b/233281> Web Inspector: Alignment swatch should handle multi-token values better
+ let text = this._resolveVariables(tokens.map((token) => token.value).join(""));
+ let swatch = this._createInlineSwatch(WI.InlineSwatch.Type.Alignment, this._addVariableTokens(tokens), text);
+ return [swatch];
+ }
+
_addVariableTokens(tokens)
{
let newTokens = [];
