<!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>[56613] trunk/WebCore</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/56613">56613</a></dd>
<dt>Author</dt> <dd>pfeldman@chromium.org</dd>
<dt>Date</dt> <dd>2010-03-26 01:05:08 -0700 (Fri, 26 Mar 2010)</dd>
</dl>

<h3>Log Message</h3>
<pre>2010-03-25  Ilya Tikhonovsky  &lt;loislo@chromium.org&gt;

        Reviewed by Pavel Feldman.

        Web Inspector: Shot record filter is implemented in Timeline Panel.
        https://bugs.webkit.org/show_bug.cgi?id=36606

        * English.lproj/localizedStrings.js:
        * inspector/front-end/TimelinePanel.js:
        (WebInspector.TimelinePanel):
        (WebInspector.TimelinePanel.prototype.get statusBarItems):
        (WebInspector.TimelinePanel.prototype._createStatusbarButtons):
        (WebInspector.TimelinePanel.prototype._toggleFilterButtonClicked):
        (WebInspector.TimelinePanel.prototype._innerAddRecordToTimeline):
        (WebInspector.TimelinePanel.prototype._addToRecordsWindow):
        (WebInspector.TimelineRecordGraphRow.prototype.update):
        (WebInspector.TimelinePanel.FormattedRecord.prototype.get _isLongEvent):
        * inspector/front-end/inspector.css:</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkWebCoreChangeLog">trunk/WebCore/ChangeLog</a></li>
