Diff
Modified: trunk/LayoutTests/ChangeLog (164509 => 164510)
--- trunk/LayoutTests/ChangeLog 2014-02-21 23:44:32 UTC (rev 164509)
+++ trunk/LayoutTests/ChangeLog 2014-02-22 00:01:45 UTC (rev 164510)
@@ -1,3 +1,15 @@
+2014-02-21 Brian Burg <bb...@apple.com>
+
+ Web Inspector: animate breakpoint tree elements when probe samples are received
+ https://bugs.webkit.org/show_bug.cgi?id=128334
+
+ Reviewed by Timothy Hatcher.
+
+ Adjust probe manager tracing listeners to access the correct data container property.
+
+ * inspector-protocol/resources/probe-helper.js:
+ (ProbeHelper.installTracingListeners):
+
2014-02-21 Daniel Bates <daba...@apple.com>
COL element in table has 0 for offsetWidth
Modified: trunk/LayoutTests/inspector-protocol/resources/probe-helper.js (164509 => 164510)
--- trunk/LayoutTests/inspector-protocol/resources/probe-helper.js 2014-02-21 23:44:32 UTC (rev 164509)
+++ trunk/LayoutTests/inspector-protocol/resources/probe-helper.js 2014-02-22 00:01:45 UTC (rev 164510)
@@ -69,14 +69,14 @@
});
WebInspector.probeManager.addEventListener(WebInspector.ProbeManager.Event.ProbeSetAdded, function(event) {
- var probeSet = event.data;
+ var probeSet = event.data.probeSet;
console.assert(probeSet instanceof WebInspector.ProbeSet, "Unexpected object type!");
InspectorTest.log("Probe set was added. New count: " + WebInspector.probeManager.probeSets.length);
});
WebInspector.probeManager.addEventListener(WebInspector.ProbeManager.Event.ProbeSetRemoved, function(event) {
- var probeSet = event.data;
+ var probeSet = event.data.probeSet;
console.assert(probeSet instanceof WebInspector.ProbeSet, "Unexpected object type!");
InspectorTest.log("Probe set was removed. New count: " + WebInspector.probeManager.probeSets.length);
Modified: trunk/Source/WebInspectorUI/ChangeLog (164509 => 164510)
--- trunk/Source/WebInspectorUI/ChangeLog 2014-02-21 23:44:32 UTC (rev 164509)
+++ trunk/Source/WebInspectorUI/ChangeLog 2014-02-22 00:01:45 UTC (rev 164510)
@@ -1,3 +1,51 @@
+2014-02-21 Brian Burg <bb...@apple.com>
+
+ Web Inspector: animate breakpoint tree elements when probe samples are received
+ https://bugs.webkit.org/show_bug.cgi?id=128334
+
+ Reviewed by Timothy Hatcher.
+
+ * UserInterface/BreakpointIcons.css: Removed, rules migrated to the following file.
+
+ * UserInterface/BreakpointTreeElement.css: When we want to animateon top of the
+ static icon, we set the icon image as the icon element's background, and animate
+ a span on top of the icon element.
+
+ (.breakpoint-exception-icon .icon): Moved.
+ (.breakpoint-generic-line-icon .icon):
+ (.breakpoint-generic-line-icon .icon > span): Added.
+ (.data-updated.breakpoint-generic-line-icon .icon > span): Added.
+
+ * UserInterface/BreakpointTreeElement.js:
+ (WebInspector.BreakpointTreeElement): Rewrite event listener add/remove to use EventListenerSet.
+ (WebInspector.BreakpointTreeElement.prototype.ondetach): Override to unregister the instance's listeners.
+ (WebInspector.BreakpointTreeElement.prototype._addProbeSet): Added.
+ (WebInspector.BreakpointTreeElement.prototype._removeProbeSet): Added.
+ (WebInspector.BreakpointTreeElement.prototype._probeSetAdded): Added.
+ (WebInspector.BreakpointTreeElement.prototype._probeSetRemoved): Added.
+ Add/remove listeners when probe sets change.
+
+ (WebInspector.BreakpointTreeElement.prototype._samplesCleared): Listeners should follow
+ the active data table.
+
+ (WebInspector.BreakpointTreeElement.prototype._dataUpdated): Run the animation when probe data changes.
+ (WebInspector.BreakpointTreeElement.prototype._breakpointLocationDidChange): Fix a listener leak.
+ * UserInterface/Main.html: Remove BreakpointIcons.css.
+ * UserInterface/NavigationSidebarPanel.css:
+ (.navigation-sidebar-panel-content-tree-outline .item .icon): give icons
+ 'position: relative' so child spans can be absolutely positioned.
+ * UserInterface/ProbeDetailsSidebarPanel.js: Get probeSet out of the event data
+ container. The probe set used to be passed as the data container itself.
+ (WebInspector.ProbeDetailsSidebarPanel.prototype._probeSetAdded):
+ * UserInterface/ProbeManager.js:
+ (WebInspector.ProbeManager.prototype._breakpointActionsChanged.set get knownProbeIdentifiers):
+ (WebInspector.ProbeManager.prototype._breakpointActionsChanged):
+ (WebInspector.ProbeManager.prototype.get _probeSetForBreakpoint.set this):
+ * UserInterface/ProbeSet.js:
+ (WebInspector.ProbeSet.prototype.clearSamples): include the old data table as the SamplesCleared event data.
+ * UserInterface/TextResourceContentView.js:
+ (WebInspector.TextResourceContentView.prototype._probeSetsChanged):
+
2014-02-21 Joseph Pecoraro <pecor...@apple.com>
Web Inspector: JSContext inspection should report exceptions in the console
Deleted: trunk/Source/WebInspectorUI/UserInterface/BreakpointIcons.css (164509 => 164510)
--- trunk/Source/WebInspectorUI/UserInterface/BreakpointIcons.css 2014-02-21 23:44:32 UTC (rev 164509)
+++ trunk/Source/WebInspectorUI/UserInterface/BreakpointIcons.css 2014-02-22 00:01:45 UTC (rev 164510)
@@ -1,32 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- * notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- * notice, this list of conditions and the following disclaimer in the
- * documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.breakpoint-generic-line-icon .icon {
- content: url(Images/ResultLine.svg);
-}
-
-.breakpoint-exception-icon .icon {
- content: url(Images/Exception.svg);
-}
Modified: trunk/Source/WebInspectorUI/UserInterface/BreakpointTreeElement.css (164509 => 164510)
--- trunk/Source/WebInspectorUI/UserInterface/BreakpointTreeElement.css 2014-02-21 23:44:32 UTC (rev 164509)
+++ trunk/Source/WebInspectorUI/UserInterface/BreakpointTreeElement.css 2014-02-22 00:01:45 UTC (rev 164510)
@@ -1,5 +1,5 @@
/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
+ * Copyright (C) 2013, 2014 Apple Inc. All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions
@@ -45,3 +45,34 @@
.item.breakpoint .subtitle.formatted-location {
font-style: italic;
}
+
+.breakpoint-exception-icon .icon {
+ content: url(Images/Exception.svg);
+}
+
+/* When animating a layer on top of a tree element's icon, move the main
+icon to the icon element's background so animations are layered on top. */
+.breakpoint-generic-line-icon .icon {
+ background-image: url(Images/ResultLine.svg);
+ content: '';
+}
+
+.breakpoint-generic-line-icon .icon > span {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+
+ border-radius: 50%;
+ -webkit-transform: scale(0);
+ -webkit-transition: none;
+ background-color: rgba(76, 102, 143, 1);
+}
+
+.data-updated.breakpoint-generic-line-icon .icon > span {
+ border-radius: 0;
+ -webkit-transform: scale(0.85);
+ -webkit-transition: all .4s ease-out;
+ background-color: rgba(76, 102, 143, 0.1);
+}
Modified: trunk/Source/WebInspectorUI/UserInterface/BreakpointTreeElement.js (164509 => 164510)
--- trunk/Source/WebInspectorUI/UserInterface/BreakpointTreeElement.js 2014-02-21 23:44:32 UTC (rev 164509)
+++ trunk/Source/WebInspectorUI/UserInterface/BreakpointTreeElement.js 2014-02-22 00:01:45 UTC (rev 164510)
@@ -1,5 +1,5 @@
/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
+ * Copyright (C) 2013, 2014 Apple Inc. All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions
@@ -34,16 +34,20 @@
this._breakpoint = breakpoint;
+ this._listeners = new WebInspector.EventListenerSet(this, "BreakpointTreeElement listeners");
if (!title)
- this._breakpoint.addEventListener(WebInspector.Breakpoint.Event.LocationDidChange, this._breakpointLocationDidChange, this);
- this._breakpoint.addEventListener(WebInspector.Breakpoint.Event.DisabledStateDidChange, this._updateStatus, this);
- this._breakpoint.addEventListener(WebInspector.Breakpoint.Event.AutoContinueDidChange, this._updateStatus, this);
- this._breakpoint.addEventListener(WebInspector.Breakpoint.Event.ResolvedStateDidChange, this._updateStatus, this);
+ this._listeners.register(breakpoint, WebInspector.Breakpoint.Event.LocationDidChange, this._breakpointLocationDidChange);
+ this._listeners.register(breakpoint, WebInspector.Breakpoint.Event.DisabledStateDidChange, this._updateStatus);
+ this._listeners.register(breakpoint, WebInspector.Breakpoint.Event.AutoContinueDidChange, this._updateStatus);
+ this._listeners.register(breakpoint, WebInspector.Breakpoint.Event.ResolvedStateDidChange, this._updateStatus);
+ this._listeners.register(WebInspector.probeManager, WebInspector.ProbeManager.Event.ProbeSetAdded, this._probeSetAdded);
+ this._listeners.register(WebInspector.probeManager, WebInspector.ProbeManager.Event.ProbeSetRemoved, this._probeSetRemoved);
+
this._statusImageElement = document.createElement("img");
this._statusImageElement.className = WebInspector.BreakpointTreeElement.StatusImageElementStyleClassName;
- this._statusImageElement.addEventListener("mousedown", this._statusImageElementMouseDown.bind(this));
- this._statusImageElement.addEventListener("click", this._statusImageElementClicked.bind(this));
+ this._listeners.register(this._statusImageElement, "mousedown", this._statusImageElementMouseDown);
+ this._listeners.register(this._statusImageElement, "click", this._statusImageElementClicked);
if (!title)
this._updateTitles();
@@ -51,6 +55,9 @@
this.status = this._statusImageElement;
this.small = true;
+
+ this._iconAnimationLayerElement = document.createElement("span");
+ this.iconElement.appendChild(this._iconAnimationLayerElement);
};
WebInspector.BreakpointTreeElement.GenericLineIconStyleClassName = "breakpoint-generic-line-icon";
@@ -60,7 +67,11 @@
WebInspector.BreakpointTreeElement.StatusImageAutoContinueStyleClassName = "auto-continue";
WebInspector.BreakpointTreeElement.StatusImageDisabledStyleClassName = "disabled";
WebInspector.BreakpointTreeElement.FormattedLocationStyleClassName = "formatted-location";
+WebInspector.BreakpointTreeElement.ProbeDataUpdatedStyleClassName = "data-updated";
+WebInspector.BreakpointTreeElement.ProbeDataUpdatedAnimationDuration = 400; // milliseconds
+
+
WebInspector.BreakpointTreeElement.prototype = {
constructor: WebInspector.BreakpointTreeElement,
@@ -99,6 +110,27 @@
contextMenu.show();
},
+ onattach: function()
+ {
+ WebInspector.GeneralTreeElement.prototype.onattach.call(this);
+
+ this._listeners.install();
+
+ for (var probeSet of WebInspector.probeManager.probeSets)
+ if (probeSet.breakpoint === this._breakpoint)
+ this._addProbeSet(probeSet);
+ },
+
+ ondetach: function()
+ {
+ WebInspector.GeneralTreeElement.prototype.ondetach.call(this);
+
+ this._listeners.uninstall();
+
+ if (this._probeSet)
+ this._removeProbeSet(this._probeSet);
+ },
+
// Private
_updateTitles: function()
@@ -142,18 +174,75 @@
this._statusImageElement.classList.remove(WebInspector.BreakpointTreeElement.StatusImageResolvedStyleClassName);
},
+ _addProbeSet: function(probeSet)
+ {
+ console.assert(probeSet instanceof WebInspector.ProbeSet);
+ console.assert(probeSet.breakpoint === this._breakpoint);
+ console.assert(probeSet !== this._probeSet);
+
+ this._probeSet = probeSet;
+ probeSet.addEventListener(WebInspector.ProbeSet.Event.SamplesCleared, this._samplesCleared, this);
+ probeSet.dataTable.addEventListener(WebInspector.ProbeSetDataTable.Event.FrameInserted, this._dataUpdated, this);
+ },
+
+ _removeProbeSet: function(probeSet)
+ {
+ console.assert(probeSet instanceof WebInspector.ProbeSet);
+ console.assert(probeSet === this._probeSet);
+
+ probeSet.removeEventListener(WebInspector.ProbeSet.Event.SamplesCleared, this._samplesCleared, this);
+ probeSet.dataTable.removeEventListener(WebInspector.ProbeSetDataTable.Event.FrameInserted, this._dataUpdated, this);
+ delete this._probeSet;
+ },
+
+ _probeSetAdded: function(event)
+ {
+ var probeSet = event.data.probeSet;
+ if (probeSet.breakpoint === this._breakpoint)
+ this._addProbeSet(probeSet);
+ },
+
+ _probeSetRemoved: function(event)
+ {
+ var probeSet = event.data.probeSet;
+ if (probeSet.breakpoint === this._breakpoint)
+ this._removeProbeSet(probeSet);
+ },
+
+ _samplesCleared: function(event)
+ {
+ console.assert(this._probeSet);
+
+ var oldTable = event.data.oldTable;
+ oldTable.removeEventListener(WebInspector.ProbeSetDataTable.Event.FrameInserted, this._dataUpdated, this);
+ this._probeSet.dataTable.addEventListener(WebInspector.ProbeSetDataTable.Event.FrameInserted, this._dataUpdated, this);
+ },
+
+ _dataUpdated: function()
+ {
+ if (this.element.classList.contains(WebInspector.BreakpointTreeElement.ProbeDataUpdatedStyleClassName)) {
+ clearTimeout(this._removeIconAnimationTimeoutIdentifier);
+ this.element.classList.remove(WebInspector.BreakpointTreeElement.ProbeDataUpdatedStyleClassName);
+ // We want to restart the animation, which can only be done by removing the class,
+ // performing layout, and re-adding the class. Try adding class back on next run loop.
+ window.requestAnimationFrame(this._dataUpdated.bind(this));
+ return;
+ }
+
+ this.element.classList.add(WebInspector.BreakpointTreeElement.ProbeDataUpdatedStyleClassName);
+ this._removeIconAnimationTimeoutIdentifier = setTimeout(function() {
+ this.element.classList.remove(WebInspector.BreakpointTreeElement.ProbeDataUpdatedStyleClassName);
+ }.bind(this), WebInspector.BreakpointTreeElement.ProbeDataUpdatedAnimationDuration);
+ },
+
+
_breakpointLocationDidChange: function(event)
{
console.assert(event.target === this._breakpoint);
- // The Breakpoint has a new display SourceCode. The sidebar will remove us. Stop listening to the breakpoint.
- if (event.data.oldDisplaySourceCode === this._breakpoint.displaySourceCode) {
- this._breakpoint.addEventListener(WebInspector.Breakpoint.Event.LocationDidChange, this._breakpointLocationDidChange, this);
- this._breakpoint.addEventListener(WebInspector.Breakpoint.Event.DisabledStateDidChange, this._updateStatus, this);
- this._breakpoint.addEventListener(WebInspector.Breakpoint.Event.AutoContinueDidChange, this._updateStatus, this);
- this._breakpoint.addEventListener(WebInspector.Breakpoint.Event.ResolvedStateDidChange, this._updateStatus, this);
+ // The Breakpoint has a new display SourceCode. The sidebar will remove us, and ondetach() will clear listeners.
+ if (event.data.oldDisplaySourceCode === this._breakpoint.displaySourceCode)
return;
- }
this._updateTitles();
},
Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (164509 => 164510)
--- trunk/Source/WebInspectorUI/UserInterface/Main.html 2014-02-21 23:44:32 UTC (rev 164509)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html 2014-02-22 00:01:45 UTC (rev 164510)
@@ -103,7 +103,6 @@
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
- <link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
Modified: trunk/Source/WebInspectorUI/UserInterface/NavigationSidebarPanel.css (164509 => 164510)
--- trunk/Source/WebInspectorUI/UserInterface/NavigationSidebarPanel.css 2014-02-21 23:44:32 UTC (rev 164509)
+++ trunk/Source/WebInspectorUI/UserInterface/NavigationSidebarPanel.css 2014-02-22 00:01:45 UTC (rev 164510)
@@ -190,6 +190,7 @@
.navigation-sidebar-panel-content-tree-outline .item .icon {
float: left;
+ position: relative;
width: 32px;
height: 32px;
Modified: trunk/Source/WebInspectorUI/UserInterface/ProbeDetailsSidebarPanel.js (164509 => 164510)
--- trunk/Source/WebInspectorUI/UserInterface/ProbeDetailsSidebarPanel.js 2014-02-21 23:44:32 UTC (rev 164509)
+++ trunk/Source/WebInspectorUI/UserInterface/ProbeDetailsSidebarPanel.js 2014-02-22 00:01:45 UTC (rev 164510)
@@ -87,7 +87,7 @@
if (probeSetOrEvent instanceof WebInspector.ProbeSet)
probeSet = probeSetOrEvent;
else
- probeSet = probeSetOrEvent.data;
+ probeSet = probeSetOrEvent.data.probeSet;
console.assert(!this._probeSetSections.has(probeSet), "New probe group ", probeSet, " already has its own sidebar.");
var newSection = new WebInspector.ProbeSetDetailsSection(probeSet);
@@ -97,7 +97,7 @@
_probeSetRemoved: function(event)
{
- var probeSet = event.data;
+ var probeSet = event.data.probeSet;
console.assert(this._probeSetSections.has(probeSet), "Removed probe group ", probeSet, " doesn't have a sidebar.");
// First remove probe set from inspected list, then from mapping.
Modified: trunk/Source/WebInspectorUI/UserInterface/ProbeManager.js (164509 => 164510)
--- trunk/Source/WebInspectorUI/UserInterface/ProbeManager.js 2014-02-21 23:44:32 UTC (rev 164509)
+++ trunk/Source/WebInspectorUI/UserInterface/ProbeManager.js 2014-02-22 00:01:45 UTC (rev 164510)
@@ -158,7 +158,7 @@
if (!probeSet.probes.length) {
this._probeSetsByBreakpoint.delete(probeSet.breakpoint);
probeSet.willRemove();
- this.dispatchEventToListeners(WebInspector.ProbeManager.Event.ProbeSetRemoved, probeSet);
+ this.dispatchEventToListeners(WebInspector.ProbeManager.Event.ProbeSetRemoved, {probeSet: probeSet});
}
}, this);
},
@@ -170,7 +170,7 @@
var newProbeSet = new WebInspector.ProbeSet(breakpoint);
this._probeSetsByBreakpoint.set(breakpoint, newProbeSet);
- this.dispatchEventToListeners(WebInspector.ProbeManager.Event.ProbeSetAdded, newProbeSet);
+ this.dispatchEventToListeners(WebInspector.ProbeManager.Event.ProbeSetAdded, {probeSet: newProbeSet});
return newProbeSet;
}
};
Modified: trunk/Source/WebInspectorUI/UserInterface/ProbeSet.js (164509 => 164510)
--- trunk/Source/WebInspectorUI/UserInterface/ProbeSet.js 2014-02-21 23:44:32 UTC (rev 164509)
+++ trunk/Source/WebInspectorUI/UserInterface/ProbeSet.js 2014-02-22 00:01:45 UTC (rev 164510)
@@ -84,8 +84,9 @@
for (var probe of this._probes)
probe.clearSamples();
+ var oldTable = this._dataTable;
this._createDataTable();
- this.dispatchEventToListeners(WebInspector.ProbeSet.Event.SamplesCleared, this);
+ this.dispatchEventToListeners(WebInspector.ProbeSet.Event.SamplesCleared, {oldTable: oldTable});
},
createProbe: function(_expression_)
Modified: trunk/Source/WebInspectorUI/UserInterface/TextResourceContentView.js (164509 => 164510)
--- trunk/Source/WebInspectorUI/UserInterface/TextResourceContentView.js 2014-02-21 23:44:32 UTC (rev 164509)
+++ trunk/Source/WebInspectorUI/UserInterface/TextResourceContentView.js 2014-02-22 00:01:45 UTC (rev 164510)
@@ -234,7 +234,7 @@
_probeSetsChanged: function(event)
{
- var breakpoint = event.data.breakpoint;
+ var breakpoint = event.data.probeSet.breakpoint;
if (breakpoint.sourceCodeLocation.sourceCode === this.resource)
this.dispatchEventToListeners(WebInspector.ContentView.Event.SupplementalRepresentedObjectsDidChange);
}
