Changeset 286875 in webkit


Ignore:
Timestamp:
Dec 10, 2021 2:01:57 PM (7 months ago)
Author:
Nikita Vasilyev
Message:

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):

Location:
trunk/Source/WebInspectorUI
Files:
5 added
5 edited
7 moved

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r286844 r286875  
     12021-12-10  Nikita Vasilyev  <nvasilyev@apple.com>
     2
     3        Web Inspector: Add a swatch for align-items and align-self
     4        https://bugs.webkit.org/show_bug.cgi?id=233054
     5        <rdar://problem/85613199>
     6
     7        Reviewed by Devin Rousso.
     8
     9        Introduce inline swatches for `align-items` and `align-self`, that shows icons for common values:
     10        start, center, end, and stretch.
     11
     12        * UserInterface/Images/AlignContentCenter.svg: Renamed from Source/WebInspectorUI/UserInterface/Images/AlignmentCenter.svg.
     13        * UserInterface/Images/AlignContentEnd.svg: Renamed from Source/WebInspectorUI/UserInterface/Images/AlignmentEnd.svg.
     14        * UserInterface/Images/AlignContentSpaceAround.svg: Renamed from Source/WebInspectorUI/UserInterface/Images/AlignmentSpaceAround.svg.
     15        * UserInterface/Images/AlignContentSpaceBetween.svg: Renamed from Source/WebInspectorUI/UserInterface/Images/AlignmentSpaceBetween.svg.
     16        * UserInterface/Images/AlignContentSpaceEvenly.svg: Renamed from Source/WebInspectorUI/UserInterface/Images/AlignmentSpaceEvenly.svg.
     17        * UserInterface/Images/AlignContentStart.svg: Renamed from Source/WebInspectorUI/UserInterface/Images/AlignmentStart.svg.
     18        * UserInterface/Images/AlignContentStretch.svg: Renamed from Source/WebInspectorUI/UserInterface/Images/AlignmentStretch.svg.
     19        Rename icons from Alignment to AlignContent since they are only used for `align-content` CSS property now.
     20
     21        * UserInterface/Images/AlignItemsCenter.svg: Added.
     22        * UserInterface/Images/AlignItemsEnd.svg: Added.
     23        * UserInterface/Images/AlignItemsStart.svg: Added.
     24        * UserInterface/Images/AlignItemsStretch.svg: Added.
     25        * UserInterface/Main.html:
     26        * UserInterface/Models/AlignmentData.js: Added.
     27
     28        (WI.AlignmentData):
     29        (WI.AlignmentData.isAlignmentAwarePropertyName):
     30        (WI.AlignmentData._propertyNameToType):
     31        (WI.AlignmentData.prototype.get type):
     32        (WI.AlignmentData.prototype.get text):
     33        (WI.AlignmentData.prototype.set text):
     34        (WI.AlignmentData.prototype.toString):
     35        Introduce a model object to be more consistent with the rest of the inline swatches.
     36
     37        * UserInterface/Views/AlignmentEditor.js:
     38        (WI.AlignmentEditor):
     39        Allow AlignmentEditor to work with more than one CSS property (i.e. align-content), by introducing propertyName argument.
     40
     41        (WI.AlignmentEditor.glyphPath):
     42        (WI.AlignmentEditor._glyphsForType):
     43        (WI.AlignmentEditor.prototype.get alignment):
     44        (WI.AlignmentEditor.prototype.set alignment):
     45        Rename `value` to `alignment` to be more consistent with the rest of the editors.
     46
     47        (WI.AlignmentEditor.prototype._removePreviouslySelected):
     48        (WI.AlignmentEditor.prototype._updateSelected):
     49        (WI.AlignmentEditor.isAlignContentValue): Deleted.
     50        (WI.AlignmentEditor.prototype.get value): Deleted.
     51        (WI.AlignmentEditor.prototype.set value): Deleted.
     52        * UserInterface/Views/InlineSwatch.js:
     53        (WI.InlineSwatch.prototype._updateSwatch):
     54        (WI.InlineSwatch.prototype._valueEditorValueDidChange):
     55        * UserInterface/Views/SpreadsheetStyleProperty.js:
     56        (WI.SpreadsheetStyleProperty.prototype._replaceSpecialTokens):
     57        (WI.SpreadsheetStyleProperty.prototype._addAlignmentTokens):
     58
    1592021-12-10  Razvan Caliman  <rcaliman@apple.com>
    260

  • trunk/Source/WebInspectorUI/UserInterface/Main.html

    r286844 r286875  
    384384    <script src="Models/LocalScript.js"></script>
    385385
     386    <script src="Models/AlignmentData.js"></script>
    386387    <script src="Models/Animation.js"></script>
    387388    <script src="Models/AnimationCollection.js"></script>

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

    r285983 r286875  
    3030        super();
    3131
    32         this._value = null;
     32        this._alignment = null;
    3333        this._valueToGlyphElement = new Map;
    3434
    3535        this._element = document.createElement("div");
    3636        this._element.className = "alignment-editor";
    37 
    38         // FIXME: <https://webkit.org/b/233053> Web Inspector: mirror/rotate alignment icons when flex-direction/grid-auto-flow/RTL affect axis or direction
    39         for (let [value, path] of Object.entries(WI.AlignmentEditor.ValueGlyphs)) {
    40             let glyphElement = WI.ImageUtilities.useSVGSymbol(path, "glyph", value);
    41             this._element.append(glyphElement);
    42             glyphElement.addEventListener("click", () => {
    43                 this.dispatchEventToListeners(WI.AlignmentEditor.Event.ValueChanged, {value});
    44                 this.value = value;
    45             });
    46             this._valueToGlyphElement.set(value, glyphElement);
    47         }
    48         this._updateSelected();
    4937    }
    5038
    5139    // Static
    5240
    53     static isAlignContentValue(value)
     41    static glyphPath(alignment)
    5442    {
    55         return WI.AlignmentEditor.ValueGlyphs.hasOwnProperty(value);
     43        let glyphs = WI.AlignmentEditor._glyphsForType(alignment.type);
     44        console.assert(glyphs, `No glyphs found for propertyName: ${alignment.type}`);
     45        return glyphs?.[alignment.text] || WI.AlignmentEditor.UnknownValueGlyph;
     46    }
     47
     48    static _glyphsForType(type)
     49    {
     50        switch (type) {
     51        case WI.AlignmentData.Type.AlignContent:
     52            return WI.AlignmentEditor.AlignContentGlyphs;
     53        case WI.AlignmentData.Type.AlignItems:
     54        case WI.AlignmentData.Type.AlignSelf:
     55            return WI.AlignmentEditor.AlignItemsGlyphs;
     56        }
     57        return null;
    5658    }
    5759
    … …  
    6062    get element() { return this._element; }
    6163
    62     get value()
     64    get alignment()
    6365    {
    64         return this._value;
     66        return this._alignment;
    6567    }
    6668
    67     set value(value)
     69    set alignment(alignment)
    6870    {
    69         if (this._value && WI.AlignmentEditor.isAlignContentValue(this._value)) {
    70             let previousGlyphElement = this._valueToGlyphElement.get(this._value);
    71             previousGlyphElement.classList.remove("selected");
    72         }
    73         this._value = value;
     71        console.assert(alignment instanceof WI.AlignmentData);
     72
     73        if (this._alignment?.type !== alignment.type) {
     74            this._valueToGlyphElement.clear();
     75            this._element.removeChildren();
     76
     77            // FIXME: <https://webkit.org/b/233053> Web Inspector: mirror/rotate alignment icons when flex-direction/grid-auto-flow/RTL affect axis or direction
     78            for (let [value, path] of Object.entries(WI.AlignmentEditor._glyphsForType(alignment.type))) {
     79                let glyphElement = WI.ImageUtilities.useSVGSymbol(path, "glyph", value);
     80                this._element.append(glyphElement);
     81                glyphElement.addEventListener("click", () => {
     82                    this._removePreviouslySelected();
     83                    this._alignment.text = value;
     84                    this._updateSelected();
     85                    this.dispatchEventToListeners(WI.AlignmentEditor.Event.ValueChanged, {alignment: this._alignment});
     86                });
     87                this._valueToGlyphElement.set(value, glyphElement);
     88            }
     89        } else
     90            this._removePreviouslySelected();
     91
     92        this._alignment = alignment;
    7493        this._updateSelected();
    7594    }
    … …  
    7796    // Private
    7897
     98    _removePreviouslySelected()
     99    {
     100        let previousGlyphElement = this._valueToGlyphElement.get(this._alignment.text);
     101        previousGlyphElement?.classList.remove("selected");
     102    }
     103
    79104    _updateSelected()
    80105    {
    81         if (!this._value || !WI.AlignmentEditor.isAlignContentValue(this._value))
    82             return;
    83 
    84         let glyphElement = this._valueToGlyphElement.get(this._value);
    85         glyphElement.classList.add("selected");
     106        let glyphElement = this._valueToGlyphElement.get(this._alignment.text);
     107        glyphElement?.classList.add("selected");
    86108    }
    87109};
    88110
    89 // FIXME: <https://webkit.org/b/233054> Web Inspector: Add a swatch for align-items and align-self
    90111// FIXME: <https://webkit.org/b/233055> Web Inspector: Add a swatch for justify-content, justify-items, and justify-self
    91 WI.AlignmentEditor.ValueGlyphs = {
    92     "start": "Images/AlignmentStart.svg",
    93     "center": "Images/AlignmentCenter.svg",
    94     "end": "Images/AlignmentEnd.svg",
    95     "space-between": "Images/AlignmentSpaceBetween.svg",
    96     "space-around": "Images/AlignmentSpaceAround.svg",
    97     "space-evenly": "Images/AlignmentSpaceEvenly.svg",
    98     "stretch": "Images/AlignmentStretch.svg",
     112WI.AlignmentEditor.AlignContentGlyphs = {
     113    "start": "Images/AlignContentStart.svg",
     114    "center": "Images/AlignContentCenter.svg",
     115    "end": "Images/AlignContentEnd.svg",
     116    "space-between": "Images/AlignContentSpaceBetween.svg",
     117    "space-around": "Images/AlignContentSpaceAround.svg",
     118    "space-evenly": "Images/AlignContentSpaceEvenly.svg",
     119    "stretch": "Images/AlignContentStretch.svg",
     120};
     121
     122WI.AlignmentEditor.AlignItemsGlyphs = {
     123    "start": "Images/AlignItemsStart.svg",
     124    "center": "Images/AlignItemsCenter.svg",
     125    "end": "Images/AlignItemsEnd.svg",
     126    "stretch": "Images/AlignItemsStretch.svg",
    99127};
    100128

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

    r285983 r286875  
    205205
    206206        case WI.InlineSwatch.Type.Alignment:
    207             let glyphPath = WI.AlignmentEditor.ValueGlyphs[value] || WI.AlignmentEditor.UnknownValueGlyph;
    208             this._swatchInnerElement.style.backgroundImage = `url(${glyphPath})`;
     207            this._swatchInnerElement.style.backgroundImage = `url(${WI.AlignmentEditor.glyphPath(value)})`;
    209208            break;
    210209        }
    … …  
    303302
    304303        case WI.InlineSwatch.Type.Alignment:
    305             // FIXME: <https://webkit.org/b/233054> Web Inspector: Add a swatch for align-items and align-self
    306304            // FIXME: <https://webkit.org/b/233055> Web Inspector: Add a swatch for justify-content, justify-items, and justify-self
    307305            this._valueEditor = new WI.AlignmentEditor;
     306            this._valueEditor.alignment = value;
    308307            this._valueEditor.addEventListener(WI.AlignmentEditor.Event.ValueChanged, this._valueEditorValueDidChange, this);
    309308            break;
    … …  
    353352        case WI.InlineSwatch.Type.Spring:
    354353            this._valueEditor.spring = value;
    355             break;
    356 
    357         case WI.InlineSwatch.Type.Alignment:
    358             this._valueEditor.value = value;
    359354            break;
    360355
    … …  
    406401
    407402        case WI.InlineSwatch.Type.Alignment:
    408             this._value = event.data.value;
     403            this._value = event.data.alignment;
    409404            break;
    410405        }

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

    r286844 r286875  
    624624    {
    625625        // FIXME: <https://webkit.org/b/178636> Web Inspector: Styles: Make inline widgets work with CSS functions (var(), calc(), etc.)
    626         // FIXME: <https://webkit.org/b/233054> Web Inspector: Add a swatch for align-items and align-self
    627626        // FIXME: <https://webkit.org/b/233055> Web Inspector: Add a swatch for justify-content, justify-items, and justify-self
    628627
    … …  
    630629            return this._addBoxShadowTokens(tokens);
    631630
    632         if (this._property.name === "align-content")
    633             return this._addAlignmentTokens(tokens);
     631        if (WI.AlignmentData.isAlignmentAwarePropertyName(this._property.name))
     632            return this._addAlignmentTokens(tokens, this._property.name);
    634633
    635634        if (this._property.isVariable || WI.CSSKeywordCompletions.isColorAwareProperty(this._property.name)) {
    … …  
    846845    }
    847846
    848     _addAlignmentTokens(tokens)
     847    _addAlignmentTokens(tokens, propertyName)
    849848    {
    850849        // FIXME: <https://webkit.org/b/233281> Web Inspector: Alignment swatch should handle multi-token values better
    851850        let text = this._resolveVariables(tokens.map((token) => token.value).join(""));
    852         let swatch = this._createInlineSwatch(WI.InlineSwatch.Type.Alignment, this._addVariableTokens(tokens), text);
     851        let swatch = this._createInlineSwatch(WI.InlineSwatch.Type.Alignment, this._addVariableTokens(tokens), new WI.AlignmentData(propertyName, text));
    853852        return [swatch];
    854853    }
Note: See TracChangeset for help on using the changeset viewer.