Commit 208a24a1 authored by graouts@apple.com's avatar graouts@apple.com

Web Inspector: highlight newly added console messages in the Activity Viewer

https://bugs.webkit.org/show_bug.cgi?id=122093

Reviewed by Joseph Pecoraro.

Fade the appropriate console log button in the Activity Viewer for a short duration
to call attention to it when its count is incremented. The animation may be restarted
in-flight if the count is incremented as we were pulsing the opacity.

* UserInterface/DashboardView.css:
(.toolbar .dashboard > .item.pulsing):
(@-webkit-keyframes console-item-pulse):
New pulse animation for a console item in the Activity Viewer, the new "pulsing" CSS
class is applied in WebInspector.DashboardView.prototype._setConsoleItemValue().

* UserInterface/DashboardView.js:
(WebInspector.DashboardView.prototype.set logs):
(WebInspector.DashboardView.prototype.set issues):
(WebInspector.DashboardView.prototype.set errors):
Refactor setters to use the new WebInspector.DashboardView.prototype._setConsoleItemValue()
method.

(WebInspector.DashboardView.prototype._setConsoleItemValue):
We now set the ivar backing console item values in this new refactored method and additionally
apply an animation to the DOM element for the given item if its value is incremented such that
it pulses, subtly calling out the developer's attention to it.

* UserInterface/Utilities.js:
New Element.prototype.recalculateStyles() method to abstract the hack required to force
a style recalc on a given element.


git-svn-id: http://svn.webkit.org/repository/webkit/trunk@156765 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent dcfed98f
2013-10-02 Antoine Quint <graouts@apple.com>
Web Inspector: highlight newly added console messages in the Activity Viewer
https://bugs.webkit.org/show_bug.cgi?id=122093
Reviewed by Joseph Pecoraro.
Fade the appropriate console log button in the Activity Viewer for a short duration
to call attention to it when its count is incremented. The animation may be restarted
in-flight if the count is incremented as we were pulsing the opacity.
* UserInterface/DashboardView.css:
(.toolbar .dashboard > .item.pulsing):
(@-webkit-keyframes console-item-pulse):
New pulse animation for a console item in the Activity Viewer, the new "pulsing" CSS
class is applied in WebInspector.DashboardView.prototype._setConsoleItemValue().
* UserInterface/DashboardView.js:
(WebInspector.DashboardView.prototype.set logs):
(WebInspector.DashboardView.prototype.set issues):
(WebInspector.DashboardView.prototype.set errors):
Refactor setters to use the new WebInspector.DashboardView.prototype._setConsoleItemValue()
method.
(WebInspector.DashboardView.prototype._setConsoleItemValue):
We now set the ivar backing console item values in this new refactored method and additionally
apply an animation to the DOM element for the given item if its value is incremented such that
it pulses, subtly calling out the developer's attention to it.
* UserInterface/Utilities.js:
New Element.prototype.recalculateStyles() method to abstract the hack required to force
a style recalc on a given element.
2013-10-01 Antoine Quint <graouts@apple.com>
Web Inspector: evaluate and show a popover for selected text in JS source when paused
......
......@@ -223,3 +223,14 @@ body.window-inactive .toolbar .dashboard {
.toolbar.normal-size.icon-and-label-horizontal .dashboard > .item {
margin: 4px 0;
}
/* Styles for the pulsing animated state of console items */
.toolbar .dashboard > .item.pulsing {
-webkit-animation-name: console-item-pulse;
-webkit-animation-duration: 0.75s;
}
@-webkit-keyframes console-item-pulse {
50% { opacity: 0.6; }
}
......@@ -81,11 +81,7 @@ WebInspector.DashboardView.prototype = {
set logs(logs)
{
this._logs = logs;
var item = this._items.logs;
item.text = this._formatPossibleLargeNumber(logs);
this._setItemEnabled(item, logs > 0);
this._setConsoleItemValue("logs", logs);
},
get issues()
......@@ -95,11 +91,7 @@ WebInspector.DashboardView.prototype = {
set issues(issues)
{
this._issues = issues;
var item = this._items.issues;
item.text = this._formatPossibleLargeNumber(issues);
this._setItemEnabled(item, issues > 0);
this._setConsoleItemValue("issues", issues);
},
get errors()
......@@ -109,11 +101,7 @@ WebInspector.DashboardView.prototype = {
set errors(errors)
{
this._errors = errors;
var item = this._items.errors;
item.text = this._formatPossibleLargeNumber(errors);
this._setItemEnabled(item, errors > 0);
this._setConsoleItemValue("errors", errors);
},
set time(time)
......@@ -212,6 +200,40 @@ WebInspector.DashboardView.prototype = {
WebInspector.showConsoleView(scope);
},
_setConsoleItemValue: function(itemName, newValue)
{
var iVarName = "_" + itemName;
var previousValue = this[iVarName];
this[iVarName] = newValue;
var item = this._items[itemName];
item.text = this._formatPossibleLargeNumber(newValue);
this._setItemEnabled(item, newValue > 0);
if (newValue <= previousValue)
return;
var container = item.container;
function animationEnded(event)
{
if (event.target === container) {
container.classList.remove("pulsing");
container.removeEventListener("webkitAnimationEnd", animationEnded);
}
}
// We need to force a style invalidation in the case where we already
// were animating this item after we've removed the pulsing CSS class.
if (container.classList.contains("pulsing")) {
container.classList.remove("pulsing");
container.recalculateStyles();
} else
container.addEventListener("webkitAnimationEnd", animationEnded);
container.classList.add("pulsing");
},
_setItemEnabled: function(item, enabled)
{
if (enabled)
......
......@@ -486,6 +486,14 @@ Object.defineProperty(Element.prototype, "isScrolledToBottom",
}
});
Object.defineProperty(Element.prototype, "recalculateStyles",
{
value: function()
{
this.ownerDocument.defaultView.getComputedStyle(this);
}
});
Object.defineProperty(DocumentFragment.prototype, "createChild",
{
value: Element.prototype.createChild
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment