Changeset 285983 in webkit


Ignore:
Timestamp:
Nov 17, 2021 11:18:04 PM (8 months ago)
Author:
Nikita Vasilyev
Message:

Web Inspector: Add a swatch for align-content
​https://bugs.webkit.org/show_bug.cgi?id=230065
<rdar://problem/82891361>

Reviewed by Devin Rousso.

Introduce an inline swatch for align-content, that shows icons for common align-content values:
start, center, end, space-between, space-around, space-evenly, and stretch.

  • UserInterface/Images/AlignmentCenter.svg: Added.
  • UserInterface/Images/AlignmentEnd.svg: Added.
  • UserInterface/Images/AlignmentSpaceAround.svg: Added.
  • UserInterface/Images/AlignmentSpaceBetween.svg: Added.
  • UserInterface/Images/AlignmentSpaceEvenly.svg: Added.
  • UserInterface/Images/AlignmentStart.svg: Added.
  • UserInterface/Images/AlignmentStretch.svg: Added.
  • UserInterface/Images/AlignmentUnknown.svg: Added.
  • UserInterface/Main.html:
  • UserInterface/Views/AlignmentEditor.css: Added.

(.alignment-editor .glyph):
(.alignment-editor .glyph:not(:last-child)):
(.alignment-editor .glyph:active):
(.alignment-editor .glyph.selected):
(.alignment-editor .glyph.selected + .glyph):
(.alignment-editor .glyph.selected:active):

  • UserInterface/Views/AlignmentEditor.js: Added.

(WI.AlignmentEditor):
(WI.AlignmentEditor.isAlignContentValue):
(WI.AlignmentEditor.prototype.get element):
(WI.AlignmentEditor.prototype.get value):
(WI.AlignmentEditor.prototype.set value):
(WI.AlignmentEditor.prototype._updateSelected):

  • UserInterface/Views/InlineSwatch.css:

(.inline-swatch:not(.read-only):matches(.bezier, .box-shadow, .spring, .variable, .alignment):hover):
(.inline-swatch:not(.read-only):matches(.bezier, .box-shadow, .spring, .variable, .alignment):active):
(.inline-swatch:is(.image, .alignment) > span):
(@media (prefers-color-scheme: dark) .inline-swatch.box-shadow > svg,):

  • UserInterface/Views/InlineSwatch.js:

