<!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>[225547] trunk/Source/WebInspectorUI</title>
</head>
<body>

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

<h3>Log Message</h3>
<pre>Web Inspector: Styles: make Computed a top-level sidebar tab
https://bugs.webkit.org/show_bug.cgi?id=174229
<rdar://problem/33170193>

Reviewed by Matt Baker.

Styles dropdown tab selector was removed. Styles and Computed are now top-level sidebar tabs.

Visual styles is no longer visible in the Styles sidebar tabs by default but can be enabled in the settings.

* Localizations/en.lproj/localizedStrings.js:
* UserInterface/Base/Setting.js:
* UserInterface/Main.html:
* UserInterface/Views/CSSStyleDeclarationSection.js:
(WI.CSSStyleDeclarationSection.prototype.findMatchingPropertiesAndSelectors):
* UserInterface/Views/CSSStyleDeclarationTextEditor.js:
(WI.CSSStyleDeclarationTextEditor.prototype.findMatchingProperties):
(WI.CSSStyleDeclarationTextEditor.prototype.removeNonMatchingProperties):
* UserInterface/Views/ComputedStyleDetailsSidebarPanel.js: Added.
(WI.ComputedStyleDetailsSidebarPanel):
* UserInterface/Views/DOMTreeOutline.js:
(WI.DOMTreeOutline.prototype._ondragover):
(WI.DOMTreeOutline.prototype._ondrop):
* UserInterface/Views/ElementsTabContentView.js:
(WI.ElementsTabContentView):
* UserInterface/Views/GeneralStyleDetailsSidebarPanel.css: Renamed from Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css.
* UserInterface/Views/GeneralStyleDetailsSidebarPanel.js: Renamed from Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js.
(WI.GeneralStyleDetailsSidebarPanel):
(WI.GeneralStyleDetailsSidebarPanel.prototype.get panel):
(WI.GeneralStyleDetailsSidebarPanel.prototype.visibilityDidChange):
(WI.GeneralStyleDetailsSidebarPanel.prototype.computedStyleDetailsPanelShowProperty):
(WI.GeneralStyleDetailsSidebarPanel.prototype.layout):
(WI.GeneralStyleDetailsSidebarPanel.prototype.initialLayout):
(WI.GeneralStyleDetailsSidebarPanel.prototype.sizeDidChange):
(WI.GeneralStyleDetailsSidebarPanel.prototype.get _initialScrollOffset):
(WI.GeneralStyleDetailsSidebarPanel.prototype._updateNoForcedPseudoClassesScrollOffset):
(WI.GeneralStyleDetailsSidebarPanel.prototype._showPanel):
(WI.GeneralStyleDetailsSidebarPanel.prototype._newRuleButtonClicked):
(WI.GeneralStyleDetailsSidebarPanel.prototype._newRuleButtonContextMenu):
(WI.GeneralStyleDetailsSidebarPanel.prototype._populateClassToggles):
(WI.GeneralStyleDetailsSidebarPanel.prototype._createToggleForClassName):
(WI.GeneralStyleDetailsSidebarPanel.prototype._filterDidChange):
Styles and Computed tabs share a few UI components, such as force state (:hover, :focus, etc.),
filter field, and CSS class toggle components. To implement this, CSSStyleDetailsSidebarPanel was renamed
to GeneralStyleDetailsSidebarPanel.

CSSStyleDetailsSidebarPanel used to support several panels. This is no longer the case with GeneralStyleDetailsSidebarPanel:
- _initiallySelectedPanel was removed.
- _selectedPanel was replaced by _panel.

* UserInterface/Views/GroupNavigationItem.js:
(WI.GroupNavigationItem.prototype.get minimumWidth):
* UserInterface/Views/NavigationBar.css:
(.navigation-bar .item,):
(.sidebar-navigation-bar):
(.sidebar-navigation-bar .holder):
* UserInterface/Views/NavigationBar.js:
(WI.NavigationBar.prototype._calculateMinimumWidth):
Minor optimization: don't toggle class names when there are no visible navigation items.

* UserInterface/Views/RulesStyleDetailsPanel.js:
(WI.RulesStyleDetailsPanel.prototype.filterDidChange):
* UserInterface/Views/RulesStyleDetailsSidebarPanel.js: Copied from Source/WebInspectorUI/UserInterface/Views/NavigationBar.css.
(WI.RulesStyleDetailsSidebarPanel):
* UserInterface/Views/SearchTabContentView.js:
(WI.SearchTabContentView):
* UserInterface/Views/SettingsTabContentView.js:
(WI.SettingsTabContentView.prototype._createExperimentalSettingsView):
* UserInterface/Views/Sidebar.js:
(WI.Sidebar):
* UserInterface/Views/SidebarNavigationBar.js: Copied from Source/WebInspectorUI/UserInterface/Views/NavigationBar.css.
(WI.SidebarNavigationBar):
(WI.SidebarNavigationBar.prototype.insertNavigationItem):
(WI.SidebarNavigationBar.prototype._calculateMinimumWidth):
SidebarNavigationBar wraps navigation items in an element so it can correctly calculate the width of all items with spacing between them.

* UserInterface/Views/StyleDetailsPanel.js:
(WI.StyleDetailsPanel.prototype.get _initialScrollOffset):
* UserInterface/Views/VisualStyleDetailsSidebarPanel.js: Copied from Source/WebInspectorUI/UserInterface/Views/NavigationBar.css.
(WI.VisualStyleDetailsSidebarPanel):</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUILocalizationsenlprojlocalizedStringsjs">trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceBaseSettingjs">trunk/Source/WebInspectorUI/UserInterface/Base/Setting.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceMainhtml">trunk/Source/WebInspectorUI/UserInterface/Main.html</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDeclarationSectionjs">trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDeclarationTextEditorjs">trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDOMTreeOutlinejs">trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsElementsTabContentViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/ElementsTabContentView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsNavigationBarcss">trunk/Source/WebInspectorUI/UserInterface/Views/NavigationBar.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsNavigationBarjs">trunk/Source/WebInspectorUI/UserInterface/Views/NavigationBar.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsRulesStyleDetailsPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsSearchTabContentViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/SearchTabContentView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsSettingsTabContentViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsSidebarjs">trunk/Source/WebInspectorUI/UserInterface/Views/Sidebar.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsStyleDetailsPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/StyleDetailsPanel.js</a></li>
</ul>

<h3>Added Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsComputedStyleDetailsSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsSidebarPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsGeneralStyleDetailsSidebarPanelcss">trunk/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsGeneralStyleDetailsSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsRulesStyleDetailsSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsSidebarPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsSidebarNavigationBarjs">trunk/Source/WebInspectorUI/UserInterface/Views/SidebarNavigationBar.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleDetailsSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsSidebarPanel.js</a></li>
</ul>

