Changeset 87140 in webkit


Ignore:
Timestamp:
May 24, 2011 2:24:50 AM (13 years ago)
Author:
podivilov@chromium.org
Message:

2011-05-23 Pavel Podivilov <​podivilov@chromium.org>

Reviewed by Yury Semikhatsky.

Web Inspector: watched expressions buttons do not match inspector styles.
​https://bugs.webkit.org/show_bug.cgi?id=30554

  • WebCore.gypi:
  • inspector/front-end/BreakpointsSidebarPane.js: (WebInspector.XHRBreakpointsSidebarPane):
  • inspector/front-end/Images/deleteIcon.png: Added.
  • inspector/front-end/Images/paneRefreshButtons.png: Added.
  • inspector/front-end/WatchExpressionsSidebarPane.js: (WebInspector.WatchExpressionsSidebarPane.prototype.reset): (WebInspector.WatchExpressionsSidebarPane.prototype._addButtonClicked): (WebInspector.WatchExpressionsSidebarPane.prototype._refreshButtonClicked): (WebInspector.WatchExpressionsSidebarPane.prototype.refreshExpressions): (WebInspector.WatchExpressionsSection): (WebInspector.WatchExpressionsSection.prototype.update.appendResult): (WebInspector.WatchExpressionsSection.prototype.update): (WebInspector.WatchExpressionsSection.prototype.saveExpressions): (WebInspector.WatchExpressionsSection.prototype._mouseMove): (WebInspector.WatchExpressionsSection.prototype._mouseOut): (WebInspector.WatchExpressionsSection.prototype._updateHoveredElement): (WebInspector.WatchExpressionsSection.CompareProperties): (WebInspector.WatchExpressionTreeElement.prototype.update): (WebInspector.WatchExpressionTreeElement.prototype.editingCancelled):
  • inspector/front-end/WebKit.qrc:
  • inspector/front-end/inspector.css: (.properties-tree.watch-expressions): (.properties-tree.watch-expressions li): (.section .properties .delete-button): (.section .properties li.hovered .delete-button): (.pane > .title > .pane-title-button): (.pane > .title > .pane-title-button:hover): (.pane > .title > .pane-title-button:active): (.pane > .title > .pane-title-button.add): (.pane > .title > .pane-title-button.refresh):
