Web Inspector: delete key should work on multi-values visual sidebar grid sections
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / VisualStyleCommaSeparatedKeywordEditor.js
1 /*
2  * Copyright (C) 2015 Apple Inc. All rights reserved.
3  *
4  * Redistribution and use in source and binary forms, with or without
5  * modification, are permitted provided that the following conditions
6  * are met:
7  * 1. Redistributions of source code must retain the above copyright
8  *    notice, this list of conditions and the following disclaimer.
9  * 2. Redistributions in binary form must reproduce the above copyright
10  *    notice, this list of conditions and the following disclaimer in the
11  *    documentation and/or other materials provided with the distribution.
12  *
13  * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
14  * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
15  * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
16  * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
17  * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
18  * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
19  * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
20  * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
21  * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
22  * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
23  * THE POSSIBILITY OF SUCH DAMAGE.
24  */
25
26 WebInspector.VisualStyleCommaSeparatedKeywordEditor = class VisualStyleCommaSeparatedKeywordEditor extends WebInspector.VisualStylePropertyEditor
27 {
28     constructor(propertyNames, text, insertNewItemsBeforeSelected, layoutReversed)
29     {
30         super(propertyNames, text, null, null, "comma-separated-keyword-editor", layoutReversed);
31
32         this._insertNewItemsBeforeSelected = insertNewItemsBeforeSelected || false;
33
34         let listElement = document.createElement("ol");
35         listElement.classList.add("visual-style-comma-separated-keyword-list");
36         listElement.addEventListener("keydown", this._listElementKeyDown.bind(this));
37         this.contentElement.appendChild(listElement);
38
39         this._commaSeparatedKeywords = new WebInspector.TreeOutline(listElement);
40         this._commaSeparatedKeywords.onselect = this._treeElementSelected.bind(this);
41
42         let controlContainer = document.createElement("div");
43         controlContainer.classList.add("visual-style-comma-separated-keyword-controls");
44         this.contentElement.appendChild(controlContainer);
45
46         wrappedSVGDocument("Images/Plus.svg", "visual-style-add-comma-separated-keyword", WebInspector.UIString("Click to add a new item."), function(wrapper) {
47             wrapper.addEventListener("click", this._addEmptyCommaSeparatedKeyword.bind(this));
48             controlContainer.appendChild(wrapper);
49         }.bind(this));
50
51         wrappedSVGDocument("Images/Minus.svg", "visual-style-remove-comma-separated-keyword", WebInspector.UIString("Click to remove the selected item."), function(wrapper) {
52             wrapper.addEventListener("click", this._removeSelectedCommaSeparatedKeyword.bind(this));
53             controlContainer.appendChild(wrapper);
54         }.bind(this));
55     }
56
57     // Public
58
59     set selectedTreeElementValue(text)
60     {
61         let selectedTreeElement = this._commaSeparatedKeywords.selectedTreeElement;
62         if (!selectedTreeElement)
63             return;
64
65         selectedTreeElement.element.classList.toggle("no-value", !text || !text.length);
66         selectedTreeElement.mainTitle = text;
67         this._valueDidChange();
68     }
69
70     get value()
71     {
72         if (!this._commaSeparatedKeywords.hasChildren)
73             return;
74
75         let value = "";
76         for (let treeItem of this._commaSeparatedKeywords.children) {
77             if (this._treeElementIsEmpty(treeItem))
78                 continue;
79
80             if (value.length)
81                 value += ", ";
82
83             let text = treeItem.mainTitle;
84             if (typeof this._modifyCommaSeparatedKeyword === "function")
85                 text = this._modifyCommaSeparatedKeyword(text);
86
87             value += text;
88         }
89
90         return value;
91     }
92
93     set value(commaSeparatedValue)
94     {
95         if (commaSeparatedValue && commaSeparatedValue === this.value)
96             return;
97
98         this._commaSeparatedKeywords.removeChildren();
99         if (!commaSeparatedValue || !commaSeparatedValue.length) {
100             this.dispatchEventToListeners(WebInspector.VisualStyleCommaSeparatedKeywordEditor.Event.NoRemainingTreeItems);
101             return;
102         }
103
104         let values = commaSeparatedValue.split(/\s*,\s*(?![^\(]*\))/);
105         for (let value of values)
106             this._addCommaSeparatedKeyword(value);
107
108         this._commaSeparatedKeywords.children[0].select(true);
109     }
110
111     get synthesizedValue()
112     {
113         return this.value || null;
114     }
115
116     // Private
117
118     _listElementKeyDown(event)
119     {
120         let selectedTreeElement = this._commaSeparatedKeywords.selectedTreeElement;
121         if (!selectedTreeElement)
122             return;
123
124         if (selectedTreeElement.currentlyEditing)
125             return;
126
127         let keyCode = event.keyCode;
128         let backspaceKeyCode = WebInspector.KeyboardShortcut.Key.Backspace.keyCode;
129         let deleteKeyCode = WebInspector.KeyboardShortcut.Key.Delete.keyCode;
130         if (keyCode === backspaceKeyCode || keyCode === deleteKeyCode)
131             this._removeSelectedCommaSeparatedKeyword();
132     }
133
134     _treeElementSelected(item, selectedByUser)
135     {
136         this._removeEmptyCommaSeparatedKeywords();
137         this.dispatchEventToListeners(WebInspector.VisualStyleCommaSeparatedKeywordEditor.Event.TreeItemSelected, {text: item.mainTitle});
138     }
139
140     _treeElementIsEmpty(item)
141     {
142         return !item._mainTitle || !item._mainTitle.length;
143     }
144
145     _addEmptyCommaSeparatedKeyword()
146     {
147         let newTreeElement = this._addCommaSeparatedKeyword(null, this._commaSeparatedKeywords.selectedTreeElementIndex);
148         newTreeElement.subtitle = WebInspector.UIString("(modify the boxes below to add a value)");
149         newTreeElement.element.classList.add("no-value");
150         newTreeElement.select(true, true);
151         return newTreeElement;
152     }
153
154     _removeSelectedCommaSeparatedKeyword()
155     {
156         let selectedTreeElement = this._commaSeparatedKeywords.selectedTreeElement;
157         this._removeCommaSeparatedKeyword(selectedTreeElement);
158     }
159
160     _removeEmptyCommaSeparatedKeywords()
161     {
162         for (let treeElement of this._commaSeparatedKeywords.children) {
163             if (!this._treeElementIsEmpty(treeElement) || treeElement.selected)
164                 continue;
165
166             treeElement.deselect();
167             this._removeCommaSeparatedKeyword(treeElement);
168         }
169     }
170
171     _addCommaSeparatedKeyword(value, index)
172     {
173         let valueElement = this._createNewTreeElement(value);
174         let indexIsSet = !isNaN(index);
175         this._commaSeparatedKeywords.insertChild(valueElement, indexIsSet ? index + !this._insertNewItemsBeforeSelected : 0);
176         return valueElement;
177     }
178
179     _removeCommaSeparatedKeyword(treeElement)
180     {
181         if (!treeElement)
182             return;
183
184         this._commaSeparatedKeywords.removeChild(treeElement);
185         if (!this._commaSeparatedKeywords.children.length)
186             this.dispatchEventToListeners(WebInspector.VisualStyleCommaSeparatedKeywordEditor.Event.NoRemainingTreeItems);
187
188         this._valueDidChange();
189     }
190
191     _createNewTreeElement(value)
192     {
193         return new WebInspector.GeneralTreeElement(WebInspector.VisualStyleCommaSeparatedKeywordEditor.ListItemClassName, value);
194     }
195 };
196
197 WebInspector.VisualStyleCommaSeparatedKeywordEditor.ListItemClassName = "visual-style-comma-separated-keyword-item";
198
199 WebInspector.VisualStyleCommaSeparatedKeywordEditor.Event = {
200     TreeItemSelected: "visual-style-comma-separated-keyword-editor-tree-item-selected",
201     NoRemainingTreeItems: "visual-style-comma-separated-keyword-editor-no-remaining-tree-items"
202 }