Changeset 91070 in webkit


Ignore:
Timestamp:
Jul 15, 2011 8:34:28 AM (13 years ago)
Author:
pfeldman@chromium.org
Message:

Web Inspector: Focusing on another node while editing CSS property does not update styles
​https://bugs.webkit.org/show_bug.cgi?id=64283

Reviewed by Yury Semikhatsky.

Source/WebCore:

Test: inspector/styles/styles-change-node-while-editing.html

  • inspector/front-end/CSSStyleModel.js:

(WebInspector.CSSProperty.prototype.setText):
(WebInspector.CSSProperty.prototype.setText.callback):

  • inspector/front-end/DOMAgent.js:

(WebInspector.DOMAgent.prototype._inlineStyleInvalidated):
(WebInspector.DOMDispatcher.prototype.inlineStyleInvalidated):

  • inspector/front-end/ElementsPanel.js:

(WebInspector.ElementsPanel):
(WebInspector.ElementsPanel.prototype._attributesUpdated):
(WebInspector.ElementsPanel.prototype.updateStyles):

  • inspector/front-end/MetricsSidebarPane.js:

(WebInspector.MetricsSidebarPane):
(WebInspector.MetricsSidebarPane.prototype.update):
(WebInspector.MetricsSidebarPane.prototype._innerUpdate.callback):
(WebInspector.MetricsSidebarPane.prototype._innerUpdate.inlineStyleCallback):
(WebInspector.MetricsSidebarPane.prototype._innerUpdate):
(WebInspector.MetricsSidebarPane.prototype._styleSheetChanged):
(WebInspector.MetricsSidebarPane.prototype._attributesUpdated):
(WebInspector.MetricsSidebarPane.prototype.startEditing):
(WebInspector.MetricsSidebarPane.prototype.editingEnded):

  • inspector/front-end/StylesSidebarPane.js:

(WebInspector.StylesSidebarPane):
(WebInspector.StylesSidebarPane.prototype.update):
(WebInspector.StylesSidebarPane.prototype._innerUpdate.stylesCallback):
(WebInspector.StylesSidebarPane.prototype._innerUpdate.computedStyleCallback):
(WebInspector.StylesSidebarPane.prototype._innerUpdate):
(WebInspector.StylesSidebarPane.prototype._styleSheetChanged):
(WebInspector.StylesSidebarPane.prototype._attributesUpdated):
(WebInspector.StylesSidebarPane.prototype._refreshUpdate):
(WebInspector.StylesSidebarPane.prototype._rebuildUpdate):
(WebInspector.StylesSidebarPane.prototype._nodeStylesUpdatedForTest):
(WebInspector.StylesSidebarPane.prototype._toggleElementStatePane):
(WebInspector.StylesSidebarPane.prototype._createElementStatePane.clickListener):
(WebInspector.StylePropertyTreeElement.prototype):
(WebInspector.StylePropertyTreeElement.prototype.event):
(WebInspector.StylePropertyTreeElement.prototype.element.userInput.previousContent.context.moveDirection):
(WebInspector.StylePropertyTreeElement.prototype.styleText.updateInterface.majorChange.isRevert):

LayoutTests:

  • http/tests/inspector/elements-test.js:

(initialize_ElementTest.InspectorTest.waitForStyles):

  • inspector/styles/styles-change-node-while-editing-expected.txt: Added.
  • inspector/styles/styles-change-node-while-editing.html: Added.
