Web Inspector: Elements: Styles: add icons for various CSS rule types
authordrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 3 Aug 2019 19:36:32 +0000 (19:36 +0000)
committerdrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 3 Aug 2019 19:36:32 +0000 (19:36 +0000)
commit1256a057b4ae1a65d78109e2ceb37af71e782d8d
treedde6df644a246b6b1c3af738b6d949d26bd04773
parentac51a8f0788de0796f835e555e6ae46e9f784502
Web Inspector: Elements: Styles: add icons for various CSS rule types
https://bugs.webkit.org/show_bug.cgi?id=199946

Reviewed by Joseph Pecoraro.

Source/WebInspectorUI:

* UserInterface/Controllers/CSSManager.js:
(WI.CSSManager.displayNameForPseudoId):
Add hardcoded pseudo-selector identifiers for older backends.

* UserInterface/Models/CSSSelector.js:
(WI.CSSSelector.prototype.isPseudoSelector): Added.
(WI.CSSSelector.prototype.isPseudoElementSelector): Deleted.
There are more types of pseudo-selectors than just `:{before|after}`.

* UserInterface/Models/CSSStyleDeclaration.js:
(WI.CSSStyleDeclaration.prototype.generateCSSRuleString): Added.

* UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js:
(WI.SpreadsheetRulesStyleDetailsPanel.prototype.spreadsheetCSSStyleDeclarationSectionAddNewRule): Added.
(WI.SpreadsheetRulesStyleDetailsPanel.prototype.layout):
Provide a delegate method for adding a new rule, so the `WI.SpreadsheetRulesStyleDetailsPanel`
can know what selector to focus once the new rule gets added.

* UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js:
(WI.SpreadsheetCSSStyleDeclarationSection.prototype.initialLayout):
(WI.SpreadsheetCSSStyleDeclarationSection.prototype._renderSelector):
(WI.SpreadsheetCSSStyleDeclarationSection.prototype._populateIconElementContextMenu): Added.
* UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css:
(.spreadsheet-css-declaration .header.editing-selector .selector): Added.
(.spreadsheet-css-declaration .selector > .icon): Added.
(.spreadsheet-css-declaration .selector > .icon + *): Added.
(.spreadsheet-css-declaration .selector.style-attribute > span): Added.
When "mousedown" (or "contextmenu") on the icon, show a context menu with helpful actions:
 - Copy Rule
 - {Disable|Enable} Rule
 - Duplicate Selector
 - Add :{active|focus|hover|visited} Rule
 - Create ::{before|after} Rule
 - Reveal in {Resources Tab|Sources Tab|Stylesheet}
Drive-by: add an extra 0.5px of initial margin before the Style Attribute selector (which is
sans-serif) so it properly aligns with the other selectors (which are monospaced).

* UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js:
(WI.SpreadsheetCSSStyleDeclarationEditor.prototype.layout):
* UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
(.spreadsheet-style-declaration-editor:empty): Added.
(.spreadsheet-style-declaration-editor.no-properties): Deleted.
Add some extra space when there's no inline style so it looks a bit less cramped.

* UserInterface/Main.html:
* UserInterface/Views/StyleRuleIcons.css: Added.
(.author-style-rule-icon .icon):
(.author-style-rule-icon.pseudo-selector .icon):
(.user-style-rule-icon .icon):
(.user-style-rule-icon.pseudo-selector .icon):
(.user-agent-style-rule-icon .icon):
(.user-agent-style-rule-icon.pseudo-selector .icon):
(.inspector-style-rule-icon .icon):
(.inspector-style-rule-icon.pseudo-selector .icon):
(.inherited-style-rule-icon .icon):
(.inherited-element-style-rule-icon .icon):
* UserInterface/Images/StyleRule.svg: Added.
* UserInterface/Images/StyleRuleInheritedElement.svg: Added.
* UserInterface/Images/StyleRulePseudo.svg: Added.
Add generic icon classes for style rule icons.

* UserInterface/Base/Setting.js:
* UserInterface/Views/SettingsTabContentView.js:
(WI.SettingsTabContentView.prototype._createExperimentalSettingsView):
Add experimental setting.

* Localizations/en.lproj/localizedStrings.js:

LayoutTests:

* inspector/css/generateCSSRuleString.html: Added.
* inspector/css/generateCSSRuleString-expected.txt: Added.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@248202 268f45cc-cd09-0410-ab3c-d52691b4dbfc
20 files changed:
LayoutTests/ChangeLog
LayoutTests/inspector/css/generateCSSRuleString-expected.txt [new file with mode: 0644]
LayoutTests/inspector/css/generateCSSRuleString.html [new file with mode: 0644]
Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
Source/WebInspectorUI/UserInterface/Base/Setting.js
Source/WebInspectorUI/UserInterface/Controllers/CSSManager.js
Source/WebInspectorUI/UserInterface/Images/StyleRule.svg [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Images/StyleRuleInheritedElement.svg [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Images/StyleRulePseudo.svg [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Main.html
Source/WebInspectorUI/UserInterface/Models/CSSSelector.js
Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js
Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js
Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css
Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js
Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css
Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js
Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js
Source/WebInspectorUI/UserInterface/Views/StyleRuleIcons.css [new file with mode: 0644]