Web Inspector: Styles: implement copying and deletion of multiple properties
authornvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 31 Oct 2018 22:52:11 +0000 (22:52 +0000)
committernvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 31 Oct 2018 22:52:11 +0000 (22:52 +0000)
commit2a8b29680a3e49f607593ff2f0e0871e48164c3a
tree289b370abfd6a7de57e1757667f82a5da98d871f
parentb6c74ff434cbcf50702e34db3f63e597e3a4d382
Web Inspector: Styles: implement copying and deletion of multiple properties
https://bugs.webkit.org/show_bug.cgi?id=191037
<rdar://problem/45650078>

Reviewed by Brian Burg.

This patch should only work with "Enable Selection of Multiple Properties" checked. It shouldn't introduce any
changes when this setting is unchecked.

Mousedown on a property (1) and moving the mouse cursor to another property (2) should select properties 1, 2, and
all properties between them until mouseup is fired.

Once selected:
- Pressing Command-C should copy the selected properties.
- Pressing Delete should remove the properties.

* UserInterface/Models/CSSProperty.js:
(WI.CSSProperty.prototype.get formattedText):
* UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
(.spreadsheet-style-declaration-editor):
(.multiple-properties-selection .spreadsheet-style-declaration-editor .property):
(.multiple-properties-selection .spreadsheet-style-declaration-editor :matches(.name, .value):not(.editing)):
(.multiple-properties-selection .spreadsheet-style-declaration-editor .property.selected):
(.multiple-properties-selection .spreadsheet-style-declaration-editor .property.selected:focus):
(@media (prefers-dark-interface)):

* UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js:
(WI.SpreadsheetCSSStyleDeclarationEditor):
(WI.SpreadsheetCSSStyleDeclarationEditor.prototype.initialLayout):
(WI.SpreadsheetCSSStyleDeclarationEditor.prototype.selectProperties):
(WI.SpreadsheetCSSStyleDeclarationEditor.prototype.deselectProperties):
(WI.SpreadsheetCSSStyleDeclarationEditor.prototype.spreadsheetStylePropertyBlur):
(WI.SpreadsheetCSSStyleDeclarationEditor.prototype.spreadsheetStylePropertyMouseEnter):
(WI.SpreadsheetCSSStyleDeclarationEditor.prototype.spreadsheetStylePropertyMouseLeave):
(WI.SpreadsheetCSSStyleDeclarationEditor.prototype.spreadsheetStylePropertyCopy):
(WI.SpreadsheetCSSStyleDeclarationEditor.prototype._handleKeyDown):
(WI.SpreadsheetCSSStyleDeclarationEditor.prototype._hasSelectedProperties):
Property selection is defined as two numbers: anchorIndex and focusIndex.
The property with focusIndex is actually focused. The focus outline is replaced by a more subtle left blue border.

* UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css:
(.spreadsheet-css-declaration.selecting,):
* UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js:
(WI.SpreadsheetCSSStyleDeclarationSection):
(WI.SpreadsheetCSSStyleDeclarationSection.prototype.spreadsheetCSSStyleDeclarationEditorPropertyBlur):
(WI.SpreadsheetCSSStyleDeclarationSection.prototype.spreadsheetCSSStyleDeclarationEditorPropertyMouseEnter):
(WI.SpreadsheetCSSStyleDeclarationSection.prototype.spreadsheetCSSStyleDeclarationEditorPropertyMouseLeave):
(WI.SpreadsheetCSSStyleDeclarationSection.prototype._handleMouseDown):
(WI.SpreadsheetCSSStyleDeclarationSection.prototype._handleWindowMouseUp):
(WI.SpreadsheetCSSStyleDeclarationSection.prototype._handleClick):
* UserInterface/Views/SpreadsheetStyleProperty.js:
(WI.SpreadsheetStyleProperty):
Implement copying the same way it's done for DataGrid: by adding copyHandler property to the focused element.
Add `tabIndex=-1` so the property element can be focused.

(WI.SpreadsheetStyleProperty.prototype.get property):
(WI.SpreadsheetStyleProperty.prototype.get selected):
(WI.SpreadsheetStyleProperty.prototype.set selected):
(WI.SpreadsheetStyleProperty.prototype.remove):
(WI.SpreadsheetStyleProperty.prototype.updateStatus):
(WI.SpreadsheetStyleProperty.prototype.handleCopyEvent):
(WI.SpreadsheetStyleProperty.prototype.spreadsheetTextFieldDidCommit):
(WI.SpreadsheetStyleProperty.prototype.spreadsheetTextFieldDidBlur):
(WI.SpreadsheetStyleProperty.prototype._handleNamePaste):

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@237659 268f45cc-cd09-0410-ab3c-d52691b4dbfc
Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Models/CSSProperty.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/SpreadsheetStyleProperty.js