- Revision
- 288565
- Author
- drou...@apple.com
- Date
- 2022-01-25 11:08:37 -0800 (Tue, 25 Jan 2022)
Log Message
Web Inspector: replace gear-with-contextmenu icons used for filtering with filter-with-contextmenu icons
https://bugs.webkit.org/show_bug.cgi?id=235546
Reviewed by Dean Jackson.
* UserInterface/Views/ComputedStyleDetailsPanel.js:
(WI.ComputedStyleDetailsPanel.prototype.initialLayout):
* UserInterface/Views/ComputedStyleDetailsPanel.css:
(.sidebar > .panel.details.css-style > .content > .computed > .details-section.computed-style-properties > .header > .options.filter):
(.sidebar > .panel.details.css-style > .content > .computed > .details-section.computed-style-properties > .header > .options.filter:active): Added.
(.sidebar > .panel.details.css-style > .content > .computed > .details-section.computed-style-properties > .header > .options.filter.active): Added.
(.sidebar > .panel.details.css-style > .content > .computed > .details-section.computed-style-properties > .header > .options.filter.active:active): Added.
* UserInterface/Views/DOMNodeDetailsSidebarPanel.js:
(WI.DOMNodeDetailsSidebarPanel.prototype.initialLayout):
* UserInterface/Views/DOMNodeDetailsSidebarPanel.css:
(.sidebar > .panel.dom-node-details .details-section.dom-node-event-listeners > .header > .filter):
(.sidebar > .panel.dom-node-details .details-section.dom-node-event-listeners > .header > .filter:active): Added.
* UserInterface/Views/NetworkTableContentView.js:
(WI.NetworkTableContentView):
* UserInterface/Images/Filter.svg: Added.
Modified Paths
Added Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (288564 => 288565)
--- trunk/Source/WebInspectorUI/ChangeLog 2022-01-25 18:50:03 UTC (rev 288564)
+++ trunk/Source/WebInspectorUI/ChangeLog 2022-01-25 19:08:37 UTC (rev 288565)
@@ -1,3 +1,27 @@
+2022-01-25 Devin Rousso <drou...@apple.com>
+
+ Web Inspector: replace gear-with-contextmenu icons used for filtering with filter-with-contextmenu icons
+ https://bugs.webkit.org/show_bug.cgi?id=235546
+
+ Reviewed by Dean Jackson.
+
+ * UserInterface/Views/ComputedStyleDetailsPanel.js:
+ (WI.ComputedStyleDetailsPanel.prototype.initialLayout):
+ * UserInterface/Views/ComputedStyleDetailsPanel.css:
+ (.sidebar > .panel.details.css-style > .content > .computed > .details-section.computed-style-properties > .header > .options.filter):
+ (.sidebar > .panel.details.css-style > .content > .computed > .details-section.computed-style-properties > .header > .options.filter:active): Added.
+ (.sidebar > .panel.details.css-style > .content > .computed > .details-section.computed-style-properties > .header > .options.filter.active): Added.
+ (.sidebar > .panel.details.css-style > .content > .computed > .details-section.computed-style-properties > .header > .options.filter.active:active): Added.
+ * UserInterface/Views/DOMNodeDetailsSidebarPanel.js:
+ (WI.DOMNodeDetailsSidebarPanel.prototype.initialLayout):
+ * UserInterface/Views/DOMNodeDetailsSidebarPanel.css:
+ (.sidebar > .panel.dom-node-details .details-section.dom-node-event-listeners > .header > .filter):
+ (.sidebar > .panel.dom-node-details .details-section.dom-node-event-listeners > .header > .filter:active): Added.
+ * UserInterface/Views/NetworkTableContentView.js:
+ (WI.NetworkTableContentView):
+
+ * UserInterface/Images/Filter.svg: Added.
+
2022-01-24 Devin Rousso <drou...@apple.com>
Web Inspector: Network: give the Ignore Caches button a label so it's more visible and immediately understandable
Added: trunk/Source/WebInspectorUI/UserInterface/Images/Filter.svg (0 => 288565)
--- trunk/Source/WebInspectorUI/UserInterface/Images/Filter.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/Filter.svg 2022-01-25 19:08:37 UTC (rev 288565)
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2022 Apple Inc. All rights reserved. -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 15 15">
+ <g transform="translate(0.5, 0.5)">
+ <circle stroke="currentColor" fill="none" cx="7" cy="7" r="7"/>
+ <path stroke="currentColor" d="M3 5 L 11 5" stroke-linecap="square"/>
+ <path stroke="currentColor" d="M4 7.5 L 10 7.5" stroke-linecap="square"/>
+ <path stroke="currentColor" d="M5 10 L 9 10" stroke-linecap="square"/>
+ </g>
+</svg>
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css (288564 => 288565)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css 2022-01-25 18:50:03 UTC (rev 288564)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css 2022-01-25 19:08:37 UTC (rev 288565)
@@ -40,8 +40,21 @@
.sidebar > .panel.details.css-style > .content > .computed > .details-section.computed-style-properties > .header > .options.filter {
width: 13px;
height: 13px;
+ color: var(--glyph-color);
}
+.sidebar > .panel.details.css-style > .content > .computed > .details-section.computed-style-properties > .header > .options.filter:active {
+ color: var(--glyph-color-pressed);
+}
+
+.sidebar > .panel.details.css-style > .content > .computed > .details-section.computed-style-properties > .header > .options.filter.active {
+ color: var(--glyph-color-active);
+}
+
+.sidebar > .panel.details.css-style > .content > .computed > .details-section.computed-style-properties > .header > .options.filter.active:active {
+ color: var(--glyph-color-active-pressed);
+}
+
.sidebar > .panel.details.css-style > .content > .computed .spreadsheet-style-declaration-editor {
padding-bottom: 3px;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js (288564 => 288565)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js 2022-01-25 18:50:03 UTC (rev 288564)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js 2022-01-25 19:08:37 UTC (rev 288565)
@@ -147,14 +147,18 @@
this.element.appendChild(boxModelSection.element);
- let propertyFiltersElement = WI.ImageUtilities.useSVGSymbol("Images/FilterFieldGlyph.svg", "filter");
+ let propertyFiltersElement = WI.ImageUtilities.useSVGSymbol("Images/Filter.svg", "filter");
WI.addMouseDownContextMenuHandlers(propertyFiltersElement, (contextMenu) => {
contextMenu.appendCheckboxItem(WI.UIString("Show All"), () => {
this._computedStyleShowAllSetting.value = !this._computedStyleShowAllSetting.value;
+
+ propertyFiltersElement.classList.toggle("active", this._computedStyleShowAllSetting.value || this._computedStylePreferShorthandsSetting.value);
}, this._computedStyleShowAllSetting.value);
contextMenu.appendCheckboxItem(WI.UIString("Prefer Shorthands"), () => {
this._computedStylePreferShorthandsSetting.value = !this._computedStylePreferShorthandsSetting.value;
+
+ propertyFiltersElement.classList.toggle("active", this._computedStyleShowAllSetting.value || this._computedStylePreferShorthandsSetting.value);
}, this._computedStylePreferShorthandsSetting.value);
});
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMNodeDetailsSidebarPanel.css (288564 => 288565)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMNodeDetailsSidebarPanel.css 2022-01-25 18:50:03 UTC (rev 288564)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMNodeDetailsSidebarPanel.css 2022-01-25 19:08:37 UTC (rev 288565)
@@ -27,8 +27,13 @@
position: relative;
width: 13px;
height: 13px;
+ color: var(--glyph-color);
}
+.sidebar > .panel.dom-node-details .details-section.dom-node-event-listeners > .header > .filter:active {
+ color: var(--glyph-color-pressed);
+}
+
body[dir=ltr] .sidebar > .panel.dom-node-details .details-section.dom-node-event-listeners > .header > .filter {
float: right;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMNodeDetailsSidebarPanel.js (288564 => 288565)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMNodeDetailsSidebarPanel.js 2022-01-25 18:50:03 UTC (rev 288564)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMNodeDetailsSidebarPanel.js 2022-01-25 19:08:37 UTC (rev 288565)
@@ -83,7 +83,7 @@
this.contentView.element.appendChild(propertiesSection.element);
}
- let eventListenersFilterElement = WI.ImageUtilities.useSVGSymbol("Images/FilterFieldGlyph.svg", "filter", WI.UIString("Grouping Method"));
+ let eventListenersFilterElement = WI.ImageUtilities.useSVGSymbol("Images/Filter.svg", "filter", WI.UIString("Grouping Method"));
WI.addMouseDownContextMenuHandlers(eventListenersFilterElement, this._populateEventListenersFilterContextMenu.bind(this));
this._eventListenersSectionGroup = new WI.DetailsSectionGroup;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.js (288564 => 288565)
--- trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.js 2022-01-25 18:50:03 UTC (rev 288564)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.js 2022-01-25 19:08:37 UTC (rev 288565)
@@ -94,7 +94,7 @@
this._otherFiltersNavigationItem.visibilityPriority = WI.NavigationItem.VisibilityPriority.High;
WI.addMouseDownContextMenuHandlers(this._otherFiltersNavigationItem.element, this._handleOtherFiltersNavigationItemContextMenu.bind(this));
this._updateOtherFiltersNavigationItemState();
- this._otherFiltersNavigationItem.element.appendChild(WI.ImageUtilities.useSVGSymbol("Images/Gear.svg", "glyph"));
+ this._otherFiltersNavigationItem.element.appendChild(WI.ImageUtilities.useSVGSymbol("Images/Filter.svg", "glyph"));
this._urlFilterSearchText = null;
this._urlFilterSearchRegex = null;
