Modified: trunk/Source/WebCore/WebCore.gypi (87139 => 87140)
--- trunk/Source/WebCore/WebCore.gypi 2011-05-24 09:15:49 UTC (rev 87139)
+++ trunk/Source/WebCore/WebCore.gypi 2011-05-24 09:24:50 UTC (rev 87140)
@@ -6285,6 +6285,7 @@
'inspector/front-end/Images/debuggerStepInto.png',
'inspector/front-end/Images/debuggerStepOut.png',
'inspector/front-end/Images/debuggerStepOver.png',
+ 'inspector/front-end/Images/deleteIcon.png',
'inspector/front-end/Images/disclosureTriangleSmallDown.png',
'inspector/front-end/Images/disclosureTriangleSmallDownBlack.png',
'inspector/front-end/Images/disclosureTriangleSmallDownWhite.png',
@@ -6311,6 +6312,7 @@
'inspector/front-end/Images/paneBottomGrow.png',
'inspector/front-end/Images/paneBottomGrowActive.png',
'inspector/front-end/Images/paneGrowHandleLine.png',
+ 'inspector/front-end/Images/paneRefreshButtons.png',
'inspector/front-end/Images/paneSettingsButtons.png',
'inspector/front-end/Images/popoverArrows.png',
'inspector/front-end/Images/popoverBackground.png',
Modified: trunk/Source/WebCore/inspector/front-end/WatchExpressionsSidebarPane.js (87139 => 87140)
--- trunk/Source/WebCore/inspector/front-end/WatchExpressionsSidebarPane.js 2011-05-24 09:15:49 UTC (rev 87139)
+++ trunk/Source/WebCore/inspector/front-end/WatchExpressionsSidebarPane.js 2011-05-24 09:24:50 UTC (rev 87140)
@@ -43,29 +43,35 @@
this.section = new WebInspector.WatchExpressionsSection();
this.bodyElement.appendChild(this.section.element);
- var addElement = document.createElement("button");
- addElement.setAttribute("type", "button");
- addElement.textContent = WebInspector.UIString("Add");
- addElement.addEventListener("click", this.section.addExpression.bind(this.section), false);
+ var refreshButton = document.createElement("button");
+ refreshButton.className = "pane-title-button refresh";
+ refreshButton.addEventListener("click", this._refreshButtonClicked.bind(this), false);
+ this.titleElement.appendChild(refreshButton);
- var refreshElement = document.createElement("button");
- refreshElement.setAttribute("type", "button");
- refreshElement.textContent = WebInspector.UIString("Refresh");
- refreshElement.addEventListener("click", this.section.update.bind(this.section), false);
+ var addButton = document.createElement("button");
+ addButton.className = "pane-title-button add";
+ addButton.addEventListener("click", this._addButtonClicked.bind(this), false);
+ this.titleElement.appendChild(addButton);
- var centerElement = document.createElement("div");
- centerElement.addStyleClass("watch-expressions-buttons-container");
- centerElement.appendChild(addElement);
- centerElement.appendChild(refreshElement);
- this.bodyElement.appendChild(centerElement);
-
this._onexpand_ = this.refreshExpressions.bind(this);
},
+ _addButtonClicked: function(event)
+ {
+ event.stopPropagation();
+ this.expanded = true;
+ this.section.addExpression();
+ },
+
+ _refreshButtonClicked: function(event)
+ {
+ event.stopPropagation();
+ this.refreshExpressions();
+ },
+
refreshExpressions: function()
{
- if (this.section)
- this.section.update();
+ this.section.update();
}
}
@@ -76,6 +82,9 @@
this._watchObjectGroupId = "watch-group";
WebInspector.ObjectPropertiesSection.call(this);
+ this.emptyElement = document.createElement("div");
+ this.emptyElement.className = "info";
+ this.emptyElement.textContent = WebInspector.UIString("No Watch Expressions");
this.watchExpressions = WebInspector.settings.watchExpressions;
@@ -83,24 +92,29 @@
this.editable = true;
this.expanded = true;
this.propertiesElement.addStyleClass("watch-expressions");
+
+ this.element.addEventListener("mousemove", this._mouseMove.bind(this), true);
+ this.element.addEventListener("mouseout", this._mouseOut.bind(this), true);
}
WebInspector.WatchExpressionsSection.NewWatchExpression = "\xA0";
WebInspector.WatchExpressionsSection.prototype = {
- update: function()
+ update: function(e)
{
+ e && e.stopPropagation();
+
function appendResult(_expression_, watchIndex, result)
{
var property = new WebInspector.RemoteObjectProperty(_expression_, result);
property.watchIndex = watchIndex;
- // To clarify what's going on here:
+ // To clarify what's going on here:
// In the outer function, we calculate the number of properties
// that we're going to be updating, and set that in the
- // propertyCount variable.
- // In this function, we test to see when we are processing the
- // last property, and then call the superclass's updateProperties()
+ // propertyCount variable.
+ // In this function, we test to see when we are processing the
+ // last property, and then call the superclass's updateProperties()
// method to get all the properties refreshed at once.
properties.push(property);
@@ -116,6 +130,10 @@
if (treeElement)
treeElement.startEditing();
}
+
+ // Force displaying delete button for hovered element.
+ if (this._lastMouseMovePageY)
+ this._updateHoveredElement(this._lastMouseMovePageY);
}
}
@@ -127,7 +145,7 @@
// in appendResult()
var propertyCount = 0;
for (var i = 0; i < this.watchExpressions.length; ++i) {
- if (!this.watchExpressions[i])
+ if (!this.watchExpressions[i])
continue;
++propertyCount;
}
@@ -139,16 +157,20 @@
if (!_expression_)
continue;
- WebInspector.console.evalInInspectedWindow("(" + _expression_ + ")", this._watchObjectGroupId, false, appendResult.bind(this, _expression_, i));
+ WebInspector.console.evalInInspectedWindow(_expression_, this._watchObjectGroupId, false, appendResult.bind(this, _expression_, i));
}
+ if (!propertyCount) {
+ if (!this.emptyElement.parentNode)
+ this.element.appendChild(this.emptyElement);
+ } else {
+ if (this.emptyElement.parentNode)
+ this.element.removeChild(this.emptyElement);
+ }
+
// note this is setting the expansion of the tree, not the section;
// with no expressions, and expanded tree, we get some extra vertical
// white space
- // FIXME: should change to use header buttons instead of the buttons
- // at the bottom of the section, then we can add a "No Watch Expressions
- // element when there are no watch expressions, and this issue should
- // go away.
this.expanded = (propertyCount != 0);
},
@@ -183,12 +205,44 @@
WebInspector.settings.watchExpressions = toSave;
return toSave.length;
+ },
+
+ _mouseMove: function(e)
+ {
+ if (this.propertiesElement.firstChild)
+ this._updateHoveredElement(e.pageY);
+ },
+
+ _mouseOut: function()
+ {
+ if (this._hoveredElement)
+ this._hoveredElement.removeStyleClass("hovered");
+ delete this._lastMouseMovePageY;
+ },
+
+ _updateHoveredElement: function(pageY)
+ {
+ if (this._hoveredElement)
+ this._hoveredElement.removeStyleClass("hovered");
+
+ this._hoveredElement = this.propertiesElement.firstChild;
+ while (true) {
+ var next = this._hoveredElement.nextSibling;
+ while(next && !next.clientHeight)
+ next = next.nextSibling;
+ if (!next || next.totalOffsetTop > pageY)
+ break;
+ this._hoveredElement = next;
+ }
+ this._hoveredElement.addStyleClass("hovered");
+
+ this._lastMouseMovePageY = pageY;
}
}
WebInspector.WatchExpressionsSection.prototype.__proto__ = WebInspector.ObjectPropertiesSection.prototype;
-WebInspector.WatchExpressionsSection.CompareProperties = function(propertyA, propertyB)
+WebInspector.WatchExpressionsSection.CompareProperties = function(propertyA, propertyB)
{
if (propertyA.watchIndex == propertyB.watchIndex)
return 0;
@@ -217,7 +271,6 @@
deleteButton.addStyleClass("enabled-button");
deleteButton.addStyleClass("delete-button");
deleteButton.addEventListener("click", this._deleteButtonClicked.bind(this), false);
-
this.listItemElement.insertBefore(deleteButton, this.listItemElement.firstChild);
},
@@ -251,7 +304,7 @@
{
if (!this.nameElement.textContent)
this.treeOutline.section.updateExpression(this, null);
-
+
this.update();
this.editingEnded(context);
},
Modified: trunk/Source/WebCore/inspector/front-end/inspector.css (87139 => 87140)
--- trunk/Source/WebCore/inspector/front-end/inspector.css 2011-05-24 09:15:49 UTC (rev 87139)
+++ trunk/Source/WebCore/inspector/front-end/inspector.css 2011-05-24 09:24:50 UTC (rev 87140)
@@ -1347,10 +1347,6 @@
margin-top: 1px;
}
-.watch-expressions-buttons-container {
- text-align: center;
-}
-
.events-pane .section:not(:nth-of-type(1)) {
border-top: 1px solid rgb(191, 191, 191);
}
@@ -1594,6 +1590,14 @@
display: none !important;
}
+.properties-tree.watch-expressions {
+ padding-bottom: 8px;
+}
+
+.properties-tree.watch-expressions li {
+ padding-top: 2px;
+}
+
.watch-expressions > li.editing-sub-part .name {
display: block;
width: 100%;
@@ -1613,17 +1617,24 @@
text-overflow: clip;
}
-/* FIXME: need a better icon (comment in bug 27514) */
.section .properties .delete-button {
width: 10px;
height: 10px;
- background-image: url(Images/errorIcon.png);
+ background-image: url(Images/deleteIcon.png);
background-position: 0 0;
background-color: transparent;
background-repeat: no-repeat;
border: 0 none transparent;
+ position: absolute;
+ margin-left: -25px;
+ margin-top: 2px;
+ display: none;
}
+.section .properties li.hovered .delete-button {
+ display: inline;
+}
+
.section .properties .name, .event-properties .name {
color: rgb(136, 19, 145);
}
@@ -1728,14 +1739,13 @@
color: black;
}
-.pane > .title > button.add {
+.pane > .title > .pane-title-button {
float: right;
width: 23px;
height: 17px;
color: transparent;
background-color: transparent;
border: none;
- background-image: url(Images/paneAddButtons.png);
background-repeat: no-repeat;
margin: 1px 0 0 0;
padding: 0;
@@ -1743,14 +1753,22 @@
-webkit-appearance: none;
}
-.pane > .title > button.add:hover {
+.pane > .title > .pane-title-button:hover {
background-position: -23px 0px;
}
-.pane > .title > button.add:active {
+.pane > .title > .pane-title-button:active {
background-position: -46px 0px;
}
+.pane > .title > .pane-title-button.add {
+ background-image: url(Images/paneAddButtons.png);
+}
+
+.pane > .title > .pane-title-button.refresh {
+ background-image: url(Images/paneRefreshButtons.png);
+}
+
.pane > .body {
position: relative;
display: none;
