<!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>[201245] 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/201245">201245</a></dd>
<dt>Author</dt> <dd>mattbaker@apple.com</dd>
<dt>Date</dt> <dd>2016-05-21 12:21:35 -0700 (Sat, 21 May 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>Web Inspector: Creating the CSSStyleDetailsSidebarPanel takes about 50ms (20%) of main load
https://bugs.webkit.org/show_bug.cgi?id=156707
<rdar://problem/25780404>
Reviewed by Timothy Hatcher.
This patch adds new View concepts, `initialLayout` and `widthDidChange`,
making it possible for hidden views to postpone the creation of their
UI subtree until they are shown for the first time.
Sidebar panels get this performance improvement by virtue of SidebarPanel
and StyleDetailsPanel, which trigger a layout when shown. This can be
removed once <https://webkit.org/b/150741> is fixed, and this is done
automatically by View.
* UserInterface/Views/CSSStyleDeclarationTextEditor.js:
(WebInspector.CSSStyleDeclarationTextEditor):
Should subclass View.
(WebInspector.CSSStyleDeclarationTextEditor.prototype.layout):
(WebInspector.CSSStyleDeclarationTextEditor.prototype.get element): Deleted.
Handled in View base class.
(WebInspector.CSSStyleDeclarationTextEditor.prototype.updateLayout): Deleted.
Relocate to `layout` override, ignore unused parameter `force`.
* UserInterface/Views/CSSStyleDetailsSidebarPanel.js:
(WebInspector.CSSStyleDetailsSidebarPanel):
Create the minimum required initial state and UI elements. Relocate
anything that can be lazy loaded to `initialLayout`.
(WebInspector.CSSStyleDetailsSidebarPanel.prototype.initialLayout):
(WebInspector.CSSStyleDetailsSidebarPanel.prototype.sizeDidChange):
(WebInspector.CSSStyleDetailsSidebarPanel.prototype.widthDidChange): Deleted.
* UserInterface/Views/ComputedStyleDetailsPanel.js:
(WebInspector.ComputedStyleDetailsPanel):
Relocate anything that can be lazy loaded to `initialLayout`.
(WebInspector.ComputedStyleDetailsPanel.prototype.initialLayout):
(WebInspector.ComputedStyleDetailsPanel.prototype.shown): Deleted.
(WebInspector.ComputedStyleDetailsPanel.prototype.widthDidChange): Deleted.
Handled in View base class.
* UserInterface/Views/DataGrid.js:
(WebInspector.DataGrid.prototype.layout):
Resize logic can be safely moved to `sizeDidChange`, since columns are
always initialized when the width changes.
(WebInspector.DataGrid.prototype.sizeDidChange):
Reposition headers, scrollbars.
(WebInspector.DataGrid.prototype._updateHeaderAndScrollbar):
Broke out header repositioning, which needs to be called whenever
column widths are initialized or the view size changes.
* UserInterface/Views/NavigationBar.js:
(WebInspector.NavigationBar.prototype.layout):
* UserInterface/Views/RulesStyleDetailsPanel.js:
(WebInspector.RulesStyleDetailsPanel.prototype.sizeDidChange):
(WebInspector.RulesStyleDetailsPanel.prototype.widthDidChange): Deleted.
* UserInterface/Views/Sidebar.js:
(WebInspector.Sidebar.prototype._recalculateWidth):
Width changes need to be coordinated by the View base class, since the
initial layout must have occurred before handling a width change.
Force a layout with a resize layout reason.
* UserInterface/Views/SidebarPanel.js:
(WebInspector.SidebarPanel.prototype.get displayName):
Drive-by style fix: add getter so that CSSStyleDetailsSidebarPanel
doesn't have to read the private property directly.
(WebInspector.SidebarPanel.prototype.shown):
Force a layout whenever the panel is shown.
(WebInspector.SidebarPanel.prototype.sizeDidChange):
(WebInspector.SidebarPanel):
(WebInspector.SidebarPanel.prototype.widthDidChange): Deleted.
* UserInterface/Views/StyleDetailsPanel.js:
(WebInspector.StyleDetailsPanel.prototype.shown):
Schedule a layout when shown. A forced layout isn't necessary.
Unlike SidebarPanels, the initial state of style panels doesn't depend
on its layout, and can be safely initialized by the next rAF.
(WebInspector.StyleDetailsPanel.prototype.hidden):
Cancel a pending layout if the panel is hidden before the next AF.
(WebInspector.StyleDetailsPanel.prototype.widthDidChange): Deleted.
Not needed, defined in View base class.
* UserInterface/Views/TimelineOverview.js:
(WebInspector.TimelineOverview.prototype.sizeDidChange):
(WebInspector.TimelineOverview.prototype.layout):
Moved resize logic to `sizeDidChange`.
* UserInterface/Views/TimelineRuler.js:
(WebInspector.TimelineRuler.prototype.sizeDidChange):
(WebInspector.TimelineRuler.prototype.layout):
Moved resize logic to `sizeDidChange`.
* UserInterface/Views/View.js:
(WebInspector.View):
(WebInspector.View.prototype.updateLayout):
(WebInspector.View.prototype.cancelLayout):
Allow a pending layout to be canceled. Useful when a view with a
pending layout is hidden before the layout occurs.
(WebInspector.View.prototype.get layoutReason):
Protected getter for subclasses that need to check the layout reason
outside `sizeDidChange`.
(WebInspector.View.prototype.initialLayout):
Subclass hook to create UI subtree the first time a layout occurs.
Called only once during the lifetime of the View.
(WebInspector.View.prototype.layout):
Drive-by comment fix.
(WebInspector.View.prototype.sizeDidChange):
New layout cycle hook for subclasses.
(WebInspector.View.prototype._layoutSubtree):
Do an initial layout the first time layout is called.
Call the `sizeDidChange` hook so that subclasses can update state
which depends on size/position before doing layout.
* UserInterface/Views/VisualStyleDetailsPanel.js:
(WebInspector.VisualStyleDetailsPanel):
Create the minimum required initial state and UI elements. Relocate
anything that can be lazy loaded to `initialLayout`.
(WebInspector.VisualStyleDetailsPanel.prototype.refresh):
No changes, shifting line numbers confused the diff.
(WebInspector.VisualStyleDetailsPanel.prototype.initialLayout):
(WebInspector.VisualStyleDetailsPanel.prototype.sizeDidChange):
(WebInspector.VisualStyleDetailsPanel.prototype.widthDidChange): Deleted.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDeclarationTextEditorjs">trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDetailsSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsComputedStyleDetailsPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDataGridjs">trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsNavigationBarjs">trunk/Source/WebInspectorUI/UserInterface/Views/NavigationBar.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsRulesStyleDetailsPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsSidebarjs">trunk/Source/WebInspectorUI/UserInterface/Views/Sidebar.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/SidebarPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsStyleDetailsPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/StyleDetailsPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineOverviewjs">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineRulerjs">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/View.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleDetailsPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (201244 => 201245)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2016-05-21 19:21:31 UTC (rev 201244)
+++ trunk/Source/WebInspectorUI/ChangeLog 2016-05-21 19:21:35 UTC (rev 201245)
</span><span class="lines">@@ -1,5 +1,138 @@
</span><span class="cx"> 2016-05-21 Matt Baker <mattbaker@apple.com>
</span><span class="cx">
</span><ins>+ Web Inspector: Creating the CSSStyleDetailsSidebarPanel takes about 50ms (20%) of main load
+ https://bugs.webkit.org/show_bug.cgi?id=156707
+ <rdar://problem/25780404>
+
+ Reviewed by Timothy Hatcher.
+
+ This patch adds new View concepts, `initialLayout` and `widthDidChange`,
+ making it possible for hidden views to postpone the creation of their
+ UI subtree until they are shown for the first time.
+
+ Sidebar panels get this performance improvement by virtue of SidebarPanel
+ and StyleDetailsPanel, which trigger a layout when shown. This can be
+ removed once <https://webkit.org/b/150741> is fixed, and this is done
+ automatically by View.
+
+ * UserInterface/Views/CSSStyleDeclarationTextEditor.js:
+ (WebInspector.CSSStyleDeclarationTextEditor):
+ Should subclass View.
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype.layout):
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype.get element): Deleted.
+ Handled in View base class.
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype.updateLayout): Deleted.
+ Relocate to `layout` override, ignore unused parameter `force`.
+
+ * UserInterface/Views/CSSStyleDetailsSidebarPanel.js:
+ (WebInspector.CSSStyleDetailsSidebarPanel):
+ Create the minimum required initial state and UI elements. Relocate
+ anything that can be lazy loaded to `initialLayout`.
+
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype.initialLayout):
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype.sizeDidChange):
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype.widthDidChange): Deleted.
+
+ * UserInterface/Views/ComputedStyleDetailsPanel.js:
+ (WebInspector.ComputedStyleDetailsPanel):
+ Relocate anything that can be lazy loaded to `initialLayout`.
+ (WebInspector.ComputedStyleDetailsPanel.prototype.initialLayout):
+ (WebInspector.ComputedStyleDetailsPanel.prototype.shown): Deleted.
+ (WebInspector.ComputedStyleDetailsPanel.prototype.widthDidChange): Deleted.
+ Handled in View base class.
+
+ * UserInterface/Views/DataGrid.js:
+ (WebInspector.DataGrid.prototype.layout):
+ Resize logic can be safely moved to `sizeDidChange`, since columns are
+ always initialized when the width changes.
+ (WebInspector.DataGrid.prototype.sizeDidChange):
+ Reposition headers, scrollbars.
+ (WebInspector.DataGrid.prototype._updateHeaderAndScrollbar):
+ Broke out header repositioning, which needs to be called whenever
+ column widths are initialized or the view size changes.
+
+ * UserInterface/Views/NavigationBar.js:
+ (WebInspector.NavigationBar.prototype.layout):
+
+ * UserInterface/Views/RulesStyleDetailsPanel.js:
+ (WebInspector.RulesStyleDetailsPanel.prototype.sizeDidChange):
+ (WebInspector.RulesStyleDetailsPanel.prototype.widthDidChange): Deleted.
+
+ * UserInterface/Views/Sidebar.js:
+ (WebInspector.Sidebar.prototype._recalculateWidth):
+ Width changes need to be coordinated by the View base class, since the
+ initial layout must have occurred before handling a width change.
+ Force a layout with a resize layout reason.
+
+ * UserInterface/Views/SidebarPanel.js:
+ (WebInspector.SidebarPanel.prototype.get displayName):
+ Drive-by style fix: add getter so that CSSStyleDetailsSidebarPanel
+ doesn't have to read the private property directly.
+
+ (WebInspector.SidebarPanel.prototype.shown):
+ Force a layout whenever the panel is shown.
+ (WebInspector.SidebarPanel.prototype.sizeDidChange):
+ (WebInspector.SidebarPanel):
+ (WebInspector.SidebarPanel.prototype.widthDidChange): Deleted.
+
+ * UserInterface/Views/StyleDetailsPanel.js:
+ (WebInspector.StyleDetailsPanel.prototype.shown):
+ Schedule a layout when shown. A forced layout isn't necessary.
+ Unlike SidebarPanels, the initial state of style panels doesn't depend
+ on its layout, and can be safely initialized by the next rAF.
+
+ (WebInspector.StyleDetailsPanel.prototype.hidden):
+ Cancel a pending layout if the panel is hidden before the next AF.
+ (WebInspector.StyleDetailsPanel.prototype.widthDidChange): Deleted.
+ Not needed, defined in View base class.
+
+ * UserInterface/Views/TimelineOverview.js:
+ (WebInspector.TimelineOverview.prototype.sizeDidChange):
+ (WebInspector.TimelineOverview.prototype.layout):
+ Moved resize logic to `sizeDidChange`.
+
+ * UserInterface/Views/TimelineRuler.js:
+ (WebInspector.TimelineRuler.prototype.sizeDidChange):
+ (WebInspector.TimelineRuler.prototype.layout):
+ Moved resize logic to `sizeDidChange`.
+
+ * UserInterface/Views/View.js:
+ (WebInspector.View):
+ (WebInspector.View.prototype.updateLayout):
+ (WebInspector.View.prototype.cancelLayout):
+ Allow a pending layout to be canceled. Useful when a view with a
+ pending layout is hidden before the layout occurs.
+
+ (WebInspector.View.prototype.get layoutReason):
+ Protected getter for subclasses that need to check the layout reason
+ outside `sizeDidChange`.
+
+ (WebInspector.View.prototype.initialLayout):
+ Subclass hook to create UI subtree the first time a layout occurs.
+ Called only once during the lifetime of the View.
+
+ (WebInspector.View.prototype.layout):
+ Drive-by comment fix.
+ (WebInspector.View.prototype.sizeDidChange):
+ New layout cycle hook for subclasses.
+ (WebInspector.View.prototype._layoutSubtree):
+ Do an initial layout the first time layout is called.
+ Call the `sizeDidChange` hook so that subclasses can update state
+ which depends on size/position before doing layout.
+
+ * UserInterface/Views/VisualStyleDetailsPanel.js:
+ (WebInspector.VisualStyleDetailsPanel):
+ Create the minimum required initial state and UI elements. Relocate
+ anything that can be lazy loaded to `initialLayout`.
+
+ (WebInspector.VisualStyleDetailsPanel.prototype.refresh):
+ No changes, shifting line numbers confused the diff.
+ (WebInspector.VisualStyleDetailsPanel.prototype.initialLayout):
+ (WebInspector.VisualStyleDetailsPanel.prototype.sizeDidChange):
+ (WebInspector.VisualStyleDetailsPanel.prototype.widthDidChange): Deleted.
+
+2016-05-21 Matt Baker <mattbaker@apple.com>
+
</ins><span class="cx"> Assertion Failed: StyleDetailsPanel.markAsNeedsRefresh() called with null domNode
</span><span class="cx"> https://bugs.webkit.org/show_bug.cgi?id=157955
</span><span class="cx"> <rdar://problem/26398943>
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDeclarationTextEditorjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js (201244 => 201245)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js 2016-05-21 19:21:31 UTC (rev 201244)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js 2016-05-21 19:21:35 UTC (rev 201245)
</span><span class="lines">@@ -24,17 +24,16 @@
</span><span class="cx"> * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx"> */
</span><span class="cx">
</span><del>-WebInspector.CSSStyleDeclarationTextEditor = class CSSStyleDeclarationTextEditor extends WebInspector.Object
</del><ins>+WebInspector.CSSStyleDeclarationTextEditor = class CSSStyleDeclarationTextEditor extends WebInspector.View
</ins><span class="cx"> {
</span><del>- constructor(delegate, style, element)
</del><ins>+ constructor(delegate, style)
</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(WebInspector.CSSStyleDeclarationTextEditor.StyleClassName);
- this._element.classList.add(WebInspector.SyntaxHighlightedStyleClassName);
- this._element.addEventListener("mousedown", this._handleMouseDown.bind(this));
- this._element.addEventListener("mouseup", this._handleMouseUp.bind(this));
</del><ins>+ this.element.classList.add(WebInspector.CSSStyleDeclarationTextEditor.StyleClassName);
+ this.element.classList.add(WebInspector.SyntaxHighlightedStyleClassName);
+ this.element.addEventListener("mousedown", this._handleMouseDown.bind(this));
+ this.element.addEventListener("mouseup", this._handleMouseUp.bind(this));
</ins><span class="cx">
</span><span class="cx"> this._mouseDownCursorPosition = null;
</span><span class="cx">
</span><span class="lines">@@ -93,11 +92,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">@@ -194,11 +188,6 @@
</span><span class="cx"> this._resetContent();
</span><span class="cx"> }
</span><span class="cx">
</span><del>- updateLayout(force)
- {
- this._codeMirror.refresh();
- }
-
</del><span class="cx"> highlightProperty(property)
</span><span class="cx"> {
</span><span class="cx"> function propertiesMatch(cssProperty)
</span><span class="lines">@@ -400,6 +389,11 @@
</span><span class="cx"> this._propertiesChanged();
</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"> _textAtCursorIsComment(codeMirror, cursor)
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDetailsSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js (201244 => 201245)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js 2016-05-21 19:21:31 UTC (rev 201244)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js 2016-05-21 19:21:35 UTC (rev 201245)
</span><span class="lines">@@ -30,100 +30,21 @@
</span><span class="cx"> super("css-style", WebInspector.UIString("Styles"), WebInspector.UIString("Style"), null, true);
</span><span class="cx">
</span><span class="cx"> this._selectedPanel = null;
</span><del>-
- this._forcedPseudoClassCheckboxes = {};
-
- if (WebInspector.cssStyleManager.canForcePseudoClasses()) {
- this._forcedPseudoClassContainer = document.createElement("div");
- this._forcedPseudoClassContainer.className = "pseudo-classes";
-
- let groupElement = null;
-
- WebInspector.CSSStyleManager.ForceablePseudoClasses.forEach(function(pseudoClass) {
- // We don't localize the label since it is a CSS pseudo-class from the CSS standard.
- let label = pseudoClass.capitalize();
-
- let labelElement = document.createElement("label");
-
- let checkboxElement = document.createElement("input");
- checkboxElement.addEventListener("change", this._forcedPseudoClassCheckboxChanged.bind(this, pseudoClass));
- checkboxElement.type = "checkbox";
-
- this._forcedPseudoClassCheckboxes[pseudoClass] = checkboxElement;
-
- labelElement.appendChild(checkboxElement);
- labelElement.append(label);
-
- if (!groupElement || groupElement.children.length === 2) {
- groupElement = document.createElement("div");
- groupElement.className = "group";
- this._forcedPseudoClassContainer.appendChild(groupElement);
- }
-
- groupElement.appendChild(labelElement);
- }, this);
-
- this.contentView.element.appendChild(this._forcedPseudoClassContainer);
- }
-
</del><span class="cx"> this._computedStyleDetailsPanel = new WebInspector.ComputedStyleDetailsPanel(this);
</span><span class="cx"> this._rulesStyleDetailsPanel = new WebInspector.RulesStyleDetailsPanel(this);
</span><span class="cx"> this._visualStyleDetailsPanel = new WebInspector.VisualStyleDetailsPanel(this);
</span><span class="cx">
</span><del>- this._computedStyleDetailsPanel.addEventListener(WebInspector.StyleDetailsPanel.Event.Refreshed, this._filterDidChange, this);
- this._rulesStyleDetailsPanel.addEventListener(WebInspector.StyleDetailsPanel.Event.Refreshed, this._filterDidChange, this);
-
</del><span class="cx"> this._panels = [this._computedStyleDetailsPanel, this._rulesStyleDetailsPanel, this._visualStyleDetailsPanel];
</span><span class="cx"> this._panelNavigationInfo = [this._computedStyleDetailsPanel.navigationInfo, this._rulesStyleDetailsPanel.navigationInfo, this._visualStyleDetailsPanel.navigationInfo];
</span><span class="cx">
</span><span class="cx"> this._lastSelectedSectionSetting = new WebInspector.Setting("last-selected-style-details-panel", this._rulesStyleDetailsPanel.navigationInfo.identifier);
</span><span class="cx">
</span><del>- let selectedPanel = this._panelMatchingIdentifier(this._lastSelectedSectionSetting.value);
- if (!selectedPanel)
- selectedPanel = this._rulesStyleDetailsPanel;
</del><ins>+ this._initiallySelectedPanel = this._panelMatchingIdentifier(this._lastSelectedSectionSetting.value) || this._rulesStyleDetailsPanel;
</ins><span class="cx">
</span><del>- this._switchPanels(selectedPanel);
-
- this._navigationItem = new WebInspector.ScopeRadioButtonNavigationItem(this._identifier, this._displayName, this._panelNavigationInfo, selectedPanel.navigationInfo);
</del><ins>+ this._navigationItem = new WebInspector.ScopeRadioButtonNavigationItem(this.identifier, this.displayName, this._panelNavigationInfo, this._initiallySelectedPanel.navigationInfo);
</ins><span class="cx"> this._navigationItem.addEventListener(WebInspector.ScopeRadioButtonNavigationItem.Event.SelectedItemChanged, this._handleSelectedItemChanged, this);
</span><span class="cx">
</span><del>- let optionsContainer = this.element.createChild("div", "options-container");
-
- let newRuleButton = optionsContainer.createChild("img", "new-rule");
- newRuleButton.title = WebInspector.UIString("New Rule");
- newRuleButton.addEventListener("click", this._newRuleButtonClicked.bind(this));
-
- this._filterBar = new WebInspector.FilterBar;
- this._filterBar.placeholder = WebInspector.UIString("Filter Styles");
- this._filterBar.addEventListener(WebInspector.FilterBar.Event.FilterDidChange, this._filterDidChange, this);
- optionsContainer.appendChild(this._filterBar.element);
-
- this._classToggleButton = optionsContainer.createChild("button", "toggle-class-toggle");
- this._classToggleButton.textContent = WebInspector.UIString("Classes");
- this._classToggleButton.title = WebInspector.UIString("Toggle Classes");
- this._classToggleButton.addEventListener("click", this._classToggleButtonClicked.bind(this));
-
- this._classListContainer = this.element.createChild("div", "class-list-container");
- this._classListContainer.hidden = true;
-
- this._addClassContainer = this._classListContainer.createChild("div", "new-class");
- this._addClassContainer.title = WebInspector.UIString("Add a Class");
- this._addClassContainer.addEventListener("click", this._addClassContainerClicked.bind(this));
-
- let addClassCheckbox = this._addClassContainer.createChild("input");
- addClassCheckbox.type = "checkbox";
- addClassCheckbox.checked = true;
-
- let addClassIcon = useSVGSymbol("Images/Plus13.svg", "add-class-icon");
- this._addClassContainer.appendChild(addClassIcon);
-
- this._addClassInput = this._addClassContainer.createChild("input", "class-name-input");
- this._addClassInput.setAttribute("placeholder", WebInspector.UIString("Enter Class Name"));
- this._addClassInput.addEventListener("keypress", this._addClassInputKeyPressed.bind(this));
- this._addClassInput.addEventListener("blur", this._addClassInputBlur.bind(this));
-
- WebInspector.cssStyleManager.addEventListener(WebInspector.CSSStyleManager.Event.StyleSheetAdded, this.refresh, this);
- WebInspector.cssStyleManager.addEventListener(WebInspector.CSSStyleManager.Event.StyleSheetRemoved, this.refresh, this);
</del><ins>+ this._forcedPseudoClassCheckboxes = {};
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Public
</span><span class="lines">@@ -170,16 +91,6 @@
</span><span class="cx"> this._selectedPanel.markAsNeedsRefresh(this.domNode);
</span><span class="cx"> }
</span><span class="cx">
</span><del>- widthDidChange()
- {
- super.widthDidChange();
-
- this._updateNoForcedPseudoClassesScrollOffset();
-
- if (this._selectedPanel)
- this._selectedPanel.widthDidChange();
- }
-
</del><span class="cx"> computedStyleDetailsPanelShowProperty(property)
</span><span class="cx"> {
</span><span class="cx"> this._rulesStyleDetailsPanel.scrollToSectionAndHighlightProperty(property);
</span><span class="lines">@@ -210,6 +121,98 @@
</span><span class="cx"> effectiveDOMNode.removeEventListener(null, null, this);
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ initialLayout()
+ {
+ if (WebInspector.cssStyleManager.canForcePseudoClasses()) {
+ this._forcedPseudoClassContainer = document.createElement("div");
+ this._forcedPseudoClassContainer.className = "pseudo-classes";
+
+ let groupElement = null;
+
+ WebInspector.CSSStyleManager.ForceablePseudoClasses.forEach(function(pseudoClass) {
+ // We don't localize the label since it is a CSS pseudo-class from the CSS standard.
+ let label = pseudoClass.capitalize();
+
+ let labelElement = document.createElement("label");
+
+ let checkboxElement = document.createElement("input");
+ checkboxElement.addEventListener("change", this._forcedPseudoClassCheckboxChanged.bind(this, pseudoClass));
+ checkboxElement.type = "checkbox";
+
+ this._forcedPseudoClassCheckboxes[pseudoClass] = checkboxElement;
+
+ labelElement.appendChild(checkboxElement);
+ labelElement.append(label);
+
+ if (!groupElement || groupElement.children.length === 2) {
+ groupElement = document.createElement("div");
+ groupElement.className = "group";
+ this._forcedPseudoClassContainer.appendChild(groupElement);
+ }
+
+ groupElement.appendChild(labelElement);
+ }, this);
+
+ this.contentView.element.appendChild(this._forcedPseudoClassContainer);
+ }
+
+ this._computedStyleDetailsPanel.addEventListener(WebInspector.StyleDetailsPanel.Event.Refreshed, this._filterDidChange, this);
+ this._rulesStyleDetailsPanel.addEventListener(WebInspector.StyleDetailsPanel.Event.Refreshed, this._filterDidChange, this);
+
+ console.assert(this._initiallySelectedPanel, "Should have an initially selected panel.");
+
+ this._switchPanels(this._initiallySelectedPanel);
+ this._initiallySelectedPanel = null;
+
+ let optionsContainer = this.element.createChild("div", "options-container");
+
+ let newRuleButton = optionsContainer.createChild("img", "new-rule");
+ newRuleButton.title = WebInspector.UIString("New Rule");
+ newRuleButton.addEventListener("click", this._newRuleButtonClicked.bind(this));
+
+ this._filterBar = new WebInspector.FilterBar;
+ this._filterBar.placeholder = WebInspector.UIString("Filter Styles");
+ this._filterBar.addEventListener(WebInspector.FilterBar.Event.FilterDidChange, this._filterDidChange, this);
+ optionsContainer.appendChild(this._filterBar.element);
+
+ this._classToggleButton = optionsContainer.createChild("button", "toggle-class-toggle");
+ this._classToggleButton.textContent = WebInspector.UIString("Classes");
+ this._classToggleButton.title = WebInspector.UIString("Toggle Classes");
+ this._classToggleButton.addEventListener("click", this._classToggleButtonClicked.bind(this));
+
+ this._classListContainer = this.element.createChild("div", "class-list-container");
+ this._classListContainer.hidden = true;
+
+ this._addClassContainer = this._classListContainer.createChild("div", "new-class");
+ this._addClassContainer.title = WebInspector.UIString("Add a Class");
+ this._addClassContainer.addEventListener("click", this._addClassContainerClicked.bind(this));
+
+ let addClassCheckbox = this._addClassContainer.createChild("input");
+ addClassCheckbox.type = "checkbox";
+ addClassCheckbox.checked = true;
+
+ let addClassIcon = useSVGSymbol("Images/Plus13.svg", "add-class-icon");
+ this._addClassContainer.appendChild(addClassIcon);
+
+ this._addClassInput = this._addClassContainer.createChild("input", "class-name-input");
+ this._addClassInput.setAttribute("placeholder", WebInspector.UIString("Enter Class Name"));
+ this._addClassInput.addEventListener("keypress", this._addClassInputKeyPressed.bind(this));
+ this._addClassInput.addEventListener("blur", this._addClassInputBlur.bind(this));
+
+ WebInspector.cssStyleManager.addEventListener(WebInspector.CSSStyleManager.Event.StyleSheetAdded, this.refresh, this);
+ WebInspector.cssStyleManager.addEventListener(WebInspector.CSSStyleManager.Event.StyleSheetRemoved, this.refresh, this);
+ }
+
+ sizeDidChange()
+ {
+ super.sizeDidChange();
+
+ this._updateNoForcedPseudoClassesScrollOffset();
+
+ if (this._selectedPanel)
+ this._selectedPanel.sizeDidChange();
+ }
+
</ins><span class="cx"> // Private
</span><span class="cx">
</span><span class="cx"> get _initialScrollOffset()
</span><span class="lines">@@ -458,7 +461,7 @@
</span><span class="cx"> }
</span><span class="cx"> };
</span><span class="cx">
</span><del>-WebInspector.CSSStyleDetailsSidebarPanel.NoForcedPseudoClassesScrollOffset = 30; // Default height of the forced pseudo classes container. Updated in widthDidChange.
</del><ins>+WebInspector.CSSStyleDetailsSidebarPanel.NoForcedPseudoClassesScrollOffset = 30; // Default height of the forced pseudo classes container. Updated in sizeDidChange.
</ins><span class="cx"> WebInspector.CSSStyleDetailsSidebarPanel.FilterInProgressClassName = "filter-in-progress";
</span><span class="cx"> WebInspector.CSSStyleDetailsSidebarPanel.FilterMatchingSectionHasLabelClassName = "filter-section-has-label";
</span><span class="cx"> WebInspector.CSSStyleDetailsSidebarPanel.FilterMatchSectionClassName = "filter-matching";
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsComputedStyleDetailsPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js (201244 => 201245)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js 2016-05-21 19:21:31 UTC (rev 201244)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js 2016-05-21 19:21:35 UTC (rev 201245)
</span><span class="lines">@@ -30,72 +30,6 @@
</span><span class="cx"> super(delegate, WebInspector.ComputedStyleDetailsPanel.StyleClassName, "computed", WebInspector.UIString("Styles \u2014 Computed"));
</span><span class="cx">
</span><span class="cx"> this._computedStyleShowAllSetting = new WebInspector.Setting("computed-style-show-all", false);
</span><del>-
- var computedStyleShowAllLabel = document.createElement("label");
- computedStyleShowAllLabel.textContent = WebInspector.UIString("Show All");
-
- this._computedStyleShowAllCheckbox = document.createElement("input");
- this._computedStyleShowAllCheckbox.type = "checkbox";
- this._computedStyleShowAllCheckbox.checked = this._computedStyleShowAllSetting.value;
- this._computedStyleShowAllCheckbox.addEventListener("change", this._computedStyleShowAllCheckboxValueChanged.bind(this));
- computedStyleShowAllLabel.appendChild(this._computedStyleShowAllCheckbox);
-
- this._propertiesTextEditor = new WebInspector.CSSStyleDeclarationTextEditor(this);
- this._propertiesTextEditor.showsImplicitProperties = this._computedStyleShowAllSetting.value;
- this._propertiesTextEditor.alwaysShowPropertyNames = ["display", "width", "height"];
- this._propertiesTextEditor.sortProperties = true;
-
- var propertiesRow = new WebInspector.DetailsSectionRow;
- var propertiesGroup = new WebInspector.DetailsSectionGroup([propertiesRow]);
- var propertiesSection = new WebInspector.DetailsSection("computed-style-properties", WebInspector.UIString("Properties"), [propertiesGroup], computedStyleShowAllLabel);
- propertiesSection.addEventListener(WebInspector.DetailsSection.Event.CollapsedStateChanged, this._handleCollapsedStateChanged, this);
-
- propertiesRow.element.appendChild(this._propertiesTextEditor.element);
-
- // Region flow name is used to display the "flow-from" property of the Region Containers.
- this._regionFlowFragment = document.createElement("span");
- this._regionFlowFragment.appendChild(document.createElement("img")).className = "icon";
- this._regionFlowNameLabelValue = this._regionFlowFragment.appendChild(document.createElement("span"));
-
- var goToRegionFlowButton = this._regionFlowFragment.appendChild(WebInspector.createGoToArrowButton());
- goToRegionFlowButton.addEventListener("click", this._goToRegionFlowArrowWasClicked.bind(this));
-
- this._regionFlowNameRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Region Flow"));
- this._regionFlowNameRow.element.classList.add("content-flow-link");
-
- // Content flow name is used to display the "flow-into" property of the Content nodes.
- this._contentFlowFragment = document.createElement("span");
- this._contentFlowFragment.appendChild(document.createElement("img")).className = "icon";
- this._contentFlowNameLabelValue = this._contentFlowFragment.appendChild(document.createElement("span"));
-
- var goToContentFlowButton = this._contentFlowFragment.appendChild(WebInspector.createGoToArrowButton());
- goToContentFlowButton.addEventListener("click", this._goToContentFlowArrowWasClicked.bind(this));
-
- this._contentFlowNameRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Content Flow"));
- this._contentFlowNameRow.element.classList.add("content-flow-link");
-
- var flowNamesGroup = new WebInspector.DetailsSectionGroup([this._regionFlowNameRow, this._contentFlowNameRow]);
- this._flowNamesSection = new WebInspector.DetailsSection("content-flow", WebInspector.UIString("Flows"), [flowNamesGroup]);
-
- this._containerRegionsDataGrid = new WebInspector.DOMTreeDataGrid;
- this._containerRegionsDataGrid.element.classList.add("no-header");
-
- var containerRegionsRow = new WebInspector.DetailsSectionDataGridRow(this._containerRegionsDataGrid);
- var containerRegionsGroup = new WebInspector.DetailsSectionGroup([containerRegionsRow]);
- this._containerRegionsFlowSection = new WebInspector.DetailsSection("container-regions", WebInspector.UIString("Container Regions"), [containerRegionsGroup]);
-
- this.element.appendChild(propertiesSection.element);
- this.element.appendChild(this._flowNamesSection.element);
- this.element.appendChild(this._containerRegionsFlowSection.element);
-
- this._resetFlowDetails();
-
- this._boxModelDiagramRow = new WebInspector.BoxModelDetailsSectionRow;
-
- var boxModelGroup = new WebInspector.DetailsSectionGroup([this._boxModelDiagramRow]);
- var boxModelSection = new WebInspector.DetailsSection("style-box-model", WebInspector.UIString("Box Model"), [boxModelGroup]);
-
- this.element.appendChild(boxModelSection.element);
</del><span class="cx">
</span><span class="cx"> this.cssStyleDeclarationTextEditorShouldAddPropertyGoToArrows = true;
</span><span class="cx"> }
</span><span class="lines">@@ -207,16 +141,75 @@
</span><span class="cx">
</span><span class="cx"> // Protected
</span><span class="cx">
</span><del>- shown()
</del><ins>+ initialLayout()
</ins><span class="cx"> {
</span><del>- super.shown();
</del><ins>+ let computedStyleShowAllLabel = document.createElement("label");
+ computedStyleShowAllLabel.textContent = WebInspector.UIString("Show All");
</ins><span class="cx">
</span><del>- this._propertiesTextEditor.updateLayout();
- }
</del><ins>+ this._computedStyleShowAllCheckbox = document.createElement("input");
+ this._computedStyleShowAllCheckbox.type = "checkbox";
+ this._computedStyleShowAllCheckbox.checked = this._computedStyleShowAllSetting.value;
+ this._computedStyleShowAllCheckbox.addEventListener("change", this._computedStyleShowAllCheckboxValueChanged.bind(this));
+ computedStyleShowAllLabel.appendChild(this._computedStyleShowAllCheckbox);
</ins><span class="cx">
</span><del>- widthDidChange()
- {
- this._propertiesTextEditor.updateLayout();
</del><ins>+ this._propertiesTextEditor = new WebInspector.CSSStyleDeclarationTextEditor(this);
+ this._propertiesTextEditor.showsImplicitProperties = this._computedStyleShowAllSetting.value;
+ this._propertiesTextEditor.alwaysShowPropertyNames = ["display", "width", "height"];
+ this._propertiesTextEditor.sortProperties = true;
+
+ let propertiesRow = new WebInspector.DetailsSectionRow;
+ let propertiesGroup = new WebInspector.DetailsSectionGroup([propertiesRow]);
+ let propertiesSection = new WebInspector.DetailsSection("computed-style-properties", WebInspector.UIString("Properties"), [propertiesGroup], computedStyleShowAllLabel);
+ propertiesSection.addEventListener(WebInspector.DetailsSection.Event.CollapsedStateChanged, this._handleCollapsedStateChanged, this);
+
+ this.addSubview(this._propertiesTextEditor);
+
+ propertiesRow.element.appendChild(this._propertiesTextEditor.element);
+
+ // Region flow name is used to display the "flow-from" property of the Region Containers.
+ this._regionFlowFragment = document.createElement("span");
+ this._regionFlowFragment.appendChild(document.createElement("img")).className = "icon";
+ this._regionFlowNameLabelValue = this._regionFlowFragment.appendChild(document.createElement("span"));
+
+ let goToRegionFlowButton = this._regionFlowFragment.appendChild(WebInspector.createGoToArrowButton());
+ goToRegionFlowButton.addEventListener("click", this._goToRegionFlowArrowWasClicked.bind(this));
+
+ this._regionFlowNameRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Region Flow"));
+ this._regionFlowNameRow.element.classList.add("content-flow-link");
+
+ // Content flow name is used to display the "flow-into" property of the Content nodes.
+ this._contentFlowFragment = document.createElement("span");
+ this._contentFlowFragment.appendChild(document.createElement("img")).className = "icon";
+ this._contentFlowNameLabelValue = this._contentFlowFragment.appendChild(document.createElement("span"));
+
+ let goToContentFlowButton = this._contentFlowFragment.appendChild(WebInspector.createGoToArrowButton());
+ goToContentFlowButton.addEventListener("click", this._goToContentFlowArrowWasClicked.bind(this));
+
+ this._contentFlowNameRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Content Flow"));
+ this._contentFlowNameRow.element.classList.add("content-flow-link");
+
+ let flowNamesGroup = new WebInspector.DetailsSectionGroup([this._regionFlowNameRow, this._contentFlowNameRow]);
+ this._flowNamesSection = new WebInspector.DetailsSection("content-flow", WebInspector.UIString("Flows"), [flowNamesGroup]);
+
+ this._containerRegionsDataGrid = new WebInspector.DOMTreeDataGrid;
+ this._containerRegionsDataGrid.element.classList.add("no-header");
+
+ let containerRegionsRow = new WebInspector.DetailsSectionDataGridRow(this._containerRegionsDataGrid);
+ let containerRegionsGroup = new WebInspector.DetailsSectionGroup([containerRegionsRow]);
+ this._containerRegionsFlowSection = new WebInspector.DetailsSection("container-regions", WebInspector.UIString("Container Regions"), [containerRegionsGroup]);
+
+ this.element.appendChild(propertiesSection.element);
+ this.element.appendChild(this._flowNamesSection.element);
+ this.element.appendChild(this._containerRegionsFlowSection.element);
+
+ this._resetFlowDetails();
+
+ this._boxModelDiagramRow = new WebInspector.BoxModelDetailsSectionRow;
+
+ let boxModelGroup = new WebInspector.DetailsSectionGroup([this._boxModelDiagramRow]);
+ let boxModelSection = new WebInspector.DetailsSection("style-box-model", WebInspector.UIString("Box Model"), [boxModelGroup]);
+
+ this.element.appendChild(boxModelSection.element);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Private
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDataGridjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.js (201244 => 201245)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.js 2016-05-21 19:21:31 UTC (rev 201244)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.js 2016-05-21 19:21:35 UTC (rev 201245)
</span><span class="lines">@@ -792,54 +792,58 @@
</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>- layout(layoutReason)
</del><ins>+ layout()
</ins><span class="cx"> {
</span><del>- let firstUpdate = false;
-
</del><span class="cx"> // Do not attempt to use offsets if we're not attached to the document tree yet.
</span><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="cx"> // their widths, all the other columns already have percent values
</span><span class="cx"> // for their widths.
</span><del>- var headerTableColumnElements = this._headerTableColumnGroupElement.children;
- var tableWidth = this._dataTableElement.offsetWidth;
- var numColumns = headerTableColumnElements.length;
- var cells = this._headerTableBodyElement.rows[0].cells;
</del><ins>+ let headerTableColumnElements = this._headerTableColumnGroupElement.children;
+ let tableWidth = this._dataTableElement.offsetWidth;
+ let numColumns = headerTableColumnElements.length;
+ let cells = this._headerTableBodyElement.rows[0].cells;
</ins><span class="cx">
</span><span class="cx"> // Calculate widths.
</span><del>- var columnWidths = [];
- for (var i = 0; i < numColumns; ++i) {
- var headerCellElement = cells[i];
</del><ins>+ let columnWidths = [];
+ for (let i = 0; i < numColumns; ++i) {
+ let headerCellElement = cells[i];
</ins><span class="cx"> if (this._isColumnVisible(headerCellElement.columnIdentifier)) {
</span><del>- var columnWidth = headerCellElement.offsetWidth;
- var percentWidth = ((columnWidth / tableWidth) * 100) + "%";
</del><ins>+ let columnWidth = headerCellElement.offsetWidth;
+ let percentWidth = ((columnWidth / tableWidth) * 100) + "%";
</ins><span class="cx"> columnWidths.push(percentWidth);
</span><span class="cx"> } else
</span><span class="cx"> columnWidths.push(0);
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Apply widths.
</span><del>- for (var i = 0; i < numColumns; i++) {
</del><ins>+ for (let i = 0; i < numColumns; i++) {
</ins><span class="cx"> let percentWidth = columnWidths[i];
</span><span class="cx"> this._headerTableColumnGroupElement.children[i].style.width = percentWidth;
</span><span class="cx"> this._dataTableColumnGroupElement.children[i].style.width = percentWidth;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> this._columnWidthsInitialized = true;
</span><del>- firstUpdate = true;
</del><ins>+ this._updateHeaderAndScrollbar();
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- if (layoutReason === WebInspector.View.LayoutReason.Resize || firstUpdate) {
- this._positionResizerElements();
- this._positionHeaderViews();
- this._updateScrollbarPadding();
</del><ins>+ this._updateVisibleRows();
+ }
</ins><span class="cx">
</span><del>- this._cachedScrollTop = NaN;
- this._cachedScrollableOffsetHeight = NaN;
- }
</del><ins>+ sizeDidChange()
+ {
+ this._updateHeaderAndScrollbar();
+ }
</ins><span class="cx">
</span><del>- this._updateVisibleRows();
</del><ins>+ _updateHeaderAndScrollbar()
+ {
+ this._positionResizerElements();
+ this._positionHeaderViews();
+ this._updateScrollbarPadding();
+
+ this._cachedScrollTop = NaN;
+ this._cachedScrollableOffsetHeight = NaN;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> columnWidthsMap()
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsNavigationBarjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NavigationBar.js (201244 => 201245)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/NavigationBar.js 2016-05-21 19:21:31 UTC (rev 201244)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NavigationBar.js 2016-05-21 19:21:35 UTC (rev 201245)
</span><span class="lines">@@ -168,9 +168,9 @@
</span><span class="cx"> super.needsLayout();
</span><span class="cx"> }
</span><span class="cx">
</span><del>- layout(layoutReason)
</del><ins>+ layout()
</ins><span class="cx"> {
</span><del>- if (layoutReason !== WebInspector.View.LayoutReason.Resize && !this._forceLayout)
</del><ins>+ if (this.layoutReason !== WebInspector.View.LayoutReason.Resize && !this._forceLayout)
</ins><span class="cx"> return;
</span><span class="cx">
</span><span class="cx"> this._forceLayout = false;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsRulesStyleDetailsPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js (201244 => 201245)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js 2016-05-21 19:21:31 UTC (rev 201244)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js 2016-05-21 19:21:35 UTC (rev 201245)
</span><span class="lines">@@ -452,7 +452,7 @@
</span><span class="cx"> delete this._sections[i].style.__rulesSection;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- widthDidChange()
</del><ins>+ sizeDidChange()
</ins><span class="cx"> {
</span><span class="cx"> for (var i = 0; i < this._sections.length; ++i)
</span><span class="cx"> this._sections[i].updateLayout();
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsSidebarjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Sidebar.js (201244 => 201245)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/Sidebar.js 2016-05-21 19:21:31 UTC (rev 201244)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Sidebar.js 2016-05-21 19:21:35 UTC (rev 201245)
</span><span class="lines">@@ -273,7 +273,7 @@
</span><span class="cx"> this._navigationBar.needsLayout();
</span><span class="cx">
</span><span class="cx"> if (!this.collapsed && this._selectedSidebarPanel)
</span><del>- this._selectedSidebarPanel.widthDidChange();
</del><ins>+ this._selectedSidebarPanel.updateLayout(WebInspector.View.LayoutReason.Resize);
</ins><span class="cx">
</span><span class="cx"> this.dispatchEventToListeners(WebInspector.Sidebar.Event.WidthDidChange);
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SidebarPanel.js (201244 => 201245)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/SidebarPanel.js 2016-05-21 19:21:31 UTC (rev 201244)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SidebarPanel.js 2016-05-21 19:21:35 UTC (rev 201245)
</span><span class="lines">@@ -58,6 +58,11 @@
</span><span class="cx"> return this._contentView;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ get displayName()
+ {
+ return this._displayName;
+ }
+
</ins><span class="cx"> get visible()
</span><span class="cx"> {
</span><span class="cx"> return this.selected && this.parentSidebar && !this.parentSidebar.collapsed;
</span><span class="lines">@@ -129,6 +134,9 @@
</span><span class="cx"> {
</span><span class="cx"> this._contentView.element.scrollTop = this._savedScrollPosition;
</span><span class="cx">
</span><ins>+ // FIXME: remove once <https://webkit.org/b/150741> is fixed.
+ this.updateLayout();
+
</ins><span class="cx"> // Implemented by subclasses.
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -139,17 +147,19 @@
</span><span class="cx"> // Implemented by subclasses.
</span><span class="cx"> }
</span><span class="cx">
</span><del>- widthDidChange()
</del><ins>+ visibilityDidChange()
</ins><span class="cx"> {
</span><ins>+ // Implemented by subclasses.
+ }
+
+ // Protected
+
+ sizeDidChange()
+ {
</ins><span class="cx"> let width = this.element.realOffsetWidth;
</span><span class="cx"> if (width && width !== this._widthSetting.value)
</span><span class="cx"> this._widthSetting.value = width;
</span><span class="cx">
</span><span class="cx"> // Implemented by subclasses.
</span><span class="cx"> }
</span><del>-
- visibilityDidChange()
- {
- // Implemented by subclasses.
- }
</del><span class="cx"> };
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsStyleDetailsPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/StyleDetailsPanel.js (201244 => 201245)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/StyleDetailsPanel.js 2016-05-21 19:21:31 UTC (rev 201244)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/StyleDetailsPanel.js 2016-05-21 19:21:35 UTC (rev 201245)
</span><span class="lines">@@ -60,16 +60,16 @@
</span><span class="cx"> this._visible = true;
</span><span class="cx">
</span><span class="cx"> this._refreshNodeStyles();
</span><ins>+
+ // FIXME: remove once <https://webkit.org/b/150741> is fixed.
+ this.needsLayout();
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> hidden()
</span><span class="cx"> {
</span><span class="cx"> this._visible = false;
</span><del>- }
</del><span class="cx">
</span><del>- widthDidChange()
- {
- // Implemented by subclasses.
</del><ins>+ this.cancelLayout();
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> markAsNeedsRefresh(domNode)
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineOverviewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.js (201244 => 201245)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.js 2016-05-21 19:21:31 UTC (rev 201244)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.js 2016-05-21 19:21:35 UTC (rev 201245)
</span><span class="lines">@@ -429,11 +429,8 @@
</span><span class="cx"> return this._timelineRuler;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- layout(layoutReason)
</del><ins>+ layout()
</ins><span class="cx"> {
</span><del>- if (layoutReason === WebInspector.View.LayoutReason.Resize)
- this._cachedScrollContainerWidth = NaN;
-
</del><span class="cx"> let startTime = this._startTime;
</span><span class="cx"> let endTime = this._endTime;
</span><span class="cx"> let currentTime = this._currentTime;
</span><span class="lines">@@ -488,6 +485,11 @@
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ sizeDidChange()
+ {
+ this._cachedScrollContainerWidth = NaN;
+ }
+
</ins><span class="cx"> // Private
</span><span class="cx">
</span><span class="cx"> _updateElementWidth(element, newWidth)
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineRulerjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.js (201244 => 201245)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.js 2016-05-21 19:21:31 UTC (rev 201244)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.js 2016-05-21 19:21:35 UTC (rev 201245)
</span><span class="lines">@@ -415,11 +415,8 @@
</span><span class="cx">
</span><span class="cx"> // Protected
</span><span class="cx">
</span><del>- layout(layoutReason)
</del><ins>+ layout()
</ins><span class="cx"> {
</span><del>- if (layoutReason === WebInspector.View.LayoutReason.Resize)
- this._cachedClientWidth = this.element.clientWidth;
-
</del><span class="cx"> let visibleWidth = this._recalculate();
</span><span class="cx"> if (visibleWidth <= 0)
</span><span class="cx"> return;
</span><span class="lines">@@ -532,6 +529,11 @@
</span><span class="cx"> this._updateSelection(visibleWidth, duration);
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ sizeDidChange()
+ {
+ this._cachedClientWidth = this.element.clientWidth;
+ }
+
</ins><span class="cx"> // Private
</span><span class="cx">
</span><span class="cx"> _needsMarkerLayout()
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/View.js (201244 => 201245)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/View.js 2016-05-21 19:21:31 UTC (rev 201244)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/View.js 2016-05-21 19:21:35 UTC (rev 201245)
</span><span class="lines">@@ -38,6 +38,7 @@
</span><span class="cx"> this._needsLayoutWhenAttachedToRoot = false;
</span><span class="cx"> this._isAttachedToRoot = false;
</span><span class="cx"> this._layoutReason = null;
</span><ins>+ this._didInitialLayout = false;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Static
</span><span class="lines">@@ -140,7 +141,7 @@
</span><span class="cx">
</span><span class="cx"> updateLayout(layoutReason)
</span><span class="cx"> {
</span><del>- WebInspector.View._cancelScheduledLayoutForView(this);
</del><ins>+ this.cancelLayout();
</ins><span class="cx">
</span><span class="cx"> this._setLayoutReason(layoutReason);
</span><span class="cx"> this._layoutSubtree();
</span><span class="lines">@@ -164,8 +165,15 @@
</span><span class="cx"> WebInspector.View._scheduleLayoutForView(this);
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ cancelLayout()
+ {
+ WebInspector.View._cancelScheduledLayoutForView(this);
+ }
+
</ins><span class="cx"> // Protected
</span><span class="cx">
</span><ins>+ get layoutReason() { return this._layoutReason; }
+
</ins><span class="cx"> didMoveToWindow(isAttachedToRoot)
</span><span class="cx"> {
</span><span class="cx"> this._isAttachedToRoot = isAttachedToRoot;
</span><span class="lines">@@ -200,13 +208,30 @@
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ initialLayout()
+ {
+ // Implemented by subclasses.
+
+ // Called once when the view is shown for the first time.
+ // Views with complex DOM subtrees should create UI elements in
+ // initialLayout rather than at construction time.
+ }
+
</ins><span class="cx"> layout()
</span><span class="cx"> {
</span><del>- // Overridden by subclasses.
</del><ins>+ // Implemented by subclasses.
+
</ins><span class="cx"> // Not responsible for recursing to child views.
</span><span class="cx"> // Should not be called directly; use updateLayout() instead.
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ sizeDidChange()
+ {
+ // Implemented by subclasses.
+
+ // Called after initialLayout, and before layout.
+ }
+
</ins><span class="cx"> // Private
</span><span class="cx">
</span><span class="cx"> _layoutSubtree()
</span><span class="lines">@@ -214,8 +239,16 @@
</span><span class="cx"> this._dirty = false;
</span><span class="cx"> this._dirtyDescendantsCount = 0;
</span><span class="cx">
</span><del>- this.layout(this._layoutReason);
</del><ins>+ if (!this._didInitialLayout) {
+ this.initialLayout();
+ this._didInitialLayout = true;
+ }
</ins><span class="cx">
</span><ins>+ if (this._layoutReason === WebInspector.View.LayoutReason.Resize)
+ this.sizeDidChange();
+
+ this.layout();
+
</ins><span class="cx"> for (let view of this._subviews) {
</span><span class="cx"> view._setLayoutReason(this._layoutReason);
</span><span class="cx"> view._layoutSubtree();
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleDetailsPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js (201244 => 201245)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js 2016-05-21 19:21:31 UTC (rev 201244)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js 2016-05-21 19:21:35 UTC (rev 201245)
</span><span class="lines">@@ -54,7 +54,24 @@
</span><span class="cx"> basic: ["%"].concat(this._units.defaultsSansPercent.basic),
</span><span class="cx"> advanced: this._units.defaultsSansPercent.advanced
</span><span class="cx"> };
</span><ins>+ }
</ins><span class="cx">
</span><ins>+ // Public
+
+ refresh(significantChange)
+ {
+ if (significantChange)
+ this._selectorSection.update(this._nodeStyles);
+ else
+ this._updateSections();
+
+ super.refresh();
+ }
+
+ // Protected
+
+ initialLayout()
+ {
</ins><span class="cx"> // Selector Section
</span><span class="cx"> this._selectorSection = new WebInspector.VisualStyleSelectorSection(this);
</span><span class="cx"> this._selectorSection.addEventListener(WebInspector.VisualStyleSelectorSection.Event.SelectorChanged, this._updateSections, this);
</span><span class="lines">@@ -102,22 +119,10 @@
</span><span class="cx"> this.element.appendChild(this._sections.effects.element);
</span><span class="cx"> }
</span><span class="cx">
</span><del>- // Public
-
- refresh(significantChange)
</del><ins>+ sizeDidChange()
</ins><span class="cx"> {
</span><del>- if (significantChange)
- this._selectorSection.update(this._nodeStyles);
- else
- this._updateSections();
</del><ins>+ super.sizeDidChange();
</ins><span class="cx">
</span><del>- super.refresh();
- }
-
- widthDidChange()
- {
- super.widthDidChange();
-
</del><span class="cx"> let sidebarWidth = this.element.realOffsetWidth;
</span><span class="cx"> for (let key in this._groups) {
</span><span class="cx"> let group = this._groups[key];
</span></span></pre>
</div>
</div>
</body>
</html>