Skip to content
Permalink
Browse files
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):

Canonical link: https://commits.webkit.org/76720@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@87140 268f45cc-cd09-0410-ab3c-d52691b4dbfc
  • Loading branch information
Pavel Podivilov committed May 24, 2011
1 parent e851518 commit bbeb43432915d1d4da1275212b93af0263eb3207
@@ -1,3 +1,42 @@
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):

2011-05-24 Yuta Kitamura <yutak@chromium.org>

Reviewed by Kent Tamura.
@@ -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',
@@ -248,7 +248,7 @@ WebInspector.XHRBreakpointsSidebarPane = function()
this._breakpointElements = {};

var addButton = document.createElement("button");
addButton.className = "add";
addButton.className = "pane-title-button add";
addButton.addEventListener("click", this._addButtonClicked.bind(this), false);
this.titleElement.appendChild(addButton);

Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -43,29 +43,35 @@ WebInspector.WatchExpressionsSidebarPane.prototype = {
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 refreshElement = document.createElement("button");
refreshElement.setAttribute("type", "button");
refreshElement.textContent = WebInspector.UIString("Refresh");
refreshElement.addEventListener("click", this.section.update.bind(this.section), false);

var centerElement = document.createElement("div");
centerElement.addStyleClass("watch-expressions-buttons-container");
centerElement.appendChild(addElement);
centerElement.appendChild(refreshElement);
this.bodyElement.appendChild(centerElement);
var refreshButton = document.createElement("button");
refreshButton.className = "pane-title-button refresh";
refreshButton.addEventListener("click", this._refreshButtonClicked.bind(this), false);
this.titleElement.appendChild(refreshButton);

var addButton = document.createElement("button");
addButton.className = "pane-title-button add";
addButton.addEventListener("click", this._addButtonClicked.bind(this), false);
this.titleElement.appendChild(addButton);

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,31 +82,39 @@ WebInspector.WatchExpressionsSection = function()
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;

this.headerElement.className = "hidden";
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 @@ WebInspector.WatchExpressionsSection.prototype = {
if (treeElement)
treeElement.startEditing();
}

// Force displaying delete button for hovered element.
if (this._lastMouseMovePageY)
this._updateHoveredElement(this._lastMouseMovePageY);
}
}

@@ -127,7 +145,7 @@ WebInspector.WatchExpressionsSection.prototype = {
// 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 @@ WebInspector.WatchExpressionsSection.prototype = {
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.WatchExpressionsSection.prototype = {

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 @@ WebInspector.WatchExpressionTreeElement.prototype = {
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 @@ WebInspector.WatchExpressionTreeElement.prototype = {
{
if (!this.nameElement.textContent)
this.treeOutline.section.updateExpression(this, null);

this.update();
this.editingEnded(context);
},
@@ -153,6 +153,7 @@
<file>Images/debuggerStepInto.png</file>
<file>Images/debuggerStepOut.png</file>
<file>Images/debuggerStepOver.png</file>
<file>Images/deleteIcon.png</file>
<file>Images/disclosureTriangleSmallDown.png</file>
<file>Images/disclosureTriangleSmallDownBlack.png</file>
<file>Images/disclosureTriangleSmallDownWhite.png</file>
@@ -179,6 +180,7 @@
<file>Images/paneBottomGrow.png</file>
<file>Images/paneBottomGrowActive.png</file>
<file>Images/paneGrowHandleLine.png</file>
<file>Images/paneRefreshButtons.png</file>
<file>Images/paneSettingsButtons.png</file>
<file>Images/popoverArrows.png</file>
<file>Images/popoverBackground.png</file>
@@ -1347,10 +1347,6 @@ body.inactive .placard.selected {
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 @@ li.editing .swatch, li.editing .enabled-button, li.editing-sub-part .delete-but
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,15 +1617,22 @@ li.editing .swatch, li.editing .enabled-button, li.editing-sub-part .delete-but
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 {
@@ -1728,29 +1739,36 @@ li.editing .swatch, li.editing .enabled-button, li.editing-sub-part .delete-but
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;
-webkit-border-radius: 0;
-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;

0 comments on commit bbeb434

Please sign in to comment.