Changeset 56727 in webkit


Ignore:
Timestamp:
Mar 29, 2010 10:11:06 AM (14 years ago)
Author:
apavlov@chromium.org
Message:

2010-03-29 Alexander Pavlov <​apavlov@chromium.org>

Reviewed by Pavel Feldman.

Web Inspector should highlight when clicking a node's closing tag
​https://bugs.webkit.org/show_bug.cgi?id=16258

LayoutTests:

  • inspector/elements-panel-limited-children.html:

WebCore:

  • inspector/front-end/ElementsTreeOutline.js: (WebInspector.ElementsTreeOutline.prototype.set suppressRevealAndSelect): (WebInspector.ElementsTreeOutline.prototype.revealAndSelectNode): (WebInspector.ElementsTreeOutline.prototype._keyDown): (WebInspector.ElementsTreeOutline.prototype._onmousemove): (WebInspector.ElementsTreeElement): (WebInspector.ElementsTreeElement.prototype.showChild): (WebInspector.ElementsTreeElement.prototype.onpopulate): (WebInspector.ElementsTreeElement.prototype.updateChildren): (WebInspector.ElementsTreeElement.prototype.insertChildElement): (WebInspector.ElementsTreeElement.prototype.moveChild): (WebInspector.ElementsTreeElement.prototype._updateChildren): (WebInspector.ElementsTreeElement.prototype.onexpand): (WebInspector.ElementsTreeElement.prototype.oncollapse): (WebInspector.ElementsTreeElement.prototype.onselect): (WebInspector.ElementsTreeElement.prototype.ondblclick): ():