Location:
trunk/Source/WebCore
Files:
2 added
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebCore/ChangeLog

    r87139 r87140  
     12011-05-23  Pavel Podivilov  <podivilov@chromium.org>
     2
     3        Reviewed by Yury Semikhatsky.
     4
     5        Web Inspector: watched expressions buttons do not match inspector styles.
     6        https://bugs.webkit.org/show_bug.cgi?id=30554
     7
     8        * WebCore.gypi:
     9        * inspector/front-end/BreakpointsSidebarPane.js:
     10        (WebInspector.XHRBreakpointsSidebarPane):
     11        * inspector/front-end/Images/deleteIcon.png: Added.
     12        * inspector/front-end/Images/paneRefreshButtons.png: Added.
     13        * inspector/front-end/WatchExpressionsSidebarPane.js:
     14        (WebInspector.WatchExpressionsSidebarPane.prototype.reset):
     15        (WebInspector.WatchExpressionsSidebarPane.prototype._addButtonClicked):
     16        (WebInspector.WatchExpressionsSidebarPane.prototype._refreshButtonClicked):
     17        (WebInspector.WatchExpressionsSidebarPane.prototype.refreshExpressions):
     18        (WebInspector.WatchExpressionsSection):
     19        (WebInspector.WatchExpressionsSection.prototype.update.appendResult):
     20        (WebInspector.WatchExpressionsSection.prototype.update):
     21        (WebInspector.WatchExpressionsSection.prototype.saveExpressions):
     22        (WebInspector.WatchExpressionsSection.prototype._mouseMove):
     23        (WebInspector.WatchExpressionsSection.prototype._mouseOut):
     24        (WebInspector.WatchExpressionsSection.prototype._updateHoveredElement):
     25        (WebInspector.WatchExpressionsSection.CompareProperties):
     26        (WebInspector.WatchExpressionTreeElement.prototype.update):
     27        (WebInspector.WatchExpressionTreeElement.prototype.editingCancelled):
     28        * inspector/front-end/WebKit.qrc:
     29        * inspector/front-end/inspector.css:
     30        (.properties-tree.watch-expressions):
     31        (.properties-tree.watch-expressions li):
     32        (.section .properties .delete-button):
     33        (.section .properties li.hovered .delete-button):
     34        (.pane > .title > .pane-title-button):
     35        (.pane > .title > .pane-title-button:hover):
     36        (.pane > .title > .pane-title-button:active):
     37        (.pane > .title > .pane-title-button.add):
     38        (.pane > .title > .pane-title-button.refresh):
     39
    1402011-05-24  Yuta Kitamura  <yutak@chromium.org>
    241

  • trunk/Source/WebCore/WebCore.gypi

    r87130 r87140  
    62866286            'inspector/front-end/Images/debuggerStepOut.png',
    62876287            'inspector/front-end/Images/debuggerStepOver.png',
     6288            'inspector/front-end/Images/deleteIcon.png',
    62886289            'inspector/front-end/Images/disclosureTriangleSmallDown.png',
    62896290            'inspector/front-end/Images/disclosureTriangleSmallDownBlack.png',
    … …  
    63126313            'inspector/front-end/Images/paneBottomGrowActive.png',
    63136314            'inspector/front-end/Images/paneGrowHandleLine.png',
     6315            'inspector/front-end/Images/paneRefreshButtons.png',
    63146316            'inspector/front-end/Images/paneSettingsButtons.png',
    63156317            'inspector/front-end/Images/popoverArrows.png',

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

    r85597 r87140  
    249249
    250250    var addButton = document.createElement("button");
    251     addButton.className = "add";
     251    addButton.className = "pane-title-button add";
    252252    addButton.addEventListener("click", this._addButtonClicked.bind(this), false);
    253253    this.titleElement.appendChild(addButton);

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

    r81570 r87140  
    4444        this.bodyElement.appendChild(this.section.element);
    4545
    46         var addElement = document.createElement("button");
    47         addElement.setAttribute("type", "button");
    48         addElement.textContent = WebInspector.UIString("Add");
    49         addElement.addEventListener("click", this.section.addExpression.bind(this.section), false);
    50 
    51         var refreshElement = document.createElement("button");
    52         refreshElement.setAttribute("type", "button");
    53         refreshElement.textContent = WebInspector.UIString("Refresh");
    54         refreshElement.addEventListener("click", this.section.update.bind(this.section), false);
    55 
    56         var centerElement = document.createElement("div");
    57         centerElement.addStyleClass("watch-expressions-buttons-container");
    58         centerElement.appendChild(addElement);
    59         centerElement.appendChild(refreshElement);
    60         this.bodyElement.appendChild(centerElement);
     46        var refreshButton = document.createElement("button");
     47        refreshButton.className = "pane-title-button refresh";
     48        refreshButton.addEventListener("click", this._refreshButtonClicked.bind(this), false);
     49        this.titleElement.appendChild(refreshButton);
     50
     51        var addButton = document.createElement("button");
     52        addButton.className = "pane-title-button add";
     53        addButton.addEventListener("click", this._addButtonClicked.bind(this), false);
     54        this.titleElement.appendChild(addButton);
    6155
    6256        this.onexpand = this.refreshExpressions.bind(this);
    6357    },
    6458
     59    _addButtonClicked: function(event)
     60    {
     61        event.stopPropagation();
     62        this.expanded = true;
     63        this.section.addExpression();
     64    },
     65
     66    _refreshButtonClicked: function(event)
     67    {
     68        event.stopPropagation();
     69        this.refreshExpressions();
     70    },
     71
    6572    refreshExpressions: function()
    6673    {
    67         if (this.section)
    68             this.section.update();
     74        this.section.update();
    6975    }
    7076}
    … …  
    7783
    7884    WebInspector.ObjectPropertiesSection.call(this);
     85    this.emptyElement = document.createElement("div");
     86    this.emptyElement.className = "info";
     87    this.emptyElement.textContent = WebInspector.UIString("No Watch Expressions");
    7988
    8089    this.watchExpressions = WebInspector.settings.watchExpressions;
    … …  
    8493    this.expanded = true;
    8594    this.propertiesElement.addStyleClass("watch-expressions");
     95
     96    this.element.addEventListener("mousemove", this._mouseMove.bind(this), true);
     97    this.element.addEventListener("mouseout", this._mouseOut.bind(this), true);
    8698}
    8799
    … …  
    89101
    90102WebInspector.WatchExpressionsSection.prototype = {
    91     update: function()
    92     {
     103    update: function(e)
     104    {
     105        e && e.stopPropagation();
     106
    93107        function appendResult(expression, watchIndex, result)
    94108        {
    … …  
    96110            property.watchIndex = watchIndex;
    97111
    98             // To clarify what's going on here: 
     112            // To clarify what's going on here:
    99113            // In the outer function, we calculate the number of properties
    100114            // that we're going to be updating, and set that in the
    101             // propertyCount variable. 
    102             // In this function, we test to see when we are processing the 
    103             // last property, and then call the superclass's updateProperties() 
     115            // propertyCount variable.
     116            // In this function, we test to see when we are processing the
     117            // last property, and then call the superclass's updateProperties()
    104118            // method to get all the properties refreshed at once.
    105119            properties.push(property);
    … …  
    117131                        treeElement.startEditing();
    118132                }
     133
     134                // Force displaying delete button for hovered element.
     135                if (this._lastMouseMovePageY)
     136                    this._updateHoveredElement(this._lastMouseMovePageY);
    119137            }
    120138        }
    … …  
    128146        var propertyCount = 0;
    129147        for (var i = 0; i < this.watchExpressions.length; ++i) {
    130             if (!this.watchExpressions[i]) 
     148            if (!this.watchExpressions[i])
    131149                continue;
    132150            ++propertyCount;
    … …  
    140158                continue;
    141159
    142             WebInspector.console.evalInInspectedWindow("(" + expression + ")", this._watchObjectGroupId, false, appendResult.bind(this, expression, i));
     160            WebInspector.console.evalInInspectedWindow(expression, this._watchObjectGroupId, false, appendResult.bind(this, expression, i));
     161        }
     162
     163        if (!propertyCount) {
     164            if (!this.emptyElement.parentNode)
     165                this.element.appendChild(this.emptyElement);
     166        } else {
     167            if (this.emptyElement.parentNode)
     168                this.element.removeChild(this.emptyElement);
    143169        }
    144170
    … …  
    146172        // with no expressions, and expanded tree, we get some extra vertical
    147173        // white space
    148         // FIXME: should change to use header buttons instead of the buttons
    149         // at the bottom of the section, then we can add a "No Watch Expressions
    150         // element when there are no watch expressions, and this issue should
    151         // go away.
    152174        this.expanded = (propertyCount != 0);
    153175    },
    … …  
    184206        WebInspector.settings.watchExpressions = toSave;
    185207        return toSave.length;
     208    },
     209
     210    _mouseMove: function(e)
     211    {
     212        if (this.propertiesElement.firstChild)
     213            this._updateHoveredElement(e.pageY);
     214    },
     215
     216    _mouseOut: function()
     217    {
     218        if (this._hoveredElement)
     219            this._hoveredElement.removeStyleClass("hovered");
     220        delete this._lastMouseMovePageY;
     221    },
     222
     223    _updateHoveredElement: function(pageY)
     224    {
     225        if (this._hoveredElement)
     226            this._hoveredElement.removeStyleClass("hovered");
     227
     228        this._hoveredElement = this.propertiesElement.firstChild;
     229        while (true) {
     230            var next = this._hoveredElement.nextSibling;
     231            while(next && !next.clientHeight)
     232                next = next.nextSibling;
     233            if (!next || next.totalOffsetTop > pageY)
     234                break;
     235            this._hoveredElement = next;
     236        }
     237        this._hoveredElement.addStyleClass("hovered");
     238
     239        this._lastMouseMovePageY = pageY;
    186240    }
    187241}
    … …  
    189243WebInspector.WatchExpressionsSection.prototype.__proto__ = WebInspector.ObjectPropertiesSection.prototype;
    190244
    191 WebInspector.WatchExpressionsSection.CompareProperties = function(propertyA, propertyB) 
     245WebInspector.WatchExpressionsSection.CompareProperties = function(propertyA, propertyB)
    192246{
    193247    if (propertyA.watchIndex == propertyB.watchIndex)
    … …  
    218272        deleteButton.addStyleClass("delete-button");
    219273        deleteButton.addEventListener("click", this._deleteButtonClicked.bind(this), false);
    220 
    221274        this.listItemElement.insertBefore(deleteButton, this.listItemElement.firstChild);
    222275    },
    … …  
    252305        if (!this.nameElement.textContent)
    253306            this.treeOutline.section.updateExpression(this, null);
    254            
     307
    255308        this.update();
    256309        this.editingEnded(context);

  • trunk/Source/WebCore/inspector/front-end/WebKit.qrc

    r85588 r87140  
    154154    <file>Images/debuggerStepOut.png</file>
    155155    <file>Images/debuggerStepOver.png</file>
     156    <file>Images/deleteIcon.png</file>
    156157    <file>Images/disclosureTriangleSmallDown.png</file>
    157158    <file>Images/disclosureTriangleSmallDownBlack.png</file>
    … …  
    180181    <file>Images/paneBottomGrowActive.png</file>
    181182    <file>Images/paneGrowHandleLine.png</file>
     183    <file>Images/paneRefreshButtons.png</file>
    182184    <file>Images/paneSettingsButtons.png</file>
    183185    <file>Images/popoverArrows.png</file>

  • trunk/Source/WebCore/inspector/front-end/inspector.css

    r85751 r87140  
    13481348}
    13491349
    1350 .watch-expressions-buttons-container {
    1351     text-align: center;
    1352 }
    1353 
    13541350.events-pane .section:not(:nth-of-type(1)) {
    13551351    border-top: 1px solid rgb(191, 191, 191);
    … …  
    15951591}
    15961592
     1593.properties-tree.watch-expressions {
     1594    padding-bottom: 8px;
     1595}
     1596
     1597.properties-tree.watch-expressions li {
     1598    padding-top: 2px;
     1599}
     1600
    15971601.watch-expressions > li.editing-sub-part .name {
    15981602    display: block;
    … …  
    16141618}
    16151619
    1616 /* FIXME: need a better icon (comment in bug 27514) */
    16171620.section .properties .delete-button {
    16181621    width: 10px;
    16191622    height: 10px;
    1620     background-image: url(Images/errorIcon.png);
     1623    background-image: url(Images/deleteIcon.png);
    16211624    background-position: 0 0;
    16221625    background-color: transparent;
    16231626    background-repeat: no-repeat;
    16241627    border: 0 none transparent;
     1628    position: absolute;
     1629    margin-left: -25px;
     1630    margin-top: 2px;
     1631    display: none;
     1632}
     1633
     1634.section .properties li.hovered .delete-button {
     1635    display: inline;
    16251636}
    16261637
    … …  
    17291740}
    17301741
    1731 .pane > .title > button.add {
     1742.pane > .title > .pane-title-button {
    17321743    float: right;
    17331744    width: 23px;
    … …  
    17361747    background-color: transparent;
    17371748    border: none;
    1738     background-image: url(Images/paneAddButtons.png);
    17391749    background-repeat: no-repeat;
    17401750    margin: 1px 0 0 0;
    … …  
    17441754}
    17451755
    1746 .pane > .title > button.add:hover {
     1756.pane > .title > .pane-title-button:hover {
    17471757    background-position: -23px 0px;
    17481758}
    17491759
    1750 .pane > .title > button.add:active {
     1760.pane > .title > .pane-title-button:active {
    17511761    background-position: -46px 0px;
     1762}
     1763
     1764.pane > .title > .pane-title-button.add {
     1765    background-image: url(Images/paneAddButtons.png);
     1766}
     1767
     1768.pane > .title > .pane-title-button.refresh {
     1769    background-image: url(Images/paneRefreshButtons.png);
    17521770}
    17531771
Note: See TracChangeset for help on using the changeset viewer.