<!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>[172682] trunk/Source/WebInspectorUI</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/172682">172682</a></dd>
<dt>Author</dt> <dd>commit-queue@webkit.org</dd>
<dt>Date</dt> <dd>2014-08-15 21:05:50 -0700 (Fri, 15 Aug 2014)</dd>
</dl>

<h3>Log Message</h3>
<pre>Web Inspector: Remove forced layouts during recording caused by striped background element resizing
https://bugs.webkit.org/show_bug.cgi?id=136009

Patch by Joseph Pecoraro &lt;pecoraro@apple.com&gt; on 2014-08-15
Reviewed by Timothy Hatcher.

We used to manually resize and a custom striped background behind
the timeline tree outline content area. This can happen frequently
during timeline recordings causing forced layouts. We can eliminate
the hack and instead put the stripe background on the tree outline.

* UserInterface/Views/TimelineSidebarPanel.js:
(WebInspector.TimelineSidebarPanel.prototype.updateCustomContentOverflow): Deleted.
* UserInterface/Views/TimelineSidebarPanel.css:
(body.mac-platform.legacy .sidebar &gt; .panel.navigation.timeline &gt; .content .item &gt; .status &gt; .status-button):
(.sidebar &gt; .panel.navigation.timeline &gt; .content &gt; .stripe-background): Deleted.
(.sidebar &gt; .panel.navigation.timeline.timeline-content-view-showing &gt; .content &gt; .stripe-background): Deleted.
Eliminate the striped background element.

* UserInterface/Views/TimelineView.css:
(.panel.navigation.timeline &gt; .content &gt; .navigation-sidebar-panel-content-tree-outline):
(.panel.navigation.timeline.timeline-content-view-showing &gt; .content &gt; .navigation-sidebar-panel-content-tree-outline):
Give the timeline content tree outlines the striped background.

