<!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>[194116] 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/194116">194116</a></dd>
<dt>Author</dt> <dd>mattbaker@apple.com</dd>
<dt>Date</dt> <dd>2015-12-15 14:33:55 -0800 (Tue, 15 Dec 2015)</dd>
</dl>
<h3>Log Message</h3>
<pre>Web Inspector: Convert Sidebar classes to use View
https://bugs.webkit.org/show_bug.cgi?id=152274
Reviewed by Brian Burg.
Updated Sidebar and SidebarPanel to inherit from View. Mostly mechanical changes.
Once the DetailsSection class family inherits from View (https://webkit.org/b/152269),
directly modifying a sidebar's 'contentView' element will rarely be necessary.
* UserInterface/Views/ApplicationCacheDetailsSidebarPanel.js:
(WebInspector.ApplicationCacheDetailsSidebarPanel):
* UserInterface/Views/CSSStyleDetailsSidebarPanel.js:
(WebInspector.CSSStyleDetailsSidebarPanel):
(WebInspector.CSSStyleDetailsSidebarPanel.prototype.refresh):
(WebInspector.CSSStyleDetailsSidebarPanel.prototype._switchPanels):
Add/remove panels as subviews of the sidebar.
(WebInspector.CSSStyleDetailsSidebarPanel.prototype._filterDidChange):
* UserInterface/Views/DOMNodeDetailsSidebarPanel.js:
(WebInspector.DOMNodeDetailsSidebarPanel):
* UserInterface/Views/DebuggerSidebarPanel.js:
(WebInspector.DebuggerSidebarPanel):
(WebInspector.DebuggerSidebarPanel.prototype._debuggerDidPause):
* UserInterface/Views/LayerTreeDetailsSidebarPanel.js:
(WebInspector.LayerTreeDetailsSidebarPanel.prototype._buildLayerInfoSection):
(WebInspector.LayerTreeDetailsSidebarPanel.prototype._buildDataGridSection):
* UserInterface/Views/NavigationSidebarPanel.js:
(WebInspector.NavigationSidebarPanel):
(WebInspector.NavigationSidebarPanel.prototype.createContentTreeOutline):
(WebInspector.NavigationSidebarPanel.prototype._updateContentOverflowShadowVisibility):
* UserInterface/Views/ProbeDetailsSidebarPanel.js:
(WebInspector.ProbeDetailsSidebarPanel.prototype.set inspectedProbeSets):
* UserInterface/Views/ResourceDetailsSidebarPanel.js:
(WebInspector.ResourceDetailsSidebarPanel):
(WebInspector.ResourceDetailsSidebarPanel.prototype._refreshURL):
(WebInspector.ResourceDetailsSidebarPanel.prototype._refreshImageSizeSection):
(WebInspector.ResourceDetailsSidebarPanel.prototype._refreshRequestDataSection):
* UserInterface/Views/ScopeChainDetailsSidebarPanel.js:
(WebInspector.ScopeChainDetailsSidebarPanel):
(WebInspector.ScopeChainDetailsSidebarPanel.prototype.refresh.):
(WebInspector.ScopeChainDetailsSidebarPanel.prototype.refresh):
* UserInterface/Views/SidebarPanel.js:
Inherit from View.
(WebInspector.SidebarPanel):
Replace the content element (the portion of the view excluding navigation
bars, filter bars, etc.) with a View object. A sidebar's content can be a mixture
of unwrapped DOM elements and View objects. For now, the content view's element
will be mutated directly, but once the DetailsSection class family inherits from
the View class the handling of details sections will be simplified.
(WebInspector.SidebarPanel.prototype.get contentView):
(WebInspector.SidebarPanel.prototype.shown):
(WebInspector.SidebarPanel.prototype.hidden):
(WebInspector.SidebarPanel.prototype.get contentElement): Deleted.
Replaced by WebInspector.SidebarPanel.prototype.get contentView.
* UserInterface/Views/StyleDetailsPanel.js:
Inherit from View.
(WebInspector.StyleDetailsPanel):
(WebInspector.StyleDetailsPanel.prototype.get element): Deleted.
Defer to View.element getter.
* UserInterface/Views/TimelineSidebarPanel.js:
(WebInspector.TimelineSidebarPanel.prototype._updateTimelineOverviewHeight):
* UserInterface/Views/VisualStyleDetailsPanel.js:
(WebInspector.VisualStyleDetailsPanel):
(WebInspector.VisualStyleDetailsPanel.prototype._updateSections):</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</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="#trunkSourceWebInspectorUIUserInterfaceViewsDOMNodeDetailsSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/DOMNodeDetailsSidebarPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDebuggerSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsLayerTreeDetailsSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/LayerTreeDetailsSidebarPanel.js</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="#trunkSourceWebInspectorUIUserInterfaceViewsStyleDetailsPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/StyleDetailsPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleDetailsPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (194115 => 194116)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2015-12-15 22:10:20 UTC (rev 194115)
+++ trunk/Source/WebInspectorUI/ChangeLog 2015-12-15 22:33:55 UTC (rev 194116)
</span><span class="lines">@@ -1,3 +1,81 @@
</span><ins>+2015-12-15 Matt Baker <mattbaker@apple.com>
+
+ Web Inspector: Convert Sidebar classes to use View
+ https://bugs.webkit.org/show_bug.cgi?id=152274
+
+ Reviewed by Brian Burg.
+
+ Updated Sidebar and SidebarPanel to inherit from View. Mostly mechanical changes.
+ Once the DetailsSection class family inherits from View (https://webkit.org/b/152269),
+ directly modifying a sidebar's 'contentView' element will rarely be necessary.
+
+ * UserInterface/Views/ApplicationCacheDetailsSidebarPanel.js:
+ (WebInspector.ApplicationCacheDetailsSidebarPanel):
+
+ * UserInterface/Views/CSSStyleDetailsSidebarPanel.js:
+ (WebInspector.CSSStyleDetailsSidebarPanel):
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype.refresh):
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype._switchPanels):
+ Add/remove panels as subviews of the sidebar.
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype._filterDidChange):
+
+ * UserInterface/Views/DOMNodeDetailsSidebarPanel.js:
+ (WebInspector.DOMNodeDetailsSidebarPanel):
+
+ * UserInterface/Views/DebuggerSidebarPanel.js:
+ (WebInspector.DebuggerSidebarPanel):
+ (WebInspector.DebuggerSidebarPanel.prototype._debuggerDidPause):
+
+ * UserInterface/Views/LayerTreeDetailsSidebarPanel.js:
+ (WebInspector.LayerTreeDetailsSidebarPanel.prototype._buildLayerInfoSection):
+ (WebInspector.LayerTreeDetailsSidebarPanel.prototype._buildDataGridSection):
+
+ * UserInterface/Views/NavigationSidebarPanel.js:
+ (WebInspector.NavigationSidebarPanel):
+ (WebInspector.NavigationSidebarPanel.prototype.createContentTreeOutline):
+ (WebInspector.NavigationSidebarPanel.prototype._updateContentOverflowShadowVisibility):
+
+ * UserInterface/Views/ProbeDetailsSidebarPanel.js:
+ (WebInspector.ProbeDetailsSidebarPanel.prototype.set inspectedProbeSets):
+
+ * UserInterface/Views/ResourceDetailsSidebarPanel.js:
+ (WebInspector.ResourceDetailsSidebarPanel):
+ (WebInspector.ResourceDetailsSidebarPanel.prototype._refreshURL):
+ (WebInspector.ResourceDetailsSidebarPanel.prototype._refreshImageSizeSection):
+ (WebInspector.ResourceDetailsSidebarPanel.prototype._refreshRequestDataSection):
+
+ * UserInterface/Views/ScopeChainDetailsSidebarPanel.js:
+ (WebInspector.ScopeChainDetailsSidebarPanel):
+ (WebInspector.ScopeChainDetailsSidebarPanel.prototype.refresh.):
+ (WebInspector.ScopeChainDetailsSidebarPanel.prototype.refresh):
+
+ * UserInterface/Views/SidebarPanel.js:
+ Inherit from View.
+ (WebInspector.SidebarPanel):
+ Replace the content element (the portion of the view excluding navigation
+ bars, filter bars, etc.) with a View object. A sidebar's content can be a mixture
+ of unwrapped DOM elements and View objects. For now, the content view's element
+ will be mutated directly, but once the DetailsSection class family inherits from
+ the View class the handling of details sections will be simplified.
+ (WebInspector.SidebarPanel.prototype.get contentView):
+ (WebInspector.SidebarPanel.prototype.shown):
+ (WebInspector.SidebarPanel.prototype.hidden):
+ (WebInspector.SidebarPanel.prototype.get contentElement): Deleted.
+ Replaced by WebInspector.SidebarPanel.prototype.get contentView.
+
+ * UserInterface/Views/StyleDetailsPanel.js:
+ Inherit from View.
+ (WebInspector.StyleDetailsPanel):
+ (WebInspector.StyleDetailsPanel.prototype.get element): Deleted.
+ Defer to View.element getter.
+
+ * UserInterface/Views/TimelineSidebarPanel.js:
+ (WebInspector.TimelineSidebarPanel.prototype._updateTimelineOverviewHeight):
+
+ * UserInterface/Views/VisualStyleDetailsPanel.js:
+ (WebInspector.VisualStyleDetailsPanel):
+ (WebInspector.VisualStyleDetailsPanel.prototype._updateSections):
+
</ins><span class="cx"> 2015-12-14 Joseph Pecoraro <pecoraro@apple.com>
</span><span class="cx">
</span><span class="cx"> Web Inspector: Stack traces in console incorrectly show "(anonymous function)" for global code
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsApplicationCacheDetailsSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheDetailsSidebarPanel.js (194115 => 194116)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheDetailsSidebarPanel.js 2015-12-15 22:10:20 UTC (rev 194115)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheDetailsSidebarPanel.js 2015-12-15 22:33:55 UTC (rev 194116)
</span><span class="lines">@@ -47,8 +47,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.contentElement.appendChild(this._locationSection.element);
- this.contentElement.appendChild(this._statusSection.element);
</del><ins>+ this.contentView.element.appendChild(this._locationSection.element);
+ this.contentView.element.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></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDetailsSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js (194115 => 194116)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js 2015-12-15 22:10:20 UTC (rev 194115)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js 2015-12-15 22:33:55 UTC (rev 194116)
</span><span class="lines">@@ -63,7 +63,7 @@
</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.contentView.element.appendChild(this._forcedPseudoClassContainer);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> this._computedStyleDetailsPanel = new WebInspector.ComputedStyleDetailsPanel(this);
</span><span class="lines">@@ -120,7 +120,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.contentView.element.scrollTop = this._initialScrollOffset;
</ins><span class="cx">
</span><span class="cx"> for (var panel of this._panels) {
</span><span class="cx"> panel.element._savedScrollTop = undefined;
</span><span class="lines">@@ -227,30 +227,30 @@
</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;
- this._selectedPanel.element.remove();
</del><ins>+ this._selectedPanel.element._savedScrollTop = this.contentView.element.scrollTop;
+ this.contentView.removeSubview(this._selectedPanel);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> this._selectedPanel = selectedPanel;
</span><ins>+ if (!this._selectedPanel)
+ return;
</ins><span class="cx">
</span><del>- if (this._selectedPanel) {
- this.contentElement.appendChild(this._selectedPanel.element);
</del><ins>+ this.contentView.addSubview(this._selectedPanel);
</ins><span class="cx">
</span><del>- if (typeof this._selectedPanel.element._savedScrollTop === "number")
- this.contentElement.scrollTop = this._selectedPanel.element._savedScrollTop;
- else
- this.contentElement.scrollTop = this._initialScrollOffset;
</del><ins>+ if (typeof this._selectedPanel.element._savedScrollTop === "number")
+ this.contentView.element.scrollTop = this._selectedPanel.element._savedScrollTop;
+ else
+ this.contentView.element.scrollTop = this._initialScrollOffset;
</ins><span class="cx">
</span><del>- var hasFilter = typeof this._selectedPanel.filterDidChange === "function";
- this.contentElement.classList.toggle("has-filter-bar", hasFilter);
- if (this._filterBar)
- this.contentElement.classList.toggle(WebInspector.CSSStyleDetailsSidebarPanel.FilterInProgressClassName, hasFilter && this._filterBar.hasActiveFilters());
</del><ins>+ let hasFilter = typeof this._selectedPanel.filterDidChange === "function";
+ this.contentView.element.classList.toggle("has-filter-bar", hasFilter);
+ if (this._filterBar)
+ this.contentView.element.classList.toggle(WebInspector.CSSStyleDetailsSidebarPanel.FilterInProgressClassName, hasFilter && this._filterBar.hasActiveFilters());
</ins><span class="cx">
</span><del>- this.contentElement.classList.toggle("supports-new-rule", typeof this._selectedPanel.newRuleButtonClicked === "function");
- this._selectedPanel.shown();
</del><ins>+ this.contentView.element.classList.toggle("supports-new-rule", typeof this._selectedPanel.newRuleButtonClicked === "function");
+ this._selectedPanel.shown();
</ins><span class="cx">
</span><del>- this._lastSelectedSectionSetting.value = selectedPanel.navigationInfo.identifier;
- }
</del><ins>+ this._lastSelectedSectionSetting.value = selectedPanel.navigationInfo.identifier;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> _forcedPseudoClassCheckboxChanged(pseudoClass, event)
</span><span class="lines">@@ -286,7 +286,7 @@
</span><span class="cx">
</span><span class="cx"> _filterDidChange()
</span><span class="cx"> {
</span><del>- this.contentElement.classList.toggle(WebInspector.CSSStyleDetailsSidebarPanel.FilterInProgressClassName, this._filterBar.hasActiveFilters());
</del><ins>+ this.contentView.element.classList.toggle(WebInspector.CSSStyleDetailsSidebarPanel.FilterInProgressClassName, this._filterBar.hasActiveFilters());
</ins><span class="cx">
</span><span class="cx"> this._selectedPanel.filterDidChange(this._filterBar);
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDOMNodeDetailsSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMNodeDetailsSidebarPanel.js (194115 => 194116)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMNodeDetailsSidebarPanel.js 2015-12-15 22:10:20 UTC (rev 194115)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMNodeDetailsSidebarPanel.js 2015-12-15 22:33:55 UTC (rev 194116)
</span><span class="lines">@@ -55,10 +55,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.contentElement.appendChild(identitySection.element);
- this.contentElement.appendChild(attributesSection.element);
- this.contentElement.appendChild(propertiesSection.element);
- this.contentElement.appendChild(eventListenersSection.element);
</del><ins>+ this.contentView.element.appendChild(identitySection.element);
+ this.contentView.element.appendChild(attributesSection.element);
+ this.contentView.element.appendChild(propertiesSection.element);
+ this.contentView.element.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">@@ -89,9 +89,9 @@
</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.contentElement.appendChild(accessibilitySection.element);
</del><ins>+ this.contentView.element.appendChild(accessibilitySection.element);
</ins><span class="cx"> }
</span><del>- }
</del><ins>+ }
</ins><span class="cx">
</span><span class="cx"> // Public
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDebuggerSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js (194115 => 194116)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js 2015-12-15 22:10:20 UTC (rev 194115)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js 2015-12-15 22:33:55 UTC (rev 194116)
</span><span class="lines">@@ -129,7 +129,7 @@
</span><span class="cx">
</span><span class="cx"> var breakpointsGroup = new WebInspector.DetailsSectionGroup([breakpointsRow]);
</span><span class="cx"> var breakpointsSection = new WebInspector.DetailsSection("scripts", WebInspector.UIString("Scripts"), [breakpointsGroup]);
</span><del>- this.contentElement.appendChild(breakpointsSection.element);
</del><ins>+ this.contentView.element.appendChild(breakpointsSection.element);
</ins><span class="cx">
</span><span class="cx"> this._callStackContentTreeOutline = this.createContentTreeOutline(true, true);
</span><span class="cx"> this._callStackContentTreeOutline.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._treeSelectionDidChange, this);
</span><span class="lines">@@ -248,9 +248,9 @@
</span><span class="cx">
</span><span class="cx"> _debuggerDidPause(event)
</span><span class="cx"> {
</span><del>- this.contentElement.insertBefore(this._callStackSection.element, this.contentElement.firstChild);
</del><ins>+ this.contentView.element.insertBefore(this._callStackSection.element, this.contentView.element.firstChild);
</ins><span class="cx"> if (this._updatePauseReason())
</span><del>- this.contentElement.insertBefore(this._pauseReasonSection.element, this.contentElement.firstChild);
</del><ins>+ this.contentView.element.insertBefore(this._pauseReasonSection.element, this.contentView.element.firstChild);
</ins><span class="cx">
</span><span class="cx"> this._debuggerPauseResumeButtonItem.enabled = true;
</span><span class="cx"> this._debuggerPauseResumeButtonItem.toggled = true;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsLayerTreeDetailsSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/LayerTreeDetailsSidebarPanel.js (194115 => 194116)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/LayerTreeDetailsSidebarPanel.js 2015-12-15 22:10:20 UTC (rev 194115)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/LayerTreeDetailsSidebarPanel.js 2015-12-15 22:33:55 UTC (rev 194116)
</span><span class="lines">@@ -117,7 +117,7 @@
</span><span class="cx">
</span><span class="cx"> this._layerInfoSection = new WebInspector.DetailsSection("layer-info", WebInspector.UIString("Layer Info"), [this._noLayerInformationGroup]);
</span><span class="cx">
</span><del>- this.contentElement.appendChild(this._layerInfoSection.element);
</del><ins>+ this.contentView.element.appendChild(this._layerInfoSection.element);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> _buildDataGridSection()
</span><span class="lines">@@ -154,8 +154,7 @@
</span><span class="cx"> var group = new WebInspector.DetailsSectionGroup([this._childLayersRow]);
</span><span class="cx"> var section = new WebInspector.DetailsSection("layer-children", WebInspector.UIString("Child Layers"), [group], null, true);
</span><span class="cx">
</span><del>- var element = this.contentElement.appendChild(section.element);
- element.classList.add(section.identifier);
</del><ins>+ this.contentView.element.appendChild(section.element);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> _buildBottomBar()
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsNavigationSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js (194115 => 194116)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js 2015-12-15 22:10:20 UTC (rev 194115)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js 2015-12-15 22:33:55 UTC (rev 194116)
</span><span class="lines">@@ -33,7 +33,7 @@
</span><span class="cx">
</span><span class="cx"> this._visibleContentTreeOutlines = new Set;
</span><span class="cx">
</span><del>- this.contentElement.addEventListener("scroll", this._updateContentOverflowShadowVisibility.bind(this));
</del><ins>+ this.contentView.element.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">@@ -162,7 +162,7 @@
</span><span class="cx"> contentTreeOutline.hidden = !dontHideByDefault;
</span><span class="cx"> contentTreeOutline.element.classList.add(WebInspector.NavigationSidebarPanel.ContentTreeOutlineElementStyleClassName);
</span><span class="cx">
</span><del>- this.contentElement.appendChild(contentTreeOutline.element);
</del><ins>+ this.contentView.element.appendChild(contentTreeOutline.element);
</ins><span class="cx">
</span><span class="cx"> if (!suppressFiltering) {
</span><span class="cx"> contentTreeOutline.addEventListener(WebInspector.TreeOutline.Event.ElementAdded, this._treeElementAddedOrChanged, this);
</span><span class="lines">@@ -479,8 +479,8 @@
</span><span class="cx"> {
</span><span class="cx"> this._updateContentOverflowShadowVisibilityIdentifier = undefined;
</span><span class="cx">
</span><del>- var scrollHeight = this.contentElement.scrollHeight;
- var offsetHeight = this.contentElement.offsetHeight;
</del><ins>+ let scrollHeight = this.contentView.element.scrollHeight;
+ let offsetHeight = this.contentView.element.offsetHeight;
</ins><span class="cx">
</span><span class="cx"> if (scrollHeight < offsetHeight) {
</span><span class="cx"> if (this._topOverflowShadowElement)
</span><span class="lines">@@ -489,11 +489,11 @@
</span><span class="cx"> return;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- var edgeThreshold = 1;
- var scrollTop = this.contentElement.scrollTop;
</del><ins>+ let edgeThreshold = 1;
+ let scrollTop = this.contentView.element.scrollTop;
</ins><span class="cx">
</span><del>- var topCoverage = Math.min(scrollTop, edgeThreshold);
- var bottomCoverage = Math.max(0, (offsetHeight + scrollTop) - (scrollHeight - edgeThreshold));
</del><ins>+ let topCoverage = Math.min(scrollTop, edgeThreshold);
+ let bottomCoverage = Math.max(0, (offsetHeight + scrollTop) - (scrollHeight - edgeThreshold));
</ins><span class="cx">
</span><span class="cx"> if (this._topOverflowShadowElement)
</span><span class="cx"> this._topOverflowShadowElement.style.opacity = (topCoverage / edgeThreshold).toFixed(1);
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsProbeDetailsSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ProbeDetailsSidebarPanel.js (194115 => 194116)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ProbeDetailsSidebarPanel.js 2015-12-15 22:10:20 UTC (rev 194115)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ProbeDetailsSidebarPanel.js 2015-12-15 22:33:55 UTC (rev 194116)
</span><span class="lines">@@ -50,16 +50,16 @@
</span><span class="cx">
</span><span class="cx"> set inspectedProbeSets(newProbeSets)
</span><span class="cx"> {
</span><del>- for (var probeSet of this._inspectedProbeSets) {
- var removedSection = this._probeSetSections.get(probeSet);
- this.contentElement.removeChild(removedSection.element);
</del><ins>+ for (let probeSet of this._inspectedProbeSets) {
+ let removedSection = this._probeSetSections.get(probeSet);
+ removedSection.element.remove();
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> this._inspectedProbeSets = newProbeSets;
</span><span class="cx">
</span><del>- for (var probeSet of newProbeSets) {
- var shownSection = this._probeSetSections.get(probeSet);
- this.contentElement.appendChild(shownSection.element);
</del><ins>+ for (let probeSet of newProbeSets) {
+ let shownSection = this._probeSetSections.get(probeSet);
+ this.contentView.element.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 (194115 => 194116)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ResourceDetailsSidebarPanel.js 2015-12-15 22:10:20 UTC (rev 194115)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ResourceDetailsSidebarPanel.js 2015-12-15 22:33:55 UTC (rev 194116)
</span><span class="lines">@@ -102,11 +102,11 @@
</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.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);
</del><ins>+ this.contentView.element.appendChild(this._typeSection.element);
+ this.contentView.element.appendChild(this._locationSection.element);
+ this.contentView.element.appendChild(this._requestAndResponseSection.element);
+ this.contentView.element.appendChild(this._requestHeadersSection.element);
+ this.contentView.element.appendChild(this._responseHeadersSection.element);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Public
</span><span class="lines">@@ -225,7 +225,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.contentElement.insertBefore(this._queryParametersSection.element, this._requestAndResponseSection.element.nextSibling);
</del><ins>+ this.contentView.element.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">@@ -382,12 +382,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.contentElement.removeChild(imageSectionElement);
</del><ins>+ this.contentView.element.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.contentElement.insertBefore(this._imageSizeSection.element, this._locationSection.element);
</del><ins>+ this.contentView.element.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">@@ -416,7 +416,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.contentElement.insertBefore(this._requestDataSection.element, this._requestHeadersSection.element);
</del><ins>+ this.contentView.element.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></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsScopeChainDetailsSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ScopeChainDetailsSidebarPanel.js (194115 => 194116)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ScopeChainDetailsSidebarPanel.js 2015-12-15 22:10:20 UTC (rev 194115)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ScopeChainDetailsSidebarPanel.js 2015-12-15 22:33:55 UTC (rev 194116)
</span><span class="lines">@@ -54,7 +54,7 @@
</span><span class="cx">
</span><span class="cx"> this._watchExpressionsSectionGroup = new WebInspector.DetailsSectionGroup;
</span><span class="cx"> this._watchExpressionsSection = new WebInspector.DetailsSection("watch-expressions", WebInspector.UIString("Watch Expressions"), [this._watchExpressionsSectionGroup], this._watchExpressionOptionsElement);
</span><del>- this.contentElement.appendChild(this._watchExpressionsSection.element);
</del><ins>+ this.contentView.element.appendChild(this._watchExpressionsSection.element);
</ins><span class="cx">
</span><span class="cx"> this._updateWatchExpressionsNavigationBar();
</span><span class="cx">
</span><span class="lines">@@ -125,8 +125,8 @@
</span><span class="cx"> emptyRow.showEmptyMessage();
</span><span class="cx"> }
</span><span class="cx">
</span><del>- this.contentElement.removeChildren();
- this.contentElement.appendChild(this._watchExpressionsSection.element);
</del><ins>+ this.contentView.element.removeChildren();
+ this.contentView.element.appendChild(this._watchExpressionsSection.element);
</ins><span class="cx">
</span><span class="cx"> // Bail if the call frame changed while we were waiting for the async response.
</span><span class="cx"> if (this._callFrame !== callFrame)
</span><span class="lines">@@ -136,7 +136,7 @@
</span><span class="cx"> return;
</span><span class="cx">
</span><span class="cx"> for (let callFrameSection of callFrameSections)
</span><del>- this.contentElement.appendChild(callFrameSection.element);
</del><ins>+ this.contentView.element.appendChild(callFrameSection.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></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SidebarPanel.js (194115 => 194116)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/SidebarPanel.js 2015-12-15 22:10:20 UTC (rev 194115)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SidebarPanel.js 2015-12-15 22:33:55 UTC (rev 194116)
</span><span class="lines">@@ -40,9 +40,9 @@
</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><del>- this._contentElement = document.createElement("div");
- this._contentElement.className = "content";
- this.element.appendChild(this._contentElement);
</del><ins>+ this._contentView = new WebInspector.View;
+ this._contentView.element.classList.add("content");
+ this.addSubview(this._contentView);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Public
</span><span class="lines">@@ -52,9 +52,9 @@
</span><span class="cx"> return this._identifier;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- get contentElement()
</del><ins>+ get contentView()
</ins><span class="cx"> {
</span><del>- return this._contentElement;
</del><ins>+ return this._contentView;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> get visible()
</span><span class="lines">@@ -128,14 +128,14 @@
</span><span class="cx">
</span><span class="cx"> shown()
</span><span class="cx"> {
</span><del>- this._contentElement.scrollTop = this._savedScrollPosition;
</del><ins>+ this._contentView.element.scrollTop = this._savedScrollPosition;
</ins><span class="cx">
</span><span class="cx"> // Implemented by subclasses.
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> hidden()
</span><span class="cx"> {
</span><del>- this._savedScrollPosition = this._contentElement.scrollTop;
</del><ins>+ this._savedScrollPosition = this._contentView.element.scrollTop;
</ins><span class="cx">
</span><span class="cx"> // Implemented by subclasses.
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsStyleDetailsPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/StyleDetailsPanel.js (194115 => 194116)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/StyleDetailsPanel.js 2015-12-15 22:10:20 UTC (rev 194115)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/StyleDetailsPanel.js 2015-12-15 22:33:55 UTC (rev 194116)
</span><span class="lines">@@ -23,7 +23,7 @@
</span><span class="cx"> * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx"> */
</span><span class="cx">
</span><del>-WebInspector.StyleDetailsPanel = class StyleDetailsPanel extends WebInspector.Object
</del><ins>+WebInspector.StyleDetailsPanel = class StyleDetailsPanel extends WebInspector.View
</ins><span class="cx"> {
</span><span class="cx"> constructor(delegate, className, identifier, label)
</span><span class="cx"> {
</span><span class="lines">@@ -31,11 +31,8 @@
</span><span class="cx">
</span><span class="cx"> this._delegate = delegate || null;
</span><span class="cx">
</span><del>- this._element = document.createElement("div");
- this._element.className = className;
-
</del><span class="cx"> // Add this offset-sections class name so the sticky headers don't overlap the navigation bar.
</span><del>- this.element.classList.add("offset-sections");
</del><ins>+ this.element.classList.add(className, "offset-sections");
</ins><span class="cx">
</span><span class="cx"> this._navigationInfo = {identifier, label};
</span><span class="cx">
</span><span class="lines">@@ -45,11 +42,6 @@
</span><span class="cx">
</span><span class="cx"> // Public
</span><span class="cx">
</span><del>- get element()
- {
- return this._element;
- }
-
</del><span class="cx"> get navigationInfo()
</span><span class="cx"> {
</span><span class="cx"> return this._navigationInfo;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js (194115 => 194116)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js 2015-12-15 22:10:20 UTC (rev 194115)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js 2015-12-15 22:33:55 UTC (rev 194116)
</span><span class="lines">@@ -873,7 +873,7 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> this._timelineEventsTitleBarContainer.style.top = (overviewHeight + eventTitleBarOffset) + "px";
</span><del>- this.contentElement.style.top = (overviewHeight + contentElementOffset) + "px";
</del><ins>+ this.contentView.element.style.top = (overviewHeight + contentElementOffset) + "px";
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> _recordGlyphMousedOver(event)
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleDetailsPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js (194115 => 194116)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js 2015-12-15 22:10:20 UTC (rev 194115)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js 2015-12-15 22:33:55 UTC (rev 194116)
</span><span class="lines">@@ -60,7 +60,7 @@
</span><span class="cx"> this._selectorSection = new WebInspector.VisualStyleSelectorSection(this);
</span><span class="cx"> this._selectorSection.addEventListener(WebInspector.VisualStyleSelectorSection.Event.SelectorChanged, this._updateSections, this);
</span><span class="cx"> this._selectorSection.addEventListener(WebInspector.VisualStyleSelectorSection.Event.StyleTextChanged, this._prepareForChange, this);
</span><del>- this._element.appendChild(this._selectorSection.element);
</del><ins>+ this.element.appendChild(this._selectorSection.element);
</ins><span class="cx">
</span><span class="cx"> // Layout Section
</span><span class="cx"> this._generateSection("display", WebInspector.UIString("Display"));
</span><span class="lines">@@ -73,7 +73,7 @@
</span><span class="cx"> this._generateSection("alignment", WebInspector.UIString("Alignment"));
</span><span class="cx">
</span><span class="cx"> this._sections.layout = new WebInspector.DetailsSection("layout", WebInspector.UIString("Layout"), [this._groups.display.section, this._groups.position.section, this._groups.float.section, this._groups.dimensions.section, this._groups.margin.section, this._groups.padding.section, this._groups.flexbox.section, this._groups.alignment.section]);
</span><del>- this._element.appendChild(this._sections.layout.element);
</del><ins>+ this.element.appendChild(this._sections.layout.element);
</ins><span class="cx">
</span><span class="cx"> // Text Section
</span><span class="cx"> this._generateSection("text-style", WebInspector.UIString("Style"));
</span><span class="lines">@@ -82,7 +82,7 @@
</span><span class="cx"> this._generateSection("text-shadow", WebInspector.UIString("Shadow"));
</span><span class="cx">
</span><span class="cx"> this._sections.text = new WebInspector.DetailsSection("text", WebInspector.UIString("Text"), [this._groups.textStyle.section, this._groups.font.section, this._groups.textSpacing.section, this._groups.textShadow.section]);
</span><del>- this._element.appendChild(this._sections.text.element);
</del><ins>+ this.element.appendChild(this._sections.text.element);
</ins><span class="cx">
</span><span class="cx"> // Background Section
</span><span class="cx"> this._generateSection("background-style", WebInspector.UIString("Style"));
</span><span class="lines">@@ -91,13 +91,13 @@
</span><span class="cx"> this._generateSection("box-shadow", WebInspector.UIString("Shadow"));
</span><span class="cx">
</span><span class="cx"> this._sections.background = new WebInspector.DetailsSection("background", WebInspector.UIString("Background"), [this._groups.backgroundStyle.section, this._groups.border.section, this._groups.outline.section, this._groups.boxShadow.section]);
</span><del>- this._element.appendChild(this._sections.background.element);
</del><ins>+ this.element.appendChild(this._sections.background.element);
</ins><span class="cx">
</span><span class="cx"> // Animation Section
</span><span class="cx"> this._generateSection("transition", WebInspector.UIString("Transition"));
</span><span class="cx">
</span><span class="cx"> this._sections.animation = new WebInspector.DetailsSection("animation", WebInspector.UIString("Animation"), [this._groups.transition.section]);
</span><del>- this._element.appendChild(this._sections.animation.element);
</del><ins>+ this.element.appendChild(this._sections.animation.element);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Public
</span><span class="lines">@@ -155,7 +155,7 @@
</span><span class="cx"> return;
</span><span class="cx">
</span><span class="cx"> let disabled = this._currentStyle[WebInspector.VisualStyleDetailsPanel.StyleDisabledSymbol];
</span><del>- this._element.classList.toggle("disabled", !!disabled);
</del><ins>+ this.element.classList.toggle("disabled", !!disabled);
</ins><span class="cx"> if (disabled)
</span><span class="cx"> return;
</span><span class="cx">
</span></span></pre>
</div>
</div>
</body>
</html>