Location:
trunk
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r56722 r56727  
     12010-03-29  Alexander Pavlov  <apavlov@chromium.org>
     2
     3        Reviewed by Pavel Feldman.
     4
     5        Web Inspector should highlight when clicking a node's closing tag
     6        https://bugs.webkit.org/show_bug.cgi?id=16258
     7
     8        * inspector/elements-panel-limited-children.html:
     9
    1102010-03-29  Csaba Osztrogonác  <ossy@webkit.org>
    211

  • trunk/LayoutTests/inspector/elements-panel-limited-children.html

    r54819 r56727  
    4343        dataElement.appendChild(document.createElement("a"));
    4444        dataElement.removeChild(document.getElementById("id2"));
    45         dataElement.insertBefore(document.createElement("a"), document.getElementById("id1"));
     45        var aElement = document.createElement("a");
     46        dataElement.insertBefore(aElement, document.getElementById("id1"));
     47        dataElement.appendChild(aElement);
     48        dataElement.insertBefore(aElement, document.getElementById("id1"));
    4649        evaluateInWebInspector("frontend_dumpNode", nodeDumpBeforeCallback);
    4750    }

  • trunk/WebCore/ChangeLog

    r56726 r56727  
     12010-03-29  Alexander Pavlov  <apavlov@chromium.org>
     2
     3        Reviewed by Pavel Feldman.
     4
     5        Web Inspector should highlight when clicking a node's closing tag
     6        https://bugs.webkit.org/show_bug.cgi?id=16258
     7
     8        * inspector/front-end/ElementsTreeOutline.js:
     9        (WebInspector.ElementsTreeOutline.prototype.set suppressRevealAndSelect):
     10        (WebInspector.ElementsTreeOutline.prototype.revealAndSelectNode):
     11        (WebInspector.ElementsTreeOutline.prototype._keyDown):
     12        (WebInspector.ElementsTreeOutline.prototype._onmousemove):
     13        (WebInspector.ElementsTreeElement):
     14        (WebInspector.ElementsTreeElement.prototype.showChild):
     15        (WebInspector.ElementsTreeElement.prototype.onpopulate):
     16        (WebInspector.ElementsTreeElement.prototype.updateChildren):
     17        (WebInspector.ElementsTreeElement.prototype.insertChildElement):
     18        (WebInspector.ElementsTreeElement.prototype.moveChild):
     19        (WebInspector.ElementsTreeElement.prototype._updateChildren):
     20        (WebInspector.ElementsTreeElement.prototype.onexpand):
     21        (WebInspector.ElementsTreeElement.prototype.oncollapse):
     22        (WebInspector.ElementsTreeElement.prototype.onselect):
     23        (WebInspector.ElementsTreeElement.prototype.ondblclick):
     24        ():
     25
    1262010-03-29  Marcus Bulach  <bulach@chromium.org>
    227

  • trunk/WebCore/inspector/front-end/ElementsTreeOutline.js

    r56688 r56727  
    183183    },
    184184
     185    set suppressRevealAndSelect(x)
     186    {
     187        if (this._suppressRevealAndSelect === x)
     188            return;
     189        this._suppressRevealAndSelect = x;
     190    },
     191
    185192    revealAndSelectNode: function(node)
    186193    {
    187         if (!node)
     194        if (!node || this._suppressRevealAndSelect)
    188195            return;
    189196
    … …  
    231238        if (event.keyCode === WebInspector.KeyboardShortcut.KeyCodes.Backspace ||
    232239                event.keyCode === WebInspector.KeyboardShortcut.KeyCodes.Delete) {
     240            var startTagTreeElement = this.findTreeElement(selectedElement.representedObject);
     241            if (selectedElement !== startTagTreeElement)
     242                selectedElement = startTagTreeElement;
    233243            selectedElement.remove();
    234244            event.preventDefault();
    … …  
    273283        }
    274284
    275         if (element && !element.elementCloseTag) {
     285        if (element) {
    276286            element.hovered = true;
    277287            this._previousHoveredElement = element;
    278288        }
    279289
    280         WebInspector.hoveredDOMNode = (element && !element.elementCloseTag ? element.representedObject : null);
     290        WebInspector.hoveredDOMNode = (element ? element.representedObject : null);
    281291    },
    282292
    … …  
    315325WebInspector.ElementsTreeOutline.prototype.__proto__ = TreeOutline.prototype;
    316326
    317 WebInspector.ElementsTreeElement = function(node)
     327WebInspector.ElementsTreeElement = function(node, elementCloseTag)
    318328{
    319     var hasChildrenOverride = node.hasChildNodes() && !this._showInlineText(node);
     329    this._elementCloseTag = elementCloseTag;
     330    var hasChildrenOverride = !elementCloseTag && node.hasChildNodes() && !this._showInlineText(node);
    320331
    321332    // The title will be updated in onattach.
    322333    TreeElement.call(this, "", node, hasChildrenOverride);
    323334
    324     if (this.representedObject.nodeType == Node.ELEMENT_NODE)
     335    if (this.representedObject.nodeType == Node.ELEMENT_NODE && !elementCloseTag)
    325336        this._canAddAttributes = true;
    326337    this._searchQuery = null;
    … …  
    393404    {
    394405        var count = this.children.length;
    395         if (count && this.children[count - 1].elementCloseTag)
     406        if (count && this.children[count - 1]._elementCloseTag)
    396407            count--;
    397408        if (count && this.children[count - 1].expandAllButton)
    … …  
    402413    showChild: function(index)
    403414    {
     415        if (this._elementCloseTag)
     416            return;
     417
    404418        if (index >= this.expandedChildrenLimit) {
    405419            this._expandedChildrenLimit = index + 1;
    … …  
    413427    createTooltipForImageNode: function(node, callback)
    414428    {
     429        if (this._elementCloseTag)
     430            return;
     431
    415432        function createTooltipThenCallback(properties)
    416433        {
    … …  
    478495    onpopulate: function()
    479496    {
    480         if (this.children.length || this._showInlineText(this.representedObject))
     497        if (this.children.length || this._showInlineText(this.representedObject) || this._elementCloseTag)
    481498            return;
    482499
    … …  
    486503    updateChildren: function(fullRefresh)
    487504    {
     505        if (this._elementCloseTag)
     506            return;
     507
    488508        WebInspector.domAgent.getChildNodesAsync(this.representedObject, this._updateChildren.bind(this, fullRefresh));
    489509    },
    490510
    491     insertChildElement: function(child, index)
    492     {
    493         var newElement = new WebInspector.ElementsTreeElement(child);
     511    insertChildElement: function(child, index, closingTag)
     512    {
     513        var newElement = new WebInspector.ElementsTreeElement(child, closingTag);
    494514        newElement.selectable = this.treeOutline.selectEnabled;
    495515        this.insertChild(newElement, index);
    … …  
    500520    {
    501521        var wasSelected = child.selected;
    502         treeElement.removeChild(child);
    503         treeElement.insertChild(child, targetIndex);
     522        this.removeChild(child);
     523        this.insertChild(child, targetIndex);
    504524        if (wasSelected)
    505             existingTreeElement.select();
     525            child.select();
    506526    },
    507527
    … …  
    565585        // Remove any tree elements that no longer have this node (or this node's contentDocument) as their parent.
    566586        for (var i = (this.children.length - 1); i >= 0; --i) {
    567             if ("elementCloseTag" in this.children[i])
    568                 continue;
    569 
    570587            var currentChild = this.children[i];
    571588            var currentNode = currentChild.representedObject;
    … …  
    586603
    587604        var lastChild = this.children[this.children.length - 1];
    588         if (this.representedObject.nodeType == Node.ELEMENT_NODE && (!lastChild || !lastChild.elementCloseTag)) {
    589             var title = "<span class=\"webkit-html-tag close\">&lt;/" + this.treeOutline.nodeNameToCorrectCase(this.representedObject.nodeName).escapeHTML() + "&gt;</span>";
    590             var item = new TreeElement(title, null, false);
    591             item.selectable = false;
    592             item.elementCloseTag = true;
    593             this.appendChild(item);
    594         }
     605        if (this.representedObject.nodeType == Node.ELEMENT_NODE && (!lastChild || !lastChild._elementCloseTag))
     606            this.insertChildElement(this.representedObject, this.children.length, true);
    595607
    596608        // We want to restore the original selection and tree scroll position after a full refresh, if possible.
    … …  
    646658    onexpand: function()
    647659    {
     660        if (this._elementCloseTag)
     661            return;
     662
    648663        this.updateTitle();
    649664        this.treeOutline.updateSelection();
    … …  
    652667    oncollapse: function()
    653668    {
     669        if (this._elementCloseTag)
     670            return;
     671
    654672        this.updateTitle();
    655673        this.treeOutline.updateSelection();
    … …  
    664682    onselect: function()
    665683    {
     684        this.treeOutline.suppressRevealAndSelect = true;
    666685        this.treeOutline.focusedDOMNode = this.representedObject;
    667686        this.updateSelection();
     687        this.treeOutline.suppressRevealAndSelect = false;
    668688    },
    669689
    … …  
    688708    ondblclick: function(event)
    689709    {
    690         if (this._editing)
     710        if (this._editing || this._elementCloseTag)
    691711            return;
    692712
    … …  
    12311251    },
    12321252
     1253    _tagHTML: function(tagName, isClosingTag, isDistinctTreeElement, linkify, tooltipText)
     1254    {
     1255        var node = this.representedObject;
     1256        var result = "<span class=\"webkit-html-tag" + (isClosingTag && isDistinctTreeElement ? " close" : "")  + "\">&lt;";
     1257        result += "<span class=\"webkit-html-tag-name\">" + (isClosingTag ? "/" : "") + tagName + "</span>";
     1258        if (!isClosingTag && node.hasAttributes()) {
     1259            for (var i = 0; i < node.attributes.length; ++i) {
     1260                var attr = node.attributes[i];
     1261                result += " " + this._attributeHTML(attr.name, attr.value, node, linkify, tooltipText);
     1262            }
     1263        }
     1264        result += "&gt;</span>&#8203;";
     1265
     1266        return result;
     1267    },
     1268
    12331269    _nodeTitleInfo: function(linkify, tooltipText)
    12341270    {
    … …  
    12471283            case Node.ELEMENT_NODE:
    12481284                var tagName = this.treeOutline.nodeNameToCorrectCase(node.nodeName).escapeHTML();
    1249                 info.title = "<span class=\"webkit-html-tag\">&lt;";
    1250                 info.title += "<span class=\"webkit-html-tag-name\">" + tagName + "</span>";
    1251                 if (node.hasAttributes()) {
    1252                     for (var i = 0; i < node.attributes.length; ++i) {
    1253                         var attr = node.attributes[i];
    1254                         info.title += " " + this._attributeHTML(attr.name, attr.value, node, linkify, tooltipText);
    1255                     }
     1285                if (this._elementCloseTag) {
     1286                    info.title = this._tagHTML(tagName, true, true);
     1287                    info.hasChildren = false;
     1288                    break;
    12561289                }
    1257                 info.title += "&gt;</span>&#8203;";
    1258 
    1259                 const closingTagHTML = "<span class=\"webkit-html-tag\">&lt;/" + tagName + "&gt;</span>&#8203;";
     1290
     1291                info.title = this._tagHTML(tagName, false, false, linkify, tooltipText);
     1292
    12601293                var textChild = onlyTextChild.call(node);
    12611294                var showInlineText = textChild && textChild.textContent.length < Preferences.maxInlineTextChildLength;
    … …  
    12641297                    if (this.hasChildren)
    12651298                        info.title += "<span class=\"webkit-html-text-node\">&#8230;</span>&#8203;";
    1266                     info.title += closingTagHTML;
     1299                    info.title += this._tagHTML(tagName, true, false);
    12671300                }
    12681301
    … …  
    12711304                // create a subtree for them
    12721305                if (showInlineText) {
    1273                     info.title += "<span class=\"webkit-html-text-node\">" + textChild.nodeValue.escapeHTML() + "</span>&#8203;" + closingTagHTML;
     1306                    info.title += "<span class=\"webkit-html-text-node\">" + textChild.nodeValue.escapeHTML() + "</span>&#8203;" + this._tagHTML(tagName, true, false);
    12741307                    info.hasChildren = false;
    12751308                }
Note: See TracChangeset for help on using the changeset viewer.