Web Inspector: Add Changes panel to Elements tab
authornvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 28 Jan 2019 09:29:20 +0000 (09:29 +0000)
committernvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 28 Jan 2019 09:29:20 +0000 (09:29 +0000)
commitc4f7634355a2f54e0df14ada4e4b6a919935d9ee
tree65e8cb1b67ba30f95a9af0bba1c6a02e4c4a2009
parentdad23bb7a64446b198e60e2a38c0ff39ad6f2d18
Web Inspector: Add Changes panel to Elements tab
https://bugs.webkit.org/show_bug.cgi?id=193803

Reviewed by Devin Rousso.

Source/WebInspectorUI:

Introduce the new experimental Changes Panel. It shows a list of CSS changes
made via Web Inspector, so the changes could be copied to the source files.

* Localizations/en.lproj/localizedStrings.js:
* UserInterface/Base/Setting.js:
* UserInterface/Base/Utilities.js:
(Array.diffArrays): Added.

* UserInterface/Controllers/CSSManager.js:
(WI.CSSManager):
(WI.CSSManager.prototype.get modifiedCSSRules):
(WI.CSSManager.prototype.addModifiedCSSRule):
(WI.CSSManager.prototype.removeModifiedCSSRule):
(WI.CSSManager.prototype._mainResourceDidChange):

* UserInterface/Main.html:
* UserInterface/Models/CSSProperty.js:
(WI.CSSProperty):
(WI.CSSProperty.prototype.remove):
(WI.CSSProperty.prototype.replaceWithText):
(WI.CSSProperty.prototype.commentOut):
(WI.CSSProperty.prototype.set text):
(WI.CSSProperty.prototype.get modified):
(WI.CSSProperty.prototype.set name):
(WI.CSSProperty.prototype.set rawValue):
(WI.CSSProperty.prototype.get initialState):
(WI.CSSProperty.prototype._updateOwnerStyleText):
(WI.CSSProperty.prototype._markModified):
Mark CSSProperty modified *before* making any changes to copy its initial state.

* UserInterface/Models/CSSRule.js:
(WI.CSSRule):
(WI.CSSRule.prototype.get id):
(WI.CSSRule.prototype.get initialState):
(WI.CSSRule.prototype.get stringId):
(WI.CSSRule.prototype.markModified):

* UserInterface/Models/CSSStyleDeclaration.js:
(WI.CSSStyleDeclaration):
(WI.CSSStyleDeclaration.prototype.get initialState):
(WI.CSSStyleDeclaration.prototype.get enabledProperties):
(WI.CSSStyleDeclaration.prototype.get properties):
(WI.CSSStyleDeclaration.prototype.set properties):
(WI.CSSStyleDeclaration.prototype.propertyForName):
(WI.CSSStyleDeclaration.prototype.newBlankProperty):
(WI.CSSStyleDeclaration.prototype.markModified):

* UserInterface/Views/ChangesDetailsSidebarPanel.css: Added.
(.sidebar > .panel.changes-panel):
(.sidebar > .panel.changes-panel:not(.empty)):
(.sidebar > .panel.changes-panel.empty):
(.changes-panel ins):
(.changes-panel del):
(.changes-panel del.css-property::before):
(.changes-panel ins.css-property::before):
(@media (prefers-color-scheme: dark)):

* UserInterface/Views/ChangesDetailsSidebarPanel.js: Added.
(WI.ChangesDetailsSidebarPanel):
(WI.ChangesDetailsSidebarPanel.prototype.inspect):
(WI.ChangesDetailsSidebarPanel.prototype.supportsDOMNode):
(WI.ChangesDetailsSidebarPanel.prototype.shown):
(WI.ChangesDetailsSidebarPanel.prototype.detached):
(WI.ChangesDetailsSidebarPanel.prototype.layout):
(WI.ChangesDetailsSidebarPanel.prototype._mainResourceDidChange):

* UserInterface/Views/ElementsTabContentView.js:
(WI.ElementsTabContentView):

* UserInterface/Views/SettingsTabContentView.js:
(WI.SettingsTabContentView.prototype._createExperimentalSettingsView):

* UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
(.spreadsheet-style-declaration-editor .property):
(.spreadsheet-style-declaration-editor .property.modified):
(.spreadsheet-style-declaration-editor .property.modified:not(.selected)):
(@media (prefers-color-scheme: dark)):

* UserInterface/Views/SpreadsheetStyleProperty.js:
(WI.SpreadsheetStyleProperty.prototype.updateStatus):

LayoutTests:

Test newly added Array.diffArrays.

* inspector/unit-tests/array-utilities-expected.txt:
* inspector/unit-tests/array-utilities.html:
Use the old `InspectorTest.log` method since it shows diffs for actual and expected text.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@240559 268f45cc-cd09-0410-ab3c-d52691b4dbfc
18 files changed:
LayoutTests/ChangeLog
LayoutTests/inspector/unit-tests/array-utilities-expected.txt
LayoutTests/inspector/unit-tests/array-utilities.html
Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
Source/WebInspectorUI/UserInterface/Base/Setting.js
Source/WebInspectorUI/UserInterface/Base/Utilities.js
Source/WebInspectorUI/UserInterface/Controllers/CSSManager.js
Source/WebInspectorUI/UserInterface/Main.html
Source/WebInspectorUI/UserInterface/Models/CSSProperty.js
Source/WebInspectorUI/UserInterface/Models/CSSRule.js
Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js
Source/WebInspectorUI/UserInterface/Views/ChangesDetailsSidebarPanel.css [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Views/ChangesDetailsSidebarPanel.js [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Views/ElementsTabContentView.js
Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js
Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css
Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js