<!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>[193316] branches/safari-601-branch/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/193316">193316</a></dd>
<dt>Author</dt> <dd>timothy@apple.com</dd>
<dt>Date</dt> <dd>2015-12-03 11:09:58 -0800 (Thu, 03 Dec 2015)</dd>
</dl>
<h3>Log Message</h3>
<pre>Merge <a href="http://trac.webkit.org/projects/webkit/changeset/192327">r192327</a>. rdar://problem/23221163</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#branchessafari601branchSourceWebInspectorUIChangeLog">branches/safari-601-branch/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceBaseMainjs">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Base/Main.js</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceViewsDebuggerSidebarPaneljs">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceViewsNetworkSidebarPaneljs">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/NetworkSidebarPanel.js</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceViewsResourceSidebarPaneljs">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/ResourceSidebarPanel.js</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceViewsSidebarjs">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/Sidebar.js</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceViewsSidebarPaneljs">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/SidebarPanel.js</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceViewsStorageSidebarPaneljs">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/StorageSidebarPanel.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="branchessafari601branchSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebInspectorUI/ChangeLog (193315 => 193316)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/ChangeLog 2015-12-03 19:09:50 UTC (rev 193315)
+++ branches/safari-601-branch/Source/WebInspectorUI/ChangeLog 2015-12-03 19:09:58 UTC (rev 193316)
</span><span class="lines">@@ -1,5 +1,73 @@
</span><span class="cx"> 2015-12-03 Timothy Hatcher <timothy@apple.com>
</span><span class="cx">
</span><ins>+ Merge r192327. rdar://problem/23221163
+
+ 2015-11-11 Matt Baker <mattbaker@apple.com>
+
+ Web Inspector: Convert sidebars to use View base class
+ https://bugs.webkit.org/show_bug.cgi?id=151057
+
+ Reviewed by Timothy Hatcher.
+
+ This patch makes Sidebar a subclass of View. Mostly mechanical changes and cleanup,
+ such as adding navigation bars and panels as subviews, removing element getters,
+ and replacing external properties with symbols.
+
+ * UserInterface/Base/Main.js:
+ Added sidebars to view hierarchy.
+
+ * UserInterface/Views/DebuggerSidebarPanel.js:
+ Add navigation bar as a subview.
+
+ * UserInterface/Views/NetworkSidebarPanel.js:
+ Add navigation bar as a subview.
+ (WebInspector.NetworkSidebarPanel):
+ (WebInspector.NetworkSidebarPanel.prototype.matchTreeElementAgainstCustomFilters.match):
+ (WebInspector.NetworkSidebarPanel.prototype.matchTreeElementAgainstCustomFilters):
+ (WebInspector.NetworkSidebarPanel.prototype.treeElementAddedOrChanged):
+ (WebInspector.NetworkSidebarPanel.prototype._treeElementGoToArrowWasClicked):
+ External properties replaced with symbols.
+
+ * UserInterface/Views/ResourceSidebarPanel.js:
+ Add navigation bar as a subview.
+ (WebInspector.ResourceSidebarPanel):
+ (WebInspector.ResourceSidebarPanel.prototype.matchTreeElementAgainstCustomFilters.match):
+ (WebInspector.ResourceSidebarPanel.prototype.matchTreeElementAgainstCustomFilters):
+ External properties replaced with symbols.
+
+ * UserInterface/Views/Sidebar.js:
+ (WebInspector.Sidebar):
+ (WebInspector.Sidebar.prototype.addSidebarPanel):
+ (WebInspector.Sidebar.prototype.removeSidebarPanel):
+ Panels are now added and removed as subviews.
+ (WebInspector.Sidebar.prototype.get width):
+ (WebInspector.Sidebar.prototype.set width):
+ (WebInspector.Sidebar.prototype.get collapsed):
+ (WebInspector.Sidebar.prototype.set collapsed):
+ "collapsed" property now backed by private class variable, not DOM state.
+ (WebInspector.Sidebar.prototype.get element): Deleted.
+
+ * UserInterface/Views/SidebarPanel.js:
+ (WebInspector.SidebarPanel):
+ (WebInspector.SidebarPanel.prototype.get visible):
+ (WebInspector.SidebarPanel.prototype.get selected):
+ (WebInspector.SidebarPanel.prototype.set selected):
+ "selected" property now backed by private class variable, not DOM state.
+ (WebInspector.SidebarPanel.prototype.get parentSidebar):
+ No longer stored as separate property. Wrapper around View.prototype.parentView.
+ Original getter retained for clarity.
+ (WebInspector.SidebarPanel.prototype.show):
+ (WebInspector.SidebarPanel.prototype.hide):
+ (WebInspector.SidebarPanel.prototype.added):
+ (WebInspector.SidebarPanel.prototype.removed):
+ (WebInspector.SidebarPanel.prototype.get element): Deleted.
+
+ * UserInterface/Views/StorageSidebarPanel.js:
+ (WebInspector.StorageSidebarPanel):
+ Add navigation bar as a subview.
+
+2015-12-03 Timothy Hatcher <timothy@apple.com>
+
</ins><span class="cx"> Merge r192283. rdar://problem/23221163
</span><span class="cx">
</span><span class="cx"> 2015-11-10 Matt Baker <mattbaker@apple.com>
</span></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceBaseMainjs"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Base/Main.js (193315 => 193316)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Base/Main.js 2015-12-03 19:09:50 UTC (rev 193315)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Base/Main.js 2015-12-03 19:09:58 UTC (rev 193316)
</span><span class="lines">@@ -1376,12 +1376,12 @@
</span><span class="cx"> var rootView = new WebInspector.View(document.body);
</span><span class="cx"> rootView.addSubview(this.toolbar);
</span><span class="cx"> rootView.addSubview(this.tabBar);
</span><ins>+ rootView.addSubview(this.navigationSidebar);
</ins><span class="cx"> rootView.addSubview(this.tabBrowser);
</span><span class="cx"> rootView.addSubview(this.splitContentBrowser);
</span><span class="cx"> rootView.addSubview(this.quickConsole);
</span><ins>+ rootView.addSubview(this.detailsSidebar);
</ins><span class="cx">
</span><del>- // FIXME: add navigation and details sidebars to the tree once <https://webkit.org/b/151057> is fixed.
-
</del><span class="cx"> rootView.makeRootView();
</span><span class="cx"> };
</span><span class="cx">
</span></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceViewsDebuggerSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js (193315 => 193316)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js 2015-12-03 19:09:50 UTC (rev 193315)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js 2015-12-03 19:09:58 UTC (rev 193316)
</span><span class="lines">@@ -46,7 +46,7 @@
</span><span class="cx"> WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.WaitingToPause, this._debuggerWaitingToPause, this);
</span><span class="cx">
</span><span class="cx"> this._navigationBar = new WebInspector.NavigationBar;
</span><del>- this.element.appendChild(this._navigationBar.element);
</del><ins>+ this.addSubview(this._navigationBar);
</ins><span class="cx">
</span><span class="cx"> var breakpointsImage = {src: "Images/Breakpoints.svg", width: 15, height: 15};
</span><span class="cx"> var pauseImage = {src: "Images/Pause.svg", width: 15, height: 15};
</span></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceViewsNetworkSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/NetworkSidebarPanel.js (193315 => 193316)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/NetworkSidebarPanel.js 2015-12-03 19:09:50 UTC (rev 193315)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/NetworkSidebarPanel.js 2015-12-03 19:09:58 UTC (rev 193316)
</span><span class="lines">@@ -34,7 +34,7 @@
</span><span class="cx"> this.filterBar.placeholder = WebInspector.UIString("Filter Resource List");
</span><span class="cx">
</span><span class="cx"> this._navigationBar = new WebInspector.NavigationBar;
</span><del>- this.element.appendChild(this._navigationBar.element);
</del><ins>+ this.addSubview(this._navigationBar);
</ins><span class="cx">
</span><span class="cx"> this._resourcesTitleBarElement = document.createElement("div");
</span><span class="cx"> this._resourcesTitleBarElement.textContent = WebInspector.UIString("Name");
</span><span class="lines">@@ -49,7 +49,7 @@
</span><span class="cx"> for (var key in WebInspector.Resource.Type) {
</span><span class="cx"> var value = WebInspector.Resource.Type[key];
</span><span class="cx"> var scopeBarItem = new WebInspector.ScopeBarItem(scopeItemPrefix + value, WebInspector.Resource.displayNameForType(value, true));
</span><del>- scopeBarItem.__resourceType = value;
</del><ins>+ scopeBarItem[WebInspector.NetworkSidebarPanel.ResourceTypeSymbol] = value;
</ins><span class="cx"> scopeBarItems.push(scopeBarItem);
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -136,13 +136,13 @@
</span><span class="cx"> function match()
</span><span class="cx"> {
</span><span class="cx"> if (treeElement instanceof WebInspector.FrameTreeElement)
</span><del>- return selectedScopeBarItem.__resourceType === WebInspector.Resource.Type.Document;
</del><ins>+ return selectedScopeBarItem[WebInspector.NetworkSidebarPanel.ResourceTypeSymbol] === WebInspector.Resource.Type.Document;
</ins><span class="cx">
</span><span class="cx"> console.assert(treeElement instanceof WebInspector.ResourceTreeElement, "Unknown treeElement", treeElement);
</span><span class="cx"> if (!(treeElement instanceof WebInspector.ResourceTreeElement))
</span><span class="cx"> return false;
</span><span class="cx">
</span><del>- return treeElement.resource.type === selectedScopeBarItem.__resourceType;
</del><ins>+ return treeElement.resource.type === selectedScopeBarItem[WebInspector.NetworkSidebarPanel.ResourceTypeSymbol];
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> var matched = match();
</span><span class="lines">@@ -164,7 +164,7 @@
</span><span class="cx"> fragment.appendChild(closeButton.element);
</span><span class="cx">
</span><span class="cx"> var goToButton = new WebInspector.TreeElementStatusButton(WebInspector.createGoToArrowButton());
</span><del>- goToButton.__treeElement = treeElement;
</del><ins>+ goToButton[WebInspector.NetworkSidebarPanel.TreeElementSymbol] = treeElement;
</ins><span class="cx"> goToButton.addEventListener(WebInspector.TreeElementStatusButton.Event.Clicked, this._treeElementGoToArrowWasClicked, this);
</span><span class="cx"> fragment.appendChild(goToButton.element);
</span><span class="cx">
</span><span class="lines">@@ -189,7 +189,7 @@
</span><span class="cx"> {
</span><span class="cx"> this._clickedTreeElementGoToArrow = true;
</span><span class="cx">
</span><del>- var treeElement = event.target.__treeElement;
</del><ins>+ var treeElement = event.target[WebInspector.NetworkSidebarPanel.TreeElementSymbol];
</ins><span class="cx"> console.assert(treeElement instanceof WebInspector.TreeElement);
</span><span class="cx">
</span><span class="cx"> treeElement.select(true, true);
</span><span class="lines">@@ -214,4 +214,7 @@
</span><span class="cx"> }
</span><span class="cx"> };
</span><span class="cx">
</span><ins>+WebInspector.NetworkSidebarPanel.ResourceTypeSymbol = Symbol("resource-type");
+WebInspector.NetworkSidebarPanel.TreeElementSymbol = Symbol("tree-element");
+
</ins><span class="cx"> WebInspector.NetworkSidebarPanel.ShowingNetworkGridContentViewCookieKey = "network-sidebar-panel-showing-network-grid-content-view";
</span></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceViewsResourceSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/ResourceSidebarPanel.js (193315 => 193316)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/ResourceSidebarPanel.js 2015-12-03 19:09:50 UTC (rev 193315)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/ResourceSidebarPanel.js 2015-12-03 19:09:58 UTC (rev 193316)
</span><span class="lines">@@ -34,7 +34,7 @@
</span><span class="cx"> this.filterBar.placeholder = WebInspector.UIString("Filter Resource List");
</span><span class="cx">
</span><span class="cx"> this._navigationBar = new WebInspector.NavigationBar;
</span><del>- this.element.appendChild(this._navigationBar.element);
</del><ins>+ this.addSubview(this._navigationBar);
</ins><span class="cx">
</span><span class="cx"> var scopeItemPrefix = "resource-sidebar-";
</span><span class="cx"> var scopeBarItems = [];
</span><span class="lines">@@ -44,7 +44,7 @@
</span><span class="cx"> for (var key in WebInspector.Resource.Type) {
</span><span class="cx"> var value = WebInspector.Resource.Type[key];
</span><span class="cx"> var scopeBarItem = new WebInspector.ScopeBarItem(scopeItemPrefix + value, WebInspector.Resource.displayNameForType(value, true));
</span><del>- scopeBarItem.__resourceType = value;
</del><ins>+ scopeBarItem[WebInspector.ResourceSidebarPanel.ResourceTypeSymbol] = value;
</ins><span class="cx"> scopeBarItems.push(scopeBarItem);
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -197,16 +197,16 @@
</span><span class="cx"> function match()
</span><span class="cx"> {
</span><span class="cx"> if (treeElement instanceof WebInspector.FrameTreeElement)
</span><del>- return selectedScopeBarItem.__resourceType === WebInspector.Resource.Type.Document;
</del><ins>+ return selectedScopeBarItem[WebInspector.ResourceSidebarPanel.ResourceTypeSymbol] === WebInspector.Resource.Type.Document;
</ins><span class="cx">
</span><span class="cx"> if (treeElement instanceof WebInspector.ScriptTreeElement)
</span><del>- return selectedScopeBarItem.__resourceType === WebInspector.Resource.Type.Script;
</del><ins>+ return selectedScopeBarItem[WebInspector.ResourceSidebarPanel.ResourceTypeSymbol] === WebInspector.Resource.Type.Script;
</ins><span class="cx">
</span><span class="cx"> console.assert(treeElement instanceof WebInspector.ResourceTreeElement, "Unknown treeElement", treeElement);
</span><span class="cx"> if (!(treeElement instanceof WebInspector.ResourceTreeElement))
</span><span class="cx"> return false;
</span><span class="cx">
</span><del>- return treeElement.resource.type === selectedScopeBarItem.__resourceType;
</del><ins>+ return treeElement.resource.type === selectedScopeBarItem[WebInspector.ResourceSidebarPanel.ResourceTypeSymbol];
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> var matched = match();
</span><span class="lines">@@ -373,3 +373,5 @@
</span><span class="cx"> this.updateFilter();
</span><span class="cx"> }
</span><span class="cx"> };
</span><ins>+
+WebInspector.ResourceSidebarPanel.ResourceTypeSymbol = Symbol("resource-type");
</ins></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceViewsSidebarjs"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/Sidebar.js (193315 => 193316)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/Sidebar.js 2015-12-03 19:09:50 UTC (rev 193315)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/Sidebar.js 2015-12-03 19:09:58 UTC (rev 193316)
</span><span class="lines">@@ -23,38 +23,38 @@
</span><span class="cx"> * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx"> */
</span><span class="cx">
</span><del>-WebInspector.Sidebar = class Sidebar extends WebInspector.Object
</del><ins>+WebInspector.Sidebar = class Sidebar extends WebInspector.View
</ins><span class="cx"> {
</span><span class="cx"> constructor(element, side, sidebarPanels, role, label, hasNavigationBar)
</span><span class="cx"> {
</span><del>- super();
</del><ins>+ super(element);
</ins><span class="cx">
</span><span class="cx"> console.assert(!side || side === WebInspector.Sidebar.Sides.Left || side === WebInspector.Sidebar.Sides.Right);
</span><span class="cx"> this._side = side || WebInspector.Sidebar.Sides.Left;
</span><ins>+ this._collapsed = true;
</ins><span class="cx">
</span><del>- this._element = element || document.createElement("div");
- this._element.classList.add("sidebar", this._side, WebInspector.Sidebar.CollapsedStyleClassName);
</del><ins>+ this.element.classList.add("sidebar", this._side, WebInspector.Sidebar.CollapsedStyleClassName);
</ins><span class="cx">
</span><del>- this._element.setAttribute("role", role || "group");
</del><ins>+ this.element.setAttribute("role", role || "group");
</ins><span class="cx"> if (label)
</span><del>- this._element.setAttribute("aria-label", label);
</del><ins>+ this.element.setAttribute("aria-label", label);
</ins><span class="cx">
</span><span class="cx"> if (hasNavigationBar) {
</span><del>- this._element.classList.add("has-navigation-bar");
</del><ins>+ this.element.classList.add("has-navigation-bar");
</ins><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.addSubview(this._navigationBar);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> this._resizer = new WebInspector.Resizer(WebInspector.Resizer.RuleOrientation.Vertical, this);
</span><del>- this._element.insertBefore(this._resizer.element, this._element.firstChild);
</del><ins>+ this.element.insertBefore(this._resizer.element, this.element.firstChild);
</ins><span class="cx">
</span><span class="cx"> this._sidebarPanels = [];
</span><span class="cx">
</span><span class="cx"> if (sidebarPanels) {
</span><del>- for (var i = 0; i < sidebarPanels.length; ++i)
- this.addSidebarPanel(sidebarPanels[i]);
</del><ins>+ for (var sidebarPanel of sidebarPanels)
+ this.addSidebarPanel(sidebarPanel);
</ins><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -70,10 +70,8 @@
</span><span class="cx"> if (sidebarPanel.parentSidebar)
</span><span class="cx"> return null;
</span><span class="cx">
</span><del>- sidebarPanel._parentSidebar = this;
-
</del><span class="cx"> this._sidebarPanels.push(sidebarPanel);
</span><del>- this._element.appendChild(sidebarPanel.element);
</del><ins>+ this.addSubview(sidebarPanel);
</ins><span class="cx">
</span><span class="cx"> if (this._navigationBar) {
</span><span class="cx"> console.assert(sidebarPanel.navigationItem);
</span><span class="lines">@@ -98,15 +96,13 @@
</span><span class="cx"> sidebarPanel.visibilityDidChange();
</span><span class="cx"> }
</span><span class="cx">
</span><del>- sidebarPanel._parentSidebar = null;
-
</del><span class="cx"> if (this._selectedSidebarPanel === sidebarPanel) {
</span><span class="cx"> var index = this._sidebarPanels.indexOf(sidebarPanel);
</span><span class="cx"> this.selectedSidebarPanel = this._sidebarPanels[index - 1] || this._sidebarPanels[index + 1] || null;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> this._sidebarPanels.remove(sidebarPanel);
</span><del>- this._element.removeChild(sidebarPanel.element);
</del><ins>+ this.removeSubview(sidebarPanel);
</ins><span class="cx">
</span><span class="cx"> if (this._navigationBar) {
</span><span class="cx"> console.assert(sidebarPanel.navigationItem);
</span><span class="lines">@@ -173,7 +169,7 @@
</span><span class="cx">
</span><span class="cx"> get width()
</span><span class="cx"> {
</span><del>- return this._element.offsetWidth;
</del><ins>+ return this.element.offsetWidth;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> set width(newWidth)
</span><span class="lines">@@ -183,7 +179,7 @@
</span><span class="cx">
</span><span class="cx"> newWidth = Math.max(this.minimumWidth, Math.min(newWidth, this.maximumWidth));
</span><span class="cx">
</span><del>- this._element.style.width = newWidth + "px";
</del><ins>+ this.element.style.width = newWidth + "px";
</ins><span class="cx">
</span><span class="cx"> if (!this.collapsed && this._navigationBar)
</span><span class="cx"> this._navigationBar.updateLayout();
</span><span class="lines">@@ -196,19 +192,18 @@
</span><span class="cx">
</span><span class="cx"> get collapsed()
</span><span class="cx"> {
</span><del>- return this._element.classList.contains(WebInspector.Sidebar.CollapsedStyleClassName);
</del><ins>+ return this._collapsed;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> set collapsed(flag)
</span><span class="cx"> {
</span><del>- if (flag === this.collapsed)
</del><ins>+ if (flag === this._collapsed)
</ins><span class="cx"> return;
</span><span class="cx">
</span><del>- if (flag)
- this._element.classList.add(WebInspector.Sidebar.CollapsedStyleClassName);
- else {
- this._element.classList.remove(WebInspector.Sidebar.CollapsedStyleClassName);
</del><ins>+ this._collapsed = flag || false;
+ this.element.classList.toggle(WebInspector.Sidebar.CollapsedStyleClassName);
</ins><span class="cx">
</span><ins>+ if (!this._collapsed) {
</ins><span class="cx"> if (this._navigationBar)
</span><span class="cx"> this._navigationBar.updateLayout();
</span><span class="cx"> }
</span><span class="lines">@@ -233,11 +228,6 @@
</span><span class="cx"> return this._sidebarPanels;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- get element()
- {
- return this._element;
- }
-
</del><span class="cx"> get side()
</span><span class="cx"> {
</span><span class="cx"> return this._side;
</span></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceViewsSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/SidebarPanel.js (193315 => 193316)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/SidebarPanel.js 2015-12-03 19:09:50 UTC (rev 193315)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/SidebarPanel.js 2015-12-03 19:09:58 UTC (rev 193316)
</span><span class="lines">@@ -23,26 +23,26 @@
</span><span class="cx"> * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx"> */
</span><span class="cx">
</span><del>-WebInspector.SidebarPanel = class SidebarPanel extends WebInspector.Object
</del><ins>+WebInspector.SidebarPanel = class SidebarPanel extends WebInspector.View
</ins><span class="cx"> {
</span><span class="cx"> constructor(identifier, displayName, element, role, label)
</span><span class="cx"> {
</span><del>- super();
</del><ins>+ super(element);
</ins><span class="cx">
</span><span class="cx"> this._identifier = identifier;
</span><span class="cx"> this._displayName = displayName;
</span><ins>+ this._selected = false;
</ins><span class="cx">
</span><span class="cx"> this._savedScrollPosition = 0;
</span><span class="cx">
</span><del>- this._element = element || document.createElement("div");
- this._element.classList.add("panel", identifier);
</del><ins>+ this.element.classList.add("panel", identifier);
</ins><span class="cx">
</span><del>- this._element.setAttribute("role", role || "group");
- this._element.setAttribute("aria-label", label || displayName);
</del><ins>+ this.element.setAttribute("role", role || "group");
+ this.element.setAttribute("aria-label", label || displayName);
</ins><span class="cx">
</span><span class="cx"> this._contentElement = document.createElement("div");
</span><span class="cx"> this._contentElement.className = "content";
</span><del>- this._element.appendChild(this._contentElement);
</del><ins>+ this.element.appendChild(this._contentElement);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Public
</span><span class="lines">@@ -52,11 +52,6 @@
</span><span class="cx"> return this._identifier;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- get element()
- {
- return this._element;
- }
-
</del><span class="cx"> get contentElement()
</span><span class="cx"> {
</span><span class="cx"> return this._contentElement;
</span><span class="lines">@@ -64,43 +59,44 @@
</span><span class="cx">
</span><span class="cx"> get visible()
</span><span class="cx"> {
</span><del>- return this.selected && this._parentSidebar && !this._parentSidebar.collapsed;
</del><ins>+ return this.selected && this.parentSidebar && !this.parentSidebar.collapsed;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> get selected()
</span><span class="cx"> {
</span><del>- return this._element.classList.contains(WebInspector.SidebarPanel.SelectedStyleClassName);
</del><ins>+ return this._selected;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> set selected(flag)
</span><span class="cx"> {
</span><del>- if (flag)
- this._element.classList.add(WebInspector.SidebarPanel.SelectedStyleClassName);
- else
- this._element.classList.remove(WebInspector.SidebarPanel.SelectedStyleClassName);
</del><ins>+ if (flag === this._selected)
+ return;
+
+ this._selected = flag || false;
+ this.element.classList.toggle("selected", this._selected);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> get parentSidebar()
</span><span class="cx"> {
</span><del>- return this._parentSidebar;
</del><ins>+ return this.parentView;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> show()
</span><span class="cx"> {
</span><del>- if (!this._parentSidebar)
</del><ins>+ if (!this.parentSidebar)
</ins><span class="cx"> return;
</span><span class="cx">
</span><del>- this._parentSidebar.collapsed = false;
- this._parentSidebar.selectedSidebarPanel = this;
</del><ins>+ this.parentSidebar.collapsed = false;
+ this.parentSidebar.selectedSidebarPanel = this;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> hide()
</span><span class="cx"> {
</span><del>- if (!this._parentSidebar)
</del><ins>+ if (!this.parentSidebar)
</ins><span class="cx"> return;
</span><span class="cx">
</span><del>- this._parentSidebar.collapsed = true;
- this._parentSidebar.selectedSidebarPanel = null;
</del><ins>+ this.parentSidebar.collapsed = true;
+ this.parentSidebar.selectedSidebarPanel = null;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> toggle()
</span><span class="lines">@@ -113,14 +109,14 @@
</span><span class="cx">
</span><span class="cx"> added()
</span><span class="cx"> {
</span><del>- console.assert(this._parentSidebar);
</del><ins>+ console.assert(this.parentSidebar);
</ins><span class="cx">
</span><span class="cx"> // Implemented by subclasses.
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> removed()
</span><span class="cx"> {
</span><del>- console.assert(!this._parentSidebar);
</del><ins>+ console.assert(!this.parentSidebar);
</ins><span class="cx">
</span><span class="cx"> // Implemented by subclasses.
</span><span class="cx"> }
</span><span class="lines">@@ -154,5 +150,3 @@
</span><span class="cx"> // Implemented by subclasses.
</span><span class="cx"> }
</span><span class="cx"> };
</span><del>-
-WebInspector.SidebarPanel.SelectedStyleClassName = "selected";
</del></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceViewsStorageSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/StorageSidebarPanel.js (193315 => 193316)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/StorageSidebarPanel.js 2015-12-03 19:09:50 UTC (rev 193315)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/StorageSidebarPanel.js 2015-12-03 19:09:58 UTC (rev 193316)
</span><span class="lines">@@ -34,7 +34,7 @@
</span><span class="cx"> this.filterBar.placeholder = WebInspector.UIString("Filter Storage List");
</span><span class="cx">
</span><span class="cx"> this._navigationBar = new WebInspector.NavigationBar;
</span><del>- this.element.appendChild(this._navigationBar.element);
</del><ins>+ this.addSubview(this._navigationBar);
</ins><span class="cx">
</span><span class="cx"> var scopeItemPrefix = "storage-sidebar-";
</span><span class="cx"> var scopeBarItems = [];
</span></span></pre>
</div>
</div>
</body>
</html>