Title: [286885] trunk/Source/WebInspectorUI
- Revision
- 286885
- Author
- nvasil...@apple.com
- Date
- 2021-12-10 16:40:58 -0800 (Fri, 10 Dec 2021)
Log Message
Web Inspector: Add a swatch for justify-content, justify-items, and justify-self
https://bugs.webkit.org/show_bug.cgi?id=233055
<rdar://problem/85613257>
Reviewed by Patrick Angle.
Add an inline swatch for `justify-content`, that shows icons for common values:
start, center, end, space-between, space-around, space-evenly, and stretch.
Also, add inline swatches for `justify-items` and `justify-self`, that shows icons for:
start, center, end, and stretch.
The newly added swatches reuse the existing `align-content` and `align-items` icons, and
rotate them -90 degrees. While `align-*` properties define alignment in the block-direction
the `justify-*` properties define alignment in the inline-direction.
* UserInterface/Models/AlignmentData.js:
(WI.AlignmentData._propertyNameToType):
* UserInterface/Views/AlignmentEditor.css:
(.alignment-editor .glyph.rotate-left > svg):
* UserInterface/Views/AlignmentEditor.js:
(WI.AlignmentEditor.shouldRotateGlyph):
(WI.AlignmentEditor._glyphsForType):
(WI.AlignmentEditor.prototype.set alignment):
* UserInterface/Views/InlineSwatch.css:
(.inline-swatch.alignment > span.rotate-left):
* UserInterface/Views/InlineSwatch.js:
(WI.InlineSwatch.prototype._updateSwatch):
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (286884 => 286885)
--- trunk/Source/WebInspectorUI/ChangeLog 2021-12-11 00:38:22 UTC (rev 286884)
+++ trunk/Source/WebInspectorUI/ChangeLog 2021-12-11 00:40:58 UTC (rev 286885)
@@ -1,3 +1,34 @@
+2021-12-10 Nikita Vasilyev <nvasil...@apple.com>
+
+ Web Inspector: Add a swatch for justify-content, justify-items, and justify-self
+ https://bugs.webkit.org/show_bug.cgi?id=233055
+ <rdar://problem/85613257>
+
+ Reviewed by Patrick Angle.
+
+ Add an inline swatch for `justify-content`, that shows icons for common values:
+ start, center, end, space-between, space-around, space-evenly, and stretch.
+
+ Also, add inline swatches for `justify-items` and `justify-self`, that shows icons for:
+ start, center, end, and stretch.
+
+ The newly added swatches reuse the existing `align-content` and `align-items` icons, and
+ rotate them -90 degrees. While `align-*` properties define alignment in the block-direction
+ the `justify-*` properties define alignment in the inline-direction.
+
+ * UserInterface/Models/AlignmentData.js:
+ (WI.AlignmentData._propertyNameToType):
+ * UserInterface/Views/AlignmentEditor.css:
+ (.alignment-editor .glyph.rotate-left > svg):
+ * UserInterface/Views/AlignmentEditor.js:
+ (WI.AlignmentEditor.shouldRotateGlyph):
+ (WI.AlignmentEditor._glyphsForType):
+ (WI.AlignmentEditor.prototype.set alignment):
+ * UserInterface/Views/InlineSwatch.css:
+ (.inline-swatch.alignment > span.rotate-left):
+ * UserInterface/Views/InlineSwatch.js:
+ (WI.InlineSwatch.prototype._updateSwatch):
+
2021-12-10 Razvan Caliman <rcali...@apple.com>
Web Inspector: Computed Panel: Group CSS variables by value type
Modified: trunk/Source/WebInspectorUI/UserInterface/Models/AlignmentData.js (286884 => 286885)
--- trunk/Source/WebInspectorUI/UserInterface/Models/AlignmentData.js 2021-12-11 00:38:22 UTC (rev 286884)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/AlignmentData.js 2021-12-11 00:40:58 UTC (rev 286885)
@@ -50,6 +50,12 @@
return WI.AlignmentData.Type.AlignItems;
case "align-self":
return WI.AlignmentData.Type.AlignSelf;
+ case "justify-content":
+ return WI.AlignmentData.Type.JustifyContent;
+ case "justify-items":
+ return WI.AlignmentData.Type.JustifyItems;
+ case "justify-self":
+ return WI.AlignmentData.Type.JustifySelf;
}
return null;
}
@@ -72,4 +78,7 @@
AlignContent: "align-content",
AlignItems: "align-items",
AlignSelf: "align-self",
+ JustifyContent: "justify-content",
+ JustifyItems: "justify-items",
+ JustifySelf: "justify-self",
};
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/AlignmentEditor.css (286884 => 286885)
--- trunk/Source/WebInspectorUI/UserInterface/Views/AlignmentEditor.css 2021-12-11 00:38:22 UTC (rev 286884)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/AlignmentEditor.css 2021-12-11 00:40:58 UTC (rev 286885)
@@ -54,3 +54,7 @@
color: var(--glyph-color-active-pressed);
outline-color: var(--glyph-color-active-pressed);
}
+
+.alignment-editor .glyph.rotate-left > svg {
+ rotate: -90deg;
+}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/AlignmentEditor.js (286884 => 286885)
--- trunk/Source/WebInspectorUI/UserInterface/Views/AlignmentEditor.js 2021-12-11 00:38:22 UTC (rev 286884)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/AlignmentEditor.js 2021-12-11 00:40:58 UTC (rev 286885)
@@ -45,13 +45,33 @@
return glyphs?.[alignment.text] || WI.AlignmentEditor.UnknownValueGlyph;
}
+ static shouldRotateGlyph(type)
+ {
+ // FIXME: <https://webkit.org/b/233053> Web Inspector: mirror/rotate alignment icons when flex-direction/grid-auto-flow/RTL affect axis or direction
+ switch (type) {
+ case WI.AlignmentData.Type.JustifyContent:
+ case WI.AlignmentData.Type.JustifyItems:
+ case WI.AlignmentData.Type.JustifySelf:
+ return true;
+ case WI.AlignmentData.Type.AlignContent:
+ case WI.AlignmentData.Type.AlignItems:
+ case WI.AlignmentData.Type.AlignSelf:
+ return false;
+ }
+ console.assert(false, "Unsupported type", type);
+ return false;
+ }
+
static _glyphsForType(type)
{
switch (type) {
case WI.AlignmentData.Type.AlignContent:
+ case WI.AlignmentData.Type.JustifyContent:
return WI.AlignmentEditor.AlignContentGlyphs;
case WI.AlignmentData.Type.AlignItems:
case WI.AlignmentData.Type.AlignSelf:
+ case WI.AlignmentData.Type.JustifyItems:
+ case WI.AlignmentData.Type.JustifySelf:
return WI.AlignmentEditor.AlignItemsGlyphs;
}
return null;
@@ -75,9 +95,12 @@
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
+ let shouldRotate = WI.AlignmentEditor.shouldRotateGlyph(alignment.type)
+
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.classList.toggle("rotate-left", shouldRotate);
glyphElement.addEventListener("click", () => {
this._removePreviouslySelected();
this._alignment.text = value;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.css (286884 => 286885)
--- trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.css 2021-12-11 00:38:22 UTC (rev 286884)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.css 2021-12-11 00:40:58 UTC (rev 286885)
@@ -103,6 +103,10 @@
background-repeat: no-repeat;
}
+.inline-swatch.alignment > span.rotate-left {
+ rotate: -90deg;
+}
+
.inline-swatch-variable-popover {
display: flex;
align-items: center;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.js (286884 => 286885)
--- trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.js 2021-12-11 00:38:22 UTC (rev 286884)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.js 2021-12-11 00:40:58 UTC (rev 286885)
@@ -205,6 +205,7 @@
case WI.InlineSwatch.Type.Alignment:
this._swatchInnerElement.style.backgroundImage = `url(${WI.AlignmentEditor.glyphPath(value)})`;
+ this._swatchInnerElement.classList.toggle("rotate-left", WI.AlignmentEditor.shouldRotateGlyph(value.type));
break;
}
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes
