Changeset 286885 in webkit
- Timestamp:
- Dec 10, 2021, 4:40:58 PM (3 years ago)
- Location:
- trunk/Source/WebInspectorUI
- Files:
-
- 6 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/Source/WebInspectorUI/ChangeLog
r286876 r286885 1 2021-12-10 Nikita Vasilyev <nvasilyev@apple.com> 2 3 Web Inspector: Add a swatch for justify-content, justify-items, and justify-self 4 https://bugs.webkit.org/show_bug.cgi?id=233055 5 <rdar://problem/85613257> 6 7 Reviewed by Patrick Angle. 8 9 Add an inline swatch for `justify-content`, that shows icons for common values: 10 start, center, end, space-between, space-around, space-evenly, and stretch. 11 12 Also, add inline swatches for `justify-items` and `justify-self`, that shows icons for: 13 start, center, end, and stretch. 14 15 The newly added swatches reuse the existing `align-content` and `align-items` icons, and 16 rotate them -90 degrees. While `align-*` properties define alignment in the block-direction 17 the `justify-*` properties define alignment in the inline-direction. 18 19 * UserInterface/Models/AlignmentData.js: 20 (WI.AlignmentData._propertyNameToType): 21 * UserInterface/Views/AlignmentEditor.css: 22 (.alignment-editor .glyph.rotate-left > svg): 23 * UserInterface/Views/AlignmentEditor.js: 24 (WI.AlignmentEditor.shouldRotateGlyph): 25 (WI.AlignmentEditor._glyphsForType): 26 (WI.AlignmentEditor.prototype.set alignment): 27 * UserInterface/Views/InlineSwatch.css: 28 (.inline-swatch.alignment > span.rotate-left): 29 * UserInterface/Views/InlineSwatch.js: 30 (WI.InlineSwatch.prototype._updateSwatch): 31 1 32 2021-12-10 Razvan Caliman <rcaliman@apple.com> 2 33 -
trunk/Source/WebInspectorUI/UserInterface/Models/AlignmentData.js
r286875 r286885 51 51 case "align-self": 52 52 return WI.AlignmentData.Type.AlignSelf; 53 case "justify-content": 54 return WI.AlignmentData.Type.JustifyContent; 55 case "justify-items": 56 return WI.AlignmentData.Type.JustifyItems; 57 case "justify-self": 58 return WI.AlignmentData.Type.JustifySelf; 53 59 } 54 60 return null; … … 73 79 AlignItems: "align-items", 74 80 AlignSelf: "align-self", 81 JustifyContent: "justify-content", 82 JustifyItems: "justify-items", 83 JustifySelf: "justify-self", 75 84 }; -
trunk/Source/WebInspectorUI/UserInterface/Views/AlignmentEditor.css
r285983 r286885 55 55 outline-color: var(--glyph-color-active-pressed); 56 56 } 57 58 .alignment-editor .glyph.rotate-left > svg { 59 rotate: -90deg; 60 } -
trunk/Source/WebInspectorUI/UserInterface/Views/AlignmentEditor.js
r286875 r286885 46 46 } 47 47 48 static shouldRotateGlyph(type) 49 { 50 // FIXME: <https://webkit.org/b/233053> Web Inspector: mirror/rotate alignment icons when flex-direction/grid-auto-flow/RTL affect axis or direction 51 switch (type) { 52 case WI.AlignmentData.Type.JustifyContent: 53 case WI.AlignmentData.Type.JustifyItems: 54 case WI.AlignmentData.Type.JustifySelf: 55 return true; 56 case WI.AlignmentData.Type.AlignContent: 57 case WI.AlignmentData.Type.AlignItems: 58 case WI.AlignmentData.Type.AlignSelf: 59 return false; 60 } 61 console.assert(false, "Unsupported type", type); 62 return false; 63 } 64 48 65 static _glyphsForType(type) 49 66 { 50 67 switch (type) { 51 68 case WI.AlignmentData.Type.AlignContent: 69 case WI.AlignmentData.Type.JustifyContent: 52 70 return WI.AlignmentEditor.AlignContentGlyphs; 53 71 case WI.AlignmentData.Type.AlignItems: 54 72 case WI.AlignmentData.Type.AlignSelf: 73 case WI.AlignmentData.Type.JustifyItems: 74 case WI.AlignmentData.Type.JustifySelf: 55 75 return WI.AlignmentEditor.AlignItemsGlyphs; 56 76 } … … 76 96 77 97 // FIXME: <https://webkit.org/b/233053> Web Inspector: mirror/rotate alignment icons when flex-direction/grid-auto-flow/RTL affect axis or direction 98 let shouldRotate = WI.AlignmentEditor.shouldRotateGlyph(alignment.type) 99 78 100 for (let [value, path] of Object.entries(WI.AlignmentEditor._glyphsForType(alignment.type))) { 79 101 let glyphElement = WI.ImageUtilities.useSVGSymbol(path, "glyph", value); 80 102 this._element.append(glyphElement); 103 glyphElement.classList.toggle("rotate-left", shouldRotate); 81 104 glyphElement.addEventListener("click", () => { 82 105 this._removePreviouslySelected(); -
trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.css
r285983 r286885 104 104 } 105 105 106 .inline-swatch.alignment > span.rotate-left { 107 rotate: -90deg; 108 } 109 106 110 .inline-swatch-variable-popover { 107 111 display: flex; -
trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.js
r286875 r286885 206 206 case WI.InlineSwatch.Type.Alignment: 207 207 this._swatchInnerElement.style.backgroundImage = `url(${WI.AlignmentEditor.glyphPath(value)})`; 208 this._swatchInnerElement.classList.toggle("rotate-left", WI.AlignmentEditor.shouldRotateGlyph(value.type)); 208 209 break; 209 210 }
Note:
See TracChangeset
for help on using the changeset viewer.