<!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>[193112] branches/safari-601-branch/Source/WebInspectorUI</title>
</head>
<body>

<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt;  }
#msg dl a { font-weight: bold}
#msg dl a:link    { color:#fc3; }
#msg dl a:active  { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff  {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/193112">193112</a></dd>
<dt>Author</dt> <dd>timothy@apple.com</dd>
<dt>Date</dt> <dd>2015-12-03 10:47:57 -0800 (Thu, 03 Dec 2015)</dd>
</dl>

<h3>Log Message</h3>
<pre>Merge <a href="http://trac.webkit.org/projects/webkit/changeset/188503">r188503</a>. rdar://problem/23221163</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#branchessafari601branchSourceWebInspectorUIChangeLog">branches/safari-601-branch/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUILocalizationsenlprojlocalizedStringsjs">branches/safari-601-branch/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceMainhtml">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Main.html</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceViewsCSSStyleDetailsSidebarPaneljs">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceViewsDetailsSectionjs">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/DetailsSection.js</a></li>
</ul>

<h3>Added Paths</h3>
<ul>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceViewsVisualStyleDetailsPanelcss">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.css</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceViewsVisualStyleDetailsPaneljs">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="branchessafari601branchSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebInspectorUI/ChangeLog (193111 => 193112)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/ChangeLog        2015-12-03 18:47:45 UTC (rev 193111)
+++ branches/safari-601-branch/Source/WebInspectorUI/ChangeLog        2015-12-03 18:47:57 UTC (rev 193112)
</span><span class="lines">@@ -1,5 +1,89 @@
</span><span class="cx"> 2015-12-02  Timothy Hatcher  &lt;timothy@apple.com&gt;
</span><span class="cx"> 
</span><ins>+        Merge r188503. rdar://problem/23221163
+
+    2015-08-14  Devin Rousso  &lt;drousso@apple.com&gt;
+
+            Web Inspector: Add VisualStyleDetailsPanel
+            https://bugs.webkit.org/show_bug.cgi?id=147570
+
+            Reviewed by Timothy Hatcher.
+
+            Added VisualStyleDetailsPanel and inclusions to forthcoming classes
+            that will be used in this visual sidebar panel.
+
+            * Localizations/en.lproj/localizedStrings.js:
+            * UserInterface/Main.html:
+            Added files for all new classes used in the VisualStyleDetailsPanel.
+
+            * UserInterface/Views/CSSStyleDetailsSidebarPanel.js:
+            (WebInspector.CSSStyleDetailsSidebarPanel):
+            * UserInterface/Views/DetailsSection.js:
+            (WebInspector.DetailsSection):
+            (WebInspector.DetailsSection.prototype.set collapsed):
+            (WebInspector.DetailsSection.prototype.get expandedByUser):
+            (WebInspector.DetailsSection.prototype._headerElementClicked):
+            Track whether or not the expanded state was caused by the user.
+
+            * UserInterface/Views/VisualStyleDetailsPanel.css: Added.
+            (.sidebar &gt; .panel.details.css-style .visual &gt; .details-section .details-section &gt; .header):
+            (.sidebar &gt; .panel.details.css-style .visual &gt; .details-section .details-section &gt; .header &gt; .visual-style-section-clear):
+            (.sidebar &gt; .panel.details.css-style .visual &gt; .details-section .details-section:not(.modified) &gt; .header &gt; .visual-style-section-clear):
+            (.sidebar &gt; .panel.details.css-style .visual &gt; .details-section .details-section &gt; .header &gt; span):
+            (.sidebar &gt; .panel.details.css-style .visual &gt; .details-section .details-section.modified &gt; .header &gt; span::after):
+            (.sidebar &gt; .panel.details.css-style .visual &gt; .details-section .details-section &gt; .content):
+            (.sidebar &gt; .panel.details.css-style .visual &gt; .details-section .details-section &gt; .content .group &gt; .row):
+            (.sidebar &gt; .panel.details.css-style .visual &gt; .details-section .details-section &gt; .content .group &gt; .row:last-child):
+            (.sidebar &gt; .panel.details.css-style .visual &gt; .details-section .details-section &gt; .content .group &gt; .row.visual-style-separated-row):
+            (.sidebar &gt; .panel.details.css-style .visual &gt; .details-section .details-section &gt; .content .group &gt; .row &gt; .visual-style-property-container &gt; .visual-style-property-title):
+            (.sidebar &gt; .panel.details.css-style .visual &gt; .details-section .details-section &gt; .content .group &gt; .row &gt; .visual-style-property-container:not(.layout-reversed):last-child):
+            (.sidebar &gt; .panel.details.css-style .visual.disabled &gt; .details-section:not(.visual-style-selector-section)):
+            (.sidebar &gt; .panel.details.css-style .visual.disabled &gt; .details-section:not(.visual-style-selector-section) input):
+
+            * UserInterface/Views/VisualStyleDetailsPanel.js: Added.
+            (WebInspector.VisualStyleDetailsPanel):
+            (WebInspector.VisualStyleDetailsPanel.prototype.refresh):
+            (WebInspector.VisualStyleDetailsPanel.prototype._generateSection.replaceDashWithCapital):
+            (WebInspector.VisualStyleDetailsPanel.prototype._generateSection.createOptionsElement):
+            (WebInspector.VisualStyleDetailsPanel.prototype._generateSection):
+            (WebInspector.VisualStyleDetailsPanel.prototype._prepareForChange):
+            (WebInspector.VisualStyleDetailsPanel.prototype._updateSections):
+            (WebInspector.VisualStyleDetailsPanel.prototype._updateProperties):
+            (WebInspector.VisualStyleDetailsPanel.prototype._updateAutocompleteCompatiblePropertyEditor):
+            (WebInspector.VisualStyleDetailsPanel.prototype._sectionModified):
+            (WebInspector.VisualStyleDetailsPanel.prototype._clearModifiedSection):
+            (WebInspector.VisualStyleDetailsPanel.prototype.get _initialTextList):
+            (WebInspector.VisualStyleDetailsPanel.prototype._initialPropertyTextModified):
+            (WebInspector.VisualStyleDetailsPanel.prototype._populateSection):
+            (WebInspector.VisualStyleDetailsPanel.prototype._populateDisplaySection):
+            (WebInspector.VisualStyleDetailsPanel.prototype._generateMetricSectionRows):
+            (WebInspector.VisualStyleDetailsPanel.prototype._populatePositionSection):
+            (WebInspector.VisualStyleDetailsPanel.prototype._populateFloatSection):
+            (WebInspector.VisualStyleDetailsPanel.prototype._addMetricsMouseListeners.onEditorMouseover):
+            (WebInspector.VisualStyleDetailsPanel.prototype._addMetricsMouseListeners.onEditorMouseout):
+            (WebInspector.VisualStyleDetailsPanel.prototype._addMetricsMouseListeners):
+            (WebInspector.VisualStyleDetailsPanel.prototype._populateDimensionsSection):
+            (WebInspector.VisualStyleDetailsPanel.prototype._populateMarginSection):
+            (WebInspector.VisualStyleDetailsPanel.prototype._populatePaddingSection):
+            (WebInspector.VisualStyleDetailsPanel.prototype._populateFlexboxSection):
+            (WebInspector.VisualStyleDetailsPanel.prototype._populateTextStyleSection):
+            (WebInspector.VisualStyleDetailsPanel.prototype._populateFontSection):
+            (WebInspector.VisualStyleDetailsPanel.prototype._populateTextSpacingSection):
+            (WebInspector.VisualStyleDetailsPanel.prototype._populateTextShadowSection):
+            (WebInspector.VisualStyleDetailsPanel.prototype._populateBackgroundStyleSection):
+            (WebInspector.VisualStyleDetailsPanel.prototype._populateBorderSection):
+            (WebInspector.VisualStyleDetailsPanel.prototype._populateOutlineSection):
+            (WebInspector.VisualStyleDetailsPanel.prototype._populateBoxShadowSection.noRemainingTreeItems):
+            (WebInspector.VisualStyleDetailsPanel.prototype._populateBoxShadowSection.selectedBoxShadowItemValueChanged):
+            (WebInspector.VisualStyleDetailsPanel.prototype._populateBoxShadowSection.boxShadowItemSelected):
+            (WebInspector.VisualStyleDetailsPanel.prototype._populateBoxShadowSection):
+            (WebInspector.VisualStyleDetailsPanel.prototype._populateTransitionSection.noRemainingTreeItems):
+            (WebInspector.VisualStyleDetailsPanel.prototype._populateTransitionSection.selectedtransitionItemValueChanged):
+            (WebInspector.VisualStyleDetailsPanel.prototype._populateTransitionSection.transitionItemSelected):
+            (WebInspector.VisualStyleDetailsPanel.prototype._populateTransitionSection):
+
+2015-12-02  Timothy Hatcher  &lt;timothy@apple.com&gt;
+
</ins><span class="cx">         Merge r188496. rdar://problem/23221163
</span><span class="cx"> 
</span><span class="cx">     2015-08-14  Devin Rousso  &lt;drousso@apple.com&gt;
</span></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUILocalizationsenlprojlocalizedStringsjs"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (193111 => 193112)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js        2015-12-03 18:47:45 UTC (rev 193111)
+++ branches/safari-601-branch/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js        2015-12-03 18:47:57 UTC (rev 193112)
</span><span class="lines">@@ -32,6 +32,8 @@
</span><span class="cx"> localizedStrings[&quot;(Index)&quot;] = &quot;(Index)&quot;;
</span><span class="cx"> localizedStrings[&quot;(anonymous function)&quot;] = &quot;(anonymous function)&quot;;
</span><span class="cx"> localizedStrings[&quot;(many)&quot;] = &quot;(many)&quot;;
</span><ins>+localizedStrings[&quot;(modify the boxes below to add a value)&quot;] = &quot;(modify the boxes below to add a value)&quot;;
+localizedStrings[&quot;(multiple)&quot;] = &quot;(multiple)&quot;;
</ins><span class="cx"> localizedStrings[&quot;(program)&quot;] = &quot;(program)&quot;;
</span><span class="cx"> localizedStrings[&quot;(uninitialized)&quot;] = &quot;(uninitialized)&quot;;
</span><span class="cx"> localizedStrings[&quot;, &quot;] = &quot;, &quot;;
</span><span class="lines">@@ -49,6 +51,7 @@
</span><span class="cx"> localizedStrings[&quot;Add Watch Expression&quot;] = &quot;Add Watch Expression&quot;;
</span><span class="cx"> localizedStrings[&quot;Add new breakpoint action after this action&quot;] = &quot;Add new breakpoint action after this action&quot;;
</span><span class="cx"> localizedStrings[&quot;Additions&quot;] = &quot;Additions&quot;;
</span><ins>+localizedStrings[&quot;Align&quot;] = &quot;Align&quot;;
</ins><span class="cx"> localizedStrings[&quot;All&quot;] = &quot;All&quot;;
</span><span class="cx"> localizedStrings[&quot;All Changes&quot;] = &quot;All Changes&quot;;
</span><span class="cx"> localizedStrings[&quot;All Exceptions&quot;] = &quot;All Exceptions&quot;;
</span><span class="lines">@@ -60,6 +63,7 @@
</span><span class="cx"> localizedStrings[&quot;An unexpected error %s occurred.&quot;] = &quot;An unexpected error %s occurred.&quot;;
</span><span class="cx"> localizedStrings[&quot;An unexpected error occurred.&quot;] = &quot;An unexpected error occurred.&quot;;
</span><span class="cx"> localizedStrings[&quot;Angle&quot;] = &quot;Angle&quot;;
</span><ins>+localizedStrings[&quot;Animation&quot;] = &quot;Animation&quot;;
</ins><span class="cx"> localizedStrings[&quot;Animation Frame Canceled&quot;] = &quot;Animation Frame Canceled&quot;;
</span><span class="cx"> localizedStrings[&quot;Animation Frame Fired&quot;] = &quot;Animation Frame Fired&quot;;
</span><span class="cx"> localizedStrings[&quot;Animation Frame Requested&quot;] = &quot;Animation Frame Requested&quot;;
</span><span class="lines">@@ -72,13 +76,19 @@
</span><span class="cx"> localizedStrings[&quot;Assertion Failed: %s&quot;] = &quot;Assertion Failed: %s&quot;;
</span><span class="cx"> localizedStrings[&quot;Assertion with message: %s&quot;] = &quot;Assertion with message: %s&quot;;
</span><span class="cx"> localizedStrings[&quot;Assertive&quot;] = &quot;Assertive&quot;;
</span><ins>+localizedStrings[&quot;Attach&quot;] = &quot;Attach&quot;;
</ins><span class="cx"> localizedStrings[&quot;Attribute&quot;] = &quot;Attribute&quot;;
</span><span class="cx"> localizedStrings[&quot;Attributes&quot;] = &quot;Attributes&quot;;
</span><span class="cx"> localizedStrings[&quot;Author Stylesheet&quot;] = &quot;Author Stylesheet&quot;;
</span><span class="cx"> localizedStrings[&quot;Automatically continue after evaluating&quot;] = &quot;Automatically continue after evaluating&quot;;
</span><span class="cx"> localizedStrings[&quot;Average Time&quot;] = &quot;Average Time&quot;;
</span><span class="cx"> localizedStrings[&quot;Back (%s)&quot;] = &quot;Back (%s)&quot;;
</span><ins>+localizedStrings[&quot;Background&quot;] = &quot;Background&quot;;
+localizedStrings[&quot;Basis&quot;] = &quot;Basis&quot;;
</ins><span class="cx"> localizedStrings[&quot;Begin Capturing&quot;] = &quot;Begin Capturing&quot;;
</span><ins>+localizedStrings[&quot;Blur&quot;] = &quot;Blur&quot;;
+localizedStrings[&quot;Border&quot;] = &quot;Border&quot;;
+localizedStrings[&quot;Bottom&quot;] = &quot;Bottom&quot;;
</ins><span class="cx"> localizedStrings[&quot;Boundary&quot;] = &quot;Boundary&quot;;
</span><span class="cx"> localizedStrings[&quot;Box Model&quot;] = &quot;Box Model&quot;;
</span><span class="cx"> localizedStrings[&quot;Bubbling&quot;] = &quot;Bubbling&quot;;
</span><span class="lines">@@ -93,6 +103,7 @@
</span><span class="cx"> localizedStrings[&quot;Checked&quot;] = &quot;Checked&quot;;
</span><span class="cx"> localizedStrings[&quot;Child Layers&quot;] = &quot;Child Layers&quot;;
</span><span class="cx"> localizedStrings[&quot;Children&quot;] = &quot;Children&quot;;
</span><ins>+localizedStrings[&quot;Clear&quot;] = &quot;Clear&quot;;
</ins><span class="cx"> localizedStrings[&quot;Clear All Watch Expressions&quot;] = &quot;Clear All Watch Expressions&quot;;
</span><span class="cx"> localizedStrings[&quot;Clear Log&quot;] = &quot;Clear Log&quot;;
</span><span class="cx"> localizedStrings[&quot;Clear Log on Navigation&quot;] = &quot;Clear Log on Navigation&quot;;
</span><span class="lines">@@ -101,13 +112,16 @@
</span><span class="cx"> localizedStrings[&quot;Click Listener&quot;] = &quot;Click Listener&quot;;
</span><span class="cx"> localizedStrings[&quot;Click or press the spacebar to record.&quot;] = &quot;Click or press the spacebar to record.&quot;;
</span><span class="cx"> localizedStrings[&quot;Click or press the spacebar to stop recording.&quot;] = &quot;Click or press the spacebar to stop recording.&quot;;
</span><ins>+localizedStrings[&quot;Click to add a new item.&quot;] = &quot;Click to add a new item.&quot;;
</ins><span class="cx"> localizedStrings[&quot;Click to add a new rule.&quot;] = &quot;Click to add a new rule.&quot;;
</span><ins>+localizedStrings[&quot;Click to clear modified properties&quot;] = &quot;Click to clear modified properties&quot;;
</ins><span class="cx"> localizedStrings[&quot;Click to close this tab&quot;] = &quot;Click to close this tab&quot;;
</span><span class="cx"> localizedStrings[&quot;Click to disable the selected rule&quot;] = &quot;Click to disable the selected rule&quot;;
</span><span class="cx"> localizedStrings[&quot;Click to enable the selected rule&quot;] = &quot;Click to enable the selected rule&quot;;
</span><span class="cx"> localizedStrings[&quot;Click to link property values&quot;] = &quot;Click to link property values&quot;;
</span><span class="cx"> localizedStrings[&quot;Click to open a cubic-bezier editor&quot;] = &quot;Click to open a cubic-bezier editor&quot;;
</span><span class="cx"> localizedStrings[&quot;Click to remove link&quot;] = &quot;Click to remove link&quot;;
</span><ins>+localizedStrings[&quot;Click to remove the selected item.&quot;] = &quot;Click to remove the selected item.&quot;;
</ins><span class="cx"> localizedStrings[&quot;Click to restart the animation&quot;] = &quot;Click to restart the animation&quot;;
</span><span class="cx"> localizedStrings[&quot;Click to select a color. Shift-click to switch color formats.&quot;] = &quot;Click to select a color. Shift-click to switch color formats.&quot;;
</span><span class="cx"> localizedStrings[&quot;Clickable&quot;] = &quot;Clickable&quot;;
</span><span class="lines">@@ -119,6 +133,7 @@
</span><span class="cx"> localizedStrings[&quot;Closure Variables&quot;] = &quot;Closure Variables&quot;;
</span><span class="cx"> localizedStrings[&quot;Code&quot;] = &quot;Code&quot;;
</span><span class="cx"> localizedStrings[&quot;Collapse columns&quot;] = &quot;Collapse columns&quot;;
</span><ins>+localizedStrings[&quot;Color&quot;] = &quot;Color&quot;;
</ins><span class="cx"> localizedStrings[&quot;Comment&quot;] = &quot;Comment&quot;;
</span><span class="cx"> localizedStrings[&quot;Comment All Properties&quot;] = &quot;Comment All Properties&quot;;
</span><span class="cx"> localizedStrings[&quot;Composite&quot;] = &quot;Composite&quot;;
</span><span class="lines">@@ -145,6 +160,8 @@
</span><span class="cx"> localizedStrings[&quot;Copy as HTML&quot;] = &quot;Copy as HTML&quot;;
</span><span class="cx"> localizedStrings[&quot;Could not fetch properties. Object may no longer exist.&quot;] = &quot;Could not fetch properties. Object may no longer exist.&quot;;
</span><span class="cx"> localizedStrings[&quot;Create a new tab&quot;] = &quot;Create a new tab&quot;;
</span><ins>+localizedStrings[&quot;Cursor&quot;] = &quot;Cursor&quot;;
+localizedStrings[&quot;Custom&quot;] = &quot;Custom&quot;;
</ins><span class="cx"> localizedStrings[&quot;Data&quot;] = &quot;Data&quot;;
</span><span class="cx"> localizedStrings[&quot;Data returned from the database is too large.&quot;] = &quot;Data returned from the database is too large.&quot;;
</span><span class="cx"> localizedStrings[&quot;Database no longer has expected version.&quot;] = &quot;Database no longer has expected version.&quot;;
</span><span class="lines">@@ -154,6 +171,9 @@
</span><span class="cx"> localizedStrings[&quot;Debugger Paused&quot;] = &quot;Debugger Paused&quot;;
</span><span class="cx"> localizedStrings[&quot;Debugger Statement&quot;] = &quot;Debugger Statement&quot;;
</span><span class="cx"> localizedStrings[&quot;Decoded&quot;] = &quot;Decoded&quot;;
</span><ins>+localizedStrings[&quot;Decoration&quot;] = &quot;Decoration&quot;;
+localizedStrings[&quot;Default&quot;] = &quot;Default&quot;;
+localizedStrings[&quot;Delay&quot;] = &quot;Delay&quot;;
</ins><span class="cx"> localizedStrings[&quot;Delete&quot;] = &quot;Delete&quot;;
</span><span class="cx"> localizedStrings[&quot;Delete Breakpoint&quot;] = &quot;Delete Breakpoint&quot;;
</span><span class="cx"> localizedStrings[&quot;Delete Breakpoints&quot;] = &quot;Delete Breakpoints&quot;;
</span><span class="lines">@@ -161,12 +181,15 @@
</span><span class="cx"> localizedStrings[&quot;Detach into separate window&quot;] = &quot;Detach into separate window&quot;;
</span><span class="cx"> localizedStrings[&quot;Details&quot;] = &quot;Details&quot;;
</span><span class="cx"> localizedStrings[&quot;Did you mean '%s'?\nClick to replace.&quot;] = &quot;Did you mean '%s'?\nClick to replace.&quot;;
</span><ins>+localizedStrings[&quot;Dimensions&quot;] = &quot;Dimensions&quot;;
+localizedStrings[&quot;Direction&quot;] = &quot;Direction&quot;;
</ins><span class="cx"> localizedStrings[&quot;Disable Breakpoint&quot;] = &quot;Disable Breakpoint&quot;;
</span><span class="cx"> localizedStrings[&quot;Disable Breakpoints&quot;] = &quot;Disable Breakpoints&quot;;
</span><span class="cx"> localizedStrings[&quot;Disable all breakpoints (%s)&quot;] = &quot;Disable all breakpoints (%s)&quot;;
</span><span class="cx"> localizedStrings[&quot;Disable paint flashing&quot;] = &quot;Disable paint flashing&quot;;
</span><span class="cx"> localizedStrings[&quot;Disable point to inspect mode (%s)&quot;] = &quot;Disable point to inspect mode (%s)&quot;;
</span><span class="cx"> localizedStrings[&quot;Disabled&quot;] = &quot;Disabled&quot;;
</span><ins>+localizedStrings[&quot;Display&quot;] = &quot;Display&quot;;
</ins><span class="cx"> localizedStrings[&quot;Dock to bottom of window&quot;] = &quot;Dock to bottom of window&quot;;
</span><span class="cx"> localizedStrings[&quot;Dock to right of window&quot;] = &quot;Dock to right of window&quot;;
</span><span class="cx"> localizedStrings[&quot;Document&quot;] = &quot;Document&quot;;
</span><span class="lines">@@ -237,6 +260,7 @@
</span><span class="cx"> localizedStrings[&quot;Expression&quot;] = &quot;Expression&quot;;
</span><span class="cx"> localizedStrings[&quot;Extension Scripts&quot;] = &quot;Extension Scripts&quot;;
</span><span class="cx"> localizedStrings[&quot;Extra Scripts&quot;] = &quot;Extra Scripts&quot;;
</span><ins>+localizedStrings[&quot;Family&quot;] = &quot;Family&quot;;
</ins><span class="cx"> localizedStrings[&quot;Filename&quot;] = &quot;Filename&quot;;
</span><span class="cx"> localizedStrings[&quot;Filter %s&quot;] = &quot;Filter %s&quot;;
</span><span class="cx"> localizedStrings[&quot;Filter Breakpoint List&quot;] = &quot;Filter Breakpoint List&quot;;
</span><span class="lines">@@ -245,6 +269,9 @@
</span><span class="cx"> localizedStrings[&quot;Filter Search Results&quot;] = &quot;Filter Search Results&quot;;
</span><span class="cx"> localizedStrings[&quot;Filter Storage List&quot;] = &quot;Filter Storage List&quot;;
</span><span class="cx"> localizedStrings[&quot;Filter Styles&quot;] = &quot;Filter Styles&quot;;
</span><ins>+localizedStrings[&quot;Flexbox&quot;] = &quot;Flexbox&quot;;
+localizedStrings[&quot;Float&quot;] = &quot;Float&quot;;
+localizedStrings[&quot;Float and Clear&quot;] = &quot;Float and Clear&quot;;
</ins><span class="cx"> localizedStrings[&quot;Flows&quot;] = &quot;Flows&quot;;
</span><span class="cx"> localizedStrings[&quot;Focused&quot;] = &quot;Focused&quot;;
</span><span class="cx"> localizedStrings[&quot;Font&quot;] = &quot;Font&quot;;
</span><span class="lines">@@ -267,6 +294,7 @@
</span><span class="cx"> localizedStrings[&quot;Global Variables&quot;] = &quot;Global Variables&quot;;
</span><span class="cx"> localizedStrings[&quot;Grammar&quot;] = &quot;Grammar&quot;;
</span><span class="cx"> localizedStrings[&quot;Group&quot;] = &quot;Group&quot;;
</span><ins>+localizedStrings[&quot;Grow&quot;] = &quot;Grow&quot;;
</ins><span class="cx"> localizedStrings[&quot;HTML Attributes&quot;] = &quot;HTML Attributes&quot;;
</span><span class="cx"> localizedStrings[&quot;HTTP&quot;] = &quot;HTTP&quot;;
</span><span class="cx"> localizedStrings[&quot;Height&quot;] = &quot;Height&quot;;
</span><span class="lines">@@ -276,6 +304,7 @@
</span><span class="cx"> localizedStrings[&quot;Hide the details sidebar (%s)&quot;] = &quot;Hide the details sidebar (%s)&quot;;
</span><span class="cx"> localizedStrings[&quot;Hide the navigation sidebar (%s)&quot;] = &quot;Hide the navigation sidebar (%s)&quot;;
</span><span class="cx"> localizedStrings[&quot;Hide type information&quot;] = &quot;Hide type information&quot;;
</span><ins>+localizedStrings[&quot;Horizontal&quot;] = &quot;Horizontal&quot;;
</ins><span class="cx"> localizedStrings[&quot;Host&quot;] = &quot;Host&quot;;
</span><span class="cx"> localizedStrings[&quot;Icon Only&quot;] = &quot;Icon Only&quot;;
</span><span class="cx"> localizedStrings[&quot;Icon and Text (Horizontal)&quot;] = &quot;Icon and Text (Horizontal)&quot;;
</span><span class="lines">@@ -286,6 +315,7 @@
</span><span class="cx"> localizedStrings[&quot;Image Size&quot;] = &quot;Image Size&quot;;
</span><span class="cx"> localizedStrings[&quot;Images&quot;] = &quot;Images&quot;;
</span><span class="cx"> localizedStrings[&quot;Immediate Pause Requested&quot;] = &quot;Immediate Pause Requested&quot;;
</span><ins>+localizedStrings[&quot;Indent&quot;] = &quot;Indent&quot;;
</ins><span class="cx"> localizedStrings[&quot;Index&quot;] = &quot;Index&quot;;
</span><span class="cx"> localizedStrings[&quot;Index Key \u2014 %s&quot;] = &quot;Index Key \u2014 %s&quot;;
</span><span class="cx"> localizedStrings[&quot;Indexed Databases&quot;] = &quot;Indexed Databases&quot;;
</span><span class="lines">@@ -294,6 +324,7 @@
</span><span class="cx"> localizedStrings[&quot;Inherited from %s&quot;] = &quot;Inherited from %s&quot;;
</span><span class="cx"> localizedStrings[&quot;Initiator&quot;] = &quot;Initiator&quot;;
</span><span class="cx"> localizedStrings[&quot;Input: &quot;] = &quot;Input: &quot;;
</span><ins>+localizedStrings[&quot;Inset&quot;] = &quot;Inset&quot;;
</ins><span class="cx"> localizedStrings[&quot;Invalid&quot;] = &quot;Invalid&quot;;
</span><span class="cx"> localizedStrings[&quot;Invoke getter&quot;] = &quot;Invoke getter&quot;;
</span><span class="cx"> localizedStrings[&quot;JavaScript &amp; Events&quot;] = &quot;JavaScript &amp; Events&quot;;
</span><span class="lines">@@ -309,6 +340,8 @@
</span><span class="cx"> localizedStrings[&quot;Layout&quot;] = &quot;Layout&quot;;
</span><span class="cx"> localizedStrings[&quot;Layout &amp; Rendering&quot;] = &quot;Layout &amp; Rendering&quot;;
</span><span class="cx"> localizedStrings[&quot;Layout Invalidated&quot;] = &quot;Layout Invalidated&quot;;
</span><ins>+localizedStrings[&quot;Left&quot;] = &quot;Left&quot;;
+localizedStrings[&quot;Letter&quot;] = &quot;Letter&quot;;
</ins><span class="cx"> localizedStrings[&quot;Line %d&quot;] = &quot;Line %d&quot;;
</span><span class="cx"> localizedStrings[&quot;Line %d:%d&quot;] = &quot;Line %d:%d&quot;;
</span><span class="cx"> localizedStrings[&quot;Line Number&quot;] = &quot;Line Number&quot;;
</span><span class="lines">@@ -328,11 +361,14 @@
</span><span class="cx"> localizedStrings[&quot;MIME Type&quot;] = &quot;MIME Type&quot;;
</span><span class="cx"> localizedStrings[&quot;Main Frame&quot;] = &quot;Main Frame&quot;;
</span><span class="cx"> localizedStrings[&quot;Manifest URL&quot;] = &quot;Manifest URL&quot;;
</span><ins>+localizedStrings[&quot;Margin&quot;] = &quot;Margin&quot;;
+localizedStrings[&quot;Max&quot;] = &quot;Max&quot;;
</ins><span class="cx"> localizedStrings[&quot;Media: &quot;] = &quot;Media: &quot;;
</span><span class="cx"> localizedStrings[&quot;Memory&quot;] = &quot;Memory&quot;;
</span><span class="cx"> localizedStrings[&quot;Memory: %s&quot;] = &quot;Memory: %s&quot;;
</span><span class="cx"> localizedStrings[&quot;Message&quot;] = &quot;Message&quot;;
</span><span class="cx"> localizedStrings[&quot;Method&quot;] = &quot;Method&quot;;
</span><ins>+localizedStrings[&quot;Min&quot;] = &quot;Min&quot;;
</ins><span class="cx"> localizedStrings[&quot;Mixed&quot;] = &quot;Mixed&quot;;
</span><span class="cx"> localizedStrings[&quot;Name&quot;] = &quot;Name&quot;;
</span><span class="cx"> localizedStrings[&quot;Network&quot;] = &quot;Network&quot;;
</span><span class="lines">@@ -368,19 +404,25 @@
</span><span class="cx"> localizedStrings[&quot;No properties.&quot;] = &quot;No properties.&quot;;
</span><span class="cx"> localizedStrings[&quot;Node&quot;] = &quot;Node&quot;;
</span><span class="cx"> localizedStrings[&quot;Not found&quot;] = &quot;Not found&quot;;
</span><ins>+localizedStrings[&quot;Offset&quot;] = &quot;Offset&quot;;
</ins><span class="cx"> localizedStrings[&quot;Online&quot;] = &quot;Online&quot;;
</span><ins>+localizedStrings[&quot;Opacity&quot;] = &quot;Opacity&quot;;
</ins><span class="cx"> localizedStrings[&quot;Option-click to show all units&quot;] = &quot;Option-click to show all units&quot;;
</span><span class="cx"> localizedStrings[&quot;Option-click to show all values&quot;] = &quot;Option-click to show all values&quot;;
</span><span class="cx"> localizedStrings[&quot;Options&quot;] = &quot;Options&quot;;
</span><ins>+localizedStrings[&quot;Order&quot;] = &quot;Order&quot;;
</ins><span class="cx"> localizedStrings[&quot;Original&quot;] = &quot;Original&quot;;
</span><span class="cx"> localizedStrings[&quot;Original formatting&quot;] = &quot;Original formatting&quot;;
</span><span class="cx"> localizedStrings[&quot;Originally %s&quot;] = &quot;Originally %s&quot;;
</span><span class="cx"> localizedStrings[&quot;Other&quot;] = &quot;Other&quot;;
</span><span class="cx"> localizedStrings[&quot;Other Issue&quot;] = &quot;Other Issue&quot;;
</span><ins>+localizedStrings[&quot;Outline&quot;] = &quot;Outline&quot;;
</ins><span class="cx"> localizedStrings[&quot;Output: &quot;] = &quot;Output: &quot;;
</span><span class="cx"> localizedStrings[&quot;Over 1 ms&quot;] = &quot;Over 1 ms&quot;;
</span><span class="cx"> localizedStrings[&quot;Over 15 ms&quot;] = &quot;Over 15 ms&quot;;
</span><ins>+localizedStrings[&quot;Overflow&quot;] = &quot;Overflow&quot;;
</ins><span class="cx"> localizedStrings[&quot;Owns&quot;] = &quot;Owns&quot;;
</span><ins>+localizedStrings[&quot;Padding&quot;] = &quot;Padding&quot;;
</ins><span class="cx"> localizedStrings[&quot;Page Issue&quot;] = &quot;Page Issue&quot;;
</span><span class="cx"> localizedStrings[&quot;Paint&quot;] = &quot;Paint&quot;;
</span><span class="cx"> localizedStrings[&quot;Paints&quot;] = &quot;Paints&quot;;
</span><span class="lines">@@ -392,6 +434,9 @@
</span><span class="cx"> localizedStrings[&quot;Play Sound&quot;] = &quot;Play Sound&quot;;
</span><span class="cx"> localizedStrings[&quot;Polite&quot;] = &quot;Polite&quot;;
</span><span class="cx"> localizedStrings[&quot;Port&quot;] = &quot;Port&quot;;
</span><ins>+localizedStrings[&quot;Position&quot;] = &quot;Position&quot;;
+localizedStrings[&quot;Position X&quot;] = &quot;Position X&quot;;
+localizedStrings[&quot;Position Y&quot;] = &quot;Position Y&quot;;
</ins><span class="cx"> localizedStrings[&quot;Pressed&quot;] = &quot;Pressed&quot;;
</span><span class="cx"> localizedStrings[&quot;Pretty print&quot;] = &quot;Pretty print&quot;;
</span><span class="cx"> localizedStrings[&quot;Primary Key&quot;] = &quot;Primary Key&quot;;
</span><span class="lines">@@ -401,9 +446,11 @@
</span><span class="cx"> localizedStrings[&quot;Probes&quot;] = &quot;Probes&quot;;
</span><span class="cx"> localizedStrings[&quot;Processing Instruction&quot;] = &quot;Processing Instruction&quot;;
</span><span class="cx"> localizedStrings[&quot;Properties&quot;] = &quot;Properties&quot;;
</span><ins>+localizedStrings[&quot;Property&quot;] = &quot;Property&quot;;
</ins><span class="cx"> localizedStrings[&quot;Query Parameters&quot;] = &quot;Query Parameters&quot;;
</span><span class="cx"> localizedStrings[&quot;Query String&quot;] = &quot;Query String&quot;;
</span><span class="cx"> localizedStrings[&quot;Radial Gradient&quot;] = &quot;Radial Gradient&quot;;
</span><ins>+localizedStrings[&quot;Radius&quot;] = &quot;Radius&quot;;
</ins><span class="cx"> localizedStrings[&quot;Range Issue&quot;] = &quot;Range Issue&quot;;
</span><span class="cx"> localizedStrings[&quot;Readonly&quot;] = &quot;Readonly&quot;;
</span><span class="cx"> localizedStrings[&quot;Reasons for compositing:&quot;] = &quot;Reasons for compositing:&quot;;
</span><span class="lines">@@ -420,6 +467,7 @@
</span><span class="cx"> localizedStrings[&quot;Remove Watch Expression&quot;] = &quot;Remove Watch Expression&quot;;
</span><span class="cx"> localizedStrings[&quot;Remove this breakpoint action&quot;] = &quot;Remove this breakpoint action&quot;;
</span><span class="cx"> localizedStrings[&quot;Rendering Frames&quot;] = &quot;Rendering Frames&quot;;
</span><ins>+localizedStrings[&quot;Repeat&quot;] = &quot;Repeat&quot;;
</ins><span class="cx"> localizedStrings[&quot;Repeating Linear Gradient&quot;] = &quot;Repeating Linear Gradient&quot;;
</span><span class="cx"> localizedStrings[&quot;Repeating Radial Gradient&quot;] = &quot;Repeating Radial Gradient&quot;;
</span><span class="cx"> localizedStrings[&quot;Request&quot;] = &quot;Request&quot;;
</span><span class="lines">@@ -439,6 +487,7 @@
</span><span class="cx"> localizedStrings[&quot;Reveal in DOM Tree&quot;] = &quot;Reveal in DOM Tree&quot;;
</span><span class="cx"> localizedStrings[&quot;Reveal in Debugger Tab&quot;] = &quot;Reveal in Debugger Tab&quot;;
</span><span class="cx"> localizedStrings[&quot;Reveal in Original Resource&quot;] = &quot;Reveal in Original Resource&quot;;
</span><ins>+localizedStrings[&quot;Right&quot;] = &quot;Right&quot;;
</ins><span class="cx"> localizedStrings[&quot;Role&quot;] = &quot;Role&quot;;
</span><span class="cx"> localizedStrings[&quot;Scheme&quot;] = &quot;Scheme&quot;;
</span><span class="cx"> localizedStrings[&quot;Scope Chain&quot;] = &quot;Scope Chain&quot;;
</span><span class="lines">@@ -464,11 +513,13 @@
</span><span class="cx"> localizedStrings[&quot;Set to Automatically Continue&quot;] = &quot;Set to Automatically Continue&quot;;
</span><span class="cx"> localizedStrings[&quot;Setter&quot;] = &quot;Setter&quot;;
</span><span class="cx"> localizedStrings[&quot;Settings&quot;] = &quot;Settings&quot;;
</span><ins>+localizedStrings[&quot;Shadow&quot;] = &quot;Shadow&quot;;
</ins><span class="cx"> localizedStrings[&quot;Shadow Content&quot;] = &quot;Shadow Content&quot;;
</span><span class="cx"> localizedStrings[&quot;Shared Focus&quot;] = &quot;Shared Focus&quot;;
</span><span class="cx"> localizedStrings[&quot;Show All&quot;] = &quot;Show All&quot;;
</span><span class="cx"> localizedStrings[&quot;Show All Nodes (%d More)&quot;] = &quot;Show All Nodes (%d More)&quot;;
</span><span class="cx"> localizedStrings[&quot;Show Replay Controls&quot;] = &quot;Show Replay Controls&quot;;
</span><ins>+localizedStrings[&quot;Show Source&quot;] = &quot;Show Source&quot;;
</ins><span class="cx"> localizedStrings[&quot;Show compositing borders&quot;] = &quot;Show compositing borders&quot;;
</span><span class="cx"> localizedStrings[&quot;Show console tab&quot;] = &quot;Show console tab&quot;;
</span><span class="cx"> localizedStrings[&quot;Show only resources with breakpoints.&quot;] = &quot;Show only resources with breakpoints.&quot;;
</span><span class="lines">@@ -479,13 +530,17 @@
</span><span class="cx"> localizedStrings[&quot;Show the details sidebar (%s)&quot;] = &quot;Show the details sidebar (%s)&quot;;
</span><span class="cx"> localizedStrings[&quot;Show the navigation sidebar (%s)&quot;] = &quot;Show the navigation sidebar (%s)&quot;;
</span><span class="cx"> localizedStrings[&quot;Show type information&quot;] = &quot;Show type information&quot;;
</span><ins>+localizedStrings[&quot;Shrink&quot;] = &quot;Shrink&quot;;
</ins><span class="cx"> localizedStrings[&quot;Size&quot;] = &quot;Size&quot;;
</span><ins>+localizedStrings[&quot;Sizing&quot;] = &quot;Sizing&quot;;
</ins><span class="cx"> localizedStrings[&quot;Small Icons&quot;] = &quot;Small Icons&quot;;
</span><span class="cx"> localizedStrings[&quot;Socket&quot;] = &quot;Socket&quot;;
</span><span class="cx"> localizedStrings[&quot;Sockets&quot;] = &quot;Sockets&quot;;
</span><ins>+localizedStrings[&quot;Spacing&quot;] = &quot;Spacing&quot;;
</ins><span class="cx"> localizedStrings[&quot;Specificity: (%d, %d, %d)&quot;] = &quot;Specificity: (%d, %d, %d)&quot;;
</span><span class="cx"> localizedStrings[&quot;Specificity: No value for selected element&quot;] = &quot;Specificity: No value for selected element&quot;;
</span><span class="cx"> localizedStrings[&quot;Spelling&quot;] = &quot;Spelling&quot;;
</span><ins>+localizedStrings[&quot;Spread&quot;] = &quot;Spread&quot;;
</ins><span class="cx"> localizedStrings[&quot;Start Playback&quot;] = &quot;Start Playback&quot;;
</span><span class="cx"> localizedStrings[&quot;Start Recording&quot;] = &quot;Start Recording&quot;;
</span><span class="cx"> localizedStrings[&quot;Start Time&quot;] = &quot;Start Time&quot;;
</span><span class="lines">@@ -503,6 +558,7 @@
</span><span class="cx"> localizedStrings[&quot;Styles Recalculated&quot;] = &quot;Styles Recalculated&quot;;
</span><span class="cx"> localizedStrings[&quot;Styles \u2014 Computed&quot;] = &quot;Styles \u2014 Computed&quot;;
</span><span class="cx"> localizedStrings[&quot;Styles \u2014 Rules&quot;] = &quot;Styles \u2014 Rules&quot;;
</span><ins>+localizedStrings[&quot;Styles \u2014 Visual&quot;] = &quot;Styles \u2014 Visual&quot;;
</ins><span class="cx"> localizedStrings[&quot;Stylesheet&quot;] = &quot;Stylesheet&quot;;
</span><span class="cx"> localizedStrings[&quot;Stylesheets&quot;] = &quot;Stylesheets&quot;;
</span><span class="cx"> localizedStrings[&quot;Text&quot;] = &quot;Text&quot;;
</span><span class="lines">@@ -527,10 +583,14 @@
</span><span class="cx"> localizedStrings[&quot;Timer Fired&quot;] = &quot;Timer Fired&quot;;
</span><span class="cx"> localizedStrings[&quot;Timer Installed&quot;] = &quot;Timer Installed&quot;;
</span><span class="cx"> localizedStrings[&quot;Timer Removed&quot;] = &quot;Timer Removed&quot;;
</span><ins>+localizedStrings[&quot;Timing&quot;] = &quot;Timing&quot;;
+localizedStrings[&quot;Top&quot;] = &quot;Top&quot;;
</ins><span class="cx"> localizedStrings[&quot;Total Time&quot;] = &quot;Total Time&quot;;
</span><span class="cx"> localizedStrings[&quot;Total number of resources, click to show the Resources tab&quot;] = &quot;Total number of resources, click to show the Resources tab&quot;;
</span><span class="cx"> localizedStrings[&quot;Total size of all resources, click to show the Network Requests timeline&quot;] = &quot;Total size of all resources, click to show the Network Requests timeline&quot;;
</span><span class="cx"> localizedStrings[&quot;Transfered&quot;] = &quot;Transfered&quot;;
</span><ins>+localizedStrings[&quot;Transform&quot;] = &quot;Transform&quot;;
+localizedStrings[&quot;Transition&quot;] = &quot;Transition&quot;;
</ins><span class="cx"> localizedStrings[&quot;Triggered Breakpoint&quot;] = &quot;Triggered Breakpoint&quot;;
</span><span class="cx"> localizedStrings[&quot;Type&quot;] = &quot;Type&quot;;
</span><span class="cx"> localizedStrings[&quot;Type Issue&quot;] = &quot;Type Issue&quot;;
</span><span class="lines">@@ -544,16 +604,24 @@
</span><span class="cx"> localizedStrings[&quot;User Stylesheet&quot;] = &quot;User Stylesheet&quot;;
</span><span class="cx"> localizedStrings[&quot;Using the previous selector '%s'.&quot;] = &quot;Using the previous selector '%s'.&quot;;
</span><span class="cx"> localizedStrings[&quot;Value&quot;] = &quot;Value&quot;;
</span><ins>+localizedStrings[&quot;Variant&quot;] = &quot;Variant&quot;;
+localizedStrings[&quot;Vertical&quot;] = &quot;Vertical&quot;;
+localizedStrings[&quot;Visibility&quot;] = &quot;Visibility&quot;;
</ins><span class="cx"> localizedStrings[&quot;Warning: &quot;] = &quot;Warning: &quot;;
</span><span class="cx"> localizedStrings[&quot;Warnings&quot;] = &quot;Warnings&quot;;
</span><span class="cx"> localizedStrings[&quot;Watch Expressions&quot;] = &quot;Watch Expressions&quot;;
</span><span class="cx"> localizedStrings[&quot;Web Inspector&quot;] = &quot;Web Inspector&quot;;
</span><ins>+localizedStrings[&quot;Weight&quot;] = &quot;Weight&quot;;
+localizedStrings[&quot;Whitespace&quot;] = &quot;Whitespace&quot;;
</ins><span class="cx"> localizedStrings[&quot;Width&quot;] = &quot;Width&quot;;
</span><span class="cx"> localizedStrings[&quot;With Object Properties&quot;] = &quot;With Object Properties&quot;;
</span><ins>+localizedStrings[&quot;Word&quot;] = &quot;Word&quot;;
</ins><span class="cx"> localizedStrings[&quot;Working Copy&quot;] = &quot;Working Copy&quot;;
</span><ins>+localizedStrings[&quot;Wrap&quot;] = &quot;Wrap&quot;;
</ins><span class="cx"> localizedStrings[&quot;XHR&quot;] = &quot;XHR&quot;;
</span><span class="cx"> localizedStrings[&quot;XHRs&quot;] = &quot;XHRs&quot;;
</span><span class="cx"> localizedStrings[&quot;Yes&quot;] = &quot;Yes&quot;;
</span><ins>+localizedStrings[&quot;Z-Index&quot;] = &quot;Z-Index&quot;;
</ins><span class="cx"> localizedStrings[&quot;key&quot;] = &quot;key&quot;;
</span><span class="cx"> localizedStrings[&quot;line &quot;] = &quot;line &quot;;
</span><span class="cx"> localizedStrings[&quot;originally %s&quot;] = &quot;originally %s&quot;;
</span></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceMainhtml"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Main.html (193111 => 193112)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Main.html        2015-12-03 18:47:45 UTC (rev 193111)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Main.html        2015-12-03 18:47:57 UTC (rev 193112)
</span><span class="lines">@@ -163,6 +163,20 @@
</span><span class="cx">     &lt;link rel=&quot;stylesheet&quot; href=&quot;Views/TypeTokenView.css&quot;&gt;
</span><span class="cx">     &lt;link rel=&quot;stylesheet&quot; href=&quot;Views/TypeTreeElement.css&quot;&gt;
</span><span class="cx">     &lt;link rel=&quot;stylesheet&quot; href=&quot;Views/TypeTreeView.css&quot;&gt;
</span><ins>+    &lt;link rel=&quot;stylesheet&quot; href=&quot;Views/VisualStyleColorPicker.css&quot;&gt;
+    &lt;link rel=&quot;stylesheet&quot; href=&quot;Views/VisualStyleCommaSeparatedKeywordEditor.css&quot;&gt;
+    &lt;link rel=&quot;stylesheet&quot; href=&quot;Views/VisualStyleDetailsPanel.css&quot;&gt;
+    &lt;link rel=&quot;stylesheet&quot; href=&quot;Views/VisualStyleKeywordCheckbox.css&quot;&gt;
+    &lt;link rel=&quot;stylesheet&quot; href=&quot;Views/VisualStyleKeywordIconList.css&quot;&gt;
+    &lt;link rel=&quot;stylesheet&quot; href=&quot;Views/VisualStyleNumberInputBox.css&quot;&gt;
+    &lt;link rel=&quot;stylesheet&quot; href=&quot;Views/VisualStylePropertyEditor.css&quot;&gt;
+    &lt;link rel=&quot;stylesheet&quot; href=&quot;Views/VisualStylePropertyEditorLink.css&quot;&gt;
+    &lt;link rel=&quot;stylesheet&quot; href=&quot;Views/VisualStyleRelativeNumberSlider.css&quot;&gt;
+    &lt;link rel=&quot;stylesheet&quot; href=&quot;Views/VisualStyleSelectorSection.css&quot;&gt;
+    &lt;link rel=&quot;stylesheet&quot; href=&quot;Views/VisualStyleSelectorTreeItem.css&quot;&gt;
+    &lt;link rel=&quot;stylesheet&quot; href=&quot;Views/VisualStyleTabbedPropertiesRow.css&quot;&gt;
+    &lt;link rel=&quot;stylesheet&quot; href=&quot;Views/VisualStyleTimingEditor.css&quot;&gt;
+    &lt;link rel=&quot;stylesheet&quot; href=&quot;Views/VisualStyleUnitSlider.css&quot;&gt;
</ins><span class="cx"> 
</span><span class="cx">     &lt;link rel=&quot;stylesheet&quot; href=&quot;Controllers/CodeMirrorCompletionController.css&quot;&gt;
</span><span class="cx">     &lt;link rel=&quot;stylesheet&quot; href=&quot;Controllers/CodeMirrorDragToAdjustNumberController.css&quot;&gt;
</span><span class="lines">@@ -541,6 +555,27 @@
</span><span class="cx">     &lt;script src=&quot;Views/TypeTreeElement.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;Views/TypeTreeView.js&quot;&gt;&lt;/script&gt;
</span><span class="cx"> 
</span><ins>+    &lt;script src=&quot;Views/VisualStyleDetailsPanel.js&quot;&gt;&lt;/script&gt;
+    &lt;script src=&quot;Views/VisualStylePropertyEditor.js&quot;&gt;&lt;/script&gt;
+    &lt;script src=&quot;Views/VisualStyleColorPicker.js&quot;&gt;&lt;/script&gt;
+    &lt;script src=&quot;Views/VisualStyleCommaSeparatedKeywordEditor.js&quot;&gt;&lt;/script&gt;
+    &lt;script src=&quot;Views/VisualStyleFontFamilyListEditor.js&quot;&gt;&lt;/script&gt;
+    &lt;script src=&quot;Views/VisualStyleFontFamilyTreeElement.js&quot;&gt;&lt;/script&gt;
+    &lt;script src=&quot;Views/VisualStyleKeywordCheckbox.js&quot;&gt;&lt;/script&gt;
+    &lt;script src=&quot;Views/VisualStyleKeywordIconList.js&quot;&gt;&lt;/script&gt;
+    &lt;script src=&quot;Views/VisualStyleKeywordPicker.js&quot;&gt;&lt;/script&gt;
+    &lt;script src=&quot;Views/VisualStyleNumberInputBox.js&quot;&gt;&lt;/script&gt;
+    &lt;script src=&quot;Views/VisualStylePropertyCombiner.js&quot;&gt;&lt;/script&gt;
+    &lt;script src=&quot;Views/VisualStylePropertyEditorLink.js&quot;&gt;&lt;/script&gt;
+    &lt;script src=&quot;Views/VisualStylePropertyNameInput.js&quot;&gt;&lt;/script&gt;
+    &lt;script src=&quot;Views/VisualStyleRelativeNumberSlider.js&quot;&gt;&lt;/script&gt;
+    &lt;script src=&quot;Views/VisualStyleSelectorSection.js&quot;&gt;&lt;/script&gt;
+    &lt;script src=&quot;Views/VisualStyleSelectorTreeItem.js&quot;&gt;&lt;/script&gt;
+    &lt;script src=&quot;Views/VisualStyleTabbedPropertiesRow.js&quot;&gt;&lt;/script&gt;
+    &lt;script src=&quot;Views/VisualStyleTimingEditor.js&quot;&gt;&lt;/script&gt;
+    &lt;script src=&quot;Views/VisualStyleUnitSlider.js&quot;&gt;&lt;/script&gt;
+    &lt;script src=&quot;Views/VisualStyleURLInput.js&quot;&gt;&lt;/script&gt;
+
</ins><span class="cx">     &lt;script src=&quot;Controllers/Annotator.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;Controllers/CodeMirrorEditingController.js&quot;&gt;&lt;/script&gt;
</span><span class="cx"> 
</span><span class="lines">@@ -575,6 +610,7 @@
</span><span class="cx">     &lt;script src=&quot;Controllers/StorageManager.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;Controllers/TimelineManager.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;Controllers/TypeTokenAnnotator.js&quot;&gt;&lt;/script&gt;
</span><ins>+    &lt;script src=&quot;Controllers/VisualStyleCompletionsController.js&quot;&gt;&lt;/script&gt;
</ins><span class="cx"> 
</span><span class="cx">     &lt;script src=&quot;Base/Main.js&quot;&gt;&lt;/script&gt;
</span><span class="cx"> 
</span></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceViewsCSSStyleDetailsSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js (193111 => 193112)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js        2015-12-03 18:47:45 UTC (rev 193111)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js        2015-12-03 18:47:57 UTC (rev 193112)
</span><span class="lines">@@ -68,12 +68,13 @@
</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><ins>+        this._visualStyleDetailsPanel = new WebInspector.VisualStyleDetailsPanel(this);
</ins><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._panelNavigationInfo = [this._computedStyleDetailsPanel.navigationInfo, this._rulesStyleDetailsPanel.navigationInfo];
</del><ins>+        this._panels = [this._computedStyleDetailsPanel, this._rulesStyleDetailsPanel, this._visualStyleDetailsPanel];
+        this._panelNavigationInfo = [this._computedStyleDetailsPanel.navigationInfo, this._rulesStyleDetailsPanel.navigationInfo, this._visualStyleDetailsPanel.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="branchessafari601branchSourceWebInspectorUIUserInterfaceViewsDetailsSectionjs"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/DetailsSection.js (193111 => 193112)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/DetailsSection.js        2015-12-03 18:47:45 UTC (rev 193111)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/DetailsSection.js        2015-12-03 18:47:57 UTC (rev 193112)
</span><span class="lines">@@ -61,6 +61,7 @@
</span><span class="cx"> 
</span><span class="cx">         this._collapsedSetting = new WebInspector.Setting(identifier + &quot;-details-section-collapsed&quot;, !!defaultCollapsedSettingValue);
</span><span class="cx">         this.collapsed = this._collapsedSetting.value;
</span><ins>+        this._expandedByUser = false;
</ins><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     // Public
</span><span class="lines">@@ -115,6 +116,11 @@
</span><span class="cx">             this._contentElement.appendChild(this._groups[i].element);
</span><span class="cx">     }
</span><span class="cx"> 
</span><ins>+    get expandedByUser()
+    {
+        return this._expandedByUser;
+    }
+
</ins><span class="cx">     // Private
</span><span class="cx"> 
</span><span class="cx">     _headerElementClicked(event)
</span><span class="lines">@@ -122,7 +128,9 @@
</span><span class="cx">         if (event.target.isSelfOrDescendant(this._optionsElement))
</span><span class="cx">             return;
</span><span class="cx"> 
</span><del>-        this.collapsed = !this.collapsed;
</del><ins>+        var collapsed = this.collapsed;
+        this.collapsed = !collapsed;
+        this._expandedByUser = collapsed;
</ins><span class="cx"> 
</span><span class="cx">         this._element.scrollIntoViewIfNeeded(false);
</span><span class="cx">     }
</span></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceViewsVisualStyleDetailsPanelcss"></a>
<div class="addfile"><h4>Added: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.css (0 => 193112)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.css                                (rev 0)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.css        2015-12-03 18:47:57 UTC (rev 193112)
</span><span class="lines">@@ -0,0 +1,92 @@
</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.
+ */
+
+.sidebar &gt; .panel.details.css-style .visual &gt; .details-section .details-section &gt; .header {
+    font-weight: normal;
+}
+
+.sidebar &gt; .panel.details.css-style .visual &gt; .details-section .details-section &gt; .header &gt; .visual-style-section-clear {
+    position: absolute;
+    right: 5px;
+    width: 15px;
+    height: 15px;
+    background-image: -webkit-canvas(navigation-item-clear-log-normal);
+    background-size: 15px 15px;
+    opacity: 0.7;
+}
+
+.sidebar &gt; .panel.details.css-style .visual &gt; .details-section .details-section.collapsed &gt; .header &gt; .visual-style-section-clear,
+.sidebar &gt; .panel.details.css-style .visual &gt; .details-section .details-section:not(.modified) &gt; .header &gt; .visual-style-section-clear {
+    display: none;
+}
+
+.sidebar &gt; .panel.details.css-style .visual &gt; .details-section .details-section &gt; .header &gt; span {
+    display: flex;
+}
+
+.sidebar &gt; .panel.details.css-style .visual &gt; .details-section .details-section.modified &gt; .header &gt; span::after {
+    width: 7px;
+    height: 7px;
+    margin: 4px 6px;
+    border-radius: 50%;
+    background-color: hsl(212, 92%, 54%);
+    opacity: 0.5;
+    content: &quot;&quot;;
+}
+
+.sidebar &gt; .panel.details.css-style .visual &gt; .details-section .details-section &gt; .content {
+    margin-top: 5px;
+}
+
+.sidebar &gt; .panel.details.css-style .visual &gt; .details-section .details-section &gt; .content .group &gt; .row {
+    display: flex;
+}
+
+.sidebar &gt; .panel.details.css-style .visual &gt; .details-section .details-section &gt; .content .group &gt; .row:last-child {
+    padding-bottom: 3px;
+}
+
+.sidebar &gt; .panel.details.css-style .visual &gt; .details-section .details-section &gt; .content .group &gt; .row.visual-style-separated-row {
+    border-bottom: 0.5px solid hsl(0, 0%, 83%);
+    margin-bottom: 5px;
+    padding-bottom: 2px;
+}
+
+.sidebar &gt; .panel.details.css-style .visual &gt; .details-section .details-section &gt; .content .group &gt; .row &gt; .visual-style-property-container &gt; .visual-style-property-title {
+    width: 55px;
+}
+
+.sidebar &gt; .panel.details.css-style .visual &gt; .details-section .details-section &gt; .content .group &gt; .row &gt; .visual-style-property-container:not(.layout-reversed):last-child {
+    margin-right: 11px;
+}
+
+.sidebar &gt; .panel.details.css-style .visual.disabled &gt; .details-section:not(.visual-style-selector-section) {
+    opacity: 0.5;
+    pointer-events: none;
+}
+
+.sidebar &gt; .panel.details.css-style .visual.disabled &gt; .details-section:not(.visual-style-selector-section) input {
+    pointer-events: none;
+}
</ins></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceViewsVisualStyleDetailsPaneljs"></a>
<div class="addfile"><h4>Added: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js (0 => 193112)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js                                (rev 0)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js        2015-12-03 18:47:57 UTC (rev 193112)
</span><span class="lines">@@ -0,0 +1,1045 @@
</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.VisualStyleDetailsPanel = class VisualStyleDetailsPanel extends WebInspector.StyleDetailsPanel
+{
+    constructor(delegate)
+    {
+        super(delegate, &quot;visual&quot;, &quot;visual&quot;, WebInspector.UIString(&quot;Styles \u2014 Visual&quot;));
+
+        WebInspector.propertyReferenceInfoTemp = {};
+        this._currentStyle = null;
+        this._forceNextStyleUpdate = false;
+
+        this._sections = {};
+        this._groups = {};
+        this._keywords = {};
+        this._units = {};
+        this._autocompletionPropertyEditors = {};
+
+        // These keywords, as well as the values below, are not localized as they must match the CSS spec.
+        this._keywords.defaults = [&quot;Inherit&quot;, &quot;Initial&quot;];
+        this._keywords.boxModel = this._keywords.defaults.concat([&quot;Auto&quot;]);
+        this._keywords.borderStyle = {
+            basic: this._keywords.defaults.concat([&quot;None&quot;, &quot;Hidden&quot;, &quot;Solid&quot;]),
+            advanced: [&quot;Dashed&quot;, &quot;Dotted&quot;, &quot;Double&quot;, &quot;Groove&quot;, &quot;Hidden&quot;, &quot;Inset&quot;, &quot;None&quot;, &quot;Outset&quot;, &quot;Ridge&quot;]
+        };
+        this._keywords.borderWidth = this._keywords.defaults.concat([&quot;Medium&quot;, &quot;Thick&quot;, &quot;Thin&quot;]);
+
+        this._units.defaultsSansPercent = {
+            basic: [&quot;px&quot;, &quot;em&quot;],
+            advanced: [&quot;ch&quot;, &quot;cm&quot;, &quot;ex&quot;, &quot;in&quot;, &quot;mm&quot;, &quot;pc&quot;, &quot;pt&quot;, &quot;rem&quot;, &quot;vh&quot;, &quot;vw&quot;, &quot;vmax&quot;, &quot;vmin&quot;]
+        };
+        this._units.defaults = {
+            basic: [&quot;%&quot;].concat(this._units.defaultsSansPercent.basic),
+            advanced: this._units.defaultsSansPercent.advanced
+        };
+
+        // Selector Section
+        this._selectorSection = new WebInspector.VisualStyleSelectorSection(this);
+        this._selectorSection.addEventListener(WebInspector.VisualStyleSelectorSection.Event.SelectorChanged, this._updateSections, this);
+        this._selectorSection.addEventListener(WebInspector.VisualStyleSelectorSection.Event.StyleTextChanged, this._prepareForChange, this);
+        this._element.appendChild(this._selectorSection.element);
+
+        // Layout Section
+        this._generateSection(&quot;display&quot;, WebInspector.UIString(&quot;Display&quot;));
+        this._generateSection(&quot;position&quot;, WebInspector.UIString(&quot;Position&quot;));
+        this._generateSection(&quot;float&quot;, WebInspector.UIString(&quot;Float and Clear&quot;));
+        this._generateSection(&quot;dimensions&quot;, WebInspector.UIString(&quot;Dimensions&quot;));
+        this._generateSection(&quot;margin&quot;, WebInspector.UIString(&quot;Margin&quot;));
+        this._generateSection(&quot;padding&quot;, WebInspector.UIString(&quot;Padding&quot;));
+        this._generateSection(&quot;flexbox&quot;, WebInspector.UIString(&quot;Flexbox&quot;));
+
+        this._sections.layout = new WebInspector.DetailsSection(&quot;layout&quot;, WebInspector.UIString(&quot;Layout&quot;), [this._groups.display.section, this._groups.position.section, this._groups.float.section, this._groups.dimensions.section, this._groups.margin.section, this._groups.padding.section, this._groups.flexbox.section]);
+        this._element.appendChild(this._sections.layout.element);
+
+        // Text Section
+        this._generateSection(&quot;text-style&quot;, WebInspector.UIString(&quot;Style&quot;));
+        this._generateSection(&quot;font&quot;, WebInspector.UIString(&quot;Font&quot;));
+        this._generateSection(&quot;text-spacing&quot;, WebInspector.UIString(&quot;Spacing&quot;));
+        this._generateSection(&quot;text-shadow&quot;, WebInspector.UIString(&quot;Shadow&quot;));
+
+        this._sections.text = new WebInspector.DetailsSection(&quot;text&quot;, WebInspector.UIString(&quot;Text&quot;), [this._groups.textStyle.section, this._groups.font.section, this._groups.textSpacing.section, this._groups.textShadow.section]);
+        this._element.appendChild(this._sections.text.element);
+
+        // Background Section
+        this._generateSection(&quot;background-style&quot;, WebInspector.UIString(&quot;Style&quot;));
+        this._generateSection(&quot;border&quot;, WebInspector.UIString(&quot;Border&quot;));
+        this._generateSection(&quot;outline&quot;, WebInspector.UIString(&quot;Outline&quot;));
+        this._generateSection(&quot;box-shadow&quot;, WebInspector.UIString(&quot;Shadow&quot;));
+
+        this._sections.background = new WebInspector.DetailsSection(&quot;background&quot;, WebInspector.UIString(&quot;Background&quot;), [this._groups.backgroundStyle.section, this._groups.border.section, this._groups.outline.section, this._groups.boxShadow.section]);
+        this._element.appendChild(this._sections.background.element);
+
+        // Animation Section
+        this._generateSection(&quot;transition&quot;, WebInspector.UIString(&quot;Transition&quot;));
+
+        this._sections.animation = new WebInspector.DetailsSection(&quot;animation&quot;, WebInspector.UIString(&quot;Animation&quot;), [this._groups.transition.section]);
+        this._element.appendChild(this._sections.animation.element);
+    }
+
+    // Public
+
+    refresh(significantChange)
+    {
+        if (significantChange || this._forceNextStyleUpdate) {
+            this._selectorSection.update(this._nodeStyles);
+            this._updateSections();
+            this._forceNextStyleUpdate = false;
+        }
+
+        super.refresh();
+    }
+
+    // Private
+
+    _generateSection(id, displayName)
+    {
+        if (!id || !displayName)
+            return;
+
+        function replaceDashWithCapital(match) {
+            return match.replace(&quot;-&quot;, &quot;&quot;).toUpperCase();
+        }
+
+        var camelCaseId = id.replace(/-\b\w/g, replaceDashWithCapital);
+
+        function createOptionsElement() {
+            var container = document.createElement(&quot;div&quot;);
+            container.classList.add(&quot;visual-style-section-clear&quot;);
+            container.title = WebInspector.UIString(&quot;Click to clear modified properties&quot;);
+            container.addEventListener(&quot;click&quot;, this._clearModifiedSection.bind(this, camelCaseId));
+            return container;
+        }
+
+        this._groups[camelCaseId] = {
+            section: new WebInspector.DetailsSection(id, displayName, [], createOptionsElement.call(this)),
+            properties: {}
+        };
+
+        var populateFunction = this[&quot;_populate&quot; + camelCaseId.capitalize() + &quot;Section&quot;];
+        populateFunction.call(this);
+    }
+
+    _prepareForChange(event)
+    {
+        this._forceNextStyleUpdate = true;
+    }
+
+    _updateSections(event)
+    {
+        this._currentStyle = this._selectorSection.currentStyle();
+        if (!this._currentStyle)
+            return;
+
+        var disabled = this._currentStyle[WebInspector.VisualStyleDetailsPanel.StyleDisabledSymbol];
+        this._element.classList.toggle(&quot;disabled&quot;, disabled);
+        if (disabled)
+            return;
+
+        for (let key in this._groups)
+            this._updateProperties(this._groups[key], !!event);
+
+        for (let key in this._sections) {
+            var section = this._sections[key];
+            var oneSectionExpanded = false;
+            for (let group of section.groups) {
+                if (!group.collapsed) {
+                    oneSectionExpanded = true;
+                    break;
+                }
+            }
+
+            section.collapsed = !oneSectionExpanded;
+        }
+    }
+
+    _updateProperties(group, forceStyleUpdate)
+    {
+        if (!group.section)
+            return;
+
+        var initialTextList = this._initialTextList;
+        if (!initialTextList)
+            this._currentStyle[WebInspector.VisualStyleDetailsPanel.InitialPropertySectionTextListSymbol] = initialTextList = new WeakMap;
+
+        var initialPropertyText = {};
+        var initialPropertyTextMissing = !initialTextList.has(group);
+        var onePropertyHasValue = false;
+        for (let key in group.properties) {
+            var propertyEditor = group.properties[key];
+            propertyEditor.update(!propertyEditor.style || forceStyleUpdate ? this._currentStyle : null);
+
+            var value = propertyEditor.synthesizedValue;
+            if (value &amp;&amp; !propertyEditor.propertyMissing) {
+                onePropertyHasValue = true;
+                if (initialPropertyTextMissing)
+                    initialPropertyText[key] = value;
+            }
+        }
+
+        if (initialPropertyTextMissing)
+            initialTextList.set(group, initialPropertyText);
+
+        group.section.collapsed = !onePropertyHasValue &amp;&amp; !group.section.expandedByUser;
+        this._sectionModified(group);
+
+        var autocompleteCompatibleProperties = group.autocompleteCompatibleProperties;
+        if (!autocompleteCompatibleProperties || !autocompleteCompatibleProperties.length)
+            return;
+
+        for (let editor of autocompleteCompatibleProperties)
+            this._updateAutocompleteCompatiblePropertyEditor(editor, forceStyleUpdate);
+    }
+
+    _updateAutocompleteCompatiblePropertyEditor(editor, force)
+    {
+        if (!editor || (editor.hasCompletions &amp;&amp; !force))
+            return;
+
+        editor.completions = WebInspector.CSSKeywordCompletions.forProperty(editor.propertyReferenceName);
+    }
+
+    _sectionModified(group)
+    {
+        group.section.element.classList.toggle(&quot;modified&quot;, this._initialPropertyTextModified(group));
+    }
+
+    _clearModifiedSection(groupId)
+    {
+        var group = this._groups[groupId];
+        group.section.element.classList.remove(&quot;modified&quot;);
+        var initialPropertyTextList = this._currentStyle[WebInspector.VisualStyleDetailsPanel.InitialPropertySectionTextListSymbol].get(group);
+        if (!initialPropertyTextList)
+            return;
+
+        var newStyleText = this._currentStyle.text;
+        for (let key in group.properties) {
+            var propertyEditor = group.properties[key];
+            var initialValue = initialPropertyTextList[key] || null;
+            newStyleText = propertyEditor.modifyPropertyText(newStyleText, initialValue);
+            propertyEditor.resetEditorValues(initialValue);
+        }
+
+        this._currentStyle.text = newStyleText;
+    }
+
+    get _initialTextList()
+    {
+        return this._currentStyle[WebInspector.VisualStyleDetailsPanel.InitialPropertySectionTextListSymbol];
+    }
+
+    _initialPropertyTextModified(group)
+    {
+        if (!group.properties)
+            return false;
+
+        var initialPropertyTextList = this._initialTextList.get(group);
+        if (!initialPropertyTextList)
+            return false;
+
+        for (let key in group.properties) {
+            var propertyEditor = group.properties[key];
+            if (propertyEditor.propertyMissing)
+                continue;
+
+            var value = propertyEditor.synthesizedValue;
+            if (value &amp;&amp; initialPropertyTextList[key] !== value)
+                return true;
+        }
+
+        return false;
+    }
+
+    _populateSection(group, groups)
+    {
+        if (!group || !groups)
+            return;
+
+        group.section.groups = groups;
+        for (let key in group.properties)
+            group.properties[key].addEventListener(WebInspector.VisualStylePropertyEditor.Event.ValueDidChange, this._sectionModified.bind(this, group));
+    }
+
+    _populateDisplaySection()
+    {
+        var group = this._groups.display;
+        var properties = group.properties;
+
+        var displayRow = new WebInspector.DetailsSectionRow;
+
+        properties.display = new WebInspector.VisualStyleKeywordPicker(&quot;display&quot;, WebInspector.UIString(&quot;Type&quot;), {
+            basic: [&quot;None&quot;, &quot;Block&quot;, &quot;Flex&quot;, &quot;Inline&quot;, &quot;Inline Block&quot;],
+            advanced: [&quot;Compact&quot;, &quot;Inline Flex&quot;, &quot;Inline Table&quot;, &quot;List Item&quot;, &quot;Table&quot;, &quot;Table Caption&quot;, &quot;Table Cell&quot;, &quot;Table Column&quot;, &quot;Table Column Group&quot;, &quot;Table Footer Group&quot;, &quot;Table Header Group&quot;, &quot;Table Row&quot;, &quot;Table Row Group&quot;, &quot; WAP Marquee&quot;, &quot; WebKit Box&quot;, &quot; WebKit Grid&quot;, &quot; WebKit Inline Box&quot;, &quot; WebKit Inline Grid&quot;]
+        });
+        properties.visibility = new WebInspector.VisualStyleKeywordPicker(&quot;visibility&quot;, WebInspector.UIString(&quot;Visibility&quot;), {
+            basic: [&quot;Hidden&quot;, &quot;Visible&quot;],
+            advanced: [&quot;Collapse&quot;]
+        });
+
+        displayRow.element.appendChild(properties.display.element);
+        displayRow.element.appendChild(properties.visibility.element);
+
+        var sizingRow = new WebInspector.DetailsSectionRow;
+
+        properties.boxSizing = new WebInspector.VisualStyleKeywordPicker(&quot;box-sizing&quot;, WebInspector.UIString(&quot;Sizing&quot;), this._keywords.defaults.concat([&quot;Border Box&quot;, &quot;Content Box&quot;]));
+        properties.cursor = new WebInspector.VisualStyleKeywordPicker(&quot;cursor&quot;, WebInspector.UIString(&quot;Cursor&quot;), {
+            basic: [&quot;Auto&quot;, &quot;Default&quot;, &quot;None&quot;, &quot;Pointer&quot;, &quot;Crosshair&quot;, &quot;Text&quot;],
+            advanced: [&quot;Context Menu&quot;, &quot;Help&quot;, &quot;Progress&quot;, &quot;Wait&quot;, &quot;Cell&quot;, &quot;Vertical Text&quot;, &quot;Alias&quot;, &quot;Copy&quot;, &quot;Move&quot;, &quot;No Drop&quot;, &quot;Not Allowed&quot;, &quot;All Scroll&quot;, &quot;Col Resize&quot;, &quot;Row Resize&quot;, &quot;N Resize&quot;, &quot;E Resize&quot;, &quot;S Resize&quot;, &quot;W Resize&quot;, &quot;NS Resize&quot;, &quot;EW Resize&quot;, &quot;NE Resize&quot;, &quot;NW Resize&quot;, &quot;SE Resize&quot;, &quot;sW Resize&quot;, &quot;NESW Resize&quot;, &quot;NWSE Resize&quot;]
+        });
+
+        sizingRow.element.appendChild(properties.boxSizing.element);
+        sizingRow.element.appendChild(properties.cursor.element);
+
+        var overflowRow = new WebInspector.DetailsSectionRow;
+
+        properties.opacity = new WebInspector.VisualStyleUnitSlider(&quot;opacity&quot;, WebInspector.UIString(&quot;Opacity&quot;));
+        properties.overflow = new WebInspector.VisualStyleKeywordPicker([&quot;overflow-x&quot;, &quot;overflow-y&quot;], WebInspector.UIString(&quot;Overflow&quot;), {
+            basic: [&quot;Initial&quot;, &quot;Auto&quot;, &quot;Hidden&quot;, &quot;Scroll&quot;, &quot;Visible&quot;],
+            advanced: [&quot;Marquee&quot;, &quot;Overlay&quot;, &quot; WebKit Paged X&quot;, &quot; WebKit Paged Y&quot;]
+        });
+
+        overflowRow.element.appendChild(properties.opacity.element);
+        overflowRow.element.appendChild(properties.overflow.element);
+
+        var displayGroup = new WebInspector.DetailsSectionGroup([displayRow, sizingRow, overflowRow]);
+        this._populateSection(group, [displayGroup]);
+    }
+
+    _generateMetricSectionRows(group, prefix, allowNegatives)
+    {
+        var properties = group.properties;
+
+        var hasPrefix = prefix &amp;&amp; prefix.length;
+        var propertyNamePrefix = hasPrefix ? prefix + &quot;-&quot; : &quot;&quot;;
+
+        var top = hasPrefix ? prefix + &quot;Top&quot; : &quot;top&quot;;
+        var bottom = hasPrefix ? prefix + &quot;Bottom&quot; : &quot;bottom&quot;;
+        var left = hasPrefix ? prefix + &quot;Left&quot; : &quot;left&quot;;
+        var right = hasPrefix ? prefix + &quot;Right&quot; : &quot;right&quot;;
+
+        var vertical = new WebInspector.DetailsSectionRow;
+
+        properties[top] = new WebInspector.VisualStyleNumberInputBox(propertyNamePrefix + &quot;top&quot;, WebInspector.UIString(&quot;Top&quot;), this._keywords.boxModel, this._units.defaults, allowNegatives);
+        properties[bottom] = new WebInspector.VisualStyleNumberInputBox(propertyNamePrefix + &quot;bottom&quot;, WebInspector.UIString(&quot;Bottom&quot;), this._keywords.boxModel, this._units.defaults, allowNegatives, true);
+        var verticalLink = new WebInspector.VisualStylePropertyEditorLink([properties[top], properties[bottom]], &quot;link-vertical&quot;);
+
+        vertical.element.appendChild(properties[top].element);
+        vertical.element.appendChild(verticalLink.element);
+        vertical.element.appendChild(properties[bottom].element);
+
+        var horizontal = new WebInspector.DetailsSectionRow;
+
+        properties[left] = new WebInspector.VisualStyleNumberInputBox(propertyNamePrefix + &quot;left&quot;, WebInspector.UIString(&quot;Left&quot;), this._keywords.boxModel, this._units.defaults, allowNegatives);
+        properties[right] = new WebInspector.VisualStyleNumberInputBox(propertyNamePrefix + &quot;right&quot;, WebInspector.UIString(&quot;Right&quot;), this._keywords.boxModel, this._units.defaults, allowNegatives, true);
+        var horizontalLink = new WebInspector.VisualStylePropertyEditorLink([properties[left], properties[right]], &quot;link-horizontal&quot;);
+
+        horizontal.element.appendChild(properties[left].element);
+        horizontal.element.appendChild(horizontalLink.element);
+        horizontal.element.appendChild(properties[right].element);
+
+        var allLinkRow = new WebInspector.DetailsSectionRow;
+        var allLink = new WebInspector.VisualStylePropertyEditorLink([properties[top], properties[bottom], properties[left], properties[right]], &quot;link-all&quot;, [verticalLink, horizontalLink]);
+        allLinkRow.element.appendChild(allLink.element);
+
+        return [vertical, allLinkRow, horizontal];
+    }
+
+    _populatePositionSection()
+    {
+        var group = this._groups.position;
+        var rows = this._generateMetricSectionRows(group, null, true);
+        var properties = group.properties;
+
+        var positionType = new WebInspector.DetailsSectionRow;
+
+        properties.position = new WebInspector.VisualStyleKeywordPicker(&quot;position&quot;, WebInspector.UIString(&quot;Type&quot;), {
+            basic: [&quot;Static&quot;, &quot;Relative&quot;, &quot;Absolute&quot;, &quot;Fixed&quot;],
+            advanced: [&quot; WebKit Sticky&quot;]
+        });
+        properties.zIndex = new WebInspector.VisualStyleNumberInputBox(&quot;z-index&quot;, WebInspector.UIString(&quot;Z-Index&quot;), this._keywords.boxModel, null, true);
+
+        positionType.element.appendChild(properties.position.element);
+        positionType.element.appendChild(properties.zIndex.element);
+        positionType.element.classList.add(&quot;visual-style-separated-row&quot;);
+
+        rows.unshift(positionType)
+
+        var positionGroup = new WebInspector.DetailsSectionGroup(rows);
+        this._populateSection(group, [positionGroup]);
+    }
+
+    _populateFloatSection()
+    {
+        var group = this._groups.float;
+        var properties = group.properties;
+
+        var floatRow = new WebInspector.DetailsSectionRow;
+
+        properties.float = new WebInspector.VisualStyleKeywordIconList(&quot;float&quot;, WebInspector.UIString(&quot;Float&quot;), [&quot;Left&quot;, &quot;Right&quot;, &quot;None&quot;]);
+        floatRow.element.appendChild(properties.float.element);
+
+        var clearRow = new WebInspector.DetailsSectionRow;
+
+        properties.clear = new WebInspector.VisualStyleKeywordIconList(&quot;clear&quot;, WebInspector.UIString(&quot;Clear&quot;), [&quot;Left&quot;, &quot;Right&quot;, &quot;Both&quot;, &quot;None&quot;]);
+        clearRow.element.appendChild(properties.clear.element);
+
+        var floatGroup = new WebInspector.DetailsSectionGroup([floatRow, clearRow]);
+        this._populateSection(group, [floatGroup]);
+    }
+
+    _addMetricsMouseListeners(editor, mode)
+    {
+        function onEditorMouseover() {
+            if (!this._style)
+                return;
+
+            if (!this._style.ownerRule) {
+                WebInspector.domTreeManager.highlightDOMNode(this._style.node.id, mode);
+                return;
+            }
+
+            WebInspector.domTreeManager.highlightSelector(this._style.ownerRule.selectorText, this._style.node.ownerDocument.frameIdentifier, mode);
+        }
+
+        function onEditorMouseout() {
+            WebInspector.domTreeManager.hideDOMNodeHighlight();
+        }
+
+        editor.element.addEventListener(&quot;mouseover&quot;, onEditorMouseover.bind(editor));
+        editor.element.addEventListener(&quot;mouseout&quot;, onEditorMouseout.bind(editor));
+    }
+
+    _populateDimensionsSection()
+    {
+        var group = this._groups.dimensions;
+        var properties = group.properties;
+
+        var dimensionsWidth = new WebInspector.DetailsSectionRow;
+
+        properties.width = new WebInspector.VisualStyleRelativeNumberSlider(&quot;width&quot;, WebInspector.UIString(&quot;Width&quot;), this._keywords.boxModel, this._units.defaults);
+
+        dimensionsWidth.element.appendChild(properties.width.element);
+
+        var dimensionsHeight = new WebInspector.DetailsSectionRow;
+
+        properties.height = new WebInspector.VisualStyleRelativeNumberSlider(&quot;height&quot;, WebInspector.UIString(&quot;Height&quot;), this._keywords.boxModel, this._units.defaults, true);
+
+        dimensionsHeight.element.appendChild(properties.height.element);
+
+        var dimensionsProperties = [properties.width, properties.height];
+        var dimensionsRegularGroup = new WebInspector.DetailsSectionGroup([dimensionsWidth, dimensionsHeight]);
+
+        var dimensionsMinWidth = new WebInspector.DetailsSectionRow;
+
+        properties.minWidth = new WebInspector.VisualStyleRelativeNumberSlider(&quot;min-width&quot;, WebInspector.UIString(&quot;Width&quot;), this._keywords.boxModel, this._units.defaults);
+
+        dimensionsMinWidth.element.appendChild(properties.minWidth.element);
+
+        var dimensionsMinHeight = new WebInspector.DetailsSectionRow;
+
+        properties.minHeight = new WebInspector.VisualStyleRelativeNumberSlider(&quot;min-height&quot;, WebInspector.UIString(&quot;Height&quot;), this._keywords.boxModel, this._units.defaults);
+
+        dimensionsMinHeight.element.appendChild(properties.minHeight.element);
+
+        var dimensionsMinProperties = [properties.minWidth, properties.minHeight];
+        var dimensionsMinGroup = new WebInspector.DetailsSectionGroup([dimensionsMinWidth, dimensionsMinHeight]);
+
+        var dimensionsMaxKeywords = this._keywords.defaults.concat(&quot;None&quot;);
+        var dimensionsMaxWidth = new WebInspector.DetailsSectionRow;
+
+        properties.maxWidth = new WebInspector.VisualStyleRelativeNumberSlider(&quot;max-width&quot;, WebInspector.UIString(&quot;Width&quot;), dimensionsMaxKeywords, this._units.defaults);
+
+        dimensionsMaxWidth.element.appendChild(properties.maxWidth.element);
+
+        var dimensionsMaxHeight = new WebInspector.DetailsSectionRow;
+
+        properties.maxHeight = new WebInspector.VisualStyleRelativeNumberSlider(&quot;max-height&quot;, WebInspector.UIString(&quot;Height&quot;), dimensionsMaxKeywords, this._units.defaults);
+
+        dimensionsMaxHeight.element.appendChild(properties.maxHeight.element);
+
+        var dimensionsMaxProperties = [properties.maxWidth, properties.maxHeight];
+        var dimensionsMaxGroup = new WebInspector.DetailsSectionGroup([dimensionsMaxWidth, dimensionsMaxHeight]);
+
+        var dimensionsTabController = new WebInspector.VisualStyleTabbedPropertiesRow({
+            &quot;default&quot;: {title: WebInspector.UIString(&quot;Default&quot;), element: dimensionsRegularGroup.element, properties: dimensionsProperties},
+            &quot;min&quot;: {title: WebInspector.UIString(&quot;Min&quot;), element: dimensionsMinGroup.element, properties: dimensionsMinProperties},
+            &quot;max&quot;: {title: WebInspector.UIString(&quot;Max&quot;), element: dimensionsMaxGroup.element, properties: dimensionsMaxProperties}
+        });
+
+        var highlightMode = &quot;content&quot;;
+        this._addMetricsMouseListeners(group.properties.width, highlightMode);
+        this._addMetricsMouseListeners(group.properties.height, highlightMode);
+        this._addMetricsMouseListeners(group.properties.minWidth, highlightMode);
+        this._addMetricsMouseListeners(group.properties.minHeight, highlightMode);
+        this._addMetricsMouseListeners(group.properties.maxWidth, highlightMode);
+        this._addMetricsMouseListeners(group.properties.maxHeight, highlightMode);
+
+        var dimensionsGroup = new WebInspector.DetailsSectionGroup([dimensionsTabController, dimensionsRegularGroup, dimensionsMinGroup, dimensionsMaxGroup]);
+        this._populateSection(group, [dimensionsGroup]);
+    }
+
+    _populateMarginSection()
+    {
+        var group = this._groups.margin;
+        var rows = this._generateMetricSectionRows(group, &quot;margin&quot;, true);
+
+        var highlightMode = &quot;margin&quot;;
+        this._addMetricsMouseListeners(group.properties.marginTop, highlightMode);
+        this._addMetricsMouseListeners(group.properties.marginBottom, highlightMode);
+        this._addMetricsMouseListeners(group.properties.marginLeft, highlightMode);
+        this._addMetricsMouseListeners(group.properties.marginRight, highlightMode);
+
+        var marginGroup = new WebInspector.DetailsSectionGroup(rows);
+        this._populateSection(group, [marginGroup]);
+    }
+
+    _populatePaddingSection()
+    {
+        var group = this._groups.padding;
+        var rows = this._generateMetricSectionRows(group, &quot;padding&quot;);
+
+        var highlightMode = &quot;padding&quot;;
+        this._addMetricsMouseListeners(group.properties.paddingTop, highlightMode);
+        this._addMetricsMouseListeners(group.properties.paddingBottom, highlightMode);
+        this._addMetricsMouseListeners(group.properties.paddingLeft, highlightMode);
+        this._addMetricsMouseListeners(group.properties.paddingRight, highlightMode);
+
+        var paddingGroup = new WebInspector.DetailsSectionGroup(rows);
+        this._populateSection(group, [paddingGroup]);
+    }
+
+    _populateFlexboxSection()
+    {
+        var group = this._groups.flexbox;
+        var properties = group.properties;
+
+        var flexOrderRow = new WebInspector.DetailsSectionRow;
+
+        properties.order = new WebInspector.VisualStyleNumberInputBox(&quot;order&quot;, WebInspector.UIString(&quot;Order&quot;), this._keywords.defaults);
+        properties.flexBasis = new WebInspector.VisualStyleNumberInputBox(&quot;flex-basis&quot;, WebInspector.UIString(&quot;Basis&quot;), this._keywords.boxModel, this._units.defaults, true);
+
+        flexOrderRow.element.appendChild(properties.order.element);
+        flexOrderRow.element.appendChild(properties.flexBasis.element);
+
+        var flexSizeRow = new WebInspector.DetailsSectionRow;
+
+        properties.flexGrow = new WebInspector.VisualStyleNumberInputBox(&quot;flex-grow&quot;, WebInspector.UIString(&quot;Grow&quot;), this._keywords.defaults, null);
+        properties.flexShrink = new WebInspector.VisualStyleNumberInputBox(&quot;flex-shrink&quot;, WebInspector.UIString(&quot;Shrink&quot;), this._keywords.defaults, null);
+
+        flexSizeRow.element.appendChild(properties.flexGrow.element);
+        flexSizeRow.element.appendChild(properties.flexShrink.element);
+
+        var flexFlowRow = new WebInspector.DetailsSectionRow;
+
+        properties.flexDirection = new WebInspector.VisualStyleKeywordPicker(&quot;flex-direction&quot;, WebInspector.UIString(&quot;Direction&quot;), this._keywords.defaults.concat([&quot;Row&quot;, &quot;Row Reverse&quot;, &quot;Column&quot;, &quot;Column Reverse&quot;]));
+        properties.flexWrap = new WebInspector.VisualStyleKeywordPicker(&quot;flex-wrap&quot;, WebInspector.UIString(&quot;Wrap&quot;), this._keywords.defaults.concat([&quot;Wrap&quot;, &quot;Wrap Reverse&quot;, &quot;Nowrap&quot;]));
+
+        flexFlowRow.element.appendChild(properties.flexDirection.element);
+        flexFlowRow.element.appendChild(properties.flexWrap.element);
+
+        var flexboxGroup = new WebInspector.DetailsSectionGroup([flexOrderRow, flexSizeRow, flexFlowRow]);
+        this._populateSection(group, [flexboxGroup]);
+    }
+
+    _populateTextStyleSection()
+    {
+        var group = this._groups.textStyle;
+        var properties = group.properties;
+
+        var textAppearanceRow = new WebInspector.DetailsSectionRow;
+
+        properties.color = new WebInspector.VisualStyleColorPicker(&quot;color&quot;, WebInspector.UIString(&quot;Color&quot;));
+        properties.textDirection = new WebInspector.VisualStyleKeywordPicker(&quot;direction&quot;, WebInspector.UIString(&quot;Direction&quot;), this._keywords.defaults.concat([&quot;LTR&quot;, &quot;RTL&quot;]));
+
+        textAppearanceRow.element.appendChild(properties.color.element);
+        textAppearanceRow.element.appendChild(properties.textDirection.element);
+
+        var textAlignRow = new WebInspector.DetailsSectionRow;
+
+        properties.textAlign = new WebInspector.VisualStyleKeywordIconList(&quot;text-align&quot;, WebInspector.UIString(&quot;Align&quot;), [&quot;Left&quot;, &quot;Center&quot;, &quot;Right&quot;, &quot;Justify&quot;]);
+
+        textAlignRow.element.appendChild(properties.textAlign.element);
+
+        var textTransformRow = new WebInspector.DetailsSectionRow;
+
+        properties.textTransform = new WebInspector.VisualStyleKeywordIconList(&quot;text-transform&quot;, WebInspector.UIString(&quot;Transform&quot;), [&quot;Capitalize&quot;, &quot;Uppercase&quot;, &quot;Lowercase&quot;, &quot;None&quot;]);
+
+        textTransformRow.element.appendChild(properties.textTransform.element);
+
+        var textDecorationRow = new WebInspector.DetailsSectionRow;
+
+        properties.textDecoration = new WebInspector.VisualStyleKeywordIconList(&quot;text-decoration&quot;, WebInspector.UIString(&quot;Decoration&quot;), [&quot;Underline&quot;, &quot;Line Through&quot;, &quot;Overline&quot;, &quot;None&quot;]);
+
+        textDecorationRow.element.appendChild(properties.textDecoration.element);
+
+        group.autocompleteCompatibleProperties = [properties.color];
+
+        var textStyleGroup = new WebInspector.DetailsSectionGroup([textAppearanceRow, textAlignRow, textTransformRow, textDecorationRow]);
+        this._populateSection(group, [textStyleGroup]);
+    }
+
+    _populateFontSection()
+    {
+        var group = this._groups.font;
+        var properties = group.properties;
+
+        var fontFamilyRow = new WebInspector.DetailsSectionRow;
+
+        properties.fontFamily = new WebInspector.VisualStyleFontFamilyListEditor(&quot;font-family&quot;, WebInspector.UIString(&quot;Family&quot;));
+
+        fontFamilyRow.element.appendChild(properties.fontFamily.element);
+
+        var fontSizeRow = new WebInspector.DetailsSectionRow;
+
+        properties.fontSize = new WebInspector.VisualStyleNumberInputBox(&quot;font-size&quot;, WebInspector.UIString(&quot;Size&quot;), this._keywords.defaults.concat([&quot;Larger&quot;, &quot;XX Large&quot;, &quot;X Large&quot;, &quot;Large&quot;, &quot;Medium&quot;, &quot;Small&quot;, &quot;X Small&quot;, &quot;XX Small&quot;, &quot;Smaller&quot;]), this._units.defaults);
+
+        properties.fontWeight = new WebInspector.VisualStyleKeywordPicker(&quot;font-weight&quot;, WebInspector.UIString(&quot;Weight&quot;), {
+            basic: this._keywords.defaults.concat([&quot;Bolder&quot;, &quot;Bold&quot;, &quot;Normal&quot;, &quot;Lighter&quot;]),
+            advanced: [&quot;100&quot;, &quot;200&quot;, &quot;300&quot;, &quot;400&quot;, &quot;500&quot;, &quot;600&quot;, &quot;700&quot;, &quot;800&quot;, &quot;900&quot;]
+        });
+
+        fontSizeRow.element.appendChild(properties.fontSize.element);
+        fontSizeRow.element.appendChild(properties.fontWeight.element);
+
+        var fontStyleRow = new WebInspector.DetailsSectionRow;
+
+        properties.fontStyle = new WebInspector.VisualStyleKeywordIconList(&quot;font-style&quot;, WebInspector.UIString(&quot;Style&quot;), [&quot;Italic&quot;, &quot;Normal&quot;]);
+        properties.fontVariant = new WebInspector.VisualStyleKeywordCheckbox(&quot;font-variant&quot;, WebInspector.UIString(&quot;Variant&quot;), &quot;Small Caps&quot;)
+
+        fontStyleRow.element.appendChild(properties.fontStyle.element);
+        fontStyleRow.element.appendChild(properties.fontVariant.element);
+
+        group.autocompleteCompatibleProperties = [properties.fontFamily];
+
+        var fontGroup = new WebInspector.DetailsSectionGroup([fontFamilyRow, fontSizeRow, fontStyleRow]);
+        this._populateSection(group, [fontGroup]);
+    }
+
+    _populateTextSpacingSection()
+    {
+        var group = this._groups.textSpacing;
+        var properties = group.properties;
+
+        var defaultTextKeywords = this._keywords.defaults.concat([&quot;Normal&quot;]);
+
+        var textLayoutRow = new WebInspector.DetailsSectionRow;
+
+        properties.lineHeight = new WebInspector.VisualStyleNumberInputBox(&quot;line-height&quot;, WebInspector.UIString(&quot;Height&quot;), defaultTextKeywords, this._units.defaults);
+        properties.verticalAlign = new WebInspector.VisualStyleNumberInputBox(&quot;vertical-align&quot;, WebInspector.UIString(&quot;Align&quot;), [&quot;Baseline&quot;, &quot;Bottom&quot;].concat(this._keywords.defaults, [&quot;Middle&quot;, &quot;Sub&quot;, &quot;Super&quot;, &quot;Text Bottom&quot;, &quot;Text Top&quot;, &quot;Top&quot;]), this._units.defaults);
+
+        textLayoutRow.element.appendChild(properties.lineHeight.element);
+        textLayoutRow.element.appendChild(properties.verticalAlign.element);
+
+        var textSpacingRow = new WebInspector.DetailsSectionRow;
+
+        properties.letterSpacing = new WebInspector.VisualStyleNumberInputBox(&quot;letter-spacing&quot;, WebInspector.UIString(&quot;Letter&quot;), defaultTextKeywords, this._units.defaults);
+        properties.wordSpacing = new WebInspector.VisualStyleNumberInputBox(&quot;word-spacing&quot;, WebInspector.UIString(&quot;Word&quot;), defaultTextKeywords, this._units.defaults);
+
+        textSpacingRow.element.appendChild(properties.letterSpacing.element);
+        textSpacingRow.element.appendChild(properties.wordSpacing.element);
+
+        var textWhitespaceRow = new WebInspector.DetailsSectionRow;
+
+        properties.textIndent = new WebInspector.VisualStyleNumberInputBox(&quot;text-indent&quot;, WebInspector.UIString(&quot;Indent&quot;), this._keywords.defaults, this._units.defaults);
+        properties.whiteSpace = new WebInspector.VisualStyleKeywordPicker(&quot;white-space&quot;, WebInspector.UIString(&quot;Whitespace&quot;), this._keywords.defaults.concat([&quot;Normal&quot;, &quot;Nowrap&quot;, &quot;Pre&quot;, &quot;Pre Line&quot;, &quot;Pre Wrap&quot;]));
+
+        textWhitespaceRow.element.appendChild(properties.textIndent.element);
+        textWhitespaceRow.element.appendChild(properties.whiteSpace.element);
+
+        var textSpacingGroup = new WebInspector.DetailsSectionGroup([textLayoutRow, textSpacingRow, textWhitespaceRow]);
+        this._populateSection(group, [textSpacingGroup]);
+    }
+
+    _populateTextShadowSection()
+    {
+        var group = this._groups.textShadow;
+        var properties = group.properties;
+
+        var textShadowSizing = new WebInspector.DetailsSectionRow;
+
+        var textShadowH = new WebInspector.VisualStyleNumberInputBox(&quot;text-shadow&quot;, WebInspector.UIString(&quot;Horizontal&quot;), null, this._units.defaultsSansPercent);
+        var textShadowV = new WebInspector.VisualStyleNumberInputBox(&quot;text-shadow&quot;, WebInspector.UIString(&quot;Vertical&quot;), null, this._units.defaultsSansPercent);
+
+        textShadowSizing.element.appendChild(textShadowH.element);
+        textShadowSizing.element.appendChild(textShadowV.element);
+
+        var textShadowStyle = new WebInspector.DetailsSectionRow;
+
+        var textShadowColor = new WebInspector.VisualStyleColorPicker(&quot;text-shadow&quot;, WebInspector.UIString(&quot;Color&quot;));
+        textShadowColor.colorProperty = true;
+        var textShadowBlur = new WebInspector.VisualStyleNumberInputBox(&quot;text-shadow&quot;, WebInspector.UIString(&quot;Blur&quot;), null, this._units.defaultsSansPercent);
+        textShadowBlur.optionalProperty = true;
+
+        textShadowStyle.element.appendChild(textShadowColor.element);
+        textShadowStyle.element.appendChild(textShadowBlur.element);
+
+        properties.textShadow = new WebInspector.VisualStylePropertyCombiner(&quot;text-shadow&quot;, [textShadowH, textShadowV, textShadowBlur, textShadowColor]);
+
+        group.autocompleteCompatibleProperties = [textShadowColor];
+
+        var textShadowGroup = new WebInspector.DetailsSectionGroup([textShadowSizing, textShadowStyle]);
+        this._populateSection(group, [textShadowGroup]);
+    }
+
+    _populateBackgroundStyleSection()
+    {
+        var group = this._groups.backgroundStyle;
+        var properties = group.properties;
+
+        var backgroundStyleRow = new WebInspector.DetailsSectionRow;
+
+        properties.backgroundColor = new WebInspector.VisualStyleColorPicker(&quot;background-color&quot;, WebInspector.UIString(&quot;Color&quot;));
+        properties.backgroundImage = new WebInspector.VisualStyleURLInput(&quot;background-image&quot;, WebInspector.UIString(&quot;Image&quot;));
+
+        backgroundStyleRow.element.appendChild(properties.backgroundColor.element);
+        backgroundStyleRow.element.appendChild(properties.backgroundImage.element);
+
+        var backgroundSizeRow = new WebInspector.DetailsSectionRow;
+
+        var backgroundSizeKeywords = this._keywords.boxModel.concat([&quot;Contain&quot;, &quot;Cover&quot;]);
+        var backgroundSizeX = new WebInspector.VisualStyleNumberInputBox(&quot;background-size&quot;, WebInspector.UIString(&quot;Width&quot;), backgroundSizeKeywords, this._units.defaults);
+        backgroundSizeX.masterProperty = true;
+        var backgroundSizeY = new WebInspector.VisualStyleNumberInputBox(&quot;background-size&quot;, WebInspector.UIString(&quot;Height&quot;), backgroundSizeKeywords, this._units.defaults);
+        backgroundSizeY.masterProperty = true;
+
+        properties.backgroundSize = new WebInspector.VisualStylePropertyCombiner(&quot;background-size&quot;, [backgroundSizeX, backgroundSizeY]);
+
+        backgroundSizeRow.element.appendChild(backgroundSizeX.element);
+        backgroundSizeRow.element.appendChild(backgroundSizeY.element);
+
+        var backgroundRepeatRow = new WebInspector.DetailsSectionRow;
+
+        properties.backgroundRepeat = new WebInspector.VisualStyleKeywordPicker(&quot;background-repeat&quot;, WebInspector.UIString(&quot;Repeat&quot;), this._keywords.defaults.concat([&quot;No Repeat&quot;, &quot;Repeat&quot;, &quot;Repeat X&quot;, &quot;Repeat Y&quot;]));
+        properties.backgroundAttachment = new WebInspector.VisualStyleKeywordPicker(&quot;background-attachment&quot;, WebInspector.UIString(&quot;Attach&quot;), this._keywords.defaults.concat([&quot;Fixed&quot;, &quot;Local&quot;, &quot;Scroll&quot;]));
+
+        backgroundRepeatRow.element.appendChild(properties.backgroundRepeat.element);
+        backgroundRepeatRow.element.appendChild(properties.backgroundAttachment.element);
+
+        var backgroundPositionRow = new WebInspector.DetailsSectionRow;
+
+        var backgroundPositionX = new WebInspector.VisualStyleNumberInputBox(&quot;background-position&quot;, WebInspector.UIString(&quot;Position X&quot;), [&quot;Center&quot;, &quot;Left&quot;, &quot;Right&quot;], this._units.defaults);
+        var backgroundPositionY = new WebInspector.VisualStyleNumberInputBox(&quot;background-position&quot;, WebInspector.UIString(&quot;Position Y&quot;), [&quot;Bottom&quot;, &quot;Center&quot;, &quot;Top&quot;], this._units.defaults);
+
+        properties.backgroundPosition = new WebInspector.VisualStylePropertyCombiner(&quot;background-position&quot;, [backgroundPositionX, backgroundPositionY]);
+
+        backgroundPositionRow.element.appendChild(backgroundPositionX.element);
+        backgroundPositionRow.element.appendChild(backgroundPositionY.element);
+
+        group.autocompleteCompatibleProperties = [properties.backgroundColor];
+
+        var backgroundStyleGroup = new WebInspector.DetailsSectionGroup([backgroundStyleRow, backgroundSizeRow, backgroundRepeatRow, backgroundPositionRow]);
+        this._populateSection(group, [backgroundStyleGroup]);
+    }
+
+    _populateBorderSection()
+    {
+        var group = this._groups.border;
+        var properties = group.properties;
+
+        var borderAllSize = new WebInspector.DetailsSectionRow;
+
+        properties.borderStyle = new WebInspector.VisualStyleKeywordPicker([&quot;border-top-style&quot;, &quot;border-right-style&quot;, &quot;border-bottom-style&quot;, &quot;border-left-style&quot;] , WebInspector.UIString(&quot;Style&quot;), this._keywords.borderStyle);
+        properties.borderStyle.propertyReferenceName = &quot;border-style&quot;;
+        properties.borderWidth = new WebInspector.VisualStyleNumberInputBox([&quot;border-top-width&quot;, &quot;border-right-width&quot;, &quot;border-bottom-width&quot;, &quot;border-left-width&quot;], WebInspector.UIString(&quot;Width&quot;), this._keywords.borderWidth, this._units.defaults);
+        properties.borderWidth.propertyReferenceName = &quot;border-width&quot;;
+
+        borderAllSize.element.appendChild(properties.borderStyle.element);
+        borderAllSize.element.appendChild(properties.borderWidth.element);
+
+        var borderAllStyle = new WebInspector.DetailsSectionRow;
+
+        properties.borderColor = new WebInspector.VisualStyleColorPicker([&quot;border-top-color&quot;, &quot;border-right-color&quot;, &quot;border-bottom-color&quot;, &quot;border-left-color&quot;], WebInspector.UIString(&quot;Color&quot;));
+        properties.borderColor.propertyReferenceName = &quot;border-color&quot;;
+        properties.borderRadius = new WebInspector.VisualStyleNumberInputBox([&quot;border-top-left-radius&quot;, &quot;border-top-right-radius&quot;, &quot;border-bottom-left-radius&quot;, &quot;border-bottom-right-radius&quot;], WebInspector.UIString(&quot;Radius&quot;), this._keywords.defaults, this._units.defaults);
+        properties.borderRadius.propertyReferenceName = &quot;border-radius&quot;;
+
+        borderAllStyle.element.appendChild(properties.borderColor.element);
+        borderAllStyle.element.appendChild(properties.borderRadius.element);
+
+        var borderAllProperties = [properties.borderStyle, properties.borderWidth, properties.borderColor, properties.borderRadius];
+        var borderAllGroup = new WebInspector.DetailsSectionGroup([borderAllSize, borderAllStyle]);
+
+        var borderTopSize = new WebInspector.DetailsSectionRow;
+
+        properties.borderTopStyle = new WebInspector.VisualStyleKeywordPicker(&quot;border-top-style&quot;, WebInspector.UIString(&quot;Style&quot;), this._keywords.borderStyle);
+        properties.borderTopWidth = new WebInspector.VisualStyleNumberInputBox(&quot;border-top-width&quot;, WebInspector.UIString(&quot;Width&quot;), this._keywords.borderWidth, this._units.defaults);
+
+        borderTopSize.element.appendChild(properties.borderTopStyle.element);
+        borderTopSize.element.appendChild(properties.borderTopWidth.element);
+
+        var borderTopStyle = new WebInspector.DetailsSectionRow;
+
+        properties.borderTopColor = new WebInspector.VisualStyleColorPicker(&quot;border-top-color&quot;, WebInspector.UIString(&quot;Color&quot;));
+        properties.borderTopRadius = new WebInspector.VisualStyleNumberInputBox([&quot;border-top-left-radius&quot;, &quot;border-top-right-radius&quot;], WebInspector.UIString(&quot;Radius&quot;), this._keywords.defaults, this._units.defaults);
+
+        borderTopStyle.element.appendChild(properties.borderTopColor.element);
+        borderTopStyle.element.appendChild(properties.borderTopRadius.element);
+
+        var borderTopProperties = [properties.borderTopStyle, properties.borderTopWidth, properties.borderTopColor, properties.borderTopRadius];
+        var borderTopGroup = new WebInspector.DetailsSectionGroup([borderTopSize, borderTopStyle]);
+
+        var borderRightSize = new WebInspector.DetailsSectionRow;
+
+        properties.borderRightStyle = new WebInspector.VisualStyleKeywordPicker(&quot;border-right-style&quot;, WebInspector.UIString(&quot;Style&quot;), this._keywords.borderStyle);
+        properties.borderRightWidth = new WebInspector.VisualStyleNumberInputBox(&quot;border-right-width&quot;, WebInspector.UIString(&quot;Width&quot;), this._keywords.borderWidth, this._units.defaults);
+
+        borderRightSize.element.appendChild(properties.borderRightStyle.element);
+        borderRightSize.element.appendChild(properties.borderRightWidth.element);
+
+        var borderRightStyle = new WebInspector.DetailsSectionRow;
+
+        properties.borderRightColor = new WebInspector.VisualStyleColorPicker(&quot;border-right-color&quot;, WebInspector.UIString(&quot;Color&quot;));
+        properties.borderRightRadius = new WebInspector.VisualStyleNumberInputBox([&quot;border-top-right-radius&quot;, &quot;border-bottom-right-radius&quot;], WebInspector.UIString(&quot;Radius&quot;), this._keywords.defaults, this._units.defaults);
+
+        borderRightStyle.element.appendChild(properties.borderRightColor.element);
+        borderRightStyle.element.appendChild(properties.borderRightRadius.element);
+
+        var borderRightProperties = [properties.borderRightStyle, properties.borderRightWidth, properties.borderRightColor, properties.borderRightRadius];
+        var borderRightGroup = new WebInspector.DetailsSectionGroup([borderRightSize, borderRightStyle]);
+
+        var borderBottomSize = new WebInspector.DetailsSectionRow;
+
+        properties.borderBottomStyle = new WebInspector.VisualStyleKeywordPicker(&quot;border-bottom-style&quot;, WebInspector.UIString(&quot;Style&quot;), this._keywords.borderStyle);
+        properties.borderBottomWidth = new WebInspector.VisualStyleNumberInputBox(&quot;border-bottom-width&quot;, WebInspector.UIString(&quot;Width&quot;), this._keywords.borderWidth, this._units.defaults);
+
+        borderBottomSize.element.appendChild(properties.borderBottomStyle.element);
+        borderBottomSize.element.appendChild(properties.borderBottomWidth.element);
+
+        var borderBottomStyle = new WebInspector.DetailsSectionRow;
+
+        properties.borderBottomColor = new WebInspector.VisualStyleColorPicker(&quot;border-bottom-color&quot;, WebInspector.UIString(&quot;Color&quot;));
+        properties.borderBottomRadius = new WebInspector.VisualStyleNumberInputBox([&quot;border-bottom-left-radius&quot;, &quot;border-bottom-right-radius&quot;], WebInspector.UIString(&quot;Radius&quot;), this._keywords.defaults, this._units.defaults);
+
+        borderBottomStyle.element.appendChild(properties.borderBottomColor.element);
+        borderBottomStyle.element.appendChild(properties.borderBottomRadius.element);
+
+        var borderBottomProperties = [properties.borderBottomStyle, properties.borderBottomWidth, properties.borderBottomColor, properties.borderBottomRadius];
+        var borderBottomGroup = new WebInspector.DetailsSectionGroup([borderBottomSize, borderBottomStyle]);
+
+        var borderLeftSize = new WebInspector.DetailsSectionRow;
+
+        properties.borderLeftStyle = new WebInspector.VisualStyleKeywordPicker(&quot;border-left-style&quot;, WebInspector.UIString(&quot;Style&quot;), this._keywords.borderStyle);
+        properties.borderLeftWidth = new WebInspector.VisualStyleNumberInputBox(&quot;border-left-width&quot;, WebInspector.UIString(&quot;Width&quot;), this._keywords.borderWidth, this._units.defaults);
+
+        borderLeftSize.element.appendChild(properties.borderLeftStyle.element);
+        borderLeftSize.element.appendChild(properties.borderLeftWidth.element);
+
+        var borderLeftStyle = new WebInspector.DetailsSectionRow;
+
+        properties.borderLeftColor = new WebInspector.VisualStyleColorPicker(&quot;border-left-color&quot;, WebInspector.UIString(&quot;Color&quot;));
+        properties.borderLeftRadius = new WebInspector.VisualStyleNumberInputBox([&quot;border-top-left-radius&quot;, &quot;border-bottom-left-radius&quot;], WebInspector.UIString(&quot;Radius&quot;), this._keywords.defaults, this._units.defaults);
+
+        borderLeftStyle.element.appendChild(properties.borderLeftColor.element);
+        borderLeftStyle.element.appendChild(properties.borderLeftRadius.element);
+
+        var borderLeftProperties = [properties.borderLeftStyle, properties.borderLeftWidth, properties.borderLeftColor, properties.borderLeftRadius];
+        var borderLeftGroup = new WebInspector.DetailsSectionGroup([borderLeftSize, borderLeftStyle]);
+
+        var borderTabController = new WebInspector.VisualStyleTabbedPropertiesRow({
+            &quot;all&quot;: {title: WebInspector.UIString(&quot;All&quot;), element: borderAllGroup.element, properties: borderAllProperties},
+            &quot;top&quot;: {title: WebInspector.UIString(&quot;Top&quot;), element: borderTopGroup.element, properties: borderTopProperties},
+            &quot;right&quot;: {title: WebInspector.UIString(&quot;Right&quot;), element: borderRightGroup.element, properties: borderRightProperties},
+            &quot;bottom&quot;: {title: WebInspector.UIString(&quot;Bottom&quot;), element: borderBottomGroup.element, properties: borderBottomProperties},
+            &quot;left&quot;: {title: WebInspector.UIString(&quot;Left&quot;), element: borderLeftGroup.element, properties: borderLeftProperties}
+        });
+
+        var highlightMode = &quot;border&quot;;
+        this._addMetricsMouseListeners(group.properties.borderWidth, highlightMode);
+        this._addMetricsMouseListeners(group.properties.borderTopWidth, highlightMode);
+        this._addMetricsMouseListeners(group.properties.borderBottomWidth, highlightMode);
+        this._addMetricsMouseListeners(group.properties.borderLeftWidth, highlightMode);
+        this._addMetricsMouseListeners(group.properties.borderRightWidth, highlightMode);
+
+        group.autocompleteCompatibleProperties = [properties.borderColor, properties.borderTopColor, properties.borderBottomColor, properties.borderLeftColor, properties.borderRightColor];
+
+        var borderGroup = new WebInspector.DetailsSectionGroup([borderTabController, borderAllGroup, borderTopGroup, borderRightGroup, borderBottomGroup, borderLeftGroup]);
+        this._populateSection(group, [borderGroup]);
+    }
+
+    _populateOutlineSection()
+    {
+        var group = this._groups.outline;
+        var properties = group.properties;
+
+        var outlineSizeRow = new WebInspector.DetailsSectionRow;
+
+        properties.outlineWidth = new WebInspector.VisualStyleNumberInputBox(&quot;outline-width&quot;, WebInspector.UIString(&quot;Width&quot;), this._keywords.borderWidth, this._units.defaults);
+        properties.outlineOffset = new WebInspector.VisualStyleNumberInputBox(&quot;outline-offset&quot;, WebInspector.UIString(&quot;Offset&quot;), this._keywords.defaults, this._units.defaults, true);
+
+        outlineSizeRow.element.appendChild(properties.outlineWidth.element);
+        outlineSizeRow.element.appendChild(properties.outlineOffset.element);
+
+        var outlineStyleRow = new WebInspector.DetailsSectionRow;
+
+        properties.outlineStyle = new WebInspector.VisualStyleKeywordPicker(&quot;outline-style&quot; , WebInspector.UIString(&quot;Style&quot;), this._keywords.borderStyle);
+        properties.outlineColor = new WebInspector.VisualStyleColorPicker(&quot;outline-color&quot;, WebInspector.UIString(&quot;Color&quot;));
+
+        outlineStyleRow.element.appendChild(properties.outlineStyle.element);
+        outlineStyleRow.element.appendChild(properties.outlineColor.element);
+
+        group.autocompleteCompatibleProperties = [properties.outlineColor];
+
+        var outlineGroup = new WebInspector.DetailsSectionGroup([outlineSizeRow, outlineStyleRow]);
+        this._populateSection(group, [outlineGroup]);
+    }
+
+    _populateBoxShadowSection()
+    {
+        var group = this._groups.boxShadow;
+        var properties = group.properties;
+
+        var boxShadowRow = new WebInspector.DetailsSectionRow;
+
+        properties.boxShadow = new WebInspector.VisualStyleCommaSeparatedKeywordEditor(&quot;box-shadow&quot;);
+        properties.boxShadow.element.style.marginLeft = &quot;11px&quot;;
+
+        boxShadowRow.element.appendChild(properties.boxShadow.element);
+
+        var boxShadowHRow = new WebInspector.DetailsSectionRow;
+
+        var boxShadowH = new WebInspector.VisualStyleRelativeNumberSlider(&quot;box-shadow&quot;, WebInspector.UIString(&quot;Left&quot;), null, this._units.defaultsSansPercent, true);
+
+        boxShadowHRow.element.appendChild(boxShadowH.element);
+
+        var boxShadowVRow = new WebInspector.DetailsSectionRow;
+
+        var boxShadowV = new WebInspector.VisualStyleRelativeNumberSlider(&quot;box-shadow&quot;, WebInspector.UIString(&quot;Top&quot;), null, this._units.defaultsSansPercent, true);
+
+        boxShadowVRow.element.appendChild(boxShadowV.element);
+
+        var boxShadowBlurRow = new WebInspector.DetailsSectionRow;
+
+        var boxShadowBlur = new WebInspector.VisualStyleNumberInputBox(&quot;box-shadow&quot;, WebInspector.UIString(&quot;Blur&quot;), null, this._units.defaultsSansPercent);
+        boxShadowBlur.optionalProperty = true;
+        var boxShadowSpread = new WebInspector.VisualStyleNumberInputBox(&quot;box-shadow&quot;, WebInspector.UIString(&quot;Spread&quot;), null, this._units.defaultsSansPercent, true);
+        boxShadowSpread.optionalProperty = true;
+
+        boxShadowBlurRow.element.appendChild(boxShadowBlur.element);
+        boxShadowBlurRow.element.appendChild(boxShadowSpread.element);
+
+        var boxShadowColorRow = new WebInspector.DetailsSectionRow;
+
+        var boxShadowColor = new WebInspector.VisualStyleColorPicker(&quot;box-shadow&quot;, WebInspector.UIString(&quot;Color&quot;));
+        boxShadowColor.colorProperty = true;
+        var boxShadowInset = new WebInspector.VisualStyleKeywordCheckbox(&quot;box-shadow&quot;, WebInspector.UIString(&quot;Inset&quot;), &quot;Inset&quot;);
+        boxShadowInset.optionalProperty = true;
+
+        boxShadowColorRow.element.appendChild(boxShadowColor.element);
+        boxShadowColorRow.element.appendChild(boxShadowInset.element);
+
+        var boxShadowPropertyCombiner = new WebInspector.VisualStylePropertyCombiner(&quot;box-shadow&quot;, [boxShadowH, boxShadowV, boxShadowBlur, boxShadowSpread, boxShadowColor, boxShadowInset]);
+
+        function noRemainingTreeItems() {
+            boxShadowPropertyCombiner.updateValuesFromText(&quot;&quot;);
+            boxShadowH.disabled = true;
+            boxShadowV.disabled = true;
+            boxShadowBlur.disabled = true;
+            boxShadowSpread.disabled = true;
+            boxShadowColor.disabled = true;
+            boxShadowInset.disabled = true;
+        }
+        properties.boxShadow.addEventListener(WebInspector.VisualStyleCommaSeparatedKeywordEditor.Event.NoRemainingTreeItems, noRemainingTreeItems, this);
+
+        function selectedBoxShadowItemValueChanged() {
+            properties.boxShadow.selectedTreeElementValue = boxShadowPropertyCombiner.synthesizedValue;
+        }
+        boxShadowPropertyCombiner.addEventListener(WebInspector.VisualStylePropertyEditor.Event.ValueDidChange, selectedBoxShadowItemValueChanged, this);
+
+        function boxShadowItemSelected(event) {
+            boxShadowPropertyCombiner.updateValuesFromText(event.data.text || &quot;&quot;);
+        }
+        properties.boxShadow.addEventListener(WebInspector.VisualStyleCommaSeparatedKeywordEditor.Event.TreeItemSelected, boxShadowItemSelected, this);
+
+        group.autocompleteCompatibleProperties = [boxShadowColor];
+
+        var boxShadow = new WebInspector.DetailsSectionGroup([boxShadowRow, boxShadowHRow, boxShadowVRow, boxShadowBlurRow, boxShadowColorRow]);
+        this._populateSection(group, [boxShadow]);
+    }
+
+    _populateTransitionSection()
+    {
+        var group = this._groups.transition;
+        var properties = group.properties;
+
+        var transitionRow = new WebInspector.DetailsSectionRow;
+
+        properties.transition = new WebInspector.VisualStyleCommaSeparatedKeywordEditor(&quot;transition&quot;);
+        properties.transition.element.style.marginLeft = &quot;11px&quot;;
+
+        transitionRow.element.appendChild(properties.transition.element);
+
+        var transitionPropertyRow = new WebInspector.DetailsSectionRow;
+
+        var transitionProperty = new WebInspector.VisualStylePropertyNameInput(&quot;transition-property&quot;, WebInspector.UIString(&quot;Property&quot;));
+        var transitionTiming = new WebInspector.VisualStyleTimingEditor(&quot;transition-timing-function&quot;, WebInspector.UIString(&quot;Timing&quot;), [&quot;Linear&quot;, &quot;Ease&quot;, &quot;Ease In&quot;, &quot;Ease Out&quot;, &quot;Ease In Out&quot;]);
+
+        transitionPropertyRow.element.appendChild(transitionProperty.element);
+        transitionPropertyRow.element.appendChild(transitionTiming.element);
+
+        var transitionDurationRow = new WebInspector.DetailsSectionRow;
+
+        var transitionTimeKeywords = [&quot;s&quot;, &quot;ms&quot;];
+        var transitionDuration = new WebInspector.VisualStyleNumberInputBox(&quot;transition-duration&quot;, WebInspector.UIString(&quot;Duration&quot;), null, transitionTimeKeywords);
+        var transitionDelay = new WebInspector.VisualStyleNumberInputBox(&quot;transition-delay&quot;, WebInspector.UIString(&quot;Delay&quot;), null, transitionTimeKeywords);
+        transitionDelay.optionalProperty = true;
+
+        transitionDurationRow.element.appendChild(transitionDuration.element);
+        transitionDurationRow.element.appendChild(transitionDelay.element);
+
+        var transitionPropertyCombiner = new WebInspector.VisualStylePropertyCombiner(&quot;transition&quot;, [transitionProperty, transitionTiming, transitionDuration, transitionDelay]);
+
+        function noRemainingTreeItems() {
+            transitionPropertyCombiner.updateValuesFromText(&quot;&quot;);
+            transitionProperty.disabled = true;
+            transitionTiming.disabled = true;
+            transitionDuration.disabled = true;
+            transitionDelay.disabled = true;
+        }
+        properties.transition.addEventListener(WebInspector.VisualStyleCommaSeparatedKeywordEditor.Event.NoRemainingTreeItems, noRemainingTreeItems, this);
+
+        function selectedtransitionItemValueChanged() {
+            properties.transition.selectedTreeElementValue = transitionPropertyCombiner.synthesizedValue;
+        }
+        transitionPropertyCombiner.addEventListener(WebInspector.VisualStylePropertyEditor.Event.ValueDidChange, selectedtransitionItemValueChanged, this);
+
+        function transitionItemSelected(event) {
+            transitionPropertyCombiner.updateValuesFromText(event.data.text || &quot;&quot;);
+        }
+        properties.transition.addEventListener(WebInspector.VisualStyleCommaSeparatedKeywordEditor.Event.TreeItemSelected, transitionItemSelected, this);
+
+        group.autocompleteCompatibleProperties = [transitionProperty];
+
+        var transitionGroup = new WebInspector.DetailsSectionGroup([transitionRow, transitionPropertyRow, transitionDurationRow]);
+        this._populateSection(group, [transitionGroup]);
+    }
+};
+
+WebInspector.VisualStyleDetailsPanel.StyleDisabledSymbol = Symbol(&quot;visual-style-style-disabled&quot;);
+WebInspector.VisualStyleDetailsPanel.InitialPropertySectionTextListSymbol = Symbol(&quot;visual-style-initial-property-section-text&quot;);
+
+// FIXME: Add information about each property as a form of documentation.  This is currently empty as
+// we do not have permission to use the info on sites like MDN and have not written anything ourselves.
+WebInspector.VisualStyleDetailsPanel.propertyReferenceInfo = {};
</ins></span></pre>
</div>
</div>

</body>
</html>