Skip to content

Commit 600cfea

Browse files
J0panBrent Fulgham
J0pan
authored and
Brent Fulgham
committed
Web Inspector: Add a toggle to hide UA stylesheet rules in Elements tab
https://bugs.webkit.org/show_bug.cgi?id=302161 rdar://164265183 Reviewed by NOBODY. This change adds a setting in the Setting > Elements tab to control whether User Agent styles are displayed. When disabled, User Agent rules are filtered out at section creation time in the Elements > Styles panel. Under the computed Panel the "go-to" arrows situated beside each style property are also hidden if the style property points to a User Agent Style and the "show user agent styles" settings is disabled. No new tests. * Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js: * Source/WebInspectorUI/UserInterface/Base/Setting.js: * Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js: (WI.ComputedStyleDetailsPanel.prototype.initialLayout): (WI.ComputedStyleDetailsPanel.prototype._handleShowUserAgentStylesChanged): * Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js: (WI.SettingsTabContentView.prototype._createElementsSettingsView): * Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js: (WI.SpreadsheetRulesStyleDetailsPanel): (WI.SpreadsheetRulesStyleDetailsPanel.prototype.layout): (WI.SpreadsheetRulesStyleDetailsPanel.prototype._shouldIncludeStyle): (WI.SpreadsheetRulesStyleDetailsPanel.prototype._handleShowUserAgentStylesChanged): * Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js: (WI.SpreadsheetStyleProperty.prototype.update): Canonical link: https://commits.webkit.org/304627@main
1 parent 7681167 commit 600cfea

File tree

6 files changed

+60
-18
lines changed

6 files changed

+60
-18
lines changed

‎Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1603,6 +1603,8 @@ localizedStrings["Show property syntax in documentation popover"] = "Show proper
16031603
localizedStrings["Show rulers"] = "Show rulers";
16041604
localizedStrings["Show the details sidebar (%s)"] = "Show the details sidebar (%s)";
16051605
localizedStrings["Show the navigation sidebar (%s)"] = "Show the navigation sidebar (%s)";
1606+
/* Settings tab checkbox label for whether the User Agent styles should be shown */
1607+
localizedStrings["Show user agent styles"] = "Show user agent styles";
16061608
/* Settings tab checkbox label for whether the transparency grid is shown by default */
16071609
localizedStrings["Show transparency grid (settings label)"] = "Show transparency grid";
16081610
/* Tooltip for showing the checkered transparency grid under images and canvases */

‎Source/WebInspectorUI/UserInterface/Base/Setting.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -227,6 +227,7 @@ WI.settings = {
227227
showRulers: new WI.Setting("show-rulers", false),
228228
showRulersDuringElementSelection: new WI.Setting("show-rulers-during-element-selection", true),
229229
showScopeChainOnPause: new WI.Setting("show-scope-chain-sidebar", true),
230+
showUserAgentStyles: new WI.Setting("show-user-agent-styles", true),
230231
showWhitespaceCharacters: new WI.Setting("show-whitespace-characters", false),
231232
tabSize: new WI.Setting("tab-size", 4),
232233
timelinesAutoStop: new WI.Setting("timelines-auto-stop", true),

‎Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -209,6 +209,8 @@ WI.ComputedStyleDetailsPanel = class ComputedStyleDetailsPanel extends WI.StyleD
209209

210210
this._computedStyleShowAllSetting.addEventListener(WI.Setting.Event.Changed, this._handleShowAllSettingChanged, this);
211211
this._computedStylePreferShorthandsSetting.addEventListener(WI.Setting.Event.Changed, this._handleUseShorthandsSettingChanged, this);
212+
213+
WI.settings.showUserAgentStyles.addEventListener(WI.Setting.Event.Changed, this._handleShowUserAgentStylesChanged, this);
212214
}
213215

214216
layout()
@@ -341,6 +343,12 @@ WI.ComputedStyleDetailsPanel = class ComputedStyleDetailsPanel extends WI.StyleD
341343
this._computedStyleSection.showsImplicitProperties = this._computedStyleShowAllSetting.value;
342344
}
343345

346+
_handleShowUserAgentStylesChanged(event)
347+
{
348+
const significantChange = true;
349+
this.refresh(significantChange);
350+
}
351+
344352
_handleUseShorthandsSettingChanged(event)
345353
{
346354
this._computedStyleSection.showsShorthandsInsteadOfLonghands = this._computedStylePreferShorthandsSetting.value;

‎Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -306,6 +306,7 @@ WI.SettingsTabContentView = class SettingsTabContentView extends WI.TabContentVi
306306
let cssGroup = elementsSettingsView.addGroup(WI.UIString("CSS:"));
307307
cssGroup.addSetting(WI.settings.cssChangesPerNode, WI.UIString("Show changes only for selected node"));
308308
cssGroup.addSetting(WI.settings.showCSSPropertySyntaxInDocumentationPopover, WI.UIString("Show property syntax in documentation popover"));
309+
cssGroup.addSetting(WI.settings.showUserAgentStyles, WI.UIString("Show user agent styles"));
309310

310311
this._createReferenceLink(elementsSettingsView);
311312

‎Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,8 @@ WI.SpreadsheetRulesStyleDetailsPanel = class SpreadsheetRulesStyleDetailsPanel e
4646
this._suppressLayoutAfterSelectorOrGroupChange = false;
4747

4848
this._emptyFilterResultsElement = WI.createMessageTextView(WI.UIString("No Results Found"));
49+
50+
WI.settings.showUserAgentStyles.addEventListener(WI.Setting.Event.Changed, this._handleShowUserAgentStylesChanged, this);
4951
}
5052