(WI.InlineSwatch):
(WI.InlineSwatch.prototype.didDismissPopover):
(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:
10 added
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r285975 r285983  
     12021-11-17  Nikita Vasilyev  <nvasilyev@apple.com>
     2
     3        Web Inspector: Add a swatch for align-content
     4        https://bugs.webkit.org/show_bug.cgi?id=230065
     5        <rdar://problem/82891361>
     6
     7        Reviewed by Devin Rousso.
     8
     9        Introduce an inline swatch for `align-content`, that shows icons for common align-content values:
     10        start, center, end, space-between, space-around, space-evenly, and stretch.
     11
     12        * UserInterface/Images/AlignmentCenter.svg: Added.
     13        * UserInterface/Images/AlignmentEnd.svg: Added.
     14        * UserInterface/Images/AlignmentSpaceAround.svg: Added.
     15        * UserInterface/Images/AlignmentSpaceBetween.svg: Added.
     16        * UserInterface/Images/AlignmentSpaceEvenly.svg: Added.
     17        * UserInterface/Images/AlignmentStart.svg: Added.
     18        * UserInterface/Images/AlignmentStretch.svg: Added.
     19        * UserInterface/Images/AlignmentUnknown.svg: Added.
     20
     21        * UserInterface/Main.html:
     22        * UserInterface/Views/AlignmentEditor.css: Added.
     23        (.alignment-editor .glyph):
     24        (.alignment-editor .glyph:not(:last-child)):
     25        (.alignment-editor .glyph:active):
     26        (.alignment-editor .glyph.selected):
     27        (.alignment-editor .glyph.selected + .glyph):
     28        (.alignment-editor .glyph.selected:active):
     29
     30        * UserInterface/Views/AlignmentEditor.js: Added.
     31        (WI.AlignmentEditor):
     32        (WI.AlignmentEditor.isAlignContentValue):
     33        (WI.AlignmentEditor.prototype.get element):
     34        (WI.AlignmentEditor.prototype.get value):
     35        (WI.AlignmentEditor.prototype.set value):
     36        (WI.AlignmentEditor.prototype._updateSelected):
     37
     38        * UserInterface/Views/InlineSwatch.css:
     39        (.inline-swatch:not(.read-only):matches(.bezier, .box-shadow, .spring, .variable, .alignment):hover):
     40        (.inline-swatch:not(.read-only):matches(.bezier, .box-shadow, .spring, .variable, .alignment):active):
     41        (.inline-swatch:is(.image, .alignment) > span):
     42        (@media (prefers-color-scheme: dark) .inline-swatch.box-shadow > svg,):
     43
     44        * UserInterface/Views/InlineSwatch.js:
     45        (WI.InlineSwatch):
     46        (WI.InlineSwatch.prototype.didDismissPopover):
     47        (WI.InlineSwatch.prototype._updateSwatch):
     48        (WI.InlineSwatch.prototype._valueEditorValueDidChange):
     49
     50        * UserInterface/Views/SpreadsheetStyleProperty.js:
     51        (WI.SpreadsheetStyleProperty.prototype._replaceSpecialTokens):
     52        (WI.SpreadsheetStyleProperty.prototype._addAlignmentTokens):
     53
    1542021-11-17  Devin Rousso  <drousso@apple.com>
    255

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

    r285711 r285983  
    3535    <link rel="stylesheet" href="External/CodeMirror/codemirror.css">
    3636
     37    <link rel="stylesheet" href="Views/AlignmentEditor.css">
    3738    <link rel="stylesheet" href="Views/AnimationCollectionContentView.css">
    3839    <link rel="stylesheet" href="Views/AnimationContentView.css">
    … …  
    619620
    620621    <script src="Views/ActivateButtonNavigationItem.js"></script>
     622    <script src="Views/AlignmentEditor.js"></script>
    621623    <script src="Views/AnimationCollectionContentView.js"></script>
    622624    <script src="Views/AnimationContentView.js"></script>

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

    r259170 r285983  
    5959}
    6060
    61 .inline-swatch:not(.read-only):matches(.bezier, .box-shadow, .spring, .variable):hover {
     61.inline-swatch:not(.read-only):matches(.bezier, .box-shadow, .spring, .variable, .alignment):hover {
    6262    filter: brightness(0.9);
    6363}
    6464
    65 .inline-swatch:not(.read-only):matches(.bezier, .box-shadow, .spring, .variable):active {
     65.inline-swatch:not(.read-only):matches(.bezier, .box-shadow, .spring, .variable, .alignment):active {
    6666    filter: brightness(0.8);
    6767}
    … …  
    9999}
    100100
    101 .inline-swatch.image > span {
     101.inline-swatch:is(.image, .alignment) > span {
    102102    background-size: cover;
    103103    background-repeat: no-repeat;
    … …  
    121121
    122122@media (prefers-color-scheme: dark) {
    123     .inline-swatch.box-shadow > svg {
     123    .inline-swatch.box-shadow > svg,
     124    .inline-swatch.alignment > span {
    124125        filter: invert();
    125126    }

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

    r285215 r285983  
    7171                break;
    7272
     73            case WI.InlineSwatch.Type.Alignment:
     74                // Handled later by _updateSwatch.
     75                break;
     76
    7377            case WI.InlineSwatch.Type.Gradient:
    7478                this._swatchElement.title = WI.UIString("Edit custom gradient");
    … …  
    152156        else if (this._valueEditor instanceof WI.SpringEditor)
    153157            this._valueEditor.removeEventListener(WI.SpringEditor.Event.SpringChanged, this._valueEditorValueDidChange, this);
     158        else if (this._valueEditor instanceof WI.AlignmentEditor)
     159            this._valueEditor.removeEventListener(WI.AlignmentEditor.Event.ValueChanged, this._valueEditorValueDidChange, this);
    154160
    155161        this._valueEditor = null;
    … …  
    182188        let value = this.value;
    183189
    184         if (this._type === WI.InlineSwatch.Type.Color || this._type === WI.InlineSwatch.Type.Gradient)
    185             this._swatchInnerElement.style.background = value ? value.toString() : null;
    186         else if (this._type === WI.InlineSwatch.Type.Image)
    187             this._swatchInnerElement.style.setProperty("background-image", `url(${value.src})`);
    188 
    189         if (this._type === WI.InlineSwatch.Type.Color) {
     190        switch (this._type) {
     191        case WI.InlineSwatch.Type.Color:
    190192            if (this._allowChangingColorFormats())
    191193                this._swatchElement.title = WI.UIString("Click to select a color\nShift-click to switch color formats");
    192194            else
    193195                this._swatchElement.title = WI.UIString("Click to select a color");
     196            // fallthrough
     197
     198        case WI.InlineSwatch.Type.Gradient:
     199            this._swatchInnerElement.style.background = value ? value.toString() : null;
     200            break;
     201
     202        case WI.InlineSwatch.Type.Image:
     203            this._swatchInnerElement.style.setProperty("background-image", `url(${value.src})`);
     204            break;
     205
     206        case WI.InlineSwatch.Type.Alignment:
     207            let glyphPath = WI.AlignmentEditor.ValueGlyphs[value] || WI.AlignmentEditor.UnknownValueGlyph;
     208            this._swatchInnerElement.style.backgroundImage = `url(${glyphPath})`;
     209            break;
    194210        }
    195211
    … …  
    286302            break;
    287303
     304        case WI.InlineSwatch.Type.Alignment:
     305            // FIXME: <https://webkit.org/b/233054> Web Inspector: Add a swatch for align-items and align-self
     306            // FIXME: <https://webkit.org/b/233055> Web Inspector: Add a swatch for justify-content, justify-items, and justify-self
     307            this._valueEditor = new WI.AlignmentEditor;
     308            this._valueEditor.addEventListener(WI.AlignmentEditor.Event.ValueChanged, this._valueEditorValueDidChange, this);
     309            break;
     310
    288311        case WI.InlineSwatch.Type.Variable:
    289312            this._valueEditor = {};
    … …  
    330353        case WI.InlineSwatch.Type.Spring:
    331354            this._valueEditor.spring = value;
     355            break;
     356
     357        case WI.InlineSwatch.Type.Alignment:
     358            this._valueEditor.value = value;
    332359            break;
    333360
    … …  
    376403        case WI.InlineSwatch.Type.Spring:
    377404            this._value = event.data.spring;
     405            break;
     406
     407        case WI.InlineSwatch.Type.Alignment:
     408            this._value = event.data.value;
    378409            break;
    379410        }
    … …  
    526557    Variable: "inline-swatch-type-variable",
    527558    Image: "inline-swatch-type-image",
     559    Alignment: "inline-swatch-type-alignment",
    528560};
    529561

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

    r285896 r285983  
    628628    {
    629629        // FIXME: <https://webkit.org/b/178636> Web Inspector: Styles: Make inline widgets work with CSS functions (var(), calc(), etc.)
     630        // FIXME: <https://webkit.org/b/233054> Web Inspector: Add a swatch for align-items and align-self
     631        // FIXME: <https://webkit.org/b/233055> Web Inspector: Add a swatch for justify-content, justify-items, and justify-self
    630632
    631633        if (this._property.name === "box-shadow")
    632634            return this._addBoxShadowTokens(tokens);
     635
     636        if (this._property.name === "align-content")
     637            return this._addAlignmentTokens(tokens);
    633638
    634639        if (this._property.isVariable || WI.CSSKeywordCompletions.isColorAwareProperty(this._property.name)) {
    … …  
    845850    }
    846851
     852    _addAlignmentTokens(tokens)
     853    {
     854        // FIXME: <https://webkit.org/b/233281> Web Inspector: Alignment swatch should handle multi-token values better
     855        let text = this._resolveVariables(tokens.map((token) => token.value).join(""));
     856        let swatch = this._createInlineSwatch(WI.InlineSwatch.Type.Alignment, this._addVariableTokens(tokens), text);
     857        return [swatch];
     858    }
     859
    847860    _addVariableTokens(tokens)
    848861    {
Note: See TracChangeset for help on using the changeset viewer.