OLD | NEW |
| (Empty) |
1 /* | |
2 * Copyright (C) 2007, 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 * | |
8 * 1. Redistributions of source code must retain the above copyright | |
9 * notice, this list of conditions and the following disclaimer. | |
10 * 2. Redistributions in binary form must reproduce the above copyright | |
11 * notice, this list of conditions and the following disclaimer in the | |
12 * documentation and/or other materials provided with the distribution. | |
13 * 3. Neither the name of Apple Computer, Inc. ("Apple") nor the names of | |
14 * its contributors may be used to endorse or promote products derived | |
15 * from this software without specific prior written permission. | |
16 * | |
17 * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY | |
18 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED | |
19 * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE | |
20 * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY | |
21 * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES | |
22 * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; | |
23 * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND | |
24 * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT | |
25 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF | |
26 * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. | |
27 */ | |
28 | |
29 WebInspector.DatabasesPanel = function(database) | |
30 { | |
31 WebInspector.Panel.call(this); | |
32 | |
33 this.sidebarElement = document.createElement("div"); | |
34 this.sidebarElement.id = "databases-sidebar"; | |
35 this.sidebarElement.className = "sidebar"; | |
36 this.element.appendChild(this.sidebarElement); | |
37 | |
38 this.sidebarResizeElement = document.createElement("div"); | |
39 this.sidebarResizeElement.className = "sidebar-resizer-vertical"; | |
40 this.sidebarResizeElement.addEventListener("mousedown", this._startSidebarDr
agging.bind(this), false); | |
41 this.element.appendChild(this.sidebarResizeElement); | |
42 | |
43 this.sidebarTreeElement = document.createElement("ol"); | |
44 this.sidebarTreeElement.className = "sidebar-tree"; | |
45 this.sidebarElement.appendChild(this.sidebarTreeElement); | |
46 | |
47 this.sidebarTree = new TreeOutline(this.sidebarTreeElement); | |
48 | |
49 this.databasesListTreeElement = new WebInspector.SidebarSectionTreeElement(W
ebInspector.UIString("DATABASES"), {}, true); | |
50 this.sidebarTree.appendChild(this.databasesListTreeElement); | |
51 this.databasesListTreeElement.expand(); | |
52 | |
53 this.localStorageListTreeElement = new WebInspector.SidebarSectionTreeElemen
t(WebInspector.UIString("LOCAL STORAGE"), {}, true); | |
54 this.sidebarTree.appendChild(this.localStorageListTreeElement); | |
55 this.localStorageListTreeElement.expand(); | |
56 | |
57 this.sessionStorageListTreeElement = new WebInspector.SidebarSectionTreeElem
ent(WebInspector.UIString("SESSION STORAGE"), {}, true); | |
58 this.sidebarTree.appendChild(this.sessionStorageListTreeElement); | |
59 this.sessionStorageListTreeElement.expand(); | |
60 | |
61 this.storageViews = document.createElement("div"); | |
62 this.storageViews.id = "storage-views"; | |
63 this.element.appendChild(this.storageViews); | |
64 | |
65 this.reset(); | |
66 } | |
67 | |
68 WebInspector.DatabasesPanel.prototype = { | |
69 toolbarItemClass: "databases", | |
70 | |
71 get toolbarItemLabel() | |
72 { | |
73 return WebInspector.UIString("Databases"); | |
74 }, | |
75 | |
76 show: function() | |
77 { | |
78 WebInspector.Panel.prototype.show.call(this); | |
79 this._updateSidebarWidth(); | |
80 }, | |
81 | |
82 reset: function() | |
83 { | |
84 if (this._databases) { | |
85 var databasesLength = this._databases.length; | |
86 for (var i = 0; i < databasesLength; ++i) { | |
87 var database = this._databases[i]; | |
88 | |
89 delete database._tableViews; | |
90 delete database._queryView; | |
91 } | |
92 } | |
93 | |
94 this._databases = []; | |
95 | |
96 if (this._domStorage) { | |
97 var domStorageLength = this._domStorage.length; | |
98 for (var i = 0; i < domStorageLength; ++i) { | |
99 var domStorage = this._domStorage[i]; | |
100 | |
101 delete domStorage._domStorageView; | |
102 } | |
103 } | |
104 | |
105 this._domStorage = []; | |
106 | |
107 this.databasesListTreeElement.removeChildren(); | |
108 this.localStorageListTreeElement.removeChildren(); | |
109 this.sessionStorageListTreeElement.removeChildren(); | |
110 this.storageViews.removeChildren(); | |
111 }, | |
112 | |
113 handleKeyEvent: function(event) | |
114 { | |
115 this.sidebarTree.handleKeyEvent(event); | |
116 }, | |
117 | |
118 addDatabase: function(database) | |
119 { | |
120 this._databases.push(database); | |
121 | |
122 var databaseTreeElement = new WebInspector.DatabaseSidebarTreeElement(da
tabase); | |
123 database._databasesTreeElement = databaseTreeElement; | |
124 this.databasesListTreeElement.appendChild(databaseTreeElement); | |
125 }, | |
126 | |
127 addDOMStorage: function(domStorage) | |
128 { | |
129 this._domStorage.push(domStorage); | |
130 var domStorageTreeElement = new WebInspector.DOMStorageSidebarTreeElemen
t(domStorage); | |
131 domStorage._domStorageTreeElement = domStorageTreeElement; | |
132 if (domStorage.isLocalStorage) | |
133 this.localStorageListTreeElement.appendChild(domStorageTreeElement); | |
134 else | |
135 this.sessionStorageListTreeElement.appendChild(domStorageTreeElement
); | |
136 }, | |
137 | |
138 showDatabase: function(database, tableName) | |
139 { | |
140 if (!database) | |
141 return; | |
142 | |
143 if (this.visibleView) | |
144 this.visibleView.hide(); | |
145 | |
146 var view; | |
147 if (tableName) { | |
148 if (!("_tableViews" in database)) | |
149 database._tableViews = {}; | |
150 view = database._tableViews[tableName]; | |
151 if (!view) { | |
152 view = new WebInspector.DatabaseTableView(database, tableName); | |
153 database._tableViews[tableName] = view; | |
154 } | |
155 } else { | |
156 view = database._queryView; | |
157 if (!view) { | |
158 view = new WebInspector.DatabaseQueryView(database); | |
159 database._queryView = view; | |
160 } | |
161 } | |
162 | |
163 view.show(this.storageViews); | |
164 | |
165 this.visibleView = view; | |
166 }, | |
167 | |
168 showDOMStorage: function(domStorage) | |
169 { | |
170 if (!domStorage) | |
171 return; | |
172 | |
173 if (this.visibleView) | |
174 this.visibleView.hide(); | |
175 | |
176 var view; | |
177 view = domStorage._domStorageView; | |
178 if (!view) { | |
179 view = new WebInspector.DOMStorageItemsView(domStorage); | |
180 domStorage._domStorageView = view; | |
181 } | |
182 | |
183 view.show(this.storageViews); | |
184 | |
185 this.visibleView = view; | |
186 }, | |
187 | |
188 closeVisibleView: function() | |
189 { | |
190 if (this.visibleView) | |
191 this.visibleView.hide(); | |
192 delete this.visibleView; | |
193 }, | |
194 | |
195 updateDatabaseTables: function(database) | |
196 { | |
197 if (!database || !database._databasesTreeElement) | |
198 return; | |
199 | |
200 database._databasesTreeElement.shouldRefreshChildren = true; | |
201 | |
202 if (!("_tableViews" in database)) | |
203 return; | |
204 | |
205 var tableNamesHash = {}; | |
206 var tableNames = database.tableNames; | |
207 var tableNamesLength = tableNames.length; | |
208 for (var i = 0; i < tableNamesLength; ++i) | |
209 tableNamesHash[tableNames[i]] = true; | |
210 | |
211 for (var tableName in database._tableViews) { | |
212 if (!(tableName in tableNamesHash)) { | |
213 if (this.visibleView === database._tableViews[tableName]) | |
214 this.closeVisibleView(); | |
215 delete database._tableViews[tableName]; | |
216 } | |
217 } | |
218 }, | |
219 | |
220 dataGridForResult: function(result) | |
221 { | |
222 if (!result.rows.length) | |
223 return null; | |
224 | |
225 var columns = {}; | |
226 | |
227 var rows = result.rows; | |
228 for (var columnIdentifier in rows.item(0)) { | |
229 var column = {}; | |
230 column.width = columnIdentifier.length; | |
231 column.title = columnIdentifier; | |
232 | |
233 columns[columnIdentifier] = column; | |
234 } | |
235 | |
236 var nodes = []; | |
237 var length = rows.length; | |
238 for (var i = 0; i < length; ++i) { | |
239 var data = {}; | |
240 | |
241 var row = rows.item(i); | |
242 for (var columnIdentifier in row) { | |
243 // FIXME: (Bug 19439) We should specially format SQL NULL here | |
244 // (which is represented by JavaScript null here, and turned | |
245 // into the string "null" by the String() function). | |
246 var text = String(row[columnIdentifier]); | |
247 data[columnIdentifier] = text; | |
248 if (text.length > columns[columnIdentifier].width) | |
249 columns[columnIdentifier].width = text.length; | |
250 } | |
251 | |
252 var node = new WebInspector.DataGridNode(data, false); | |
253 node.selectable = false; | |
254 nodes.push(node); | |
255 } | |
256 | |
257 var totalColumnWidths = 0; | |
258 for (var columnIdentifier in columns) | |
259 totalColumnWidths += columns[columnIdentifier].width; | |
260 | |
261 // Calculate the percentage width for the columns. | |
262 const minimumPrecent = 5; | |
263 var recoupPercent = 0; | |
264 for (var columnIdentifier in columns) { | |
265 var width = columns[columnIdentifier].width; | |
266 width = Math.round((width / totalColumnWidths) * 100); | |
267 if (width < minimumPrecent) { | |
268 recoupPercent += (minimumPrecent - width); | |
269 width = minimumPrecent; | |
270 } | |
271 | |
272 columns[columnIdentifier].width = width; | |
273 } | |
274 | |
275 // Enforce the minimum percentage width. | |
276 while (recoupPercent > 0) { | |
277 for (var columnIdentifier in columns) { | |
278 if (columns[columnIdentifier].width > minimumPrecent) { | |
279 --columns[columnIdentifier].width; | |
280 --recoupPercent; | |
281 if (!recoupPercent) | |
282 break; | |
283 } | |
284 } | |
285 } | |
286 | |
287 // Change the width property to a string suitable for a style width. | |
288 for (var columnIdentifier in columns) | |
289 columns[columnIdentifier].width += "%"; | |
290 | |
291 var dataGrid = new WebInspector.DataGrid(columns); | |
292 var length = nodes.length; | |
293 for (var i = 0; i < length; ++i) | |
294 dataGrid.appendChild(nodes[i]); | |
295 | |
296 return dataGrid; | |
297 }, | |
298 | |
299 dataGridForDOMStorage: function(domStorage) | |
300 { | |
301 if (!domStorage.length) | |
302 return null; | |
303 | |
304 var columns = {}; | |
305 columns[0] = {}; | |
306 columns[1] = {}; | |
307 columns[0].title = WebInspector.UIString("Key"); | |
308 columns[0].width = columns[0].title.length; | |
309 columns[1].title = WebInspector.UIString("Value"); | |
310 columns[1].width = columns[0].title.length; | |
311 | |
312 var nodes = []; | |
313 | |
314 var length = domStorage.length; | |
315 for (index = 0; index < domStorage.length; index++) { | |
316 var data = {}; | |
317 | |
318 var key = String(domStorage.key(index)); | |
319 data[0] = key; | |
320 if (key.length > columns[0].width) | |
321 columns[0].width = key.length; | |
322 | |
323 var value = String(domStorage.getItem(key)); | |
324 data[1] = value; | |
325 if (value.length > columns[1].width) | |
326 columns[1].width = value.length; | |
327 var node = new WebInspector.DataGridNode(data, false); | |
328 node.selectable = false; | |
329 nodes.push(node); | |
330 } | |
331 | |
332 var totalColumnWidths = columns[0].width + columns[1].width; | |
333 width = Math.round((columns[0].width * 100) / totalColumnWidths); | |
334 const minimumPrecent = 10; | |
335 if (width < minimumPrecent) | |
336 width = minimumPrecent; | |
337 if (width > 100 - minimumPrecent) | |
338 width = 100 - minimumPrecent; | |
339 columns[0].width = width; | |
340 columns[1].width = 100 - width; | |
341 columns[0].width += "%"; | |
342 columns[1].width += "%"; | |
343 | |
344 var dataGrid = new WebInspector.DataGrid(columns); | |
345 var length = nodes.length; | |
346 for (var i = 0; i < length; ++i) | |
347 dataGrid.appendChild(nodes[i]); | |
348 | |
349 return dataGrid; | |
350 }, | |
351 | |
352 _startSidebarDragging: function(event) | |
353 { | |
354 WebInspector.elementDragStart(this.sidebarResizeElement, this._sidebarDr
agging.bind(this), this._endSidebarDragging.bind(this), event, "col-resize"); | |
355 }, | |
356 | |
357 _sidebarDragging: function(event) | |
358 { | |
359 this._updateSidebarWidth(event.pageX); | |
360 | |
361 event.preventDefault(); | |
362 }, | |
363 | |
364 _endSidebarDragging: function(event) | |
365 { | |
366 WebInspector.elementDragEnd(event); | |
367 }, | |
368 | |
369 _updateSidebarWidth: function(width) | |
370 { | |
371 if (this.sidebarElement.offsetWidth <= 0) { | |
372 // The stylesheet hasn't loaded yet or the window is closed, | |
373 // so we can't calculate what is need. Return early. | |
374 return; | |
375 } | |
376 | |
377 if (!("_currentSidebarWidth" in this)) | |
378 this._currentSidebarWidth = this.sidebarElement.offsetWidth; | |
379 | |
380 if (typeof width === "undefined") | |
381 width = this._currentSidebarWidth; | |
382 | |
383 width = Number.constrain(width, Preferences.minSidebarWidth, window.inne
rWidth / 2); | |
384 | |
385 this._currentSidebarWidth = width; | |
386 | |
387 this.sidebarElement.style.width = width + "px"; | |
388 this.storageViews.style.left = width + "px"; | |
389 this.sidebarResizeElement.style.left = (width - 3) + "px"; | |
390 } | |
391 } | |
392 | |
393 WebInspector.DatabasesPanel.prototype.__proto__ = WebInspector.Panel.prototype; | |
394 | |
395 WebInspector.DatabaseSidebarTreeElement = function(database) | |
396 { | |
397 this.database = database; | |
398 | |
399 WebInspector.SidebarTreeElement.call(this, "database-sidebar-tree-item", "",
"", database, true); | |
400 | |
401 this.refreshTitles(); | |
402 } | |
403 | |
404 WebInspector.DatabaseSidebarTreeElement.prototype = { | |
405 onselect: function() | |
406 { | |
407 WebInspector.panels.databases.showDatabase(this.database); | |
408 }, | |
409 | |
410 oncollapse: function() | |
411 { | |
412 // Request a refresh after every collapse so the next | |
413 // expand will have an updated table list. | |
414 this.shouldRefreshChildren = true; | |
415 }, | |
416 | |
417 onpopulate: function() | |
418 { | |
419 this.removeChildren(); | |
420 | |
421 var tableNames = this.database.tableNames; | |
422 var tableNamesLength = tableNames.length; | |
423 for (var i = 0; i < tableNamesLength; ++i) | |
424 this.appendChild(new WebInspector.SidebarDatabaseTableTreeElement(th
is.database, tableNames[i])); | |
425 }, | |
426 | |
427 get mainTitle() | |
428 { | |
429 return this.database.name; | |
430 }, | |
431 | |
432 set mainTitle(x) | |
433 { | |
434 // Do nothing. | |
435 }, | |
436 | |
437 get subtitle() | |
438 { | |
439 return this.database.displayDomain; | |
440 }, | |
441 | |
442 set subtitle(x) | |
443 { | |
444 // Do nothing. | |
445 } | |
446 } | |
447 | |
448 WebInspector.DatabaseSidebarTreeElement.prototype.__proto__ = WebInspector.Sideb
arTreeElement.prototype; | |
449 | |
450 WebInspector.SidebarDatabaseTableTreeElement = function(database, tableName) | |
451 { | |
452 this.database = database; | |
453 this.tableName = tableName; | |
454 | |
455 WebInspector.SidebarTreeElement.call(this, "database-table-sidebar-tree-item
small", tableName, "", null, false); | |
456 } | |
457 | |
458 WebInspector.SidebarDatabaseTableTreeElement.prototype = { | |
459 onselect: function() | |
460 { | |
461 WebInspector.panels.databases.showDatabase(this.database, this.tableName
); | |
462 } | |
463 } | |
464 | |
465 WebInspector.SidebarDatabaseTableTreeElement.prototype.__proto__ = WebInspector.
SidebarTreeElement.prototype; | |
466 | |
467 WebInspector.DOMStorageSidebarTreeElement = function(domStorage) | |
468 { | |
469 | |
470 this.domStorage = domStorage; | |
471 | |
472 WebInspector.SidebarTreeElement.call(this, "domstorage-sidebar-tree-item", d
omStorage, "", null, false); | |
473 | |
474 this.refreshTitles(); | |
475 } | |
476 | |
477 WebInspector.DOMStorageSidebarTreeElement.prototype = { | |
478 onselect: function() | |
479 { | |
480 WebInspector.panels.databases.showDOMStorage(this.domStorage); | |
481 }, | |
482 | |
483 get mainTitle() | |
484 { | |
485 return this.domStorage.domain; | |
486 }, | |
487 | |
488 set mainTitle(x) | |
489 { | |
490 // Do nothing. | |
491 }, | |
492 | |
493 get subtitle() | |
494 { | |
495 return ""; //this.database.displayDomain; | |
496 }, | |
497 | |
498 set subtitle(x) | |
499 { | |
500 // Do nothing. | |
501 } | |
502 } | |
503 | |
504 WebInspector.DOMStorageSidebarTreeElement.prototype.__proto__ = WebInspector.Sid
ebarTreeElement.prototype; | |
OLD | NEW |