Web Inspector: delete key should work on multi-values visual sidebar grid sections
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / VisualStyleFontFamilyTreeElement.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.VisualStyleFontFamilyTreeElement = class VisualStyleFontFamilyTreeElement extends WebInspector.GeneralTreeElement
27 {
28     constructor(text)
29     {
30         super([WebInspector.VisualStyleCommaSeparatedKeywordEditor.ListItemClassName, "visual-style-font-family-list-item"], text);
31
32         this._keywordEditor = document.createElement("input");
33         this._keywordEditor.classList.add("visual-style-comma-separated-keyword-item-editor");
34         this._keywordEditor.placeholder = WebInspector.UIString("(modify the boxes below to add a value)");
35         this._keywordEditor.spellcheck = false;
36         this._keywordEditor.addEventListener("keydown", this._keywordEditorKeyDown.bind(this));
37         this._keywordEditor.addEventListener("keyup", this._keywordEditorKeyUp.bind(this));
38         this._keywordEditor.addEventListener("blur", this._keywordEditorBlurred.bind(this));
39     }
40
41     // Public
42
43     editorBounds(padding)
44     {
45         if (this.keywordEditorHidden)
46             return;
47
48         let bounds = WebInspector.Rect.rectFromClientRect(this._keywordEditor.getBoundingClientRect());
49         return bounds.pad(padding || 0);
50     }
51
52     updateMainTitle(text)
53     {
54         this.mainTitle = this._keywordEditor.value = text;
55         this._listItemNode.style.fontFamily = text + ", " + WebInspector.VisualStyleFontFamilyTreeElement.FontFamilyFallback;
56
57         let hasText = text && text.length;
58         this._listItemNode.classList.toggle("no-value", !hasText);
59         if (!hasText)
60             this.subtitle = this._keywordEditor.placeholder;
61
62         this.dispatchEventToListeners(WebInspector.VisualStyleFontFamilyTreeElement.Event.KeywordChanged);
63     }
64
65     get currentlyEditing()
66     {
67         return !this.keywordEditorHidden;
68     }
69
70     showKeywordEditor()
71     {
72         if (!this.keywordEditorHidden)
73             return;
74
75         this.subtitle = "";
76         this._listItemNode.classList.remove("editor-hidden");
77         this._listItemNode.scrollIntoViewIfNeeded();
78
79         this._keywordEditor.value = this._mainTitle;
80         this._keywordEditor.select();
81     }
82
83     hideKeywordEditor()
84     {
85         if (this.keywordEditorHidden)
86             return;
87
88         this.updateMainTitle(this._keywordEditor.value);
89         this._listItemNode.classList.add("editor-hidden");
90     }
91
92     get keywordEditorHidden()
93     {
94         return this._listItemNode.classList.contains("editor-hidden");
95     }
96
97     // Protected
98
99     onattach()
100     {
101         super.onattach();
102
103         this._listItemNode.style.fontFamily = this._mainTitle;
104         this._listItemNode.classList.add("editor-hidden");
105         this._listItemNode.appendChild(this._keywordEditor);
106         this._listItemNode.addEventListener("click", this.showKeywordEditor.bind(this));
107     }
108
109     ondeselect()
110     {
111         this.hideKeywordEditor();
112     }
113
114     // Private
115
116     _keywordEditorKeyDown(event)
117     {
118         if (this.keywordEditorHidden)
119             return;
120
121         let keyCode = event.keyCode;
122         let enterKeyCode = WebInspector.KeyboardShortcut.Key.Enter.keyCode;
123         if (keyCode === enterKeyCode) {
124             this._listItemNode.classList.add("editor-hidden");
125             this.dispatchEventToListeners(WebInspector.VisualStyleFontFamilyTreeElement.Event.EditorKeyDown, {key: "Enter"});
126             return;
127         }
128
129         let escapeKeyCode = WebInspector.KeyboardShortcut.Key.Escape.keyCode;
130         if (keyCode === escapeKeyCode) {
131             this.dispatchEventToListeners(WebInspector.VisualStyleFontFamilyTreeElement.Event.EditorKeyDown, {key: "Escape"});
132             return;
133         }
134
135         let tabKeyCode = WebInspector.KeyboardShortcut.Key.Tab.keyCode;
136         if (keyCode === tabKeyCode) {
137             event.preventDefault();
138             this._dontFireKeyUp = true;
139             this.dispatchEventToListeners(WebInspector.VisualStyleFontFamilyTreeElement.Event.EditorKeyDown, {key: "Tab"});
140             return;
141         }
142
143         let key = event.keyIdentifier;
144         if (key === "Up" || key === "Down") {
145             event.preventDefault();
146             this._dontFireKeyUp = true;
147             this.dispatchEventToListeners(WebInspector.VisualStyleFontFamilyTreeElement.Event.EditorKeyDown, {key});
148             return;
149         }
150
151         this.dispatchEventToListeners(WebInspector.VisualStyleFontFamilyTreeElement.Event.EditorKeyDown);
152     }
153
154     _keywordEditorKeyUp()
155     {
156         if (this.keywordEditorHidden || this._dontFireKeyUp)
157             return;
158
159         this.updateMainTitle(this._keywordEditor.value);
160     }
161
162     _keywordEditorBlurred()
163     {
164         this.hideKeywordEditor();
165         this.dispatchEventToListeners(WebInspector.VisualStyleFontFamilyTreeElement.Event.EditorBlurred);
166     }
167 };
168
169 WebInspector.VisualStyleFontFamilyTreeElement.FontFamilyFallback = "-apple-system, sans-serif";
170
171 WebInspector.VisualStyleFontFamilyTreeElement.Event = {
172     KeywordChanged: "visual-style-font-family-tree-element-keyword-changed",
173     EditorKeyDown: "visual-style-font-family-tree-element-editor-key-down",
174     EditorBlurred: "visual-style-font-family-tree-element-editor-blurred"
175 };