Adds a debugger toggle button to the scripts status bar that will start
[WebKit-https.git] / WebCore / page / inspector / ScriptsPanel.js
1 /*
2  * Copyright (C) 2008 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. ``AS IS'' AND ANY
14  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
15  * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
16  * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
17  * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
18  * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
19  * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
20  * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
21  * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
22  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
23  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
24  */
25
26 WebInspector.ScriptsPanel = function()
27 {
28     WebInspector.Panel.call(this);
29
30     this.element.addStyleClass("scripts");
31
32     this.topStatusBar = document.createElement("div");
33     this.topStatusBar.className = "status-bar";
34     this.topStatusBar.id = "scripts-status-bar";
35     this.element.appendChild(this.topStatusBar);
36
37     this.backButton = document.createElement("button");
38     this.backButton.className = "status-bar-item";
39     this.backButton.id = "scripts-back";
40     this.backButton.title = WebInspector.UIString("Show the previous script resource.");
41     this.backButton.disabled = true;
42     this.backButton.appendChild(document.createElement("img"));
43     this.topStatusBar.appendChild(this.backButton);
44
45     this.forwardButton = document.createElement("button");
46     this.forwardButton.className = "status-bar-item";
47     this.forwardButton.id = "scripts-forward";
48     this.forwardButton.title = WebInspector.UIString("Show the next script resource.");
49     this.forwardButton.disabled = true;
50     this.forwardButton.appendChild(document.createElement("img"));
51     this.topStatusBar.appendChild(this.forwardButton);
52
53     this.filesSelectElement = document.createElement("select");
54     this.filesSelectElement.className = "status-bar-item";
55     this.filesSelectElement.id = "scripts-files";
56     this.topStatusBar.appendChild(this.filesSelectElement);
57
58     this.functionsSelectElement = document.createElement("select");
59     this.functionsSelectElement.className = "status-bar-item";
60     this.functionsSelectElement.id = "scripts-functions";
61     this.topStatusBar.appendChild(this.functionsSelectElement);
62
63     this.sidebarButtonsElement = document.createElement("div");
64     this.sidebarButtonsElement.id = "scripts-sidebar-buttons";
65     this.topStatusBar.appendChild(this.sidebarButtonsElement);
66
67     this.pauseButton = document.createElement("button");
68     this.pauseButton.className = "status-bar-item";
69     this.pauseButton.id = "scripts-pause";
70     this.pauseButton.title = WebInspector.UIString("Pause script execution.");
71     this.pauseButton.disabled = true;
72     this.pauseButton.appendChild(document.createElement("img"));
73     this.sidebarButtonsElement.appendChild(this.pauseButton);
74
75     this.stepOverButton = document.createElement("button");
76     this.stepOverButton.className = "status-bar-item";
77     this.stepOverButton.id = "scripts-step-over";
78     this.stepOverButton.title = WebInspector.UIString("Step over next function call.");
79     this.stepOverButton.disabled = true;
80     this.stepOverButton.appendChild(document.createElement("img"));
81     this.sidebarButtonsElement.appendChild(this.stepOverButton);
82
83     this.stepIntoButton = document.createElement("button");
84     this.stepIntoButton.className = "status-bar-item";
85     this.stepIntoButton.id = "scripts-step-into";
86     this.stepIntoButton.title = WebInspector.UIString("Step into next function call.");
87     this.stepIntoButton.disabled = true;
88     this.stepIntoButton.appendChild(document.createElement("img"));
89     this.sidebarButtonsElement.appendChild(this.stepIntoButton);
90
91     this.stepOutButton = document.createElement("button");
92     this.stepOutButton.className = "status-bar-item";
93     this.stepOutButton.id = "scripts-step-out";
94     this.stepOutButton.title = WebInspector.UIString("Step out of current function.");
95     this.stepOutButton.disabled = true;
96     this.stepOutButton.appendChild(document.createElement("img"));
97     this.sidebarButtonsElement.appendChild(this.stepOutButton);
98
99     this.debuggerStatusElement = document.createElement("div");
100     this.debuggerStatusElement.id = "scripts-debugger-status";
101     this.sidebarButtonsElement.appendChild(this.debuggerStatusElement);
102
103     this.scriptResourceViews = document.createElement("div");
104     this.scriptResourceViews.id = "script-resource-views";
105
106     this.sidebarElement = document.createElement("div");
107     this.sidebarElement.id = "scripts-sidebar";
108
109     this.sidebarResizeElement = document.createElement("div");
110     this.sidebarResizeElement.className = "sidebar-resizer-vertical";
111     this.sidebarResizeElement.addEventListener("mousedown", this._startSidebarResizeDrag.bind(this), false);
112
113     this.sidebarResizeWidgetElement = document.createElement("div");
114     this.sidebarResizeWidgetElement.id = "scripts-sidebar-resizer-widget";
115     this.sidebarResizeWidgetElement.addEventListener("mousedown", this._startSidebarResizeDrag.bind(this), false);
116     this.topStatusBar.appendChild(this.sidebarResizeWidgetElement);
117
118     this.sidebarPanes = {};
119     this.sidebarPanes.callstack = new WebInspector.CallStackSidebarPane();
120     this.sidebarPanes.breakpoints = new WebInspector.BreakpointsSidebarPane();
121
122     for (var pane in this.sidebarPanes)
123         this.sidebarElement.appendChild(this.sidebarPanes[pane].element);
124
125     this.element.appendChild(this.scriptResourceViews);
126     this.element.appendChild(this.sidebarElement);
127     this.element.appendChild(this.sidebarResizeElement);
128
129     this.debuggingButton = document.createElement("button");
130     this.debuggingButton.id = "scripts-debugging-status-bar-item";
131     this.debuggingButton.className = "status-bar-item";
132     this.debuggingButton.addEventListener("click", this._toggleDebugging.bind(this), false);
133
134     this.reset();
135 }
136
137 WebInspector.ScriptsPanel.prototype = {
138     toolbarItemClass: "scripts",
139
140     get toolbarItemLabel()
141     {
142         return WebInspector.UIString("Scripts");
143     },
144
145     get statusBarItems()
146     {
147         return [this.debuggingButton];
148     },
149
150     show: function()
151     {
152         WebInspector.Panel.prototype.show.call(this);
153         this.sidebarResizeElement.style.right = (this.sidebarElement.offsetWidth - 3) + "px";
154     },
155
156     reset: function()
157     {
158         this._updateDebuggerButtons();
159     },
160
161     _startSidebarResizeDrag: function(event)
162     {
163         WebInspector.elementDragStart(this.sidebarElement, this._sidebarResizeDrag.bind(this), this._endSidebarResizeDrag.bind(this), event, "col-resize");
164
165         if (event.target === this.sidebarResizeWidgetElement)
166             this._dragOffset = (event.target.offsetWidth - (event.pageX - event.target.totalOffsetLeft));
167         else
168             this._dragOffset = 0;
169     },
170
171     _endSidebarResizeDrag: function(event)
172     {
173         WebInspector.elementDragEnd(event);
174
175         delete this._dragOffset;
176     },
177
178     _sidebarResizeDrag: function(event)
179     {
180         var x = event.pageX + this._dragOffset;
181         var newWidth = Number.constrain(window.innerWidth - x, Preferences.minScriptsSidebarWidth, window.innerWidth * 0.66);
182
183         this.sidebarElement.style.width = newWidth + "px";
184         this.sidebarButtonsElement.style.width = newWidth + "px";
185         this.scriptResourceViews.style.right = newWidth + "px";
186         this.sidebarResizeWidgetElement.style.right = newWidth + "px";
187         this.sidebarResizeElement.style.right = (newWidth - 3) + "px";
188
189         event.preventDefault();
190     },
191
192     _updateDebuggerButtons: function()
193     {
194         if (InspectorController.debuggerAttached()) {
195             this.debuggingButton.title = WebInspector.UIString("Stop debugging.");
196             this.debuggingButton.addStyleClass("toggled-on");
197             this.pauseButton.disabled = false;
198         } else {
199             this.debuggingButton.title = WebInspector.UIString("Start debugging and reload inspected page.");
200             this.debuggingButton.removeStyleClass("toggled-on");
201             this.pauseButton.disabled = true;
202         }
203     },
204
205     _toggleDebugging: function()
206     {
207         if (InspectorController.debuggerAttached())
208             InspectorController.stopDebugging();
209         else
210             InspectorController.startDebuggingAndReloadInspectedPage();
211         this._updateDebuggerButtons();
212     },
213 }
214
215 WebInspector.ScriptsPanel.prototype.__proto__ = WebInspector.Panel.prototype;