<!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>[187895] 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/187895">187895</a></dd>
<dt>Author</dt> <dd>drousso@apple.com</dd>
<dt>Date</dt> <dd>2015-08-04 15:32:08 -0700 (Tue, 04 Aug 2015)</dd>
</dl>
<h3>Log Message</h3>
<pre>Web Inspector: Merge the styles sidebar navigation bar into a selectable item in the elements sidebar
https://bugs.webkit.org/show_bug.cgi?id=146878
Reviewed by Timothy Hatcher.
Replaced the default navigationItem of the CSSStyleDetailsSidebarPanel with a
ScopeRadioButtonNavigationItem that will open a select element containing the labels
of each style sidebar when reselected.
* Localizations/en.lproj/localizedStrings.js:
* UserInterface/Main.html:
* UserInterface/Views/ComputedStyleDetailsPanel.js:
(WebInspector.ComputedStyleDetailsPanel):
* UserInterface/Views/CSSStyleDetailsSidebarPanel.css:
(.sidebar > .panel.details.css-style > .content):
* UserInterface/Views/CSSStyleDetailsSidebarPanel.js:
(WebInspector.CSSStyleDetailsSidebarPanel):
(WebInspector.CSSStyleDetailsSidebarPanel.prototype.computedStyleDetailsPanelShowProperty):
(WebInspector.CSSStyleDetailsSidebarPanel.prototype._panelMatchingIdentifier):
(WebInspector.CSSStyleDetailsSidebarPanel.prototype._handleSelectedItemChanged):
(WebInspector.CSSStyleDetailsSidebarPanel.prototype.visibilityDidChange):
(WebInspector.CSSStyleDetailsSidebarPanel.prototype._navigationItemSelected): Deleted.
* UserInterface/Views/DOMDetailsSidebarPanel.js:
(WebInspector.DOMDetailsSidebarPanel):
* UserInterface/Views/DetailsSidebarPanel.js:
(WebInspector.DetailsSidebarPanel):
* UserInterface/Views/MetricsStyleDetailsPanel.js:
(WebInspector.MetricsStyleDetailsPanel):
* UserInterface/Views/NavigationBar.js:
(WebInspector.NavigationBar.prototype._mouseDown):
* UserInterface/Views/RulesStyleDetailsPanel.js:
(WebInspector.RulesStyleDetailsPanel):
* UserInterface/Views/ScopeRadioButtonNavigationItem.css: Added.
* UserInterface/Views/ScopeRadioButtonNavigationItem.js: Added.
* UserInterface/Views/SidebarPanel.js:
(WebInspector.SidebarPanel):
* UserInterface/Views/StyleDetailsPanel.js:
(WebInspector.StyleDetailsPanel):</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="#trunkSourceWebInspectorUIUserInterfaceMainhtml">trunk/Source/WebInspectorUI/UserInterface/Main.html</a></li>
<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>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsComputedStyleDetailsPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDOMDetailsSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/DOMDetailsSidebarPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDetailsSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSidebarPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsMetricsStyleDetailsPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/MetricsStyleDetailsPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsNavigationBarjs">trunk/Source/WebInspectorUI/UserInterface/Views/NavigationBar.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsRulesStyleDetailsPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/SidebarPanel.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="#trunkSourceWebInspectorUIUserInterfaceViewsScopeRadioButtonNavigationItemcss">trunk/Source/WebInspectorUI/UserInterface/Views/ScopeRadioButtonNavigationItem.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsScopeRadioButtonNavigationItemjs">trunk/Source/WebInspectorUI/UserInterface/Views/ScopeRadioButtonNavigationItem.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (187894 => 187895)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2015-08-04 22:17:07 UTC (rev 187894)
+++ trunk/Source/WebInspectorUI/ChangeLog 2015-08-04 22:32:08 UTC (rev 187895)
</span><span class="lines">@@ -1,3 +1,44 @@
</span><ins>+2015-08-04 Devin Rousso <drousso@apple.com>
+
+ Web Inspector: Merge the styles sidebar navigation bar into a selectable item in the elements sidebar
+ https://bugs.webkit.org/show_bug.cgi?id=146878
+
+ Reviewed by Timothy Hatcher.
+
+ Replaced the default navigationItem of the CSSStyleDetailsSidebarPanel with a
+ ScopeRadioButtonNavigationItem that will open a select element containing the labels
+ of each style sidebar when reselected.
+
+ * Localizations/en.lproj/localizedStrings.js:
+ * UserInterface/Main.html:
+ * UserInterface/Views/ComputedStyleDetailsPanel.js:
+ (WebInspector.ComputedStyleDetailsPanel):
+ * UserInterface/Views/CSSStyleDetailsSidebarPanel.css:
+ (.sidebar > .panel.details.css-style > .content):
+ * UserInterface/Views/CSSStyleDetailsSidebarPanel.js:
+ (WebInspector.CSSStyleDetailsSidebarPanel):
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype.computedStyleDetailsPanelShowProperty):
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype._panelMatchingIdentifier):
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype._handleSelectedItemChanged):
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype.visibilityDidChange):
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype._navigationItemSelected): Deleted.
+ * UserInterface/Views/DOMDetailsSidebarPanel.js:
+ (WebInspector.DOMDetailsSidebarPanel):
+ * UserInterface/Views/DetailsSidebarPanel.js:
+ (WebInspector.DetailsSidebarPanel):
+ * UserInterface/Views/MetricsStyleDetailsPanel.js:
+ (WebInspector.MetricsStyleDetailsPanel):
+ * UserInterface/Views/NavigationBar.js:
+ (WebInspector.NavigationBar.prototype._mouseDown):
+ * UserInterface/Views/RulesStyleDetailsPanel.js:
+ (WebInspector.RulesStyleDetailsPanel):
+ * UserInterface/Views/ScopeRadioButtonNavigationItem.css: Added.
+ * UserInterface/Views/ScopeRadioButtonNavigationItem.js: Added.
+ * UserInterface/Views/SidebarPanel.js:
+ (WebInspector.SidebarPanel):
+ * UserInterface/Views/StyleDetailsPanel.js:
+ (WebInspector.StyleDetailsPanel):
+
</ins><span class="cx"> 2015-08-04 Matt Baker <mattbaker@apple.com>
</span><span class="cx">
</span><span class="cx"> Web Inspector: timeline overview should visually distinguish selection bounds outside the visible duration
</span></span></pre></div>
<a id="trunkSourceWebInspectorUILocalizationsenlprojlocalizedStringsjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (187894 => 187895)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2015-08-04 22:17:07 UTC (rev 187894)
+++ trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2015-08-04 22:32:08 UTC (rev 187895)
</span><span class="lines">@@ -114,7 +114,6 @@
</span><span class="cx"> localizedStrings["Composite"] = "Composite";
</span><span class="cx"> localizedStrings["Compressed"] = "Compressed";
</span><span class="cx"> localizedStrings["Compression"] = "Compression";
</span><del>-localizedStrings["Computed"] = "Computed";
</del><span class="cx"> localizedStrings["Condition"] = "Condition";
</span><span class="cx"> localizedStrings["Conditional expression"] = "Conditional expression";
</span><span class="cx"> localizedStrings["Console"] = "Console";
</span><span class="lines">@@ -320,7 +319,6 @@
</span><span class="cx"> localizedStrings["Memory: %s"] = "Memory: %s";
</span><span class="cx"> localizedStrings["Message"] = "Message";
</span><span class="cx"> localizedStrings["Method"] = "Method";
</span><del>-localizedStrings["Metrics"] = "Metrics";
</del><span class="cx"> localizedStrings["Mixed"] = "Mixed";
</span><span class="cx"> localizedStrings["Name"] = "Name";
</span><span class="cx"> localizedStrings["Network"] = "Network";
</span><span class="lines">@@ -421,7 +419,6 @@
</span><span class="cx"> localizedStrings["Reveal in Debugger Tab"] = "Reveal in Debugger Tab";
</span><span class="cx"> localizedStrings["Reveal in Original Resource"] = "Reveal in Original Resource";
</span><span class="cx"> localizedStrings["Role"] = "Role";
</span><del>-localizedStrings["Rules"] = "Rules";
</del><span class="cx"> localizedStrings["Scheme"] = "Scheme";
</span><span class="cx"> localizedStrings["Scope Chain"] = "Scope Chain";
</span><span class="cx"> localizedStrings["Script"] = "Script";
</span><span class="lines">@@ -481,6 +478,9 @@
</span><span class="cx"> localizedStrings["Styles"] = "Styles";
</span><span class="cx"> localizedStrings["Styles Invalidated"] = "Styles Invalidated";
</span><span class="cx"> localizedStrings["Styles Recalculated"] = "Styles Recalculated";
</span><ins>+localizedStrings["Styles \u2014 Computed"] = "Styles \u2014 Computed";
+localizedStrings["Styles \u2014 Metrics"] = "Styles \u2014 Metrics";
+localizedStrings["Styles \u2014 Rules"] = "Styles \u2014 Rules";
</ins><span class="cx"> localizedStrings["Stylesheet"] = "Stylesheet";
</span><span class="cx"> localizedStrings["Stylesheets"] = "Stylesheets";
</span><span class="cx"> localizedStrings["Text"] = "Text";
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceMainhtml"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (187894 => 187895)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Main.html 2015-08-04 22:17:07 UTC (rev 187894)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html 2015-08-04 22:32:08 UTC (rev 187895)
</span><span class="lines">@@ -126,6 +126,7 @@
</span><span class="cx"> <link rel="stylesheet" href="Views/ResourceTreeElement.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/RulesStyleDetailsPanel.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/ScopeBar.css">
</span><ins>+ <link rel="stylesheet" href="Views/ScopeRadioButtonNavigationItem.css">
</ins><span class="cx"> <link rel="stylesheet" href="Views/ScriptContentView.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/ScriptTimelineOverviewGraph.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/ScriptTimelineView.css">
</span><span class="lines">@@ -500,6 +501,7 @@
</span><span class="cx"> <script src="Views/ScopeBar.js"></script>
</span><span class="cx"> <script src="Views/ScopeBarItem.js"></script>
</span><span class="cx"> <script src="Views/ScopeChainDetailsSidebarPanel.js"></script>
</span><ins>+ <script src="Views/ScopeRadioButtonNavigationItem.js"></script>
</ins><span class="cx"> <script src="Views/ScriptContentView.js"></script>
</span><span class="cx"> <script src="Views/ScriptTimelineDataGrid.js"></script>
</span><span class="cx"> <script src="Views/ScriptTimelineDataGridNode.js"></script>
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDetailsSidebarPanelcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css (187894 => 187895)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css 2015-08-04 22:17:07 UTC (rev 187894)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css 2015-08-04 22:32:08 UTC (rev 187895)
</span><span class="lines">@@ -23,19 +23,11 @@
</span><span class="cx"> * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx"> */
</span><span class="cx">
</span><del>-.sidebar > .panel.details.css-style > .navigation-bar {
</del><ins>+.sidebar > .panel.details.css-style > .content {
</ins><span class="cx"> position: absolute;
</span><span class="cx"> top: 0;
</span><span class="cx"> left: 0;
</span><span class="cx"> right: 0;
</span><del>- align-content: center;
-}
-
-.sidebar > .panel.details.css-style > .content {
- position: absolute;
- top: 29px;
- left: 0;
- right: 0;
</del><span class="cx"> bottom: 0;
</span><span class="cx">
</span><span class="cx"> overflow-y: auto;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDetailsSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js (187894 => 187895)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js 2015-08-04 22:17:07 UTC (rev 187894)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js 2015-08-04 22:32:08 UTC (rev 187895)
</span><span class="lines">@@ -27,14 +27,10 @@
</span><span class="cx"> {
</span><span class="cx"> constructor()
</span><span class="cx"> {
</span><del>- super("css-style", WebInspector.UIString("Styles"), WebInspector.UIString("Style"));
</del><ins>+ super("css-style", WebInspector.UIString("Styles"), WebInspector.UIString("Style"), null, true);
</ins><span class="cx">
</span><span class="cx"> this._selectedPanel = null;
</span><span class="cx">
</span><del>- this._navigationBar = new WebInspector.NavigationBar(null, null, "tablist");
- this._navigationBar.addEventListener(WebInspector.NavigationBar.Event.NavigationItemSelected, this._navigationItemSelected, this);
- this.element.insertBefore(this._navigationBar.element, this.contentElement);
-
</del><span class="cx"> this._forcedPseudoClassCheckboxes = {};
</span><span class="cx">
</span><span class="cx"> if (WebInspector.cssStyleManager.canForcePseudoClasses()) {
</span><span class="lines">@@ -78,15 +74,15 @@
</span><span class="cx"> this._rulesStyleDetailsPanel.addEventListener(WebInspector.StyleDetailsPanel.Event.Refreshed, this._filterDidChange, this);
</span><span class="cx">
</span><span class="cx"> this._panels = [this._computedStyleDetailsPanel, this._rulesStyleDetailsPanel, this._metricsStyleDetailsPanel];
</span><ins>+ this._panelNavigationInfo = [this._computedStyleDetailsPanel.navigationInfo, this._rulesStyleDetailsPanel.navigationInfo, this._metricsStyleDetailsPanel.navigationInfo];
</ins><span class="cx">
</span><del>- this._navigationBar.addNavigationItem(this._computedStyleDetailsPanel.navigationItem);
- this._navigationBar.addNavigationItem(this._rulesStyleDetailsPanel.navigationItem);
- this._navigationBar.addNavigationItem(this._metricsStyleDetailsPanel.navigationItem);
</del><ins>+ this._lastSelectedSectionSetting = new WebInspector.Setting("last-selected-style-details-panel", this._rulesStyleDetailsPanel.navigationInfo.identifier);
</ins><span class="cx">
</span><del>- this._lastSelectedSectionSetting = new WebInspector.Setting("last-selected-style-details-panel", this._rulesStyleDetailsPanel.navigationItem.identifier);
</del><ins>+ var selectedPanel = this._panelMatchingIdentifier(this._lastSelectedSectionSetting.value);
+ this._switchPanels(selectedPanel);
</ins><span class="cx">
</span><del>- // This will cause the selected panel to be set in _navigationItemSelected.
- this._navigationBar.selectedNavigationItem = this._lastSelectedSectionSetting.value;
</del><ins>+ this._navigationItem = new WebInspector.ScopeRadioButtonNavigationItem(this._identifier, this._displayName, this._panelNavigationInfo, selectedPanel.navigationInfo);
+ this._navigationItem.addEventListener(WebInspector.ScopeRadioButtonNavigationItem.Event.SelectedItemChanged, this._handleSelectedItemChanged, this);
</ins><span class="cx">
</span><span class="cx"> this._filterBar = new WebInspector.FilterBar;
</span><span class="cx"> this._filterBar.placeholder = WebInspector.UIString("Filter Styles");
</span><span class="lines">@@ -129,8 +125,6 @@
</span><span class="cx"> return;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- this._navigationBar.updateLayout();
-
</del><span class="cx"> this._updateNoForcedPseudoClassesScrollOffset();
</span><span class="cx">
</span><span class="cx"> this._selectedPanel.shown();
</span><span class="lines">@@ -150,7 +144,7 @@
</span><span class="cx"> this._rulesStyleDetailsPanel.scrollToSectionAndHighlightProperty(property);
</span><span class="cx"> this._switchPanels(this._rulesStyleDetailsPanel);
</span><span class="cx">
</span><del>- this._navigationBar.selectedNavigationItem = this._lastSelectedSectionSetting.value;
</del><ins>+ this._navigationItem.selectedItemIdentifier = this._lastSelectedSectionSetting.value;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Protected
</span><span class="lines">@@ -188,22 +182,25 @@
</span><span class="cx"> WebInspector.CSSStyleDetailsSidebarPanel.NoForcedPseudoClassesScrollOffset = this._forcedPseudoClassContainer.offsetHeight;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- _navigationItemSelected(event)
</del><ins>+ _panelMatchingIdentifier(identifier)
</ins><span class="cx"> {
</span><del>- console.assert(event.target.selectedNavigationItem);
- if (!event.target.selectedNavigationItem)
- return;
</del><ins>+ var selectedPanel
</ins><span class="cx">
</span><del>- var selectedNavigationItem = event.target.selectedNavigationItem;
-
- var selectedPanel = null;
- for (var i = 0; i < this._panels.length; ++i) {
- if (this._panels[i].navigationItem !== selectedNavigationItem)
</del><ins>+ for (var panel of this._panels) {
+ if (panel.navigationInfo.identifier !== identifier)
</ins><span class="cx"> continue;
</span><del>- selectedPanel = this._panels[i];
</del><ins>+
+ selectedPanel = panel;
</ins><span class="cx"> break;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ return selectedPanel;
+ }
+
+ _handleSelectedItemChanged()
+ {
+ var selectedIdentifier = this._navigationItem.selectedItemIdentifier;
+ var selectedPanel = this._panelMatchingIdentifier(selectedIdentifier);
</ins><span class="cx"> this._switchPanels(selectedPanel);
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -235,7 +232,7 @@
</span><span class="cx"> this._selectedPanel.shown();
</span><span class="cx"> }
</span><span class="cx">
</span><del>- this._lastSelectedSectionSetting.value = selectedPanel.navigationItem.identifier;
</del><ins>+ this._lastSelectedSectionSetting.value = selectedPanel.navigationInfo.identifier;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> _forcedPseudoClassCheckboxChanged(pseudoClass, event)
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsComputedStyleDetailsPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js (187894 => 187895)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js 2015-08-04 22:17:07 UTC (rev 187894)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js 2015-08-04 22:32:08 UTC (rev 187895)
</span><span class="lines">@@ -27,7 +27,7 @@
</span><span class="cx"> {
</span><span class="cx"> constructor(delegate)
</span><span class="cx"> {
</span><del>- super(delegate, WebInspector.ComputedStyleDetailsPanel.StyleClassName, "computed", WebInspector.UIString("Computed"));
</del><ins>+ super(delegate, WebInspector.ComputedStyleDetailsPanel.StyleClassName, "computed", WebInspector.UIString("Styles \u2014 Computed"));
</ins><span class="cx">
</span><span class="cx"> this._computedStyleShowAllSetting = new WebInspector.Setting("computed-style-show-all", false);
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDOMDetailsSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMDetailsSidebarPanel.js (187894 => 187895)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMDetailsSidebarPanel.js 2015-08-04 22:17:07 UTC (rev 187894)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMDetailsSidebarPanel.js 2015-08-04 22:32:08 UTC (rev 187895)
</span><span class="lines">@@ -25,9 +25,9 @@
</span><span class="cx">
</span><span class="cx"> WebInspector.DOMDetailsSidebarPanel = class DOMDetailsSidebarPanel extends WebInspector.DetailsSidebarPanel
</span><span class="cx"> {
</span><del>- constructor(identifier, displayName, singularDisplayName, element)
</del><ins>+ constructor(identifier, displayName, singularDisplayName, element, dontCreateNavigationItem)
</ins><span class="cx"> {
</span><del>- super(identifier, displayName, singularDisplayName, element);
</del><ins>+ super(identifier, displayName, singularDisplayName, element, dontCreateNavigationItem);
</ins><span class="cx">
</span><span class="cx"> this.element.addEventListener("click", this._mouseWasClicked.bind(this), true);
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDetailsSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSidebarPanel.js (187894 => 187895)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSidebarPanel.js 2015-08-04 22:17:07 UTC (rev 187894)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSidebarPanel.js 2015-08-04 22:32:08 UTC (rev 187895)
</span><span class="lines">@@ -25,13 +25,14 @@
</span><span class="cx">
</span><span class="cx"> WebInspector.DetailsSidebarPanel = class DetailsSidebarPanel extends WebInspector.SidebarPanel
</span><span class="cx"> {
</span><del>- constructor(identifier, displayName, singularDisplayName, element)
</del><ins>+ constructor(identifier, displayName, singularDisplayName, element, dontCreateNavigationItem)
</ins><span class="cx"> {
</span><span class="cx"> super(identifier, displayName, element);
</span><span class="cx">
</span><span class="cx"> this.element.classList.add("details");
</span><span class="cx">
</span><del>- this._navigationItem = new WebInspector.RadioButtonNavigationItem(identifier, displayName);
</del><ins>+ if (!dontCreateNavigationItem)
+ this._navigationItem = new WebInspector.RadioButtonNavigationItem(identifier, displayName);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Public
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsMetricsStyleDetailsPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/MetricsStyleDetailsPanel.js (187894 => 187895)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/MetricsStyleDetailsPanel.js 2015-08-04 22:17:07 UTC (rev 187894)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/MetricsStyleDetailsPanel.js 2015-08-04 22:32:08 UTC (rev 187895)
</span><span class="lines">@@ -27,7 +27,7 @@
</span><span class="cx"> {
</span><span class="cx"> constructor(delegate)
</span><span class="cx"> {
</span><del>- super(delegate, "metrics", "metrics", WebInspector.UIString("Metrics"));
</del><ins>+ super(delegate, "metrics", "metrics", WebInspector.UIString("Styles \u2014 Metrics"));
</ins><span class="cx">
</span><span class="cx"> this._boxModelDiagramRow = new WebInspector.BoxModelDetailsSectionRow;
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsNavigationBarjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NavigationBar.js (187894 => 187895)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/NavigationBar.js 2015-08-04 22:17:07 UTC (rev 187894)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NavigationBar.js 2015-08-04 22:32:08 UTC (rev 187895)
</span><span class="lines">@@ -295,6 +295,11 @@
</span><span class="cx"> this._mouseMovedEventListener = this._mouseMoved.bind(this);
</span><span class="cx"> this._mouseUpEventListener = this._mouseUp.bind(this);
</span><span class="cx">
</span><ins>+ if (typeof this.selectedNavigationItem.dontPreventDefaultOnNavigationBarMouseDown === "function"
+ && this.selectedNavigationItem.dontPreventDefaultOnNavigationBarMouseDown()
+ && this._previousSelectedNavigationItem === this.selectedNavigationItem)
+ return;
+
</ins><span class="cx"> // Register these listeners on the document so we can track the mouse if it leaves the navigation bar.
</span><span class="cx"> document.addEventListener("mousemove", this._mouseMovedEventListener, false);
</span><span class="cx"> document.addEventListener("mouseup", this._mouseUpEventListener, false);
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsRulesStyleDetailsPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js (187894 => 187895)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js 2015-08-04 22:17:07 UTC (rev 187894)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js 2015-08-04 22:32:08 UTC (rev 187895)
</span><span class="lines">@@ -27,7 +27,7 @@
</span><span class="cx"> {
</span><span class="cx"> constructor(delegate)
</span><span class="cx"> {
</span><del>- super(delegate, "rules", "rules", WebInspector.UIString("Rules"));
</del><ins>+ super(delegate, "rules", "rules", WebInspector.UIString("Styles \u2014 Rules"));
</ins><span class="cx">
</span><span class="cx"> this._sections = [];
</span><span class="cx"> this._previousFocusedSection = null;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsScopeRadioButtonNavigationItemcssfromrev187894trunkSourceWebInspectorUIUserInterfaceViewsMetricsStyleDetailsPaneljs"></a>
<div class="copfile"><h4>Copied: trunk/Source/WebInspectorUI/UserInterface/Views/ScopeRadioButtonNavigationItem.css (from rev 187894, trunk/Source/WebInspectorUI/UserInterface/Views/MetricsStyleDetailsPanel.js) (0 => 187895)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ScopeRadioButtonNavigationItem.css (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ScopeRadioButtonNavigationItem.css 2015-08-04 22:32:08 UTC (rev 187895)
</span><span class="lines">@@ -0,0 +1,63 @@
</span><ins>+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.scope-radio-button-navigation-item {
+ position: relative;
+}
+
+.scope-radio-button-navigation-item > .scope-radio-button-item-select {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ border: 1px solid transparent;
+ -webkit-appearance: none;
+ background: transparent;
+ color: transparent;
+ outline: none;
+}
+
+/* Positions the "Style" text almost exactly over the radio-button-item */
+.scope-radio-button-navigation-item > .scope-radio-button-item-select:focus {
+ top: -3px;
+ left: -3px;
+ border: none;
+}
+
+.scope-radio-button-navigation-item > .arrows {
+ width: 5px;
+ height: 11px;
+ margin-left: 4px;
+}
+
+.scope-radio-button-navigation-item.selected > .arrows {
+ display: inline-block;
+}
+
+.scope-radio-button-navigation-item:hover > .arrows > svg .stroked,
+.scope-radio-button-navigation-item.selected > .arrows > svg .stroked {
+ stroke: white;
+}
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsScopeRadioButtonNavigationItemjs"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Views/ScopeRadioButtonNavigationItem.js (0 => 187895)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ScopeRadioButtonNavigationItem.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ScopeRadioButtonNavigationItem.js 2015-08-04 22:32:08 UTC (rev 187895)
</span><span class="lines">@@ -0,0 +1,96 @@
</span><ins>+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ScopeRadioButtonNavigationItem = class ScopeRadioButtonNavigationItem extends WebInspector.RadioButtonNavigationItem
+{
+ constructor(identifier, toolTip, scopeItems, defaultScopeItem)
+ {
+ super(identifier, toolTip);
+
+ this._scopeItems = scopeItems || [];
+
+ this._element.classList.add("scope-radio-button-navigation-item");
+ this._element.title = defaultScopeItem ? defaultScopeItem.label : this._scopeItems[0].label;
+
+ this._scopeItemSelect = document.createElement("select");
+ this._scopeItemSelect.classList.add("scope-radio-button-item-select");
+
+ for (var item of this._scopeItems) {
+ var option = document.createElement("option");
+ option.value = item.identifier;
+ option.text = item.label;
+ this._scopeItemSelect.appendChild(option);
+ }
+
+ this.selectedItemIdentifier = defaultScopeItem ? defaultScopeItem.identifier : this._scopeItems[0].identifier;
+ this._scopeItemSelect.addEventListener("change", this._handleItemChanged.bind(this));
+ this._element.appendChild(this._scopeItemSelect);
+
+ wrappedSVGDocument("Images/UpDownArrows.svg", "arrows", null, function(element) {
+ this._element.appendChild(element);
+ }.bind(this));
+ }
+
+ // Public
+
+ set selectedItemIdentifier(identifier)
+ {
+ if (!identifier)
+ return;
+
+ this._scopeItemSelect.value = identifier;
+ }
+
+ get selectedItemIdentifier()
+ {
+ return this._scopeItemSelect.value;
+ }
+
+ dontPreventDefaultOnNavigationBarMouseDown()
+ {
+ return true;
+ }
+
+ // Private
+
+ _handleItemChanged()
+ {
+ var selectedItemIdentifier;
+ for (var item of this._scopeItems) {
+ if (item.identifier !== this.selectedItemIdentifier)
+ continue;
+
+ selectedItemIdentifier = item;
+ break;
+ }
+
+ this._element.title = selectedItemIdentifier.label;
+ this.dispatchEventToListeners(WebInspector.ScopeRadioButtonNavigationItem.Event.SelectedItemChanged);
+ }
+}
+
+WebInspector.ScopeRadioButtonNavigationItem.Event = {
+ SelectedItemChanged: "scope-radio-button-navigation-item-selected-item-changed"
+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SidebarPanel.js (187894 => 187895)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/SidebarPanel.js 2015-08-04 22:17:07 UTC (rev 187894)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SidebarPanel.js 2015-08-04 22:32:08 UTC (rev 187895)
</span><span class="lines">@@ -30,6 +30,7 @@
</span><span class="cx"> super();
</span><span class="cx">
</span><span class="cx"> this._identifier = identifier;
</span><ins>+ this._displayName = displayName;
</ins><span class="cx">
</span><span class="cx"> this._savedScrollPosition = 0;
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsStyleDetailsPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/StyleDetailsPanel.js (187894 => 187895)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/StyleDetailsPanel.js 2015-08-04 22:17:07 UTC (rev 187894)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/StyleDetailsPanel.js 2015-08-04 22:32:08 UTC (rev 187895)
</span><span class="lines">@@ -37,7 +37,7 @@
</span><span class="cx"> // Add this offset-sections class name so the sticky headers don't overlap the navigation bar.
</span><span class="cx"> this.element.classList.add("offset-sections");
</span><span class="cx">
</span><del>- this._navigationItem = new WebInspector.RadioButtonNavigationItem(identifier, label);
</del><ins>+ this._navigationInfo = {identifier, label};
</ins><span class="cx">
</span><span class="cx"> this._nodeStyles = null;
</span><span class="cx"> this._visible = false;
</span><span class="lines">@@ -50,9 +50,9 @@
</span><span class="cx"> return this._element;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- get navigationItem()
</del><ins>+ get navigationInfo()
</ins><span class="cx"> {
</span><del>- return this._navigationItem;
</del><ins>+ return this._navigationInfo;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> get nodeStyles()
</span></span></pre>
</div>
</div>
</body>
</html>