<!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>[191976] 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/191976">191976</a></dd>
<dt>Author</dt> <dd>mattbaker@apple.com</dd>
<dt>Date</dt> <dd>2015-11-03 13:56:35 -0800 (Tue, 03 Nov 2015)</dd>
</dl>
<h3>Log Message</h3>
<pre>Web Inspector: Create View base class, refactor some core view classes
https://bugs.webkit.org/show_bug.cgi?id=149186
Reviewed by Brian Burg and Timothy Hatcher.
This patch introduces a new View base class, which encapsulates DOM element creation,
layout scheduling, and subview management. The View class constructor accepts an optional
element parameter, allowing an existing DOM element to be associated with the View object,
rather than dynamically creating a new element. View also adds a `__view` property to its
associated DOM element to facilitate debugging the Inspector UI.
For the view classes refactored in this patch, the changes are largely mechanical. Dynamically
created DOM elements and redundant element getters have been removed. needsLayout has replaced
updateLayoutIfNeeded where appropriate. updateLayout has been removed entirely for views that
performed no layout other than to cascade layouts to their children.
* UserInterface/Base/Main.js:
Moved TabBar layout updates out of TabBrowser and into Main.js.
* UserInterface/Main.html:
* UserInterface/Views/ConsolePrompt.js:
(WebInspector.ConsolePrompt):
(WebInspector.ConsolePrompt.prototype.layout):
(WebInspector.ConsolePrompt.prototype.get element): Deleted.
(WebInspector.ConsolePrompt.prototype.updateLayout): Deleted.
* UserInterface/Views/ContentBrowser.js:
(WebInspector.ContentBrowser):
(WebInspector.ContentBrowser.prototype.get element): Deleted.
(WebInspector.ContentBrowser.prototype.updateLayout): Deleted.
* UserInterface/Views/ContentBrowserTabContentView.js:
(WebInspector.ContentBrowserTabContentView):
(WebInspector.ContentBrowserTabContentView.prototype.updateLayout): Deleted.
* UserInterface/Views/ContentView.js:
(WebInspector.ContentView):
(WebInspector.ContentView.prototype.get element): Deleted.
(WebInspector.ContentView.prototype.updateLayout): Deleted.
* UserInterface/Views/ContentViewContainer.js:
(WebInspector.ContentViewContainer):
(WebInspector.ContentViewContainer.prototype._showEntry):
(WebInspector.ContentViewContainer.prototype._hideEntry):
(WebInspector.ContentViewContainer.prototype.get element): Deleted.
(WebInspector.ContentViewContainer.prototype.updateLayout): Deleted.
(WebInspector.ContentViewContainer.prototype._addContentViewElement): Deleted.
(WebInspector.ContentViewContainer.prototype._removeContentViewElement): Deleted.
* UserInterface/Views/DataGrid.js:
(WebInspector.DataGrid.prototype.autoSizeColumns):
(WebInspector.DataGrid.prototype.layout):
(WebInspector.DataGrid.prototype.applyColumnWidthsMap):
(WebInspector.DataGrid): Deleted.
(WebInspector.DataGrid.prototype.updateLayout): Deleted.
(WebInspector.DataGrid.prototype.resizerDragging): Deleted.
(WebInspector.DataGrid.prototype.resizerDragEnded): Deleted.
* UserInterface/Views/HierarchicalPathNavigationItem.js:
(WebInspector.HierarchicalPathNavigationItem.prototype.set components):
* UserInterface/Views/LayoutTimelineView.js:
(WebInspector.LayoutTimelineView):
(WebInspector.LayoutTimelineView.prototype.layout):
(WebInspector.LayoutTimelineView.prototype.updateLayout): Deleted.
* UserInterface/Views/NavigationBar.js:
(WebInspector.NavigationBar):
(WebInspector.NavigationBar.prototype.insertNavigationItem):
(WebInspector.NavigationBar.prototype.removeNavigationItem):
(WebInspector.NavigationBar.prototype.get minimumWidth):
(WebInspector.NavigationBar.prototype.layout):
(WebInspector.NavigationBar.prototype._mouseDown):
(WebInspector.NavigationBar.prototype._mouseMoved):
(WebInspector.NavigationBar.prototype._mouseUp):
(WebInspector.NavigationBar.prototype._calculateMinimumWidth):
(WebInspector.NavigationBar.prototype.updateLayoutSoon.update): Deleted.
(WebInspector.NavigationBar.prototype.updateLayoutSoon): Deleted.
(WebInspector.NavigationBar.prototype.updateLayout): Deleted.
(WebInspector.NavigationBar.prototype.get element): Deleted.
* UserInterface/Views/NavigationItem.js:
(WebInspector.NavigationItem.prototype.set hidden):
* UserInterface/Views/NetworkTimelineView.js:
(WebInspector.NetworkTimelineView):
(WebInspector.NetworkTimelineView.prototype.layout):
(WebInspector.NetworkTimelineView.prototype.updateLayout): Deleted.
* UserInterface/Views/OverviewTimelineView.js:
(WebInspector.OverviewTimelineView):
(WebInspector.OverviewTimelineView.prototype.layout):
(WebInspector.OverviewTimelineView.prototype.updateLayout): Deleted.
* UserInterface/Views/QuickConsole.js:
(WebInspector.QuickConsole):
(WebInspector.QuickConsole.prototype.layout):
(WebInspector.QuickConsole.prototype.get element): Deleted.
(WebInspector.QuickConsole.prototype.updateLayout): Deleted.
* UserInterface/Views/RenderingFrameTimelineView.js:
(WebInspector.RenderingFrameTimelineView):
(WebInspector.RenderingFrameTimelineView.prototype.layout):
(WebInspector.RenderingFrameTimelineView.prototype.updateLayout): Deleted.
* UserInterface/Views/ScriptTimelineView.js:
(WebInspector.ScriptTimelineView):
(WebInspector.ScriptTimelineView.prototype.layout):
(WebInspector.ScriptTimelineView.prototype.updateLayout): Deleted.
* UserInterface/Views/TabBar.js:
(WebInspector.TabBar):
(WebInspector.TabBar.prototype.insertTabBarItem.animateTabs):
(WebInspector.TabBar.prototype.insertTabBarItem.removeStyles):
(WebInspector.TabBar.prototype.insertTabBarItem):
(WebInspector.TabBar.prototype.removeTabBarItem.animateTabs):
(WebInspector.TabBar.prototype.removeTabBarItem.removeStyles):
(WebInspector.TabBar.prototype.removeTabBarItem):
(WebInspector.TabBar.prototype.hasNormalTab):
(WebInspector.TabBar.prototype.layout):
(WebInspector.TabBar.prototype._recordTabBarItemSizesAndPositions):
(WebInspector.TabBar.prototype._finishExpandingTabsAfterClose.):
(WebInspector.TabBar.prototype._finishExpandingTabsAfterClose):
(WebInspector.TabBar.prototype._handleClick):
(WebInspector.TabBar.prototype._handleMouseMoved):
(WebInspector.TabBar.prototype._handleMouseUp):
(WebInspector.TabBar.prototype._handleMouseLeave):
(WebInspector.TabBar.prototype._handleNewTabMouseEnter):
(WebInspector.TabBar.prototype.updateLayoutSoon.update): Deleted.
(WebInspector.TabBar.prototype.updateLayoutSoon): Deleted.
(WebInspector.TabBar.prototype.updateLayout): Deleted.
(WebInspector.TabBar.prototype.get element): Deleted.
* UserInterface/Views/TabBrowser.js:
(WebInspector.TabBrowser):
(WebInspector.TabBrowser.prototype.get element): Deleted.
(WebInspector.TabBrowser.prototype.updateLayout): Deleted.
* UserInterface/Views/TimelineView.js:
(WebInspector.TimelineView.prototype.filterUpdated):
(WebInspector.TimelineView.prototype.needsLayout):
(WebInspector.TimelineView.prototype.updateLayout): Deleted.
(WebInspector.TimelineView.prototype.updateLayoutIfNeeded): Deleted.
(WebInspector.TimelineView): Deleted.
* UserInterface/Views/Toolbar.js:
(WebInspector.Toolbar):
(WebInspector.Toolbar.prototype.set displayMode):
(WebInspector.Toolbar.prototype.set sizeMode):
(WebInspector.Toolbar.prototype.addToolbarItem):
(WebInspector.Toolbar.prototype.layout):
(WebInspector.Toolbar.prototype.customUpdateLayout): Deleted.
Renamed to layout. This eliminated a layering violation in NavigationBar,
where the function previously known as updateLayout checked for a
a `customUpdateLayout` function property, and would call it instead of its
own layout logic if found.
* UserInterface/Views/View.js: Added.
(WebInspector.View):
(WebInspector.View.prototype.get element):
(WebInspector.View.prototype.get subviews):
(WebInspector.View.prototype.addSubview):
Appends a view to the end of the subview list.
(WebInspector.View.prototype.insertSubviewBefore):
Inserts a view into subview list before another subview.
(WebInspector.View.prototype.removeSubview):
(WebInspector.View.prototype.replaceSubview):
(WebInspector.View.prototype.updateLayout):
No longer overridden by subclasses.
(WebInspector.View.prototype.updateLayoutIfNeeded):
Forces a layout if one has been scheduled, otherwise does nothing.
(WebInspector.View.prototype.needsLayout):
Schedules a layout for the view.
(WebInspector.View.prototype.layout):
Overridden by views that require special layout logic. Layouts
cascade to child views automatically.
(WebInspector.View.prototype._layoutSubtree):
Main layout entry point. Called by requestAnimationFrame via needsLayut, by
updateLayout when forcing a synchronous layout, and called recursively during
subview traversal.</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="#trunkSourceWebInspectorUIUserInterfaceViewsConsolePromptjs">trunk/Source/WebInspectorUI/UserInterface/Views/ConsolePrompt.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsContentBrowserjs">trunk/Source/WebInspectorUI/UserInterface/Views/ContentBrowser.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsContentBrowserTabContentViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/ContentBrowserTabContentView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsContentViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/ContentView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsContentViewContainerjs">trunk/Source/WebInspectorUI/UserInterface/Views/ContentViewContainer.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDataGridjs">trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsHierarchicalPathNavigationItemjs">trunk/Source/WebInspectorUI/UserInterface/Views/HierarchicalPathNavigationItem.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsLayoutTimelineViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsNavigationBarjs">trunk/Source/WebInspectorUI/UserInterface/Views/NavigationBar.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsNavigationItemjs">trunk/Source/WebInspectorUI/UserInterface/Views/NavigationItem.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsNetworkTimelineViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsOverviewTimelineViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/OverviewTimelineView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsQuickConsolejs">trunk/Source/WebInspectorUI/UserInterface/Views/QuickConsole.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsRenderingFrameTimelineViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsScriptTimelineViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTabBarjs">trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTabBrowserjs">trunk/Source/WebInspectorUI/UserInterface/Views/TabBrowser.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsToolbarjs">trunk/Source/WebInspectorUI/UserInterface/Views/Toolbar.js</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/View.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (191975 => 191976)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2015-11-03 21:52:42 UTC (rev 191975)
+++ trunk/Source/WebInspectorUI/ChangeLog 2015-11-03 21:56:35 UTC (rev 191976)
</span><span class="lines">@@ -1,3 +1,169 @@
</span><ins>+2015-11-03 Matt Baker <mattbaker@apple.com>
+
+ Web Inspector: Create View base class, refactor some core view classes
+ https://bugs.webkit.org/show_bug.cgi?id=149186
+
+ Reviewed by Brian Burg and Timothy Hatcher.
+
+ This patch introduces a new View base class, which encapsulates DOM element creation,
+ layout scheduling, and subview management. The View class constructor accepts an optional
+ element parameter, allowing an existing DOM element to be associated with the View object,
+ rather than dynamically creating a new element. View also adds a `__view` property to its
+ associated DOM element to facilitate debugging the Inspector UI.
+
+ For the view classes refactored in this patch, the changes are largely mechanical. Dynamically
+ created DOM elements and redundant element getters have been removed. needsLayout has replaced
+ updateLayoutIfNeeded where appropriate. updateLayout has been removed entirely for views that
+ performed no layout other than to cascade layouts to their children.
+
+ * UserInterface/Base/Main.js:
+ Moved TabBar layout updates out of TabBrowser and into Main.js.
+
+ * UserInterface/Main.html:
+ * UserInterface/Views/ConsolePrompt.js:
+ (WebInspector.ConsolePrompt):
+ (WebInspector.ConsolePrompt.prototype.layout):
+ (WebInspector.ConsolePrompt.prototype.get element): Deleted.
+ (WebInspector.ConsolePrompt.prototype.updateLayout): Deleted.
+ * UserInterface/Views/ContentBrowser.js:
+ (WebInspector.ContentBrowser):
+ (WebInspector.ContentBrowser.prototype.get element): Deleted.
+ (WebInspector.ContentBrowser.prototype.updateLayout): Deleted.
+ * UserInterface/Views/ContentBrowserTabContentView.js:
+ (WebInspector.ContentBrowserTabContentView):
+ (WebInspector.ContentBrowserTabContentView.prototype.updateLayout): Deleted.
+ * UserInterface/Views/ContentView.js:
+ (WebInspector.ContentView):
+ (WebInspector.ContentView.prototype.get element): Deleted.
+ (WebInspector.ContentView.prototype.updateLayout): Deleted.
+ * UserInterface/Views/ContentViewContainer.js:
+ (WebInspector.ContentViewContainer):
+ (WebInspector.ContentViewContainer.prototype._showEntry):
+ (WebInspector.ContentViewContainer.prototype._hideEntry):
+ (WebInspector.ContentViewContainer.prototype.get element): Deleted.
+ (WebInspector.ContentViewContainer.prototype.updateLayout): Deleted.
+ (WebInspector.ContentViewContainer.prototype._addContentViewElement): Deleted.
+ (WebInspector.ContentViewContainer.prototype._removeContentViewElement): Deleted.
+ * UserInterface/Views/DataGrid.js:
+ (WebInspector.DataGrid.prototype.autoSizeColumns):
+ (WebInspector.DataGrid.prototype.layout):
+ (WebInspector.DataGrid.prototype.applyColumnWidthsMap):
+ (WebInspector.DataGrid): Deleted.
+ (WebInspector.DataGrid.prototype.updateLayout): Deleted.
+ (WebInspector.DataGrid.prototype.resizerDragging): Deleted.
+ (WebInspector.DataGrid.prototype.resizerDragEnded): Deleted.
+ * UserInterface/Views/HierarchicalPathNavigationItem.js:
+ (WebInspector.HierarchicalPathNavigationItem.prototype.set components):
+ * UserInterface/Views/LayoutTimelineView.js:
+ (WebInspector.LayoutTimelineView):
+ (WebInspector.LayoutTimelineView.prototype.layout):
+ (WebInspector.LayoutTimelineView.prototype.updateLayout): Deleted.
+ * UserInterface/Views/NavigationBar.js:
+ (WebInspector.NavigationBar):
+ (WebInspector.NavigationBar.prototype.insertNavigationItem):
+ (WebInspector.NavigationBar.prototype.removeNavigationItem):
+ (WebInspector.NavigationBar.prototype.get minimumWidth):
+ (WebInspector.NavigationBar.prototype.layout):
+ (WebInspector.NavigationBar.prototype._mouseDown):
+ (WebInspector.NavigationBar.prototype._mouseMoved):
+ (WebInspector.NavigationBar.prototype._mouseUp):
+ (WebInspector.NavigationBar.prototype._calculateMinimumWidth):
+ (WebInspector.NavigationBar.prototype.updateLayoutSoon.update): Deleted.
+ (WebInspector.NavigationBar.prototype.updateLayoutSoon): Deleted.
+ (WebInspector.NavigationBar.prototype.updateLayout): Deleted.
+ (WebInspector.NavigationBar.prototype.get element): Deleted.
+ * UserInterface/Views/NavigationItem.js:
+ (WebInspector.NavigationItem.prototype.set hidden):
+ * UserInterface/Views/NetworkTimelineView.js:
+ (WebInspector.NetworkTimelineView):
+ (WebInspector.NetworkTimelineView.prototype.layout):
+ (WebInspector.NetworkTimelineView.prototype.updateLayout): Deleted.
+ * UserInterface/Views/OverviewTimelineView.js:
+ (WebInspector.OverviewTimelineView):
+ (WebInspector.OverviewTimelineView.prototype.layout):
+ (WebInspector.OverviewTimelineView.prototype.updateLayout): Deleted.
+ * UserInterface/Views/QuickConsole.js:
+ (WebInspector.QuickConsole):
+ (WebInspector.QuickConsole.prototype.layout):
+ (WebInspector.QuickConsole.prototype.get element): Deleted.
+ (WebInspector.QuickConsole.prototype.updateLayout): Deleted.
+ * UserInterface/Views/RenderingFrameTimelineView.js:
+ (WebInspector.RenderingFrameTimelineView):
+ (WebInspector.RenderingFrameTimelineView.prototype.layout):
+ (WebInspector.RenderingFrameTimelineView.prototype.updateLayout): Deleted.
+ * UserInterface/Views/ScriptTimelineView.js:
+ (WebInspector.ScriptTimelineView):
+ (WebInspector.ScriptTimelineView.prototype.layout):
+ (WebInspector.ScriptTimelineView.prototype.updateLayout): Deleted.
+ * UserInterface/Views/TabBar.js:
+ (WebInspector.TabBar):
+ (WebInspector.TabBar.prototype.insertTabBarItem.animateTabs):
+ (WebInspector.TabBar.prototype.insertTabBarItem.removeStyles):
+ (WebInspector.TabBar.prototype.insertTabBarItem):
+ (WebInspector.TabBar.prototype.removeTabBarItem.animateTabs):
+ (WebInspector.TabBar.prototype.removeTabBarItem.removeStyles):
+ (WebInspector.TabBar.prototype.removeTabBarItem):
+ (WebInspector.TabBar.prototype.hasNormalTab):
+ (WebInspector.TabBar.prototype.layout):
+ (WebInspector.TabBar.prototype._recordTabBarItemSizesAndPositions):
+ (WebInspector.TabBar.prototype._finishExpandingTabsAfterClose.):
+ (WebInspector.TabBar.prototype._finishExpandingTabsAfterClose):
+ (WebInspector.TabBar.prototype._handleClick):
+ (WebInspector.TabBar.prototype._handleMouseMoved):
+ (WebInspector.TabBar.prototype._handleMouseUp):
+ (WebInspector.TabBar.prototype._handleMouseLeave):
+ (WebInspector.TabBar.prototype._handleNewTabMouseEnter):
+ (WebInspector.TabBar.prototype.updateLayoutSoon.update): Deleted.
+ (WebInspector.TabBar.prototype.updateLayoutSoon): Deleted.
+ (WebInspector.TabBar.prototype.updateLayout): Deleted.
+ (WebInspector.TabBar.prototype.get element): Deleted.
+ * UserInterface/Views/TabBrowser.js:
+ (WebInspector.TabBrowser):
+ (WebInspector.TabBrowser.prototype.get element): Deleted.
+ (WebInspector.TabBrowser.prototype.updateLayout): Deleted.
+ * UserInterface/Views/TimelineView.js:
+ (WebInspector.TimelineView.prototype.filterUpdated):
+ (WebInspector.TimelineView.prototype.needsLayout):
+ (WebInspector.TimelineView.prototype.updateLayout): Deleted.
+ (WebInspector.TimelineView.prototype.updateLayoutIfNeeded): Deleted.
+ (WebInspector.TimelineView): Deleted.
+
+ * UserInterface/Views/Toolbar.js:
+ (WebInspector.Toolbar):
+ (WebInspector.Toolbar.prototype.set displayMode):
+ (WebInspector.Toolbar.prototype.set sizeMode):
+ (WebInspector.Toolbar.prototype.addToolbarItem):
+ (WebInspector.Toolbar.prototype.layout):
+ (WebInspector.Toolbar.prototype.customUpdateLayout): Deleted.
+ Renamed to layout. This eliminated a layering violation in NavigationBar,
+ where the function previously known as updateLayout checked for a
+ a `customUpdateLayout` function property, and would call it instead of its
+ own layout logic if found.
+
+ * UserInterface/Views/View.js: Added.
+ (WebInspector.View):
+ (WebInspector.View.prototype.get element):
+ (WebInspector.View.prototype.get subviews):
+ (WebInspector.View.prototype.addSubview):
+ Appends a view to the end of the subview list.
+ (WebInspector.View.prototype.insertSubviewBefore):
+ Inserts a view into subview list before another subview.
+ (WebInspector.View.prototype.removeSubview):
+ (WebInspector.View.prototype.replaceSubview):
+ (WebInspector.View.prototype.updateLayout):
+ No longer overridden by subclasses.
+ (WebInspector.View.prototype.updateLayoutIfNeeded):
+ Forces a layout if one has been scheduled, otherwise does nothing.
+ (WebInspector.View.prototype.needsLayout):
+ Schedules a layout for the view.
+ (WebInspector.View.prototype.layout):
+ Overridden by views that require special layout logic. Layouts
+ cascade to child views automatically.
+ (WebInspector.View.prototype._layoutSubtree):
+ Main layout entry point. Called by requestAnimationFrame via needsLayut, by
+ updateLayout when forcing a synchronous layout, and called recursively during
+ subview traversal.
+
</ins><span class="cx"> 2015-11-03 Joseph Pecoraro <pecoraro@apple.com>
</span><span class="cx">
</span><span class="cx"> Web Inspector: Handle or Remove ParseHTML Timeline Event Records
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceBaseMainjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Base/Main.js (191975 => 191976)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Base/Main.js 2015-11-03 21:52:42 UTC (rev 191975)
+++ trunk/Source/WebInspectorUI/UserInterface/Base/Main.js 2015-11-03 21:56:35 UTC (rev 191976)
</span><span class="lines">@@ -1282,6 +1282,7 @@
</span><span class="cx"> WebInspector._windowResized = function(event)
</span><span class="cx"> {
</span><span class="cx"> this.toolbar.updateLayout();
</span><ins>+ this.tabBar.updateLayout();
</ins><span class="cx"> this._tabBrowserSizeDidChange();
</span><span class="cx"> };
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceMainhtml"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (191975 => 191976)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Main.html 2015-11-03 21:52:42 UTC (rev 191975)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html 2015-11-03 21:56:35 UTC (rev 191976)
</span><span class="lines">@@ -336,6 +336,8 @@
</span><span class="cx"> <script src="Models/TypeSet.js"></script>
</span><span class="cx"> <script src="Models/WrappedPromise.js"></script>
</span><span class="cx">
</span><ins>+ <script src="Views/View.js"></script>
+
</ins><span class="cx"> <script src="Views/ConsoleCommandView.js"></script>
</span><span class="cx"> <script src="Views/ConsoleMessageView.js"></script>
</span><span class="cx"> <script src="Views/ContentView.js"></script>
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsConsolePromptjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ConsolePrompt.js (191975 => 191976)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ConsolePrompt.js 2015-11-03 21:52:42 UTC (rev 191975)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ConsolePrompt.js 2015-11-03 21:56:35 UTC (rev 191976)
</span><span class="lines">@@ -23,16 +23,15 @@
</span><span class="cx"> * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx"> */
</span><span class="cx">
</span><del>-WebInspector.ConsolePrompt = class ConsolePrompt extends WebInspector.Object
</del><ins>+WebInspector.ConsolePrompt = class ConsolePrompt extends WebInspector.View
</ins><span class="cx"> {
</span><span class="cx"> constructor(delegate, mimeType, element)
</span><span class="cx"> {
</span><del>- super();
</del><ins>+ super(element);
</ins><span class="cx">
</span><span class="cx"> mimeType = parseMIMEType(mimeType).type;
</span><span class="cx">
</span><del>- this._element = element || document.createElement("div");
- this._element.classList.add("console-prompt", WebInspector.SyntaxHighlightedStyleClassName);
</del><ins>+ this.element.classList.add("console-prompt", WebInspector.SyntaxHighlightedStyleClassName);
</ins><span class="cx">
</span><span class="cx"> this._delegate = delegate || null;
</span><span class="cx">
</span><span class="lines">@@ -66,11 +65,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 delegate()
</span><span class="cx"> {
</span><span class="cx"> return this._delegate;
</span><span class="lines">@@ -126,11 +120,6 @@
</span><span class="cx"> this._codeMirror.refresh();
</span><span class="cx"> }
</span><span class="cx">
</span><del>- updateLayout()
- {
- this._codeMirror.refresh();
- }
-
</del><span class="cx"> updateCompletions(completions, implicitSuffix)
</span><span class="cx"> {
</span><span class="cx"> this._completionController.updateCompletions(completions, implicitSuffix);
</span><span class="lines">@@ -158,6 +147,11 @@
</span><span class="cx"> return !!this.text;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ layout()
+ {
+ this._codeMirror.refresh();
+ }
+
</ins><span class="cx"> // Private
</span><span class="cx">
</span><span class="cx"> _handleTabKey(codeMirror)
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsContentBrowserjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ContentBrowser.js (191975 => 191976)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ContentBrowser.js 2015-11-03 21:52:42 UTC (rev 191975)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ContentBrowser.js 2015-11-03 21:56:35 UTC (rev 191976)
</span><span class="lines">@@ -23,29 +23,28 @@
</span><span class="cx"> * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx"> */
</span><span class="cx">
</span><del>-WebInspector.ContentBrowser = class ContentBrowser extends WebInspector.Object
</del><ins>+WebInspector.ContentBrowser = class ContentBrowser extends WebInspector.View
</ins><span class="cx"> {
</span><span class="cx"> constructor(element, delegate, disableBackForward)
</span><span class="cx"> {
</span><del>- super();
</del><ins>+ super(element);
</ins><span class="cx">
</span><del>- this._element = element || document.createElement("div");
- this._element.classList.add("content-browser");
</del><ins>+ this.element.classList.add("content-browser");
</ins><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._contentViewContainer = new WebInspector.ContentViewContainer;
</span><span class="cx"> this._contentViewContainer.addEventListener(WebInspector.ContentViewContainer.Event.CurrentContentViewDidChange, this._currentContentViewDidChange, this);
</span><del>- this._element.appendChild(this._contentViewContainer.element);
</del><ins>+ this.addSubview(this._contentViewContainer);
</ins><span class="cx">
</span><span class="cx"> this._findBanner = new WebInspector.FindBanner(this);
</span><span class="cx"> this._findBanner.addEventListener(WebInspector.FindBanner.Event.DidShow, this._findBannerDidShow, this);
</span><span class="cx"> this._findBanner.addEventListener(WebInspector.FindBanner.Event.DidHide, this._findBannerDidHide, this);
</span><span class="cx">
</span><span class="cx"> if (!disableBackForward) {
</span><del>- this._backKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl | WebInspector.KeyboardShortcut.Modifier.Control, WebInspector.KeyboardShortcut.Key.Left, this._backButtonClicked.bind(this), this._element);
- this._forwardKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl | WebInspector.KeyboardShortcut.Modifier.Control, WebInspector.KeyboardShortcut.Key.Right, this._forwardButtonClicked.bind(this), this._element);
</del><ins>+ this._backKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl | WebInspector.KeyboardShortcut.Modifier.Control, WebInspector.KeyboardShortcut.Key.Left, this._backButtonClicked.bind(this), this.element);
+ this._forwardKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl | WebInspector.KeyboardShortcut.Modifier.Control, WebInspector.KeyboardShortcut.Key.Right, this._forwardButtonClicked.bind(this), this.element);
</ins><span class="cx">
</span><span class="cx"> this._backButtonNavigationItem = new WebInspector.ButtonNavigationItem("back", WebInspector.UIString("Back (%s)").format(this._backKeyboardShortcut.displayName), "Images/BackForwardArrows.svg#back-arrow-mask", 8, 13);
</span><span class="cx"> this._backButtonNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._backButtonClicked, this);
</span><span class="lines">@@ -81,11 +80,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 navigationBar()
</span><span class="cx"> {
</span><span class="cx"> return this._navigationBar;
</span><span class="lines">@@ -133,12 +127,6 @@
</span><span class="cx"> return representedObjects;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- updateLayout()
- {
- this._navigationBar.updateLayout();
- this._contentViewContainer.updateLayout();
- }
-
</del><span class="cx"> showContentViewForRepresentedObject(representedObject, cookie, extraArguments)
</span><span class="cx"> {
</span><span class="cx"> var contentView = this.contentViewForRepresentedObject(representedObject, false, extraArguments);
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsContentBrowserTabContentViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ContentBrowserTabContentView.js (191975 => 191976)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ContentBrowserTabContentView.js 2015-11-03 21:52:42 UTC (rev 191975)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ContentBrowserTabContentView.js 2015-11-03 21:56:35 UTC (rev 191976)
</span><span class="lines">@@ -42,7 +42,6 @@
</span><span class="cx">
</span><span class="cx"> this._lastSelectedDetailsSidebarPanelSetting = new WebInspector.Setting(identifier + "-last-selected-details-sidebar-panel", null);
</span><span class="cx">
</span><del>- this._contentBrowser = this._contentBrowser;
</del><span class="cx"> this._contentBrowser.addEventListener(WebInspector.ContentBrowser.Event.CurrentRepresentedObjectsDidChange, this.showDetailsSidebarPanels, this);
</span><span class="cx"> this._contentBrowser.addEventListener(WebInspector.ContentBrowser.Event.CurrentContentViewDidChange, this._contentBrowserCurrentContentViewDidChange, this);
</span><span class="cx">
</span><span class="lines">@@ -82,7 +81,7 @@
</span><span class="cx"> WebInspector.detailsSidebar.addEventListener(WebInspector.Sidebar.Event.SidebarPanelSelected, this._detailsSidebarPanelSelected, this);
</span><span class="cx"> }
</span><span class="cx">
</span><del>- this.element.appendChild(this._contentBrowser.element);
</del><ins>+ this.addSubview(this._contentBrowser);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Public
</span><span class="lines">@@ -122,13 +121,6 @@
</span><span class="cx"> this._contentBrowser.contentViewContainer.closeAllContentViews();
</span><span class="cx"> }
</span><span class="cx">
</span><del>- updateLayout()
- {
- super.updateLayout();
-
- this._contentBrowser.updateLayout();
- }
-
</del><span class="cx"> get managesDetailsSidebarPanels()
</span><span class="cx"> {
</span><span class="cx"> return true;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsContentViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ContentView.js (191975 => 191976)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ContentView.js 2015-11-03 21:52:42 UTC (rev 191975)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ContentView.js 2015-11-03 21:56:35 UTC (rev 191976)
</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.ContentView = class ContentView extends WebInspector.Object
</del><ins>+WebInspector.ContentView = class ContentView extends WebInspector.View
</ins><span class="cx"> {
</span><span class="cx"> constructor(representedObject, extraArguments)
</span><span class="cx"> {
</span><span class="lines">@@ -34,8 +34,7 @@
</span><span class="cx">
</span><span class="cx"> this._representedObject = representedObject;
</span><span class="cx">
</span><del>- this._element = document.createElement("div");
- this._element.classList.add("content-view");
</del><ins>+ this.element.classList.add("content-view");
</ins><span class="cx">
</span><span class="cx"> this._parentContainer = null;
</span><span class="cx"> }
</span><span class="lines">@@ -195,11 +194,6 @@
</span><span class="cx"> return [];
</span><span class="cx"> }
</span><span class="cx">
</span><del>- get element()
- {
- return this._element;
- }
-
</del><span class="cx"> get parentContainer()
</span><span class="cx"> {
</span><span class="cx"> return this._parentContainer;
</span><span class="lines">@@ -245,11 +239,6 @@
</span><span class="cx"> return true;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- updateLayout()
- {
- // Implemented by subclasses.
- }
-
</del><span class="cx"> shown()
</span><span class="cx"> {
</span><span class="cx"> // Implemented by subclasses.
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsContentViewContainerjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ContentViewContainer.js (191975 => 191976)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ContentViewContainer.js 2015-11-03 21:52:42 UTC (rev 191975)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ContentViewContainer.js 2015-11-03 21:56:35 UTC (rev 191976)
</span><span class="lines">@@ -23,14 +23,13 @@
</span><span class="cx"> * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx"> */
</span><span class="cx">
</span><del>-WebInspector.ContentViewContainer = class ContentViewContainer extends WebInspector.Object
</del><ins>+WebInspector.ContentViewContainer = class ContentViewContainer extends WebInspector.View
</ins><span class="cx"> {
</span><del>- constructor(element)
</del><ins>+ constructor()
</ins><span class="cx"> {
</span><span class="cx"> super();
</span><span class="cx">
</span><del>- this._element = element || document.createElement("div");
- this._element.classList.add("content-view-container");
</del><ins>+ this.element.classList.add("content-view-container");
</ins><span class="cx">
</span><span class="cx"> this._backForwardList = [];
</span><span class="cx"> this._currentIndex = -1;
</span><span class="lines">@@ -38,11 +37,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 currentIndex()
</span><span class="cx"> {
</span><span class="cx"> return this._currentIndex;
</span><span class="lines">@@ -67,13 +61,6 @@
</span><span class="cx"> return this._backForwardList[this._currentIndex];
</span><span class="cx"> }
</span><span class="cx">
</span><del>- updateLayout()
- {
- var currentContentView = this.currentContentView;
- if (currentContentView)
- currentContentView.updateLayout();
- }
-
</del><span class="cx"> contentViewForRepresentedObject(representedObject, onlyExisting, extraArguments)
</span><span class="cx"> {
</span><span class="cx"> console.assert(representedObject);
</span><span class="lines">@@ -428,18 +415,6 @@
</span><span class="cx">
</span><span class="cx"> // Private
</span><span class="cx">
</span><del>- _addContentViewElement(contentView)
- {
- if (contentView.element.parentNode !== this._element)
- this._element.appendChild(contentView.element);
- }
-
- _removeContentViewElement(contentView)
- {
- if (contentView.element.parentNode)
- contentView.element.parentNode.removeChild(contentView.element);
- }
-
</del><span class="cx"> _disassociateFromContentView(contentView)
</span><span class="cx"> {
</span><span class="cx"> console.assert(!contentView.visible);
</span><span class="lines">@@ -460,7 +435,9 @@
</span><span class="cx"> {
</span><span class="cx"> console.assert(entry instanceof WebInspector.BackForwardEntry);
</span><span class="cx">
</span><del>- this._addContentViewElement(entry.contentView);
</del><ins>+ if (!this.subviews.includes(entry.contentView))
+ this.addSubview(entry.contentView)
+
</ins><span class="cx"> entry.prepareToShow(shouldCallShown);
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -469,7 +446,8 @@
</span><span class="cx"> console.assert(entry instanceof WebInspector.BackForwardEntry);
</span><span class="cx">
</span><span class="cx"> entry.prepareToHide();
</span><del>- this._removeContentViewElement(entry.contentView);
</del><ins>+ if (this.subviews.includes(entry.contentView))
+ this.removeSubview(entry.contentView)
</ins><span class="cx"> }
</span><span class="cx"> };
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDataGridjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.js (191975 => 191976)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.js 2015-11-03 21:52:42 UTC (rev 191975)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.js 2015-11-03 21:56:35 UTC (rev 191976)
</span><span class="lines">@@ -23,7 +23,7 @@
</span><span class="cx"> * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx"> */
</span><span class="cx">
</span><del>-WebInspector.DataGrid = class DataGrid extends WebInspector.Object
</del><ins>+WebInspector.DataGrid = class DataGrid extends WebInspector.View
</ins><span class="cx"> {
</span><span class="cx"> constructor(columnsData, editCallback, deleteCallback, preferredColumnOrder)
</span><span class="cx"> {
</span><span class="lines">@@ -48,7 +48,6 @@
</span><span class="cx"> this.resizers = [];
</span><span class="cx"> this._columnWidthsInitialized = false;
</span><span class="cx">
</span><del>- this.element = document.createElement("div");
</del><span class="cx"> this.element.className = "data-grid";
</span><span class="cx"> this.element.tabIndex = 0;
</span><span class="cx"> this.element.addEventListener("keydown", this._keyDown.bind(this), false);
</span><span class="lines">@@ -400,7 +399,7 @@
</span><span class="cx"> for (var [identifier, column] of this.columns)
</span><span class="cx"> column["element"].style.width = widths[identifier] + "%";
</span><span class="cx"> this._columnWidthsInitialized = false;
</span><del>- this.updateLayout();
</del><ins>+ this.needsLayout();
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> insertColumn(columnIdentifier, columnData, insertionIndex)
</span><span class="lines">@@ -552,9 +551,9 @@
</span><span class="cx"> //
</span><span class="cx"> // If this function is not called after the DataGrid is attached to its
</span><span class="cx"> // parent element, then the DataGrid's columns will not be resizable.
</span><del>- updateLayout()
</del><ins>+ layout()
</ins><span class="cx"> {
</span><del>- // Do not attempt to use offsetes if we're not attached to the document tree yet.
</del><ins>+ // Do not attempt to use offsets if we're not attached to the document tree yet.
</ins><span class="cx"> if (!this._columnWidthsInitialized && this.element.offsetWidth) {
</span><span class="cx"> // Give all the columns initial widths now so that during a resize,
</span><span class="cx"> // when the two columns that get resized get a percent value for
</span><span class="lines">@@ -580,7 +579,6 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> this._positionResizerElements();
</span><del>- this.dispatchEventToListeners(WebInspector.DataGrid.Event.DidLayout);
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> columnWidthsMap()
</span><span class="lines">@@ -602,7 +600,7 @@
</span><span class="cx"> this._dataTableColumnGroupElement.children[ordinal].style.width = width;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- this.updateLayout();
</del><ins>+ this.needsLayout();
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> _isColumnVisible(columnIdentifier)
</span><span class="lines">@@ -1260,7 +1258,6 @@
</span><span class="cx">
</span><span class="cx"> this._positionResizerElements();
</span><span class="cx"> event.preventDefault();
</span><del>- this.dispatchEventToListeners(WebInspector.DataGrid.Event.DidLayout);
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> resizerDragEnded(resizer)
</span><span class="lines">@@ -1270,12 +1267,10 @@
</span><span class="cx"> return;
</span><span class="cx">
</span><span class="cx"> this._currentResizer = null;
</span><del>- this.dispatchEventToListeners(WebInspector.DataGrid.Event.DidLayout);
</del><span class="cx"> }
</span><span class="cx"> };
</span><span class="cx">
</span><span class="cx"> WebInspector.DataGrid.Event = {
</span><del>- DidLayout: "datagrid-did-layout",
</del><span class="cx"> SortChanged: "datagrid-sort-changed",
</span><span class="cx"> SelectedNodeChanged: "datagrid-selected-node-changed",
</span><span class="cx"> ExpandedNode: "datagrid-expanded-node",
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsHierarchicalPathNavigationItemjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/HierarchicalPathNavigationItem.js (191975 => 191976)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/HierarchicalPathNavigationItem.js 2015-11-03 21:52:42 UTC (rev 191975)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/HierarchicalPathNavigationItem.js 2015-11-03 21:56:35 UTC (rev 191976)
</span><span class="lines">@@ -61,7 +61,7 @@
</span><span class="cx">
</span><span class="cx"> // Update layout for the so other items can adjust to the extra space (or lack thereof) too.
</span><span class="cx"> if (this.parentNavigationBar)
</span><del>- this.parentNavigationBar.updateLayoutSoon();
</del><ins>+ this.parentNavigationBar.needsLayout();
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> get lastComponent()
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsLayoutTimelineViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.js (191975 => 191976)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.js 2015-11-03 21:52:42 UTC (rev 191975)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.js 2015-11-03 21:56:35 UTC (rev 191976)
</span><span class="lines">@@ -86,7 +86,7 @@
</span><span class="cx"> this.navigationSidebarTreeOutline.element.addEventListener("mouseleave", this._mouseLeaveTreeOutline.bind(this));
</span><span class="cx">
</span><span class="cx"> this.element.classList.add("layout");
</span><del>- this.element.appendChild(this._dataGrid.element);
</del><ins>+ this.addSubview(this._dataGrid);
</ins><span class="cx">
</span><span class="cx"> timeline.addEventListener(WebInspector.Timeline.Event.RecordAdded, this._layoutTimelineRecordAdded, this);
</span><span class="cx">
</span><span class="lines">@@ -133,15 +133,6 @@
</span><span class="cx"> this._updateHighlight();
</span><span class="cx"> }
</span><span class="cx">
</span><del>- updateLayout()
- {
- super.updateLayout();
-
- this._dataGrid.updateLayout();
-
- this._processPendingRecords();
- }
-
</del><span class="cx"> matchTreeElementAgainstCustomFilters(treeElement)
</span><span class="cx"> {
</span><span class="cx"> return this._dataGrid.treeElementMatchesActiveScopeFilters(treeElement);
</span><span class="lines">@@ -185,6 +176,11 @@
</span><span class="cx"> this._updateHighlight();
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ layout()
+ {
+ this._processPendingRecords();
+ }
+
</ins><span class="cx"> // Private
</span><span class="cx">
</span><span class="cx"> _processPendingRecords()
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsNavigationBarjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NavigationBar.js (191975 => 191976)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/NavigationBar.js 2015-11-03 21:52:42 UTC (rev 191975)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NavigationBar.js 2015-11-03 21:56:35 UTC (rev 191976)
</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.NavigationBar = class NavigationBar extends WebInspector.Object
</del><ins>+WebInspector.NavigationBar = class NavigationBar extends WebInspector.View
</ins><span class="cx"> {
</span><span class="cx"> constructor(element, navigationItems, role, label)
</span><span class="cx"> {
</span><del>- super();
</del><ins>+ super(element);
</ins><span class="cx">
</span><del>- this._element = element || document.createElement("div");
- this._element.classList.add(this.constructor.StyleClassName || "navigation-bar");
- this._element.tabIndex = 0;
</del><ins>+ this.element.classList.add(this.constructor.StyleClassName || "navigation-bar");
+ this.element.tabIndex = 0;
</ins><span class="cx">
</span><span class="cx"> if (role)
</span><del>- this._element.setAttribute("role", role);
</del><ins>+ this.element.setAttribute("role", role);
</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><del>- this._element.addEventListener("focus", this._focus.bind(this), false);
- this._element.addEventListener("blur", this._blur.bind(this), false);
- this._element.addEventListener("keydown", this._keyDown.bind(this), false);
- this._element.addEventListener("mousedown", this._mouseDown.bind(this), false);
</del><ins>+ this.element.addEventListener("focus", this._focus.bind(this), false);
+ this.element.addEventListener("blur", this._blur.bind(this), false);
+ this.element.addEventListener("keydown", this._keyDown.bind(this), false);
+ this.element.addEventListener("mousedown", this._mouseDown.bind(this), false);
</ins><span class="cx">
</span><ins>+ this._minimumWidth = NaN;
</ins><span class="cx"> this._navigationItems = [];
</span><span class="cx">
</span><span class="cx"> if (navigationItems) {
</span><span class="lines">@@ -75,7 +75,7 @@
</span><span class="cx"> this._navigationItems.splice(index, 0, navigationItem);
</span><span class="cx">
</span><span class="cx"> if (!parentElement)
</span><del>- parentElement = this._element;
</del><ins>+ parentElement = this.element;
</ins><span class="cx">
</span><span class="cx"> var nextSibling = this._navigationItems[index + 1];
</span><span class="cx"> var nextSiblingElement = nextSibling ? nextSibling.element : null;
</span><span class="lines">@@ -84,9 +84,9 @@
</span><span class="cx">
</span><span class="cx"> parentElement.insertBefore(navigationItem.element, nextSiblingElement);
</span><span class="cx">
</span><del>- this._minimumWidthNeedsRecalculation = true;
</del><ins>+ this._minimumWidth = NaN;
</ins><span class="cx">
</span><del>- this.updateLayoutSoon();
</del><ins>+ this.needsLayout();
</ins><span class="cx">
</span><span class="cx"> return navigationItem;
</span><span class="cx"> }
</span><span class="lines">@@ -105,72 +105,13 @@
</span><span class="cx"> this._navigationItems.remove(navigationItem);
</span><span class="cx"> navigationItem.element.remove();
</span><span class="cx">
</span><del>- this._minimumWidthNeedsRecalculation = true;
</del><ins>+ this._minimumWidth = NaN;
</ins><span class="cx">
</span><del>- this.updateLayoutSoon();
</del><ins>+ this.needsLayout();
</ins><span class="cx">
</span><span class="cx"> return navigationItem;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- updateLayoutSoon()
- {
- if (this._updateLayoutIdentifier)
- return;
-
- this._needsLayout = true;
-
- function update()
- {
- this._updateLayoutIdentifier = undefined;
-
- if (this._needsLayout)
- this.updateLayout();
- }
-
- this._updateLayoutIdentifier = requestAnimationFrame(update.bind(this));
- }
-
- updateLayout()
- {
- if (this._updateLayoutIdentifier) {
- cancelAnimationFrame(this._updateLayoutIdentifier);
- this._updateLayoutIdentifier = undefined;
- }
-
- this._needsLayout = false;
-
- if (typeof this.customUpdateLayout === "function") {
- this.customUpdateLayout();
- return;
- }
-
- // Remove the collapsed style class to test if the items can fit at full width.
- this._element.classList.remove(WebInspector.NavigationBar.CollapsedStyleClassName);
-
- // Tell each navigation item to update to full width if needed.
- for (var i = 0; i < this._navigationItems.length; ++i)
- this._navigationItems[i].updateLayout(true);
-
- var totalItemWidth = 0;
- for (var i = 0; i < this._navigationItems.length; ++i) {
- // Skip flexible space items since they can take up no space at the minimum width.
- if (this._navigationItems[i] instanceof WebInspector.FlexibleSpaceNavigationItem)
- continue;
-
- totalItemWidth += this._navigationItems[i].element.realOffsetWidth;
- }
-
- var barWidth = this._element.realOffsetWidth;
-
- // Add the collapsed class back if the items are wider than the bar.
- if (totalItemWidth > barWidth)
- this._element.classList.add(WebInspector.NavigationBar.CollapsedStyleClassName);
-
- // Give each navigation item the opportunity to collapse further.
- for (var i = 0; i < this._navigationItems.length; ++i)
- this._navigationItems[i].updateLayout();
- }
-
</del><span class="cx"> get selectedNavigationItem()
</span><span class="cx"> {
</span><span class="cx"> return this._selectedNavigationItem || null;
</span><span class="lines">@@ -206,18 +147,10 @@
</span><span class="cx"> return this._navigationItems;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- get element()
- {
- return this._element;
- }
-
</del><span class="cx"> get minimumWidth()
</span><span class="cx"> {
</span><del>- if (this._minimumWidth === undefined || this._minimumWidthNeedsRecalculation) {
</del><ins>+ if (isNaN(this._minimumWidth))
</ins><span class="cx"> this._minimumWidth = this._calculateMinimumWidth();
</span><del>- delete this._minimumWidthNeedsRecalculation;
- }
-
</del><span class="cx"> return this._minimumWidth;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -227,6 +160,35 @@
</span><span class="cx"> return false;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ layout()
+ {
+ // Remove the collapsed style class to test if the items can fit at full width.
+ this.element.classList.remove(WebInspector.NavigationBar.CollapsedStyleClassName);
+
+ // Tell each navigation item to update to full width if needed.
+ for (let navigationItem of this._navigationItems)
+ navigationItem.updateLayout(true);
+
+ let totalItemWidth = 0;
+ for (let navigationItem of this._navigationItems) {
+ // Skip flexible space items since they can take up no space at the minimum width.
+ if (navigationItem instanceof WebInspector.FlexibleSpaceNavigationItem)
+ continue;
+
+ totalItemWidth += navigationItem.element.realOffsetWidth;
+ }
+
+ const barWidth = this.element.realOffsetWidth;
+
+ // Add the collapsed class back if the items are wider than the bar.
+ if (totalItemWidth > barWidth)
+ this.element.classList.add(WebInspector.NavigationBar.CollapsedStyleClassName);
+
+ // Give each navigation item the opportunity to collapse further.
+ for (let navigationItem of this._navigationItems)
+ navigationItem.updateLayout(false);
+ }
+
</ins><span class="cx"> // Private
</span><span class="cx">
</span><span class="cx"> _findNavigationItem(navigationItemOrIdentifierOrIndex)
</span><span class="lines">@@ -259,7 +221,7 @@
</span><span class="cx"> // Remove the tabIndex so clicking the navigation bar does not give it focus.
</span><span class="cx"> // Only keep the tabIndex if already focused from keyboard navigation. This matches Xcode.
</span><span class="cx"> if (!this._focused)
</span><del>- this._element.removeAttribute("tabindex");
</del><ins>+ this.element.removeAttribute("tabindex");
</ins><span class="cx">
</span><span class="cx"> var itemElement = event.target.enclosingNodeOrSelfWithClass(WebInspector.RadioButtonNavigationItem.StyleClassName);
</span><span class="cx"> if (!itemElement || !itemElement.navigationItem)
</span><span class="lines">@@ -297,15 +259,15 @@
</span><span class="cx"> event.stopPropagation();
</span><span class="cx">
</span><span class="cx"> var itemElement = event.target.enclosingNodeOrSelfWithClass(WebInspector.RadioButtonNavigationItem.StyleClassName);
</span><del>- if (!itemElement || !itemElement.navigationItem || !this._element.contains(itemElement)) {
</del><ins>+ if (!itemElement || !itemElement.navigationItem || !this.element.contains(itemElement)) {
</ins><span class="cx"> // Find the element that is at the X position of the mouse, even when the mouse is no longer
</span><span class="cx"> // vertically in the navigation bar.
</span><del>- var element = document.elementFromPoint(event.pageX, this._element.totalOffsetTop + (this._element.offsetHeight / 2));
</del><ins>+ var element = document.elementFromPoint(event.pageX, this.element.totalOffsetTop + (this.element.offsetHeight / 2));
</ins><span class="cx"> if (!element)
</span><span class="cx"> return;
</span><span class="cx">
</span><span class="cx"> itemElement = element.enclosingNodeOrSelfWithClass(WebInspector.RadioButtonNavigationItem.StyleClassName);
</span><del>- if (!itemElement || !itemElement.navigationItem || !this._element.contains(itemElement))
</del><ins>+ if (!itemElement || !itemElement.navigationItem || !this.element.contains(itemElement))
</ins><span class="cx"> return;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -336,7 +298,7 @@
</span><span class="cx"> delete this._mouseUpEventListener;
</span><span class="cx">
</span><span class="cx"> // Restore the tabIndex so the navigation bar can be in the keyboard tab loop.
</span><del>- this._element.tabIndex = 0;
</del><ins>+ this.element.tabIndex = 0;
</ins><span class="cx">
</span><span class="cx"> // Dispatch the selected event here since the selectedNavigationItem setter surpresses it
</span><span class="cx"> // while the mouse is down to prevent sending it while scrubbing the bar.
</span><span class="lines">@@ -393,11 +355,11 @@
</span><span class="cx">
</span><span class="cx"> _calculateMinimumWidth()
</span><span class="cx"> {
</span><del>- var wasCollapsed = this._element.classList.contains(WebInspector.NavigationBar.CollapsedStyleClassName);
</del><ins>+ const wasCollapsed = this.element.classList.contains(WebInspector.NavigationBar.CollapsedStyleClassName);
</ins><span class="cx">
</span><span class="cx"> // Add the collapsed style class to calculate the width of the items when they are collapsed.
</span><span class="cx"> if (!wasCollapsed)
</span><del>- this._element.classList.add(WebInspector.NavigationBar.CollapsedStyleClassName);
</del><ins>+ this.element.classList.add(WebInspector.NavigationBar.CollapsedStyleClassName);
</ins><span class="cx">
</span><span class="cx"> var totalItemWidth = 0;
</span><span class="cx"> for (var i = 0; i < this._navigationItems.length; ++i) {
</span><span class="lines">@@ -409,7 +371,7 @@
</span><span class="cx">
</span><span class="cx"> // Remove the collapsed style class if we were not collapsed before.
</span><span class="cx"> if (!wasCollapsed)
</span><del>- this._element.classList.remove(WebInspector.NavigationBar.CollapsedStyleClassName);
</del><ins>+ this.element.classList.remove(WebInspector.NavigationBar.CollapsedStyleClassName);
</ins><span class="cx">
</span><span class="cx"> return totalItemWidth;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsNavigationItemjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NavigationItem.js (191975 => 191976)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/NavigationItem.js 2015-11-03 21:52:42 UTC (rev 191975)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NavigationItem.js 2015-11-03 21:56:35 UTC (rev 191976)
</span><span class="lines">@@ -80,7 +80,7 @@
</span><span class="cx"> this._element.classList.toggle("hidden", flag);
</span><span class="cx">
</span><span class="cx"> if (this._parentNavigationBar)
</span><del>- this._parentNavigationBar.updateLayoutSoon();
</del><ins>+ this._parentNavigationBar.needsLayout();
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Private
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsNetworkTimelineViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.js (191975 => 191976)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.js 2015-11-03 21:52:42 UTC (rev 191975)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.js 2015-11-03 21:56:35 UTC (rev 191976)
</span><span class="lines">@@ -93,7 +93,7 @@
</span><span class="cx"> this._dataGrid.sortOrder = WebInspector.DataGrid.SortOrder.Ascending;
</span><span class="cx">
</span><span class="cx"> this.element.classList.add("network");
</span><del>- this.element.appendChild(this._dataGrid.element);
</del><ins>+ this.addSubview(this._dataGrid);
</ins><span class="cx">
</span><span class="cx"> timeline.addEventListener(WebInspector.Timeline.Event.RecordAdded, this._networkTimelineRecordAdded, this);
</span><span class="cx">
</span><span class="lines">@@ -129,15 +129,6 @@
</span><span class="cx"> this._dataGrid.closed();
</span><span class="cx"> }
</span><span class="cx">
</span><del>- updateLayout()
- {
- super.updateLayout();
-
- this._dataGrid.updateLayout();
-
- this._processPendingRecords();
- }
-
</del><span class="cx"> matchTreeElementAgainstCustomFilters(treeElement)
</span><span class="cx"> {
</span><span class="cx"> return this._dataGrid.treeElementMatchesActiveScopeFilters(treeElement);
</span><span class="lines">@@ -187,6 +178,11 @@
</span><span class="cx"> super.treeElementSelected(treeElement, selectedByUser);
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ layout()
+ {
+ this._processPendingRecords();
+ }
+
</ins><span class="cx"> // Private
</span><span class="cx">
</span><span class="cx"> _processPendingRecords()
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsOverviewTimelineViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/OverviewTimelineView.js (191975 => 191976)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/OverviewTimelineView.js 2015-11-03 21:52:42 UTC (rev 191975)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/OverviewTimelineView.js 2015-11-03 21:56:35 UTC (rev 191976)
</span><span class="lines">@@ -41,13 +41,14 @@
</span><span class="cx">
</span><span class="cx"> this._timelineRuler = new WebInspector.TimelineRuler;
</span><span class="cx"> this._timelineRuler.allowsClippedLabels = true;
</span><ins>+ // FIXME: change to `this.addSubview(this._timelineRuler)` once <https://webkit.org/b/150703> is fixed.
</ins><span class="cx"> this.element.appendChild(this._timelineRuler.element);
</span><span class="cx">
</span><span class="cx"> this._currentTimeMarker = new WebInspector.TimelineMarker(0, WebInspector.TimelineMarker.Type.CurrentTime);
</span><span class="cx"> this._timelineRuler.addMarker(this._currentTimeMarker);
</span><span class="cx">
</span><span class="cx"> this.element.classList.add("overview");
</span><del>- this.element.appendChild(this._dataGrid.element);
</del><ins>+ this.addSubview(this._dataGrid);
</ins><span class="cx">
</span><span class="cx"> this._networkTimeline = recording.timelines.get(WebInspector.TimelineRecord.Type.Network);
</span><span class="cx"> this._networkTimeline.addEventListener(WebInspector.Timeline.Event.RecordAdded, this._networkTimelineRecordAdded, this);
</span><span class="lines">@@ -88,35 +89,6 @@
</span><span class="cx"> this._recording.removeEventListener(null, null, this);
</span><span class="cx"> }
</span><span class="cx">
</span><del>- updateLayout()
- {
- super.updateLayout();
-
- var oldZeroTime = this._timelineRuler.zeroTime;
- var oldStartTime = this._timelineRuler.startTime;
- var oldEndTime = this._timelineRuler.endTime;
- var oldCurrentTime = this._currentTimeMarker.time;
-
- this._timelineRuler.zeroTime = this.zeroTime;
- this._timelineRuler.startTime = this.startTime;
- this._timelineRuler.endTime = this.endTime;
- this._currentTimeMarker.time = this.currentTime;
-
- // The TimelineDataGridNode graphs are positioned with percentages, so they auto resize with the view.
- // We only need to refresh the graphs when the any of the times change.
- if (this.zeroTime !== oldZeroTime || this.startTime !== oldStartTime || this.endTime !== oldEndTime || this.currentTime !== oldCurrentTime) {
- var dataGridNode = this._dataGrid.children[0];
- while (dataGridNode) {
- dataGridNode.refreshGraph();
- dataGridNode = dataGridNode.traverseNextNode(true, null, true);
- }
- }
-
- this._timelineRuler.updateLayout();
-
- this._processPendingRepresentedObjects();
- }
-
</del><span class="cx"> get selectionPathComponents()
</span><span class="cx"> {
</span><span class="cx"> var dataGridNode = this._dataGrid.selectedNode;
</span><span class="lines">@@ -187,6 +159,34 @@
</span><span class="cx"> WebInspector.showOriginalOrFormattedSourceCodeLocation(treeElement.sourceCodeTimeline.sourceCodeLocation);
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ layout()
+ {
+ let oldZeroTime = this._timelineRuler.zeroTime;
+ let oldStartTime = this._timelineRuler.startTime;
+ let oldEndTime = this._timelineRuler.endTime;
+ let oldCurrentTime = this._currentTimeMarker.time;
+
+ this._timelineRuler.zeroTime = this.zeroTime;
+ this._timelineRuler.startTime = this.startTime;
+ this._timelineRuler.endTime = this.endTime;
+ this._currentTimeMarker.time = this.currentTime;
+
+ // The TimelineDataGridNode graphs are positioned with percentages, so they auto resize with the view.
+ // We only need to refresh the graphs when the any of the times change.
+ if (this.zeroTime !== oldZeroTime || this.startTime !== oldStartTime || this.endTime !== oldEndTime || this.currentTime !== oldCurrentTime) {
+ let dataGridNode = this._dataGrid.children[0];
+ while (dataGridNode) {
+ dataGridNode.refreshGraph();
+ dataGridNode = dataGridNode.traverseNextNode(true, null, true);
+ }
+ }
+
+ // FIXME: remove once <https://webkit.org/b/150703> is fixed.
+ this._timelineRuler.updateLayout();
+
+ this._processPendingRepresentedObjects();
+ }
+
</ins><span class="cx"> // Private
</span><span class="cx">
</span><span class="cx"> _compareTreeElementsByDetails(a, b)
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsQuickConsolejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/QuickConsole.js (191975 => 191976)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/QuickConsole.js 2015-11-03 21:52:42 UTC (rev 191975)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/QuickConsole.js 2015-11-03 21:56:35 UTC (rev 191976)
</span><span class="lines">@@ -23,11 +23,11 @@
</span><span class="cx"> * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx"> */
</span><span class="cx">
</span><del>-WebInspector.QuickConsole = class QuickConsole extends WebInspector.Object
</del><ins>+WebInspector.QuickConsole = class QuickConsole extends WebInspector.View
</ins><span class="cx"> {
</span><span class="cx"> constructor(element)
</span><span class="cx"> {
</span><del>- super();
</del><ins>+ super(element);
</ins><span class="cx">
</span><span class="cx"> this._toggleOrFocusKeyboardShortcut = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.Escape, this._toggleOrFocus.bind(this));
</span><span class="cx">
</span><span class="lines">@@ -38,12 +38,11 @@
</span><span class="cx"> this._otherExecutionContextPathComponents = [];
</span><span class="cx"> this._frameIdentifierToExecutionContextPathComponentMap = {};
</span><span class="cx">
</span><del>- this._element = element || document.createElement("div");
- this._element.classList.add("quick-console");
</del><ins>+ this.element.classList.add("quick-console");
</ins><span class="cx">
</span><span class="cx"> this.prompt = new WebInspector.ConsolePrompt(null, "text/javascript");
</span><span class="cx"> this.prompt.element.classList.add("text-prompt");
</span><del>- this._element.appendChild(this.prompt.element);
</del><ins>+ this.addSubview(this.prompt);
</ins><span class="cx">
</span><span class="cx"> // FIXME: CodeMirror 4 has a default "Esc" key handler that always prevents default.
</span><span class="cx"> // Our keyboard shortcut above will respect the default prevented and ignore the event
</span><span class="lines">@@ -55,7 +54,7 @@
</span><span class="cx"> this.prompt.shown();
</span><span class="cx">
</span><span class="cx"> this._navigationBar = new WebInspector.QuickConsoleNavigationBar;
</span><del>- this._element.appendChild(this._navigationBar.element);
</del><ins>+ this.addSubview(this._navigationBar);
</ins><span class="cx">
</span><span class="cx"> this._executionContextSelectorItem = new WebInspector.HierarchicalPathNavigationItem;
</span><span class="cx"> this._executionContextSelectorItem.showSelectorArrows = true;
</span><span class="lines">@@ -74,11 +73,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 navigationBar()
</span><span class="cx"> {
</span><span class="cx"> return this._navigationBar;
</span><span class="lines">@@ -89,13 +83,6 @@
</span><span class="cx"> return this._selectedExecutionContextPathComponent._executionContextIdentifier;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- updateLayout()
- {
- // A hard maximum size of 33% of the window.
- var maximumAllowedHeight = Math.round(window.innerHeight * 0.33);
- this.prompt.element.style.maxHeight = maximumAllowedHeight + "px";
- }
-
</del><span class="cx"> consoleLogVisibilityChanged(visible)
</span><span class="cx"> {
</span><span class="cx"> if (visible === this.element.classList.contains(WebInspector.QuickConsole.ShowingLogClassName))
</span><span class="lines">@@ -106,6 +93,15 @@
</span><span class="cx"> this.dispatchEventToListeners(WebInspector.QuickConsole.Event.DidResize);
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ // Protected
+
+ layout()
+ {
+ // A hard maximum size of 33% of the window.
+ let maximumAllowedHeight = Math.round(window.innerHeight * 0.33);
+ this.prompt.element.style.maxHeight = maximumAllowedHeight + "px";
+ }
+
</ins><span class="cx"> // Private
</span><span class="cx">
</span><span class="cx"> _executionContextPathComponentsToDisplay()
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsRenderingFrameTimelineViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineView.js (191975 => 191976)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineView.js 2015-11-03 21:52:42 UTC (rev 191975)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineView.js 2015-11-03 21:56:35 UTC (rev 191976)
</span><span class="lines">@@ -79,7 +79,7 @@
</span><span class="cx"> this._dataGrid.sortOrder = WebInspector.DataGrid.SortOrder.Ascending;
</span><span class="cx">
</span><span class="cx"> this.element.classList.add("rendering-frame");
</span><del>- this.element.appendChild(this._dataGrid.element);
</del><ins>+ this.addSubview(this._dataGrid);
</ins><span class="cx">
</span><span class="cx"> timeline.addEventListener(WebInspector.Timeline.Event.RecordAdded, this._renderingFrameTimelineRecordAdded, this);
</span><span class="cx">
</span><span class="lines">@@ -131,15 +131,6 @@
</span><span class="cx"> this._dataGrid.closed();
</span><span class="cx"> }
</span><span class="cx">
</span><del>- updateLayout()
- {
- super.updateLayout();
-
- this._dataGrid.updateLayout();
-
- this._processPendingRecords();
- }
-
</del><span class="cx"> get selectionPathComponents()
</span><span class="cx"> {
</span><span class="cx"> var dataGridNode = this._dataGrid.selectedNode;
</span><span class="lines">@@ -245,6 +236,11 @@
</span><span class="cx"> return null;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ layout()
+ {
+ this._processPendingRecords();
+ }
+
</ins><span class="cx"> // Private
</span><span class="cx">
</span><span class="cx"> _processPendingRecords()
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsScriptTimelineViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineView.js (191975 => 191976)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineView.js 2015-11-03 21:52:42 UTC (rev 191975)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineView.js 2015-11-03 21:56:35 UTC (rev 191976)
</span><span class="lines">@@ -68,7 +68,7 @@
</span><span class="cx"> this._dataGrid.sortOrder = WebInspector.DataGrid.SortOrder.Ascending;
</span><span class="cx">
</span><span class="cx"> this.element.classList.add("script");
</span><del>- this.element.appendChild(this._dataGrid.element);
</del><ins>+ this.addSubview(this._dataGrid);
</ins><span class="cx">
</span><span class="cx"> timeline.addEventListener(WebInspector.Timeline.Event.RecordAdded, this._scriptTimelineRecordAdded, this);
</span><span class="cx">
</span><span class="lines">@@ -104,28 +104,6 @@
</span><span class="cx"> this._dataGrid.closed();
</span><span class="cx"> }
</span><span class="cx">
</span><del>- updateLayout()
- {
- super.updateLayout();
-
- this._dataGrid.updateLayout();
-
- if (this.startTime !== this._oldStartTime || this.endTime !== this._oldEndTime) {
- var dataGridNode = this._dataGrid.children[0];
- while (dataGridNode) {
- dataGridNode.updateRangeTimes(this.startTime, this.endTime);
- if (dataGridNode.revealed)
- dataGridNode.refreshIfNeeded();
- dataGridNode = dataGridNode.traverseNextNode(false, null, true);
- }
-
- this._oldStartTime = this.startTime;
- this._oldEndTime = this.endTime;
- }
-
- this._processPendingRecords();
- }
-
</del><span class="cx"> get selectionPathComponents()
</span><span class="cx"> {
</span><span class="cx"> var dataGridNode = this._dataGrid.selectedNode;
</span><span class="lines">@@ -217,6 +195,24 @@
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ layout()
+ {
+ if (this.startTime !== this._oldStartTime || this.endTime !== this._oldEndTime) {
+ let dataGridNode = this._dataGrid.children[0];
+ while (dataGridNode) {
+ dataGridNode.updateRangeTimes(this.startTime, this.endTime);
+ if (dataGridNode.revealed)
+ dataGridNode.refreshIfNeeded();
+ dataGridNode = dataGridNode.traverseNextNode(false, null, true);
+ }
+
+ this._oldStartTime = this.startTime;
+ this._oldEndTime = this.endTime;
+ }
+
+ this._processPendingRecords();
+ }
+
</ins><span class="cx"> // Private
</span><span class="cx">
</span><span class="cx"> _processPendingRecords()
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTabBarjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.js (191975 => 191976)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.js 2015-11-03 21:52:42 UTC (rev 191975)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.js 2015-11-03 21:56:35 UTC (rev 191976)
</span><span class="lines">@@ -23,23 +23,22 @@
</span><span class="cx"> * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx"> */
</span><span class="cx">
</span><del>-WebInspector.TabBar = class TabBar extends WebInspector.Object
</del><ins>+WebInspector.TabBar = class TabBar extends WebInspector.View
</ins><span class="cx"> {
</span><span class="cx"> constructor(element, tabBarItems)
</span><span class="cx"> {
</span><del>- super();
</del><ins>+ super(element);
</ins><span class="cx">
</span><del>- this._element = element || document.createElement("div");
- this._element.classList.add("tab-bar");
- this._element.setAttribute("role", "tablist");
</del><ins>+ this.element.classList.add("tab-bar");
+ this.element.setAttribute("role", "tablist");
</ins><span class="cx">
</span><span class="cx"> var topBorderElement = document.createElement("div");
</span><span class="cx"> topBorderElement.classList.add("top-border");
</span><del>- this._element.appendChild(topBorderElement);
</del><ins>+ this.element.appendChild(topBorderElement);
</ins><span class="cx">
</span><del>- this._element.addEventListener("mousedown", this._handleMouseDown.bind(this));
- this._element.addEventListener("click", this._handleClick.bind(this));
- this._element.addEventListener("mouseleave", this._handleMouseLeave.bind(this));
</del><ins>+ this.element.addEventListener("mousedown", this._handleMouseDown.bind(this));
+ this.element.addEventListener("click", this._handleClick.bind(this));
+ this.element.addEventListener("mouseleave", this._handleMouseLeave.bind(this));
</ins><span class="cx">
</span><span class="cx"> this._tabBarItems = [];
</span><span class="cx">
</span><span class="lines">@@ -111,7 +110,7 @@
</span><span class="cx"> var lastIndex = this._newTabItem ? this._tabBarItems.length - 1 : this._tabBarItems.length;
</span><span class="cx"> index = Math.max(0, Math.min(index, lastIndex));
</span><span class="cx">
</span><del>- if (this._element.classList.contains("animating")) {
</del><ins>+ if (this.element.classList.contains("animating")) {
</ins><span class="cx"> requestAnimationFrame(removeStyles.bind(this));
</span><span class="cx"> doNotAnimate = true;
</span><span class="cx"> }
</span><span class="lines">@@ -125,34 +124,34 @@
</span><span class="cx"> var nextSibling = this._tabBarItems[index + 1];
</span><span class="cx"> var nextSiblingElement = nextSibling ? nextSibling.element : (this._newTabItem ? this._newTabItem.element : null);
</span><span class="cx">
</span><del>- this._element.insertBefore(tabBarItem.element, nextSiblingElement);
</del><ins>+ this.element.insertBefore(tabBarItem.element, nextSiblingElement);
</ins><span class="cx">
</span><del>- this._element.classList.toggle("single-tab", !this._hasMoreThanOneNormalTab());
</del><ins>+ this.element.classList.toggle("single-tab", !this._hasMoreThanOneNormalTab());
</ins><span class="cx">
</span><span class="cx"> tabBarItem.element.style.left = null;
</span><span class="cx"> tabBarItem.element.style.width = null;
</span><span class="cx">
</span><span class="cx"> function animateTabs()
</span><span class="cx"> {
</span><del>- this._element.classList.add("animating");
- this._element.classList.add("inserting-tab");
</del><ins>+ this.element.classList.add("animating");
+ this.element.classList.add("inserting-tab");
</ins><span class="cx">
</span><span class="cx"> this._applyTabBarItemSizesAndPositions(afterTabSizesAndPositions);
</span><span class="cx">
</span><del>- this._element.addEventListener("webkitTransitionEnd", removeStylesListener);
</del><ins>+ this.element.addEventListener("webkitTransitionEnd", removeStylesListener);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> function removeStyles()
</span><span class="cx"> {
</span><del>- this._element.classList.remove("static-layout");
- this._element.classList.remove("animating");
- this._element.classList.remove("inserting-tab");
</del><ins>+ this.element.classList.remove("static-layout");
+ this.element.classList.remove("animating");
+ this.element.classList.remove("inserting-tab");
</ins><span class="cx">
</span><span class="cx"> tabBarItem.element.classList.remove("being-inserted");
</span><span class="cx">
</span><span class="cx"> this._clearTabBarItemSizesAndPositions();
</span><span class="cx">
</span><del>- this._element.removeEventListener("webkitTransitionEnd", removeStylesListener);
</del><ins>+ this.element.removeEventListener("webkitTransitionEnd", removeStylesListener);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> if (!doNotAnimate) {
</span><span class="lines">@@ -168,7 +167,7 @@
</span><span class="cx"> else
</span><span class="cx"> beforeTabSizesAndPositions.set(tabBarItem, {left: 0, width: 0});
</span><span class="cx">
</span><del>- this._element.classList.add("static-layout");
</del><ins>+ this.element.classList.add("static-layout");
</ins><span class="cx"> tabBarItem.element.classList.add("being-inserted");
</span><span class="cx">
</span><span class="cx"> this._applyTabBarItemSizesAndPositions(beforeTabSizesAndPositions);
</span><span class="lines">@@ -177,7 +176,7 @@
</span><span class="cx">
</span><span class="cx"> requestAnimationFrame(animateTabs.bind(this));
</span><span class="cx"> } else
</span><del>- this.updateLayoutSoon();
</del><ins>+ this.needsLayout();
</ins><span class="cx">
</span><span class="cx"> this.dispatchEventToListeners(WebInspector.TabBar.Event.TabBarItemAdded, {tabBarItem});
</span><span class="cx">
</span><span class="lines">@@ -204,7 +203,7 @@
</span><span class="cx"> this.selectedTabBarItem = nextTabBarItem;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- if (this._element.classList.contains("animating")) {
</del><ins>+ if (this.element.classList.contains("animating")) {
</ins><span class="cx"> requestAnimationFrame(removeStyles.bind(this));
</span><span class="cx"> doNotAnimate = true;
</span><span class="cx"> }
</span><span class="lines">@@ -219,7 +218,7 @@
</span><span class="cx"> tabBarItem.element.remove();
</span><span class="cx">
</span><span class="cx"> var hasMoreThanOneNormalTab = this._hasMoreThanOneNormalTab();
</span><del>- this._element.classList.toggle("single-tab", !hasMoreThanOneNormalTab);
</del><ins>+ this.element.classList.toggle("single-tab", !hasMoreThanOneNormalTab);
</ins><span class="cx">
</span><span class="cx"> const shouldOpenDefaultTab = !tabBarItem.isDefaultTab && !this.hasNormalTab();
</span><span class="cx"> if (shouldOpenDefaultTab)
</span><span class="lines">@@ -230,7 +229,7 @@
</span><span class="cx"> this._tabAnimatedClosedSinceMouseEnter = true;
</span><span class="cx"> this._finishExpandingTabsAfterClose(beforeTabSizesAndPositions);
</span><span class="cx"> } else
</span><del>- this.updateLayoutSoon();
</del><ins>+ this.needsLayout();
</ins><span class="cx">
</span><span class="cx"> this.dispatchEventToListeners(WebInspector.TabBar.Event.TabBarItemRemoved, {tabBarItem});
</span><span class="cx">
</span><span class="lines">@@ -244,8 +243,8 @@
</span><span class="cx">
</span><span class="cx"> function animateTabs()
</span><span class="cx"> {
</span><del>- this._element.classList.add("animating");
- this._element.classList.add("closing-tab");
</del><ins>+ this.element.classList.add("animating");
+ this.element.classList.add("closing-tab");
</ins><span class="cx">
</span><span class="cx"> var left = 0;
</span><span class="cx"> for (var currentTabBarItem of this._tabBarItems) {
</span><span class="lines">@@ -266,7 +265,7 @@
</span><span class="cx"> if (lastNormalTabBarItem !== this._selectedTabBarItem)
</span><span class="cx"> lastNormalTabBarItem.element.style.width = (parseFloat(lastNormalTabBarItem.element.style.width) + 1) + "px";
</span><span class="cx">
</span><del>- this._element.addEventListener("webkitTransitionEnd", removeStylesListener);
</del><ins>+ this.element.addEventListener("webkitTransitionEnd", removeStylesListener);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> function removeStyles()
</span><span class="lines">@@ -275,16 +274,16 @@
</span><span class="cx"> if (this._selectedTabBarItem && this._selectedTabBarItem !== lastNormalTabBarItem)
</span><span class="cx"> this._selectedTabBarItem.element.style.width = (parseFloat(this._selectedTabBarItem.element.style.width) - 1) + "px";
</span><span class="cx">
</span><del>- this._element.classList.remove("animating");
- this._element.classList.remove("closing-tab");
</del><ins>+ this.element.classList.remove("animating");
+ this.element.classList.remove("closing-tab");
</ins><span class="cx">
</span><span class="cx"> this.updateLayout();
</span><span class="cx">
</span><del>- this._element.removeEventListener("webkitTransitionEnd", removeStylesListener);
</del><ins>+ this.element.removeEventListener("webkitTransitionEnd", removeStylesListener);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> if (!doNotAnimate) {
</span><del>- this._element.classList.add("static-layout");
</del><ins>+ this.element.classList.add("static-layout");
</ins><span class="cx">
</span><span class="cx"> this._tabAnimatedClosedSinceMouseEnter = true;
</span><span class="cx">
</span><span class="lines">@@ -294,7 +293,7 @@
</span><span class="cx">
</span><span class="cx"> requestAnimationFrame(animateTabs.bind(this));
</span><span class="cx"> } else
</span><del>- this.updateLayoutSoon();
</del><ins>+ this.needsLayout();
</ins><span class="cx">
</span><span class="cx"> this.dispatchEventToListeners(WebInspector.TabBar.Event.TabBarItemRemoved, {tabBarItem});
</span><span class="cx">
</span><span class="lines">@@ -350,61 +349,6 @@
</span><span class="cx"> this.selectedTabBarItem = this._tabBarItems[newIndex];
</span><span class="cx"> }
</span><span class="cx">
</span><del>- updateLayoutSoon()
- {
- if (this._updateLayoutIdentifier)
- return;
-
- this._needsLayout = true;
-
- function update()
- {
- this._updateLayoutIdentifier = undefined;
-
- if (this._needsLayout)
- this.updateLayout();
- }
-
- this._updateLayoutIdentifier = requestAnimationFrame(update.bind(this));
- }
-
- updateLayout()
- {
- if (this._updateLayoutIdentifier) {
- cancelAnimationFrame(this._updateLayoutIdentifier);
- this._updateLayoutIdentifier = undefined;
- }
-
- if (this._element.classList.contains("static-layout"))
- return;
-
- this._needsLayout = false;
-
- this._element.classList.remove("hide-titles");
- this._element.classList.remove("collapsed");
-
- var firstNormalTabItem = null;
- for (var tabItem of this._tabBarItems) {
- if (tabItem.pinned)
- continue;
- firstNormalTabItem = tabItem;
- break;
- }
-
- if (!firstNormalTabItem)
- return;
-
- if (firstNormalTabItem.element.offsetWidth >= 120)
- return;
-
- this._element.classList.add("collapsed");
-
- if (firstNormalTabItem.element.offsetWidth >= 60)
- return;
-
- this._element.classList.add("hide-titles");
- }
-
</del><span class="cx"> get selectedTabBarItem()
</span><span class="cx"> {
</span><span class="cx"> return this._selectedTabBarItem;
</span><span class="lines">@@ -435,14 +379,41 @@
</span><span class="cx"> return this._tabBarItems;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- get element()
</del><ins>+ hasNormalTab()
</ins><span class="cx"> {
</span><del>- return this._element;
</del><ins>+ return this._tabBarItems.some((tab) => !tab.pinned);
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- hasNormalTab()
</del><ins>+ // Protected
+
+ layout()
</ins><span class="cx"> {
</span><del>- return this._tabBarItems.some((tab) => !tab.pinned);
</del><ins>+ if (this.element.classList.contains("static-layout"))
+ return;
+
+ this.element.classList.remove("hide-titles");
+ this.element.classList.remove("collapsed");
+
+ let firstNormalTabItem = null;
+ for (let tabItem of this._tabBarItems) {
+ if (tabItem.pinned)
+ continue;
+ firstNormalTabItem = tabItem;
+ break;
+ }
+
+ if (!firstNormalTabItem)
+ return;
+
+ if (firstNormalTabItem.element.offsetWidth >= 120)
+ return;
+
+ this.element.classList.add("collapsed");
+
+ if (firstNormalTabItem.element.offsetWidth >= 60)
+ return;
+
+ this.element.classList.add("hide-titles");
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Private
</span><span class="lines">@@ -483,7 +454,7 @@
</span><span class="cx"> {
</span><span class="cx"> var tabBarItemSizesAndPositions = new Map;
</span><span class="cx">
</span><del>- var barRect = this._element.getBoundingClientRect();
</del><ins>+ const barRect = this.element.getBoundingClientRect();
</ins><span class="cx">
</span><span class="cx"> for (var tabBarItem of this._tabBarItems) {
</span><span class="cx"> var boundingRect = tabBarItem.element.getBoundingClientRect();
</span><span class="lines">@@ -522,7 +493,7 @@
</span><span class="cx"> if (!beforeTabSizesAndPositions)
</span><span class="cx"> beforeTabSizesAndPositions = this._recordTabBarItemSizesAndPositions();
</span><span class="cx">
</span><del>- this._element.classList.remove("static-layout");
</del><ins>+ this.element.classList.remove("static-layout");
</ins><span class="cx"> this._clearTabBarItemSizesAndPositions();
</span><span class="cx">
</span><span class="cx"> var afterTabSizesAndPositions = this._recordTabBarItemSizesAndPositions();
</span><span class="lines">@@ -532,26 +503,26 @@
</span><span class="cx">
</span><span class="cx"> function animateTabs()
</span><span class="cx"> {
</span><del>- this._element.classList.add("static-layout");
- this._element.classList.add("animating");
- this._element.classList.add("expanding-tabs");
</del><ins>+ this.element.classList.add("static-layout");
+ this.element.classList.add("animating");
+ this.element.classList.add("expanding-tabs");
</ins><span class="cx">
</span><span class="cx"> this._applyTabBarItemSizesAndPositions(afterTabSizesAndPositions);
</span><span class="cx">
</span><del>- this._element.addEventListener("webkitTransitionEnd", removeStylesListener);
</del><ins>+ this.element.addEventListener("webkitTransitionEnd", removeStylesListener);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> function removeStyles()
</span><span class="cx"> {
</span><del>- this._element.classList.remove("static-layout");
- this._element.classList.remove("animating");
- this._element.classList.remove("expanding-tabs");
</del><ins>+ this.element.classList.remove("static-layout");
+ this.element.classList.remove("animating");
+ this.element.classList.remove("expanding-tabs");
</ins><span class="cx">
</span><span class="cx"> this._clearTabBarItemSizesAndPositions();
</span><span class="cx">
</span><span class="cx"> this.updateLayout();
</span><span class="cx">
</span><del>- this._element.removeEventListener("webkitTransitionEnd", removeStylesListener);
</del><ins>+ this.element.removeEventListener("webkitTransitionEnd", removeStylesListener);
</ins><span class="cx">
</span><span class="cx"> resolve();
</span><span class="cx"> }
</span><span class="lines">@@ -630,7 +601,7 @@
</span><span class="cx"> var closeButtonElement = event.target.enclosingNodeOrSelfWithClass(WebInspector.TabBarItem.CloseButtonStyleClassName);
</span><span class="cx"> if (closeButtonElement || clickedMiddleButton) {
</span><span class="cx"> // Disallow closing the default tab if it is the only tab.
</span><del>- if (tabBarItem.isDefaultTab && this._element.classList.contains("single-tab"))
</del><ins>+ if (tabBarItem.isDefaultTab && this.element.classList.contains("single-tab"))
</ins><span class="cx"> return;
</span><span class="cx">
</span><span class="cx"> this.removeTabBarItem(tabBarItem, false, true);
</span><span class="lines">@@ -651,10 +622,10 @@
</span><span class="cx"> event.preventDefault();
</span><span class="cx"> event.stopPropagation();
</span><span class="cx">
</span><del>- if (!this._element.classList.contains("static-layout")) {
</del><ins>+ if (!this.element.classList.contains("static-layout")) {
</ins><span class="cx"> this._applyTabBarItemSizesAndPositions(this._recordTabBarItemSizesAndPositions());
</span><del>- this._element.classList.add("static-layout");
- this._element.classList.add("dragging-tab");
</del><ins>+ this.element.classList.add("static-layout");
+ this.element.classList.add("dragging-tab");
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> if (this._mouseOffset === undefined)
</span><span class="lines">@@ -695,7 +666,7 @@
</span><span class="cx"> var nextSibling = this._tabBarItems[newIndex + 1];
</span><span class="cx"> var nextSiblingElement = nextSibling ? nextSibling.element : (this._newTabItem ? this._newTabItem.element : null);
</span><span class="cx">
</span><del>- this._element.insertBefore(this._selectedTabBarItem.element, nextSiblingElement);
</del><ins>+ this.element.insertBefore(this._selectedTabBarItem.element, nextSiblingElement);
</ins><span class="cx">
</span><span class="cx"> // FIXME: Animate the tabs that move to make room for the selected tab. This was causing me trouble when I tried.
</span><span class="cx">
</span><span class="lines">@@ -714,10 +685,10 @@
</span><span class="cx"> if (!this._mouseIsDown)
</span><span class="cx"> return;
</span><span class="cx">
</span><del>- this._element.classList.remove("dragging-tab");
</del><ins>+ this.element.classList.remove("dragging-tab");
</ins><span class="cx">
</span><span class="cx"> if (!this._tabAnimatedClosedSinceMouseEnter) {
</span><del>- this._element.classList.remove("static-layout");
</del><ins>+ this.element.classList.remove("static-layout");
</ins><span class="cx"> this._clearTabBarItemSizesAndPositions();
</span><span class="cx"> } else {
</span><span class="cx"> var left = 0;
</span><span class="lines">@@ -745,14 +716,14 @@
</span><span class="cx">
</span><span class="cx"> _handleMouseLeave(event)
</span><span class="cx"> {
</span><del>- if (this._mouseIsDown || !this._tabAnimatedClosedSinceMouseEnter || !this._element.classList.contains("static-layout") || this._element.classList.contains("animating"))
</del><ins>+ if (this._mouseIsDown || !this._tabAnimatedClosedSinceMouseEnter || !this.element.classList.contains("static-layout") || this.element.classList.contains("animating"))
</ins><span class="cx"> return;
</span><span class="cx">
</span><span class="cx"> // This event can still fire when the mouse is inside the element if DOM nodes are added, removed or generally change inside.
</span><span class="cx"> // Check if the mouse really did leave the element by checking the bounds.
</span><span class="cx"> // FIXME: Is this a WebKit bug or correct behavior?
</span><del>- var barRect = this._element.getBoundingClientRect();
- var newTabItemRect = this._newTabItem ? this._newTabItem.element.getBoundingClientRect() : null;
</del><ins>+ const barRect = this.element.getBoundingClientRect();
+ const newTabItemRect = this._newTabItem ? this._newTabItem.element.getBoundingClientRect() : null;
</ins><span class="cx"> if (event.pageY > barRect.top && event.pageY < barRect.bottom && event.pageX > barRect.left && event.pageX < (newTabItemRect ? newTabItemRect.right : barRect.right))
</span><span class="cx"> return;
</span><span class="cx">
</span><span class="lines">@@ -768,7 +739,7 @@
</span><span class="cx">
</span><span class="cx"> _handleNewTabMouseEnter(event)
</span><span class="cx"> {
</span><del>- if (!this._tabAnimatedClosedSinceMouseEnter || !this._element.classList.contains("static-layout") || this._element.classList.contains("animating"))
</del><ins>+ if (!this._tabAnimatedClosedSinceMouseEnter || !this.element.classList.contains("static-layout") || this.element.classList.contains("animating"))
</ins><span class="cx"> return;
</span><span class="cx">
</span><span class="cx"> this._finishExpandingTabsAfterClose();
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTabBrowserjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TabBrowser.js (191975 => 191976)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TabBrowser.js 2015-11-03 21:52:42 UTC (rev 191975)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TabBrowser.js 2015-11-03 21:56:35 UTC (rev 191976)
</span><span class="lines">@@ -23,19 +23,17 @@
</span><span class="cx"> * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx"> */
</span><span class="cx">
</span><del>-WebInspector.TabBrowser = class TabBrowser extends WebInspector.Object
</del><ins>+WebInspector.TabBrowser = class TabBrowser extends WebInspector.View
</ins><span class="cx"> {
</span><span class="cx"> constructor(element, tabBar, navigationSidebar, detailsSidebar)
</span><span class="cx"> {
</span><del>- super();
</del><ins>+ console.assert(tabBar, "Must provide a TabBar.");
</ins><span class="cx">
</span><del>- this._element = element || document.createElement("div");
- this._element.classList.add("tab-browser");
</del><ins>+ super(element);
</ins><span class="cx">
</span><del>- this._tabBar = tabBar || new WebInspector.TabBar;
- if (!tabBar)
- this._element.appendChild(this._tabBar.element);
</del><ins>+ this.element.classList.add("tab-browser");
</ins><span class="cx">
</span><ins>+ this._tabBar = tabBar;
</ins><span class="cx"> this._navigationSidebar = navigationSidebar || null;
</span><span class="cx"> this._detailsSidebar = detailsSidebar || null;
</span><span class="cx">
</span><span class="lines">@@ -48,7 +46,7 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> this._contentViewContainer = new WebInspector.ContentViewContainer;
</span><del>- this._element.appendChild(this._contentViewContainer.element);
</del><ins>+ this.addSubview(this._contentViewContainer);
</ins><span class="cx">
</span><span class="cx"> var showNextTab = this._showNextTab.bind(this);
</span><span class="cx"> var showPreviousTab = this._showPreviousTab.bind(this);
</span><span class="lines">@@ -73,11 +71,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 tabBar()
</span><span class="cx"> {
</span><span class="cx"> return this._tabBar;
</span><span class="lines">@@ -98,12 +91,6 @@
</span><span class="cx"> return this._contentViewContainer.currentContentView;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- updateLayout()
- {
- this._tabBar.updateLayout();
- this._contentViewContainer.updateLayout();
- }
-
</del><span class="cx"> bestTabContentViewForClass(constructor)
</span><span class="cx"> {
</span><span class="cx"> console.assert(!this.selectedTabContentView || this.selectedTabContentView === this._recentTabContentViews[0]);
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineView.js (191975 => 191976)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineView.js 2015-11-03 21:52:42 UTC (rev 191975)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineView.js 2015-11-03 21:56:35 UTC (rev 191976)
</span><span class="lines">@@ -172,26 +172,18 @@
</span><span class="cx"> return true;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- updateLayout()
</del><ins>+ filterUpdated()
</ins><span class="cx"> {
</span><del>- if (this._scheduledLayoutUpdateIdentifier) {
- cancelAnimationFrame(this._scheduledLayoutUpdateIdentifier);
- this._scheduledLayoutUpdateIdentifier = undefined;
- }
-
- // Implemented by sub-classes if needed.
</del><ins>+ this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- updateLayoutIfNeeded()
</del><ins>+ needsLayout()
</ins><span class="cx"> {
</span><del>- if (!this._scheduledLayoutUpdateIdentifier)
</del><ins>+ // FIXME: needsLayout can be removed once <https://webkit.org/b/150741> is fixed.
+ if (!this.visible)
</ins><span class="cx"> return;
</span><del>- this.updateLayout();
- }
</del><span class="cx">
</span><del>- filterUpdated()
- {
- this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
</del><ins>+ super.needsLayout();
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Protected
</span><span class="lines">@@ -247,15 +239,4 @@
</span><span class="cx">
</span><span class="cx"> this.showContentViewForTreeElement(treeElement);
</span><span class="cx"> }
</span><del>-
- needsLayout()
- {
- if (!this.visible)
- return;
-
- if (this._scheduledLayoutUpdateIdentifier)
- return;
-
- this._scheduledLayoutUpdateIdentifier = requestAnimationFrame(this.updateLayout.bind(this));
- }
</del><span class="cx"> };
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsToolbarjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Toolbar.js (191975 => 191976)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/Toolbar.js 2015-11-03 21:52:42 UTC (rev 191975)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Toolbar.js 2015-11-03 21:56:35 UTC (rev 191976)
</span><span class="lines">@@ -34,30 +34,30 @@
</span><span class="cx">
</span><span class="cx"> this._controlSectionElement = document.createElement("div");
</span><span class="cx"> this._controlSectionElement.className = WebInspector.Toolbar.ControlSectionStyleClassName;
</span><del>- this._element.appendChild(this._controlSectionElement);
</del><ins>+ this.element.appendChild(this._controlSectionElement);
</ins><span class="cx">
</span><span class="cx"> this._leftSectionElement = document.createElement("div");
</span><span class="cx"> this._leftSectionElement.className = WebInspector.Toolbar.ItemSectionStyleClassName + " " + WebInspector.Toolbar.LeftItemSectionStyleClassName;
</span><del>- this._element.appendChild(this._leftSectionElement);
</del><ins>+ this.element.appendChild(this._leftSectionElement);
</ins><span class="cx">
</span><span class="cx"> this._centerLeftSectionElement = document.createElement("div");
</span><span class="cx"> this._centerLeftSectionElement.className = WebInspector.Toolbar.ItemSectionStyleClassName + " " + WebInspector.Toolbar.CenterLeftItemSectionStyleClassName;
</span><del>- this._element.appendChild(this._centerLeftSectionElement);
</del><ins>+ this.element.appendChild(this._centerLeftSectionElement);
</ins><span class="cx">
</span><span class="cx"> this._centerSectionElement = document.createElement("div");
</span><span class="cx"> this._centerSectionElement.className = WebInspector.Toolbar.ItemSectionStyleClassName + " " + WebInspector.Toolbar.CenterItemSectionStyleClassName;
</span><del>- this._element.appendChild(this._centerSectionElement);
</del><ins>+ this.element.appendChild(this._centerSectionElement);
</ins><span class="cx">
</span><span class="cx"> this._centerRightSectionElement = document.createElement("div");
</span><span class="cx"> this._centerRightSectionElement.className = WebInspector.Toolbar.ItemSectionStyleClassName + " " + WebInspector.Toolbar.CenterRightItemSectionStyleClassName;
</span><del>- this._element.appendChild(this._centerRightSectionElement);
</del><ins>+ this.element.appendChild(this._centerRightSectionElement);
</ins><span class="cx">
</span><span class="cx"> this._rightSectionElement = document.createElement("div");
</span><span class="cx"> this._rightSectionElement.className = WebInspector.Toolbar.ItemSectionStyleClassName + " " + WebInspector.Toolbar.RightItemSectionStyleClassName;
</span><del>- this._element.appendChild(this._rightSectionElement);
</del><ins>+ this.element.appendChild(this._rightSectionElement);
</ins><span class="cx">
</span><span class="cx"> if (!dontAllowModeChanges)
</span><del>- this._element.addEventListener("contextmenu", this._handleContextMenuEvent.bind(this), false);
</del><ins>+ this.element.addEventListener("contextmenu", this._handleContextMenuEvent.bind(this), false);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Public
</span><span class="lines">@@ -73,15 +73,15 @@
</span><span class="cx"> return;
</span><span class="cx">
</span><span class="cx"> if (this._displayMode)
</span><del>- this._element.classList.remove(this._displayMode);
</del><ins>+ this.element.classList.remove(this._displayMode);
</ins><span class="cx">
</span><span class="cx"> // Revert the forced icon-only mode if it was applied.
</span><span class="cx"> if (this._displayMode === WebInspector.Toolbar.DisplayMode.IconAndLabelHorizontal)
</span><del>- this._element.classList.remove(WebInspector.Toolbar.DisplayMode.IconOnly);
</del><ins>+ this.element.classList.remove(WebInspector.Toolbar.DisplayMode.IconOnly);
</ins><span class="cx">
</span><span class="cx"> this._displayMode = mode;
</span><span class="cx">
</span><del>- this._element.classList.add(mode);
</del><ins>+ this.element.classList.add(mode);
</ins><span class="cx">
</span><span class="cx"> this.updateLayout();
</span><span class="cx">
</span><span class="lines">@@ -99,36 +99,74 @@
</span><span class="cx"> return;
</span><span class="cx">
</span><span class="cx"> if (this._sizeMode)
</span><del>- this._element.classList.remove(this._sizeMode);
</del><ins>+ this.element.classList.remove(this._sizeMode);
</ins><span class="cx">
</span><span class="cx"> this._sizeMode = mode;
</span><span class="cx">
</span><del>- this._element.classList.add(mode);
</del><ins>+ this.element.classList.add(mode);
</ins><span class="cx">
</span><span class="cx"> this.updateLayout();
</span><span class="cx">
</span><span class="cx"> this.dispatchEventToListeners(WebInspector.Toolbar.Event.SizeModeDidChange);
</span><span class="cx"> }
</span><span class="cx">
</span><del>- customUpdateLayout()
</del><ins>+ addToolbarItem(toolbarItem, sectionIdentifier)
</ins><span class="cx"> {
</span><ins>+ var sectionElement;
+
+ switch (sectionIdentifier) {
+ case WebInspector.Toolbar.Section.Control:
+ sectionElement = this._controlSectionElement;
+ break;
+
+ case WebInspector.Toolbar.Section.Left:
+ sectionElement = this._leftSectionElement;
+ break;
+
+ case WebInspector.Toolbar.Section.CenterLeft:
+ sectionElement = this._centerLeftSectionElement;
+ break;
+
+ default:
+ case WebInspector.Toolbar.Section.Center:
+ sectionElement = this._centerSectionElement;
+ break;
+
+ case WebInspector.Toolbar.Section.CenterRight:
+ sectionElement = this._centerRightSectionElement;
+ break;
+
+ case WebInspector.Toolbar.Section.Right:
+ sectionElement = this._rightSectionElement;
+ break;
+ }
+
+ console.assert(sectionElement);
+
+ this.addNavigationItem(toolbarItem, sectionElement);
+ }
+
+ // Protected
+
+ layout()
+ {
</ins><span class="cx"> // Bail early if our sections are not created yet. This means we are being called during construction.
</span><span class="cx"> if (!this._leftSectionElement || !this._centerSectionElement || !this._rightSectionElement)
</span><span class="cx"> return;
</span><span class="cx">
</span><span class="cx"> // Force collapsed style for JavaScript debuggables.
</span><span class="cx"> if (WebInspector.debuggableType === WebInspector.DebuggableType.JavaScript) {
</span><del>- this._element.classList.add(WebInspector.NavigationBar.CollapsedStyleClassName);
</del><ins>+ this.element.classList.add(WebInspector.NavigationBar.CollapsedStyleClassName);
</ins><span class="cx"> return;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Remove the collapsed style class to test if the items can fit at full width.
</span><del>- this._element.classList.remove(WebInspector.NavigationBar.CollapsedStyleClassName);
</del><ins>+ this.element.classList.remove(WebInspector.NavigationBar.CollapsedStyleClassName);
</ins><span class="cx">
</span><span class="cx"> // Revert the forced icon-only mode if it was applied.
</span><span class="cx"> if (this._displayMode === WebInspector.Toolbar.DisplayMode.IconAndLabelHorizontal) {
</span><del>- this._element.classList.remove(WebInspector.Toolbar.DisplayMode.IconOnly);
- this._element.classList.add(WebInspector.Toolbar.DisplayMode.IconAndLabelHorizontal);
</del><ins>+ this.element.classList.remove(WebInspector.Toolbar.DisplayMode.IconOnly);
+ this.element.classList.add(WebInspector.Toolbar.DisplayMode.IconAndLabelHorizontal);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> function isOverflowingToolbar()
</span><span class="lines">@@ -147,52 +185,16 @@
</span><span class="cx"> // Only the horizontal display mode supports collapsing labels.
</span><span class="cx"> // If any sections are overflowing the toolbar then force the display mode to be icon only.
</span><span class="cx"> if (this._displayMode === WebInspector.Toolbar.DisplayMode.IconAndLabelHorizontal && isOverflowingToolbar.call(this)) {
</span><del>- this._element.classList.remove(WebInspector.Toolbar.DisplayMode.IconAndLabelHorizontal);
- this._element.classList.add(WebInspector.Toolbar.DisplayMode.IconOnly);
</del><ins>+ this.element.classList.remove(WebInspector.Toolbar.DisplayMode.IconAndLabelHorizontal);
+ this.element.classList.add(WebInspector.Toolbar.DisplayMode.IconOnly);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> if (!isOverflowingToolbar.call(this))
</span><span class="cx"> return;
</span><span class="cx">
</span><del>- this._element.classList.add(WebInspector.NavigationBar.CollapsedStyleClassName);
</del><ins>+ this.element.classList.add(WebInspector.NavigationBar.CollapsedStyleClassName);
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- addToolbarItem(toolbarItem, sectionIdentifier)
- {
- var sectionElement;
-
- switch (sectionIdentifier) {
- case WebInspector.Toolbar.Section.Control:
- sectionElement = this._controlSectionElement;
- break;
-
- case WebInspector.Toolbar.Section.Left:
- sectionElement = this._leftSectionElement;
- break;
-
- case WebInspector.Toolbar.Section.CenterLeft:
- sectionElement = this._centerLeftSectionElement;
- break;
-
- default:
- case WebInspector.Toolbar.Section.Center:
- sectionElement = this._centerSectionElement;
- break;
-
- case WebInspector.Toolbar.Section.CenterRight:
- sectionElement = this._centerRightSectionElement;
- break;
-
- case WebInspector.Toolbar.Section.Right:
- sectionElement = this._rightSectionElement;
- break;
- }
-
- console.assert(sectionElement);
-
- this.addNavigationItem(toolbarItem, sectionElement);
- }
-
</del><span class="cx"> // Private
</span><span class="cx">
</span><span class="cx"> _handleContextMenuEvent(event)
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsViewjs"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Views/View.js (0 => 191976)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/View.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/View.js 2015-11-03 21:56:35 UTC (rev 191976)
</span><span class="lines">@@ -0,0 +1,143 @@
</span><ins>+/*
+ * Copyright (C) 2015 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.View = class View extends WebInspector.Object
+{
+ constructor(element)
+ {
+ super();
+
+ this._element = element || document.createElement("div");
+ this._element.__view = this;
+ this._subviews = [];
+ }
+
+ // Public
+
+ get element()
+ {
+ return this._element;
+ }
+
+ get subviews()
+ {
+ return this._subviews;
+ }
+
+ addSubview(view)
+ {
+ this.insertSubviewBefore(view, null);
+ }
+
+ insertSubviewBefore(view, referenceView)
+ {
+ console.assert(view instanceof WebInspector.View);
+ console.assert(!referenceView || referenceView instanceof WebInspector.View);
+
+ if (this._subviews.includes(view)) {
+ console.assert(false, "Cannot add view that is already a subview.", view);
+ return;
+ }
+
+ const beforeIndex = referenceView ? this._subviews.indexOf(referenceView) : this._subviews.length;
+ if (beforeIndex === -1) {
+ console.assert(false, "Cannot insert view. Invalid reference view.", referenceView);
+ return;
+ }
+
+ this._subviews.insertAtIndex(view, beforeIndex);
+ this._element.insertBefore(view.element, referenceView ? referenceView.element : null);
+ }
+
+ removeSubview(view)
+ {
+ console.assert(view instanceof WebInspector.View);
+ console.assert(view.element.parentNode === this._element, "Subview DOM element must be a child of the parent view element.");
+
+ if (!this._subviews.includes(view)) {
+ console.assert(false, "Cannot remove view which isn't a subview.", view);
+ return;
+ }
+
+ this._subviews.remove(view, true);
+ this._element.removeChild(view.element);
+ }
+
+ replaceSubview(oldView, newView)
+ {
+ console.assert(oldView !== newView, "Cannot replace subview with itself.");
+
+ this.insertSubviewBefore(newView, oldView);
+ this.removeSubview(oldView);
+ }
+
+ updateLayout()
+ {
+ this._layoutSubtree();
+ }
+
+ updateLayoutIfNeeded()
+ {
+ if (!this._scheduledLayoutUpdateIdentifier)
+ return;
+
+ this.updateLayout();
+ }
+
+ needsLayout()
+ {
+ if (this._scheduledLayoutUpdateIdentifier)
+ return;
+
+ this._scheduledLayoutUpdateIdentifier = requestAnimationFrame(() => {
+ this._scheduledLayoutUpdateIdentifier = undefined;
+ this._layoutSubtree();
+ });
+ }
+
+ // Protected
+
+ layout()
+ {
+ // Overridden by subclasses.
+ // Not responsible for recursing to child views.
+ // Should not be called directly; use updateLayout() instead.
+ }
+
+ // Private
+
+ _layoutSubtree()
+ {
+ if (this._scheduledLayoutUpdateIdentifier) {
+ cancelAnimationFrame(this._scheduledLayoutUpdateIdentifier);
+ this._scheduledLayoutUpdateIdentifier = undefined;
+ }
+
+ this.layout();
+
+ for (let view of this._subviews)
+ view._layoutSubtree();
+ }
+};
</ins></span></pre>
</div>
</div>
</body>
</html>