<!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>[188029] 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/188029">188029</a></dd>
<dt>Author</dt> <dd>drousso@apple.com</dd>
<dt>Date</dt> <dd>2015-08-05 23:24:09 -0700 (Wed, 05 Aug 2015)</dd>
</dl>

<h3>Log Message</h3>
<pre>Web Inspector: Move the Metrics style sidebar panel into Computed
https://bugs.webkit.org/show_bug.cgi?id=147715

Reviewed by Timothy Hatcher.

Deleted the Metrics sidebar panel and moved its contents into the Computed sidebar panel.
In addition, not hovering over the Metrics section will display the colors of each box.

* UserInterface/Main.html:
* UserInterface/Views/BoxModelDetailsSectionRow.css:
(.details-section .row.box-model :matches(.position, .margin, .border, .padding, .content)):
(.details-section .row.box-model .position):
(.details-section .row.box-model .margin):
(.details-section .row.box-model .border):
(.details-section .row.box-model .padding):
(.details-section .row.box-model :matches(.content span, .top, .right, .bottom, .left)):
(.details-section .row.box-model :matches(.right, .left)):
(.details-section .row.box-model .content): Deleted.
(.details-section .row.box-model .content span): Deleted.
(.details-section .row.box-model .left): Deleted.
(.details-section .row.box-model .right): Deleted.
(.details-section .row.box-model .top): Deleted.
(.details-section .row.box-model .bottom): Deleted.

* UserInterface/Views/BoxModelDetailsSectionRow.js:
(WebInspector.BoxModelDetailsSectionRow.prototype._highlightDOMNode):
If no metric box is hovered, apply a class to the entire section.

* UserInterface/Views/CSSStyleDetailsSidebarPanel.js:
(WebInspector.CSSStyleDetailsSidebarPanel):
Removed the usage of MetricsStyleDetailsPanel.

* UserInterface/Views/ComputedStyleDetailsPanel.css:
(.details-section.style-box-model:not(.collapsed) &gt; :matches(.header, .content)):
Give the metrics section in the Computed panel a white background.

* UserInterface/Views/ComputedStyleDetailsPanel.js:
(WebInspector.ComputedStyleDetailsPanel):
(WebInspector.ComputedStyleDetailsPanel.prototype.refresh):
Don't refresh the content unless the change is significant (without this, you cannot edit
metrics values using the arrow keys).

* UserInterface/Views/MetricsStyleDetailsPanel.js: Removed.</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceMainhtml">trunk/Source/WebInspectorUI/UserInterface/Main.html</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsBoxModelDetailsSectionRowcss">trunk/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsBoxModelDetailsSectionRowjs">trunk/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDetailsSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsComputedStyleDetailsPanelcss">trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsComputedStyleDetailsPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js</a></li>
</ul>