5153
// Public
@@ -300,9 +302,16 @@ WI.SpreadsheetRulesStyleDetailsPanel = class SpreadsheetRulesStyleDetailsPanel e
300302
pseudoElement = this.nodeStyles.node.beforePseudoElement();
301303
else if (pseudoId === WI.CSSManager.PseudoSelectorNames.After)
302304
pseudoElement = this.nodeStyles.node.afterPseudoElement();
305+
306+
let orderedPseudoStyles = WI.DOMNodeStyles.uniqueOrderedStyles(pseudoElementInfo.orderedStyles).filter((style) => this._shouldIncludeStyle(style));
307+
308+
// Don't show an empty "Pseudo-Element..." header
309+
if (!orderedPseudoStyles.length)
310+
continue;
311+
303312
addHeader(WI.UIString("Pseudo-Element"), pseudoElement || pseudoId);
304313

305-
for (let style of WI.DOMNodeStyles.uniqueOrderedStyles(pseudoElementInfo.orderedStyles))
314+
for (let style of orderedPseudoStyles)
306315
createSection(style);
307316
}
308317

@@ -312,6 +321,10 @@ WI.SpreadsheetRulesStyleDetailsPanel = class SpreadsheetRulesStyleDetailsPanel e
312321
for (let style of this.nodeStyles.uniqueOrderedStyles) {
313322
if (style.inherited)
314323
addPseudoStyles();
324+
325+
if (!this._shouldIncludeStyle(style))
326+
continue;
327+
315328
createSection(style);
316329
}
317330

@@ -358,6 +371,17 @@ WI.SpreadsheetRulesStyleDetailsPanel = class SpreadsheetRulesStyleDetailsPanel e
358371
{
359372
this._suppressLayoutAfterSelectorOrGroupChange = true;
360373
}
374+
375+
_shouldIncludeStyle(style)
376+
{
377+
return WI.settings.showUserAgentStyles.value || style.ownerRule?.type !== WI.CSSStyleSheet.Type.UserAgent;
378+
}
379+
380+
_handleShowUserAgentStylesChanged(event)
381+
{
382+
const significantChange = true;
383+
this.refresh(significantChange);
384+
}
361385
};
362386

363387
WI.SpreadsheetRulesStyleDetailsPanel.StyleSectionSymbol = Symbol("style-section");

‎Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js‎

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -228,31 +228,37 @@ WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object
228228

229229
if (!this._property.implicit && this._property.ownerStyle.type === WI.CSSStyleDeclaration.Type.Computed && !this._property.isShorthand) {
230230
let effectiveProperty = this._property.ownerStyle.nodeStyles.effectivePropertyForName(this._property.name);
231+
232+
// Check if it's a user agent style BEFORE potentially replacing with shorthand.
233+
// User agent styles don't have styleSheetTextRange, so they get replaced below.
234+
let originalOwnerRule = effectiveProperty?.ownerStyle.ownerRule;
235+
let shouldShowGoToArrow = WI.settings.showUserAgentStyles.value || originalOwnerRule?.type !== WI.CSSStyleSheet.Type.UserAgent;
236+
231237
if (effectiveProperty && !effectiveProperty.styleSheetTextRange)
232238
effectiveProperty = effectiveProperty.relatedShorthandProperty;
233239

234-
let ownerRule = effectiveProperty ? effectiveProperty.ownerStyle.ownerRule : null;
240+
let ownerRule = effectiveProperty?.ownerStyle.ownerRule;
235241

236-
let arrowElement = this._contentElement.appendChild(WI.createGoToArrowButton());
237-
arrowElement.addEventListener("click", (event) => {
238-
if (!effectiveProperty || !ownerRule || !event.altKey) {
239-
if (this._delegate.spreadsheetStylePropertyShowProperty)
240-
this._delegate.spreadsheetStylePropertyShowProperty(this, this._property);
241-
return;
242-
}
242+
if (shouldShowGoToArrow) {
243+
let arrowElement = this._contentElement.appendChild(WI.createGoToArrowButton());
244+
arrowElement.addEventListener("click", (event) => {
245+
if (!effectiveProperty || !ownerRule || !event.altKey) {
246+
this._delegate.spreadsheetStylePropertyShowProperty?.(this, this._property);
247+
return;
248+
}
243249

244-
let sourceCode = ownerRule.sourceCodeLocation.sourceCode;
245-
let {startLine, startColumn} = effectiveProperty.styleSheetTextRange;
246-
WI.showSourceCodeLocation(sourceCode.createSourceCodeLocation(startLine, startColumn), {
247-
ignoreNetworkTab: true,
248-
ignoreSearchTab: true,
250+
let sourceCode = ownerRule.sourceCodeLocation.sourceCode;
251+
let {startLine, startColumn} = effectiveProperty.styleSheetTextRange;
252+
WI.showSourceCodeLocation(sourceCode.createSourceCodeLocation(startLine, startColumn), {
253+
ignoreNetworkTab: true,
254+
ignoreSearchTab: true,
255+
});
249256
});
250-
});
251257

252-
if (effectiveProperty && ownerRule)
253-
arrowElement.title = WI.UIString("Option-click to show source");
258+
if (effectiveProperty && ownerRule)
259+
arrowElement.title = WI.UIString("Option-click to show source");
260+
}
254261
}
255-
256262
this.updateStatus();
257263
}
258264

0 commit comments

Comments
 (0)