Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (248915 => 248916)
--- trunk/Source/WebInspectorUI/ChangeLog 2019-08-20 20:40:32 UTC (rev 248915)
+++ trunk/Source/WebInspectorUI/ChangeLog 2019-08-20 21:11:11 UTC (rev 248916)
@@ -1,3 +1,51 @@
+2019-08-20 Devin Rousso <drou...@apple.com>
+
+ Web Inspector: Sources: move the resource type scope bar to be next to the filter
+ https://bugs.webkit.org/show_bug.cgi?id=200891
+
+ Reviewed by Joseph Pecoraro.
+
+ It's odd to have UI for controlling the active filters in two different places. Move the
+ resource type `WI.ScopeBar` to the filter bar area, and "promote" the resource grouping mode
+ items from a context menu to an always visible `WI.ScopeBar` in the space left by the
+ resource type `WI.ScopeBar` (switching between grouping modes quickly is a useful workflow).
+
+ * UserInterface/Views/SourcesNavigationSidebarPanel.js:
+ (WI.SourcesNavigationSidebarPanel):
+ (WI.SourcesNavigationSidebarPanel.prototype.hasCustomFilters):
+ (WI.SourcesNavigationSidebarPanel.prototype._handleResourceGroupingModeScopeBarSelectionChanged): Added.
+ (WI.SourcesNavigationSidebarPanel.prototype._handleResourceGroupingModeChanged):
+ (WI.SourcesNavigationSidebarPanel.prototype._populateResourceGroupingModeContextMenu.addOption): Deleted.
+ (WI.SourcesNavigationSidebarPanel.prototype._populateResourceGroupingModeContextMenu): Deleted.
+ * UserInterface/Views/SourcesNavigationSidebarPanel.css:
+ (.sidebar > .panel.navigation.sources > .filter-bar .sources-resource-type-scope-bar.default-item-selected:not(:hover)): Added.
+ (.sidebar > .panel.navigation.sources > .filter-bar .sources-resource-type-scope-bar.default-item-selected:hover): Added.
+
+ * UserInterface/Views/FilterBar.js:
+ (WI.FilterBar.prototype.addFilterNavigationItem): Added.
+ (WI.FilterBar.prototype.addFilterBarButton):
+ * UserInterface/Views/FilterBar.css:
+ (.filter-bar > .navigation-bar > .item):
+ (.filter-bar > .navigation-bar > .item.button): Added.
+ (.filter-bar > .navigation-bar > .item.scope-bar): Added.
+ (.filter-bar > input[type="search"] + .navigation-bar > .item.scope-bar:last-child): Added.
+ Provide a way to add arbitrary `WI.NavigationItem` to the contained `WI.NavigationBar`.
+ Slightly adjust the spacing of the items (depending on their type) in the `WI.NavigationBar`
+ so they are all centered.
+
+ * UserInterface/Views/ScopeBar.css:
+ (.scope-bar):
+ (.scope-bar > li):
+ (.scope-bar > li::after):
+ (.scope-bar > li:not(.selected):hover): Added.
+ (body[dir=ltr] .scope-bar > li.multiple > select):
+ (body[dir=rtl] .scope-bar > li.multiple > select):
+ (.scope-bar > li:not(.selected):hover::after): Added.
+ Introduce CSS variables for `margin`, `padding`, and `opacity` that callers can override to
+ customize the appearance of the `WI.ScopeBar`.
+
+ * Localizations/en.lproj/localizedStrings.js:
+
2019-08-20 Joseph Pecoraro <pecor...@apple.com>
Web Inspector: Sources: Give Origins their own icon in the Sources sidebar
Modified: trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (248915 => 248916)
--- trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2019-08-20 20:40:32 UTC (rev 248915)
+++ trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2019-08-20 21:11:11 UTC (rev 248916)
@@ -184,6 +184,8 @@
localizedStrings["Breakpoints disabled"] = "Breakpoints disabled";
localizedStrings["Bubbling"] = "Bubbling";
localizedStrings["Busy"] = "Busy";
+localizedStrings["By Path"] = "By Path";
+localizedStrings["By Type"] = "By Type";
localizedStrings["Byte Range %s\u2013%s"] = "Byte Range %s\u2013%s";
localizedStrings["Bytes Received"] = "Bytes Received";
localizedStrings["Bytes Sent"] = "Bytes Sent";
@@ -551,11 +553,8 @@
localizedStrings["Group By Resource"] = "Group By Resource";
localizedStrings["Group Media Requests"] = "Group Media Requests";
localizedStrings["Group by Event"] = "Group by Event";
-localizedStrings["Group by Path"] = "Group by Path";
localizedStrings["Group by Target"] = "Group by Target";
-localizedStrings["Group by Type"] = "Group by Type";
localizedStrings["Grouping Method"] = "Grouping Method";
-localizedStrings["Grouping Mode"] = "Grouping Mode";
localizedStrings["HAR Export (%s)"] = "HAR Export (%s)";
localizedStrings["HAR Import"] = "HAR Import";
localizedStrings["HAR Import Error: %s"] = "HAR Import Error: %s";
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/FilterBar.css (248915 => 248916)
--- trunk/Source/WebInspectorUI/UserInterface/Views/FilterBar.css 2019-08-20 20:40:32 UTC (rev 248915)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/FilterBar.css 2019-08-20 21:11:11 UTC (rev 248916)
@@ -39,9 +39,18 @@
}
.filter-bar > .navigation-bar > .item {
- padding: 0 0 3px;
+ padding: 0 0 2px;
}
+.filter-bar > .navigation-bar > .item.button {
+ padding-bottom: 3px;
+}
+
+.filter-bar > .navigation-bar > .item.scope-bar {
+ --scope-bar-padding-override: 4px;
+ --scope-bar-margin-override: 0;
+}
+
.filter-bar > input[type="search"] {
display: flex;
flex: 1;
@@ -63,6 +72,10 @@
height: 22px;
}
+.filter-bar > input[type="search"] + .navigation-bar > .item.scope-bar:last-child {
+ -webkit-margin-end: 4px;
+}
+
.filter-bar > .navigation-bar + input[type="search"] {
-webkit-margin-start: 0;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/FilterBar.js (248915 => 248916)
--- trunk/Source/WebInspectorUI/UserInterface/Views/FilterBar.js 2019-08-20 20:40:32 UTC (rev 248915)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/FilterBar.js 2019-08-20 21:11:11 UTC (rev 248916)
@@ -140,12 +140,18 @@
this._inputField.value = null; // Get the placeholder to show again.
}
+ addFilterNavigationItem(navigationItem)
+ {
+ console.assert(navigationItem instanceof WI.NavigationItem);
+ this._filtersNavigationBar.addNavigationItem(navigationItem);
+ }
+
addFilterBarButton(identifier, filterFunction, activatedByDefault, defaultToolTip, activatedToolTip, image, imageWidth, imageHeight)
{
var filterBarButton = new WI.FilterBarButton(identifier, filterFunction, activatedByDefault, defaultToolTip, activatedToolTip, image, imageWidth, imageHeight);
filterBarButton.addEventListener(WI.ButtonNavigationItem.Event.Clicked, this._handleFilterBarButtonClicked, this);
filterBarButton.addEventListener(WI.FilterBarButton.Event.ActivatedStateToggled, this._handleFilterButtonToggled, this);
- this._filtersNavigationBar.addNavigationItem(filterBarButton);
+ this.addFilterNavigationItem(filterBarButton);
if (filterBarButton.activated) {
this._filterFunctionsMap.set(filterBarButton.identifier, filterBarButton.filterFunction);
this._handleFilterChanged();
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ScopeBar.css (248915 => 248916)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ScopeBar.css 2019-08-20 20:40:32 UTC (rev 248915)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ScopeBar.css 2019-08-20 21:11:11 UTC (rev 248916)
@@ -27,8 +27,11 @@
padding: 0 3px;
overflow: hidden;
+ --scope-bar-margin-default: 2px;
+ --scope-bar-padding-default: 9px;
--scope-bar-text-color-default: var(--text-color);
--scope-bar-background-color-default: unset;
+ --scope-bar-background-opacity-default: var(--glyph-opacity);
--scope-bar-border-color-default: unset;
}
@@ -36,15 +39,18 @@
position: relative;
z-index: 0;
display: inline-block;
- margin: 0 2px;
- padding: 2px 9px 4px;
+ margin: 0 var(--scope-bar-margin);
+ padding: 2px var(--scope-bar-padding) 4px;
font-size: 11px;
line-height: 11px;
color: var(--scope-bar-text-color);
text-align: center;
+ --scope-bar-margin: var(--scope-bar-margin-override, var(--scope-bar-margin-default));
+ --scope-bar-padding: var(--scope-bar-padding-override, var(--scope-bar-padding-default));
--scope-bar-text-color: var(--scope-bar-text-color-override, var(--scope-bar-text-color-default));
--scope-bar-background-color: var(--scope-bar-background-color-override, var(--scope-bar-background-color-default));
+ --scope-bar-background-opacity: var(--scope-bar-background-opacity-override, var(--scope-bar-background-opacity-default));
--scope-bar-border-color: var(--scope-bar-border-color-override, var(--scope-bar-border-color-default));
}
@@ -59,7 +65,7 @@
background-color: var(--scope-bar-background-color);
border: 1px solid var(--scope-bar-border-color);
border-radius: 3px;
- opacity: var(--glyph-opacity);
+ opacity: var(--scope-bar-background-opacity);
}
.scope-bar > li:matches(.selected, :hover) {
@@ -68,8 +74,8 @@
--scope-bar-border-color-default: var(--glyph-color-active);
}
-.scope-bar > li:not(.selected):hover::after {
- opacity: 0.5;
+.scope-bar > li:not(.selected):hover {
+ --scope-bar-background-opacity-default: 0.5;
}
.scope-bar > li.selected:active::after {
@@ -91,11 +97,11 @@
}
body[dir=ltr] .scope-bar > li.multiple > select {
- left: 1px;
+ left: calc(var(--scope-bar-padding) - var(--scope-bar-padding-default) + 1px);
}
body[dir=rtl] .scope-bar > li.multiple > select {
- right: 1px;
+ right: calc(var(--scope-bar-padding) - var(--scope-bar-padding-default) + 1px);
}
.scope-bar > li.multiple:not(.selected) > select {
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.css (248915 => 248916)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.css 2019-08-20 20:40:32 UTC (rev 248915)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.css 2019-08-20 21:11:11 UTC (rev 248916)
@@ -104,6 +104,16 @@
display: none;
}
+.sidebar > .panel.navigation.sources > .filter-bar .sources-resource-type-scope-bar.default-item-selected:not(:hover) {
+ --scope-bar-text-color-override: var(--text-color);
+ --scope-bar-background-color-override: transparent;
+ --scope-bar-border-color-override: transparent;
+}
+
+.sidebar > .panel.navigation.sources > .filter-bar .sources-resource-type-scope-bar.default-item-selected:hover {
+ --scope-bar-background-opacity-override: 0.5;
+}
+
@media (min-height: 650px) {
.sidebar > .panel.navigation.sources > .content {
display: flex;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.js (248915 => 248916)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.js 2019-08-20 20:40:32 UTC (rev 248915)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.js 2019-08-20 21:11:11 UTC (rev 248916)
@@ -221,29 +221,18 @@
this.contentView.addSubview(this._resourcesNavigationBar);
this.contentView.element.insertBefore(this._resourcesNavigationBar.element, this._breakpointsContainer.nextSibling);
- this._resourcesNavigationBar.addNavigationItem(new WI.FlexibleSpaceNavigationItem);
+ this._resourceGroupingModeScopeBarItems = {};
+ let createResourceGroupingModeScopeBarItem = (mode, label) => {
+ this._resourceGroupingModeScopeBarItems[mode] = new WI.ScopeBarItem("sources-resource-grouping-mode-" + mode, label, {exclusive: true});
+ this._resourceGroupingModeScopeBarItems[mode][SourcesNavigationSidebarPanel.ResourceGroupingModeSymbol] = mode;
+ };
+ createResourceGroupingModeScopeBarItem(WI.Resource.GroupingMode.Type, WI.UIString("By Type"));
+ createResourceGroupingModeScopeBarItem(WI.Resource.GroupingMode.Path, WI.UIString("By Path"));
- const resourceTypeScopeItemPrefix = "sources-resource-type-";
- let resourceTypeScopeBarItems = [];
- resourceTypeScopeBarItems.push(new WI.ScopeBarItem(resourceTypeScopeItemPrefix + "all", WI.UIString("All Resources"), {exclusive: true}));
- for (let value of Object.values(WI.Resource.Type)) {
- let scopeBarItem = new WI.ScopeBarItem(resourceTypeScopeItemPrefix + value, WI.Resource.displayNameForType(value, true));
- scopeBarItem[WI.SourcesNavigationSidebarPanel.ResourceTypeSymbol] = value;
- resourceTypeScopeBarItems.push(scopeBarItem);
- }
+ this._resourceGroupingModeScopeBar = new WI.ScopeBar("sources-resource-grouping-mode-scope-bar", Object.values(this._resourceGroupingModeScopeBarItems), this._resourceGroupingModeScopeBarItems[WI.settings.resourceGroupingMode.value]);
+ this._resourceGroupingModeScopeBar.addEventListener(WI.ScopeBar.Event.SelectionChanged, this._handleResourceGroupingModeScopeBarSelectionChanged, this);
+ this._resourcesNavigationBar.addNavigationItem(this._resourceGroupingModeScopeBar);
- const shouldGroupNonExclusiveItems = true;
- this._resourceTypeScopeBar = new WI.ScopeBar("sources-resource-type-scope-bar", resourceTypeScopeBarItems, resourceTypeScopeBarItems[0], shouldGroupNonExclusiveItems);
- this._resourceTypeScopeBar.addEventListener(WI.ScopeBar.Event.SelectionChanged, this._handleResourceTypeScopeBarSelectionChanged, this);
- this._resourcesNavigationBar.addNavigationItem(this._resourceTypeScopeBar);
-
- this._resourcesNavigationBar.addNavigationItem(new WI.FlexibleSpaceNavigationItem);
-
- let resourceGroupingModeNavigationItem = new WI.ButtonNavigationItem("grouping-mode", WI.UIString("Grouping Mode"), "Images/Gear.svg", 15, 15);
- resourceGroupingModeNavigationItem.visibilityPriority = WI.NavigationItem.VisibilityPriority.Low;
- WI.addMouseDownContextMenuHandlers(resourceGroupingModeNavigationItem.element, this._populateResourceGroupingModeContextMenu.bind(this));
- this._resourcesNavigationBar.addNavigationItem(resourceGroupingModeNavigationItem);
-
let resourcesContainer = document.createElement("div");
resourcesContainer.classList.add("resources-container");
this.contentView.element.insertBefore(resourcesContainer, this._resourcesNavigationBar.element.nextSibling);
@@ -266,6 +255,20 @@
const activatedByDefault = false;
this.filterBar.addFilterBarButton("sources-only-show-resources-with-issues", this._filterByResourcesWithIssues.bind(this), activatedByDefault, WI.UIString("Only show resources with issues"), WI.UIString("Show all resources"), "Images/Errors.svg", 15, 15);
+ const resourceTypeScopeItemPrefix = "sources-resource-type-";
+ let resourceTypeScopeBarItems = [];
+ resourceTypeScopeBarItems.push(new WI.ScopeBarItem(resourceTypeScopeItemPrefix + "all", WI.UIString("All")));
+ for (let value of Object.values(WI.Resource.Type)) {
+ let scopeBarItem = new WI.ScopeBarItem(resourceTypeScopeItemPrefix + value, WI.Resource.displayNameForType(value, true));
+ scopeBarItem[SourcesNavigationSidebarPanel.ResourceTypeSymbol] = value;
+ resourceTypeScopeBarItems.push(scopeBarItem);
+ }
+
+ const shouldGroupNonExclusiveItems = true;
+ this._resourceTypeScopeBar = new WI.ScopeBar("sources-resource-type-scope-bar", resourceTypeScopeBarItems, resourceTypeScopeBarItems[0], shouldGroupNonExclusiveItems);
+ this._resourceTypeScopeBar.addEventListener(WI.ScopeBar.Event.SelectionChanged, this._handleResourceTypeScopeBarSelectionChanged, this);
+ this.filterBar.addFilterNavigationItem(this._resourceTypeScopeBar);
+
WI.settings.resourceGroupingMode.addEventListener(WI.Setting.Event.Changed, this._handleResourceGroupingModeChanged, this);
WI.Frame.addEventListener(WI.Frame.Event.MainResourceDidChange, this._handleFrameMainResourceDidChange, this);
@@ -557,7 +560,7 @@
{
console.assert(this._resourceTypeScopeBar.selectedItems.length === 1);
let selectedScopeBarItem = this._resourceTypeScopeBar.selectedItems[0];
- return selectedScopeBarItem && !selectedScopeBarItem.exclusive;
+ return selectedScopeBarItem && selectedScopeBarItem !== this._resourceTypeScopeBar.defaultItem;
}
matchTreeElementAgainstCustomFilters(treeElement, flags)
@@ -569,8 +572,8 @@
console.assert(this._resourceTypeScopeBar.selectedItems.length === 1);
let selectedScopeBarItem = this._resourceTypeScopeBar.selectedItems[0];
- // Show everything if there is no selection or "All Resources" is selected (the exclusive item).
- if (!selectedScopeBarItem || selectedScopeBarItem.exclusive)
+ // Show everything if there is no selection or "All Resources" is selected (the default item).
+ if (!selectedScopeBarItem || selectedScopeBarItem === this._resourceTypeScopeBar.defaultItem)
return true;
// Folders are hidden on the first pass, but visible childen under the folder will force the folder visible again.
@@ -1514,20 +1517,16 @@
return false;
}
- _handleResourceTypeScopeBarSelectionChanged(event)
+ _handleResourceGroupingModeScopeBarSelectionChanged(event)
{
- this.updateFilter();
+ console.assert(this._resourceGroupingModeScopeBar.selectedItems.length === 1);
+ let selectedScopeBarItem = this._resourceGroupingModeScopeBar.selectedItems[0];
+ WI.settings.resourceGroupingMode.value = selectedScopeBarItem[SourcesNavigationSidebarPanel.ResourceGroupingModeSymbol] || WI.Resource.GroupingMode.Type;
}
- _populateResourceGroupingModeContextMenu(contextMenu)
+ _handleResourceTypeScopeBarSelectionChanged(event)
{
- function addOption(mode, label) {
- contextMenu.appendCheckboxItem(label, () => {
- WI.settings.resourceGroupingMode.value = mode;
- }, WI.settings.resourceGroupingMode.value === mode);
- }
- addOption(WI.Resource.GroupingMode.Path, WI.UIString("Group by Path"));
- addOption(WI.Resource.GroupingMode.Type, WI.UIString("Group by Type"));
+ this.updateFilter();
}
_handleTreeSelectionDidChange(event)
@@ -1759,6 +1758,11 @@
this._originTreeElementMap.clear();
+ let resourceGroupingModeScopeBarItem = this._resourceGroupingModeScopeBarItems[WI.settings.resourceGroupingMode.value];
+ console.assert(resourceGroupingModeScopeBarItem);
+ if (resourceGroupingModeScopeBarItem)
+ resourceGroupingModeScopeBarItem.selected = true;
+
this._resourcesTreeOutline.removeChildren();
let mainFrame = WI.networkManager.mainFrame;
@@ -2148,3 +2152,4 @@
};
WI.SourcesNavigationSidebarPanel.ResourceTypeSymbol = Symbol("resource-type");
+WI.SourcesNavigationSidebarPanel.ResourceGroupingModeSymbol = Symbol("resource-grouping-mode");
