Changeset 188457 in webkit


Ignore:
Timestamp:
Aug 14, 2015 3:46:33 AM (9 years ago)
Author:
Carlos Garcia Campos
Message:

Merge r188429 - Web Inspector: Flash DOM node attribute on change
​https://bugs.webkit.org/show_bug.cgi?id=147973

Reviewed by Timothy Hatcher.

Whenever an attribute on a DOM node changes, flash the attribute value.
If that value doesn't exist, flash the attribute name instead.

  • UserInterface/Views/DOMTreeElement.js:

(WebInspector.DOMTreeElement):
(WebInspector.DOMTreeElement.prototype.nodeChanged):
(WebInspector.DOMTreeElement.prototype._buildAttributeDOM):
If the node has been marked with a general change, mark the attribute element for animation.
(WebInspector.DOMTreeElement.prototype._markNodeChanged.animationEnd):
(WebInspector.DOMTreeElement.prototype._markNodeChanged):
Adds a class to the given element that applies a simple background flash animation.
(WebInspector.DOMTreeElement.prototype._fireDidChange):
Add the animation class once all building of the represented DOM object for that node is done.

  • UserInterface/Views/DOMTreeOutline.css:

(@keyframes node-state-changed):
Applies a semi-transparent background that fades to default.
(.node-state-changed):

  • UserInterface/Views/DOMTreeUpdater.js:

(WebInspector.DOMTreeUpdater.prototype._attributesUpdated):
Now passes along the name of the modified attribute.
(WebInspector.DOMTreeUpdater.prototype._updateModifiedNodes):
If the modified node object has an attribute member, mark the node as being generally changed.

