Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (286874 => 286875)
--- trunk/Source/WebInspectorUI/ChangeLog 2021-12-10 21:56:07 UTC (rev 286874)
+++ trunk/Source/WebInspectorUI/ChangeLog 2021-12-10 22:01:57 UTC (rev 286875)
@@ -1,3 +1,61 @@
+2021-12-10 Nikita Vasilyev <nvasil...@apple.com>
+
+ Web Inspector: Add a swatch for align-items and align-self
+ https://bugs.webkit.org/show_bug.cgi?id=233054
+ <rdar://problem/85613199>
+
+ Reviewed by Devin Rousso.
+
+ Introduce inline swatches for `align-items` and `align-self`, that shows icons for common values:
+ start, center, end, and stretch.
+
+ * UserInterface/Images/AlignContentCenter.svg: Renamed from Source/WebInspectorUI/UserInterface/Images/AlignmentCenter.svg.
+ * UserInterface/Images/AlignContentEnd.svg: Renamed from Source/WebInspectorUI/UserInterface/Images/AlignmentEnd.svg.
+ * UserInterface/Images/AlignContentSpaceAround.svg: Renamed from Source/WebInspectorUI/UserInterface/Images/AlignmentSpaceAround.svg.
+ * UserInterface/Images/AlignContentSpaceBetween.svg: Renamed from Source/WebInspectorUI/UserInterface/Images/AlignmentSpaceBetween.svg.
+ * UserInterface/Images/AlignContentSpaceEvenly.svg: Renamed from Source/WebInspectorUI/UserInterface/Images/AlignmentSpaceEvenly.svg.
+ * UserInterface/Images/AlignContentStart.svg: Renamed from Source/WebInspectorUI/UserInterface/Images/AlignmentStart.svg.
+ * UserInterface/Images/AlignContentStretch.svg: Renamed from Source/WebInspectorUI/UserInterface/Images/AlignmentStretch.svg.
+ Rename icons from Alignment to AlignContent since they are only used for `align-content` CSS property now.
+
+ * UserInterface/Images/AlignItemsCenter.svg: Added.
+ * UserInterface/Images/AlignItemsEnd.svg: Added.
+ * UserInterface/Images/AlignItemsStart.svg: Added.
+ * UserInterface/Images/AlignItemsStretch.svg: Added.
+ * UserInterface/Main.html:
+ * UserInterface/Models/AlignmentData.js: Added.
+
+ (WI.AlignmentData):
+ (WI.AlignmentData.isAlignmentAwarePropertyName):
+ (WI.AlignmentData._propertyNameToType):
+ (WI.AlignmentData.prototype.get type):
+ (WI.AlignmentData.prototype.get text):
+ (WI.AlignmentData.prototype.set text):
+ (WI.AlignmentData.prototype.toString):
+ Introduce a model object to be more consistent with the rest of the inline swatches.
+
+ * UserInterface/Views/AlignmentEditor.js:
+ (WI.AlignmentEditor):
+ Allow AlignmentEditor to work with more than one CSS property (i.e. align-content), by introducing propertyName argument.
+
+ (WI.AlignmentEditor.glyphPath):
+ (WI.AlignmentEditor._glyphsForType):
+ (WI.AlignmentEditor.prototype.get alignment):
+ (WI.AlignmentEditor.prototype.set alignment):
+ Rename `value` to `alignment` to be more consistent with the rest of the editors.
+
+ (WI.AlignmentEditor.prototype._removePreviouslySelected):
+ (WI.AlignmentEditor.prototype._updateSelected):
+ (WI.AlignmentEditor.isAlignContentValue): Deleted.
+ (WI.AlignmentEditor.prototype.get value): Deleted.
+ (WI.AlignmentEditor.prototype.set value): Deleted.
+ * UserInterface/Views/InlineSwatch.js:
+ (WI.InlineSwatch.prototype._updateSwatch):
+ (WI.InlineSwatch.prototype._valueEditorValueDidChange):
+ * UserInterface/Views/SpreadsheetStyleProperty.js:
+ (WI.SpreadsheetStyleProperty.prototype._replaceSpecialTokens):
+ (WI.SpreadsheetStyleProperty.prototype._addAlignmentTokens):
+
2021-12-10 Razvan Caliman <rcali...@apple.com>
Web Inspector: Extract a specialized CSSNameCompletions from CSSCompletions
Copied: trunk/Source/WebInspectorUI/UserInterface/Images/AlignContentCenter.svg (from rev 286874, trunk/Source/WebInspectorUI/UserInterface/Images/AlignmentCenter.svg) (0 => 286875)
--- trunk/Source/WebInspectorUI/UserInterface/Images/AlignContentCenter.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/AlignContentCenter.svg 2021-12-10 22:01:57 UTC (rev 286875)
@@ -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>
Copied: trunk/Source/WebInspectorUI/UserInterface/Images/AlignContentEnd.svg (from rev 286874, trunk/Source/WebInspectorUI/UserInterface/Images/AlignmentEnd.svg) (0 => 286875)
--- trunk/Source/WebInspectorUI/UserInterface/Images/AlignContentEnd.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/AlignContentEnd.svg 2021-12-10 22:01:57 UTC (rev 286875)
@@ -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>
Copied: trunk/Source/WebInspectorUI/UserInterface/Images/AlignContentSpaceAround.svg (from rev 286874, trunk/Source/WebInspectorUI/UserInterface/Images/AlignmentSpaceAround.svg) (0 => 286875)
--- trunk/Source/WebInspectorUI/UserInterface/Images/AlignContentSpaceAround.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/AlignContentSpaceAround.svg 2021-12-10 22:01:57 UTC (rev 286875)
@@ -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>
Copied: trunk/Source/WebInspectorUI/UserInterface/Images/AlignContentSpaceBetween.svg (from rev 286874, trunk/Source/WebInspectorUI/UserInterface/Images/AlignmentSpaceBetween.svg) (0 => 286875)
--- trunk/Source/WebInspectorUI/UserInterface/Images/AlignContentSpaceBetween.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/AlignContentSpaceBetween.svg 2021-12-10 22:01:57 UTC (rev 286875)
@@ -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>
Copied: trunk/Source/WebInspectorUI/UserInterface/Images/AlignContentSpaceEvenly.svg (from rev 286874, trunk/Source/WebInspectorUI/UserInterface/Images/AlignmentSpaceEvenly.svg) (0 => 286875)
--- trunk/Source/WebInspectorUI/UserInterface/Images/AlignContentSpaceEvenly.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/AlignContentSpaceEvenly.svg 2021-12-10 22:01:57 UTC (rev 286875)
@@ -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>
Copied: trunk/Source/WebInspectorUI/UserInterface/Images/AlignContentStart.svg (from rev 286874, trunk/Source/WebInspectorUI/UserInterface/Images/AlignmentStart.svg) (0 => 286875)
--- trunk/Source/WebInspectorUI/UserInterface/Images/AlignContentStart.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/AlignContentStart.svg 2021-12-10 22:01:57 UTC (rev 286875)
@@ -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>
Copied: trunk/Source/WebInspectorUI/UserInterface/Images/AlignContentStretch.svg (from rev 286874, trunk/Source/WebInspectorUI/UserInterface/Images/AlignmentStretch.svg) (0 => 286875)
--- trunk/Source/WebInspectorUI/UserInterface/Images/AlignContentStretch.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/AlignContentStretch.svg 2021-12-10 22:01:57 UTC (rev 286875)
@@ -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/AlignItemsCenter.svg (0 => 286875)
--- trunk/Source/WebInspectorUI/UserInterface/Images/AlignItemsCenter.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/AlignItemsCenter.svg 2021-12-10 22:01:57 UTC (rev 286875)
@@ -0,0 +1,6 @@
+<!-- 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="3" y="4" width="4" height="7" fill="currentColor"/>
+ <rect x="9" y="3" width="4" height="9" fill="currentColor"/>
+ <rect y="7" width="16" height="1" fill="currentColor"/>
+</svg>
Added: trunk/Source/WebInspectorUI/UserInterface/Images/AlignItemsEnd.svg (0 => 286875)
--- trunk/Source/WebInspectorUI/UserInterface/Images/AlignItemsEnd.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/AlignItemsEnd.svg 2021-12-10 22:01:57 UTC (rev 286875)
@@ -0,0 +1,6 @@
+<!-- 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="3" y="7" width="4" height="6" fill="currentColor"/>
+ <rect x="9" y="5" width="4" height="8" fill="currentColor"/>
+ <rect y="13" width="16" height="1" fill="currentColor"/>
+</svg>
Added: trunk/Source/WebInspectorUI/UserInterface/Images/AlignItemsStart.svg (0 => 286875)
--- trunk/Source/WebInspectorUI/UserInterface/Images/AlignItemsStart.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/AlignItemsStart.svg 2021-12-10 22:01:57 UTC (rev 286875)
@@ -0,0 +1,6 @@
+<!-- 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="3" y="2" width="4" height="8" fill="currentColor"/>
+ <rect x="9" y="2" width="4" height="10" fill="currentColor"/>
+ <rect y="2" width="16" height="1" fill="currentColor"/>
+</svg>
Added: trunk/Source/WebInspectorUI/UserInterface/Images/AlignItemsStretch.svg (0 => 286875)
--- trunk/Source/WebInspectorUI/UserInterface/Images/AlignItemsStretch.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/AlignItemsStretch.svg 2021-12-10 22:01:57 UTC (rev 286875)
@@ -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="3" y="3" width="4" height="10" fill="currentColor"/>
+ <rect x="9" y="3" width="4" height="10" fill="currentColor"/>
+ <rect y="13" width="16" height="1" fill="currentColor"/>
+ <rect y="2" width="16" height="1" fill="currentColor"/>
+</svg>
Deleted: trunk/Source/WebInspectorUI/UserInterface/Images/AlignmentCenter.svg (286874 => 286875)
--- trunk/Source/WebInspectorUI/UserInterface/Images/AlignmentCenter.svg 2021-12-10 21:56:07 UTC (rev 286874)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/AlignmentCenter.svg 2021-12-10 22:01:57 UTC (rev 286875)
@@ -1,5 +0,0 @@
-<!-- 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>
Deleted: trunk/Source/WebInspectorUI/UserInterface/Images/AlignmentEnd.svg (286874 => 286875)
--- trunk/Source/WebInspectorUI/UserInterface/Images/AlignmentEnd.svg 2021-12-10 21:56:07 UTC (rev 286874)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/AlignmentEnd.svg 2021-12-10 22:01:57 UTC (rev 286875)
@@ -1,5 +0,0 @@
-<!-- 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>
Deleted: trunk/Source/WebInspectorUI/UserInterface/Images/AlignmentSpaceAround.svg (286874 => 286875)
--- trunk/Source/WebInspectorUI/UserInterface/Images/AlignmentSpaceAround.svg 2021-12-10 21:56:07 UTC (rev 286874)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/AlignmentSpaceAround.svg 2021-12-10 22:01:57 UTC (rev 286875)
@@ -1,5 +0,0 @@
-<!-- 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>
Deleted: trunk/Source/WebInspectorUI/UserInterface/Images/AlignmentSpaceBetween.svg (286874 => 286875)
--- trunk/Source/WebInspectorUI/UserInterface/Images/AlignmentSpaceBetween.svg 2021-12-10 21:56:07 UTC (rev 286874)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/AlignmentSpaceBetween.svg 2021-12-10 22:01:57 UTC (rev 286875)
@@ -1,5 +0,0 @@
-<!-- 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>
Deleted: trunk/Source/WebInspectorUI/UserInterface/Images/AlignmentSpaceEvenly.svg (286874 => 286875)
--- trunk/Source/WebInspectorUI/UserInterface/Images/AlignmentSpaceEvenly.svg 2021-12-10 21:56:07 UTC (rev 286874)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/AlignmentSpaceEvenly.svg 2021-12-10 22:01:57 UTC (rev 286875)
@@ -1,5 +0,0 @@
-<!-- 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>
Deleted: trunk/Source/WebInspectorUI/UserInterface/Images/AlignmentStart.svg (286874 => 286875)
--- trunk/Source/WebInspectorUI/UserInterface/Images/AlignmentStart.svg 2021-12-10 21:56:07 UTC (rev 286874)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/AlignmentStart.svg 2021-12-10 22:01:57 UTC (rev 286875)
@@ -1,5 +0,0 @@
-<!-- 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>
Deleted: trunk/Source/WebInspectorUI/UserInterface/Images/AlignmentStretch.svg (286874 => 286875)
--- trunk/Source/WebInspectorUI/UserInterface/Images/AlignmentStretch.svg 2021-12-10 21:56:07 UTC (rev 286874)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/AlignmentStretch.svg 2021-12-10 22:01:57 UTC (rev 286875)
@@ -1,5 +0,0 @@
-<!-- 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>
Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (286874 => 286875)
--- trunk/Source/WebInspectorUI/UserInterface/Main.html 2021-12-10 21:56:07 UTC (rev 286874)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html 2021-12-10 22:01:57 UTC (rev 286875)
@@ -383,6 +383,7 @@
<script src=""
<script src=""
+ <script src=""
<script src=""
<script src=""
<script src=""
Added: trunk/Source/WebInspectorUI/UserInterface/Models/AlignmentData.js (0 => 286875)
--- trunk/Source/WebInspectorUI/UserInterface/Models/AlignmentData.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/AlignmentData.js 2021-12-10 22:01:57 UTC (rev 286875)
@@ -0,0 +1,75 @@
+/*
+ * 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.AlignmentData = class AlignmentData
+{
+ constructor(propertyName, text)
+ {
+ console.assert(Object.values(WI.AlignmentData.Type).includes(propertyName), propertyName);
+
+ this._type = WI.AlignmentData._propertyNameToType(propertyName);
+ this._propertyName = propertyName;
+ this._text = text;
+ }
+
+ // Static
+
+ static isAlignmentAwarePropertyName(propertyName)
+ {
+ return !!WI.AlignmentData._propertyNameToType(propertyName);
+ }
+
+ static _propertyNameToType(propertyName)
+ {
+ switch (propertyName) {
+ case "align-content":
+ return WI.AlignmentData.Type.AlignContent;
+ case "align-items":
+ return WI.AlignmentData.Type.AlignItems;
+ case "align-self":
+ return WI.AlignmentData.Type.AlignSelf;
+ }
+ return null;
+ }
+
+ // Public
+
+ get type() { return this._type; }
+
+ get text() { return this._text; }
+ set text(text) { this._text = text; }
+
+ toString()
+ {
+ return this._text;
+ }
+};
+
+// FIXME: <https://webkit.org/b/233055> Web Inspector: Add a swatch for justify-content, justify-items, and justify-self
+WI.AlignmentData.Type = {
+ AlignContent: "align-content",
+ AlignItems: "align-items",
+ AlignSelf: "align-self",
+};
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/AlignmentEditor.js (286874 => 286875)
--- trunk/Source/WebInspectorUI/UserInterface/Views/AlignmentEditor.js 2021-12-10 21:56:07 UTC (rev 286874)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/AlignmentEditor.js 2021-12-10 22:01:57 UTC (rev 286875)
@@ -29,75 +29,103 @@
{
super();
- this._value = null;
+ this._alignment = 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)
+ static glyphPath(alignment)
{
- return WI.AlignmentEditor.ValueGlyphs.hasOwnProperty(value);
+ let glyphs = WI.AlignmentEditor._glyphsForType(alignment.type);
+ console.assert(glyphs, `No glyphs found for propertyName: ${alignment.type}`);
+ return glyphs?.[alignment.text] || WI.AlignmentEditor.UnknownValueGlyph;
}
+ static _glyphsForType(type)
+ {
+ switch (type) {
+ case WI.AlignmentData.Type.AlignContent:
+ return WI.AlignmentEditor.AlignContentGlyphs;
+ case WI.AlignmentData.Type.AlignItems:
+ case WI.AlignmentData.Type.AlignSelf:
+ return WI.AlignmentEditor.AlignItemsGlyphs;
+ }
+ return null;
+ }
+
// Public
get element() { return this._element; }
- get value()
+ get alignment()
{
- return this._value;
+ return this._alignment;
}
- set value(value)
+ set alignment(alignment)
{
- if (this._value && WI.AlignmentEditor.isAlignContentValue(this._value)) {
- let previousGlyphElement = this._valueToGlyphElement.get(this._value);
- previousGlyphElement.classList.remove("selected");
- }
- this._value = value;
+ console.assert(alignment instanceof WI.AlignmentData);
+
+ if (this._alignment?.type !== alignment.type) {
+ this._valueToGlyphElement.clear();
+ this._element.removeChildren();
+
+ // 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._glyphsForType(alignment.type))) {
+ let glyphElement = WI.ImageUtilities.useSVGSymbol(path, "glyph", value);
+ this._element.append(glyphElement);
+ glyphElement.addEventListener("click", () => {
+ this._removePreviouslySelected();
+ this._alignment.text = value;
+ this._updateSelected();
+ this.dispatchEventToListeners(WI.AlignmentEditor.Event.ValueChanged, {alignment: this._alignment});
+ });
+ this._valueToGlyphElement.set(value, glyphElement);
+ }
+ } else
+ this._removePreviouslySelected();
+
+ this._alignment = alignment;
this._updateSelected();
}
// Private
+ _removePreviouslySelected()
+ {
+ let previousGlyphElement = this._valueToGlyphElement.get(this._alignment.text);
+ previousGlyphElement?.classList.remove("selected");
+ }
+
_updateSelected()
{
- if (!this._value || !WI.AlignmentEditor.isAlignContentValue(this._value))
- return;
-
- let glyphElement = this._valueToGlyphElement.get(this._value);
- glyphElement.classList.add("selected");
+ let glyphElement = this._valueToGlyphElement.get(this._alignment.text);
+ 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.AlignContentGlyphs = {
+ "start": "Images/AlignContentStart.svg",
+ "center": "Images/AlignContentCenter.svg",
+ "end": "Images/AlignContentEnd.svg",
+ "space-between": "Images/AlignContentSpaceBetween.svg",
+ "space-around": "Images/AlignContentSpaceAround.svg",
+ "space-evenly": "Images/AlignContentSpaceEvenly.svg",
+ "stretch": "Images/AlignContentStretch.svg",
};
+WI.AlignmentEditor.AlignItemsGlyphs = {
+ "start": "Images/AlignItemsStart.svg",
+ "center": "Images/AlignItemsCenter.svg",
+ "end": "Images/AlignItemsEnd.svg",
+ "stretch": "Images/AlignItemsStretch.svg",
+};
+
WI.AlignmentEditor.UnknownValueGlyph = "Images/AlignmentUnknown.svg";
WI.AlignmentEditor.Event = {
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.js (286874 => 286875)
--- trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.js 2021-12-10 21:56:07 UTC (rev 286874)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.js 2021-12-10 22:01:57 UTC (rev 286875)
@@ -204,8 +204,7 @@
break;
case WI.InlineSwatch.Type.Alignment:
- let glyphPath = WI.AlignmentEditor.ValueGlyphs[value] || WI.AlignmentEditor.UnknownValueGlyph;
- this._swatchInnerElement.style.backgroundImage = `url(${glyphPath})`;
+ this._swatchInnerElement.style.backgroundImage = `url(${WI.AlignmentEditor.glyphPath(value)})`;
break;
}
@@ -302,9 +301,9 @@
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.alignment = value;
this._valueEditor.addEventListener(WI.AlignmentEditor.Event.ValueChanged, this._valueEditorValueDidChange, this);
break;
@@ -354,10 +353,6 @@
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);
@@ -405,7 +400,7 @@
break;
case WI.InlineSwatch.Type.Alignment:
- this._value = event.data.value;
+ this._value = event.data.alignment;
break;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js (286874 => 286875)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js 2021-12-10 21:56:07 UTC (rev 286874)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js 2021-12-10 22:01:57 UTC (rev 286875)
@@ -623,14 +623,13 @@
_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 (WI.AlignmentData.isAlignmentAwarePropertyName(this._property.name))
+ return this._addAlignmentTokens(tokens, this._property.name);
if (this._property.isVariable || WI.CSSKeywordCompletions.isColorAwareProperty(this._property.name)) {
tokens = this._addGradientTokens(tokens);
@@ -845,11 +844,11 @@
return newTokens;
}
- _addAlignmentTokens(tokens)
+ _addAlignmentTokens(tokens, propertyName)
{
// 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);
+ let swatch = this._createInlineSwatch(WI.InlineSwatch.Type.Alignment, this._addVariableTokens(tokens), new WI.AlignmentData(propertyName, text));
return [swatch];
}