Location:
trunk
Files:
2 added
8 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r91069 r91070  
     12011-07-15  Pavel Feldman  <pfeldman@google.com>
     2
     3        Web Inspector: Focusing on another node while editing CSS property does not update styles
     4        https://bugs.webkit.org/show_bug.cgi?id=64283
     5
     6        Reviewed by Yury Semikhatsky.
     7
     8        * http/tests/inspector/elements-test.js:
     9        (initialize_ElementTest.InspectorTest.waitForStyles):
     10        * inspector/styles/styles-change-node-while-editing-expected.txt: Added.
     11        * inspector/styles/styles-change-node-while-editing.html: Added.
     12
    1132011-07-15  Mike Reed  <reed@google.com>
    214

  • trunk/LayoutTests/http/tests/inspector/elements-test.js

    r89804 r91070  
    8585            return;
    8686        }
    87         InspectorTest.addSniffer(WebInspector.ElementsPanel.prototype, "_stylesUpdated", sniff);
     87        InspectorTest.addSniffer(WebInspector.StylesSidebarPane.prototype, "_nodeStylesUpdatedForTest", sniff);
    8888    })(null);
    8989}

  • trunk/Source/WebCore/ChangeLog

    r91069 r91070  
     12011-07-15  Pavel Feldman  <pfeldman@google.com>
     2
     3        Web Inspector: Focusing on another node while editing CSS property does not update styles
     4        https://bugs.webkit.org/show_bug.cgi?id=64283
     5
     6        Reviewed by Yury Semikhatsky.
     7
     8        Test: inspector/styles/styles-change-node-while-editing.html
     9
     10        * inspector/front-end/CSSStyleModel.js:
     11        (WebInspector.CSSProperty.prototype.setText):
     12        (WebInspector.CSSProperty.prototype.setText.callback):
     13        * inspector/front-end/DOMAgent.js:
     14        (WebInspector.DOMAgent.prototype._inlineStyleInvalidated):
     15        (WebInspector.DOMDispatcher.prototype.inlineStyleInvalidated):
     16        * inspector/front-end/ElementsPanel.js:
     17        (WebInspector.ElementsPanel):
     18        (WebInspector.ElementsPanel.prototype._attributesUpdated):
     19        (WebInspector.ElementsPanel.prototype.updateStyles):
     20        * inspector/front-end/MetricsSidebarPane.js:
     21        (WebInspector.MetricsSidebarPane):
     22        (WebInspector.MetricsSidebarPane.prototype.update):
     23        (WebInspector.MetricsSidebarPane.prototype._innerUpdate.callback):
     24        (WebInspector.MetricsSidebarPane.prototype._innerUpdate.inlineStyleCallback):
     25        (WebInspector.MetricsSidebarPane.prototype._innerUpdate):
     26        (WebInspector.MetricsSidebarPane.prototype._styleSheetChanged):
     27        (WebInspector.MetricsSidebarPane.prototype._attributesUpdated):
     28        (WebInspector.MetricsSidebarPane.prototype.startEditing):
     29        (WebInspector.MetricsSidebarPane.prototype.editingEnded):
     30        * inspector/front-end/StylesSidebarPane.js:
     31        (WebInspector.StylesSidebarPane):
     32        (WebInspector.StylesSidebarPane.prototype.update):
     33        (WebInspector.StylesSidebarPane.prototype._innerUpdate.stylesCallback):
     34        (WebInspector.StylesSidebarPane.prototype._innerUpdate.computedStyleCallback):
     35        (WebInspector.StylesSidebarPane.prototype._innerUpdate):
     36        (WebInspector.StylesSidebarPane.prototype._styleSheetChanged):
     37        (WebInspector.StylesSidebarPane.prototype._attributesUpdated):
     38        (WebInspector.StylesSidebarPane.prototype._refreshUpdate):
     39        (WebInspector.StylesSidebarPane.prototype._rebuildUpdate):
     40        (WebInspector.StylesSidebarPane.prototype._nodeStylesUpdatedForTest):
     41        (WebInspector.StylesSidebarPane.prototype._toggleElementStatePane):
     42        (WebInspector.StylesSidebarPane.prototype._createElementStatePane.clickListener):
     43        (WebInspector.StylePropertyTreeElement.prototype):
     44        (WebInspector.StylePropertyTreeElement.prototype.event):
     45        (WebInspector.StylePropertyTreeElement.prototype.element.userInput.previousContent.context.moveDirection):
     46        (WebInspector.StylePropertyTreeElement.prototype.styleText.updateInterface.majorChange.isRevert):
     47
    1482011-07-15  Mike Reed  <reed@google.com>
    249

  • trunk/Source/WebCore/inspector/front-end/CSSStyleModel.js

    r89922 r91070  
    514514        {
    515515            if (style)
    516                 WebInspector.cssModel._fireStyleSheetChanged(style.id.styleSheetId, majorChange);
    517             if (userCallback)
     516                WebInspector.cssModel._fireStyleSheetChanged(style.id.styleSheetId, majorChange, userCallback ? userCallback.bind(null, style) : null);
     517            else if (userCallback)
    518518                userCallback(style);
    519519        }
    … …  
    531531                }
    532532
    533                 WebInspector.cssModel._fireStyleSheetChanged(style.id.styleSheetId, majorChange, userCallback ? userCallback.bind(this, style) : null);
     533                WebInspector.cssModel._fireStyleSheetChanged(style.id.styleSheetId, majorChange, userCallback ? userCallback.bind(null, style) : null);
    534534            } else {
    535535                if (userCallback)

  • trunk/Source/WebCore/inspector/front-end/DOMAgent.js

    r90460 r91070  
    430430    },
    431431
     432    _inlineStyleInvalidated: function(nodeIds)
     433    {
     434        // FIXME: handle differently (we don't necessarily need to update attributes upon this message).
     435        this._loadNodeAttributesSoon(nodeIds);
     436    },
     437
    432438    _loadNodeAttributesSoon: function(nodeIds)
    433439    {
    … …  
    591597    inlineStyleInvalidated: function(nodeIds)
    592598    {
    593         this._domAgent._attributesUpdated(nodeIds);
     599        this._domAgent._inlineStyleInvalidated(nodeIds);
    594600    },
    595601

  • trunk/Source/WebCore/inspector/front-end/ElementsPanel.js

    r90365 r91070  
    9494    this.sidebarPanes.styles.addEventListener("style property toggled", this._stylesPaneEdited, this);
    9595    this.sidebarPanes.metrics.addEventListener("metrics edited", this._metricsPaneEdited, this);
    96     WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.StyleSheetChanged, this._styleSheetChanged, this);
    9796
    9897    this.sidebarElement = document.createElement("div");
    … …  
    427426    },
    428427
    429     startEditingStyle: function()
    430     {
    431         this._isEditingStyle = true;
    432     },
    433 
    434     endEditingStyle: function()
    435     {
    436         delete this._isEditingStyle;
    437     },
    438 
    439428    _attributesUpdated: function(event)
    440429    {
    … …  
    442431        if (this.visible)
    443432            this._updateModifiedNodesSoon();
    444 
    445         if (!this._isEditingStyle && event.data === this.focusedDOMNode)
    446             this._styleSheetChanged();
    447433    },
    448434
    … …  
    538524        this.sidebarPanes.styles.needsUpdate = true;
    539525        this.updateStyles(true);
    540     },
    541 
    542     _styleSheetChanged: function()
    543     {
    544         this._metricsPaneEdited();
    545         this._stylesPaneEdited();
    546526    },
    547527
    … …  
    1018998        var stylesSidebarPane = this.sidebarPanes.styles;
    1019999        var computedStylePane = this.sidebarPanes.computedStyle;
    1020         if ((!stylesSidebarPane.expanded && !computedStylePane.expanded) || !stylesSidebarPane.needsUpdate || this._isEditingStyle)
    1021             return;
    1022 
    1023         stylesSidebarPane.update(this.focusedDOMNode, null, forceUpdate, this._stylesUpdated.bind(this, this.focusedDOMNode));
     1000        if ((!stylesSidebarPane.expanded && !computedStylePane.expanded) || !stylesSidebarPane.needsUpdate)
     1001            return;
     1002
     1003        stylesSidebarPane.update(this.focusedDOMNode, forceUpdate);
    10241004        stylesSidebarPane.needsUpdate = false;
    1025     },
    1026 
    1027     _stylesUpdated: function(node)
    1028     {
    1029         // This method is overriden in tests.
    10301005    },
    10311006

  • trunk/Source/WebCore/inspector/front-end/MetricsSidebarPane.js

    r86663 r91070  
    3030{
    3131    WebInspector.SidebarPane.call(this, WebInspector.UIString("Metrics"));
     32
     33    WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.StyleSheetChanged, this._styleSheetChanged, this);
     34    WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.AttrModified, this._attributesUpdated, this);
    3235}
    3336
    … …  
    3740        if (node)
    3841            this.node = node;
    39         else
    40             node = this.node;
     42        this._innerUpdate();
     43    },
     44
     45    _innerUpdate: function()
     46    {
     47        // FIXME: avoid updates of a collapsed pane.
     48        var node = this.node;
    4149
    4250        if (!node || node.nodeType() !== Node.ELEMENT_NODE) {
    … …  
    4553        }
    4654
    47         var self = this;
    48         var callback = function(style) {
    49             if (!style)
    50                 return;
    51             self._update(style);
    52         };
    53         WebInspector.cssModel.getComputedStyleAsync(node.id, callback);
    54 
    55         var inlineStyleCallback = function(style) {
    56             if (!style)
    57                 return;
    58             self.inlineStyle = style;
    59         };
    60         WebInspector.cssModel.getInlineStyleAsync(node.id, inlineStyleCallback);
    61     },
     55        function callback(style)
     56        {
     57            if (!style || this.node !== node)
     58                return;
     59            this._updateMetrics(style);
     60        }
     61        WebInspector.cssModel.getComputedStyleAsync(node.id, callback.bind(this));
     62
     63        function inlineStyleCallback(style)
     64        {
     65            if (!style || this.node !== node)
     66                return;
     67            this.inlineStyle = style;
     68        }
     69        WebInspector.cssModel.getInlineStyleAsync(node.id, inlineStyleCallback.bind(this));
     70    },
     71
     72    _styleSheetChanged: function()
     73    {
     74        this._innerUpdate();
     75    },
     76
     77    _attributesUpdated: function(event)
     78    {
     79        if (this.node !== event.data)
     80            return;
     81
     82        // "style" attribute might have changed. Update metrics unless they are being edited.
     83        if (!this._isEditingMetrics)
     84            this._innerUpdate();
     85    },   
    6286
    6387    _getPropertyValueAsPx: function(style, propertyName)
    … …  
    125149    },
    126150
    127     _update: function(style)
     151    _updateMetrics: function(style)
    128152    {
    129153        // Updating with computed style.
    … …  
    273297        targetElement.addEventListener("keydown", boundKeyDown, false);
    274298
    275         WebInspector.panels.elements.startEditingStyle();
     299        this._isEditingMetrics = true;
    276300        WebInspector.startEditing(targetElement, {
    277301            context: context,
    … …  
    341365        delete this.previousPropertyDataCandidate;
    342366        element.removeEventListener("keydown", context.keyDownHandler, false);
    343         WebInspector.panels.elements.endEditingStyle();
     367        delete this._isEditingMetrics;
    344368    },
    345369

  • trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js

    r90630 r91070  
    8484    this._sectionsContainer = document.createElement("div");
    8585    this.bodyElement.appendChild(this._sectionsContainer);
     86
     87    WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.StyleSheetChanged, this._styleSheetChanged, this);
     88    WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.AttrModified, this._attributesUpdated, this);
    8689}
    8790
    … …  
    211214    },
    212215
    213     update: function(node, editedSection, forceUpdate, callback)
     216    update: function(node, forceUpdate)
    214217    {
    215218        var refresh = false;
    … …  
    218221            delete this.node;
    219222
    220         if (!forceUpdate && (!node || node === this.node))
     223        if (!forceUpdate && (node === this.node))
    221224            refresh = true;
    222225
    … …  
    232235            node = this.node;
    233236
     237        this._innerUpdate(refresh, null);
     238    },
     239
     240    _innerUpdate: function(refresh, editedSection)
     241    {
     242        var node = this.node;
    234243        if (!node) {
    235244            this._sectionsContainer.removeChildren();
    236245            this._computedStylePane.bodyElement.removeChildren();
    237246            this.sections = {};
    238             if (callback)
    239                 callback();
    240247            return;
    241248        }
    … …  
    245252            if (this.node === node && styles)
    246253                this._rebuildUpdate(node, styles);
    247             if (callback)
    248                 callback();
    249254        }
    250255
    … …  
    253258            if (this.node === node && computedStyle)
    254259                this._refreshUpdate(node, computedStyle, editedSection);
    255             if (callback)
    256                 callback();
    257260        }
    258261
    … …  
    261264        else
    262265            WebInspector.cssModel.getStylesAsync(node.id, this._forcedPseudoClasses, stylesCallback.bind(this));
     266    },
     267
     268    _styleSheetChanged: function()
     269    {
     270        if (this._userOperation || this._isEditingStyle)
     271            return;
     272
     273        this._innerUpdate(false);
     274    },
     275
     276    _attributesUpdated: function(event)
     277    {
     278        if (this.node !== event.data)
     279            return;
     280
     281        // "style" attribute might have changed. Update styles unless they are being edited.
     282        if (!this._isEditingStyle && !this._userOperation)
     283            this._innerUpdate(false);
    263284    },
    264285
    … …  
    274295        // Trace the computed style.
    275296        this.sections[0][0].rebuildComputedTrace(this.sections[0]);
     297
     298        this._nodeStylesUpdatedForTest(node, true);
    276299    },
    277300
    … …  
    309332            this.sections[pseudoId] = this._rebuildSectionsForStyleRules(styleRules, usedProperties, disabledComputedProperties, pseudoId, anchorElement);
    310333        }
     334
     335        this._nodeStylesUpdatedForTest(node, false);
     336    },
     337
     338    _nodeStylesUpdatedForTest: function(node, refresh)
     339    {
     340        // Tests override this method.
    311341    },
    312342
    … …  
    681711                    this._elementStatePane.inputs[i].checked = false;
    682712                delete this._forcedPseudoClasses;
    683                 this.update(WebInspector.panels.elements.focusedDOMNode, null, true);
     713                this._innerUpdate(false);
    684714            }
    685715        }
    … …  
    703733            }
    704734            this._forcedPseudoClasses = pseudoClasses.length ? pseudoClasses : undefined;
    705             this.update(WebInspector.panels.elements.focusedDOMNode, null, true);
     735            this._innerUpdate(false);
    706736        }
    707737
    … …  
    15821612    },
    15831613
    1584     updateAll: function(updateAllRules)
     1614    _updateAll: function()
    15851615    {
    15861616        if (!this.treeOutline)
    15871617            return;
    1588         if (updateAllRules && this.treeOutline.section && this.treeOutline.section.pane)
    1589             this.treeOutline.section.pane.update(null, this.treeOutline.section);
     1618        if (this.treeOutline.section && this.treeOutline.section.pane)
     1619            this.treeOutline.section.pane._innerUpdate(true, this.treeOutline.section);
    15901620        else if (this.treeOutline.section)
    15911621            this.treeOutline.section.update(true);
    … …  
    16091639                this.treeOutline.section.pane.dispatchEventToListeners("style property toggled");
    16101640
    1611             this.updateAll(true);
     1641            this._updateAll();
    16121642        }
    16131643
    … …  
    17861816
    17871817        delete this.originalPropertyText;
    1788         WebInspector.panels.elements.startEditingStyle();
     1818
     1819        this._parentPane._isEditingStyle = true;
    17891820        WebInspector.startEditing(selectElement, {
    17901821            context: context,
    … …  
    19081939            editedElement.parentElement.removeStyleClass("child-editing");
    19091940
    1910         WebInspector.panels.elements.endEditingStyle();
     1941        delete this._parentPane._isEditingStyle;
    19111942    },
    19121943
    … …  
    19621993        var shouldCommitNewProperty = this._newProperty && (moveToOther || (!moveDirection && !isEditingName) || (isEditingName && blankInput));
    19631994        if (((userInput !== previousContent || isDirtyViaPaste) && !this._newProperty) || shouldCommitNewProperty) {
    1964             WebInspector.panels.elements.startEditingStyle();
    19651995            this.treeOutline.section._afterUpdate = moveToNextCallback.bind(this, this._newProperty, !blankInput, this.treeOutline.section);
    19661996            var propertyText;
    … …  
    19852015        function moveToNextCallback(alreadyNew, valueChanged, section)
    19862016        {
    1987             WebInspector.panels.elements.endEditingStyle();
    1988 
    19892017            if (!moveDirection)
    19902018                return;
    … …  
    20712099        }
    20722100
     2101        var currentNode = this._parentPane.node;
     2102        this._parentPane._userOperation = true;
     2103
    20732104        function callback(originalPropertyText, newStyle)
    20742105        {
     2106            delete this._parentPane._userOperation;
    20752107            if (!newStyle) {
    20762108                if (updateInterface) {
    … …  
    20882120                section.pane.dispatchEventToListeners("style edited");
    20892121
    2090             if (updateInterface)
    2091                 this.updateAll(true);
     2122            if (updateInterface && currentNode === section.pane.node)
     2123                this._updateAll();
    20922124        }
    20932125
Note: See TracChangeset for help on using the changeset viewer.