Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (185043 => 185044)
--- trunk/Source/WebInspectorUI/ChangeLog 2015-05-31 19:21:20 UTC (rev 185043)
+++ trunk/Source/WebInspectorUI/ChangeLog 2015-05-31 19:50:16 UTC (rev 185044)
@@ -1,3 +1,80 @@
+2015-05-29 Timothy Hatcher <[email protected]>
+
+ Web Inspector: Resources tab navigation sidebar should have a type filter header
+ https://bugs.webkit.org/show_bug.cgi?id=145474
+
+ Reviewed by Joseph Pecoraro.
+
+ * Localizations/en.lproj/localizedStrings.js: Updated.
+
+ * UserInterface/Images/UpDownArrows.svg: Make styleable.
+
+ * UserInterface/Main.html: Added new files.
+
+ * UserInterface/Views/LogContentView.js:
+ (WebInspector.LogContentView): Drive-by fix. Mark All as exclusive.
+
+ * UserInterface/Views/MultipleScopeBarItem.js: Added.
+ (WebInspector.MultipleScopeBarItem):
+ (WebInspector.MultipleScopeBarItem.prototype.get element):
+ (WebInspector.MultipleScopeBarItem.prototype.get exclusive):
+ (WebInspector.MultipleScopeBarItem.prototype.get scopeBarItems):
+ (WebInspector.MultipleScopeBarItem.set scopeBarItems.createOption):
+ (WebInspector.MultipleScopeBarItem.prototype.set scopeBarItems):
+ (WebInspector.MultipleScopeBarItem.prototype.get selected):
+ (WebInspector.MultipleScopeBarItem.prototype.set selected):
+ (WebInspector.MultipleScopeBarItem.prototype.get selectedScopeBarItem):
+ (WebInspector.MultipleScopeBarItem.prototype.set selectedScopeBarItem):
+ (WebInspector.MultipleScopeBarItem.prototype._clicked):
+ (WebInspector.MultipleScopeBarItem.prototype._selectElementSelectionChanged):
+ (WebInspector.MultipleScopeBarItem.prototype._itemSelectionDidChange):
+
+ * UserInterface/Views/NavigationSidebarPanel.js:
+ (WebInspector.NavigationSidebarPanel.prototype.matchTreeElementAgainstFilterFunctions):
+ (WebInspector.NavigationSidebarPanel.prototype.applyFiltersToTreeElement.matchTextFilter):
+ (WebInspector.NavigationSidebarPanel.prototype.applyFiltersToTreeElement.makeVisible):
+ (WebInspector.NavigationSidebarPanel.prototype.applyFiltersToTreeElement):
+ (WebInspector.NavigationSidebarPanel.prototype._updateFilter):
+ (WebInspector.NavigationSidebarPanel.prototype._treeElementAddedOrChanged):
+ Improve filtering so non-text filters can choose to auto-expand the tree.
+
+ * UserInterface/Views/ResourceSidebarPanel.css: Added.
+ (.sidebar > .panel.navigation.resource > :matches(.content, .empty-content-placeholder)):
+ (.sidebar > .panel.navigation.resource > .navigation-bar):
+
+ * UserInterface/Views/ResourceSidebarPanel.js:
+ (WebInspector.ResourceSidebarPanel):
+ (WebInspector.ResourceSidebarPanel.prototype.hasCustomFilters):
+ (WebInspector.ResourceSidebarPanel.prototype.matchTreeElementAgainstCustomFilters.match):
+ (WebInspector.ResourceSidebarPanel.prototype.matchTreeElementAgainstCustomFilters):
+ (WebInspector.ResourceSidebarPanel.prototype._scopeBarSelectionDidChange):
+ Make a ScopeBar and make it filter the TreeOutline when needed.
+
+ * UserInterface/Views/ScopeBar.css:
+ (.scope-bar > li.multiple):
+ (.scope-bar > li.multiple > select):
+ (.scope-bar > li.multiple.selected > select):
+ (.scope-bar > li.multiple > .arrows):
+ (.scope-bar > li.multiple:matches(.selected, :hover, :active) > .arrows svg .filled):
+ (.scope-bar > li.multiple:matches(.selected, :hover, :active) > .arrows svg .stroked):
+
+ * UserInterface/Views/ScopeBar.js:
+ (WebInspector.ScopeBar): Support shouldGroupNonExclusiveItems which will use MultipleScopeBarItem.
+ (WebInspector.ScopeBar.prototype._populate):
+ (WebInspector.ScopeBar.prototype._itemSelectionDidChange):
+ (WebInspector.ScopeBar.prototype.updateLayout): Deleted. Not needed for our current styles.
+
+ * UserInterface/Views/ScopeBarItem.js:
+ (WebInspector.ScopeBarItem):
+ (WebInspector.ScopeBarItem.prototype.get id):
+ (WebInspector.ScopeBarItem.prototype.get label):
+ (WebInspector.ScopeBarItem.prototype.get exclusive):
+ (WebInspector.ScopeBarItem.prototype.setSelected):
+ (WebInspector.ScopeBarItem.prototype._clicked):
+ (WebInspector.ScopeBarItem.prototype.get element): Deleted.
+ (WebInspector.ScopeBarItem.prototype._markElementSelected): Deleted.
+ Cleaned up and modernized a bit.
+
2015-05-29 Tobias Reiss <[email protected]>
Web Inspector: Activity Viewer does not update on "clear all console messages"
Modified: trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (185043 => 185044)
--- trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2015-05-31 19:21:20 UTC (rev 185043)
+++ trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2015-05-31 19:50:16 UTC (rev 185044)
@@ -50,6 +50,7 @@
localizedStrings["All"] = "All";
localizedStrings["All Changes"] = "All Changes";
localizedStrings["All Exceptions"] = "All Exceptions";
+localizedStrings["All Resources"] = "All Resources";
localizedStrings["All Uncaught Exceptions"] = "All Uncaught Exceptions";
localizedStrings["An error occured trying to\nread the %s table."] = "An error occured trying to\nread the %s table.";
localizedStrings["An error occurred trying to load the resource."] = "An error occurred trying to load the resource.";
Modified: trunk/Source/WebInspectorUI/UserInterface/Images/UpDownArrows.svg (185043 => 185044)
--- trunk/Source/WebInspectorUI/UserInterface/Images/UpDownArrows.svg 2015-05-31 19:21:20 UTC (rev 185043)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/UpDownArrows.svg 2015-05-31 19:50:16 UTC (rev 185044)
@@ -1,6 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright © 2014 Apple Inc. All rights reserved. -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 12">
- <path fill="none" stroke="black" stroke-linecap="square" d="M 0.5 3.5 L 2.5 1.5 L 4.5 3.5"/>
- <path fill="none" stroke="black" stroke-linecap="square" d="M 0.5 8.5 L 2.5 10.5 L 4.5 8.5"/>
+ <path class="stroked" fill="none" stroke="black" stroke-linecap="square" d="M 0.5 3.5 L 2.5 1.5 L 4.5 3.5"/>
+ <path class="stroked" fill="none" stroke="black" stroke-linecap="square" d="M 0.5 8.5 L 2.5 10.5 L 4.5 8.5"/>
</svg>
Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (185043 => 185044)
--- trunk/Source/WebInspectorUI/UserInterface/Main.html 2015-05-31 19:21:20 UTC (rev 185043)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html 2015-05-31 19:50:16 UTC (rev 185044)
@@ -120,6 +120,7 @@
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
+ <link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
@@ -456,6 +457,7 @@
<script src=""
<script src=""
<script src=""
+ <script src=""
<script src=""
<script src=""
<script src=""
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/LogContentView.js (185043 => 185044)
--- trunk/Source/WebInspectorUI/UserInterface/Views/LogContentView.js 2015-05-31 19:21:20 UTC (rev 185043)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/LogContentView.js 2015-05-31 19:50:16 UTC (rev 185044)
@@ -59,7 +59,7 @@
this._searchBar.addEventListener(WebInspector.SearchBar.Event.TextChanged, this._searchTextDidChange, this);
var scopeBarItems = [
- new WebInspector.ScopeBarItem(WebInspector.LogContentView.Scopes.All, WebInspector.UIString("All")),
+ new WebInspector.ScopeBarItem(WebInspector.LogContentView.Scopes.All, WebInspector.UIString("All"), true),
new WebInspector.ScopeBarItem(WebInspector.LogContentView.Scopes.Errors, WebInspector.UIString("Errors")),
new WebInspector.ScopeBarItem(WebInspector.LogContentView.Scopes.Warnings, WebInspector.UIString("Warnings")),
new WebInspector.ScopeBarItem(WebInspector.LogContentView.Scopes.Logs, WebInspector.UIString("Logs"))
Added: trunk/Source/WebInspectorUI/UserInterface/Views/MultipleScopeBarItem.js (0 => 185044)
--- trunk/Source/WebInspectorUI/UserInterface/Views/MultipleScopeBarItem.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/MultipleScopeBarItem.js 2015-05-31 19:50:16 UTC (rev 185044)
@@ -0,0 +1,170 @@
+/*
+ * 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.MultipleScopeBarItem = class MultipleScopeBarItem extends WebInspector.Object
+{
+ constructor(scopeBarItems)
+ {
+ super();
+
+ this._element = document.createElement("li");
+ this._element.classList.add("multiple");
+
+ this._titleElement = document.createElement("span");
+ this._element.appendChild(this._titleElement);
+ this._element.addEventListener("click", this._clicked.bind(this));
+
+ this._selectElement = document.createElement("select");
+ this._selectElement.addEventListener("change", this._selectElementSelectionChanged.bind(this));
+ this._element.appendChild(this._selectElement);
+
+ wrappedSVGDocument("Images/UpDownArrows.svg", "arrows", null, function(element) {
+ this._element.appendChild(element);
+ }.bind(this));
+
+ this.scopeBarItems = scopeBarItems;
+ }
+
+ // Public
+
+ get element()
+ {
+ return this._element;
+ }
+
+ get exclusive()
+ {
+ return false;
+ }
+
+ get scopeBarItems()
+ {
+ return this._scopeBarItems;
+ }
+
+ set scopeBarItems(scopeBarItems)
+ {
+ if (this._scopeBarItems) {
+ for (var scopeBarItem of this._scopeBarItems)
+ scopeBarItem.removeEventListener(null, null, this);
+ }
+
+ this._scopeBarItems = scopeBarItems || [];
+ this._selectedScopeBarItem = null;
+
+ this._selectElement.removeChildren();
+
+ function createOption(scopeBarItem)
+ {
+ var optionElement = document.createElement("option");
+ var maxPopupMenuLength = 130; // <rdar://problem/13445374> <select> with very long option has clipped text and popup menu is still very wide
+ optionElement.textContent = scopeBarItem.label.length <= maxPopupMenuLength ? scopeBarItem.label : scopeBarItem.label.substring(0, maxPopupMenuLength) + "\u2026";
+ return optionElement;
+ }
+
+ for (var scopeBarItem of this._scopeBarItems) {
+ if (scopeBarItem.selected && !this._selectedScopeBarItem)
+ this._selectedScopeBarItem = scopeBarItem;
+ else if (scopeBarItem.selected) {
+ // Only one selected item is allowed at a time.
+ // Deselect any other items after the first.
+ scopeBarItem.selected = false;
+ }
+
+ scopeBarItem.addEventListener(WebInspector.ScopeBarItem.Event.SelectionChanged, this._itemSelectionDidChange, this);
+
+ this._selectElement.appendChild(createOption(scopeBarItem));
+ }
+
+ this._lastSelectedScopeBarItem = this._selectedScopeBarItem || this._scopeBarItems[0] || null;
+ this._titleElement.textContent = this._lastSelectedScopeBarItem ? this._lastSelectedScopeBarItem.label : "";
+
+ this._element.classList.toggle("selected", !!this._selectedScopeBarItem);
+ this._selectElement.selectedIndex = this._scopeBarItems.indexOf(this._selectedScopeBarItem);
+ }
+
+ get selected()
+ {
+ return !!this._selectedScopeBarItem;
+ }
+
+ set selected(selected)
+ {
+ this.selectedScopeBarItem = selected ? this._lastSelectedScopeBarItem : null;
+ }
+
+ get selectedScopeBarItem()
+ {
+ return this._selectedScopeBarItem;
+ }
+
+ set selectedScopeBarItem(selectedScopeBarItem)
+ {
+ this._ignoreItemSelectedEvent = true;
+
+ if (this._selectedScopeBarItem) {
+ this._selectedScopeBarItem.selected = false;
+ this._lastSelectedScopeBarItem = this._selectedScopeBarItem;
+ } else if (!this._lastSelectedScopeBarItem)
+ this._lastSelectedScopeBarItem = selectedScopeBarItem;
+
+ this._element.classList.toggle("selected", !!selectedScopeBarItem);
+ this._selectedScopeBarItem = selectedScopeBarItem || null;
+ this._selectElement.selectedIndex = this._scopeBarItems.indexOf(this._selectedScopeBarItem);
+
+ if (this._selectedScopeBarItem) {
+ this._titleElement.textContent = this._selectedScopeBarItem.label;
+ this._selectedScopeBarItem.selected = true;
+ }
+
+ var withModifier = WebInspector.modifierKeys.metaKey && !WebInspector.modifierKeys.ctrlKey && !WebInspector.modifierKeys.altKey && !WebInspector.modifierKeys.shiftKey;
+ this.dispatchEventToListeners(WebInspector.ScopeBarItem.Event.SelectionChanged, {withModifier});
+
+ this._ignoreItemSelectedEvent = false;
+ }
+
+ // Private
+
+ _clicked(event)
+ {
+ // Only support click to select when the item is not selected yet.
+ // Clicking when selected will cause the menu it appear instead.
+ if (this._element.classList.contains("selected"))
+ return;
+ this.selected = true;
+ }
+
+ _selectElementSelectionChanged(event)
+ {
+ this.selectedScopeBarItem = this._scopeBarItems[this._selectElement.selectedIndex];
+ }
+
+ _itemSelectionDidChange(event)
+ {
+ if (this._ignoreItemSelectedEvent)
+ return;
+ this.selectedScopeBarItem = event.target.selected ? event.target : null;
+ }
+};
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js (185043 => 185044)
--- trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js 2015-05-31 19:21:20 UTC (rev 185043)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js 2015-05-31 19:50:16 UTC (rev 185044)
@@ -306,13 +306,14 @@
matchTreeElementAgainstFilterFunctions(treeElement)
{
- if (!this._filterFunctions.length)
+ if (!this._filterFunctions || !this._filterFunctions.length)
return true;
for (var filterFunction of this._filterFunctions) {
if (filterFunction(treeElement))
return true;
}
+
return false;
}
@@ -333,7 +334,7 @@
var filterableData = treeElement.filterableData || {};
- var matchedBuiltInFilters = false;
+ var flags = {expandTreeElement: false};
var self = this;
function matchTextFilter(inputs)
@@ -350,7 +351,7 @@
if (!input)
continue;
if (self._textFilterRegex.test(input)) {
- matchedBuiltInFilters = true;
+ flags.expandTreeElement = true;
return true;
}
}
@@ -370,7 +371,7 @@
currentAncestor.hidden = false;
// Only expand if the built-in filters matched, not custom filters.
- if (matchedBuiltInFilters && !currentAncestor.expanded) {
+ if (flags.expandTreeElement && !currentAncestor.expanded) {
currentAncestor.__wasExpandedDuringFiltering = true;
currentAncestor.expand();
}
@@ -379,12 +380,12 @@
}
}
- if (matchTextFilter(filterableData.text) && this.matchTreeElementAgainstFilterFunctions(treeElement) && this.matchTreeElementAgainstCustomFilters(treeElement)) {
+ if (matchTextFilter(filterableData.text) && this.matchTreeElementAgainstFilterFunctions(treeElement, flags) && this.matchTreeElementAgainstCustomFilters(treeElement, flags)) {
// Make this element visible since it matches.
makeVisible();
// If this tree element didn't match a built-in filter and was expanded earlier during filtering, collapse it again.
- if (!matchedBuiltInFilters && treeElement.expanded && treeElement.__wasExpandedDuringFiltering) {
+ if (!flags.expandTreeElement && treeElement.expanded && treeElement.__wasExpandedDuringFiltering) {
delete treeElement.__wasExpandedDuringFiltering;
treeElement.collapse();
}
@@ -519,7 +520,7 @@
// Don't populate if we don't have any active filters.
// We only need to populate when a filter needs to reveal.
- var dontPopulate = !this._filterBar.hasActiveFilters();
+ var dontPopulate = !this._filterBar.hasActiveFilters() && !this.hasCustomFilters();
// Update the whole tree.
var currentTreeElement = this._contentTreeOutline.children[0];
@@ -544,7 +545,7 @@
{
// Don't populate if we don't have any active filters.
// We only need to populate when a filter needs to reveal.
- var dontPopulate = !this._filterBar.hasActiveFilters();
+ var dontPopulate = !this._filterBar.hasActiveFilters() && !this.hasCustomFilters();
// Apply the filters to the tree element and its descendants.
var currentTreeElement = treeElement;
Copied: trunk/Source/WebInspectorUI/UserInterface/Views/ResourceSidebarPanel.css (from rev 185042, trunk/Source/WebInspectorUI/UserInterface/Views/ScopeBar.css) (0 => 185044)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ResourceSidebarPanel.css (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ResourceSidebarPanel.css 2015-05-31 19:50:16 UTC (rev 185044)
@@ -0,0 +1,35 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.sidebar > .panel.navigation.resource > :matches(.content, .empty-content-placeholder) {
+ top: 29px;
+}
+
+.sidebar > .panel.navigation.resource > .navigation-bar {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ResourceSidebarPanel.js (185043 => 185044)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ResourceSidebarPanel.js 2015-05-31 19:21:20 UTC (rev 185043)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ResourceSidebarPanel.js 2015-05-31 19:50:16 UTC (rev 185044)
@@ -33,6 +33,26 @@
this.filterBar.placeholder = WebInspector.UIString("Filter Resource List");
+ this._navigationBar = new WebInspector.NavigationBar;
+ this.element.appendChild(this._navigationBar.element);
+
+ var scopeItemPrefix = "resource-sidebar-";
+ var scopeBarItems = [];
+
+ scopeBarItems.push(new WebInspector.ScopeBarItem(scopeItemPrefix + "type-all", WebInspector.UIString("All Resources"), true));
+
+ for (var key in WebInspector.Resource.Type) {
+ var value = WebInspector.Resource.Type[key];
+ var scopeBarItem = new WebInspector.ScopeBarItem(scopeItemPrefix + value, WebInspector.Resource.displayNameForType(value, true));
+ scopeBarItem.__resourceType = value;
+ scopeBarItems.push(scopeBarItem);
+ }
+
+ this._scopeBar = new WebInspector.ScopeBar("resource-sidebar-scope-bar", scopeBarItems, scopeBarItems[0], true);
+ this._scopeBar.addEventListener(WebInspector.ScopeBar.Event.SelectionChanged, this._scopeBarSelectionDidChange, this);
+
+ this._navigationBar.addNavigationItem(this._scopeBar);
+
WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
WebInspector.frameResourceManager.addEventListener(WebInspector.FrameResourceManager.Event.MainFrameDidChange, this._mainFrameDidChange, this);
@@ -152,6 +172,49 @@
return scriptTreeElement;
}
+ // Protected
+
+ hasCustomFilters()
+ {
+ console.assert(this._scopeBar.selectedItems.length === 1);
+ var selectedScopeBarItem = this._scopeBar.selectedItems[0];
+ return selectedScopeBarItem && !selectedScopeBarItem.exclusive;
+ }
+
+ matchTreeElementAgainstCustomFilters(treeElement, flags)
+ {
+ console.assert(this._scopeBar.selectedItems.length === 1);
+ var selectedScopeBarItem = this._scopeBar.selectedItems[0];
+
+ // Show everything if there is no selection or "All Resources" is selected (the exclusive item).
+ if (!selectedScopeBarItem || selectedScopeBarItem.exclusive)
+ return true;
+
+ // Folders are hidden on the first pass, but visible childen under the folder will force the folder visible again.
+ if (treeElement instanceof WebInspector.FolderTreeElement)
+ return false;
+
+ function match()
+ {
+ if (treeElement instanceof WebInspector.FrameTreeElement)
+ return selectedScopeBarItem.__resourceType === WebInspector.Resource.Type.Document;
+
+ if (treeElement instanceof WebInspector.ScriptTreeElement)
+ return selectedScopeBarItem.__resourceType === WebInspector.Resource.Type.Script;
+
+ console.assert(treeElement instanceof WebInspector.ResourceTreeElement, "Unknown treeElement", treeElement);
+ if (!(treeElement instanceof WebInspector.ResourceTreeElement))
+ return false;
+
+ return treeElement.resource.type === selectedScopeBarItem.__resourceType;
+ }
+
+ var matched = match();
+ if (matched)
+ flags.expandTreeElement = true;
+ return matched;
+ }
+
// Private
_mainResourceDidChange(event)
@@ -299,4 +362,9 @@
if (WebInspector.debuggableType === WebInspector.DebuggableType._javascript_)
this.contentTreeOutline.element.classList.remove(WebInspector.NavigationSidebarPanel.HideDisclosureButtonsStyleClassName);
}
+
+ _scopeBarSelectionDidChange(event)
+ {
+ this.updateFilter();
+ }
};
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ScopeBar.css (185043 => 185044)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ScopeBar.css 2015-05-31 19:21:20 UTC (rev 185043)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ScopeBar.css 2015-05-31 19:50:16 UTC (rev 185044)
@@ -41,6 +41,44 @@
text-align: center;
}
+.scope-bar > li.multiple {
+ position: relative;
+}
+
+.scope-bar > li.multiple > select {
+ display: none;
+ opacity: 0;
+
+ /* Positioned so the text in the menu aligns with the content text. */
+ position: absolute;
+ top: -5px;
+ left: -4px;
+ right: 0;
+ bottom: 0;
+}
+
+.scope-bar > li.multiple.selected > select {
+ display: block;
+}
+
+.scope-bar > li.multiple > .arrows {
+ width: 5px;
+ height: 12px;
+ display: inline-block;
+ vertical-align: -2px;
+ margin-left: 6px;
+ margin-top: -1px;
+ margin-bottom: -1px;
+}
+
+.scope-bar > li.multiple:matches(.selected, :hover, :active) > .arrows svg .filled {
+ fill: white !important;
+}
+
+.scope-bar > li.multiple:matches(.selected, :hover, :active) > .arrows svg .stroked {
+ stroke: white !important;
+}
+
.scope-bar > li:matches(.selected, :active) {
transition-duration: 75ms;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ScopeBar.js (185043 => 185044)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ScopeBar.js 2015-05-31 19:21:20 UTC (rev 185043)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ScopeBar.js 2015-05-31 19:50:16 UTC (rev 185044)
@@ -25,7 +25,7 @@
WebInspector.ScopeBar = class ScopeBar extends WebInspector.NavigationItem
{
- constructor(identifier, items, defaultItem)
+ constructor(identifier, items, defaultItem, shouldGroupNonExclusiveItems)
{
super(identifier);
@@ -33,8 +33,8 @@
this._items = items;
this._defaultItem = defaultItem;
+ this._shouldGroupNonExclusiveItems = shouldGroupNonExclusiveItems || false;
- this._itemsById = [];
this._populate();
}
@@ -47,7 +47,7 @@
item(id)
{
- return this._itemsById[id];
+ return this._itemsById.get(id);
}
get selectedItems()
@@ -64,38 +64,35 @@
}, this);
}
- updateLayout(expandOnly)
+ // Private
+
+ _populate()
{
- if (expandOnly)
- return;
+ this._itemsById = new Map;
- for (var i = 0; i < this._items.length; ++i) {
- var item = this._items[i];
- var isSelected = item.selected;
+ if (this._shouldGroupNonExclusiveItems) {
+ var nonExclusiveItems = [];
- if (!isSelected)
- item.element.classList.add(WebInspector.ScopeBarItem.SelectedStyleClassName);
+ for (var item of this._items) {
+ this._itemsById.set(item.id, item);
- var selectedWidth = item.element.offsetWidth;
- if (selectedWidth)
- item.element.style.minWidth = selectedWidth + "px";
+ if (item.exclusive)
+ this._element.appendChild(item.element);
+ else
+ nonExclusiveItems.push(item);
- if (!isSelected)
- item.element.classList.remove(WebInspector.ScopeBarItem.SelectedStyleClassName);
- }
- }
+ item.addEventListener(WebInspector.ScopeBarItem.Event.SelectionChanged, this._itemSelectionDidChange, this);
+ }
- // Private
+ this._multipleItem = new WebInspector.MultipleScopeBarItem(nonExclusiveItems);
+ this._element.appendChild(this._multipleItem.element);
+ } else {
+ for (var item of this._items) {
+ this._itemsById.set(item.id, item);
+ this._element.appendChild(item.element);
- _populate()
- {
- var item;
- for (var i = 0; i < this._items.length; ++i) {
- item = this._items[i];
- this._itemsById[item.id] = item;
- this._element.appendChild(item.element);
-
- item.addEventListener(WebInspector.ScopeBarItem.Event.SelectionChanged, this._itemSelectionDidChange, this);
+ item.addEventListener(WebInspector.ScopeBarItem.Event.SelectionChanged, this._itemSelectionDidChange, this);
+ }
}
if (!this.selectedItems.length && this._defaultItem)
@@ -108,17 +105,17 @@
var item;
// An exclusive item was selected, unselect everything else.
- if (sender.isExclusive && sender.selected) {
+ if (sender.exclusive && sender.selected) {
for (var i = 0; i < this._items.length; ++i) {
item = this._items[i];
if (item !== sender)
item.selected = false;
}
} else {
- var replacesCurrentSelection = !event.data.withModifier;
+ var replacesCurrentSelection = this._shouldGroupNonExclusiveItems || !event.data.withModifier;
for (var i = 0; i < this._items.length; ++i) {
item = this._items[i];
- if (item.isExclusive && item !== sender && sender.selected)
+ if (item.exclusive && item !== sender && sender.selected)
item.selected = false;
else if (sender.selected && replacesCurrentSelection && sender !== item)
item.selected = false;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ScopeBarItem.js (185043 => 185044)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ScopeBarItem.js 2015-05-31 19:21:20 UTC (rev 185043)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ScopeBarItem.js 2015-05-31 19:50:16 UTC (rev 185044)
@@ -25,31 +25,46 @@
WebInspector.ScopeBarItem = class ScopeBarItem extends WebInspector.Object
{
- constructor(id, label, isExclusive)
+ constructor(id, label, exclusive)
{
super();
- this.id = id;
- this.label = label;
- this.isExclusive = isExclusive;
+ this._element = document.createElement("li");
+ this._element.classList.toggle("exclusive", exclusive);
+ this._element.textContent = label;
+ this._element.addEventListener("click", this._clicked.bind(this));
+ this._id = id;
+ this._label = label;
+ this._exclusive = exclusive;
+
this._selectedSetting = new WebInspector.Setting("scopebaritem-" + id, false);
- this._markElementSelected(this._selectedSetting.value);
+ this._element.classList.toggle("selected", this._selectedSetting.value);
}
// Public
get element()
{
- if (!this._element) {
- this._element = document.createElement("li");
- this._element.textContent = this.label;
- this._element.addEventListener("click", this._clicked.bind(this), false);
- }
return this._element;
}
+ get id()
+ {
+ return this._id;
+ }
+
+ get label()
+ {
+ return this._label;
+ }
+
+ get exclusive()
+ {
+ return this._exclusive;
+ }
+
get selected()
{
return this._selectedSetting.value;
@@ -65,8 +80,7 @@
if (this._selectedSetting.value === selected)
return;
- this._markElementSelected(selected);
-
+ this._element.classList.toggle("selected", selected);
this._selectedSetting.value = selected;
this.dispatchEventToListeners(WebInspector.ScopeBarItem.Event.SelectionChanged, {withModifier});
@@ -74,23 +88,12 @@
// Private
- _markElementSelected(selected)
- {
- if (selected)
- this.element.classList.add(WebInspector.ScopeBarItem.SelectedStyleClassName);
- else
- this.element.classList.remove(WebInspector.ScopeBarItem.SelectedStyleClassName);
- }
-
_clicked(event)
{
- var withModifier = (event.metaKey && !event.ctrlKey && !event.altKey && !event.shiftKey);
- this.setSelected(!this.selected, withModifier);
+ this.setSelected(!this.selected, event.metaKey && !event.ctrlKey && !event.altKey && !event.shiftKey);
}
};
-WebInspector.ScopeBarItem.SelectedStyleClassName = "selected";
-
WebInspector.ScopeBarItem.Event = {
SelectionChanged: "scope-bar-item-selection-did-change"
};