* UserInterface/Views/NavigationSidebarPanel.js:
(WebInspector.NavigationSidebarPanel.prototype._updateContentOverflowShadowVisibility):
(WebInspector.NavigationSidebarPanel.prototype.updateCustomContentOverflow): Deleted.
Remove the now unused updateCustomContentOverflow method.</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsNavigationSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineSidebarPanelcss">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineView.css</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (172681 => 172682)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog        2014-08-16 04:03:42 UTC (rev 172681)
+++ trunk/Source/WebInspectorUI/ChangeLog        2014-08-16 04:05:50 UTC (rev 172682)
</span><span class="lines">@@ -1,3 +1,33 @@
</span><ins>+2014-08-15  Joseph Pecoraro  &lt;pecoraro@apple.com&gt;
+
+        Web Inspector: Remove forced layouts during recording caused by striped background element resizing
+        https://bugs.webkit.org/show_bug.cgi?id=136009
+
+        Reviewed by Timothy Hatcher.
+
+        We used to manually resize and a custom striped background behind
+        the timeline tree outline content area. This can happen frequently
+        during timeline recordings causing forced layouts. We can eliminate
+        the hack and instead put the stripe background on the tree outline.
+
+        * UserInterface/Views/TimelineSidebarPanel.js:
+        (WebInspector.TimelineSidebarPanel.prototype.updateCustomContentOverflow): Deleted.
+        * UserInterface/Views/TimelineSidebarPanel.css:
+        (body.mac-platform.legacy .sidebar &gt; .panel.navigation.timeline &gt; .content .item &gt; .status &gt; .status-button):
+        (.sidebar &gt; .panel.navigation.timeline &gt; .content &gt; .stripe-background): Deleted.
+        (.sidebar &gt; .panel.navigation.timeline.timeline-content-view-showing &gt; .content &gt; .stripe-background): Deleted.
+        Eliminate the striped background element.
+
+        * UserInterface/Views/TimelineView.css:
+        (.panel.navigation.timeline &gt; .content &gt; .navigation-sidebar-panel-content-tree-outline):
+        (.panel.navigation.timeline.timeline-content-view-showing &gt; .content &gt; .navigation-sidebar-panel-content-tree-outline):
+        Give the timeline content tree outlines the striped background.
+
+        * UserInterface/Views/NavigationSidebarPanel.js:
+        (WebInspector.NavigationSidebarPanel.prototype._updateContentOverflowShadowVisibility):
+        (WebInspector.NavigationSidebarPanel.prototype.updateCustomContentOverflow): Deleted.
+        Remove the now unused updateCustomContentOverflow method.
+
</ins><span class="cx"> 2014-08-15  Jono Wells  &lt;jonowells@apple.com&gt;
</span><span class="cx"> 
</span><span class="cx">         Web Inspector: Inspect Element doesn't always highlight the correct element when inspector is closed before inspecting
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsNavigationSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js (172681 => 172682)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js        2014-08-16 04:03:42 UTC (rev 172681)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js        2014-08-16 04:05:50 UTC (rev 172682)
</span><span class="lines">@@ -297,11 +297,6 @@
</span><span class="cx">         }
</span><span class="cx">     },
</span><span class="cx"> 
</span><del>-    updateCustomContentOverflow: function()
-    {
-        // Implemented by subclasses if needed.
-    },
-
</del><span class="cx">     updateFilter: function()
</span><span class="cx">     {
</span><span class="cx">         this._updateFilter();
</span><span class="lines">@@ -441,8 +436,6 @@
</span><span class="cx">     {
</span><span class="cx">         delete this._updateContentOverflowShadowVisibilityIdentifier;
</span><span class="cx"> 
</span><del>-        this.updateCustomContentOverflow();
-
</del><span class="cx">         var scrollHeight = this._contentElement.scrollHeight;
</span><span class="cx">         var offsetHeight = this._contentElement.offsetHeight;
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineSidebarPanelcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.css (172681 => 172682)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.css        2014-08-16 04:03:42 UTC (rev 172681)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.css        2014-08-16 04:05:50 UTC (rev 172682)
</span><span class="lines">@@ -251,21 +251,3 @@
</span><span class="cx">     height: 12px;
</span><span class="cx">     margin-top: 2px;
</span><span class="cx"> }
</span><del>-
-.sidebar &gt; .panel.navigation.timeline &gt; .content &gt; .stripe-background {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    min-height: 100%;
-
-    background-image: linear-gradient(to bottom, transparent, transparent 50%, rgba(0, 0, 0, 0.03) 50%, rgba(0, 0, 0, 0.03));
-    background-size: 100% 40px;
-
-    pointer-events: none;
-    display: none;
-}
-
-.sidebar &gt; .panel.navigation.timeline.timeline-content-view-showing &gt; .content &gt; .stripe-background {
-    display: block;
-}
</del></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js (172681 => 172682)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js        2014-08-16 04:03:42 UTC (rev 172681)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js        2014-08-16 04:05:50 UTC (rev 172682)
</span><span class="lines">@@ -136,10 +136,6 @@
</span><span class="cx">     WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.RecordingCreated, this._recordingCreated, this);
</span><span class="cx">     WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.RecordingLoaded, this._recordingLoaded, this);
</span><span class="cx"> 
</span><del>-    this._stripeBackgroundElement = document.createElement(&quot;div&quot;);
-    this._stripeBackgroundElement.className = WebInspector.TimelineSidebarPanel.StripeBackgroundStyleClass;
-    this.contentElement.insertBefore(this._stripeBackgroundElement, this.contentElement.firstChild);
-
</del><span class="cx">     WebInspector.contentBrowser.addEventListener(WebInspector.ContentBrowser.Event.CurrentContentViewDidChange, this._contentBrowserCurrentContentViewDidChange, this);
</span><span class="cx">     WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.CapturingStarted, this._capturingStarted, this);
</span><span class="cx">     WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.CapturingStopped, this._capturingStopped, this);
</span><span class="lines">@@ -155,7 +151,6 @@
</span><span class="cx"> WebInspector.TimelineSidebarPanel.TimelinesTitleBarStyleClass = &quot;timelines&quot;;
</span><span class="cx"> WebInspector.TimelineSidebarPanel.TimelineEventsTitleBarStyleClass = &quot;timeline-events&quot;;
</span><span class="cx"> WebInspector.TimelineSidebarPanel.TimelinesContentContainerStyleClass = &quot;timelines-content&quot;;
</span><del>-WebInspector.TimelineSidebarPanel.StripeBackgroundStyleClass = &quot;stripe-background&quot;;
</del><span class="cx"> WebInspector.TimelineSidebarPanel.CloseButtonStyleClass = &quot;close-button&quot;;
</span><span class="cx"> WebInspector.TimelineSidebarPanel.LargeIconStyleClass = &quot;large&quot;;
</span><span class="cx"> WebInspector.TimelineSidebarPanel.StopwatchIconStyleClass = &quot;stopwatch-icon&quot;;
</span><span class="lines">@@ -288,17 +283,6 @@
</span><span class="cx"> 
</span><span class="cx">     // Protected
</span><span class="cx"> 
</span><del>-    updateCustomContentOverflow: function()
-    {
-        if (!this._stripeBackgroundElement)
-            return;
-
-        var contentHeight = this.contentTreeOutline.element.offsetHeight;
-        var currentHeight = parseInt(this._stripeBackgroundElement.style.height);
-        if (currentHeight !== contentHeight)
-            this._stripeBackgroundElement.style.height = contentHeight + &quot;px&quot;;
-    },
-
</del><span class="cx">     hasCustomFilters: function()
</span><span class="cx">     {
</span><span class="cx">         return true;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineView.css (172681 => 172682)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineView.css        2014-08-16 04:03:42 UTC (rev 172681)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineView.css        2014-08-16 04:05:50 UTC (rev 172682)
</span><span class="lines">@@ -30,3 +30,13 @@
</span><span class="cx">     right: 0;
</span><span class="cx">     bottom: 0;
</span><span class="cx"> }
</span><ins>+
+.panel.navigation.timeline &gt; .content &gt; .navigation-sidebar-panel-content-tree-outline {
+    min-height: 100%;
+    background-image: none;
+}
+
+.panel.navigation.timeline.timeline-content-view-showing &gt; .content &gt; .navigation-sidebar-panel-content-tree-outline {
+    background-image: linear-gradient(to bottom, transparent, transparent 50%, rgba(0, 0, 0, 0.03) 50%, rgba(0, 0, 0, 0.03));
+    background-size: 100% 40px;
+}
</ins></span></pre>
</div>
</div>

</body>
</html>