Web Inspector: Embeddable Web Inspector
[WebKit-https.git] / Source / WebCore / inspector / front-end / InspectorView.js
1 /*
2  * Copyright (C) 2011 Google 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 are
6  * met:
7  *
8  *     * Redistributions of source code must retain the above copyright
9  * notice, this list of conditions and the following disclaimer.
10  *     * Redistributions in binary form must reproduce the above
11  * copyright notice, this list of conditions and the following disclaimer
12  * in the documentation and/or other materials provided with the
13  * distribution.
14  *     * Neither the name of Google Inc. nor the names of its
15  * contributors may be used to endorse or promote products derived from
16  * this software without specific prior written permission.
17  *
18  * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
19  * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
20  * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
21  * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
22  * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
23  * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
24  * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
25  * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
26  * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
27  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
28  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
29  */
30
31 /**
32  * @constructor
33  * @extends {WebInspector.View}
34  */
35 WebInspector.InspectorView = function()
36 {
37     WebInspector.View.call(this);
38     this.markAsRoot();
39     this.element.id = "main-panels";
40     this.element.setAttribute("spellcheck", false);
41     this._history = [];
42     this._historyIterator = -1;
43     document.addEventListener("keydown", this._keyDown.bind(this), false);
44     document.addEventListener("keypress", this._keyPress.bind(this), false);
45     this._panelOrder = [];
46     this._panelDescriptors = {};
47
48     // Windows and Mac have two different definitions of '[' and ']', so accept both of each.
49     this._openBracketIdentifiers = ["U+005B", "U+00DB"].keySet();
50     this._closeBracketIdentifiers = ["U+005D", "U+00DD"].keySet();
51     this._footerElementContainer = this.element.createChild("div", "inspector-footer status-bar hidden");
52     this._panelsElement = this.element.createChild("div", "fill");
53 }
54
55 WebInspector.InspectorView.Events = {
56     PanelSelected: "PanelSelected"
57 }
58
59 WebInspector.InspectorView.prototype = {
60     /**
61      * @param {WebInspector.PanelDescriptor} panelDescriptor
62      */
63     addPanel: function(panelDescriptor)
64     {
65         this._panelOrder.push(panelDescriptor.name());
66         this._panelDescriptors[panelDescriptor.name()] = panelDescriptor;
67         WebInspector.toolbar.addPanel(panelDescriptor);
68     },
69
70     /**
71      * @param {string} panelName
72      * @return {?WebInspector.Panel}
73      */
74     panel: function(panelName)
75     {
76         var panelDescriptor = this._panelDescriptors[panelName];
77         if (!panelDescriptor && this._panelOrder.length)
78             panelDescriptor = this._panelDescriptors[this._panelOrder[0]];
79         return panelDescriptor ? panelDescriptor.panel() : null;
80     },
81
82     /**
83      * @param {string} panelName
84      * @return {?WebInspector.Panel}
85      */
86     showPanel: function(panelName)
87     {
88         var panel = this.panel(panelName);
89         if (panel)
90             this.setCurrentPanel(panel);
91         return panel;
92     },
93
94     currentPanel: function()
95     {
96         return this._currentPanel;
97     },
98     
99     /**
100      * @param {WebInspector.Panel} x
101      */
102     setCurrentPanel: function(x)
103     {
104         if (this._currentPanel === x)
105             return;
106
107         if (this._currentPanel)
108             this._currentPanel.detach();
109
110         this._currentPanel = x;
111
112         if (x) {
113             x.show();
114             this.dispatchEventToListeners(WebInspector.InspectorView.Events.PanelSelected);
115             // FIXME: remove search controller.
116             WebInspector.searchController.cancelSearch();
117         }
118         for (var panelName in WebInspector.panels) {
119             if (WebInspector.panels[panelName] === x) {
120                 WebInspector.settings.lastActivePanel.set(panelName);
121                 this._pushToHistory(panelName);
122                 WebInspector.userMetrics.panelShown(panelName);
123             }
124         }
125     },
126
127     _keyPress: function(event)
128     {
129         clearTimeout(this._keyDownTimer);
130         delete this._keyDownTimer;
131     },
132
133     _keyDown: function(event)
134     {
135         // BUG85312: On French AZERTY keyboards, AltGr-]/[ combinations (synonymous to Ctrl-Alt-]/[ on Windows) are used to enter ]/[,
136         // so for a ]/[-related keydown we delay the panel switch using a timer, to see if there is a keypress event following this one.
137         // If there is, we cancel the timer and do not consider this a panel switch.
138         if (!WebInspector.isWin() || (!this._openBracketIdentifiers.hasOwnProperty(event.keyIdentifier) && !this._closeBracketIdentifiers.hasOwnProperty(event.keyIdentifier))) {
139             this._keyDownInternal(event);
140             return;
141         }
142
143         this._keyDownTimer = setTimeout(this._keyDownInternal.bind(this, event), 0);
144     },
145
146     _keyDownInternal: function(event)
147     {
148         if (this._openBracketIdentifiers.hasOwnProperty(event.keyIdentifier)) {
149             var isRotateLeft = WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(event) && !event.shiftKey && !event.altKey;
150             if (isRotateLeft) {
151                 var index = this._panelOrder.indexOf(this.currentPanel().name);
152                 index = (index === 0) ? this._panelOrder.length - 1 : index - 1;
153                 this.showPanel(this._panelOrder[index]);
154                 event.consume(true);
155                 return;
156             }
157
158             var isGoBack = WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(event) && event.altKey;
159             if (isGoBack && this._canGoBackInHistory()) {
160                 this._goBackInHistory();
161                 event.consume(true);
162             }
163             return;
164         }
165
166         if (this._closeBracketIdentifiers.hasOwnProperty(event.keyIdentifier)) {
167             var isRotateRight = WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(event) && !event.shiftKey && !event.altKey;
168             if (isRotateRight) {
169                 var index = this._panelOrder.indexOf(this.currentPanel().name);
170                 index = (index + 1) % this._panelOrder.length;
171                 this.showPanel(this._panelOrder[index]);
172                 event.consume(true);
173                 return;
174             }
175
176             var isGoForward = WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(event) && event.altKey;
177             if (isGoForward && this._canGoForwardInHistory()) {
178                 this._goForwardInHistory();
179                 event.consume(true);
180             }
181             return;
182         }
183     },
184
185     _canGoBackInHistory: function()
186     {
187         return this._historyIterator > 0;
188     },
189
190     _goBackInHistory: function()
191     {
192         this._inHistory = true;
193         this.setCurrentPanel(WebInspector.panels[this._history[--this._historyIterator]]);
194         delete this._inHistory;
195     },
196
197     _canGoForwardInHistory: function()
198     {
199         return this._historyIterator < this._history.length - 1;
200     },
201
202     _goForwardInHistory: function()
203     {
204         this._inHistory = true;
205         this.setCurrentPanel(WebInspector.panels[this._history[++this._historyIterator]]);
206         delete this._inHistory;
207     },
208
209     _pushToHistory: function(panelName)
210     {
211         if (this._inHistory)
212             return;
213
214         this._history.splice(this._historyIterator + 1, this._history.length - this._historyIterator - 1);
215         if (!this._history.length || this._history[this._history.length - 1] !== panelName)
216             this._history.push(panelName);
217         this._historyIterator = this._history.length - 1;
218     },
219
220     panelsElement: function()
221     {
222         return this._panelsElement;
223     },
224
225     /**
226      * @param {Element?} element
227      */
228     setFooterElement: function(element)
229     {
230         if (element) {
231             this._footerElementContainer.removeStyleClass("hidden");
232             this._footerElementContainer.appendChild(element);
233             this._panelsElement.style.bottom = this._footerElementContainer.offsetHeight + "px";
234         } else {
235             this._footerElementContainer.addStyleClass("hidden");
236             this._footerElementContainer.removeChildren();
237             this._panelsElement.style.bottom = 0;
238         }
239         this.doResize();
240     }
241 }
242
243 WebInspector.InspectorView.prototype.__proto__ = WebInspector.View.prototype;
244
245 /**
246  * @type {WebInspector.InspectorView}
247  */
248 WebInspector.inspectorView = null;