<h3>Removed Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsMetricsStyleDetailsPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/MetricsStyleDetailsPanel.js</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (188028 => 188029)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog        2015-08-06 06:17:59 UTC (rev 188028)
+++ trunk/Source/WebInspectorUI/ChangeLog        2015-08-06 06:24:09 UTC (rev 188029)
</span><span class="lines">@@ -1,5 +1,51 @@
</span><span class="cx"> 2015-08-05  Devin Rousso  &lt;drousso@apple.com&gt;
</span><span class="cx"> 
</span><ins>+        Web Inspector: Move the Metrics style sidebar panel into Computed
+        https://bugs.webkit.org/show_bug.cgi?id=147715
+
+        Reviewed by Timothy Hatcher.
+
+        Deleted the Metrics sidebar panel and moved its contents into the Computed sidebar panel.
+        In addition, not hovering over the Metrics section will display the colors of each box.
+
+        * UserInterface/Main.html:
+        * UserInterface/Views/BoxModelDetailsSectionRow.css:
+        (.details-section .row.box-model :matches(.position, .margin, .border, .padding, .content)):
+        (.details-section .row.box-model .position):
+        (.details-section .row.box-model .margin):
+        (.details-section .row.box-model .border):
+        (.details-section .row.box-model .padding):
+        (.details-section .row.box-model :matches(.content span, .top, .right, .bottom, .left)):
+        (.details-section .row.box-model :matches(.right, .left)):
+        (.details-section .row.box-model .content): Deleted.
+        (.details-section .row.box-model .content span): Deleted.
+        (.details-section .row.box-model .left): Deleted.
+        (.details-section .row.box-model .right): Deleted.
+        (.details-section .row.box-model .top): Deleted.
+        (.details-section .row.box-model .bottom): Deleted.
+
+        * UserInterface/Views/BoxModelDetailsSectionRow.js:
+        (WebInspector.BoxModelDetailsSectionRow.prototype._highlightDOMNode):
+        If no metric box is hovered, apply a class to the entire section.
+
+        * UserInterface/Views/CSSStyleDetailsSidebarPanel.js:
+        (WebInspector.CSSStyleDetailsSidebarPanel):
+        Removed the usage of MetricsStyleDetailsPanel.
+
+        * UserInterface/Views/ComputedStyleDetailsPanel.css:
+        (.details-section.style-box-model:not(.collapsed) &gt; :matches(.header, .content)):
+        Give the metrics section in the Computed panel a white background.
+
+        * UserInterface/Views/ComputedStyleDetailsPanel.js:
+        (WebInspector.ComputedStyleDetailsPanel):
+        (WebInspector.ComputedStyleDetailsPanel.prototype.refresh):
+        Don't refresh the content unless the change is significant (without this, you cannot edit
+        metrics values using the arrow keys).
+
+        * UserInterface/Views/MetricsStyleDetailsPanel.js: Removed.
+
+2015-08-05  Devin Rousso  &lt;drousso@apple.com&gt;
+
</ins><span class="cx">         Web Inspector: Bezier curve visual editor
</span><span class="cx">         https://bugs.webkit.org/show_bug.cgi?id=134501
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceMainhtml"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (188028 => 188029)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Main.html        2015-08-06 06:17:59 UTC (rev 188028)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html        2015-08-06 06:24:09 UTC (rev 188029)
</span><span class="lines">@@ -467,7 +467,6 @@
</span><span class="cx">     &lt;script src=&quot;Views/LinearTimelineOverview.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;Views/LogContentView.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;Views/LogTreeElement.js&quot;&gt;&lt;/script&gt;
</span><del>-    &lt;script src=&quot;Views/MetricsStyleDetailsPanel.js&quot;&gt;&lt;/script&gt;
</del><span class="cx">     &lt;script src=&quot;Views/MultipleScopeBarItem.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;Views/NavigationBar.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;Views/NetworkGridContentView.js&quot;&gt;&lt;/script&gt;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsBoxModelDetailsSectionRowcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.css (188028 => 188029)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.css        2015-08-06 06:17:59 UTC (rev 188028)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.css        2015-08-06 06:24:09 UTC (rev 188029)
</span><span class="lines">@@ -37,97 +37,68 @@
</span><span class="cx">     padding-right: 2px;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.details-section .row.box-model .position {
-    border: 1px hsl(0, 0%, 65%) dotted;
-    background-color: hsl(0, 0%, 90%);
</del><ins>+.details-section .row.box-model :matches(.position, .margin, .border, .padding, .content) {
+    border: 1px solid grey;
+    background-color: white;
</ins><span class="cx">     display: inline-block;
</span><span class="cx">     text-align: center;
</span><ins>+    vertical-align: middle;
</ins><span class="cx">     padding: 3px;
</span><span class="cx">     margin: 3px;
</span><span class="cx"> }
</span><span class="cx"> 
</span><ins>+.details-section .row.box-model .position {
+    border-style: dotted;
+}
+
</ins><span class="cx"> .details-section .row.box-model .margin {
</span><del>-    border: 1px dashed;
-    background-color: hsl(0, 0%, 90%);
-    display: inline-block;
-    text-align: center;
-    vertical-align: middle;
-    padding: 3px;
-    margin: 3px;
</del><ins>+    border-style: dashed;
+    border-color: black;
</ins><span class="cx"> }
</span><span class="cx"> 
</span><ins>+.details-section .row.box-model:not(.hovered) .margin,
</ins><span class="cx"> .details-section .row.box-model .margin.active {
</span><span class="cx">     background-color: hsla(30, 88%, 69%, 0.66);
</span><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> .details-section .row.box-model .border {
</span><del>-    border: 1px black solid;
-    background-color: hsl(0, 0%, 90%);
-    display: inline-block;
-    text-align: center;
-    vertical-align: middle;
-    padding: 3px;
-    margin: 3px;
</del><ins>+    border-color: black;
</ins><span class="cx"> }
</span><span class="cx"> 
</span><ins>+.details-section .row.box-model:not(.hovered) .border,
</ins><span class="cx"> .details-section .row.box-model .border.active {
</span><span class="cx">     background-color: hsla(44, 100%, 80%, 0.66);
</span><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> .details-section .row.box-model .padding {
</span><del>-    border: 1px grey dashed;
-    background-color: hsl(0, 0%, 90%);
-    display: inline-block;
-    text-align: center;
-    vertical-align: middle;
-    padding: 3px;
-    margin: 3px;
</del><ins>+    border-style: dashed;
</ins><span class="cx"> }
</span><span class="cx"> 
</span><ins>+.details-section .row.box-model:not(.hovered) .padding,
</ins><span class="cx"> .details-section .row.box-model .padding.active {
</span><span class="cx">     background-color: hsla(101, 37%, 62%, 0.55);
</span><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> .details-section .row.box-model .content {
</span><span class="cx">     position: static;
</span><del>-    border: 1px gray solid;
-    background-color: hsl(0, 0%, 90%);
-    display: inline-block;
-    text-align: center;
-    vertical-align: middle;
-    padding: 3px;
-    margin: 3px;
</del><span class="cx">     min-width: 80px;
</span><span class="cx">     overflow: visible;
</span><span class="cx"> }
</span><span class="cx"> 
</span><ins>+.details-section .row.box-model:not(.hovered) .content,
</ins><span class="cx"> .details-section .row.box-model .content.active {
</span><span class="cx">     background-color: hsla(208, 60%, 64%, 0.66);
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.details-section .row.box-model .content span {
-    display: inline-block;
-}
-
</del><span class="cx"> .details-section .row.box-model .editing {
</span><span class="cx">     position: relative;
</span><span class="cx">     z-index: 100;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.details-section .row.box-model .left {
</del><ins>+.details-section .row.box-model :matches(.content span, .top, .right, .bottom, .left) {
</ins><span class="cx">     display: inline-block;
</span><del>-    vertical-align: middle;
</del><span class="cx"> }
</span><span class="cx"> 
</span><del>-.details-section .row.box-model .right {
-    display: inline-block;
</del><ins>+.details-section .row.box-model :matches(.right, .left) {
</ins><span class="cx">     vertical-align: middle;
</span><span class="cx"> }
</span><del>-
-.details-section .row.box-model .top {
-    display: inline-block;
-}
-
-.details-section .row.box-model .bottom {
-    display: inline-block;
-}
</del></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsBoxModelDetailsSectionRowjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.js (188028 => 188029)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.js        2015-08-06 06:17:59 UTC (rev 188028)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.js        2015-08-06 06:24:09 UTC (rev 188029)
</span><span class="lines">@@ -97,6 +97,8 @@
</span><span class="cx">             else
</span><span class="cx">                 element.classList.remove(&quot;active&quot;);
</span><span class="cx">         }
</span><ins>+
+        this.element.classList.toggle(&quot;hovered&quot;, showHighlight);
</ins><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     _updateMetrics()
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDetailsSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js (188028 => 188029)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js        2015-08-06 06:17:59 UTC (rev 188028)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js        2015-08-06 06:24:09 UTC (rev 188029)
</span><span class="lines">@@ -68,13 +68,12 @@
</span><span class="cx"> 
</span><span class="cx">         this._computedStyleDetailsPanel = new WebInspector.ComputedStyleDetailsPanel(this);
</span><span class="cx">         this._rulesStyleDetailsPanel = new WebInspector.RulesStyleDetailsPanel(this);
</span><del>-        this._metricsStyleDetailsPanel = new WebInspector.MetricsStyleDetailsPanel(this);
</del><span class="cx"> 
</span><span class="cx">         this._computedStyleDetailsPanel.addEventListener(WebInspector.StyleDetailsPanel.Event.Refreshed, this._filterDidChange, this);
</span><span class="cx">         this._rulesStyleDetailsPanel.addEventListener(WebInspector.StyleDetailsPanel.Event.Refreshed, this._filterDidChange, this);
</span><span class="cx"> 
</span><del>-        this._panels = [this._computedStyleDetailsPanel, this._rulesStyleDetailsPanel, this._metricsStyleDetailsPanel];
-        this._panelNavigationInfo = [this._computedStyleDetailsPanel.navigationInfo, this._rulesStyleDetailsPanel.navigationInfo, this._metricsStyleDetailsPanel.navigationInfo];
</del><ins>+        this._panels = [this._computedStyleDetailsPanel, this._rulesStyleDetailsPanel];
+        this._panelNavigationInfo = [this._computedStyleDetailsPanel.navigationInfo, this._rulesStyleDetailsPanel.navigationInfo];
</ins><span class="cx"> 
</span><span class="cx">         this._lastSelectedSectionSetting = new WebInspector.Setting(&quot;last-selected-style-details-panel&quot;, this._rulesStyleDetailsPanel.navigationInfo.identifier);
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsComputedStyleDetailsPanelcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css (188028 => 188029)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css        2015-08-06 06:17:59 UTC (rev 188028)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css        2015-08-06 06:24:09 UTC (rev 188029)
</span><span class="lines">@@ -51,3 +51,7 @@
</span><span class="cx"> .details-section &gt; .content &gt; .group &gt; .row .CodeMirror-code pre:hover .go-to-arrow {
</span><span class="cx">     display: initial;
</span><span class="cx"> }
</span><ins>+
+.details-section.style-box-model:not(.collapsed) &gt; :matches(.header, .content) {
+    background-color: white;
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsComputedStyleDetailsPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js (188028 => 188029)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js        2015-08-06 06:17:59 UTC (rev 188028)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js        2015-08-06 06:24:09 UTC (rev 188029)
</span><span class="lines">@@ -88,6 +88,13 @@
</span><span class="cx">         this.element.appendChild(this._containerRegionsFlowSection.element);
</span><span class="cx"> 
</span><span class="cx">         this._resetFlowDetails();
</span><ins>+
+        this._boxModelDiagramRow = new WebInspector.BoxModelDetailsSectionRow;
+
+        var boxModelGroup = new WebInspector.DetailsSectionGroup([this._boxModelDiagramRow]);
+        var boxModelSection = new WebInspector.DetailsSection(&quot;style-box-model&quot;, WebInspector.UIString(&quot;Box Model&quot;), [boxModelGroup]);
+
+        this.element.appendChild(boxModelSection.element);
</ins><span class="cx">         
</span><span class="cx">         this.cssStyleDeclarationTextEditorShouldAddPropertyGoToArrows = true;
</span><span class="cx">     }
</span><span class="lines">@@ -147,10 +154,18 @@
</span><span class="cx">             this._delegate.computedStyleDetailsPanelShowProperty(property);
</span><span class="cx">     }
</span><span class="cx"> 
</span><del>-    refresh()
</del><ins>+    refresh(significantChange)
</ins><span class="cx">     {
</span><ins>+        // We only need to do a rebuild on significant changes. Other changes are handled
+        // by the sections and text editors themselves.
+        if (!significantChange) {
+            super.refresh();
+            return;
+        }
+
</ins><span class="cx">         this._propertiesTextEditor.style = this.nodeStyles.computedStyle;
</span><span class="cx">         this._refreshFlowDetails(this.nodeStyles.node);
</span><ins>+        this._boxModelDiagramRow.nodeStyles = this.nodeStyles;
</ins><span class="cx"> 
</span><span class="cx">         super.refresh();
</span><span class="cx">     }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsMetricsStyleDetailsPaneljs"></a>
<div class="delfile"><h4>Deleted: trunk/Source/WebInspectorUI/UserInterface/Views/MetricsStyleDetailsPanel.js (188028 => 188029)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/MetricsStyleDetailsPanel.js        2015-08-06 06:17:59 UTC (rev 188028)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/MetricsStyleDetailsPanel.js        2015-08-06 06:24:09 UTC (rev 188029)
</span><span class="lines">@@ -1,48 +0,0 @@
</span><del>-/*
- * Copyright (C) 2013, 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.MetricsStyleDetailsPanel = class MetricsStyleDetailsPanel extends WebInspector.StyleDetailsPanel
-{
-    constructor(delegate)
-    {
-        super(delegate, &quot;metrics&quot;, &quot;metrics&quot;, WebInspector.UIString(&quot;Styles \u2014 Metrics&quot;));
-
-        this._boxModelDiagramRow = new WebInspector.BoxModelDetailsSectionRow;
-
-        var boxModelGroup = new WebInspector.DetailsSectionGroup([this._boxModelDiagramRow]);
-        var boxModelSection = new WebInspector.DetailsSection(&quot;style-box-model&quot;, WebInspector.UIString(&quot;Box Model&quot;), [boxModelGroup]);
-
-        this.element.appendChild(boxModelSection.element);
-    }
-
-    // Public
-
-    refresh()
-    {
-        this._boxModelDiagramRow.nodeStyles = this.nodeStyles;
-
-        super.refresh();
-    }
-};
</del></span></pre>
</div>
</div>

</body>
</html>