<li><a href="#trunkWebCoreEnglishlprojlocalizedStringsjs">trunk/WebCore/English.lproj/localizedStrings.js</a></li>
<li><a href="#trunkWebCoreinspectorfrontendTimelinePaneljs">trunk/WebCore/inspector/front-end/TimelinePanel.js</a></li>
<li><a href="#trunkWebCoreinspectorfrontendinspectorcss">trunk/WebCore/inspector/front-end/inspector.css</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/WebCore/ChangeLog (56612 => 56613)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/WebCore/ChangeLog        2010-03-26 07:58:07 UTC (rev 56612)
+++ trunk/WebCore/ChangeLog        2010-03-26 08:05:08 UTC (rev 56613)
</span><span class="lines">@@ -1,3 +1,22 @@
</span><ins>+2010-03-25  Ilya Tikhonovsky  &lt;loislo@chromium.org&gt;
+
+        Reviewed by Pavel Feldman.
+
+        Web Inspector: Shot record filter is implemented in Timeline Panel.
+        https://bugs.webkit.org/show_bug.cgi?id=36606
+
+        * English.lproj/localizedStrings.js:
+        * inspector/front-end/TimelinePanel.js:
+        (WebInspector.TimelinePanel):
+        (WebInspector.TimelinePanel.prototype.get statusBarItems):
+        (WebInspector.TimelinePanel.prototype._createStatusbarButtons):
+        (WebInspector.TimelinePanel.prototype._toggleFilterButtonClicked):
+        (WebInspector.TimelinePanel.prototype._innerAddRecordToTimeline):
+        (WebInspector.TimelinePanel.prototype._addToRecordsWindow):
+        (WebInspector.TimelineRecordGraphRow.prototype.update):
+        (WebInspector.TimelinePanel.FormattedRecord.prototype.get _isLongEvent):
+        * inspector/front-end/inspector.css:
+
</ins><span class="cx"> 2010-03-25  Pavel Feldman  &lt;pfeldman@chromium.org&gt;
</span><span class="cx"> 
</span><span class="cx">         Reviewed by Timothy Hatcher.
</span></span></pre></div>
<a id="trunkWebCoreEnglishlprojlocalizedStringsjs"></a>
<div class="binary"><h4>Modified: trunk/WebCore/English.lproj/localizedStrings.js</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<a id="trunkWebCoreinspectorfrontendTimelinePaneljs"></a>
<div class="modfile"><h4>Modified: trunk/WebCore/inspector/front-end/TimelinePanel.js (56612 => 56613)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/WebCore/inspector/front-end/TimelinePanel.js        2010-03-26 07:58:07 UTC (rev 56612)
+++ trunk/WebCore/inspector/front-end/TimelinePanel.js        2010-03-26 08:05:08 UTC (rev 56613)
</span><span class="lines">@@ -83,10 +83,15 @@
</span><span class="cx">     this._timerRecords = {};
</span><span class="cx"> 
</span><span class="cx">     this._calculator = new WebInspector.TimelineCalculator();
</span><ins>+    this._calculator._showShortEvents = false;
</ins><span class="cx">     this._boundariesAreValid = true;
</span><span class="cx">     this._scrollTop = 0;
</span><span class="cx"> 
</span><span class="cx">     this._popoverHelper = new WebInspector.PopoverHelper(this._containerElement, this._getPopoverAnchor.bind(this), this._showPopover.bind(this), true);
</span><ins>+
+    // Disable short events filter by default.
+    this.toggleFilterButton.toggled = true;
+    this._calculator._showShortEvents = this.toggleFilterButton.toggled;
</ins><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> WebInspector.TimelinePanel.prototype = {
</span><span class="lines">@@ -99,7 +104,7 @@
</span><span class="cx"> 
</span><span class="cx">     get statusBarItems()
</span><span class="cx">     {
</span><del>-        return [this.toggleTimelineButton.element, this.clearButton.element];
</del><ins>+        return [this.toggleFilterButton.element, this.toggleTimelineButton.element, this.clearButton.element];
</ins><span class="cx">     },
</span><span class="cx"> 
</span><span class="cx">     get categories()
</span><span class="lines">@@ -148,11 +153,14 @@
</span><span class="cx"> 
</span><span class="cx">     _createStatusbarButtons: function()
</span><span class="cx">     {
</span><del>-        this.toggleTimelineButton = new WebInspector.StatusBarButton(&quot;&quot;, &quot;record-profile-status-bar-item&quot;);
</del><ins>+        this.toggleTimelineButton = new WebInspector.StatusBarButton(WebInspector.UIString(&quot;Record&quot;), &quot;record-profile-status-bar-item&quot;);
</ins><span class="cx">         this.toggleTimelineButton.addEventListener(&quot;click&quot;, this._toggleTimelineButtonClicked.bind(this), false);
</span><span class="cx"> 
</span><del>-        this.clearButton = new WebInspector.StatusBarButton(&quot;&quot;, &quot;timeline-clear-status-bar-item&quot;);
</del><ins>+        this.clearButton = new WebInspector.StatusBarButton(WebInspector.UIString(&quot;Clear&quot;), &quot;timeline-clear-status-bar-item&quot;);
</ins><span class="cx">         this.clearButton.addEventListener(&quot;click&quot;, this._clearPanel.bind(this), false);
</span><ins>+
+        this.toggleFilterButton = new WebInspector.StatusBarButton(WebInspector.UIString(&quot;Show short records&quot;), &quot;timeline-filter-status-bar-item&quot;);
+        this.toggleFilterButton.addEventListener(&quot;click&quot;, this._toggleFilterButtonClicked.bind(this), false);
</ins><span class="cx">     },
</span><span class="cx"> 
</span><span class="cx">     _toggleTimelineButtonClicked: function()
</span><span class="lines">@@ -165,6 +173,13 @@
</span><span class="cx">         }
</span><span class="cx">     },
</span><span class="cx"> 
</span><ins>+    _toggleFilterButtonClicked: function()
+    {
+        this.toggleFilterButton.toggled = !this.toggleFilterButton.toggled;
+        this._calculator._showShortEvents = this.toggleFilterButton.toggled;
+        this._scheduleRefresh(true);
+    },
+
</ins><span class="cx">     timelineWasStarted: function()
</span><span class="cx">     {
</span><span class="cx">         this.toggleTimelineButton.toggled = true;
</span><span class="lines">@@ -218,22 +233,10 @@
</span><span class="cx">         if (parentRecord === this._rootRecord)
</span><span class="cx">             formattedRecord.collapsed = true;
</span><span class="cx"> 
</span><del>-        // Glue subsequent records with same category and title together if they are closer than 100ms to each other.
-        var lastRecord = parentRecord._lastRecord;
-        if (lastRecord &amp;&amp; (!record.children || !record.children.length) &amp;&amp;
-                lastRecord.category == formattedRecord.category &amp;&amp;
-                lastRecord.title == formattedRecord.title &amp;&amp;
-                lastRecord.details == formattedRecord.details &amp;&amp;
-                lastRecord.callerScriptName == formattedRecord.callerScriptName &amp;&amp;
-                lastRecord.callerScriptLine == formattedRecord.callerScriptLine &amp;&amp;
-                formattedRecord.startTime - lastRecord.endTime &lt; 0.1) {
-            lastRecord.endTime = formattedRecord.endTime;
-            lastRecord.count++;
-        } else {
-            for (var i = 0; record.children &amp;&amp; i &lt; record.children.length; ++i)
-                this._innerAddRecordToTimeline(record.children[i], formattedRecord);
-            parentRecord._lastRecord = record.children &amp;&amp; record.children.length ? null : formattedRecord;
-        }
</del><ins>+        var hasLongChildrenEvents = false;
+        for (var i = 0; record.children &amp;&amp; i &lt; record.children.length; ++i)
+            hasLongChildrenEvents |= this._innerAddRecordToTimeline(record.children[i], formattedRecord);
+        formattedRecord._hasLongChildrenEvents = hasLongChildrenEvents;
</ins><span class="cx"> 
</span><span class="cx">         if (connectedToOldRecord) {
</span><span class="cx">             var record = formattedRecord;
</span><span class="lines">@@ -241,7 +244,18 @@
</span><span class="cx">                 record.parent._lastChildEndTime = record._lastChildEndTime;
</span><span class="cx">                 record = record.parent;
</span><span class="cx">             }
</span><ins>+            // We have attached a fresh event record received from Timeline Agent to some old event record.
+            // If that old parent record haven't had long children events and new child record has it
+            // then we want to propagate _hasLongChildrenEvents flag to parent, grand-parent etc.
+            if (record._isLongEvent()) {
+                record = formattedRecord;
+                while (record.parent &amp;&amp; !record.parent._isLongEvent()) {
+                    record = record.parent;
+                    record._hasLongChildrenEvents = true;
+                }
+            }
</ins><span class="cx">         }
</span><ins>+        return hasLongChildrenEvents || formattedRecord._isLongEvent();
</ins><span class="cx">     },
</span><span class="cx"> 
</span><span class="cx">     setSidebarWidth: function(width)
</span><span class="lines">@@ -268,7 +282,6 @@
</span><span class="cx">     {
</span><span class="cx">         var rootRecord = {};
</span><span class="cx">         rootRecord.children = [];
</span><del>-        rootRecord._lastRecord = null;
</del><span class="cx">         return rootRecord;
</span><span class="cx">     },
</span><span class="cx"> 
</span><span class="lines">@@ -359,13 +372,16 @@
</span><span class="cx"> 
</span><span class="cx">     _addToRecordsWindow: function(record, recordsWindow)
</span><span class="cx">     {
</span><ins>+        if (!this._calculator._showShortEvents &amp;&amp; !record._isLongEvent())
+            return;
+
</ins><span class="cx">         recordsWindow.push(record);
</span><ins>+        var index = recordsWindow.length;
</ins><span class="cx">         if (!record.collapsed) {
</span><del>-            var index = recordsWindow.length;
</del><span class="cx">             for (var i = 0; i &lt; record.children.length; ++i)
</span><span class="cx">                 this._addToRecordsWindow(record.children[i], recordsWindow);
</span><del>-            record.visibleChildrenCount = recordsWindow.length - index;
</del><span class="cx">         }
</span><ins>+        record.visibleChildrenCount = recordsWindow.length - index;
</ins><span class="cx">     },
</span><span class="cx"> 
</span><span class="cx">     _filterRecords: function()
</span><span class="lines">@@ -651,7 +667,7 @@
</span><span class="cx">         this._barElement.style.left = barPosition.left + expandOffset + &quot;px&quot;;
</span><span class="cx">         this._barElement.style.width =  barPosition.width + &quot;px&quot;;
</span><span class="cx"> 
</span><del>-        if (record.children.length) {
</del><ins>+        if (record.visibleChildrenCount || record._hasLongChildrenEvents || (calculator._showShortEvents &amp;&amp; record.children.length)) {
</ins><span class="cx">             this._expandElement.style.top = index * this._rowHeight + &quot;px&quot;;
</span><span class="cx">             this._expandElement.style.left = barPosition.left + &quot;px&quot;;
</span><span class="cx">             this._expandElement.style.width = Math.max(12, barPosition.width + 25) + &quot;px&quot;;
</span><span class="lines">@@ -737,6 +753,12 @@
</span><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> WebInspector.TimelinePanel.FormattedRecord.prototype = {
</span><ins>+    _isLongEvent: function()
+    {
+        const shortEventLength = 0.015;
+        return (this._lastChildEndTime - this.startTime) &gt; shortEventLength;
+    },
+
</ins><span class="cx">     _createCell: function(content, styleName)
</span><span class="cx">     {
</span><span class="cx">         var text = document.createElement(&quot;label&quot;);
</span></span></pre></div>
<a id="trunkWebCoreinspectorfrontendinspectorcss"></a>
<div class="modfile"><h4>Modified: trunk/WebCore/inspector/front-end/inspector.css (56612 => 56613)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/WebCore/inspector/front-end/inspector.css        2010-03-26 07:58:07 UTC (rev 56612)
+++ trunk/WebCore/inspector/front-end/inspector.css        2010-03-26 08:05:08 UTC (rev 56613)
</span><span class="lines">@@ -3626,6 +3626,33 @@
</span><span class="cx">     background-position-y: 72px;
</span><span class="cx"> }
</span><span class="cx"> 
</span><ins>+.timeline-details {
+    -webkit-user-select: text;
+}
+
+.timeline-details-row-title {
+    font-weight: bold;
+    text-align: right;
+    white-space: nowrap;
+}
+
+.timeline-details-row-data {
+    white-space: nowrap;
+}
+
+.timeline-details-title {
+    font-weight: bold;
+    white-space: nowrap;
+}
+
+.timeline-filter-status-bar-item .glyph {
+    -webkit-mask-image: url(Images/largerResourcesButtonGlyph.png);
+}
+
+.timeline-filter-status-bar-item.toggled-on .glyph {
+    background-color: rgb(66, 129, 235) !important;
+}
+
</ins><span class="cx"> /* Profiler Style */
</span><span class="cx"> 
</span><span class="cx"> #profile-views {
</span><span class="lines">@@ -3888,25 +3915,6 @@
</span><span class="cx">     overflow: hidden;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.timeline-details {
-    -webkit-user-select: text;
-}
-
-.timeline-details-row-title {
-    font-weight: bold;
-    text-align: right;
-    white-space: nowrap;
-}
-
-.timeline-details-row-data {
-    white-space: nowrap;
-}
-
-.timeline-details-title {
-    font-weight: bold;
-    white-space: nowrap;
-}
-
</del><span class="cx"> .workers-list {
</span><span class="cx">     list-style: none;
</span><span class="cx">     margin: 0;
</span></span></pre>
</div>
</div>

</body>
</html>