Location:
releases/WebKitGTK/webkit-2.10/Source/WebInspectorUI
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • releases/WebKitGTK/webkit-2.10/Source/WebInspectorUI/ChangeLog

    r188456 r188457  
     12015-08-13  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: Flash DOM node attribute on change
     4        https://bugs.webkit.org/show_bug.cgi?id=147973
     5
     6        Reviewed by Timothy Hatcher.
     7
     8        Whenever an attribute on a DOM node changes, flash the attribute value.
     9        If that value doesn't exist, flash the attribute name instead.
     10
     11        * UserInterface/Views/DOMTreeElement.js:
     12        (WebInspector.DOMTreeElement):
     13        (WebInspector.DOMTreeElement.prototype.nodeChanged):
     14        (WebInspector.DOMTreeElement.prototype._buildAttributeDOM):
     15        If the node has been marked with a general change, mark the attribute element for animation.
     16        (WebInspector.DOMTreeElement.prototype._markNodeChanged.animationEnd):
     17        (WebInspector.DOMTreeElement.prototype._markNodeChanged):
     18        Adds a class to the given element that applies a simple background flash animation.
     19        (WebInspector.DOMTreeElement.prototype._fireDidChange):
     20        Add the animation class once all building of the represented DOM object for that node is done.
     21
     22        * UserInterface/Views/DOMTreeOutline.css:
     23        (@keyframes node-state-changed):
     24        Applies a semi-transparent background that fades to default.
     25        (.node-state-changed):
     26
     27        * UserInterface/Views/DOMTreeUpdater.js:
     28        (WebInspector.DOMTreeUpdater.prototype._attributesUpdated):
     29        Now passes along the name of the modified attribute.
     30        (WebInspector.DOMTreeUpdater.prototype._updateModifiedNodes):
     31        If the modified node object has an attribute member, mark the node as being generally changed.
     32
    1332015-08-13  Devin Rousso  <drousso@apple.com>
    234

  • releases/WebKitGTK/webkit-2.10/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js

    r188343 r188457  
    4242        this._searchQuery = null;
    4343        this._expandedChildrenLimit = WebInspector.DOMTreeElement.InitialChildrenLimit;
     44        this._nodeStateChanges = [];
    4445    }
    4546
    … …  
    191192            count--;
    192193        return count;
     194    }
     195
     196    nodeStateChanged(change)
     197    {
     198        if (!change)
     199            return;
     200
     201        this._nodeStateChanges.push(change);
    193202    }
    194203
    … …  
    10711080    _buildAttributeDOM(parentElement, name, value, node)
    10721081    {
    1073         var hasText = (value.length > 0);
    1074         var attrSpanElement = parentElement.createChild("span", "html-attribute");
    1075         var attrNameElement = attrSpanElement.createChild("span", "html-attribute-name");
     1082        let hasText = (value.length > 0);
     1083        let attrSpanElement = parentElement.createChild("span", "html-attribute");
     1084        let attrNameElement = attrSpanElement.createChild("span", "html-attribute-name");
    10761085        attrNameElement.textContent = name;
    1077 
     1086        let attrValueElement = null;
    10781087        if (hasText)
    10791088            attrSpanElement.append("=\u200B\"");
    10801089
    10811090        if (name === "src" || name === "href") {
    1082             var baseURL = node.ownerDocument ? node.ownerDocument.documentURL : null;
    1083             var rewrittenURL = absoluteURL(value, baseURL);
    1084 
     1091            let baseURL = node.ownerDocument ? node.ownerDocument.documentURL : null;
     1092            let rewrittenURL = absoluteURL(value, baseURL);
    10851093            value = value.insertWordBreakCharacters();
    1086 
    10871094            if (!rewrittenURL) {
    1088                 var attrValueElement = attrSpanElement.createChild("span", "html-attribute-value");
     1095                attrValueElement = attrSpanElement.createChild("span", "html-attribute-value");
    10891096                attrValueElement.textContent = value;
    10901097            } else {
    … …  
    10921099                    value = value.trimMiddle(60);
    10931100
    1094                 var linkElement = document.createElement("a");
    1095                 linkElement.href = rewrittenURL;
    1096                 linkElement.textContent = value;
    1097 
    1098                 attrSpanElement.appendChild(linkElement);
     1101                attrValueElement = document.createElement("a");
     1102                attrValueElement.href = rewrittenURL;
     1103                attrValueElement.textContent = value;
     1104                attrSpanElement.appendChild(attrValueElement);
    10991105            }
    11001106        } else {
    11011107            value = value.insertWordBreakCharacters();
    1102             var attrValueElement = attrSpanElement.createChild("span", "html-attribute-value");
     1108            attrValueElement = attrSpanElement.createChild("span", "html-attribute-value");
    11031109            attrValueElement.textContent = value;
    11041110        }
    … …  
    11061112        if (hasText)
    11071113            attrSpanElement.append("\"");
     1114
     1115        for (let change of this._nodeStateChanges) {
     1116            if (change.type === WebInspector.DOMTreeElement.ChangeType.Attribute && change.attribute === name)
     1117                change.element = hasText ? attrValueElement : attrNameElement;
     1118        }
    11081119    }
    11091120
    … …  
    14501461    }
    14511462
     1463    _markNodeChanged()
     1464    {
     1465        function animationEnd() {
     1466            this.classList.remove("node-state-changed");
     1467            this.removeEventListener("animationEnd", animationEnd);
     1468        }
     1469
     1470        for (let change of this._nodeStateChanges) {
     1471            let element = change.element;
     1472            if (!element)
     1473                continue;
     1474
     1475            element.classList.remove("node-state-changed");
     1476            element.addEventListener("animationEnd", animationEnd);
     1477            element.classList.add("node-state-changed");
     1478        }
     1479
     1480        this._nodeStateChanges = [];
     1481    }
     1482
     1483    _fireDidChange()
     1484    {
     1485        super._fireDidChange();
     1486
     1487        if (this._nodeStateChanges)
     1488            this._markNodeChanged();
     1489    }
     1490
    14521491    handleEvent(event)
    14531492    {
    … …  
    14731512].keySet();
    14741513
     1514WebInspector.DOMTreeElement.ChangeType = {
     1515    Attribute: "dom-tree-element-change-type-attribute"
     1516};
     1517
    14751518WebInspector.DOMTreeElement.SearchHighlightStyleClassName = "search-highlight";
    14761519WebInspector.DOMTreeElement.BouncyHighlightStyleClassName = "bouncy-highlight";

  • releases/WebKitGTK/webkit-2.10/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css

    r188260 r188457  
    166166    border-bottom: 1px solid hsl(47, 82%, 60%);
    167167}
     168
     169@keyframes node-state-changed {
     170    from { background-color: hsla(212, 92%, 54%, 0.5); }
     171}
     172
     173.node-state-changed {
     174    animation: node-state-changed 1s cubic-bezier(0, 0, 0.25, 1);
     175    border-radius: 3px;
     176}

  • releases/WebKitGTK/webkit-2.10/Source/WebInspectorUI/UserInterface/Views/DOMTreeUpdater.js

    r180344 r188457  
    5656    _attributesUpdated: function(event)
    5757    {
    58         this._recentlyModifiedNodes.push({node: event.data.node, updated: true});
     58        this._recentlyModifiedNodes.push({node: event.data.node, updated: true, attribute: event.data.name});
    5959        if (this._treeOutline._visible)
    6060            this._updateModifiedNodesSoon();
    … …  
    100100        if (this._updateModifiedNodesTimeout) {
    101101            clearTimeout(this._updateModifiedNodesTimeout);
    102             delete this._updateModifiedNodesTimeout;
     102            this._updateModifiedNodesTimeout = null;
    103103        }
    104104
    105         var updatedParentTreeElements = [];
     105        let updatedParentTreeElements = [];
     106        for (let recentlyModifiedNode of this._recentlyModifiedNodes) {
     107            let parent = recentlyModifiedNode.parent;
     108            let node = recentlyModifiedNode.node;
     109            let changeInfo = null;
     110            if (recentlyModifiedNode.attribute)
     111                changeInfo = {type: WebInspector.DOMTreeElement.ChangeType.Attribute, attribute: recentlyModifiedNode.attribute};
    106112
    107         for (var i = 0; i < this._recentlyModifiedNodes.length; ++i) {
    108             var parent = this._recentlyModifiedNodes[i].parent;
    109             var node = this._recentlyModifiedNodes[i].node;
     113            if (recentlyModifiedNode.updated) {
     114                let nodeTreeElement = this._treeOutline.findTreeElement(node);
     115                if (!nodeTreeElement)
     116                    continue;
    110117
    111             if (this._recentlyModifiedNodes[i].updated) {
    112                 var nodeItem = this._treeOutline.findTreeElement(node);
    113                 if (nodeItem)
    114                     nodeItem.updateTitle();
    115                 continue;
     118                if (changeInfo)
     119                    nodeTreeElement.nodeStateChanged(changeInfo);
     120
     121                nodeTreeElement.updateTitle();
    116122            }
    117123
    … …  
    119125                continue;
    120126
    121             var parentNodeItem = this._treeOutline.findTreeElement(parent);
     127            let parentNodeItem = this._treeOutline.findTreeElement(parent);
    122128            if (parentNodeItem && !parentNodeItem.alreadyUpdatedChildren) {
    123129                parentNodeItem.updateTitle();
    … …  
    128134        }
    129135
    130         for (var i = 0; i < updatedParentTreeElements.length; ++i)
    131             delete updatedParentTreeElements[i].alreadyUpdatedChildren;
     136        for (let i = 0; i < updatedParentTreeElements.length; ++i)
     137            updatedParentTreeElements[i].alreadyUpdatedChildren = null;
    132138
    133139        this._recentlyModifiedNodes = [];
Note: See TracChangeset for help on using the changeset viewer.