| 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 |