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.
git-svn-id: http://svn.webkit.org/repository/webkit/trunk@288565 268f45cc-cd09-0410-ab3c-d52691b4dbfc
diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
index 31d4a30..21d38ab 100644
--- a/Source/WebInspectorUI/ChangeLog
+++ b/Source/WebInspectorUI/ChangeLog
@@ -1,3 +1,27 @@
+2022-01-25 Devin Rousso <drousso@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 <drousso@apple.com>
Web Inspector: Network: give the Ignore Caches button a label so it's more visible and immediately understandable
diff --git a/Source/WebInspectorUI/UserInterface/Images/Filter.svg b/Source/WebInspectorUI/UserInterface/Images/Filter.svg
new file mode 100644
index 0000000..949c962
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/Filter.svg
@@ -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>
diff --git a/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css b/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css
index ef6eaa7..94f0936 100644
--- a/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css
+++ b/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css
@@ -40,6 +40,19 @@
.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 {
diff --git a/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js b/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js
index 1157135..3fa373e 100644
--- a/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js
+++ b/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js
@@ -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);
});
diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMNodeDetailsSidebarPanel.css b/Source/WebInspectorUI/UserInterface/Views/DOMNodeDetailsSidebarPanel.css
index 649e4fc..a0fb82e 100644
--- a/Source/WebInspectorUI/UserInterface/Views/DOMNodeDetailsSidebarPanel.css
+++ b/Source/WebInspectorUI/UserInterface/Views/DOMNodeDetailsSidebarPanel.css
@@ -27,6 +27,11 @@
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 {
diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMNodeDetailsSidebarPanel.js b/Source/WebInspectorUI/UserInterface/Views/DOMNodeDetailsSidebarPanel.js
index d43e155..1bcec93 100644
--- a/Source/WebInspectorUI/UserInterface/Views/DOMNodeDetailsSidebarPanel.js
+++ b/Source/WebInspectorUI/UserInterface/Views/DOMNodeDetailsSidebarPanel.js
@@ -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;
diff --git a/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.js b/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.js
index 040c4bd..2e589cd 100644
--- a/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.js
+++ b/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.js
@@ -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;
