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