<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[164510] trunk</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/164510">164510</a></dd>
<dt>Author</dt> <dd>bburg@apple.com</dd>
<dt>Date</dt> <dd>2014-02-21 16:01:45 -0800 (Fri, 21 Feb 2014)</dd>
</dl>
<h3>Log Message</h3>
<pre>Web Inspector: animate breakpoint tree elements when probe samples are received
https://bugs.webkit.org/show_bug.cgi?id=128334
Reviewed by Timothy Hatcher.
Source/WebInspectorUI:
* 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):
LayoutTests:
Adjust probe manager tracing listeners to access the correct data container property.
* inspector-protocol/resources/probe-helper.js:
(ProbeHelper.installTracingListeners):</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsinspectorprotocolresourcesprobehelperjs">trunk/LayoutTests/inspector-protocol/resources/probe-helper.js</a></li>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceBreakpointTreeElementcss">trunk/Source/WebInspectorUI/UserInterface/BreakpointTreeElement.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceBreakpointTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/BreakpointTreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceMainhtml">trunk/Source/WebInspectorUI/UserInterface/Main.html</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceNavigationSidebarPanelcss">trunk/Source/WebInspectorUI/UserInterface/NavigationSidebarPanel.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceProbeDetailsSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/ProbeDetailsSidebarPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceProbeManagerjs">trunk/Source/WebInspectorUI/UserInterface/ProbeManager.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceProbeSetjs">trunk/Source/WebInspectorUI/UserInterface/ProbeSet.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceTextResourceContentViewjs">trunk/Source/WebInspectorUI/UserInterface/TextResourceContentView.js</a></li>
</ul>
<h3>Removed Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceBreakpointIconscss">trunk/Source/WebInspectorUI/UserInterface/BreakpointIcons.css</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (164509 => 164510)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2014-02-21 23:44:32 UTC (rev 164509)
+++ trunk/LayoutTests/ChangeLog 2014-02-22 00:01:45 UTC (rev 164510)
</span><span class="lines">@@ -1,3 +1,15 @@
</span><ins>+2014-02-21 Brian Burg <bburg@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):
+
</ins><span class="cx"> 2014-02-21 Daniel Bates <dabates@apple.com>
</span><span class="cx">
</span><span class="cx"> COL element in table has 0 for offsetWidth
</span></span></pre></div>
<a id="trunkLayoutTestsinspectorprotocolresourcesprobehelperjs"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/inspector-protocol/resources/probe-helper.js (164509 => 164510)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -69,14 +69,14 @@
</span><span class="cx"> });
</span><span class="cx">
</span><span class="cx"> WebInspector.probeManager.addEventListener(WebInspector.ProbeManager.Event.ProbeSetAdded, function(event) {
</span><del>- var probeSet = event.data;
</del><ins>+ var probeSet = event.data.probeSet;
</ins><span class="cx"> console.assert(probeSet instanceof WebInspector.ProbeSet, "Unexpected object type!");
</span><span class="cx">
</span><span class="cx"> InspectorTest.log("Probe set was added. New count: " + WebInspector.probeManager.probeSets.length);
</span><span class="cx"> });
</span><span class="cx">
</span><span class="cx"> WebInspector.probeManager.addEventListener(WebInspector.ProbeManager.Event.ProbeSetRemoved, function(event) {
</span><del>- var probeSet = event.data;
</del><ins>+ var probeSet = event.data.probeSet;
</ins><span class="cx"> console.assert(probeSet instanceof WebInspector.ProbeSet, "Unexpected object type!");
</span><span class="cx">
</span><span class="cx"> InspectorTest.log("Probe set was removed. New count: " + WebInspector.probeManager.probeSets.length);
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (164509 => 164510)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -1,3 +1,51 @@
</span><ins>+2014-02-21 Brian Burg <bburg@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):
+
</ins><span class="cx"> 2014-02-21 Joseph Pecoraro <pecoraro@apple.com>
</span><span class="cx">
</span><span class="cx"> Web Inspector: JSContext inspection should report exceptions in the console
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceBreakpointIconscss"></a>
<div class="delfile"><h4>Deleted: trunk/Source/WebInspectorUI/UserInterface/BreakpointIcons.css (164509 => 164510)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -1,32 +0,0 @@
</span><del>-/*
- * 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);
-}
</del></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceBreakpointTreeElementcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/BreakpointTreeElement.css (164509 => 164510)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -1,5 +1,5 @@
</span><span class="cx"> /*
</span><del>- * Copyright (C) 2013 Apple Inc. All rights reserved.
</del><ins>+ * Copyright (C) 2013, 2014 Apple Inc. All rights reserved.
</ins><span class="cx"> *
</span><span class="cx"> * Redistribution and use in source and binary forms, with or without
</span><span class="cx"> * modification, are permitted provided that the following conditions
</span><span class="lines">@@ -45,3 +45,34 @@
</span><span class="cx"> .item.breakpoint .subtitle.formatted-location {
</span><span class="cx"> font-style: italic;
</span><span class="cx"> }
</span><ins>+
+.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);
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceBreakpointTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/BreakpointTreeElement.js (164509 => 164510)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -1,5 +1,5 @@
</span><span class="cx"> /*
</span><del>- * Copyright (C) 2013 Apple Inc. All rights reserved.
</del><ins>+ * Copyright (C) 2013, 2014 Apple Inc. All rights reserved.
</ins><span class="cx"> *
</span><span class="cx"> * Redistribution and use in source and binary forms, with or without
</span><span class="cx"> * modification, are permitted provided that the following conditions
</span><span class="lines">@@ -34,16 +34,20 @@
</span><span class="cx">
</span><span class="cx"> this._breakpoint = breakpoint;
</span><span class="cx">
</span><ins>+ this._listeners = new WebInspector.EventListenerSet(this, "BreakpointTreeElement listeners");
</ins><span class="cx"> if (!title)
</span><del>- 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);
</del><ins>+ 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);
</ins><span class="cx">
</span><ins>+ this._listeners.register(WebInspector.probeManager, WebInspector.ProbeManager.Event.ProbeSetAdded, this._probeSetAdded);
+ this._listeners.register(WebInspector.probeManager, WebInspector.ProbeManager.Event.ProbeSetRemoved, this._probeSetRemoved);
+
</ins><span class="cx"> this._statusImageElement = document.createElement("img");
</span><span class="cx"> this._statusImageElement.className = WebInspector.BreakpointTreeElement.StatusImageElementStyleClassName;
</span><del>- this._statusImageElement.addEventListener("mousedown", this._statusImageElementMouseDown.bind(this));
- this._statusImageElement.addEventListener("click", this._statusImageElementClicked.bind(this));
</del><ins>+ this._listeners.register(this._statusImageElement, "mousedown", this._statusImageElementMouseDown);
+ this._listeners.register(this._statusImageElement, "click", this._statusImageElementClicked);
</ins><span class="cx">
</span><span class="cx"> if (!title)
</span><span class="cx"> this._updateTitles();
</span><span class="lines">@@ -51,6 +55,9 @@
</span><span class="cx">
</span><span class="cx"> this.status = this._statusImageElement;
</span><span class="cx"> this.small = true;
</span><ins>+
+ this._iconAnimationLayerElement = document.createElement("span");
+ this.iconElement.appendChild(this._iconAnimationLayerElement);
</ins><span class="cx"> };
</span><span class="cx">
</span><span class="cx"> WebInspector.BreakpointTreeElement.GenericLineIconStyleClassName = "breakpoint-generic-line-icon";
</span><span class="lines">@@ -60,7 +67,11 @@
</span><span class="cx"> WebInspector.BreakpointTreeElement.StatusImageAutoContinueStyleClassName = "auto-continue";
</span><span class="cx"> WebInspector.BreakpointTreeElement.StatusImageDisabledStyleClassName = "disabled";
</span><span class="cx"> WebInspector.BreakpointTreeElement.FormattedLocationStyleClassName = "formatted-location";
</span><ins>+WebInspector.BreakpointTreeElement.ProbeDataUpdatedStyleClassName = "data-updated";
</ins><span class="cx">
</span><ins>+WebInspector.BreakpointTreeElement.ProbeDataUpdatedAnimationDuration = 400; // milliseconds
+
+
</ins><span class="cx"> WebInspector.BreakpointTreeElement.prototype = {
</span><span class="cx"> constructor: WebInspector.BreakpointTreeElement,
</span><span class="cx">
</span><span class="lines">@@ -99,6 +110,27 @@
</span><span class="cx"> contextMenu.show();
</span><span class="cx"> },
</span><span class="cx">
</span><ins>+ 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);
+ },
+
</ins><span class="cx"> // Private
</span><span class="cx">
</span><span class="cx"> _updateTitles: function()
</span><span class="lines">@@ -142,18 +174,75 @@
</span><span class="cx"> this._statusImageElement.classList.remove(WebInspector.BreakpointTreeElement.StatusImageResolvedStyleClassName);
</span><span class="cx"> },
</span><span class="cx">
</span><ins>+ _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);
+ },
+
+
</ins><span class="cx"> _breakpointLocationDidChange: function(event)
</span><span class="cx"> {
</span><span class="cx"> console.assert(event.target === this._breakpoint);
</span><span class="cx">
</span><del>- // 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);
</del><ins>+ // The Breakpoint has a new display SourceCode. The sidebar will remove us, and ondetach() will clear listeners.
+ if (event.data.oldDisplaySourceCode === this._breakpoint.displaySourceCode)
</ins><span class="cx"> return;
</span><del>- }
</del><span class="cx">
</span><span class="cx"> this._updateTitles();
</span><span class="cx"> },
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceMainhtml"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (164509 => 164510)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -103,7 +103,6 @@
</span><span class="cx"> <link rel="stylesheet" href="EventListenerSectionGroup.css">
</span><span class="cx"> <link rel="stylesheet" href="Breakpoint.css">
</span><span class="cx"> <link rel="stylesheet" href="BreakpointActionView.css">
</span><del>- <link rel="stylesheet" href="BreakpointIcons.css">
</del><span class="cx"> <link rel="stylesheet" href="BreakpointTreeElement.css">
</span><span class="cx"> <link rel="stylesheet" href="QuickConsole.css">
</span><span class="cx"> <link rel="stylesheet" href="CallFrameIcons.css">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceNavigationSidebarPanelcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/NavigationSidebarPanel.css (164509 => 164510)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -190,6 +190,7 @@
</span><span class="cx">
</span><span class="cx"> .navigation-sidebar-panel-content-tree-outline .item .icon {
</span><span class="cx"> float: left;
</span><ins>+ position: relative;
</ins><span class="cx">
</span><span class="cx"> width: 32px;
</span><span class="cx"> height: 32px;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceProbeDetailsSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/ProbeDetailsSidebarPanel.js (164509 => 164510)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -87,7 +87,7 @@
</span><span class="cx"> if (probeSetOrEvent instanceof WebInspector.ProbeSet)
</span><span class="cx"> probeSet = probeSetOrEvent;
</span><span class="cx"> else
</span><del>- probeSet = probeSetOrEvent.data;
</del><ins>+ probeSet = probeSetOrEvent.data.probeSet;
</ins><span class="cx"> console.assert(!this._probeSetSections.has(probeSet), "New probe group ", probeSet, " already has its own sidebar.");
</span><span class="cx">
</span><span class="cx"> var newSection = new WebInspector.ProbeSetDetailsSection(probeSet);
</span><span class="lines">@@ -97,7 +97,7 @@
</span><span class="cx">
</span><span class="cx"> _probeSetRemoved: function(event)
</span><span class="cx"> {
</span><del>- var probeSet = event.data;
</del><ins>+ var probeSet = event.data.probeSet;
</ins><span class="cx"> console.assert(this._probeSetSections.has(probeSet), "Removed probe group ", probeSet, " doesn't have a sidebar.");
</span><span class="cx">
</span><span class="cx"> // First remove probe set from inspected list, then from mapping.
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceProbeManagerjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/ProbeManager.js (164509 => 164510)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -158,7 +158,7 @@
</span><span class="cx"> if (!probeSet.probes.length) {
</span><span class="cx"> this._probeSetsByBreakpoint.delete(probeSet.breakpoint);
</span><span class="cx"> probeSet.willRemove();
</span><del>- this.dispatchEventToListeners(WebInspector.ProbeManager.Event.ProbeSetRemoved, probeSet);
</del><ins>+ this.dispatchEventToListeners(WebInspector.ProbeManager.Event.ProbeSetRemoved, {probeSet: probeSet});
</ins><span class="cx"> }
</span><span class="cx"> }, this);
</span><span class="cx"> },
</span><span class="lines">@@ -170,7 +170,7 @@
</span><span class="cx">
</span><span class="cx"> var newProbeSet = new WebInspector.ProbeSet(breakpoint);
</span><span class="cx"> this._probeSetsByBreakpoint.set(breakpoint, newProbeSet);
</span><del>- this.dispatchEventToListeners(WebInspector.ProbeManager.Event.ProbeSetAdded, newProbeSet);
</del><ins>+ this.dispatchEventToListeners(WebInspector.ProbeManager.Event.ProbeSetAdded, {probeSet: newProbeSet});
</ins><span class="cx"> return newProbeSet;
</span><span class="cx"> }
</span><span class="cx"> };
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceProbeSetjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/ProbeSet.js (164509 => 164510)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -84,8 +84,9 @@
</span><span class="cx"> for (var probe of this._probes)
</span><span class="cx"> probe.clearSamples();
</span><span class="cx">
</span><ins>+ var oldTable = this._dataTable;
</ins><span class="cx"> this._createDataTable();
</span><del>- this.dispatchEventToListeners(WebInspector.ProbeSet.Event.SamplesCleared, this);
</del><ins>+ this.dispatchEventToListeners(WebInspector.ProbeSet.Event.SamplesCleared, {oldTable: oldTable});
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> createProbe: function(expression)
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceTextResourceContentViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/TextResourceContentView.js (164509 => 164510)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -234,7 +234,7 @@
</span><span class="cx">
</span><span class="cx"> _probeSetsChanged: function(event)
</span><span class="cx"> {
</span><del>- var breakpoint = event.data.breakpoint;
</del><ins>+ var breakpoint = event.data.probeSet.breakpoint;
</ins><span class="cx"> if (breakpoint.sourceCodeLocation.sourceCode === this.resource)
</span><span class="cx"> this.dispatchEventToListeners(WebInspector.ContentView.Event.SupplementalRepresentedObjectsDidChange);
</span><span class="cx"> }
</span></span></pre>
</div>
</div>
</body>
</html>