Web Inspector: Styles Redesign: Add support for keyboard navigation (Tab, Shift-Tab...
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / SpreadsheetStyleProperty.js
1 /*
2  * Copyright (C) 2017 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 WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object
27 {
28     constructor(delegate, property, index, newlyAdded)
29     {
30         super();
31
32         this._delegate = delegate || null;
33         this._property = property;
34         this._newlyAdded = newlyAdded || false;
35         this._element = document.createElement("div");
36
37         this._nameElement = null;
38         this._valueElement = null;
39
40         this._nameTextField = null;
41         this._valueTextField = null;
42
43         this._update();
44         property.addEventListener(WI.CSSProperty.Event.OverriddenStatusChanged, this._update, this);
45     }
46
47     // Public
48
49     get element() { return this._element; }
50     get nameTextField() { return this._nameTextField; }
51     get valueTextField() { return this._valueTextField; }
52
53     // Private
54
55     _remove()
56     {
57         this.element.remove();
58         this._property.remove();
59
60         if (this._delegate && typeof this._delegate.spreadsheetStylePropertyRemoved === "function")
61             this._delegate.spreadsheetStylePropertyRemoved(this);
62     }
63
64     _update()
65     {
66         this.element.removeChildren();
67         this.element.className = "";
68
69         let duplicatePropertyExistsBelow = (cssProperty) => {
70             let propertyFound = false;
71
72             for (let property of this._property.ownerStyle.properties) {
73                 if (property === cssProperty)
74                     propertyFound = true;
75                 else if (property.name === cssProperty.name && propertyFound)
76                     return true;
77             }
78
79             return false;
80         };
81
82         let classNames = ["property"];
83
84         if (this._property.overridden)
85             classNames.push("overridden");
86
87         if (this._property.implicit)
88             classNames.push("implicit");
89
90         if (this._property.ownerStyle.inherited && !this._property.inherited)
91             classNames.push("not-inherited");
92
93         if (!this._property.valid && this._property.hasOtherVendorNameOrKeyword())
94             classNames.push("other-vendor");
95         else if (!this._property.valid) {
96             let propertyNameIsValid = false;
97             if (WI.CSSCompletions.cssNameCompletions)
98                 propertyNameIsValid = WI.CSSCompletions.cssNameCompletions.isValidPropertyName(this._property.name);
99
100             if (!propertyNameIsValid || duplicatePropertyExistsBelow(this._property))
101                 classNames.push("invalid");
102         }
103
104         if (!this._property.enabled)
105             classNames.push("disabled");
106
107         this._element.classList.add(...classNames);
108
109         if (this._property.editable) {
110             this._checkboxElement = this.element.appendChild(document.createElement("input"));
111             this._checkboxElement.classList.add("property-toggle");
112             this._checkboxElement.type = "checkbox";
113             this._checkboxElement.checked = this._property.enabled;
114             this._checkboxElement.tabIndex = -1;
115             this._checkboxElement.addEventListener("change", () => {
116                 let disabled = !this._checkboxElement.checked;
117                 this._property.commentOut(disabled);
118                 this._update();
119             });
120         }
121
122         if (!this._property.enabled)
123             this.element.append("/* ");
124
125         this._nameElement = this.element.appendChild(document.createElement("span"));
126         this._nameElement.classList.add("name");
127         this._nameElement.textContent = this._property.name;
128
129         this.element.append(": ");
130
131         this._valueElement = this.element.appendChild(document.createElement("span"));
132         this._valueElement.classList.add("value");
133         this._valueElement.textContent = this._property.rawValue;
134
135         if (this._property.editable && this._property.enabled) {
136             this._nameElement.tabIndex = 0;
137             this._nameTextField = new WI.SpreadsheetTextField(this, this._nameElement);
138
139             this._valueElement.tabIndex = 0;
140             this._valueTextField = new WI.SpreadsheetTextField(this, this._valueElement);
141         }
142
143         this.element.append(";");
144
145         if (!this._property.enabled)
146             this.element.append(" */");
147     }
148
149     spreadsheetTextFieldDidChange(textField)
150     {
151         if (textField === this._valueTextField)
152             this.debounce(WI.SpreadsheetStyleProperty.CommitCoalesceDelay)._handleValueChange();
153         else if (textField === this._nameTextField)
154             this.debounce(WI.SpreadsheetStyleProperty.CommitCoalesceDelay)._handleNameChange();
155     }
156
157     spreadsheetTextFieldDidCommit(textField, {direction})
158     {
159         let propertyName = this._nameTextField.value.trim();
160         let propertyValue = this._valueTextField.value.trim();
161         let willRemoveProperty = false;
162
163         // Remove a property with an empty name or value. However, a newly added property
164         // has an empty name and value at first. Don't remove it when moving focus from
165         // the name to the value for the first time.
166         if (!propertyName || (!this._newlyAdded && !propertyValue))
167             willRemoveProperty = true;
168
169         let isEditingName = textField === this._nameTextField;
170
171         if (propertyName && isEditingName)
172             this._newlyAdded = false;
173
174         if (direction === "forward") {
175             if (isEditingName && !willRemoveProperty) {
176                 // Move focus from the name to the value.
177                 this._valueTextField.startEditing();
178                 return;
179             }
180         } else {
181             if (!isEditingName) {
182                 // Move focus from the value to the name.
183                 this._nameTextField.startEditing();
184                 return;
185             }
186         }
187
188         if (typeof this._delegate.spreadsheetCSSStyleDeclarationEditorFocusMoved === "function") {
189             // Move focus away from the current property, to the next or previous one, if exists, or to the next or previous rule, if exists.
190             this._delegate.spreadsheetCSSStyleDeclarationEditorFocusMoved({direction, willRemoveProperty, movedFromProperty: this});
191         }
192
193         if (willRemoveProperty)
194             this._remove();
195     }
196
197     spreadsheetTextFieldDidBlur(textField)
198     {
199         if (textField.value.trim() === "")
200             this._remove();
201     }
202
203     _handleNameChange()
204     {
205         this._property.name = this._nameElement.textContent.trim();
206     }
207
208     _handleValueChange()
209     {
210         this._property.rawValue = this._valueElement.textContent.trim();
211     }
212 };
213
214 WI.SpreadsheetStyleProperty.CommitCoalesceDelay = 250;