<h3>Removed Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDetailsSidebarPanelcss">trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDetailsSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (225546 => 225547)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog    2017-12-05 22:09:36 UTC (rev 225546)
+++ trunk/Source/WebInspectorUI/ChangeLog       2017-12-05 22:28:20 UTC (rev 225547)
</span><span class="lines">@@ -1,3 +1,86 @@
</span><ins>+2017-12-05  Nikita Vasilyev  <nvasilyev@apple.com>
+
+        Web Inspector: Styles: make Computed a top-level sidebar tab
+        https://bugs.webkit.org/show_bug.cgi?id=174229
+        <rdar://problem/33170193>
+
+        Reviewed by Matt Baker.
+
+        Styles dropdown tab selector was removed. Styles and Computed are now top-level sidebar tabs.
+
+        Visual styles is no longer visible in the Styles sidebar tabs by default but can be enabled in the settings.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        * UserInterface/Base/Setting.js:
+        * UserInterface/Main.html:
+        * UserInterface/Views/CSSStyleDeclarationSection.js:
+        (WI.CSSStyleDeclarationSection.prototype.findMatchingPropertiesAndSelectors):
+        * UserInterface/Views/CSSStyleDeclarationTextEditor.js:
+        (WI.CSSStyleDeclarationTextEditor.prototype.findMatchingProperties):
+        (WI.CSSStyleDeclarationTextEditor.prototype.removeNonMatchingProperties):
+        * UserInterface/Views/ComputedStyleDetailsSidebarPanel.js: Added.
+        (WI.ComputedStyleDetailsSidebarPanel):
+        * UserInterface/Views/DOMTreeOutline.js:
+        (WI.DOMTreeOutline.prototype._ondragover):
+        (WI.DOMTreeOutline.prototype._ondrop):
+        * UserInterface/Views/ElementsTabContentView.js:
+        (WI.ElementsTabContentView):
+        * UserInterface/Views/GeneralStyleDetailsSidebarPanel.css: Renamed from Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css.
+        * UserInterface/Views/GeneralStyleDetailsSidebarPanel.js: Renamed from Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js.
+        (WI.GeneralStyleDetailsSidebarPanel):
+        (WI.GeneralStyleDetailsSidebarPanel.prototype.get panel):
+        (WI.GeneralStyleDetailsSidebarPanel.prototype.visibilityDidChange):
+        (WI.GeneralStyleDetailsSidebarPanel.prototype.computedStyleDetailsPanelShowProperty):
+        (WI.GeneralStyleDetailsSidebarPanel.prototype.layout):
+        (WI.GeneralStyleDetailsSidebarPanel.prototype.initialLayout):
+        (WI.GeneralStyleDetailsSidebarPanel.prototype.sizeDidChange):
+        (WI.GeneralStyleDetailsSidebarPanel.prototype.get _initialScrollOffset):
+        (WI.GeneralStyleDetailsSidebarPanel.prototype._updateNoForcedPseudoClassesScrollOffset):
+        (WI.GeneralStyleDetailsSidebarPanel.prototype._showPanel):
+        (WI.GeneralStyleDetailsSidebarPanel.prototype._newRuleButtonClicked):
+        (WI.GeneralStyleDetailsSidebarPanel.prototype._newRuleButtonContextMenu):
+        (WI.GeneralStyleDetailsSidebarPanel.prototype._populateClassToggles):
+        (WI.GeneralStyleDetailsSidebarPanel.prototype._createToggleForClassName):
+        (WI.GeneralStyleDetailsSidebarPanel.prototype._filterDidChange):
+        Styles and Computed tabs share a few UI components, such as force state (:hover, :focus, etc.),
+        filter field, and CSS class toggle components. To implement this, CSSStyleDetailsSidebarPanel was renamed
+        to GeneralStyleDetailsSidebarPanel.
+
+        CSSStyleDetailsSidebarPanel used to support several panels. This is no longer the case with GeneralStyleDetailsSidebarPanel:
+        - _initiallySelectedPanel was removed.
+        - _selectedPanel was replaced by _panel.
+
+        * UserInterface/Views/GroupNavigationItem.js:
+        (WI.GroupNavigationItem.prototype.get minimumWidth):
+        * UserInterface/Views/NavigationBar.css:
+        (.navigation-bar .item,):
+        (.sidebar-navigation-bar):
+        (.sidebar-navigation-bar .holder):
+        * UserInterface/Views/NavigationBar.js:
+        (WI.NavigationBar.prototype._calculateMinimumWidth):
+        Minor optimization: don't toggle class names when there are no visible navigation items.
+
+        * UserInterface/Views/RulesStyleDetailsPanel.js:
+        (WI.RulesStyleDetailsPanel.prototype.filterDidChange):
+        * UserInterface/Views/RulesStyleDetailsSidebarPanel.js: Copied from Source/WebInspectorUI/UserInterface/Views/NavigationBar.css.
+        (WI.RulesStyleDetailsSidebarPanel):
+        * UserInterface/Views/SearchTabContentView.js:
+        (WI.SearchTabContentView):
+        * UserInterface/Views/SettingsTabContentView.js:
+        (WI.SettingsTabContentView.prototype._createExperimentalSettingsView):
+        * UserInterface/Views/Sidebar.js:
+        (WI.Sidebar):
+        * UserInterface/Views/SidebarNavigationBar.js: Copied from Source/WebInspectorUI/UserInterface/Views/NavigationBar.css.
+        (WI.SidebarNavigationBar):
+        (WI.SidebarNavigationBar.prototype.insertNavigationItem):
+        (WI.SidebarNavigationBar.prototype._calculateMinimumWidth):
+        SidebarNavigationBar wraps navigation items in an element so it can correctly calculate the width of all items with spacing between them.
+
+        * UserInterface/Views/StyleDetailsPanel.js:
+        (WI.StyleDetailsPanel.prototype.get _initialScrollOffset):
+        * UserInterface/Views/VisualStyleDetailsSidebarPanel.js: Copied from Source/WebInspectorUI/UserInterface/Views/NavigationBar.css.
+        (WI.VisualStyleDetailsSidebarPanel):
+
</ins><span class="cx"> 2017-12-05  Joseph Pecoraro  <pecoraro@apple.com>
</span><span class="cx"> 
</span><span class="cx">         Web Inspector: content views for resources loaded through XHR do not reflect declared mime-type
</span></span></pre></div>
<a id="trunkSourceWebInspectorUILocalizationsenlprojlocalizedStringsjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (225546 => 225547)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js   2017-12-05 22:09:36 UTC (rev 225546)
+++ trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js      2017-12-05 22:28:20 UTC (rev 225547)
</span><span class="lines">@@ -536,6 +536,7 @@
</span><span class="cx"> localizedStrings["Layout Invalidated"] = "Layout Invalidated";
</span><span class="cx"> localizedStrings["Left"] = "Left";
</span><span class="cx"> localizedStrings["Legacy Style Editor"] = "Legacy Style Editor";
</span><ins>+localizedStrings["Legacy Visual Styles Panel"] = "Legacy Visual Styles Panel";
</ins><span class="cx"> localizedStrings["Letter"] = "Letter";
</span><span class="cx"> localizedStrings["Ligatures"] = "Ligatures";
</span><span class="cx"> localizedStrings["Line %d"] = "Line %d";
</span><span class="lines">@@ -912,10 +913,9 @@
</span><span class="cx"> localizedStrings["Style Attribute"] = "Style Attribute";
</span><span class="cx"> localizedStrings["Style Rules"] = "Style Rules";
</span><span class="cx"> localizedStrings["Style rule"] = "Style rule";
</span><del>-localizedStrings["Styles"] = "Styles";
</del><span class="cx"> localizedStrings["Styles Invalidated"] = "Styles Invalidated";
</span><del>-localizedStrings["Styles Panel:"] = "Styles Panel:";
</del><span class="cx"> localizedStrings["Styles Recalculated"] = "Styles Recalculated";
</span><ins>+localizedStrings["Styles Sidebar:"] = "Styles Sidebar:";
</ins><span class="cx"> localizedStrings["Styles \u2014 Computed"] = "Styles \u2014 Computed";
</span><span class="cx"> localizedStrings["Styles \u2014 Rules"] = "Styles \u2014 Rules";
</span><span class="cx"> localizedStrings["Styles \u2014 Visual"] = "Styles \u2014 Visual";
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceBaseSettingjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Base/Setting.js (225546 => 225547)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Base/Setting.js        2017-12-05 22:09:36 UTC (rev 225546)
+++ trunk/Source/WebInspectorUI/UserInterface/Base/Setting.js   2017-12-05 22:28:20 UTC (rev 225547)
</span><span class="lines">@@ -123,6 +123,7 @@
</span><span class="cx">     selectedNetworkDetailContentViewIdentifier: new WI.Setting("network-detail-content-view-identifier", "preview"),
</span><span class="cx"> 
</span><span class="cx">     // Experimental
</span><ins>+    experimentalEnableLayersTab: new WI.Setting("experimental-enable-layers-tab", false),
</ins><span class="cx">     experimentalLegacyStyleEditor: new WI.Setting("experimental-legacy-style-editor", false),
</span><del>-    experimentalEnableLayersTab: new WI.Setting("experimental-enable-layers-tab", false),
</del><ins>+    experimentalLegacyVisualSidebar: new WI.Setting("experimental-legacy-visual-sidebar", false),
</ins><span class="cx"> };
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceMainhtml"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (225546 => 225547)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Main.html      2017-12-05 22:09:36 UTC (rev 225546)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html 2017-12-05 22:28:20 UTC (rev 225547)
</span><span class="lines">@@ -40,7 +40,6 @@
</span><span class="cx">     <link rel="stylesheet" href="Views/ButtonToolbarItem.css">
</span><span class="cx">     <link rel="stylesheet" href="Views/CSSStyleDeclarationSection.css">
</span><span class="cx">     <link rel="stylesheet" href="Views/CSSStyleDeclarationTextEditor.css">
</span><del>-    <link rel="stylesheet" href="Views/CSSStyleDetailsSidebarPanel.css">
</del><span class="cx">     <link rel="stylesheet" href="Views/CallFrameIcons.css">
</span><span class="cx">     <link rel="stylesheet" href="Views/CallFrameTreeElement.css">
</span><span class="cx">     <link rel="stylesheet" href="Views/CallFrameView.css">
</span><span class="lines">@@ -91,6 +90,7 @@
</span><span class="cx">     <link rel="stylesheet" href="Views/FolderIcon.css">
</span><span class="cx">     <link rel="stylesheet" href="Views/FontResourceContentView.css">
</span><span class="cx">     <link rel="stylesheet" href="Views/FormattedValue.css">
</span><ins>+    <link rel="stylesheet" href="Views/GeneralStyleDetailsSidebarPanel.css">
</ins><span class="cx">     <link rel="stylesheet" href="Views/GoToLineDialog.css">
</span><span class="cx">     <link rel="stylesheet" href="Views/GradientEditor.css">
</span><span class="cx">     <link rel="stylesheet" href="Views/GradientSlider.css">
</span><span class="lines">@@ -464,7 +464,6 @@
</span><span class="cx">     <script src="Views/NavigationItem.js"></script>
</span><span class="cx">     <script src="Views/Popover.js"></script>
</span><span class="cx">     <script src="Views/SidebarPanel.js"></script>
</span><del>-    <script src="Views/StyleDetailsPanel.js"></script>
</del><span class="cx">     <script src="Views/TabBar.js"></script>
</span><span class="cx">     <script src="Views/TabBarItem.js"></script>
</span><span class="cx">     <script src="Views/TabBrowser.js"></script>
</span><span class="lines">@@ -507,6 +506,12 @@
</span><span class="cx">     <script src="Views/TimelineRecordTreeElement.js"></script>
</span><span class="cx">     <script src="Views/TimelineTreeElement.js"></script>
</span><span class="cx"> 
</span><ins>+    <script src="Views/GeneralStyleDetailsSidebarPanel.js"></script>
+    <script src="Views/RulesStyleDetailsSidebarPanel.js"></script>
+    <script src="Views/ComputedStyleDetailsSidebarPanel.js"></script>
+    <script src="Views/VisualStyleDetailsSidebarPanel.js"></script>
+    <script src="Views/StyleDetailsPanel.js"></script>
+
</ins><span class="cx">     <script src="Views/CanvasTabContentView.js"></script>
</span><span class="cx">     <script src="Views/ConsoleTabContentView.js"></script>
</span><span class="cx">     <script src="Views/DebuggerTabContentView.js"></script>
</span><span class="lines">@@ -544,7 +549,6 @@
</span><span class="cx">     <script src="Views/ButtonToolbarItem.js"></script>
</span><span class="cx">     <script src="Views/CSSStyleDeclarationSection.js"></script>
</span><span class="cx">     <script src="Views/CSSStyleDeclarationTextEditor.js"></script>
</span><del>-    <script src="Views/CSSStyleDetailsSidebarPanel.js"></script>
</del><span class="cx">     <script src="Views/CSSStyleSheetTreeElement.js"></script>
</span><span class="cx">     <script src="Views/CallFrameTreeElement.js"></script>
</span><span class="cx">     <script src="Views/CallFrameView.js"></script>
</span><span class="lines">@@ -723,6 +727,7 @@
</span><span class="cx">     <script src="Views/ShaderProgramContentView.js"></script>
</span><span class="cx">     <script src="Views/ShaderProgramTreeElement.js"></script>
</span><span class="cx">     <script src="Views/Sidebar.js"></script>
</span><ins>+    <script src="Views/SidebarNavigationBar.js"></script>
</ins><span class="cx">     <script src="Views/Slider.js"></script>
</span><span class="cx">     <script src="Views/SoftContextMenu.js"></script>
</span><span class="cx">     <script src="Views/SourceCodeTextEditor.js"></script>
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDeclarationSectionjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js (225546 => 225547)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js    2017-12-05 22:09:36 UTC (rev 225546)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js       2017-12-05 22:28:20 UTC (rev 225547)
</span><span class="lines">@@ -320,15 +320,15 @@
</span><span class="cx"> 
</span><span class="cx">     findMatchingPropertiesAndSelectors(needle)
</span><span class="cx">     {
</span><del>-        this._element.classList.remove(WI.CSSStyleDetailsSidebarPanel.NoFilterMatchInSectionClassName, WI.CSSStyleDetailsSidebarPanel.FilterMatchingSectionHasLabelClassName);
</del><ins>+        this._element.classList.remove(WI.GeneralStyleDetailsSidebarPanel.NoFilterMatchInSectionClassName, WI.GeneralStyleDetailsSidebarPanel.FilterMatchingSectionHasLabelClassName);
</ins><span class="cx"> 
</span><span class="cx">         var hasMatchingSelector = false;
</span><span class="cx"> 
</span><span class="cx">         for (var selectorElement of this._selectorElements) {
</span><del>-            selectorElement.classList.remove(WI.CSSStyleDetailsSidebarPanel.FilterMatchSectionClassName);
</del><ins>+            selectorElement.classList.remove(WI.GeneralStyleDetailsSidebarPanel.FilterMatchSectionClassName);
</ins><span class="cx"> 
</span><span class="cx">             if (needle && selectorElement.textContent.includes(needle)) {
</span><del>-                selectorElement.classList.add(WI.CSSStyleDetailsSidebarPanel.FilterMatchSectionClassName);
</del><ins>+                selectorElement.classList.add(WI.GeneralStyleDetailsSidebarPanel.FilterMatchSectionClassName);
</ins><span class="cx">                 hasMatchingSelector = true;
</span><span class="cx">             }
</span><span class="cx">         }
</span><span class="lines">@@ -341,7 +341,7 @@
</span><span class="cx">         var hasMatchingProperty = this._propertiesTextEditor.findMatchingProperties(needle);
</span><span class="cx"> 
</span><span class="cx">         if (!hasMatchingProperty && !hasMatchingSelector) {
</span><del>-            this._element.classList.add(WI.CSSStyleDetailsSidebarPanel.NoFilterMatchInSectionClassName);
</del><ins>+            this._element.classList.add(WI.GeneralStyleDetailsSidebarPanel.NoFilterMatchInSectionClassName);
</ins><span class="cx">             return false;
</span><span class="cx">         }
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDeclarationTextEditorjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js (225546 => 225547)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js 2017-12-05 22:09:36 UTC (rev 225546)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js    2017-12-05 22:28:20 UTC (rev 225547)
</span><span class="lines">@@ -250,9 +250,9 @@
</span><span class="cx">             var property = propertiesList[i];
</span><span class="cx"> 
</span><span class="cx">             if (matchingProperties[i])
</span><del>-                property.__filterResultClassName = WI.CSSStyleDetailsSidebarPanel.FilterMatchSectionClassName;
</del><ins>+                property.__filterResultClassName = WI.GeneralStyleDetailsSidebarPanel.FilterMatchSectionClassName;
</ins><span class="cx">             else
</span><del>-                property.__filterResultClassName = WI.CSSStyleDetailsSidebarPanel.NoFilterMatchInPropertyClassName;
</del><ins>+                property.__filterResultClassName = WI.GeneralStyleDetailsSidebarPanel.NoFilterMatchInPropertyClassName;
</ins><span class="cx"> 
</span><span class="cx">             this._updateTextMarkerForPropertyIfNeeded(property);
</span><span class="cx">         }
</span><span class="lines">@@ -288,7 +288,7 @@
</span><span class="cx"> 
</span><span class="cx">             if (indexesOfNeedle.length) {
</span><span class="cx">                 matchingPropertyNames.push(property.name);
</span><del>-                property.__filterResultClassName = WI.CSSStyleDetailsSidebarPanel.FilterMatchSectionClassName;
</del><ins>+                property.__filterResultClassName = WI.GeneralStyleDetailsSidebarPanel.FilterMatchSectionClassName;
</ins><span class="cx">                 property.__filterResultNeedlePosition = {start: indexesOfNeedle, length: needle.length};
</span><span class="cx">             }
</span><span class="cx">         }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDetailsSidebarPanelcss"></a>
<div class="delfile"><h4>Deleted: trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css (225546 => 225547)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css  2017-12-05 22:09:36 UTC (rev 225546)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css     2017-12-05 22:28:20 UTC (rev 225547)
</span><span class="lines">@@ -1,214 +0,0 @@
</span><del>-/*
- * Copyright (C) 2013 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 > .panel.details.css-style > .content {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    overflow-y: auto;
-    overflow-x: hidden;
-}
-
-.sidebar > .panel.details.css-style > .content.has-filter-bar {
-    bottom: calc(var(--navigation-bar-height) - 1px);
-}
-
-.sidebar > .panel.details.css-style > .content > .pseudo-classes {
-    padding: 6px 10px;
-    border-bottom: 1px solid var(--border-color);
-
-    display: flex;
-    flex-flow: row wrap;
-    justify-content: space-around;
-}
-
-.sidebar > .panel.details.css-style > .content > .pseudo-classes > .group {
-    display: inline-flex;
-    flex-flow: row wrap;
-    justify-content: space-around;
-    flex: 1;
-}
-
-.sidebar > .panel.details.css-style > .content > .pseudo-classes > .group > label {
-    color: hsl(0, 0%, 37%);
-
-    margin: 0 5px;
-    min-width: 55px;
-
-    display: inline-block;
-    white-space: nowrap;
-}
-
-.sidebar > .panel.details.css-style > .content ~ :matches(.options-container, .class-list-container) {
-    display: flex;
-    align-items: center;
-    position: absolute;
-    z-index: 1;
-    width: 100%;
-    border-top: 1px solid var(--border-color);
-}
-
-.sidebar > .panel.details.css-style > .content ~ .options-container {
-    bottom: 0;
-    height: calc(var(--console-prompt-min-height) - 1px);
-    padding-top: 1px;
-}
-
-.sidebar > .panel.details.css-style > .content:not(.supports-new-rule, .has-filter-bar) ~ :matches(.options-container, .class-list-container) {
-    display: none;
-}
-
-.sidebar > .panel.details.css-style > .content ~ .options-container > .new-rule {
-    width: 15px;
-    min-width: 15px;
-    height: 15px;
-    content: url(../Images/Plus15.svg);
-    opacity: 0.7;
-
-    --panel-details-css-style-content-options-container-new-rule-margin-start: 6px;
-}
-
-body[dir=ltr] .sidebar > .panel.details.css-style > .content ~ .options-container > .new-rule {
-    margin-left: var(--panel-details-css-style-content-options-container-new-rule-margin-start);
-}
-
-body[dir=rtl] .sidebar > .panel.details.css-style > .content ~ .options-container > .new-rule {
-    margin-right: var(--panel-details-css-style-content-options-container-new-rule-margin-start);
-}
-
-.sidebar > .panel.details.css-style > .content ~ .options-container > .filter-bar {
-    width: -webkit-fill-available;
-    background-color: transparent;
-}
-
-.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle {
-    margin: 0 0 1px;
-    padding: 2px 4px 3px;
-    background: none;
-    border: none;
-    border-radius: 3px;
-    white-space: nowrap;
-    -webkit-appearance: none;
-
-    --panel-details-css-style-content-options-container-toggle-class-toggle-margin-end: 5px;
-}
-
-body[dir=ltr] .sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle {
-    margin-right: var(--panel-details-css-style-content-options-container-toggle-class-toggle-margin-end);
-}
-
-body[dir=rtl] .sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle {
-    margin-left: var(--panel-details-css-style-content-options-container-toggle-class-toggle-margin-end);
-}
-
-.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle.selected {
-    color: var(--selected-foreground-color);
-    background-color: var(--selected-background-color);
-}
-
-.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle:not(.selected):hover {
-    color: var(--selected-foreground-color);
-    background-color: var(--selected-background-color-hover);
-}
-
-.sidebar > .panel.details.css-style > .content:not(.supports-new-rule) ~ .options-container > .new-rule,
-.sidebar > .panel.details.css-style > .content:not(.has-filter-bar) ~ .options-container > .filter-bar {
-    display: none;
-}
-
-.sidebar > .panel.details.css-style > .content ~ .class-list-container {
-    flex-wrap: wrap;
-    bottom: calc(var(--console-prompt-min-height) - 1px);
-    max-height: 75px;
-    padding: 3px 2px;
-    background-color: var(--panel-background-color);
-    overflow-y: scroll;
-}
-
-/* FIXME: <https://webkit.org/b/152674> Elements with the "hidden" attribute still show up if "display: flex;" */
-.sidebar > .panel.details.css-style > .content ~ .class-list-container[hidden] {
-    display: none;
-}
-
-.sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class {
-    display: flex;
-    width: 100%;
-}
-
-.sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class > .class-name-input {
-    flex-grow: 1;
-    height: 18px;
-    margin: 0;
-
-    --panel-details-css-style-content-class-list-container-new-class-class-name-input-margin-start: 2px;
-}
-
-body[dir=ltr] .sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class > .class-name-input {
-    margin-left: var(--panel-details-css-style-content-class-list-container-new-class-class-name-input-margin-start);
-}
-
-body[dir=rtl] .sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class > .class-name-input {
-    margin-right: var(--panel-details-css-style-content-class-list-container-new-class-class-name-input-margin-start);
-}
-
-.sidebar > .panel.details.css-style > .content ~ .class-list-container > *:matches(.new-class, .class-toggle) {
-    margin: 1px 3px;
-}
-
-.sidebar > .panel.details.css-style > .content.filter-in-progress .filter-matching {
-    display: inline;
-    background-color: hsla(53, 83%, 53%, 0.5);
-    border-bottom: 1px solid hsl(47, 82%, 60%);
-    opacity: 1;
-}
-
-.sidebar > .panel.details.css-style > .content.filter-in-progress .style-declaration-section {
-    margin-bottom: 0;
-}
-
-.sidebar > .panel.details.css-style > .content.filter-in-progress .style-declaration-section.last-in-group.filter-section-non-matching + .style-declaration-section.filter-section-has-label {
-    margin-top: 0;
-    border-top: none;
-}
-
-.sidebar > .panel.details.css-style > .content.filter-in-progress .style-declaration-section:not(.filter-section-has-label) {
-    margin-top: 0;
-    border-top: none;
-    border-bottom: 1px solid var(--border-color);
-}
-
-.sidebar > .panel.details.css-style > .content.filter-in-progress .style-declaration-section > .header > .selector > .filter-matching {
-    color: black;
-}
-
-.sidebar > .panel.details.css-style > .content.filter-in-progress .filter-section-non-matching {
-    display: none;
-}
-
-.sidebar > .panel.details.css-style > .content.filter-in-progress .filter-property-non-matching {
-    opacity: 0.5;
-}
</del></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDetailsSidebarPaneljs"></a>
<div class="delfile"><h4>Deleted: trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js (225546 => 225547)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js   2017-12-05 22:09:36 UTC (rev 225546)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js      2017-12-05 22:28:20 UTC (rev 225547)
</span><span class="lines">@@ -1,459 +0,0 @@
</span><del>-/*
- * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WI.CSSStyleDetailsSidebarPanel = class CSSStyleDetailsSidebarPanel extends WI.DOMDetailsSidebarPanel
-{
-    constructor()
-    {
-        const dontCreateNavigationItem = true;
-        super("css-style", WI.UIString("Styles"), dontCreateNavigationItem);
-
-        this._selectedPanel = null;
-        this._computedStyleDetailsPanel = new WI.ComputedStyleDetailsPanel(this);
-        this._rulesStyleDetailsPanel = new WI.RulesStyleDetailsPanel(this);
-        this._visualStyleDetailsPanel = new WI.VisualStyleDetailsPanel(this);
-
-        if (WI.settings.experimentalLegacyStyleEditor.value)
-            this._activeRulesStyleDetailsPanel = this._rulesStyleDetailsPanel;
-        else
-            this._activeRulesStyleDetailsPanel = new WI.SpreadsheetRulesStyleDetailsPanel(this);
-
-        this._panels = [this._computedStyleDetailsPanel, this._activeRulesStyleDetailsPanel, this._visualStyleDetailsPanel];
-        this._panelNavigationInfo = [this._computedStyleDetailsPanel.navigationInfo, this._activeRulesStyleDetailsPanel.navigationInfo, this._visualStyleDetailsPanel.navigationInfo];
-
-        this._lastSelectedPanelSetting = new WI.Setting("last-selected-style-details-panel", this._activeRulesStyleDetailsPanel.navigationInfo.identifier);
-        this._classListContainerToggledSetting = new WI.Setting("class-list-container-toggled", false);
-
-        this._initiallySelectedPanel = this._panelMatchingIdentifier(this._lastSelectedPanelSetting.value) || this._activeRulesStyleDetailsPanel;
-
-        this._navigationItem = new WI.ScopeRadioButtonNavigationItem(this.identifier, this.displayName, this._panelNavigationInfo, this._initiallySelectedPanel.navigationInfo);
-        this._navigationItem.addEventListener(WI.ScopeRadioButtonNavigationItem.Event.SelectedItemChanged, this._handleSelectedItemChanged, this);
-
-        this._forcedPseudoClassCheckboxes = {};
-    }
-
-    // Public
-
-    supportsDOMNode(nodeToInspect)
-    {
-        return nodeToInspect.nodeType() === Node.ELEMENT_NODE;
-    }
-
-    visibilityDidChange()
-    {
-        super.visibilityDidChange();
-
-        if (!this._selectedPanel)
-            return;
-
-        if (!this.visible) {
-            this._selectedPanel.hidden();
-            return;
-        }
-
-        this._updateNoForcedPseudoClassesScrollOffset();
-
-        this._selectedPanel.shown();
-        this._selectedPanel.markAsNeedsRefresh(this.domNode);
-    }
-
-    computedStyleDetailsPanelShowProperty(property)
-    {
-        this._activeRulesStyleDetailsPanel.scrollToSectionAndHighlightProperty(property);
-        this._switchPanels(this._activeRulesStyleDetailsPanel);
-
-        this._navigationItem.selectedItemIdentifier = this._lastSelectedPanelSetting.value;
-    }
-
-    // Protected
-
-    layout()
-    {
-        let domNode = this.domNode;
-        if (!domNode)
-            return;
-
-        this.contentView.element.scrollTop = this._initialScrollOffset;
-
-        for (let panel of this._panels) {
-            panel.element._savedScrollTop = undefined;
-            panel.markAsNeedsRefresh(domNode);
-        }
-
-        this._updatePseudoClassCheckboxes();
-
-        if (!this._classListContainer.hidden)
-            this._populateClassToggles();
-    }
-
-    addEventListeners()
-    {
-        let effectiveDOMNode = this.domNode.isPseudoElement() ? this.domNode.parentNode : this.domNode;
-        if (!effectiveDOMNode)
-            return;
-
-        effectiveDOMNode.addEventListener(WI.DOMNode.Event.EnabledPseudoClassesChanged, this._updatePseudoClassCheckboxes, this);
-        effectiveDOMNode.addEventListener(WI.DOMNode.Event.AttributeModified, this._handleNodeAttributeModified, this);
-        effectiveDOMNode.addEventListener(WI.DOMNode.Event.AttributeRemoved, this._handleNodeAttributeRemoved, this);
-    }
-
-    removeEventListeners()
-    {
-        let effectiveDOMNode = this.domNode.isPseudoElement() ? this.domNode.parentNode : this.domNode;
-        if (!effectiveDOMNode)
-            return;
-
-        effectiveDOMNode.removeEventListener(null, null, this);
-    }
-
-    initialLayout()
-    {
-        if (WI.cssStyleManager.canForcePseudoClasses()) {
-            this._forcedPseudoClassContainer = document.createElement("div");
-            this._forcedPseudoClassContainer.className = "pseudo-classes";
-
-            let groupElement = null;
-
-            WI.CSSStyleManager.ForceablePseudoClasses.forEach(function(pseudoClass) {
-                // We don't localize the label since it is a CSS pseudo-class from the CSS standard.
-                let label = pseudoClass.capitalize();
-
-                let labelElement = document.createElement("label");
-
-                let checkboxElement = document.createElement("input");
-                checkboxElement.addEventListener("change", this._forcedPseudoClassCheckboxChanged.bind(this, pseudoClass));
-                checkboxElement.type = "checkbox";
-
-                this._forcedPseudoClassCheckboxes[pseudoClass] = checkboxElement;
-
-                labelElement.appendChild(checkboxElement);
-                labelElement.append(label);
-
-                if (!groupElement || groupElement.children.length === 2) {
-                    groupElement = document.createElement("div");
-                    groupElement.className = "group";
-                    this._forcedPseudoClassContainer.appendChild(groupElement);
-                }
-
-                groupElement.appendChild(labelElement);
-            }, this);
-
-            this.contentView.element.appendChild(this._forcedPseudoClassContainer);
-        }
-
-        this._computedStyleDetailsPanel.addEventListener(WI.StyleDetailsPanel.Event.Refreshed, this._filterDidChange, this);
-        this._rulesStyleDetailsPanel.addEventListener(WI.StyleDetailsPanel.Event.Refreshed, this._filterDidChange, this);
-
-        console.assert(this._initiallySelectedPanel, "Should have an initially selected panel.");
-
-        this._switchPanels(this._initiallySelectedPanel);
-        this._initiallySelectedPanel = null;
-
-        let optionsContainer = this.element.createChild("div", "options-container");
-
-        let newRuleButton = optionsContainer.createChild("img", "new-rule");
-        newRuleButton.title = WI.UIString("Add new rule");
-        newRuleButton.addEventListener("click", this._newRuleButtonClicked.bind(this));
-        newRuleButton.addEventListener("contextmenu", this._newRuleButtonContextMenu.bind(this));
-
-        this._filterBar = new WI.FilterBar;
-        this._filterBar.addEventListener(WI.FilterBar.Event.FilterDidChange, this._filterDidChange, this);
-        optionsContainer.appendChild(this._filterBar.element);
-
-        this._classToggleButton = optionsContainer.createChild("button", "toggle-class-toggle");
-        this._classToggleButton.textContent = WI.UIString("Classes");
-        this._classToggleButton.title = WI.UIString("Toggle Classes");
-        this._classToggleButton.addEventListener("click", this._classToggleButtonClicked.bind(this));
-
-        this._classListContainer = this.element.createChild("div", "class-list-container");
-        this._classListContainer.hidden = true;
-
-        this._addClassContainer = this._classListContainer.createChild("div", "new-class");
-        this._addClassContainer.title = WI.UIString("Add a Class");
-        this._addClassContainer.addEventListener("click", this._addClassContainerClicked.bind(this));
-
-        this._addClassInput = this._addClassContainer.createChild("input", "class-name-input");
-        this._addClassInput.setAttribute("placeholder", WI.UIString("Add New Class"));
-        this._addClassInput.addEventListener("keypress", this._addClassInputKeyPressed.bind(this));
-        this._addClassInput.addEventListener("blur", this._addClassInputBlur.bind(this));
-
-        WI.cssStyleManager.addEventListener(WI.CSSStyleManager.Event.StyleSheetAdded, this._styleSheetAddedOrRemoved, this);
-        WI.cssStyleManager.addEventListener(WI.CSSStyleManager.Event.StyleSheetRemoved, this._styleSheetAddedOrRemoved, this);
-
-        if (this._classListContainerToggledSetting.value)
-            this._classToggleButtonClicked();
-    }
-
-    sizeDidChange()
-    {
-        super.sizeDidChange();
-
-        this._updateNoForcedPseudoClassesScrollOffset();
-
-        if (this._selectedPanel)
-            this._selectedPanel.sizeDidChange();
-    }
-
-    // Private
-
-    get _initialScrollOffset()
-    {
-        if (!WI.cssStyleManager.canForcePseudoClasses())
-            return 0;
-        return this.domNode && this.domNode.enabledPseudoClasses.length ? 0 : WI.CSSStyleDetailsSidebarPanel.NoForcedPseudoClassesScrollOffset;
-    }
-
-    _updateNoForcedPseudoClassesScrollOffset()
-    {
-        if (this._forcedPseudoClassContainer)
-            WI.CSSStyleDetailsSidebarPanel.NoForcedPseudoClassesScrollOffset = this._forcedPseudoClassContainer.offsetHeight;
-    }
-
-    _panelMatchingIdentifier(identifier)
-    {
-        let selectedPanel = null;
-        for (let panel of this._panels) {
-            if (panel.navigationInfo.identifier !== identifier)
-                continue;
-
-            selectedPanel = panel;
-            break;
-        }
-
-        return selectedPanel;
-    }
-
-    _handleSelectedItemChanged()
-    {
-        let selectedIdentifier = this._navigationItem.selectedItemIdentifier;
-        let selectedPanel = this._panelMatchingIdentifier(selectedIdentifier);
-        this._switchPanels(selectedPanel);
-    }
-
-    _switchPanels(selectedPanel)
-    {
-        console.assert(selectedPanel);
-
-        if (this._selectedPanel) {
-            this._selectedPanel.hidden();
-            this._selectedPanel.element._savedScrollTop = this.contentView.element.scrollTop;
-            this.contentView.removeSubview(this._selectedPanel);
-        }
-
-        this._selectedPanel = selectedPanel;
-        if (!this._selectedPanel)
-            return;
-
-        this.contentView.addSubview(this._selectedPanel);
-
-        if (typeof this._selectedPanel.element._savedScrollTop === "number")
-            this.contentView.element.scrollTop = this._selectedPanel.element._savedScrollTop;
-        else
-            this.contentView.element.scrollTop = this._initialScrollOffset;
-
-        let hasFilter = typeof this._selectedPanel.filterDidChange === "function";
-        this.contentView.element.classList.toggle("has-filter-bar", hasFilter);
-        if (this._filterBar)
-            this.contentView.element.classList.toggle(WI.CSSStyleDetailsSidebarPanel.FilterInProgressClassName, hasFilter && this._filterBar.hasActiveFilters());
-
-        this.contentView.element.classList.toggle("supports-new-rule", typeof this._selectedPanel.newRuleButtonClicked === "function");
-        this._selectedPanel.shown();
-
-        this._lastSelectedPanelSetting.value = selectedPanel.navigationInfo.identifier;
-    }
-
-    _forcedPseudoClassCheckboxChanged(pseudoClass, event)
-    {
-        if (!this.domNode)
-            return;
-
-        let effectiveDOMNode = this.domNode.isPseudoElement() ? this.domNode.parentNode : this.domNode;
-
-        effectiveDOMNode.setPseudoClassEnabled(pseudoClass, event.target.checked);
-    }
-
-    _updatePseudoClassCheckboxes()
-    {
-        if (!this.domNode)
-            return;
-
-        let effectiveDOMNode = this.domNode.isPseudoElement() ? this.domNode.parentNode : this.domNode;
-
-        let enabledPseudoClasses = effectiveDOMNode.enabledPseudoClasses;
-
-        for (let pseudoClass in this._forcedPseudoClassCheckboxes) {
-            let checkboxElement = this._forcedPseudoClassCheckboxes[pseudoClass];
-            checkboxElement.checked = enabledPseudoClasses.includes(pseudoClass);
-        }
-    }
-
-    _handleNodeAttributeModified(event)
-    {
-        if (event && event.data && event.data.name === "class")
-            this._populateClassToggles();
-    }
-
-    _handleNodeAttributeRemoved(event)
-    {
-        if (event && event.data && event.data.name === "class")
-            this._populateClassToggles();
-    }
-
-
-    _newRuleButtonClicked()
-    {
-        if (this._selectedPanel && typeof this._selectedPanel.newRuleButtonClicked === "function")
-            this._selectedPanel.newRuleButtonClicked();
-    }
-
-    _newRuleButtonContextMenu(event)
-    {
-        if (this._selectedPanel && typeof this._selectedPanel.newRuleButtonContextMenu === "function")
-            this._selectedPanel.newRuleButtonContextMenu(event);
-    }
-
-    _classToggleButtonClicked(event)
-    {
-        this._classToggleButton.classList.toggle("selected");
-        this._classListContainer.hidden = !this._classListContainer.hidden;
-        this._classListContainerToggledSetting.value = !this._classListContainer.hidden;
-        if (this._classListContainer.hidden)
-            return;
-
-        this._populateClassToggles();
-    }
-
-    _addClassContainerClicked(event)
-    {
-        this._addClassContainer.classList.add("active");
-        this._addClassInput.focus();
-    }
-
-    _addClassInputKeyPressed(event)
-    {
-        if (event.keyCode !== WI.KeyboardShortcut.Key.Enter.keyCode)
-            return;
-
-        this._addClassInput.blur();
-    }
-
-    _addClassInputBlur(event)
-    {
-        this.domNode.toggleClass(this._addClassInput.value, true);
-        this._addClassContainer.classList.remove("active");
-        this._addClassInput.value = null;
-    }
-
-    _populateClassToggles()
-    {
-        // Ensure that _addClassContainer is the first child of _classListContainer.
-        while (this._classListContainer.children.length > 1)
-            this._classListContainer.children[1].remove();
-
-        let classes = this.domNode.getAttribute("class");
-        let classToggledMap = this.domNode[WI.CSSStyleDetailsSidebarPanel.ToggledClassesSymbol];
-        if (!classToggledMap)
-            classToggledMap = this.domNode[WI.CSSStyleDetailsSidebarPanel.ToggledClassesSymbol] = new Map;
-
-        if (classes && classes.length) {
-            for (let className of classes.split(/\s+/))
-                classToggledMap.set(className, true);
-        }
-
-        for (let [className, toggled] of classToggledMap) {
-            if ((toggled && !classes.includes(className)) || (!toggled && classes.includes(className))) {
-                toggled = !toggled;
-                classToggledMap.set(className, toggled);
-            }
-
-            this._createToggleForClassName(className);
-        }
-    }
-
-    _createToggleForClassName(className)
-    {
-        if (!className || !className.length)
-            return;
-
-        let classToggledMap = this.domNode[WI.CSSStyleDetailsSidebarPanel.ToggledClassesSymbol];
-        if (!classToggledMap)
-            return;
-
-        if (!classToggledMap.has(className))
-            classToggledMap.set(className, true);
-
-        let toggled = classToggledMap.get(className);
-
-        let classNameContainer = document.createElement("div");
-        classNameContainer.classList.add("class-toggle");
-
-        let classNameToggle = classNameContainer.createChild("input");
-        classNameToggle.type = "checkbox";
-        classNameToggle.checked = toggled;
-
-        let classNameTitle = classNameContainer.createChild("span");
-        classNameTitle.textContent = className;
-        classNameTitle.draggable = true;
-        classNameTitle.addEventListener("dragstart", (event) => {
-            event.dataTransfer.setData(WI.CSSStyleDetailsSidebarPanel.ToggledClassesDragType, className);
-            event.dataTransfer.effectAllowed = "copy";
-        });
-
-        let classNameToggleChanged = (event) => {
-            this.domNode.toggleClass(className, classNameToggle.checked);
-            classToggledMap.set(className, classNameToggle.checked);
-        };
-
-        classNameToggle.addEventListener("click", classNameToggleChanged);
-        classNameTitle.addEventListener("click", (event) => {
-            classNameToggle.checked = !classNameToggle.checked;
-            classNameToggleChanged();
-        });
-
-        this._classListContainer.appendChild(classNameContainer);
-    }
-
-    _filterDidChange()
-    {
-        this.contentView.element.classList.toggle(WI.CSSStyleDetailsSidebarPanel.FilterInProgressClassName, this._filterBar.hasActiveFilters());
-
-        this._selectedPanel.filterDidChange(this._filterBar);
-    }
-
-    _styleSheetAddedOrRemoved()
-    {
-        this.needsLayout();
-    }
-};
-
-WI.CSSStyleDetailsSidebarPanel.NoForcedPseudoClassesScrollOffset = 30; // Default height of the forced pseudo classes container. Updated in sizeDidChange.
-WI.CSSStyleDetailsSidebarPanel.FilterInProgressClassName = "filter-in-progress";
-WI.CSSStyleDetailsSidebarPanel.FilterMatchingSectionHasLabelClassName = "filter-section-has-label";
-WI.CSSStyleDetailsSidebarPanel.FilterMatchSectionClassName = "filter-matching";
-WI.CSSStyleDetailsSidebarPanel.NoFilterMatchInSectionClassName = "filter-section-non-matching";
-WI.CSSStyleDetailsSidebarPanel.NoFilterMatchInPropertyClassName = "filter-property-non-matching";
-
-WI.CSSStyleDetailsSidebarPanel.ToggledClassesSymbol = Symbol("css-style-details-sidebar-panel-toggled-classes-symbol");
-WI.CSSStyleDetailsSidebarPanel.ToggledClassesDragType = "text/classname";
</del></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsComputedStyleDetailsSidebarPaneljsfromrev225546trunkSourceWebInspectorUIUserInterfaceViewsNavigationBarcss"></a>
<div class="copfile"><h4>Copied: trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsSidebarPanel.js (from rev 225546, trunk/Source/WebInspectorUI/UserInterface/Views/NavigationBar.css) (0 => 225547)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsSidebarPanel.js                              (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsSidebarPanel.js 2017-12-05 22:28:20 UTC (rev 225547)
</span><span class="lines">@@ -0,0 +1,32 @@
</span><ins>+/*
+ * Copyright (C) 2017 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.
+ */
+
+WI.ComputedStyleDetailsSidebarPanel = class ComputedStyleDetailsSidebarPanel extends WI.GeneralStyleDetailsSidebarPanel
+{
+    constructor()
+    {
+        super("style-computed", "Computed", WI.ComputedStyleDetailsPanel);
+    }
+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDOMTreeOutlinejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js (225546 => 225547)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js        2017-12-05 22:09:36 UTC (rev 225546)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js   2017-12-05 22:28:20 UTC (rev 225547)
</span><span class="lines">@@ -362,7 +362,7 @@
</span><span class="cx"> 
</span><span class="cx">     _ondragover(event)
</span><span class="cx">     {
</span><del>-        if (event.dataTransfer.types.includes(WI.CSSStyleDetailsSidebarPanel.ToggledClassesDragType)) {
</del><ins>+        if (event.dataTransfer.types.includes(WI.GeneralStyleDetailsSidebarPanel.ToggledClassesDragType)) {
</ins><span class="cx">             event.preventDefault();
</span><span class="cx">             event.dataTransfer.dropEffect = "copy";
</span><span class="cx">             return false;
</span><span class="lines">@@ -444,7 +444,7 @@
</span><span class="cx"> 
</span><span class="cx">             this._nodeBeingDragged.moveTo(parentNode, anchorNode, callback.bind(this));
</span><span class="cx">         } else {
</span><del>-            let className = event.dataTransfer.getData(WI.CSSStyleDetailsSidebarPanel.ToggledClassesDragType);
</del><ins>+            let className = event.dataTransfer.getData(WI.GeneralStyleDetailsSidebarPanel.ToggledClassesDragType);
</ins><span class="cx">             if (className && treeElement)
</span><span class="cx">                 treeElement.representedObject.toggleClass(className, true);
</span><span class="cx">         }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsElementsTabContentViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ElementsTabContentView.js (225546 => 225547)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ElementsTabContentView.js        2017-12-05 22:09:36 UTC (rev 225546)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ElementsTabContentView.js   2017-12-05 22:28:20 UTC (rev 225547)
</span><span class="lines">@@ -29,11 +29,14 @@
</span><span class="cx">     {
</span><span class="cx">         let {image, title} = WI.ElementsTabContentView.tabInfo();
</span><span class="cx">         let tabBarItem = new WI.GeneralTabBarItem(image, title);
</span><del>-        let detailsSidebarPanelConstructors = [WI.DOMNodeDetailsSidebarPanel, WI.CSSStyleDetailsSidebarPanel];
</del><ins>+        let detailsSidebarPanelConstructors = [WI.RulesStyleDetailsSidebarPanel, WI.ComputedStyleDetailsSidebarPanel, WI.DOMNodeDetailsSidebarPanel];
</ins><span class="cx"> 
</span><span class="cx">         if (window.LayerTreeAgent && !WI.settings.experimentalEnableLayersTab.value)
</span><span class="cx">             detailsSidebarPanelConstructors.push(WI.LayerTreeDetailsSidebarPanel);
</span><span class="cx"> 
</span><ins>+        if (WI.settings.experimentalLegacyVisualSidebar.value)
+            detailsSidebarPanelConstructors.push(WI.VisualStyleDetailsSidebarPanel);
+
</ins><span class="cx">         super(identifier || "elements", "elements", tabBarItem, null, detailsSidebarPanelConstructors, true);
</span><span class="cx"> 
</span><span class="cx">         WI.frameResourceManager.addEventListener(WI.FrameResourceManager.Event.MainFrameDidChange, this._mainFrameDidChange, this);
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsGeneralStyleDetailsSidebarPanelcssfromrev225546trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDetailsSidebarPanelcss"></a>
<div class="copfile"><h4>Copied: trunk/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.css (from rev 225546, trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css) (0 => 225547)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.css                              (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.css 2017-12-05 22:28:20 UTC (rev 225547)
</span><span class="lines">@@ -0,0 +1,214 @@
</span><ins>+/*
+ * Copyright (C) 2013 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 > .panel.details.css-style > .content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.sidebar > .panel.details.css-style > .content.has-filter-bar {
+    bottom: calc(var(--navigation-bar-height) - 1px);
+}
+
+.sidebar > .panel.details.css-style > .content > .pseudo-classes {
+    padding: 6px 10px;
+    border-bottom: 1px solid var(--border-color);
+
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-around;
+}
+
+.sidebar > .panel.details.css-style > .content > .pseudo-classes > .group {
+    display: inline-flex;
+    flex-flow: row wrap;
+    justify-content: space-around;
+    flex: 1;
+}
+
+.sidebar > .panel.details.css-style > .content > .pseudo-classes > .group > label {
+    color: hsl(0, 0%, 37%);
+
+    margin: 0 5px;
+    min-width: 55px;
+
+    display: inline-block;
+    white-space: nowrap;
+}
+
+.sidebar > .panel.details.css-style > .content ~ :matches(.options-container, .class-list-container) {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    z-index: 1;
+    width: 100%;
+    border-top: 1px solid var(--border-color);
+}
+
+.sidebar > .panel.details.css-style > .content ~ .options-container {
+    bottom: 0;
+    height: calc(var(--console-prompt-min-height) - 1px);
+    padding-top: 1px;
+}
+
+.sidebar > .panel.details.css-style > .content:not(.supports-new-rule, .has-filter-bar) ~ :matches(.options-container, .class-list-container) {
+    display: none;
+}
+
+.sidebar > .panel.details.css-style > .content ~ .options-container > .new-rule {
+    width: 15px;
+    min-width: 15px;
+    height: 15px;
+    content: url(../Images/Plus15.svg);
+    opacity: 0.7;
+
+    --panel-details-css-style-content-options-container-new-rule-margin-start: 6px;
+}
+
+body[dir=ltr] .sidebar > .panel.details.css-style > .content ~ .options-container > .new-rule {
+    margin-left: var(--panel-details-css-style-content-options-container-new-rule-margin-start);
+}
+
+body[dir=rtl] .sidebar > .panel.details.css-style > .content ~ .options-container > .new-rule {
+    margin-right: var(--panel-details-css-style-content-options-container-new-rule-margin-start);
+}
+
+.sidebar > .panel.details.css-style > .content ~ .options-container > .filter-bar {
+    width: -webkit-fill-available;
+    background-color: transparent;
+}
+
+.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle {
+    margin: 0 0 1px;
+    padding: 2px 4px 3px;
+    background: none;
+    border: none;
+    border-radius: 3px;
+    white-space: nowrap;
+    -webkit-appearance: none;
+
+    --panel-details-css-style-content-options-container-toggle-class-toggle-margin-end: 5px;
+}
+
+body[dir=ltr] .sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle {
+    margin-right: var(--panel-details-css-style-content-options-container-toggle-class-toggle-margin-end);
+}
+
+body[dir=rtl] .sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle {
+    margin-left: var(--panel-details-css-style-content-options-container-toggle-class-toggle-margin-end);
+}
+
+.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle.selected {
+    color: var(--selected-foreground-color);
+    background-color: var(--selected-background-color);
+}
+
+.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle:not(.selected):hover {
+    color: var(--selected-foreground-color);
+    background-color: var(--selected-background-color-hover);
+}
+
+.sidebar > .panel.details.css-style > .content:not(.supports-new-rule) ~ .options-container > .new-rule,
+.sidebar > .panel.details.css-style > .content:not(.has-filter-bar) ~ .options-container > .filter-bar {
+    display: none;
+}
+
+.sidebar > .panel.details.css-style > .content ~ .class-list-container {
+    flex-wrap: wrap;
+    bottom: calc(var(--console-prompt-min-height) - 1px);
+    max-height: 75px;
+    padding: 3px 2px;
+    background-color: var(--panel-background-color);
+    overflow-y: scroll;
+}
+
+/* FIXME: <https://webkit.org/b/152674> Elements with the "hidden" attribute still show up if "display: flex;" */
+.sidebar > .panel.details.css-style > .content ~ .class-list-container[hidden] {
+    display: none;
+}
+
+.sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class {
+    display: flex;
+    width: 100%;
+}
+
+.sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class > .class-name-input {
+    flex-grow: 1;
+    height: 18px;
+    margin: 0;
+
+    --panel-details-css-style-content-class-list-container-new-class-class-name-input-margin-start: 2px;
+}
+
+body[dir=ltr] .sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class > .class-name-input {
+    margin-left: var(--panel-details-css-style-content-class-list-container-new-class-class-name-input-margin-start);
+}
+
+body[dir=rtl] .sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class > .class-name-input {
+    margin-right: var(--panel-details-css-style-content-class-list-container-new-class-class-name-input-margin-start);
+}
+
+.sidebar > .panel.details.css-style > .content ~ .class-list-container > *:matches(.new-class, .class-toggle) {
+    margin: 1px 3px;
+}
+
+.sidebar > .panel.details.css-style > .content.filter-in-progress .filter-matching {
+    display: inline;
+    background-color: hsla(53, 83%, 53%, 0.5);
+    border-bottom: 1px solid hsl(47, 82%, 60%);
+    opacity: 1;
+}
+
+.sidebar > .panel.details.css-style > .content.filter-in-progress .style-declaration-section {
+    margin-bottom: 0;
+}
+
+.sidebar > .panel.details.css-style > .content.filter-in-progress .style-declaration-section.last-in-group.filter-section-non-matching + .style-declaration-section.filter-section-has-label {
+    margin-top: 0;
+    border-top: none;
+}
+
+.sidebar > .panel.details.css-style > .content.filter-in-progress .style-declaration-section:not(.filter-section-has-label) {
+    margin-top: 0;
+    border-top: none;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.sidebar > .panel.details.css-style > .content.filter-in-progress .style-declaration-section > .header > .selector > .filter-matching {
+    color: black;
+}
+
+.sidebar > .panel.details.css-style > .content.filter-in-progress .filter-section-non-matching {
+    display: none;
+}
+
+.sidebar > .panel.details.css-style > .content.filter-in-progress .filter-property-non-matching {
+    opacity: 0.5;
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsGeneralStyleDetailsSidebarPaneljsfromrev225546trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDetailsSidebarPaneljs"></a>
<div class="copfile"><h4>Copied: trunk/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.js (from rev 225546, trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js) (0 => 225547)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.js                               (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.js  2017-12-05 22:28:20 UTC (rev 225547)
</span><span class="lines">@@ -0,0 +1,403 @@
</span><ins>+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WI.GeneralStyleDetailsSidebarPanel = class GeneralStyleDetailsSidebarPanel extends WI.DOMDetailsSidebarPanel
+{
+    constructor(identifier, displayName, panelConstructor)
+    {
+        super(identifier, displayName);
+
+        this.element.classList.add("css-style");
+        this._panel = new panelConstructor(this);
+
+        this._classListContainerToggledSetting = new WI.Setting("class-list-container-toggled", false);
+        this._forcedPseudoClassCheckboxes = {};
+    }
+
+    // Public
+
+    get panel() { return this._panel; }
+
+    supportsDOMNode(nodeToInspect)
+    {
+        return nodeToInspect.nodeType() === Node.ELEMENT_NODE;
+    }
+
+    visibilityDidChange()
+    {
+        super.visibilityDidChange();
+
+        if (!this._panel)
+            return;
+
+        if (!this.visible) {
+            this._panel.hidden();
+            return;
+        }
+
+        this._updateNoForcedPseudoClassesScrollOffset();
+
+        this._panel.shown();
+        this._panel.markAsNeedsRefresh(this.domNode);
+    }
+
+    computedStyleDetailsPanelShowProperty(property)
+    {
+        this.parentSidebar.selectedSidebarPanel = "style-rules";
+
+        let styleRulesPanel = null;
+        for (let sidebarPanel of this.parentSidebar.sidebarPanels) {
+            if (!(sidebarPanel instanceof WI.RulesStyleDetailsSidebarPanel))
+                continue;
+
+            styleRulesPanel = sidebarPanel;
+            break;
+        }
+
+        console.assert(styleRulesPanel, "Styles panel is missing.");
+        styleRulesPanel.panel.scrollToSectionAndHighlightProperty(property);
+    }
+
+    // Protected
+
+    layout()
+    {
+        let domNode = this.domNode;
+        if (!domNode)
+            return;
+
+        this.contentView.element.scrollTop = this._initialScrollOffset;
+        this._panel.markAsNeedsRefresh(domNode);
+
+        this._updatePseudoClassCheckboxes();
+
+        if (!this._classListContainer.hidden)
+            this._populateClassToggles();
+    }
+
+    addEventListeners()
+    {
+        let effectiveDOMNode = this.domNode.isPseudoElement() ? this.domNode.parentNode : this.domNode;
+        if (!effectiveDOMNode)
+            return;
+
+        effectiveDOMNode.addEventListener(WI.DOMNode.Event.EnabledPseudoClassesChanged, this._updatePseudoClassCheckboxes, this);
+        effectiveDOMNode.addEventListener(WI.DOMNode.Event.AttributeModified, this._handleNodeAttributeModified, this);
+        effectiveDOMNode.addEventListener(WI.DOMNode.Event.AttributeRemoved, this._handleNodeAttributeRemoved, this);
+    }
+
+    removeEventListeners()
+    {
+        let effectiveDOMNode = this.domNode.isPseudoElement() ? this.domNode.parentNode : this.domNode;
+        if (!effectiveDOMNode)
+            return;
+
+        effectiveDOMNode.removeEventListener(null, null, this);
+    }
+
+    initialLayout()
+    {
+        if (WI.cssStyleManager.canForcePseudoClasses()) {
+            this._forcedPseudoClassContainer = document.createElement("div");
+            this._forcedPseudoClassContainer.className = "pseudo-classes";
+
+            let groupElement = null;
+
+            WI.CSSStyleManager.ForceablePseudoClasses.forEach(function(pseudoClass) {
+                // We don't localize the label since it is a CSS pseudo-class from the CSS standard.
+                let label = pseudoClass.capitalize();
+
+                let labelElement = document.createElement("label");
+
+                let checkboxElement = document.createElement("input");
+                checkboxElement.addEventListener("change", this._forcedPseudoClassCheckboxChanged.bind(this, pseudoClass));
+                checkboxElement.type = "checkbox";
+
+                this._forcedPseudoClassCheckboxes[pseudoClass] = checkboxElement;
+
+                labelElement.appendChild(checkboxElement);
+                labelElement.append(label);
+
+                if (!groupElement || groupElement.children.length === 2) {
+                    groupElement = document.createElement("div");
+                    groupElement.className = "group";
+                    this._forcedPseudoClassContainer.appendChild(groupElement);
+                }
+
+                groupElement.appendChild(labelElement);
+            }, this);
+
+            this.contentView.element.appendChild(this._forcedPseudoClassContainer);
+        }
+
+        this._panel.addEventListener(WI.StyleDetailsPanel.Event.Refreshed, this._filterDidChange, this);
+
+        this._showPanel(this._panel);
+
+        let optionsContainer = this.element.createChild("div", "options-container");
+
+        let newRuleButton = optionsContainer.createChild("img", "new-rule");
+        newRuleButton.title = WI.UIString("Add new rule");
+        newRuleButton.addEventListener("click", this._newRuleButtonClicked.bind(this));
+        newRuleButton.addEventListener("contextmenu", this._newRuleButtonContextMenu.bind(this));
+
+        this._filterBar = new WI.FilterBar;
+        this._filterBar.addEventListener(WI.FilterBar.Event.FilterDidChange, this._filterDidChange, this);
+        optionsContainer.appendChild(this._filterBar.element);
+
+        this._classToggleButton = optionsContainer.createChild("button", "toggle-class-toggle");
+        this._classToggleButton.textContent = WI.UIString("Classes");
+        this._classToggleButton.title = WI.UIString("Toggle Classes");
+        this._classToggleButton.addEventListener("click", this._classToggleButtonClicked.bind(this));
+
+        this._classListContainer = this.element.createChild("div", "class-list-container");
+        this._classListContainer.hidden = true;
+
+        this._addClassContainer = this._classListContainer.createChild("div", "new-class");
+        this._addClassContainer.title = WI.UIString("Add a Class");
+        this._addClassContainer.addEventListener("click", this._addClassContainerClicked.bind(this));
+
+        this._addClassInput = this._addClassContainer.createChild("input", "class-name-input");
+        this._addClassInput.setAttribute("placeholder", WI.UIString("Add New Class"));
+        this._addClassInput.addEventListener("keypress", this._addClassInputKeyPressed.bind(this));
+        this._addClassInput.addEventListener("blur", this._addClassInputBlur.bind(this));
+
+        WI.cssStyleManager.addEventListener(WI.CSSStyleManager.Event.StyleSheetAdded, this._styleSheetAddedOrRemoved, this);
+        WI.cssStyleManager.addEventListener(WI.CSSStyleManager.Event.StyleSheetRemoved, this._styleSheetAddedOrRemoved, this);
+
+        if (this._classListContainerToggledSetting.value)
+            this._classToggleButtonClicked();
+    }
+
+    sizeDidChange()
+    {
+        super.sizeDidChange();
+
+        this._updateNoForcedPseudoClassesScrollOffset();
+
+        if (this._panel)
+            this._panel.sizeDidChange();
+    }
+
+    // Private
+
+    get _initialScrollOffset()
+    {
+        if (!WI.cssStyleManager.canForcePseudoClasses())
+            return 0;
+        return this.domNode && this.domNode.enabledPseudoClasses.length ? 0 : WI.GeneralStyleDetailsSidebarPanel.NoForcedPseudoClassesScrollOffset;
+    }
+
+    _updateNoForcedPseudoClassesScrollOffset()
+    {
+        if (this._forcedPseudoClassContainer)
+            WI.GeneralStyleDetailsSidebarPanel.NoForcedPseudoClassesScrollOffset = this._forcedPseudoClassContainer.offsetHeight;
+    }
+
+    _showPanel()
+    {
+        this.contentView.addSubview(this._panel);
+
+        let hasFilter = typeof this._panel.filterDidChange === "function";
+        this.contentView.element.classList.toggle("has-filter-bar", hasFilter);
+        if (this._filterBar)
+            this.contentView.element.classList.toggle(WI.GeneralStyleDetailsSidebarPanel.FilterInProgressClassName, hasFilter && this._filterBar.hasActiveFilters());
+
+        this.contentView.element.classList.toggle("supports-new-rule", typeof this._panel.newRuleButtonClicked === "function");
+        this._panel.shown();
+    }
+
+    _forcedPseudoClassCheckboxChanged(pseudoClass, event)
+    {
+        if (!this.domNode)
+            return;
+
+        let effectiveDOMNode = this.domNode.isPseudoElement() ? this.domNode.parentNode : this.domNode;
+
+        effectiveDOMNode.setPseudoClassEnabled(pseudoClass, event.target.checked);
+    }
+
+    _updatePseudoClassCheckboxes()
+    {
+        if (!this.domNode)
+            return;
+
+        let effectiveDOMNode = this.domNode.isPseudoElement() ? this.domNode.parentNode : this.domNode;
+
+        let enabledPseudoClasses = effectiveDOMNode.enabledPseudoClasses;
+
+        for (let pseudoClass in this._forcedPseudoClassCheckboxes) {
+            let checkboxElement = this._forcedPseudoClassCheckboxes[pseudoClass];
+            checkboxElement.checked = enabledPseudoClasses.includes(pseudoClass);
+        }
+    }
+
+    _handleNodeAttributeModified(event)
+    {
+        if (event && event.data && event.data.name === "class")
+            this._populateClassToggles();
+    }
+
+    _handleNodeAttributeRemoved(event)
+    {
+        if (event && event.data && event.data.name === "class")
+            this._populateClassToggles();
+    }
+
+    _newRuleButtonClicked()
+    {
+        if (this._panel && typeof this._panel.newRuleButtonClicked === "function")
+            this._panel.newRuleButtonClicked();
+    }
+
+    _newRuleButtonContextMenu(event)
+    {
+        if (this._panel && typeof this._panel.newRuleButtonContextMenu === "function")
+            this._panel.newRuleButtonContextMenu(event);
+    }
+
+    _classToggleButtonClicked(event)
+    {
+        this._classToggleButton.classList.toggle("selected");
+        this._classListContainer.hidden = !this._classListContainer.hidden;
+        this._classListContainerToggledSetting.value = !this._classListContainer.hidden;
+        if (this._classListContainer.hidden)
+            return;
+
+        this._populateClassToggles();
+    }
+
+    _addClassContainerClicked(event)
+    {
+        this._addClassContainer.classList.add("active");
+        this._addClassInput.focus();
+    }
+
+    _addClassInputKeyPressed(event)
+    {
+        if (event.keyCode !== WI.KeyboardShortcut.Key.Enter.keyCode)
+            return;
+
+        this._addClassInput.blur();
+    }
+
+    _addClassInputBlur(event)
+    {
+        this.domNode.toggleClass(this._addClassInput.value, true);
+        this._addClassContainer.classList.remove("active");
+        this._addClassInput.value = null;
+    }
+
+    _populateClassToggles()
+    {
+        // Ensure that _addClassContainer is the first child of _classListContainer.
+        while (this._classListContainer.children.length > 1)
+            this._classListContainer.children[1].remove();
+
+        let classes = this.domNode.getAttribute("class");
+        let classToggledMap = this.domNode[WI.GeneralStyleDetailsSidebarPanel.ToggledClassesSymbol];
+        if (!classToggledMap)
+            classToggledMap = this.domNode[WI.GeneralStyleDetailsSidebarPanel.ToggledClassesSymbol] = new Map;
+
+        if (classes && classes.length) {
+            for (let className of classes.split(/\s+/))
+                classToggledMap.set(className, true);
+        }
+
+        for (let [className, toggled] of classToggledMap) {
+            if ((toggled && !classes.includes(className)) || (!toggled && classes.includes(className))) {
+                toggled = !toggled;
+                classToggledMap.set(className, toggled);
+            }
+
+            this._createToggleForClassName(className);
+        }
+    }
+
+    _createToggleForClassName(className)
+    {
+        if (!className || !className.length)
+            return;
+
+        let classToggledMap = this.domNode[WI.GeneralStyleDetailsSidebarPanel.ToggledClassesSymbol];
+        if (!classToggledMap)
+            return;
+
+        if (!classToggledMap.has(className))
+            classToggledMap.set(className, true);
+
+        let toggled = classToggledMap.get(className);
+
+        let classNameContainer = document.createElement("div");
+        classNameContainer.classList.add("class-toggle");
+
+        let classNameToggle = classNameContainer.createChild("input");
+        classNameToggle.type = "checkbox";
+        classNameToggle.checked = toggled;
+
+        let classNameTitle = classNameContainer.createChild("span");
+        classNameTitle.textContent = className;
+        classNameTitle.draggable = true;
+        classNameTitle.addEventListener("dragstart", (event) => {
+            event.dataTransfer.setData(WI.GeneralStyleDetailsSidebarPanel.ToggledClassesDragType, className);
+            event.dataTransfer.effectAllowed = "copy";
+        });
+
+        let classNameToggleChanged = (event) => {
+            this.domNode.toggleClass(className, classNameToggle.checked);
+            classToggledMap.set(className, classNameToggle.checked);
+        };
+
+        classNameToggle.addEventListener("click", classNameToggleChanged);
+        classNameTitle.addEventListener("click", (event) => {
+            classNameToggle.checked = !classNameToggle.checked;
+            classNameToggleChanged();
+        });
+
+        this._classListContainer.appendChild(classNameContainer);
+    }
+
+    _filterDidChange()
+    {
+        this.contentView.element.classList.toggle(WI.GeneralStyleDetailsSidebarPanel.FilterInProgressClassName, this._filterBar.hasActiveFilters());
+
+        this._panel.filterDidChange(this._filterBar);
+    }
+
+    _styleSheetAddedOrRemoved()
+    {
+        this.needsLayout();
+    }
+};
+
+WI.GeneralStyleDetailsSidebarPanel.NoForcedPseudoClassesScrollOffset = 30; // Default height of the forced pseudo classes container. Updated in sizeDidChange.
+WI.GeneralStyleDetailsSidebarPanel.FilterInProgressClassName = "filter-in-progress";
+WI.GeneralStyleDetailsSidebarPanel.FilterMatchingSectionHasLabelClassName = "filter-section-has-label";
+WI.GeneralStyleDetailsSidebarPanel.FilterMatchSectionClassName = "filter-matching";
+WI.GeneralStyleDetailsSidebarPanel.NoFilterMatchInSectionClassName = "filter-section-non-matching";
+WI.GeneralStyleDetailsSidebarPanel.NoFilterMatchInPropertyClassName = "filter-property-non-matching";
+
+WI.GeneralStyleDetailsSidebarPanel.ToggledClassesSymbol = Symbol("css-style-details-sidebar-panel-toggled-classes-symbol");
+WI.GeneralStyleDetailsSidebarPanel.ToggledClassesDragType = "text/classname";
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsNavigationBarcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NavigationBar.css (225546 => 225547)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/NavigationBar.css        2017-12-05 22:09:36 UTC (rev 225546)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NavigationBar.css   2017-12-05 22:28:20 UTC (rev 225547)
</span><span class="lines">@@ -39,7 +39,8 @@
</span><span class="cx">     outline: none;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.navigation-bar .item {
</del><ins>+.navigation-bar .item,
+.sidebar-navigation-bar > .holder .item {
</ins><span class="cx">     display: flex;
</span><span class="cx">     align-items: center;
</span><span class="cx">     flex-wrap: wrap;
</span><span class="lines">@@ -51,3 +52,18 @@
</span><span class="cx"> .navigation-bar .item.force-hidden {
</span><span class="cx">     display: none;
</span><span class="cx"> }
</span><ins>+
+.sidebar-navigation-bar {
+    display: block;
+    text-align: center;
+    height: var(--navigation-bar-height);
+    border-bottom: 1px solid var(--border-color);
+}
+
+.sidebar-navigation-bar .holder {
+    display: inline-flex;
+    align-items: center;
+    height: var(--navigation-bar-height);
+    padding: 0 2px;
+    border-bottom: none;
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsNavigationBarjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NavigationBar.js (225546 => 225547)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/NavigationBar.js 2017-12-05 22:09:36 UTC (rev 225546)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NavigationBar.js    2017-12-05 22:28:20 UTC (rev 225547)
</span><span class="lines">@@ -421,6 +421,10 @@
</span><span class="cx"> 
</span><span class="cx">     _calculateMinimumWidth()
</span><span class="cx">     {
</span><ins>+        let visibleNavigationItems = this._visibleNavigationItems;
+        if (!visibleNavigationItems.length)
+            return 0;
+
</ins><span class="cx">         const wasCollapsed = this.element.classList.contains(WI.NavigationBar.CollapsedStyleClassName);
</span><span class="cx"> 
</span><span class="cx">         // Add the collapsed style class to calculate the width of the items when they are collapsed.
</span><span class="lines">@@ -427,7 +431,7 @@
</span><span class="cx">         if (!wasCollapsed)
</span><span class="cx">             this.element.classList.add(WI.NavigationBar.CollapsedStyleClassName);
</span><span class="cx"> 
</span><del>-        let totalItemWidth = this._visibleNavigationItems.reduce((total, item) => total + item.minimumWidth, 0);
</del><ins>+        let totalItemWidth = visibleNavigationItems.reduce((total, item) => total + item.minimumWidth, 0);
</ins><span class="cx"> 
</span><span class="cx">         // Remove the collapsed style class if we were not collapsed before.
</span><span class="cx">         if (!wasCollapsed)
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsRulesStyleDetailsPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js (225546 => 225547)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js        2017-12-05 22:09:36 UTC (rev 225546)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js   2017-12-05 22:28:20 UTC (rev 225547)
</span><span class="lines">@@ -355,7 +355,7 @@
</span><span class="cx">     {
</span><span class="cx">         for (var labels of this._ruleMediaAndInherticanceList) {
</span><span class="cx">             for (var i = 0; i < labels.length; ++i) {
</span><del>-                labels[i].classList.toggle(WI.CSSStyleDetailsSidebarPanel.NoFilterMatchInSectionClassName, filterBar.hasActiveFilters());
</del><ins>+                labels[i].classList.toggle(WI.GeneralStyleDetailsSidebarPanel.NoFilterMatchInSectionClassName, filterBar.hasActiveFilters());
</ins><span class="cx"> 
</span><span class="cx">                 if (i === labels.length - 1)
</span><span class="cx">                     labels[i].classList.toggle("filter-matching-label", filterBar.hasActiveFilters());
</span><span class="lines">@@ -369,9 +369,9 @@
</span><span class="cx">             if (section.findMatchingPropertiesAndSelectors(filterBar.filters.text) && filterBar.hasActiveFilters()) {
</span><span class="cx">                 if (this._ruleMediaAndInherticanceList[i].length) {
</span><span class="cx">                     for (var label of this._ruleMediaAndInherticanceList[i])
</span><del>-                        label.classList.remove(WI.CSSStyleDetailsSidebarPanel.NoFilterMatchInSectionClassName);
</del><ins>+                        label.classList.remove(WI.GeneralStyleDetailsSidebarPanel.NoFilterMatchInSectionClassName);
</ins><span class="cx">                 } else
</span><del>-                    section.element.classList.add(WI.CSSStyleDetailsSidebarPanel.FilterMatchingSectionHasLabelClassName);
</del><ins>+                    section.element.classList.add(WI.GeneralStyleDetailsSidebarPanel.FilterMatchingSectionHasLabelClassName);
</ins><span class="cx"> 
</span><span class="cx">                 matchFound = true;
</span><span class="cx">             }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsRulesStyleDetailsSidebarPaneljsfromrev225546trunkSourceWebInspectorUIUserInterfaceViewsNavigationBarcss"></a>
<div class="copfile"><h4>Copied: trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsSidebarPanel.js (from rev 225546, trunk/Source/WebInspectorUI/UserInterface/Views/NavigationBar.css) (0 => 225547)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsSidebarPanel.js                         (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsSidebarPanel.js    2017-12-05 22:28:20 UTC (rev 225547)
</span><span class="lines">@@ -0,0 +1,39 @@
</span><ins>+/*
+ * Copyright (C) 2017 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.
+ */
+
+WI.RulesStyleDetailsSidebarPanel = class RulesStyleDetailsSidebarPanel extends WI.GeneralStyleDetailsSidebarPanel
+{
+    constructor()
+    {
+        let rulesStyleDetailsPanelConstructor;
+
+        if (WI.settings.experimentalLegacyStyleEditor.value)
+            rulesStyleDetailsPanelConstructor = WI.RulesStyleDetailsPanel;
+        else
+            rulesStyleDetailsPanelConstructor = WI.SpreadsheetRulesStyleDetailsPanel;
+
+        super("style-rules", "Styles", rulesStyleDetailsPanelConstructor);
+    }
+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsSearchTabContentViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SearchTabContentView.js (225546 => 225547)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/SearchTabContentView.js  2017-12-05 22:09:36 UTC (rev 225546)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SearchTabContentView.js     2017-12-05 22:28:20 UTC (rev 225547)
</span><span class="lines">@@ -30,7 +30,7 @@
</span><span class="cx">         let {image, title} = WI.SearchTabContentView.tabInfo();
</span><span class="cx">         let tabBarItem = new WI.GeneralTabBarItem(image, title);
</span><span class="cx">         let detailsSidebarPanelConstructors = [WI.ResourceDetailsSidebarPanel, WI.ProbeDetailsSidebarPanel,
</span><del>-            WI.DOMNodeDetailsSidebarPanel, WI.CSSStyleDetailsSidebarPanel];
</del><ins>+            WI.DOMNodeDetailsSidebarPanel, WI.ComputedStyleDetailsSidebarPanel, WI.RulesStyleDetailsSidebarPanel];
</ins><span class="cx"> 
</span><span class="cx">         if (window.LayerTreeAgent && !WI.settings.experimentalEnableLayersTab.value)
</span><span class="cx">             detailsSidebarPanelConstructors.push(WI.LayerTreeDetailsSidebarPanel);
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsSettingsTabContentViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js (225546 => 225547)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js        2017-12-05 22:09:36 UTC (rev 225546)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js   2017-12-05 22:28:20 UTC (rev 225547)
</span><span class="lines">@@ -247,8 +247,9 @@
</span><span class="cx">         let experimentalSettingsView = new WI.SettingsView("experimental", WI.UIString("Experimental"));
</span><span class="cx"> 
</span><span class="cx">         if (window.CSSAgent) {
</span><del>-            experimentalSettingsView.addSetting(WI.UIString("Styles Panel:"), WI.settings.experimentalLegacyStyleEditor, WI.UIString("Legacy Style Editor"));
-            experimentalSettingsView.addSeparator();
</del><ins>+            let stylesGroup = experimentalSettingsView.addGroup(WI.UIString("Styles Sidebar:"));
+            stylesGroup.addSetting(WI.settings.experimentalLegacyStyleEditor, WI.UIString("Legacy Style Editor"));
+            stylesGroup.addSetting(WI.settings.experimentalLegacyVisualSidebar, WI.UIString("Legacy Visual Styles Panel"));
</ins><span class="cx">         }
</span><span class="cx"> 
</span><span class="cx">         if (window.LayerTreeAgent) {
</span><span class="lines">@@ -271,6 +272,7 @@
</span><span class="cx">         }
</span><span class="cx"> 
</span><span class="cx">         listenForChange(WI.settings.experimentalLegacyStyleEditor);
</span><ins>+        listenForChange(WI.settings.experimentalLegacyVisualSidebar);
</ins><span class="cx">         listenForChange(WI.settings.experimentalEnableLayersTab);
</span><span class="cx"> 
</span><span class="cx">         this.addSettingsView(experimentalSettingsView);
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsSidebarjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Sidebar.js (225546 => 225547)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/Sidebar.js       2017-12-05 22:09:36 UTC (rev 225546)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Sidebar.js  2017-12-05 22:28:20 UTC (rev 225547)
</span><span class="lines">@@ -42,7 +42,7 @@
</span><span class="cx">         if (hasNavigationBar) {
</span><span class="cx">             this.element.classList.add("has-navigation-bar");
</span><span class="cx"> 
</span><del>-            this._navigationBar = new WI.NavigationBar(null, null, "tablist");
</del><ins>+            this._navigationBar = new WI.SidebarNavigationBar(null, null, "tablist");
</ins><span class="cx">             this._navigationBar.addEventListener(WI.NavigationBar.Event.NavigationItemSelected, this._navigationItemSelected, this);
</span><span class="cx">             this.addSubview(this._navigationBar);
</span><span class="cx">         }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsSidebarNavigationBarjsfromrev225546trunkSourceWebInspectorUIUserInterfaceViewsNavigationBarcss"></a>
<div class="copfile"><h4>Copied: trunk/Source/WebInspectorUI/UserInterface/Views/SidebarNavigationBar.js (from rev 225546, trunk/Source/WebInspectorUI/UserInterface/Views/NavigationBar.css) (0 => 225547)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/SidebarNavigationBar.js                          (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SidebarNavigationBar.js     2017-12-05 22:28:20 UTC (rev 225547)
</span><span class="lines">@@ -0,0 +1,50 @@
</span><ins>+/*
+ * Copyright (C) 2017 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.
+ */
+
+WI.SidebarNavigationBar = class SidebarNavigationBar extends WI.NavigationBar
+{
+    constructor(element, navigationItems, role, label)
+    {
+        super(element, navigationItems, role, label);
+
+        this.element.classList.add("sidebar-navigation-bar");
+        this._holderElement = this.element.appendChild(document.createElement("div"));
+        this._holderElement.className = "holder";
+    }
+
+    // Public
+
+    insertNavigationItem(navigationItem, index)
+    {
+        return super.insertNavigationItem(navigationItem, index, this._holderElement);
+    }
+
+    // Private
+
+    _calculateMinimumWidth()
+    {
+        return this._holderElement.offsetWidth;
+    }
+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsStyleDetailsPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/StyleDetailsPanel.js (225546 => 225547)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/StyleDetailsPanel.js     2017-12-05 22:09:36 UTC (rev 225546)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/StyleDetailsPanel.js        2017-12-05 22:28:20 UTC (rev 225547)
</span><span class="lines">@@ -125,7 +125,7 @@
</span><span class="cx">     {
</span><span class="cx">         if (!WI.cssStyleManager.canForcePseudoClasses())
</span><span class="cx">             return 0;
</span><del>-        return this.nodeStyles.node.enabledPseudoClasses.length ? 0 : WI.CSSStyleDetailsSidebarPanel.NoForcedPseudoClassesScrollOffset;
</del><ins>+        return this.nodeStyles.node.enabledPseudoClasses.length ? 0 : WI.GeneralStyleDetailsSidebarPanel.NoForcedPseudoClassesScrollOffset;
</ins><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     _refreshNodeStyles()
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleDetailsSidebarPaneljsfromrev225546trunkSourceWebInspectorUIUserInterfaceViewsNavigationBarcss"></a>
<div class="copfile"><h4>Copied: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsSidebarPanel.js (from rev 225546, trunk/Source/WebInspectorUI/UserInterface/Views/NavigationBar.css) (0 => 225547)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsSidebarPanel.js                                (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsSidebarPanel.js   2017-12-05 22:28:20 UTC (rev 225547)
</span><span class="lines">@@ -0,0 +1,32 @@
</span><ins>+/*
+ * Copyright (C) 2017 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.
+ */
+
+WI.VisualStyleDetailsSidebarPanel = class VisualStyleDetailsSidebarPanel extends WI.GeneralStyleDetailsSidebarPanel
+{
+    constructor()
+    {
+        super("style-visual", "Visual", WI.VisualStyleDetailsPanel);
+    }
+};
</ins></span></pre>
</div>
</div>

</body>
</html>