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.storageViewStatusBarItemsContainer = document.createElement("div"); | |
66 this.storageViewStatusBarItemsContainer.id = "storage-view-status-bar-items"
; | |
67 | |
68 this.reset(); | |
69 } | |
70 | |
71 WebInspector.DatabasesPanel.prototype = { | |
72 toolbarItemClass: "databases", | |
73 | |
74 get toolbarItemLabel() | |
75 { | |
76 return WebInspector.UIString("Databases"); | |
77 }, | |
78 | |
79 get statusBarItems() | |
80 { | |
81 return [this.storageViewStatusBarItemsContainer]; | |
82 }, | |
83 | |
84 show: function() | |
85 { | |
86 WebInspector.Panel.prototype.show.call(this); | |
87 this._updateSidebarWidth(); | |
88 }, | |
89 | |
90 reset: function() | |
91 { | |
92 if (this._databases) { | |
93 var databasesLength = this._databases.length; | |
94 for (var i = 0; i < databasesLength; ++i) { | |
95 var database = this._databases[i]; | |
96 | |
97 delete database._tableViews; | |
98 delete database._queryView; | |
99 } | |
100 } | |
101 | |
102 this._databases = []; | |
103 | |
104 if (this._domStorage) { | |
105 var domStorageLength = this._domStorage.length; | |
106 for (var i = 0; i < domStorageLength; ++i) { | |
107 var domStorage = this._domStorage[i]; | |
108 | |
109 delete domStorage._domStorageView; | |
110 } | |
111 } | |
112 | |
113 this._domStorage = []; | |
114 | |
115 this.databasesListTreeElement.removeChildren(); | |
116 this.localStorageListTreeElement.removeChildren(); | |
117 this.sessionStorageListTreeElement.removeChildren(); | |
118 this.storageViews.removeChildren(); | |
119 | |
120 this.storageViewStatusBarItemsContainer.removeChildren(); | |
121 }, | |
122 | |
123 handleKeyEvent: function(event) | |
124 { | |
125 this.sidebarTree.handleKeyEvent(event); | |
126 }, | |
127 | |
128 addDatabase: function(database) | |
129 { | |
130 this._databases.push(database); | |
131 | |
132 var databaseTreeElement = new WebInspector.DatabaseSidebarTreeElement(da
tabase); | |
133 database._databasesTreeElement = databaseTreeElement; | |
134 this.databasesListTreeElement.appendChild(databaseTreeElement); | |
135 }, | |
136 | |
137 addDOMStorage: function(domStorage) | |
138 { | |
139 this._domStorage.push(domStorage); | |
140 var domStorageTreeElement = new WebInspector.DOMStorageSidebarTreeElemen
t(domStorage); | |
141 domStorage._domStorageTreeElement = domStorageTreeElement; | |
142 if (domStorage.isLocalStorage) | |
143 this.localStorageListTreeElement.appendChild(domStorageTreeElement); | |
144 else | |
145 this.sessionStorageListTreeElement.appendChild(domStorageTreeElement
); | |
146 }, | |
147 | |
148 showDatabase: function(database, tableName) | |
149 { | |
150 if (!database) | |
151 return; | |
152 | |
153 if (this.visibleView) | |
154 this.visibleView.hide(); | |
155 | |
156 var view; | |
157 if (tableName) { | |
158 if (!("_tableViews" in database)) | |
159 database._tableViews = {}; | |
160 view = database._tableViews[tableName]; | |
161 if (!view) { | |
162 view = new WebInspector.DatabaseTableView(database, tableName); | |
163 database._tableViews[tableName] = view; | |
164 } | |
165 } else { | |
166 view = database._queryView; | |
167 if (!view) { | |
168 view = new WebInspector.DatabaseQueryView(database); | |
169 database._queryView = view; | |
170 } | |
171 } | |
172 | |
173 view.show(this.storageViews); | |
174 | |
175 this.visibleView = view; | |
176 | |
177 this.storageViewStatusBarItemsContainer.removeChildren(); | |
178 var statusBarItems = view.statusBarItems; | |
179 for (var i = 0; i < statusBarItems.length; ++i) | |
180 this.storageViewStatusBarItemsContainer.appendChild(statusBarItems[i
]); | |
181 }, | |
182 | |
183 showDOMStorage: function(domStorage) | |
184 { | |
185 if (!domStorage) | |
186 return; | |
187 | |
188 if (this.visibleView) | |
189 this.visibleView.hide(); | |
190 | |
191 var view; | |
192 view = domStorage._domStorageView; | |
193 if (!view) { | |
194 view = new WebInspector.DOMStorageItemsView(domStorage); | |
195 domStorage._domStorageView = view; | |
196 } | |
197 | |
198 view.show(this.storageViews); | |
199 | |
200 this.visibleView = view; | |
201 | |
202 this.storageViewStatusBarItemsContainer.removeChildren(); | |
203 var statusBarItems = view.statusBarItems; | |
204 for (var i = 0; i < statusBarItems.length; ++i) | |
205 this.storageViewStatusBarItemsContainer.appendChild(statusBarItems[i
]); | |
206 }, | |
207 | |
208 closeVisibleView: function() | |
209 { | |
210 if (this.visibleView) | |
211 this.visibleView.hide(); | |
212 delete this.visibleView; | |
213 }, | |
214 | |
215 updateDatabaseTables: function(database) | |
216 { | |
217 if (!database || !database._databasesTreeElement) | |
218 return; | |
219 | |
220 database._databasesTreeElement.shouldRefreshChildren = true; | |
221 | |
222 if (!("_tableViews" in database)) | |
223 return; | |
224 | |
225 var tableNamesHash = {}; | |
226 var tableNames = database.tableNames; | |
227 var tableNamesLength = tableNames.length; | |
228 for (var i = 0; i < tableNamesLength; ++i) | |
229 tableNamesHash[tableNames[i]] = true; | |
230 | |
231 for (var tableName in database._tableViews) { | |
232 if (!(tableName in tableNamesHash)) { | |
233 if (this.visibleView === database._tableViews[tableName]) | |
234 this.closeVisibleView(); | |
235 delete database._tableViews[tableName]; | |
236 } | |
237 } | |
238 }, | |
239 | |
240 dataGridForResult: function(result) | |
241 { | |
242 if (!result.rows.length) | |
243 return null; | |
244 | |
245 var columns = {}; | |
246 | |
247 var rows = result.rows; | |
248 for (var columnIdentifier in rows.item(0)) { | |
249 var column = {}; | |
250 column.width = columnIdentifier.length; | |
251 column.title = columnIdentifier; | |
252 | |
253 columns[columnIdentifier] = column; | |
254 } | |
255 | |
256 var nodes = []; | |
257 var length = rows.length; | |
258 for (var i = 0; i < length; ++i) { | |
259 var data = {}; | |
260 | |
261 var row = rows.item(i); | |
262 for (var columnIdentifier in row) { | |
263 // FIXME: (Bug 19439) We should specially format SQL NULL here | |
264 // (which is represented by JavaScript null here, and turned | |
265 // into the string "null" by the String() function). | |
266 var text = String(row[columnIdentifier]); | |
267 data[columnIdentifier] = text; | |
268 if (text.length > columns[columnIdentifier].width) | |
269 columns[columnIdentifier].width = text.length; | |
270 } | |
271 | |
272 var node = new WebInspector.DataGridNode(data, false); | |
273 node.selectable = false; | |
274 nodes.push(node); | |
275 } | |
276 | |
277 var totalColumnWidths = 0; | |
278 for (var columnIdentifier in columns) | |
279 totalColumnWidths += columns[columnIdentifier].width; | |
280 | |
281 // Calculate the percentage width for the columns. | |
282 const minimumPrecent = 5; | |
283 var recoupPercent = 0; | |
284 for (var columnIdentifier in columns) { | |
285 var width = columns[columnIdentifier].width; | |
286 width = Math.round((width / totalColumnWidths) * 100); | |
287 if (width < minimumPrecent) { | |
288 recoupPercent += (minimumPrecent - width); | |
289 width = minimumPrecent; | |
290 } | |
291 | |
292 columns[columnIdentifier].width = width; | |
293 } | |
294 | |
295 // Enforce the minimum percentage width. | |
296 while (recoupPercent > 0) { | |
297 for (var columnIdentifier in columns) { | |
298 if (columns[columnIdentifier].width > minimumPrecent) { | |
299 --columns[columnIdentifier].width; | |
300 --recoupPercent; | |
301 if (!recoupPercent) | |
302 break; | |
303 } | |
304 } | |
305 } | |
306 | |
307 // Change the width property to a string suitable for a style width. | |
308 for (var columnIdentifier in columns) | |
309 columns[columnIdentifier].width += "%"; | |
310 | |
311 var dataGrid = new WebInspector.DataGrid(columns); | |
312 var length = nodes.length; | |
313 for (var i = 0; i < length; ++i) | |
314 dataGrid.appendChild(nodes[i]); | |
315 | |
316 return dataGrid; | |
317 }, | |
318 | |
319 dataGridForDOMStorage: function(domStorage) | |
320 { | |
321 if (!domStorage.length) | |
322 return null; | |
323 | |
324 var columns = {}; | |
325 columns[0] = {}; | |
326 columns[1] = {}; | |
327 columns[0].title = WebInspector.UIString("Key"); | |
328 columns[0].width = columns[0].title.length; | |
329 columns[1].title = WebInspector.UIString("Value"); | |
330 columns[1].width = columns[0].title.length; | |
331 | |
332 var nodes = []; | |
333 | |
334 var length = domStorage.length; | |
335 for (index = 0; index < domStorage.length; index++) { | |
336 var data = {}; | |
337 | |
338 var key = String(domStorage.key(index)); | |
339 data[0] = key; | |
340 if (key.length > columns[0].width) | |
341 columns[0].width = key.length; | |
342 | |
343 var value = String(domStorage.getItem(key)); | |
344 data[1] = value; | |
345 if (value.length > columns[1].width) | |
346 columns[1].width = value.length; | |
347 var node = new WebInspector.DataGridNode(data, false); | |
348 node.selectable = true; | |
349 nodes.push(node); | |
350 } | |
351 | |
352 var totalColumnWidths = columns[0].width + columns[1].width; | |
353 width = Math.round((columns[0].width * 100) / totalColumnWidths); | |
354 const minimumPrecent = 10; | |
355 if (width < minimumPrecent) | |
356 width = minimumPrecent; | |
357 if (width > 100 - minimumPrecent) | |
358 width = 100 - minimumPrecent; | |
359 columns[0].width = width; | |
360 columns[1].width = 100 - width; | |
361 columns[0].width += "%"; | |
362 columns[1].width += "%"; | |
363 | |
364 var dataGrid = new WebInspector.DOMStorageDataGrid(columns); | |
365 var length = nodes.length; | |
366 for (var i = 0; i < length; ++i) | |
367 dataGrid.appendChild(nodes[i]); | |
368 if (length > 0) | |
369 nodes[0].selected = true; | |
370 return dataGrid; | |
371 }, | |
372 | |
373 _startSidebarDragging: function(event) | |
374 { | |
375 WebInspector.elementDragStart(this.sidebarResizeElement, this._sidebarDr
agging.bind(this), this._endSidebarDragging.bind(this), event, "col-resize"); | |
376 }, | |
377 | |
378 _sidebarDragging: function(event) | |
379 { | |
380 this._updateSidebarWidth(event.pageX); | |
381 | |
382 event.preventDefault(); | |
383 }, | |
384 | |
385 _endSidebarDragging: function(event) | |
386 { | |
387 WebInspector.elementDragEnd(event); | |
388 }, | |
389 | |
390 _updateSidebarWidth: function(width) | |
391 { | |
392 if (this.sidebarElement.offsetWidth <= 0) { | |
393 // The stylesheet hasn't loaded yet or the window is closed, | |
394 // so we can't calculate what is need. Return early. | |
395 return; | |
396 } | |
397 | |
398 if (!("_currentSidebarWidth" in this)) | |
399 this._currentSidebarWidth = this.sidebarElement.offsetWidth; | |
400 | |
401 if (typeof width === "undefined") | |
402 width = this._currentSidebarWidth; | |
403 | |
404 width = Number.constrain(width, Preferences.minSidebarWidth, window.inne
rWidth / 2); | |
405 | |
406 this._currentSidebarWidth = width; | |
407 | |
408 this.sidebarElement.style.width = width + "px"; | |
409 this.storageViews.style.left = width + "px"; | |
410 this.storageViewStatusBarItemsContainer.style.left = width + "px"; | |
411 this.sidebarResizeElement.style.left = (width - 3) + "px"; | |
412 } | |
413 } | |
414 | |
415 WebInspector.DatabasesPanel.prototype.__proto__ = WebInspector.Panel.prototype; | |
416 | |
417 WebInspector.DatabaseSidebarTreeElement = function(database) | |
418 { | |
419 this.database = database; | |
420 | |
421 WebInspector.SidebarTreeElement.call(this, "database-sidebar-tree-item", "",
"", database, true); | |
422 | |
423 this.refreshTitles(); | |
424 } | |
425 | |
426 WebInspector.DatabaseSidebarTreeElement.prototype = { | |
427 onselect: function() | |
428 { | |
429 WebInspector.panels.databases.showDatabase(this.database); | |
430 }, | |
431 | |
432 oncollapse: function() | |
433 { | |
434 // Request a refresh after every collapse so the next | |
435 // expand will have an updated table list. | |
436 this.shouldRefreshChildren = true; | |
437 }, | |
438 | |
439 onpopulate: function() | |
440 { | |
441 this.removeChildren(); | |
442 | |
443 var tableNames = this.database.tableNames; | |
444 var tableNamesLength = tableNames.length; | |
445 for (var i = 0; i < tableNamesLength; ++i) | |
446 this.appendChild(new WebInspector.SidebarDatabaseTableTreeElement(th
is.database, tableNames[i])); | |
447 }, | |
448 | |
449 get mainTitle() | |
450 { | |
451 return this.database.name; | |
452 }, | |
453 | |
454 set mainTitle(x) | |
455 { | |
456 // Do nothing. | |
457 }, | |
458 | |
459 get subtitle() | |
460 { | |
461 return this.database.displayDomain; | |
462 }, | |
463 | |
464 set subtitle(x) | |
465 { | |
466 // Do nothing. | |
467 } | |
468 } | |
469 | |
470 WebInspector.DatabaseSidebarTreeElement.prototype.__proto__ = WebInspector.Sideb
arTreeElement.prototype; | |
471 | |
472 WebInspector.SidebarDatabaseTableTreeElement = function(database, tableName) | |
473 { | |
474 this.database = database; | |
475 this.tableName = tableName; | |
476 | |
477 WebInspector.SidebarTreeElement.call(this, "database-table-sidebar-tree-item
small", tableName, "", null, false); | |
478 } | |
479 | |
480 WebInspector.SidebarDatabaseTableTreeElement.prototype = { | |
481 onselect: function() | |
482 { | |
483 WebInspector.panels.databases.showDatabase(this.database, this.tableName
); | |
484 } | |
485 } | |
486 | |
487 WebInspector.SidebarDatabaseTableTreeElement.prototype.__proto__ = WebInspector.
SidebarTreeElement.prototype; | |
488 | |
489 WebInspector.DOMStorageSidebarTreeElement = function(domStorage) | |
490 { | |
491 | |
492 this.domStorage = domStorage; | |
493 | |
494 WebInspector.SidebarTreeElement.call(this, "domstorage-sidebar-tree-item", d
omStorage, "", null, false); | |
495 | |
496 this.refreshTitles(); | |
497 } | |
498 | |
499 WebInspector.DOMStorageSidebarTreeElement.prototype = { | |
500 onselect: function() | |
501 { | |
502 WebInspector.panels.databases.showDOMStorage(this.domStorage); | |
503 }, | |
504 | |
505 get mainTitle() | |
506 { | |
507 return this.domStorage.domain; | |
508 }, | |
509 | |
510 set mainTitle(x) | |
511 { | |
512 // Do nothing. | |
513 }, | |
514 | |
515 get subtitle() | |
516 { | |
517 return ""; //this.database.displayDomain; | |
518 }, | |
519 | |
520 set subtitle(x) | |
521 { | |
522 // Do nothing. | |
523 } | |
524 } | |
525 | |
526 WebInspector.DOMStorageSidebarTreeElement.prototype.__proto__ = WebInspector.Sid
ebarTreeElement.prototype; | |
OLD | NEW |