⚠ Archived content — this site is no longer maintained.   Current WebKit documentation is at docs.webkit.org.

Changeset 287891 in webkit


Ignore:
Timestamp:
Jan 11, 2022, 10:53:40 AM (5 years ago)
Author:
Nikita Vasilyev
Message:

REGRESSION (r283723): Web Inspector: CSS declarations unexpectedly removed when editing property value
​https://bugs.webkit.org/show_bug.cgi?id=233195

Reviewed by Devin Rousso.

Source/WebInspectorUI:

Re-attach CSS property if it was detached while editing.

CSSProperty is detached when focusing on property name and deleting it. Consequent edits of the detached
CSSProperty were not saved. This patch re-attaches detached property at the previous position.

  • UserInterface/Models/CSSProperty.js:

(WI.CSSProperty.prototype.set name):

  • UserInterface/Models/CSSStyleDeclaration.js:

(WI.CSSStyleDeclaration.prototype.newBlankProperty):
(WI.CSSStyleDeclaration.prototype.insertProperty):
Introduce this method since the logic is used in two different places now.

LayoutTests:

Test removing CSS property name.

  • inspector/css/modify-css-property-expected.txt:
  • inspector/css/modify-css-property.html:
  • inspector/css/resources/modify-css-property.css:

(.rule-e):

Location:
trunk
Files:
7 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r287882 r287891  
     12022-01-11  Nikita Vasilyev  <nvasilyev@apple.com>
     2
     3        REGRESSION (r283723): Web Inspector: CSS declarations unexpectedly removed when editing property value
     4        https://bugs.webkit.org/show_bug.cgi?id=233195
     5
     6        Reviewed by Devin Rousso.
     7
     8        Test removing CSS property name.
     9
     10        * inspector/css/modify-css-property-expected.txt:
     11        * inspector/css/modify-css-property.html:
     12        * inspector/css/resources/modify-css-property.css:
     13        (.rule-e):
     14
    1152022-01-11  Rob Buis  <rbuis@igalia.com>
    216

  • trunk/LayoutTests/inspector/css/modify-css-property-expected.txt

    r283723 r287891  
    4242PASS: Uncommented property should be enabled.
    4343
     44-- Running test case: ModifyCSSProperty.ReplacePropertyName
     45PASS: Style declaration text should be empty.
     46PASS: Style declaration text should have new property name.
     47

  • trunk/LayoutTests/inspector/css/modify-css-property.html

    r283723 r287891  
    314314
    315315            resolve();
     316        }
     317    });
     318
     319    suite.addTestCase({
     320        name: "ModifyCSSProperty.ReplacePropertyName",
     321        async test() {
     322            let getMatchedStyleDeclaration = () => {
     323                for (let rule of nodeStyles.matchedRules) {
     324                    if (rule.selectorText === ".rule-e")
     325                        return rule.style;
     326                }
     327                throw "No declaration found.";
     328            };
     329            let getProperty = (propertyName) => {
     330                let styleDeclaration = getMatchedStyleDeclaration();
     331                for (let property of styleDeclaration.properties) {
     332                    if (property.name === propertyName)
     333                        return property;
     334                }
     335                throw "No property found.";
     336            };
     337            let styleDeclaration = getMatchedStyleDeclaration();
     338
     339            let cssProperty = getProperty("color");
     340            cssProperty.name = "";
     341            InspectorTest.expectEqual(styleDeclaration.text, "", "Style declaration text should be empty.");
     342
     343            cssProperty.name = "border-color";
     344            InspectorTest.expectEqual(styleDeclaration.text, `\n    border-color: darkseagreen;\n`, "Style declaration text should have new property name.");
    316345        }
    317346    });
    … …  
    340369<body onload="runTest()">
    341370    <p>Testing that CSSStyleDeclaration update immediately after modifying its properties when it is not locked.</p>
    342     <div id="x" class="test-node rule-a rule-b rule-c rule-d" style="width: 100px"></div>
     371    <div id="x" class="test-node rule-a rule-b rule-c rule-d rule-e" style="width: 100px"></div>
    343372</body>
    344373</html>

  • trunk/LayoutTests/inspector/css/resources/modify-css-property.css

    r283723 r287891  
    1414}
    1515.rule-d {/*font-size: 13px;*//*border: 2px solid brown*/}
     16.rule-e {
     17    color: darkseagreen;
     18}

  • trunk/Source/WebInspectorUI/ChangeLog

    r287870 r287891  
     12022-01-11  Nikita Vasilyev  <nvasilyev@apple.com>
     2
     3        REGRESSION (r283723): Web Inspector: CSS declarations unexpectedly removed when editing property value
     4        https://bugs.webkit.org/show_bug.cgi?id=233195
     5
     6        Reviewed by Devin Rousso.
     7
     8        Re-attach CSS property if it was detached while editing.
     9
     10        CSSProperty is detached when focusing on property name and deleting it. Consequent edits of the detached
     11        CSSProperty were not saved. This patch re-attaches detached property at the previous position.
     12
     13        * UserInterface/Models/CSSProperty.js:
     14        (WI.CSSProperty.prototype.set name):
     15        * UserInterface/Models/CSSStyleDeclaration.js:
     16        (WI.CSSStyleDeclaration.prototype.newBlankProperty):
     17        (WI.CSSStyleDeclaration.prototype.insertProperty):
     18        Introduce this method since the logic is used in two different places now.
     19
    1202022-01-10  Nikita Vasilyev  <nvasilyev@apple.com>
    221

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

    r283899 r287891  
    257257            return;
    258258
     259        if (!name) {
     260            // Deleting property name causes CSSProperty to be detached from CSSStyleDeclaration.
     261            console.assert(!isNaN(this._index), this);
     262            this._indexBeforeDetached = this._index;
     263        } else if (!isNaN(this._indexBeforeDetached) && isNaN(this._index)) {
     264            // Reattach CSSProperty.
     265            console.assert(!this._ownerStyle.properties.includes(this), this);
     266            this._ownerStyle.insertProperty(this, this._indexBeforeDetached);
     267            this._indexBeforeDetached = NaN;
     268        }
     269
    259270        this._markModified();
    260271        this._name = name;

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

    r286558 r287891  
    391391        this.markModified();
    392392        let property = new WI.CSSProperty(propertyIndex, text, name, value, priority, enabled, overridden, implicit, anonymous, valid, styleSheetTextRange);
    393 
    394         this._properties.insertAtIndex(property, propertyIndex);
    395         for (let index = propertyIndex + 1; index < this._properties.length; index++)
    396             this._properties[index].index = index;
    397 
     393        this.insertProperty(property, propertyIndex);
    398394        this.update(this._text, this._properties, this._styleSheetTextRange, {dontFireEvents: true, forceUpdate: true});
    399395
    … …  
    423419    }
    424420
     421    insertProperty(cssProperty, propertyIndex)
     422    {
     423        this._properties.insertAtIndex(cssProperty, propertyIndex);
     424        for (let index = propertyIndex + 1; index < this._properties.length; index++)
     425            this._properties[index].index = index;
     426
     427        // Invalidate cached properties.
     428        this._enabledProperties = null;
     429        this._visibleProperties = null;
     430    }
     431
    425432    removeProperty(cssProperty)
    426433    {
Note: See TracChangeset for help on using the changeset viewer.