Changeset 286885 in webkit


Ignore:
Timestamp:
Dec 10, 2021, 4:40:58 PM (3 years ago)
Author:
Nikita Vasilyev
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):

Location:
trunk/Source/WebInspectorUI
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r286876 r286885  
     12021-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
    1322021-12-10  Razvan Caliman  <rcaliman@apple.com>
    233

  • trunk/Source/WebInspectorUI/UserInterface/Models/AlignmentData.js

    r286875 r286885  
    5151        case "align-self":
    5252            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;
    5359        }
    5460        return null;
    … …  
    7379    AlignItems: "align-items",
    7480    AlignSelf: "align-self",
     81    JustifyContent: "justify-content",
     82    JustifyItems: "justify-items",
     83    JustifySelf: "justify-self",
    7584};

  • trunk/Source/WebInspectorUI/UserInterface/Views/AlignmentEditor.css

    r285983 r286885  
    5555    outline-color: var(--glyph-color-active-pressed);
    5656}
     57
     58.alignment-editor .glyph.rotate-left > svg {
     59    rotate: -90deg;
     60}

  • trunk/Source/WebInspectorUI/UserInterface/Views/AlignmentEditor.js

    r286875 r286885  
    4646    }
    4747
     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
    4865    static _glyphsForType(type)
    4966    {
    5067        switch (type) {
    5168        case WI.AlignmentData.Type.AlignContent:
     69        case WI.AlignmentData.Type.JustifyContent:
    5270            return WI.AlignmentEditor.AlignContentGlyphs;
    5371        case WI.AlignmentData.Type.AlignItems:
    5472        case WI.AlignmentData.Type.AlignSelf:
     73        case WI.AlignmentData.Type.JustifyItems:
     74        case WI.AlignmentData.Type.JustifySelf:
    5575            return WI.AlignmentEditor.AlignItemsGlyphs;
    5676        }
    … …  
    7696
    7797            // 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
    78100            for (let [value, path] of Object.entries(WI.AlignmentEditor._glyphsForType(alignment.type))) {
    79101                let glyphElement = WI.ImageUtilities.useSVGSymbol(path, "glyph", value);
    80102                this._element.append(glyphElement);
     103                glyphElement.classList.toggle("rotate-left", shouldRotate);
    81104                glyphElement.addEventListener("click", () => {
    82105                    this._removePreviouslySelected();

  • trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.css

    r285983 r286885  
    104104}
    105105
     106.inline-swatch.alignment > span.rotate-left {
     107    rotate: -90deg;
     108}
     109
    106110.inline-swatch-variable-popover {
    107111    display: flex;

  • trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.js

    r286875 r286885  
    206206        case WI.InlineSwatch.Type.Alignment:
    207207            this._swatchInnerElement.style.backgroundImage = `url(${WI.AlignmentEditor.glyphPath(value)})`;
     208            this._swatchInnerElement.classList.toggle("rotate-left", WI.AlignmentEditor.shouldRotateGlyph(value.type));
    208209            break;
    209210        }
Note: See TracChangeset for help on using the changeset viewer.