<!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>[175767] 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/175767">175767</a></dd>
<dt>Author</dt> <dd>joepeck@webkit.org</dd>
<dt>Date</dt> <dd>2014-11-07 15:37:38 -0800 (Fri, 07 Nov 2014)</dd>
</dl>
<h3>Log Message</h3>
<pre>Web Inspector: Layer summary should be bottom sticky
https://bugs.webkit.org/show_bug.cgi?id=138518
Reviewed by Timothy Hatcher.
Previously only NavigationSidebars had a content view. Now, give all
Sidebars a contentElement section for content.
Update all Details Sidebars to append content to the contentElement
instead of directly to the element. Only two Details sidebars append
to the element:
- CSSStyleDetailsSidebarPanel for the navigation bar at the top
- LayerTreeDetailsSidebarPanel for the summary view at the bottom
Take this opportunity to fix up some naming and styles as well.
* UserInterface/Views/SidebarPanel.js:
(WebInspector.SidebarPanel):
(WebInspector.SidebarPanel.prototype.get contentElement):
Give every SidebarPanel a content element.
* UserInterface/Views/DetailsSidebarPanel.css: Removed.
(.sidebar > .panel > .content):
* UserInterface/Views/SidebarPanel.css: Added.
(.sidebar > .panel > .content):
And give that content element a default style.
* UserInterface/Views/NavigationSidebarPanel.css:
(.sidebar > .panel.navigation > .content):
* UserInterface/Views/NavigationSidebarPanel.js:
(WebInspector.NavigationSidebarPanel):
(WebInspector.NavigationSidebarPanel.prototype.createContentTreeOutline):
(WebInspector.NavigationSidebarPanel.prototype._updateContentOverflowShadowVisibility):
(WebInspector.NavigationSidebarPanel.prototype.get contentElement): Deleted.
Navigation sidebar panels now use the parent's contentElement.
Also, carry over their default styles, overriding the base.
* UserInterface/Views/LayerTreeDetailsSidebarPanel.js: Renamed from Source/WebInspectorUI/UserInterface/Views/LayerTreeSidebarPanel.js.
(WebInspector.LayerTreeDetailsSidebarPanel.prototype._buildLayerInfoSection):
(WebInspector.LayerTreeDetailsSidebarPanel.prototype._buildDataGridSection):
(WebInspector.LayerTreeDetailsSidebarPanel.prototype._buildBottomBar):
Rename LayerTreeSidebarPanel to make it clear this is a DetailsSidebarPanel.
Add the "bottom bar" to the root element, and sections to the contentElement.
* UserInterface/Views/LayerTreeDetailsSidebarPanel.css: Renamed from Source/WebInspectorUI/UserInterface/Views/LayerTreeSidebarPanel.css.
(.sidebar > .layer-tree.panel > .content):
(body.mac-platform.legacy .sidebar > .layer-tree.panel > .content):
Style the bottom bar to pin it to the bottom of the sidebar panel.
(WebInspector.CSSStyleDetailsSidebarPanel):
(WebInspector.CSSStyleDetailsSidebarPanel.prototype.refresh):
(WebInspector.CSSStyleDetailsSidebarPanel.prototype._navigationItemSelected):
Add the navigation bar to the root element, and sections to the contentElement.
* UserInterface/Base/Main.js:
(WebInspector.contentLoaded):
* UserInterface/Main.html:
* WebInspectorUI.vcxproj/WebInspectorUI.vcxproj:
* WebInspectorUI.vcxproj/WebInspectorUI.vcxproj.filters:
Update for new names.
* UserInterface/Views/ApplicationCacheDetailsSidebarPanel.js:
(WebInspector.ApplicationCacheDetailsSidebarPanel):
* UserInterface/Views/CSSStyleDetailsSidebarPanel.js:
* UserInterface/Views/DOMDetailsSidebarPanel.js:
(WebInspector.DOMDetailsSidebarPanel):
* UserInterface/Views/DOMNodeDetailsSidebarPanel.js:
(WebInspector.DOMNodeDetailsSidebarPanel):
* UserInterface/Views/DetailsSidebarPanel.js:
(WebInspector.DetailsSidebarPanel):
* UserInterface/Views/ProbeDetailsSidebarPanel.js:
* UserInterface/Views/ResourceDetailsSidebarPanel.js:
(WebInspector.ResourceDetailsSidebarPanel):
(WebInspector.ResourceDetailsSidebarPanel.prototype._refreshURL):
(WebInspector.ResourceDetailsSidebarPanel.prototype._refreshImageSizeSection):
(WebInspector.ResourceDetailsSidebarPanel.prototype._refreshRequestDataSection):
* UserInterface/Views/ScopeChainDetailsSidebarPanel.js:
(WebInspector.ScopeChainDetailsSidebarPanel.prototype.refresh.delayedWork):
(WebInspector.ScopeChainDetailsSidebarPanel.prototype.refresh):
All details sidebar panels now use the contentElement instead of element for content.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceBaseMainjs">trunk/Source/WebInspectorUI/UserInterface/Base/Main.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceMainhtml">trunk/Source/WebInspectorUI/UserInterface/Main.html</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsApplicationCacheDetailsSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheDetailsSidebarPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDetailsSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDOMDetailsSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/DOMDetailsSidebarPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDOMNodeDetailsSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/DOMNodeDetailsSidebarPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDetailsSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSidebarPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsNavigationSidebarPanelcss">trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsNavigationSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsProbeDetailsSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/ProbeDetailsSidebarPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsResourceDetailsSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/ResourceDetailsSidebarPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsScopeChainDetailsSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/ScopeChainDetailsSidebarPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/SidebarPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIWebInspectorUIvcxprojWebInspectorUIvcxproj">trunk/Source/WebInspectorUI/WebInspectorUI.vcxproj/WebInspectorUI.vcxproj</a></li>
<li><a href="#trunkSourceWebInspectorUIWebInspectorUIvcxprojWebInspectorUIvcxprojfilters">trunk/Source/WebInspectorUI/WebInspectorUI.vcxproj/WebInspectorUI.vcxproj.filters</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsLayerTreeDetailsSidebarPanelcss">trunk/Source/WebInspectorUI/UserInterface/Views/LayerTreeDetailsSidebarPanel.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsLayerTreeDetailsSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/LayerTreeDetailsSidebarPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsSidebarPanelcss">trunk/Source/WebInspectorUI/UserInterface/Views/SidebarPanel.css</a></li>
</ul>
<h3>Removed Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDetailsSidebarPanelcss">trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSidebarPanel.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsLayerTreeSidebarPanelcss">trunk/Source/WebInspectorUI/UserInterface/Views/LayerTreeSidebarPanel.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsLayerTreeSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/LayerTreeSidebarPanel.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (175766 => 175767)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2014-11-07 23:36:20 UTC (rev 175766)
+++ trunk/Source/WebInspectorUI/ChangeLog 2014-11-07 23:37:38 UTC (rev 175767)
</span><span class="lines">@@ -1,3 +1,87 @@
</span><ins>+2014-11-07 Joseph Pecoraro <pecoraro@apple.com>
+
+ Web Inspector: Layer summary should be bottom sticky
+ https://bugs.webkit.org/show_bug.cgi?id=138518
+
+ Reviewed by Timothy Hatcher.
+
+ Previously only NavigationSidebars had a content view. Now, give all
+ Sidebars a contentElement section for content.
+
+ Update all Details Sidebars to append content to the contentElement
+ instead of directly to the element. Only two Details sidebars append
+ to the element:
+
+ - CSSStyleDetailsSidebarPanel for the navigation bar at the top
+ - LayerTreeDetailsSidebarPanel for the summary view at the bottom
+
+ Take this opportunity to fix up some naming and styles as well.
+
+ * UserInterface/Views/SidebarPanel.js:
+ (WebInspector.SidebarPanel):
+ (WebInspector.SidebarPanel.prototype.get contentElement):
+ Give every SidebarPanel a content element.
+
+ * UserInterface/Views/DetailsSidebarPanel.css: Removed.
+ (.sidebar > .panel > .content):
+ * UserInterface/Views/SidebarPanel.css: Added.
+ (.sidebar > .panel > .content):
+ And give that content element a default style.
+
+ * UserInterface/Views/NavigationSidebarPanel.css:
+ (.sidebar > .panel.navigation > .content):
+ * UserInterface/Views/NavigationSidebarPanel.js:
+ (WebInspector.NavigationSidebarPanel):
+ (WebInspector.NavigationSidebarPanel.prototype.createContentTreeOutline):
+ (WebInspector.NavigationSidebarPanel.prototype._updateContentOverflowShadowVisibility):
+ (WebInspector.NavigationSidebarPanel.prototype.get contentElement): Deleted.
+ Navigation sidebar panels now use the parent's contentElement.
+ Also, carry over their default styles, overriding the base.
+
+ * UserInterface/Views/LayerTreeDetailsSidebarPanel.js: Renamed from Source/WebInspectorUI/UserInterface/Views/LayerTreeSidebarPanel.js.
+ (WebInspector.LayerTreeDetailsSidebarPanel.prototype._buildLayerInfoSection):
+ (WebInspector.LayerTreeDetailsSidebarPanel.prototype._buildDataGridSection):
+ (WebInspector.LayerTreeDetailsSidebarPanel.prototype._buildBottomBar):
+ Rename LayerTreeSidebarPanel to make it clear this is a DetailsSidebarPanel.
+ Add the "bottom bar" to the root element, and sections to the contentElement.
+
+ * UserInterface/Views/LayerTreeDetailsSidebarPanel.css: Renamed from Source/WebInspectorUI/UserInterface/Views/LayerTreeSidebarPanel.css.
+ (.sidebar > .layer-tree.panel > .content):
+ (body.mac-platform.legacy .sidebar > .layer-tree.panel > .content):
+ Style the bottom bar to pin it to the bottom of the sidebar panel.
+
+ (WebInspector.CSSStyleDetailsSidebarPanel):
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype.refresh):
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype._navigationItemSelected):
+ Add the navigation bar to the root element, and sections to the contentElement.
+
+ * UserInterface/Base/Main.js:
+ (WebInspector.contentLoaded):
+ * UserInterface/Main.html:
+ * WebInspectorUI.vcxproj/WebInspectorUI.vcxproj:
+ * WebInspectorUI.vcxproj/WebInspectorUI.vcxproj.filters:
+ Update for new names.
+
+ * UserInterface/Views/ApplicationCacheDetailsSidebarPanel.js:
+ (WebInspector.ApplicationCacheDetailsSidebarPanel):
+ * UserInterface/Views/CSSStyleDetailsSidebarPanel.js:
+ * UserInterface/Views/DOMDetailsSidebarPanel.js:
+ (WebInspector.DOMDetailsSidebarPanel):
+ * UserInterface/Views/DOMNodeDetailsSidebarPanel.js:
+ (WebInspector.DOMNodeDetailsSidebarPanel):
+ * UserInterface/Views/DetailsSidebarPanel.js:
+ (WebInspector.DetailsSidebarPanel):
+ * UserInterface/Views/ProbeDetailsSidebarPanel.js:
+ * UserInterface/Views/ResourceDetailsSidebarPanel.js:
+ (WebInspector.ResourceDetailsSidebarPanel):
+ (WebInspector.ResourceDetailsSidebarPanel.prototype._refreshURL):
+ (WebInspector.ResourceDetailsSidebarPanel.prototype._refreshImageSizeSection):
+ (WebInspector.ResourceDetailsSidebarPanel.prototype._refreshRequestDataSection):
+ * UserInterface/Views/ScopeChainDetailsSidebarPanel.js:
+ (WebInspector.ScopeChainDetailsSidebarPanel.prototype.refresh.delayedWork):
+ (WebInspector.ScopeChainDetailsSidebarPanel.prototype.refresh):
+ All details sidebar panels now use the contentElement instead of element for content.
+
</ins><span class="cx"> 2014-11-07 Timothy Hatcher <timothy@apple.com>
</span><span class="cx">
</span><span class="cx"> Web Inspector: Cursor and scroll view jumps around when modifying styles
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceBaseMainjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Base/Main.js (175766 => 175767)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Base/Main.js 2014-11-07 23:36:20 UTC (rev 175766)
+++ trunk/Source/WebInspectorUI/UserInterface/Base/Main.js 2014-11-07 23:37:38 UTC (rev 175767)
</span><span class="lines">@@ -306,8 +306,8 @@
</span><span class="cx"> this.domNodeDetailsSidebarPanel, this.cssStyleDetailsSidebarPanel, this.probeDetailsSidebarPanel];
</span><span class="cx">
</span><span class="cx"> if (window.LayerTreeAgent) {
</span><del>- this.layerTreeSidebarPanel = new WebInspector.LayerTreeSidebarPanel;
- this.detailsSidebarPanels.splice(this.detailsSidebarPanels.length - 1, 0, this.layerTreeSidebarPanel);
</del><ins>+ this.layerTreeDetailsSidebarPanel = new WebInspector.LayerTreeDetailsSidebarPanel;
+ this.detailsSidebarPanels.splice(this.detailsSidebarPanels.length - 1, 0, this.layerTreeDetailsSidebarPanel);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> this.modifierKeys = {altKey: false, metaKey: false, shiftKey: false};
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceMainhtml"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (175766 => 175767)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Main.html 2014-11-07 23:36:20 UTC (rev 175766)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html 2014-11-07 23:37:38 UTC (rev 175767)
</span><span class="lines">@@ -71,7 +71,6 @@
</span><span class="cx"> <link rel="stylesheet" href="Views/DatabaseTableIcon.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/DebuggerSidebarPanel.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/DetailsSection.css">
</span><del>- <link rel="stylesheet" href="Views/DetailsSidebarPanel.css">
</del><span class="cx"> <link rel="stylesheet" href="Views/DividerNavigationItem.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/Editing.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/EventListenerSectionGroup.css">
</span><span class="lines">@@ -87,7 +86,7 @@
</span><span class="cx"> <link rel="stylesheet" href="Views/ImageResourceContentView.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/IndeterminateProgressSpinner.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/IndexedDatabaseObjectStoreContentView.css">
</span><del>- <link rel="stylesheet" href="Views/LayerTreeSidebarPanel.css">
</del><ins>+ <link rel="stylesheet" href="Views/LayerTreeDetailsSidebarPanel.css">
</ins><span class="cx"> <link rel="stylesheet" href="Views/LayoutTimelineOverviewGraph.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/LayoutTimelineView.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/LogContentView.css">
</span><span class="lines">@@ -117,6 +116,7 @@
</span><span class="cx"> <link rel="stylesheet" href="Views/SearchIcons.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/Section.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/Sidebar.css">
</span><ins>+ <link rel="stylesheet" href="Views/SidebarPanel.css">
</ins><span class="cx"> <link rel="stylesheet" href="Views/Slider.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/SourceCodeTextEditor.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/StyleRuleIcons.css">
</span><span class="lines">@@ -392,7 +392,7 @@
</span><span class="cx"> <script src="Views/IndexedDatabaseObjectStoreTreeElement.js"></script>
</span><span class="cx"> <script src="Views/IndexedDatabaseTreeElement.js"></script>
</span><span class="cx"> <script src="Views/LayerTreeDataGridNode.js"></script>
</span><del>- <script src="Views/LayerTreeSidebarPanel.js"></script>
</del><ins>+ <script src="Views/LayerTreeDetailsSidebarPanel.js"></script>
</ins><span class="cx"> <script src="Views/LayoutTimelineDataGrid.js"></script>
</span><span class="cx"> <script src="Views/LayoutTimelineDataGridNode.js"></script>
</span><span class="cx"> <script src="Views/LayoutTimelineOverviewGraph.js"></script>
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsApplicationCacheDetailsSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheDetailsSidebarPanel.js (175766 => 175767)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheDetailsSidebarPanel.js 2014-11-07 23:36:20 UTC (rev 175766)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheDetailsSidebarPanel.js 2014-11-07 23:37:38 UTC (rev 175767)
</span><span class="lines">@@ -23,7 +23,8 @@
</span><span class="cx"> * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx"> */
</span><span class="cx">
</span><del>-WebInspector.ApplicationCacheDetailsSidebarPanel = function() {
</del><ins>+WebInspector.ApplicationCacheDetailsSidebarPanel = function()
+{
</ins><span class="cx"> WebInspector.DetailsSidebarPanel.call(this, "application-cache-details", WebInspector.UIString("Storage"), WebInspector.UIString("Storage"), "Images/NavigationItemStorage.svg");
</span><span class="cx">
</span><span class="cx"> this.element.classList.add(WebInspector.ApplicationCacheDetailsSidebarPanel.StyleClassName);
</span><span class="lines">@@ -44,8 +45,8 @@
</span><span class="cx">
</span><span class="cx"> this._statusSection = new WebInspector.DetailsSection("application-cache-status", WebInspector.UIString("Status"), [this._statusGroup]);
</span><span class="cx">
</span><del>- this.element.appendChild(this._locationSection.element);
- this.element.appendChild(this._statusSection.element);
</del><ins>+ this.contentElement.appendChild(this._locationSection.element);
+ this.contentElement.appendChild(this._statusSection.element);
</ins><span class="cx">
</span><span class="cx"> WebInspector.applicationCacheManager.addEventListener(WebInspector.ApplicationCacheManager.Event.NetworkStateUpdated, this._networkStateUpdated, this);
</span><span class="cx"> WebInspector.applicationCacheManager.addEventListener(WebInspector.ApplicationCacheManager.Event.FrameManifestStatusChanged, this._frameManifestStatusChanged, this);
</span><span class="lines">@@ -65,6 +66,7 @@
</span><span class="cx">
</span><span class="cx"> WebInspector.ApplicationCacheDetailsSidebarPanel.prototype = {
</span><span class="cx"> constructor: WebInspector.ApplicationCacheDetailsSidebarPanel,
</span><ins>+ __proto__: WebInspector.DetailsSidebarPanel.prototype,
</ins><span class="cx">
</span><span class="cx"> // Public
</span><span class="cx">
</span><span class="lines">@@ -148,5 +150,3 @@
</span><span class="cx"> this._statusRow.value = WebInspector.ApplicationCacheDetailsSidebarPanel.Status[this.applicationCacheFrame.status];
</span><span class="cx"> }
</span><span class="cx"> };
</span><del>-
-WebInspector.ApplicationCacheDetailsSidebarPanel.prototype.__proto__ = WebInspector.DetailsSidebarPanel.prototype;
</del></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDetailsSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js (175766 => 175767)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js 2014-11-07 23:36:20 UTC (rev 175766)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js 2014-11-07 23:37:38 UTC (rev 175767)
</span><span class="lines">@@ -31,11 +31,8 @@
</span><span class="cx">
</span><span class="cx"> this._navigationBar = new WebInspector.NavigationBar(null, null, "tablist");
</span><span class="cx"> this._navigationBar.addEventListener(WebInspector.NavigationBar.Event.NavigationItemSelected, this._navigationItemSelected, this);
</span><del>- this.element.appendChild(this._navigationBar.element);
</del><ins>+ this.element.insertBefore(this._navigationBar.element, this.contentElement);
</ins><span class="cx">
</span><del>- this._contentElement = document.createElement("div");
- this._contentElement.className = WebInspector.CSSStyleDetailsSidebarPanel.ContentStyleClassName;
-
</del><span class="cx"> this._forcedPseudoClassCheckboxes = {};
</span><span class="cx">
</span><span class="cx"> if (WebInspector.cssStyleManager.canForcePseudoClasses()) {
</span><span class="lines">@@ -68,11 +65,9 @@
</span><span class="cx"> groupElement.appendChild(labelElement);
</span><span class="cx"> }, this);
</span><span class="cx">
</span><del>- this._contentElement.appendChild(this._forcedPseudoClassContainer);
</del><ins>+ this.contentElement.appendChild(this._forcedPseudoClassContainer);
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- this.element.appendChild(this._contentElement);
-
</del><span class="cx"> this._computedStyleDetailsPanel = new WebInspector.ComputedStyleDetailsPanel;
</span><span class="cx"> this._rulesStyleDetailsPanel = new WebInspector.RulesStyleDetailsPanel;
</span><span class="cx"> this._metricsStyleDetailsPanel = new WebInspector.MetricsStyleDetailsPanel;
</span><span class="lines">@@ -89,13 +84,13 @@
</span><span class="cx"> this._navigationBar.selectedNavigationItem = this._lastSelectedSectionSetting.value;
</span><span class="cx"> };
</span><span class="cx">
</span><del>-WebInspector.CSSStyleDetailsSidebarPanel.ContentStyleClassName = "content";
</del><span class="cx"> WebInspector.CSSStyleDetailsSidebarPanel.PseudoClassesElementStyleClassName = "pseudo-classes";
</span><span class="cx"> WebInspector.CSSStyleDetailsSidebarPanel.PseudoClassesGroupElementStyleClassName = "group";
</span><span class="cx"> WebInspector.CSSStyleDetailsSidebarPanel.NoForcedPseudoClassesScrollOffset = 38; // Default height of the forced pseudo classes container. Updated in widthDidChange.
</span><span class="cx">
</span><span class="cx"> WebInspector.CSSStyleDetailsSidebarPanel.prototype = {
</span><span class="cx"> constructor: WebInspector.CSSStyleDetailsSidebarPanel,
</span><ins>+ __proto__: WebInspector.DOMDetailsSidebarPanel.prototype,
</ins><span class="cx">
</span><span class="cx"> // Public
</span><span class="cx">
</span><span class="lines">@@ -110,7 +105,7 @@
</span><span class="cx"> if (!domNode)
</span><span class="cx"> return;
</span><span class="cx">
</span><del>- this._contentElement.scrollTop = this._initialScrollOffset;
</del><ins>+ this.contentElement.scrollTop = this._initialScrollOffset;
</ins><span class="cx">
</span><span class="cx"> for (var i = 0; i < this._panels.length; ++i) {
</span><span class="cx"> delete this._panels[i].element._savedScrollTop;
</span><span class="lines">@@ -195,19 +190,19 @@
</span><span class="cx">
</span><span class="cx"> if (this._selectedPanel) {
</span><span class="cx"> this._selectedPanel.hidden();
</span><del>- this._selectedPanel.element._savedScrollTop = this._contentElement.scrollTop;
</del><ins>+ this._selectedPanel.element._savedScrollTop = this.contentElement.scrollTop;
</ins><span class="cx"> this._selectedPanel.element.remove();
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> this._selectedPanel = selectedPanel;
</span><span class="cx">
</span><span class="cx"> if (this._selectedPanel) {
</span><del>- this._contentElement.appendChild(this._selectedPanel.element);
</del><ins>+ this.contentElement.appendChild(this._selectedPanel.element);
</ins><span class="cx">
</span><span class="cx"> if (typeof this._selectedPanel.element._savedScrollTop === "number")
</span><del>- this._contentElement.scrollTop = this._selectedPanel.element._savedScrollTop;
</del><ins>+ this.contentElement.scrollTop = this._selectedPanel.element._savedScrollTop;
</ins><span class="cx"> else
</span><del>- this._contentElement.scrollTop = this._initialScrollOffset;
</del><ins>+ this.contentElement.scrollTop = this._initialScrollOffset;
</ins><span class="cx">
</span><span class="cx"> this._selectedPanel.shown();
</span><span class="cx"> }
</span><span class="lines">@@ -236,5 +231,3 @@
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx"> };
</span><del>-
-WebInspector.CSSStyleDetailsSidebarPanel.prototype.__proto__ = WebInspector.DOMDetailsSidebarPanel.prototype;
</del></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDOMDetailsSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMDetailsSidebarPanel.js (175766 => 175767)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMDetailsSidebarPanel.js 2014-11-07 23:36:20 UTC (rev 175766)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMDetailsSidebarPanel.js 2014-11-07 23:37:38 UTC (rev 175767)
</span><span class="lines">@@ -23,7 +23,8 @@
</span><span class="cx"> * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx"> */
</span><span class="cx">
</span><del>-WebInspector.DOMDetailsSidebarPanel = function(identifier, displayName, singularDisplayName, image, keyboardShortcutKey, element) {
</del><ins>+WebInspector.DOMDetailsSidebarPanel = function(identifier, displayName, singularDisplayName, image, keyboardShortcutKey, element)
+{
</ins><span class="cx"> WebInspector.DetailsSidebarPanel.call(this, identifier, displayName, singularDisplayName, image, keyboardShortcutKey, element);
</span><span class="cx">
</span><span class="cx"> this.element.addEventListener("click", this._mouseWasClicked.bind(this), true);
</span><span class="lines">@@ -33,6 +34,7 @@
</span><span class="cx">
</span><span class="cx"> WebInspector.DOMDetailsSidebarPanel.prototype = {
</span><span class="cx"> constructor: WebInspector.DOMDetailsSidebarPanel,
</span><ins>+ __proto__: WebInspector.DetailsSidebarPanel.prototype,
</ins><span class="cx">
</span><span class="cx"> // Public
</span><span class="cx">
</span><span class="lines">@@ -110,5 +112,3 @@
</span><span class="cx"> WebInspector.handlePossibleLinkClick(event, parentFrame);
</span><span class="cx"> }
</span><span class="cx"> };
</span><del>-
-WebInspector.DOMDetailsSidebarPanel.prototype.__proto__ = WebInspector.DetailsSidebarPanel.prototype;
</del></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDOMNodeDetailsSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMNodeDetailsSidebarPanel.js (175766 => 175767)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMNodeDetailsSidebarPanel.js 2014-11-07 23:36:20 UTC (rev 175766)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMNodeDetailsSidebarPanel.js 2014-11-07 23:37:38 UTC (rev 175767)
</span><span class="lines">@@ -23,7 +23,8 @@
</span><span class="cx"> * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx"> */
</span><span class="cx">
</span><del>-WebInspector.DOMNodeDetailsSidebarPanel = function() {
</del><ins>+WebInspector.DOMNodeDetailsSidebarPanel = function()
+{
</ins><span class="cx"> WebInspector.DOMDetailsSidebarPanel.call(this, "dom-node-details", WebInspector.UIString("Node"), WebInspector.UIString("Node"), "Images/NavigationItemAngleBrackets.svg", "2");
</span><span class="cx">
</span><span class="cx"> WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.AttributeModified, this._attributesChanged, this);
</span><span class="lines">@@ -51,10 +52,10 @@
</span><span class="cx"> this._eventListenersSectionGroup = new WebInspector.DetailsSectionGroup;
</span><span class="cx"> var eventListenersSection = new WebInspector.DetailsSection("dom-node-event-listeners", WebInspector.UIString("Event Listeners"), [this._eventListenersSectionGroup]);
</span><span class="cx">
</span><del>- this.element.appendChild(identitySection.element);
- this.element.appendChild(attributesSection.element);
- this.element.appendChild(propertiesSection.element);
- this.element.appendChild(eventListenersSection.element);
</del><ins>+ this.contentElement.appendChild(identitySection.element);
+ this.contentElement.appendChild(attributesSection.element);
+ this.contentElement.appendChild(propertiesSection.element);
+ this.contentElement.appendChild(eventListenersSection.element);
</ins><span class="cx">
</span><span class="cx"> if (this._accessibilitySupported()) {
</span><span class="cx"> this._accessibilityEmptyRow = new WebInspector.DetailsSectionRow(WebInspector.UIString("No Accessibility Information"));
</span><span class="lines">@@ -84,7 +85,7 @@
</span><span class="cx"> this._accessibilityGroup = new WebInspector.DetailsSectionGroup([this._accessibilityEmptyRow]);
</span><span class="cx"> var accessibilitySection = new WebInspector.DetailsSection("dom-node-accessibility", WebInspector.UIString("Accessibility"), [this._accessibilityGroup]);
</span><span class="cx">
</span><del>- this.element.appendChild(accessibilitySection.element);
</del><ins>+ this.contentElement.appendChild(accessibilitySection.element);
</ins><span class="cx"> }
</span><span class="cx"> };
</span><span class="cx">
</span><span class="lines">@@ -93,6 +94,7 @@
</span><span class="cx">
</span><span class="cx"> WebInspector.DOMNodeDetailsSidebarPanel.prototype = {
</span><span class="cx"> constructor: WebInspector.DOMNodeDetailsSidebarPanel,
</span><ins>+ __proto__: WebInspector.DOMDetailsSidebarPanel.prototype,
</ins><span class="cx">
</span><span class="cx"> // Public
</span><span class="cx">
</span><span class="lines">@@ -589,5 +591,3 @@
</span><span class="cx"> return dataGrid;
</span><span class="cx"> }
</span><span class="cx"> };
</span><del>-
-WebInspector.DOMNodeDetailsSidebarPanel.prototype.__proto__ = WebInspector.DOMDetailsSidebarPanel.prototype;
</del></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDetailsSidebarPanelcss"></a>
<div class="delfile"><h4>Deleted: trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSidebarPanel.css (175766 => 175767)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSidebarPanel.css 2014-11-07 23:36:20 UTC (rev 175766)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSidebarPanel.css 2014-11-07 23:37:38 UTC (rev 175767)
</span><span class="lines">@@ -1,29 +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.
- */
-
-.sidebar > .panel.details {
- overflow-x: hidden;
- overflow-y: auto;
-}
</del></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDetailsSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSidebarPanel.js (175766 => 175767)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSidebarPanel.js 2014-11-07 23:36:20 UTC (rev 175766)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSidebarPanel.js 2014-11-07 23:37:38 UTC (rev 175767)
</span><span class="lines">@@ -23,7 +23,8 @@
</span><span class="cx"> * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx"> */
</span><span class="cx">
</span><del>-WebInspector.DetailsSidebarPanel = function(identifier, displayName, singularDisplayName, image, keyboardShortcutKey, element) {
</del><ins>+WebInspector.DetailsSidebarPanel = function(identifier, displayName, singularDisplayName, image, keyboardShortcutKey, element)
+{
</ins><span class="cx"> if (keyboardShortcutKey)
</span><span class="cx"> this._keyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Control | WebInspector.KeyboardShortcut.Modifier.Shift, keyboardShortcutKey, this.toggle.bind(this));
</span><span class="cx">
</span><span class="lines">@@ -44,6 +45,7 @@
</span><span class="cx">
</span><span class="cx"> WebInspector.DetailsSidebarPanel.prototype = {
</span><span class="cx"> constructor: WebInspector.DetailsSidebarPanel,
</span><ins>+ __proto__: WebInspector.SidebarPanel.prototype,
</ins><span class="cx">
</span><span class="cx"> // Public
</span><span class="cx">
</span><span class="lines">@@ -76,5 +78,3 @@
</span><span class="cx"> // Implemented by subclasses.
</span><span class="cx"> }
</span><span class="cx"> };
</span><del>-
-WebInspector.DetailsSidebarPanel.prototype.__proto__ = WebInspector.SidebarPanel.prototype;
</del></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsLayerTreeDetailsSidebarPanelcssfromrev175765trunkSourceWebInspectorUIUserInterfaceViewsLayerTreeSidebarPanelcss"></a>
<div class="copfile"><h4>Copied: trunk/Source/WebInspectorUI/UserInterface/Views/LayerTreeDetailsSidebarPanel.css (from rev 175765, trunk/Source/WebInspectorUI/UserInterface/Views/LayerTreeSidebarPanel.css) (0 => 175767)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/LayerTreeDetailsSidebarPanel.css (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/LayerTreeDetailsSidebarPanel.css 2014-11-07 23:37:38 UTC (rev 175767)
</span><span class="lines">@@ -0,0 +1,117 @@
</span><ins>+/*
+ * 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.
+ */
+
+.sidebar > .panel.details.layer-tree > .content {
+ bottom: 28px;
+}
+
+body.mac-platform.legacy .sidebar > .panel.details.layer-tree > .content {
+ bottom: 22px;
+}
+
+.panel.details.layer-tree .data-grid {
+ border-right: none;
+ border-left: none;
+ border-bottom: none;
+}
+
+.panel.details.layer-tree .name-column .icon {
+ content: url(../Images/DOMElement.svg);
+}
+
+.panel.details.layer-tree tr.reflection .name-column .icon {
+ content: url(../Images/Reflection.svg);
+}
+
+.panel.details.layer-tree tr.pseudo-element .name-column .icon {
+ content: url(../Images/PseudoElement.svg);
+}
+
+.panel.details.layer-tree .name-column .pseudo-element,
+.panel.details.layer-tree .name-column .reflection {
+ color: rgb(128, 128, 128);
+}
+
+.panel.details.layer-tree tr.selected .name-column .pseudo-element,
+.panel.details.layer-tree tr.selected .name-column .reflection {
+ color: rgba(255, 255, 255, 0.75);
+}
+
+.panel.details.layer-tree .bottom-bar {
+ position: absolute;
+ display: flex;
+ bottom: 0;
+ width: 100%;
+ border-top: 1px solid rgb(179, 179, 179);
+ background-color: white;
+}
+
+body.mac-platform.legacy .panel.details.layer-tree .bottom-bar {
+ height: 23px;
+}
+
+.panel.details.layer-tree .bottom-bar > div {
+ padding: 4px 6px;
+
+ line-height: 20px;
+
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+
+ display: flex;
+ flex: 1;
+}
+
+body.mac-platform.legacy .panel.details.layer-tree .bottom-bar > div {
+ line-height: inherit;
+ text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
+}
+
+.panel.details.layer-tree .layers-memory-label {
+ justify-content: flex-end;
+}
+
+.layer-tree-popover {
+ padding: 5px;
+}
+
+body.mac-platform.legacy .layer-tree-popover {
+ text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
+}
+
+.layer-tree-popover p {
+ margin: 0;
+}
+
+.layer-tree-popover ul {
+ list-style-type: none;
+ margin: 10px 0 0 0;
+ padding-left: 10px;
+}
+
+.layer-tree-popover li {
+ line-height: 1.3em;
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsLayerTreeDetailsSidebarPaneljsfromrev175765trunkSourceWebInspectorUIUserInterfaceViewsLayerTreeSidebarPaneljs"></a>
<div class="copfile"><h4>Copied: trunk/Source/WebInspectorUI/UserInterface/Views/LayerTreeDetailsSidebarPanel.js (from rev 175765, trunk/Source/WebInspectorUI/UserInterface/Views/LayerTreeSidebarPanel.js) (0 => 175767)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/LayerTreeDetailsSidebarPanel.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/LayerTreeDetailsSidebarPanel.js 2014-11-07 23:37:38 UTC (rev 175767)
</span><span class="lines">@@ -0,0 +1,443 @@
</span><ins>+/*
+ * 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.
+ */
+
+WebInspector.LayerTreeDetailsSidebarPanel = function()
+{
+ WebInspector.DOMDetailsSidebarPanel.call(this, "layer-tree", WebInspector.UIString("Layers"), WebInspector.UIString("Layer"), "Images/NavigationItemLayers.svg", "3");
+
+ this._dataGridNodesByLayerId = {};
+
+ this.element.classList.add(WebInspector.LayerTreeDetailsSidebarPanel.StyleClassName);
+
+ WebInspector.showShadowDOMSetting.addEventListener(WebInspector.Setting.Event.Changed, this._showShadowDOMSettingChanged, this);
+
+ window.addEventListener("resize", this._windowResized.bind(this));
+
+ this._buildLayerInfoSection();
+ this._buildDataGridSection();
+ this._buildBottomBar();
+};
+
+WebInspector.LayerTreeDetailsSidebarPanel.StyleClassName = "layer-tree";
+
+WebInspector.LayerTreeDetailsSidebarPanel.prototype = {
+ constructor: WebInspector.LayerTreeDetailsSidebarPanel,
+ __proto__: WebInspector.DOMDetailsSidebarPanel.prototype,
+
+ // DetailsSidebarPanel Overrides.
+
+ shown: function()
+ {
+ WebInspector.layerTreeManager.addEventListener(WebInspector.LayerTreeManager.Event.LayerTreeDidChange, this._layerTreeDidChange, this);
+
+ console.assert(this.parentSidebar);
+
+ this.needsRefresh();
+
+ WebInspector.DOMDetailsSidebarPanel.prototype.shown.call(this);
+ },
+
+ hidden: function()
+ {
+ WebInspector.layerTreeManager.removeEventListener(WebInspector.LayerTreeManager.Event.LayerTreeDidChange, this._layerTreeDidChange, this);
+
+ WebInspector.DOMDetailsSidebarPanel.prototype.hidden.call(this);
+ },
+
+ refresh: function()
+ {
+ if (!this.domNode)
+ return;
+
+ WebInspector.layerTreeManager.layersForNode(this.domNode, function(layerForNode, childLayers) {
+ this._unfilteredChildLayers = childLayers;
+ this._updateDisplayWithLayers(layerForNode, childLayers);
+ }.bind(this));
+ },
+
+ // DOMDetailsSidebarPanel Overrides
+
+ supportsDOMNode: function(nodeToInspect)
+ {
+ return WebInspector.layerTreeManager.supported && nodeToInspect.nodeType() === Node.ELEMENT_NODE;
+ },
+
+ // Private
+
+ _layerTreeDidChange: function(event)
+ {
+ this.needsRefresh();
+ },
+
+ _showShadowDOMSettingChanged: function(event)
+ {
+ if (this.selected)
+ this._updateDisplayWithLayers(this._layerForNode, this._unfilteredChildLayers);
+ },
+
+ _windowResized: function(event)
+ {
+ if (this._popover && this._popover.visible)
+ this._updatePopoverForSelectedNode();
+ },
+
+ _buildLayerInfoSection: function()
+ {
+ var rows = this._layerInfoRows = {};
+ var rowsArray = [];
+
+ rowsArray.push(rows["Width"] = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Width")));
+ rowsArray.push(rows["Height"] = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Height")));
+ rowsArray.push(rows["Paints"] = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Paints")));
+ rowsArray.push(rows["Memory"] = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Memory")));
+
+ this._layerInfoGroup = new WebInspector.DetailsSectionGroup(rowsArray);
+
+ var emptyRow = new WebInspector.DetailsSectionRow(WebInspector.UIString("No Layer Available"));
+ emptyRow.showEmptyMessage();
+ this._noLayerInformationGroup = new WebInspector.DetailsSectionGroup([emptyRow]);
+
+ this._layerInfoSection = new WebInspector.DetailsSection("layer-info", WebInspector.UIString("Layer Info"), [this._noLayerInformationGroup]);
+
+ this.contentElement.appendChild(this._layerInfoSection.element);
+ },
+
+ _buildDataGridSection: function()
+ {
+ var columns = {name: {}, paintCount: {}, memory: {}};
+
+ columns.name.title = WebInspector.UIString("Node");
+ columns.name.sortable = false;
+
+ columns.paintCount.title = WebInspector.UIString("Paints");
+ columns.paintCount.sortable = true;
+ columns.paintCount.aligned = "right";
+ columns.paintCount.width = "50px";
+
+ columns.memory.title = WebInspector.UIString("Memory");
+ columns.memory.sortable = true;
+ columns.memory.aligned = "right";
+ columns.memory.width = "70px";
+
+ this._dataGrid = new WebInspector.DataGrid(columns);
+ this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SortChanged, this._sortDataGrid, this);
+ this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SelectedNodeChanged, this._selectedDataGridNodeChanged, this);
+
+ this.sortColumnIdentifier = "memory";
+ this.sortOrder = WebInspector.DataGrid.SortOrder.Descending;
+
+ var element = this._dataGrid.element;
+ element.classList.add("inline");
+ element.addEventListener("focus", this._dataGridGainedFocus.bind(this), false);
+ element.addEventListener("blur", this._dataGridLostFocus.bind(this), false);
+ element.addEventListener("click", this._dataGridWasClicked.bind(this), false);
+
+ this._childLayersRow = new WebInspector.DetailsSectionDataGridRow(null, WebInspector.UIString("No Child Layers"));
+ var group = new WebInspector.DetailsSectionGroup([this._childLayersRow]);
+ var section = new WebInspector.DetailsSection("layer-children", WebInspector.UIString("Child Layers"), [group], null, true);
+
+ var element = this.contentElement.appendChild(section.element);
+ element.classList.add(section.identifier);
+ },
+
+ _buildBottomBar: function()
+ {
+ var bottomBar = this.element.appendChild(document.createElement("div"));
+ bottomBar.className = "bottom-bar";
+
+ this._layersCountLabel = bottomBar.appendChild(document.createElement("div"));
+ this._layersCountLabel.className = "layers-count-label";
+
+ this._layersMemoryLabel = bottomBar.appendChild(document.createElement("div"));
+ this._layersMemoryLabel.className = "layers-memory-label";
+ },
+
+ _sortDataGrid: function()
+ {
+ var sortColumnIdentifier = this._dataGrid.sortColumnIdentifier;
+
+ function comparator(a, b)
+ {
+ var item1 = a.layer[sortColumnIdentifier] || 0;
+ var item2 = b.layer[sortColumnIdentifier] || 0;
+ return item1 - item2;
+ }
+
+ this._dataGrid.sortNodes(comparator);
+ this._updatePopoverForSelectedNode();
+ },
+
+ _selectedDataGridNodeChanged: function()
+ {
+ if (this._dataGrid.selectedNode) {
+ this._highlightSelectedNode();
+ this._showPopoverForSelectedNode();
+ } else {
+ WebInspector.domTreeManager.hideDOMNodeHighlight();
+ this._hidePopover();
+ }
+ },
+
+ _dataGridGainedFocus: function(event)
+ {
+ this._highlightSelectedNode();
+ this._showPopoverForSelectedNode();
+ },
+
+ _dataGridLostFocus: function(event)
+ {
+ WebInspector.domTreeManager.hideDOMNodeHighlight();
+ this._hidePopover();
+ },
+
+ _dataGridWasClicked: function(event)
+ {
+ if (this._dataGrid.selectedNode && event.target.parentNode.classList.contains("filler"))
+ this._dataGrid.selectedNode.deselect();
+ },
+
+ _highlightSelectedNode: function()
+ {
+ var dataGridNode = this._dataGrid.selectedNode;
+ if (!dataGridNode)
+ return;
+
+ var layer = dataGridNode.layer;
+ if (layer.isGeneratedContent || layer.isReflection || layer.isAnonymous)
+ WebInspector.domTreeManager.highlightRect(layer.bounds, true);
+ else
+ WebInspector.domTreeManager.highlightDOMNode(layer.nodeId);
+ },
+
+ _updateDisplayWithLayers: function(layerForNode, childLayers)
+ {
+ if (!WebInspector.showShadowDOMSetting.value) {
+ childLayers = childLayers.filter(function(layer) {
+ return !layer.isInShadowTree;
+ });
+ }
+
+ this._updateLayerInfoSection(layerForNode);
+ this._updateDataGrid(layerForNode, childLayers);
+ this._updateMetrics(layerForNode, childLayers);
+
+ this._layerForNode = layerForNode;
+ this._childLayers = childLayers;
+ },
+
+ _updateLayerInfoSection: function(layer)
+ {
+ const emDash = "\u2014";
+
+ this._layerInfoSection.groups = layer ? [this._layerInfoGroup] : [this._noLayerInformationGroup];
+
+ if (!layer)
+ return;
+
+ this._layerInfoRows["Memory"].value = Number.bytesToString(layer.memory);
+ this._layerInfoRows["Width"].value = layer.compositedBounds.width + "px";
+ this._layerInfoRows["Height"].value = layer.compositedBounds.height + "px";
+ this._layerInfoRows["Paints"].value = layer.paintCount + "";
+ },
+
+ _updateDataGrid: function(layerForNode, childLayers)
+ {
+ var dataGrid = this._dataGrid;
+
+ var mutations = WebInspector.layerTreeManager.layerTreeMutations(this._childLayers, childLayers);
+
+ mutations.removals.forEach(function(layer) {
+ var node = this._dataGridNodesByLayerId[layer.layerId];
+ if (node) {
+ dataGrid.removeChild(node);
+ delete this._dataGridNodesByLayerId[layer.layerId];
+ }
+ }, this);
+
+ mutations.additions.forEach(function(layer) {
+ var node = this._dataGridNodeForLayer(layer);
+ if (node)
+ dataGrid.appendChild(node);
+ }, this);
+
+ mutations.preserved.forEach(function(layer) {
+ var node = this._dataGridNodesByLayerId[layer.layerId];
+ if (node)
+ node.layer = layer;
+ }, this);
+
+ this._sortDataGrid();
+
+ this._childLayersRow.dataGrid = !isEmptyObject(childLayers) ? this._dataGrid : null;
+ },
+
+ _dataGridNodeForLayer: function(layer)
+ {
+ var node = new WebInspector.LayerTreeDataGridNode(layer);
+
+ this._dataGridNodesByLayerId[layer.layerId] = node;
+
+ return node;
+ },
+
+ _updateMetrics: function(layerForNode, childLayers)
+ {
+ var layerCount = 0;
+ var totalMemory = 0;
+
+ if (layerForNode) {
+ layerCount++;
+ totalMemory += layerForNode.memory || 0;
+ }
+
+ childLayers.forEach(function(layer) {
+ layerCount++;
+ totalMemory += layer.memory || 0;
+ });
+
+ this._layersCountLabel.textContent = WebInspector.UIString("Layer Count: %d").format(layerCount);
+ this._layersMemoryLabel.textContent = WebInspector.UIString("Memory: %s").format(Number.bytesToString(totalMemory));
+ },
+
+ _showPopoverForSelectedNode: function()
+ {
+ var dataGridNode = this._dataGrid.selectedNode;
+ if (!dataGridNode)
+ return;
+
+ this._contentForPopover(dataGridNode.layer, function(content) {
+ if (dataGridNode === this._dataGrid.selectedNode)
+ this._updatePopoverForSelectedNode(content);
+ }.bind(this));
+ },
+
+ _updatePopoverForSelectedNode: function(content)
+ {
+ var dataGridNode = this._dataGrid.selectedNode;
+ if (!dataGridNode)
+ return;
+
+ var popover = this._popover;
+ if (!popover)
+ popover = this._popover = new WebInspector.Popover;
+
+ var targetFrame = WebInspector.Rect.rectFromClientRect(dataGridNode.element.getBoundingClientRect());
+
+ if (content)
+ popover.content = content;
+
+ popover.present(targetFrame.pad(2), [WebInspector.RectEdge.MIN_X]);
+ },
+
+ _hidePopover: function()
+ {
+ if (this._popover)
+ this._popover.dismiss();
+ },
+
+ _contentForPopover: function(layer, callback)
+ {
+ var content = document.createElement("div");
+ content.className = "layer-tree-popover";
+
+ content.appendChild(document.createElement("p")).textContent = WebInspector.UIString("Reasons for compositing:");
+
+ var list = content.appendChild(document.createElement("ul"));
+
+ WebInspector.layerTreeManager.reasonsForCompositingLayer(layer, function(compositingReasons) {
+ if (isEmptyObject(compositingReasons)) {
+ callback(content);
+ return;
+ }
+
+ this._populateListOfCompositingReasons(list, compositingReasons);
+
+ callback(content);
+ }.bind(this));
+
+ return content;
+ },
+
+ _populateListOfCompositingReasons: function(list, compositingReasons)
+ {
+ function addReason(reason)
+ {
+ list.appendChild(document.createElement("li")).textContent = reason;
+ }
+
+ if (compositingReasons.transform3D)
+ addReason(WebInspector.UIString("Element has a 3D transform"));
+ if (compositingReasons.video)
+ addReason(WebInspector.UIString("Element is <video>"));
+ if (compositingReasons.canvas)
+ addReason(WebInspector.UIString("Element is <canvas>"));
+ if (compositingReasons.plugin)
+ addReason(WebInspector.UIString("Element is a plug-in"));
+ if (compositingReasons.iFrame)
+ addReason(WebInspector.UIString("Element is <iframe>"));
+ if (compositingReasons.backfaceVisibilityHidden)
+ addReason(WebInspector.UIString("Element has “backface-visibility: hidden” style"));
+ if (compositingReasons.clipsCompositingDescendants)
+ addReason(WebInspector.UIString("Element clips compositing descendants"));
+ if (compositingReasons.animation)
+ addReason(WebInspector.UIString("Element is animated"));
+ if (compositingReasons.filters)
+ addReason(WebInspector.UIString("Element has CSS filters applied"));
+ if (compositingReasons.positionFixed)
+ addReason(WebInspector.UIString("Element has “position: fixed” style"));
+ if (compositingReasons.positionSticky)
+ addReason(WebInspector.UIString("Element has “position: sticky” style"));
+ if (compositingReasons.overflowScrollingTouch)
+ addReason(WebInspector.UIString("Element has “-webkit-overflow-scrolling: touch” style"));
+ if (compositingReasons.stacking)
+ addReason(WebInspector.UIString("Element establishes a stacking context"));
+ if (compositingReasons.overlap)
+ addReason(WebInspector.UIString("Element overlaps other compositing element"));
+ if (compositingReasons.negativeZIndexChildren)
+ addReason(WebInspector.UIString("Element has children with a negative z-index"));
+ if (compositingReasons.transformWithCompositedDescendants)
+ addReason(WebInspector.UIString("Element has a 2D transform and composited descendants"));
+ if (compositingReasons.opacityWithCompositedDescendants)
+ addReason(WebInspector.UIString("Element has opacity applied and composited descendants"));
+ if (compositingReasons.maskWithCompositedDescendants)
+ addReason(WebInspector.UIString("Element is masked and composited descendants"));
+ if (compositingReasons.reflectionWithCompositedDescendants)
+ addReason(WebInspector.UIString("Element has a reflection and composited descendants"));
+ if (compositingReasons.filterWithCompositedDescendants)
+ addReason(WebInspector.UIString("Element has CSS filters applied and composited descendants"));
+ if (compositingReasons.blendingWithCompositedDescendants)
+ addReason(WebInspector.UIString("Element has CSS blending applied and composited descendants"));
+ if (compositingReasons.isolatesCompositedBlendingDescendants)
+ addReason(WebInspector.UIString("Element is a stacking context and has composited descendants with CSS blending applied"));
+ if (compositingReasons.perspective)
+ addReason(WebInspector.UIString("Element has perspective applied"));
+ if (compositingReasons.preserve3D)
+ addReason(WebInspector.UIString("Element has “transform-style: preserve-3d” style"));
+ if (compositingReasons.root)
+ addReason(WebInspector.UIString("Element is the root element"));
+ if (compositingReasons.blending)
+ addReason(WebInspector.UIString("Element has “blend-mode” style"));
+ }
+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsLayerTreeSidebarPanelcss"></a>
<div class="delfile"><h4>Deleted: trunk/Source/WebInspectorUI/UserInterface/Views/LayerTreeSidebarPanel.css (175766 => 175767)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/LayerTreeSidebarPanel.css 2014-11-07 23:36:20 UTC (rev 175766)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/LayerTreeSidebarPanel.css 2014-11-07 23:37:38 UTC (rev 175767)
</span><span class="lines">@@ -1,106 +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.
- */
-
-.layer-tree.panel .data-grid {
- border-right: none;
- border-left: none;
- border-bottom: none;
-}
-
-.layer-tree.panel .name-column .icon {
- content: url(../Images/DOMElement.svg);
-}
-
-.layer-tree.panel tr.reflection .name-column .icon {
- content: url(../Images/Reflection.svg);
-}
-
-.layer-tree.panel tr.pseudo-element .name-column .icon {
- content: url(../Images/PseudoElement.svg);
-}
-
-.layer-tree.panel .name-column .pseudo-element,
-.layer-tree.panel .name-column .reflection {
- color: rgb(128, 128, 128);
-}
-
-.layer-tree.panel tr.selected .name-column .pseudo-element,
-.layer-tree.panel tr.selected .name-column .reflection {
- color: rgba(255, 255, 255, 0.75);
-}
-
-.layer-tree.panel .bottom-bar {
- position: relative;
- height: 28px;
- display: flex;
-}
-
-body.mac-platform.legacy .layer-tree.panel .bottom-bar {
- height: 22px;
-}
-
-.layer-tree.panel .bottom-bar > div {
- padding: 4px 6px;
-
- line-height: 20px;
-
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-
- display: flex;
- flex: 1;
-}
-
-body.mac-platform.legacy .layer-tree.panel .bottom-bar > div {
- line-height: inherit;
- text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
-}
-
-.layer-tree.panel .layers-memory-label {
- justify-content: flex-end;
-}
-
-.layer-tree-popover {
- padding: 5px;
-}
-
-body.mac-platform.legacy .layer-tree-popover {
- text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
-}
-
-.layer-tree-popover p {
- margin: 0;
-}
-
-.layer-tree-popover ul {
- list-style-type: none;
- margin: 10px 0 0 0;
- padding-left: 10px;
-}
-
-.layer-tree-popover li {
- line-height: 1.3em;
-}
</del></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsLayerTreeSidebarPaneljs"></a>
<div class="delfile"><h4>Deleted: trunk/Source/WebInspectorUI/UserInterface/Views/LayerTreeSidebarPanel.js (175766 => 175767)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/LayerTreeSidebarPanel.js 2014-11-07 23:36:20 UTC (rev 175766)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/LayerTreeSidebarPanel.js 2014-11-07 23:37:38 UTC (rev 175767)
</span><span class="lines">@@ -1,443 +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.
- */
-
-WebInspector.LayerTreeSidebarPanel = function() {
- WebInspector.DOMDetailsSidebarPanel.call(this, "layer-tree", WebInspector.UIString("Layers"), WebInspector.UIString("Layer"), "Images/NavigationItemLayers.svg", "3");
-
- this._dataGridNodesByLayerId = {};
-
- this.element.classList.add(WebInspector.LayerTreeSidebarPanel.StyleClassName);
-
- WebInspector.showShadowDOMSetting.addEventListener(WebInspector.Setting.Event.Changed, this._showShadowDOMSettingChanged, this);
-
- window.addEventListener("resize", this._windowResized.bind(this));
-
- this._buildLayerInfoSection();
- this._buildDataGridSection();
- this._buildBottomBar();
-};
-
-WebInspector.LayerTreeSidebarPanel.StyleClassName = "layer-tree";
-
-WebInspector.LayerTreeSidebarPanel.prototype = {
- constructor: WebInspector.LayerTreeSidebarPanel,
-
- // DetailsSidebarPanel Overrides.
-
- shown: function()
- {
- WebInspector.layerTreeManager.addEventListener(WebInspector.LayerTreeManager.Event.LayerTreeDidChange, this._layerTreeDidChange, this);
-
- console.assert(this.parentSidebar);
-
- this.needsRefresh();
-
- WebInspector.DOMDetailsSidebarPanel.prototype.shown.call(this);
- },
-
- hidden: function()
- {
- WebInspector.layerTreeManager.removeEventListener(WebInspector.LayerTreeManager.Event.LayerTreeDidChange, this._layerTreeDidChange, this);
-
- WebInspector.DOMDetailsSidebarPanel.prototype.hidden.call(this);
- },
-
- refresh: function()
- {
- if (!this.domNode)
- return;
-
- WebInspector.layerTreeManager.layersForNode(this.domNode, function(layerForNode, childLayers) {
- this._unfilteredChildLayers = childLayers;
- this._updateDisplayWithLayers(layerForNode, childLayers);
- }.bind(this));
- },
-
- // DOMDetailsSidebarPanel Overrides
-
- supportsDOMNode: function(nodeToInspect)
- {
- return WebInspector.layerTreeManager.supported && nodeToInspect.nodeType() === Node.ELEMENT_NODE;
- },
-
- // Private
-
- _layerTreeDidChange: function(event)
- {
- this.needsRefresh();
- },
-
- _showShadowDOMSettingChanged: function(event)
- {
- if (this.selected)
- this._updateDisplayWithLayers(this._layerForNode, this._unfilteredChildLayers);
- },
-
- _windowResized: function(event)
- {
- if (this._popover && this._popover.visible)
- this._updatePopoverForSelectedNode();
- },
-
- _buildLayerInfoSection: function()
- {
- var rows = this._layerInfoRows = {};
- var rowsArray = [];
-
- rowsArray.push(rows["Width"] = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Width")));
- rowsArray.push(rows["Height"] = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Height")));
- rowsArray.push(rows["Paints"] = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Paints")));
- rowsArray.push(rows["Memory"] = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Memory")));
-
- this._layerInfoGroup = new WebInspector.DetailsSectionGroup(rowsArray);
-
- var emptyRow = new WebInspector.DetailsSectionRow(WebInspector.UIString("No Layer Available"));
- emptyRow.showEmptyMessage();
- this._noLayerInformationGroup = new WebInspector.DetailsSectionGroup([emptyRow]);
-
- this._layerInfoSection = new WebInspector.DetailsSection("layer-info", WebInspector.UIString("Layer Info"), [this._noLayerInformationGroup]);
-
- this.element.appendChild(this._layerInfoSection.element);
- },
-
- _buildDataGridSection: function()
- {
- var columns = {name: {}, paintCount: {}, memory: {}};
-
- columns.name.title = WebInspector.UIString("Node");
- columns.name.sortable = false;
-
- columns.paintCount.title = WebInspector.UIString("Paints");
- columns.paintCount.sortable = true;
- columns.paintCount.aligned = "right";
- columns.paintCount.width = "50px";
-
- columns.memory.title = WebInspector.UIString("Memory");
- columns.memory.sortable = true;
- columns.memory.aligned = "right";
- columns.memory.width = "70px";
-
- this._dataGrid = new WebInspector.DataGrid(columns);
- this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SortChanged, this._sortDataGrid, this);
- this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SelectedNodeChanged, this._selectedDataGridNodeChanged, this);
-
- this.sortColumnIdentifier = "memory";
- this.sortOrder = WebInspector.DataGrid.SortOrder.Descending;
-
- var element = this._dataGrid.element;
- element.classList.add("inline");
- element.addEventListener("focus", this._dataGridGainedFocus.bind(this), false);
- element.addEventListener("blur", this._dataGridLostFocus.bind(this), false);
- element.addEventListener("click", this._dataGridWasClicked.bind(this), false);
-
- this._childLayersRow = new WebInspector.DetailsSectionDataGridRow(null, WebInspector.UIString("No Child Layers"));
- var group = new WebInspector.DetailsSectionGroup([this._childLayersRow]);
- var section = new WebInspector.DetailsSection("layer-children", WebInspector.UIString("Child Layers"), [group], null, true);
-
- var element = this.element.appendChild(section.element);
- element.classList.add(section.identifier);
- },
-
- _buildBottomBar: function()
- {
- var bottomBar = this.element.appendChild(document.createElement("div"));
- bottomBar.className = "bottom-bar";
-
- this._layersCountLabel = bottomBar.appendChild(document.createElement("div"));
- this._layersCountLabel.className = "layers-count-label";
-
- this._layersMemoryLabel = bottomBar.appendChild(document.createElement("div"));
- this._layersMemoryLabel.className = "layers-memory-label";
- },
-
- _sortDataGrid: function()
- {
- var sortColumnIdentifier = this._dataGrid.sortColumnIdentifier;
-
- function comparator(a, b)
- {
- var item1 = a.layer[sortColumnIdentifier] || 0;
- var item2 = b.layer[sortColumnIdentifier] || 0;
- return item1 - item2;
- }
-
- this._dataGrid.sortNodes(comparator);
- this._updatePopoverForSelectedNode();
- },
-
- _selectedDataGridNodeChanged: function()
- {
- if (this._dataGrid.selectedNode) {
- this._highlightSelectedNode();
- this._showPopoverForSelectedNode();
- } else {
- WebInspector.domTreeManager.hideDOMNodeHighlight();
- this._hidePopover();
- }
- },
-
- _dataGridGainedFocus: function(event)
- {
- this._highlightSelectedNode();
- this._showPopoverForSelectedNode();
- },
-
- _dataGridLostFocus: function(event)
- {
- WebInspector.domTreeManager.hideDOMNodeHighlight();
- this._hidePopover();
- },
-
- _dataGridWasClicked: function(event)
- {
- if (this._dataGrid.selectedNode && event.target.parentNode.classList.contains("filler"))
- this._dataGrid.selectedNode.deselect();
- },
-
- _highlightSelectedNode: function()
- {
- var dataGridNode = this._dataGrid.selectedNode;
- if (!dataGridNode)
- return;
-
- var layer = dataGridNode.layer;
- if (layer.isGeneratedContent || layer.isReflection || layer.isAnonymous)
- WebInspector.domTreeManager.highlightRect(layer.bounds, true);
- else
- WebInspector.domTreeManager.highlightDOMNode(layer.nodeId);
- },
-
- _updateDisplayWithLayers: function(layerForNode, childLayers)
- {
- if (!WebInspector.showShadowDOMSetting.value) {
- childLayers = childLayers.filter(function(layer) {
- return !layer.isInShadowTree;
- });
- }
-
- this._updateLayerInfoSection(layerForNode);
- this._updateDataGrid(layerForNode, childLayers);
- this._updateMetrics(layerForNode, childLayers);
-
- this._layerForNode = layerForNode;
- this._childLayers = childLayers;
- },
-
- _updateLayerInfoSection: function(layer)
- {
- const emDash = "\u2014";
-
- this._layerInfoSection.groups = layer ? [this._layerInfoGroup] : [this._noLayerInformationGroup];
-
- if (!layer)
- return;
-
- this._layerInfoRows["Memory"].value = Number.bytesToString(layer.memory);
- this._layerInfoRows["Width"].value = layer.compositedBounds.width + "px";
- this._layerInfoRows["Height"].value = layer.compositedBounds.height + "px";
- this._layerInfoRows["Paints"].value = layer.paintCount + "";
- },
-
- _updateDataGrid: function(layerForNode, childLayers)
- {
- var dataGrid = this._dataGrid;
-
- var mutations = WebInspector.layerTreeManager.layerTreeMutations(this._childLayers, childLayers);
-
- mutations.removals.forEach(function(layer) {
- var node = this._dataGridNodesByLayerId[layer.layerId];
- if (node) {
- dataGrid.removeChild(node);
- delete this._dataGridNodesByLayerId[layer.layerId];
- }
- }, this);
-
- mutations.additions.forEach(function(layer) {
- var node = this._dataGridNodeForLayer(layer);
- if (node)
- dataGrid.appendChild(node);
- }, this);
-
- mutations.preserved.forEach(function(layer) {
- var node = this._dataGridNodesByLayerId[layer.layerId];
- if (node)
- node.layer = layer;
- }, this);
-
- this._sortDataGrid();
-
- this._childLayersRow.dataGrid = !isEmptyObject(childLayers) ? this._dataGrid : null;
- },
-
- _dataGridNodeForLayer: function(layer)
- {
- var node = new WebInspector.LayerTreeDataGridNode(layer);
-
- this._dataGridNodesByLayerId[layer.layerId] = node;
-
- return node;
- },
-
- _updateMetrics: function(layerForNode, childLayers)
- {
- var layerCount = 0;
- var totalMemory = 0;
-
- if (layerForNode) {
- layerCount++;
- totalMemory += layerForNode.memory || 0;
- }
-
- childLayers.forEach(function(layer) {
- layerCount++;
- totalMemory += layer.memory || 0;
- });
-
- this._layersCountLabel.textContent = WebInspector.UIString("Layer Count: %d").format(layerCount);
- this._layersMemoryLabel.textContent = WebInspector.UIString("Memory: %s").format(Number.bytesToString(totalMemory));
- },
-
- _showPopoverForSelectedNode: function()
- {
- var dataGridNode = this._dataGrid.selectedNode;
- if (!dataGridNode)
- return;
-
- this._contentForPopover(dataGridNode.layer, function(content) {
- if (dataGridNode === this._dataGrid.selectedNode)
- this._updatePopoverForSelectedNode(content);
- }.bind(this));
- },
-
- _updatePopoverForSelectedNode: function(content)
- {
- var dataGridNode = this._dataGrid.selectedNode;
- if (!dataGridNode)
- return;
-
- var popover = this._popover;
- if (!popover)
- popover = this._popover = new WebInspector.Popover;
-
- var targetFrame = WebInspector.Rect.rectFromClientRect(dataGridNode.element.getBoundingClientRect());
-
- if (content)
- popover.content = content;
-
- popover.present(targetFrame.pad(2), [WebInspector.RectEdge.MIN_X]);
- },
-
- _hidePopover: function()
- {
- if (this._popover)
- this._popover.dismiss();
- },
-
- _contentForPopover: function(layer, callback)
- {
- var content = document.createElement("div");
- content.className = "layer-tree-popover";
-
- content.appendChild(document.createElement("p")).textContent = WebInspector.UIString("Reasons for compositing:");
-
- var list = content.appendChild(document.createElement("ul"));
-
- WebInspector.layerTreeManager.reasonsForCompositingLayer(layer, function(compositingReasons) {
- if (isEmptyObject(compositingReasons)) {
- callback(content);
- return;
- }
-
- this._populateListOfCompositingReasons(list, compositingReasons);
-
- callback(content);
- }.bind(this));
-
- return content;
- },
-
- _populateListOfCompositingReasons: function(list, compositingReasons)
- {
- function addReason(reason)
- {
- list.appendChild(document.createElement("li")).textContent = reason;
- }
-
- if (compositingReasons.transform3D)
- addReason(WebInspector.UIString("Element has a 3D transform"));
- if (compositingReasons.video)
- addReason(WebInspector.UIString("Element is <video>"));
- if (compositingReasons.canvas)
- addReason(WebInspector.UIString("Element is <canvas>"));
- if (compositingReasons.plugin)
- addReason(WebInspector.UIString("Element is a plug-in"));
- if (compositingReasons.iFrame)
- addReason(WebInspector.UIString("Element is <iframe>"));
- if (compositingReasons.backfaceVisibilityHidden)
- addReason(WebInspector.UIString("Element has “backface-visibility: hidden” style"));
- if (compositingReasons.clipsCompositingDescendants)
- addReason(WebInspector.UIString("Element clips compositing descendants"));
- if (compositingReasons.animation)
- addReason(WebInspector.UIString("Element is animated"));
- if (compositingReasons.filters)
- addReason(WebInspector.UIString("Element has CSS filters applied"));
- if (compositingReasons.positionFixed)
- addReason(WebInspector.UIString("Element has “position: fixed” style"));
- if (compositingReasons.positionSticky)
- addReason(WebInspector.UIString("Element has “position: sticky” style"));
- if (compositingReasons.overflowScrollingTouch)
- addReason(WebInspector.UIString("Element has “-webkit-overflow-scrolling: touch” style"));
- if (compositingReasons.stacking)
- addReason(WebInspector.UIString("Element establishes a stacking context"));
- if (compositingReasons.overlap)
- addReason(WebInspector.UIString("Element overlaps other compositing element"));
- if (compositingReasons.negativeZIndexChildren)
- addReason(WebInspector.UIString("Element has children with a negative z-index"));
- if (compositingReasons.transformWithCompositedDescendants)
- addReason(WebInspector.UIString("Element has a 2D transform and composited descendants"));
- if (compositingReasons.opacityWithCompositedDescendants)
- addReason(WebInspector.UIString("Element has opacity applied and composited descendants"));
- if (compositingReasons.maskWithCompositedDescendants)
- addReason(WebInspector.UIString("Element is masked and composited descendants"));
- if (compositingReasons.reflectionWithCompositedDescendants)
- addReason(WebInspector.UIString("Element has a reflection and composited descendants"));
- if (compositingReasons.filterWithCompositedDescendants)
- addReason(WebInspector.UIString("Element has CSS filters applied and composited descendants"));
- if (compositingReasons.blendingWithCompositedDescendants)
- addReason(WebInspector.UIString("Element has CSS blending applied and composited descendants"));
- if (compositingReasons.isolatesCompositedBlendingDescendants)
- addReason(WebInspector.UIString("Element is a stacking context and has composited descendants with CSS blending applied"));
- if (compositingReasons.perspective)
- addReason(WebInspector.UIString("Element has perspective applied"));
- if (compositingReasons.preserve3D)
- addReason(WebInspector.UIString("Element has “transform-style: preserve-3d” style"));
- if (compositingReasons.root)
- addReason(WebInspector.UIString("Element is the root element"));
- if (compositingReasons.blending)
- addReason(WebInspector.UIString("Element has “blend-mode” style"));
- }
-};
-
-WebInspector.LayerTreeSidebarPanel.prototype.__proto__ = WebInspector.DOMDetailsSidebarPanel.prototype;
</del></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsNavigationSidebarPanelcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.css (175766 => 175767)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.css 2014-11-07 23:36:20 UTC (rev 175766)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.css 2014-11-07 23:37:38 UTC (rev 175767)
</span><span class="lines">@@ -24,14 +24,7 @@
</span><span class="cx"> */
</span><span class="cx">
</span><span class="cx"> .sidebar > .panel.navigation > .content {
</span><del>- position: absolute;
- top: 0;
- left: 0;
- right: 0;
</del><span class="cx"> bottom: 28px;
</span><del>-
- overflow-x: hidden;
- overflow-y: auto;
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> body.mac-platform.legacy .sidebar > .panel.navigation > .content {
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsNavigationSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js (175766 => 175767)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js 2014-11-07 23:36:20 UTC (rev 175766)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js 2014-11-07 23:37:38 UTC (rev 175767)
</span><span class="lines">@@ -23,7 +23,8 @@
</span><span class="cx"> * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx"> */
</span><span class="cx">
</span><del>-WebInspector.NavigationSidebarPanel = function(identifier, displayName, image, keyboardShortcutKey, autoPruneOldTopLevelResourceTreeElements, autoHideToolbarItemWhenEmpty, wantsTopOverflowShadow, element, role, label) {
</del><ins>+WebInspector.NavigationSidebarPanel = function(identifier, displayName, image, keyboardShortcutKey, autoPruneOldTopLevelResourceTreeElements, autoHideToolbarItemWhenEmpty, wantsTopOverflowShadow, element, role, label)
+{
</ins><span class="cx"> if (keyboardShortcutKey)
</span><span class="cx"> this._keyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Control, keyboardShortcutKey, this.toggle.bind(this));
</span><span class="cx">
</span><span class="lines">@@ -46,10 +47,7 @@
</span><span class="cx">
</span><span class="cx"> this._visibleContentTreeOutlines = new Set;
</span><span class="cx">
</span><del>- this._contentElement = document.createElement("div");
- this._contentElement.className = WebInspector.NavigationSidebarPanel.ContentElementStyleClassName;
- this._contentElement.addEventListener("scroll", this._updateContentOverflowShadowVisibility.bind(this));
- this.element.appendChild(this._contentElement);
</del><ins>+ this.contentElement.addEventListener("scroll", this._updateContentOverflowShadowVisibility.bind(this));
</ins><span class="cx">
</span><span class="cx"> this._contentTreeOutline = this.createContentTreeOutline(true);
</span><span class="cx">
</span><span class="lines">@@ -93,7 +91,6 @@
</span><span class="cx"> WebInspector.NavigationSidebarPanel.StyleClassName = "navigation";
</span><span class="cx"> WebInspector.NavigationSidebarPanel.OverflowShadowElementStyleClassName = "overflow-shadow";
</span><span class="cx"> WebInspector.NavigationSidebarPanel.TopOverflowShadowElementStyleClassName = "top";
</span><del>-WebInspector.NavigationSidebarPanel.ContentElementStyleClassName = "content";
</del><span class="cx"> WebInspector.NavigationSidebarPanel.ContentTreeOutlineElementHiddenStyleClassName = "hidden";
</span><span class="cx"> WebInspector.NavigationSidebarPanel.ContentTreeOutlineElementStyleClassName = "navigation-sidebar-panel-content-tree-outline";
</span><span class="cx"> WebInspector.NavigationSidebarPanel.HideDisclosureButtonsStyleClassName = "hide-disclosure-buttons";
</span><span class="lines">@@ -106,14 +103,10 @@
</span><span class="cx">
</span><span class="cx"> WebInspector.NavigationSidebarPanel.prototype = {
</span><span class="cx"> constructor: WebInspector.NavigationSidebarPanel,
</span><ins>+ __proto__: WebInspector.SidebarPanel.prototype,
</ins><span class="cx">
</span><span class="cx"> // Public
</span><span class="cx">
</span><del>- get contentElement()
- {
- return this._contentElement;
- },
-
</del><span class="cx"> get contentTreeOutlineElement()
</span><span class="cx"> {
</span><span class="cx"> return this._contentTreeOutline.element;
</span><span class="lines">@@ -173,7 +166,7 @@
</span><span class="cx"> contentTreeOutlineElement.className = WebInspector.NavigationSidebarPanel.ContentTreeOutlineElementStyleClassName;
</span><span class="cx"> if (!dontHideByDefault)
</span><span class="cx"> contentTreeOutlineElement.classList.add(WebInspector.NavigationSidebarPanel.ContentTreeOutlineElementHiddenStyleClassName);
</span><del>- this._contentElement.appendChild(contentTreeOutlineElement);
</del><ins>+ this.contentElement.appendChild(contentTreeOutlineElement);
</ins><span class="cx">
</span><span class="cx"> var contentTreeOutline = new TreeOutline(contentTreeOutlineElement);
</span><span class="cx"> contentTreeOutline.allowsRepeatSelection = true;
</span><span class="lines">@@ -441,8 +434,8 @@
</span><span class="cx"> {
</span><span class="cx"> delete this._updateContentOverflowShadowVisibilityIdentifier;
</span><span class="cx">
</span><del>- var scrollHeight = this._contentElement.scrollHeight;
- var offsetHeight = this._contentElement.offsetHeight;
</del><ins>+ var scrollHeight = this.contentElement.scrollHeight;
+ var offsetHeight = this.contentElement.offsetHeight;
</ins><span class="cx">
</span><span class="cx"> if (scrollHeight < offsetHeight) {
</span><span class="cx"> if (this._topOverflowShadowElement)
</span><span class="lines">@@ -456,7 +449,7 @@
</span><span class="cx"> else
</span><span class="cx"> const edgeThreshold = 1;
</span><span class="cx">
</span><del>- var scrollTop = this._contentElement.scrollTop;
</del><ins>+ var scrollTop = this.contentElement.scrollTop;
</ins><span class="cx">
</span><span class="cx"> var topCoverage = Math.min(scrollTop, edgeThreshold);
</span><span class="cx"> var bottomCoverage = Math.max(0, (offsetHeight + scrollTop) - (scrollHeight - edgeThreshold));
</span><span class="lines">@@ -733,5 +726,3 @@
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx"> };
</span><del>-
-WebInspector.NavigationSidebarPanel.prototype.__proto__ = WebInspector.SidebarPanel.prototype;
</del></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsProbeDetailsSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ProbeDetailsSidebarPanel.js (175766 => 175767)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ProbeDetailsSidebarPanel.js 2014-11-07 23:36:20 UTC (rev 175766)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ProbeDetailsSidebarPanel.js 2014-11-07 23:37:38 UTC (rev 175767)
</span><span class="lines">@@ -56,14 +56,14 @@
</span><span class="cx"> {
</span><span class="cx"> for (var probeSet of this._inspectedProbeSets) {
</span><span class="cx"> var removedSection = this._probeSetSections.get(probeSet);
</span><del>- this.element.removeChild(removedSection.element);
</del><ins>+ this.contentElement.removeChild(removedSection.element);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> this._inspectedProbeSets = newProbeSets;
</span><span class="cx">
</span><span class="cx"> for (var probeSet of newProbeSets) {
</span><span class="cx"> var shownSection = this._probeSetSections.get(probeSet);
</span><del>- this.element.appendChild(shownSection.element);
</del><ins>+ this.contentElement.appendChild(shownSection.element);
</ins><span class="cx"> }
</span><span class="cx"> },
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsResourceDetailsSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ResourceDetailsSidebarPanel.js (175766 => 175767)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ResourceDetailsSidebarPanel.js 2014-11-07 23:36:20 UTC (rev 175766)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ResourceDetailsSidebarPanel.js 2014-11-07 23:37:38 UTC (rev 175767)
</span><span class="lines">@@ -23,7 +23,8 @@
</span><span class="cx"> * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx"> */
</span><span class="cx">
</span><del>-WebInspector.ResourceDetailsSidebarPanel = function() {
</del><ins>+WebInspector.ResourceDetailsSidebarPanel = function()
+{
</ins><span class="cx"> WebInspector.DetailsSidebarPanel.call(this, "resource-details", WebInspector.UIString("Resource"), WebInspector.UIString("Resource"), "Images/NavigationItemFile.svg", "1");
</span><span class="cx">
</span><span class="cx"> this.element.classList.add(WebInspector.ResourceDetailsSidebarPanel.StyleClassName);
</span><span class="lines">@@ -99,17 +100,18 @@
</span><span class="cx"> this._imageSizeSection = new WebInspector.DetailsSection("resource-type", WebInspector.UIString("Image Size"));
</span><span class="cx"> this._imageSizeSection.groups = [new WebInspector.DetailsSectionGroup([this._imageWidthRow, this._imageHeightRow])];
</span><span class="cx">
</span><del>- this.element.appendChild(this._typeSection.element);
- this.element.appendChild(this._locationSection.element);
- this.element.appendChild(this._requestAndResponseSection.element);
- this.element.appendChild(this._requestHeadersSection.element);
- this.element.appendChild(this._responseHeadersSection.element);
</del><ins>+ this.contentElement.appendChild(this._typeSection.element);
+ this.contentElement.appendChild(this._locationSection.element);
+ this.contentElement.appendChild(this._requestAndResponseSection.element);
+ this.contentElement.appendChild(this._requestHeadersSection.element);
+ this.contentElement.appendChild(this._responseHeadersSection.element);
</ins><span class="cx"> };
</span><span class="cx">
</span><span class="cx"> WebInspector.ResourceDetailsSidebarPanel.StyleClassName = "resource";
</span><span class="cx">
</span><span class="cx"> WebInspector.ResourceDetailsSidebarPanel.prototype = {
</span><span class="cx"> constructor: WebInspector.ResourceDetailsSidebarPanel,
</span><ins>+ __proto__: WebInspector.DetailsSidebarPanel.prototype,
</ins><span class="cx">
</span><span class="cx"> // Public
</span><span class="cx">
</span><span class="lines">@@ -227,7 +229,7 @@
</span><span class="cx">
</span><span class="cx"> if (urlComponents.queryString) {
</span><span class="cx"> // Ensure the "Query Parameters" section is displayed, right after the "Request & Response" section.
</span><del>- this.element.insertBefore(this._queryParametersSection.element, this._requestAndResponseSection.element.nextSibling);
</del><ins>+ this.contentElement.insertBefore(this._queryParametersSection.element, this._requestAndResponseSection.element.nextSibling);
</ins><span class="cx">
</span><span class="cx"> this._queryParametersRow.dataGrid = this._createNameValueDataGrid(parseQueryString(urlComponents.queryString, true));
</span><span class="cx"> } else {
</span><span class="lines">@@ -385,12 +387,12 @@
</span><span class="cx"> if (resource.type !== WebInspector.Resource.Type.Image || resource.failed) {
</span><span class="cx"> var imageSectionElement = this._imageSizeSection.element;
</span><span class="cx"> if (imageSectionElement.parentNode)
</span><del>- this.element.removeChild(imageSectionElement);
</del><ins>+ this.contentElement.removeChild(imageSectionElement);
</ins><span class="cx"> return;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Ensure the section is displayed, right before the "Location" section.
</span><del>- this.element.insertBefore(this._imageSizeSection.element, this._locationSection.element);
</del><ins>+ this.contentElement.insertBefore(this._imageSizeSection.element, this._locationSection.element);
</ins><span class="cx">
</span><span class="cx"> // Get the metrics for this resource and fill in the metrics rows with that information.
</span><span class="cx"> resource.getImageSize(function(size) {
</span><span class="lines">@@ -419,7 +421,7 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Ensure the section is displayed, right before the "Request Headers" section.
</span><del>- this.element.insertBefore(this._requestDataSection.element, this._requestHeadersSection.element);
</del><ins>+ this.contentElement.insertBefore(this._requestDataSection.element, this._requestHeadersSection.element);
</ins><span class="cx">
</span><span class="cx"> var requestDataContentType = resource.requestDataContentType || "";
</span><span class="cx"> if (requestDataContentType && requestDataContentType.match(/^application\/x-www-form-urlencoded\s*(;.*)?$/i)) {
</span><span class="lines">@@ -474,5 +476,3 @@
</span><span class="cx"> this._requestDataSection.groups = [new WebInspector.DetailsSectionGroup(rows)];
</span><span class="cx"> }
</span><span class="cx"> };
</span><del>-
-WebInspector.ResourceDetailsSidebarPanel.prototype.__proto__ = WebInspector.DetailsSidebarPanel.prototype;
</del></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsScopeChainDetailsSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ScopeChainDetailsSidebarPanel.js (175766 => 175767)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ScopeChainDetailsSidebarPanel.js 2014-11-07 23:36:20 UTC (rev 175766)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ScopeChainDetailsSidebarPanel.js 2014-11-07 23:37:38 UTC (rev 175767)
</span><span class="lines">@@ -35,6 +35,7 @@
</span><span class="cx">
</span><span class="cx"> WebInspector.ScopeChainDetailsSidebarPanel.prototype = {
</span><span class="cx"> constructor: WebInspector.ScopeChainDetailsSidebarPanel,
</span><ins>+ __proto__: WebInspector.DetailsSidebarPanel.prototype,
</ins><span class="cx">
</span><span class="cx"> // Public
</span><span class="cx">
</span><span class="lines">@@ -161,9 +162,9 @@
</span><span class="cx"> if (this.callFrame !== callFrame)
</span><span class="cx"> return;
</span><span class="cx">
</span><del>- this.element.removeChildren();
</del><ins>+ this.contentElement.removeChildren();
</ins><span class="cx"> for (var i = 0; i < detailsSections.length; ++i)
</span><del>- this.element.appendChild(detailsSections[i].element);
</del><ins>+ this.contentElement.appendChild(detailsSections[i].element);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // We need a timeout in place in case there are long running, pending backend dispatches. This can happen
</span><span class="lines">@@ -176,5 +177,3 @@
</span><span class="cx"> InspectorBackend.runAfterPendingDispatches(delayedWork.bind(this));
</span><span class="cx"> }
</span><span class="cx"> };
</span><del>-
-WebInspector.ScopeChainDetailsSidebarPanel.prototype.__proto__ = WebInspector.DetailsSidebarPanel.prototype;
</del></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsSidebarPanelcssfromrev175765trunkSourceWebInspectorUIUserInterfaceViewsDetailsSidebarPanelcss"></a>
<div class="copfile"><h4>Copied: trunk/Source/WebInspectorUI/UserInterface/Views/SidebarPanel.css (from rev 175765, trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSidebarPanel.css) (0 => 175767)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/SidebarPanel.css (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SidebarPanel.css 2014-11-07 23:37:38 UTC (rev 175767)
</span><span class="lines">@@ -0,0 +1,35 @@
</span><ins>+/*
+ * 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.
+ */
+
+.sidebar > .panel > .content {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+
+ overflow-x: hidden;
+ overflow-y: auto;
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SidebarPanel.js (175766 => 175767)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/SidebarPanel.js 2014-11-07 23:36:20 UTC (rev 175766)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SidebarPanel.js 2014-11-07 23:37:38 UTC (rev 175767)
</span><span class="lines">@@ -23,7 +23,8 @@
</span><span class="cx"> * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx"> */
</span><span class="cx">
</span><del>-WebInspector.SidebarPanel = function(identifier, displayName, showToolTip, hideToolTip, image, element, role, label) {
</del><ins>+WebInspector.SidebarPanel = function(identifier, displayName, showToolTip, hideToolTip, image, element, role, label)
+{
</ins><span class="cx"> WebInspector.Object.call(this);
</span><span class="cx">
</span><span class="cx"> this._identifier = identifier;
</span><span class="lines">@@ -39,13 +40,18 @@
</span><span class="cx"> this._element.setAttribute("role", role || "group");
</span><span class="cx"> this._element.setAttribute("aria-label", label || displayName);
</span><span class="cx">
</span><ins>+ this._contentElement = document.createElement("div");
+ this._contentElement.className = WebInspector.SidebarPanel.ContentElementStyleClassName;
+ this._element.appendChild(this._contentElement);
</ins><span class="cx"> };
</span><span class="cx">
</span><span class="cx"> WebInspector.SidebarPanel.StyleClassName = "panel";
</span><span class="cx"> WebInspector.SidebarPanel.SelectedStyleClassName = "selected";
</span><ins>+WebInspector.SidebarPanel.ContentElementStyleClassName = "content";
</ins><span class="cx">
</span><span class="cx"> WebInspector.SidebarPanel.prototype = {
</span><span class="cx"> constructor: WebInspector.SidebarPanel,
</span><ins>+ __proto__: WebInspector.Object.prototype,
</ins><span class="cx">
</span><span class="cx"> // Public
</span><span class="cx">
</span><span class="lines">@@ -64,6 +70,11 @@
</span><span class="cx"> return this._element;
</span><span class="cx"> },
</span><span class="cx">
</span><ins>+ get contentElement()
+ {
+ return this._contentElement;
+ },
+
</ins><span class="cx"> get visible()
</span><span class="cx"> {
</span><span class="cx"> return this.selected && this._parentSidebar && !this._parentSidebar.collapsed;
</span><span class="lines">@@ -152,5 +163,3 @@
</span><span class="cx"> this._toolbarItem.activated = this.visible;
</span><span class="cx"> }
</span><span class="cx"> };
</span><del>-
-WebInspector.SidebarPanel.prototype.__proto__ = WebInspector.Object.prototype;
</del></span></pre></div>
<a id="trunkSourceWebInspectorUIWebInspectorUIvcxprojWebInspectorUIvcxproj"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/WebInspectorUI.vcxproj/WebInspectorUI.vcxproj (175766 => 175767)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/WebInspectorUI.vcxproj/WebInspectorUI.vcxproj 2014-11-07 23:36:20 UTC (rev 175766)
+++ trunk/Source/WebInspectorUI/WebInspectorUI.vcxproj/WebInspectorUI.vcxproj 2014-11-07 23:37:38 UTC (rev 175767)
</span><span class="lines">@@ -379,7 +379,6 @@
</span><span class="cx"> <None Include="..\UserInterface\DetailsSectionPropertiesRow.js" />
</span><span class="cx"> <None Include="..\UserInterface\DetailsSectionRow.js" />
</span><span class="cx"> <None Include="..\UserInterface\DetailsSectionSimpleRow.js" />
</span><del>- <None Include="..\UserInterface\DetailsSidebarPanel.css" />
</del><span class="cx"> <None Include="..\UserInterface\DetailsSidebarPanel.js" />
</span><span class="cx"> <None Include="..\UserInterface\DividerNavigationItem.css" />
</span><span class="cx"> <None Include="..\UserInterface\DividerNavigationItem.js" />
</span><span class="lines">@@ -680,8 +679,8 @@
</span><span class="cx"> <None Include="..\UserInterface\LayerTreeDataGridNode.js" />
</span><span class="cx"> <None Include="..\UserInterface\LayerTreeManager.js" />
</span><span class="cx"> <None Include="..\UserInterface\LayerTreeObserver.js" />
</span><del>- <None Include="..\UserInterface\LayerTreeSidebarPanel.css" />
- <None Include="..\UserInterface\LayerTreeSidebarPanel.js" />
</del><ins>+ <None Include="..\UserInterface\LayerTreeDetailsSidebarPanel.css" />
+ <None Include="..\UserInterface\LayerTreeDetailsSidebarPanel.js" />
</ins><span class="cx"> <None Include="..\UserInterface\LayoutTimelineDataGrid.js" />
</span><span class="cx"> <None Include="..\UserInterface\LayoutTimelineDataGridNode.js" />
</span><span class="cx"> <None Include="..\UserInterface\LayoutTimelineRecord.js" />
</span><span class="lines">@@ -771,6 +770,7 @@
</span><span class="cx"> <None Include="..\UserInterface\Setting.js" />
</span><span class="cx"> <None Include="..\UserInterface\Sidebar.css" />
</span><span class="cx"> <None Include="..\UserInterface\Sidebar.js" />
</span><ins>+ <None Include="..\UserInterface\SidebarPanel.css" />
</ins><span class="cx"> <None Include="..\UserInterface\SidebarPanel.js" />
</span><span class="cx"> <None Include="..\UserInterface\SourceCode.js" />
</span><span class="cx"> <None Include="..\UserInterface\SourceCodeLocation.js" />
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIWebInspectorUIvcxprojWebInspectorUIvcxprojfilters"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/WebInspectorUI.vcxproj/WebInspectorUI.vcxproj.filters (175766 => 175767)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/WebInspectorUI.vcxproj/WebInspectorUI.vcxproj.filters 2014-11-07 23:36:20 UTC (rev 175766)
+++ trunk/Source/WebInspectorUI/WebInspectorUI.vcxproj/WebInspectorUI.vcxproj.filters 2014-11-07 23:37:38 UTC (rev 175767)
</span><span class="lines">@@ -387,9 +387,6 @@
</span><span class="cx"> <None Include="..\UserInterface\DetailsSectionSimpleRow.js">
</span><span class="cx"> <Filter>UserInterface</Filter>
</span><span class="cx"> </None>
</span><del>- <None Include="..\UserInterface\DetailsSidebarPanel.css">
- <Filter>UserInterface</Filter>
- </None>
</del><span class="cx"> <None Include="..\UserInterface\DetailsSidebarPanel.js">
</span><span class="cx"> <Filter>UserInterface</Filter>
</span><span class="cx"> </None>
</span><span class="lines">@@ -633,10 +630,10 @@
</span><span class="cx"> <None Include="..\UserInterface\LayerTreeObserver.js">
</span><span class="cx"> <Filter>UserInterface</Filter>
</span><span class="cx"> </None>
</span><del>- <None Include="..\UserInterface\LayerTreeSidebarPanel.css">
</del><ins>+ <None Include="..\UserInterface\LayerTreeDetailsSidebarPanel.css">
</ins><span class="cx"> <Filter>UserInterface</Filter>
</span><span class="cx"> </None>
</span><del>- <None Include="..\UserInterface\LayerTreeSidebarPanel.js">
</del><ins>+ <None Include="..\UserInterface\LayerTreeDetailsSidebarPanel.js">
</ins><span class="cx"> <Filter>UserInterface</Filter>
</span><span class="cx"> </None>
</span><span class="cx"> <None Include="..\UserInterface\LayoutTimelineDataGrid.js">
</span><span class="lines">@@ -897,6 +894,9 @@
</span><span class="cx"> <None Include="..\UserInterface\Sidebar.js">
</span><span class="cx"> <Filter>UserInterface</Filter>
</span><span class="cx"> </None>
</span><ins>+ <None Include="..\UserInterface\SidebarPanel.css">
+ <Filter>UserInterface</Filter>
+ </None>
</ins><span class="cx"> <None Include="..\UserInterface\SidebarPanel.js">
</span><span class="cx"> <Filter>UserInterface</Filter>
</span><span class="cx"> </None>
</span></span></pre>
</div>
</div>
</body>
</html>