| OLD | NEW |
| 1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. |
| 2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
| 3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
| 4 | 4 |
| 5 // TODO(arv): Now that this is driven by a data model, implement a data model | 5 // TODO(arv): Now that this is driven by a data model, implement a data model |
| 6 // that handles the loading and the events from the bookmark backend. | 6 // that handles the loading and the events from the bookmark backend. |
| 7 | 7 |
| 8 /** |
| 9 * @typedef {{childIds: Array.<string>}} |
| 10 * |
| 11 * @see chrome/common/extensions/api/bookmarks.json |
| 12 */ |
| 13 var ReorderInfo; |
| 14 |
| 15 /** |
| 16 * @typedef {{parentId: string, |
| 17 * index: number, |
| 18 * oldParentId: string, |
| 19 * oldIndex: number}} |
| 20 * |
| 21 * @see chrome/common/extensions/api/bookmarks.json |
| 22 */ |
| 23 var MoveInfo; |
| 24 |
| 8 cr.define('bmm', function() { | 25 cr.define('bmm', function() { |
| 9 var List = cr.ui.List; | 26 var List = cr.ui.List; |
| 10 var ListItem = cr.ui.ListItem; | 27 var ListItem = cr.ui.ListItem; |
| 11 var ArrayDataModel = cr.ui.ArrayDataModel; | 28 var ArrayDataModel = cr.ui.ArrayDataModel; |
| 12 var ContextMenuButton = cr.ui.ContextMenuButton; | 29 var ContextMenuButton = cr.ui.ContextMenuButton; |
| 13 | 30 |
| 14 var list; | |
| 15 | |
| 16 /** | 31 /** |
| 17 * Basic array data model for use with bookmarks. | 32 * Basic array data model for use with bookmarks. |
| 18 * @param {!Array.<!BookmarkTreeNode>} items The bookmark items. | 33 * @param {!Array.<!BookmarkTreeNode>} items The bookmark items. |
| 19 * @constructor | 34 * @constructor |
| 20 * @extends {ArrayDataModel} | 35 * @extends {ArrayDataModel} |
| 21 */ | 36 */ |
| 22 function BookmarksArrayDataModel(items) { | 37 function BookmarksArrayDataModel(items) { |
| 23 ArrayDataModel.call(this, items); | 38 ArrayDataModel.call(this, items); |
| 24 } | 39 } |
| 25 | 40 |
| (...skipping 24 matching lines...) Expand all Loading... |
| 50 while ((n = parent.lastChild)) { | 65 while ((n = parent.lastChild)) { |
| 51 parent.removeChild(n); | 66 parent.removeChild(n); |
| 52 } | 67 } |
| 53 parent.appendChild(newChild); | 68 parent.appendChild(newChild); |
| 54 } | 69 } |
| 55 | 70 |
| 56 /** | 71 /** |
| 57 * Creates a new bookmark list. | 72 * Creates a new bookmark list. |
| 58 * @param {Object=} opt_propertyBag Optional properties. | 73 * @param {Object=} opt_propertyBag Optional properties. |
| 59 * @constructor | 74 * @constructor |
| 60 * @extends {HTMLButtonElement} | 75 * @extends {cr.ui.List} |
| 61 */ | 76 */ |
| 62 var BookmarkList = cr.ui.define('list'); | 77 var BookmarkList = cr.ui.define('list'); |
| 63 | 78 |
| 64 BookmarkList.prototype = { | 79 BookmarkList.prototype = { |
| 65 __proto__: List.prototype, | 80 __proto__: List.prototype, |
| 66 | 81 |
| 67 /** @override */ | 82 /** @override */ |
| 68 decorate: function() { | 83 decorate: function() { |
| 69 List.prototype.decorate.call(this); | 84 List.prototype.decorate.call(this); |
| 70 this.addEventListener('mousedown', this.handleMouseDown_); | 85 this.addEventListener('mousedown', this.handleMouseDown_); |
| 71 | 86 |
| 72 // HACK(arv): http://crbug.com/40902 | 87 // HACK(arv): http://crbug.com/40902 |
| 73 window.addEventListener('resize', this.redraw.bind(this)); | 88 window.addEventListener('resize', this.redraw.bind(this)); |
| 74 | 89 |
| 75 // We could add the ContextMenuButton in the BookmarkListItem but it slows | 90 // We could add the ContextMenuButton in the BookmarkListItem but it slows |
| 76 // down redraws a lot so we do this on mouseovers instead. | 91 // down redraws a lot so we do this on mouseovers instead. |
| 77 this.addEventListener('mouseover', this.handleMouseOver_.bind(this)); | 92 this.addEventListener('mouseover', this.handleMouseOver_.bind(this)); |
| 78 | 93 |
| 79 bmm.list = this; | 94 bmm.list = this; |
| 80 }, | 95 }, |
| 81 | 96 |
| 97 /** |
| 98 * @param {!BookmarkTreeNode} bookmarkNode |
| 99 * @override |
| 100 */ |
| 82 createItem: function(bookmarkNode) { | 101 createItem: function(bookmarkNode) { |
| 83 return new BookmarkListItem(bookmarkNode); | 102 return new BookmarkListItem(bookmarkNode); |
| 84 }, | 103 }, |
| 85 | 104 |
| 86 /** @private {string} */ | 105 /** @private {string} */ |
| 87 parentId_: '', | 106 parentId_: '', |
| 88 | 107 |
| 89 /** @private {number} */ | 108 /** @private {number} */ |
| 90 loadCount_: 0, | 109 loadCount_: 0, |
| 91 | 110 |
| (...skipping 99 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 191 var event = new Event('urlClicked', {bubbles: true}); | 210 var event = new Event('urlClicked', {bubbles: true}); |
| 192 event.url = url; | 211 event.url = url; |
| 193 event.originalEvent = originalEvent; | 212 event.originalEvent = originalEvent; |
| 194 this.dispatchEvent(event); | 213 this.dispatchEvent(event); |
| 195 }, | 214 }, |
| 196 | 215 |
| 197 /** | 216 /** |
| 198 * Handles mousedown events so that we can prevent the auto scroll as | 217 * Handles mousedown events so that we can prevent the auto scroll as |
| 199 * necessary. | 218 * necessary. |
| 200 * @private | 219 * @private |
| 201 * @param {!MouseEvent} e The mousedown event object. | 220 * @param {!Event} e The mousedown event object. |
| 202 */ | 221 */ |
| 203 handleMouseDown_: function(e) { | 222 handleMouseDown_: function(e) { |
| 223 e = /** @type {!MouseEvent} */(e); |
| 204 if (e.button == 1) { | 224 if (e.button == 1) { |
| 205 // WebKit no longer fires click events for middle clicks so we manually | 225 // WebKit no longer fires click events for middle clicks so we manually |
| 206 // listen to mouse up to dispatch a click event. | 226 // listen to mouse up to dispatch a click event. |
| 207 this.addEventListener('mouseup', this.handleMiddleMouseUp_); | 227 this.addEventListener('mouseup', this.handleMiddleMouseUp_); |
| 208 | 228 |
| 209 // When the user does a middle click we need to prevent the auto scroll | 229 // When the user does a middle click we need to prevent the auto scroll |
| 210 // in case the user is trying to middle click to open a bookmark in a | 230 // in case the user is trying to middle click to open a bookmark in a |
| 211 // background tab. | 231 // background tab. |
| 212 // We do not do this in case the target is an input since middle click | 232 // We do not do this in case the target is an input since middle click |
| 213 // is also paste on Linux and we don't want to break that. | 233 // is also paste on Linux and we don't want to break that. |
| 214 if (e.target.tagName != 'INPUT') | 234 if (e.target.tagName != 'INPUT') |
| 215 e.preventDefault(); | 235 e.preventDefault(); |
| 216 } | 236 } |
| 217 }, | 237 }, |
| 218 | 238 |
| 219 /** | 239 /** |
| 220 * WebKit no longer dispatches click events for middle clicks so we need | 240 * WebKit no longer dispatches click events for middle clicks so we need |
| 221 * to emulate it. | 241 * to emulate it. |
| 222 * @private | 242 * @private |
| 223 * @param {!MouseEvent} e The mouse up event object. | 243 * @param {!Event} e The mouse up event object. |
| 224 */ | 244 */ |
| 225 handleMiddleMouseUp_: function(e) { | 245 handleMiddleMouseUp_: function(e) { |
| 246 e = /** @type {!MouseEvent} */(e); |
| 226 this.removeEventListener('mouseup', this.handleMiddleMouseUp_); | 247 this.removeEventListener('mouseup', this.handleMiddleMouseUp_); |
| 227 if (e.button == 1) { | 248 if (e.button == 1) { |
| 228 var el = e.target; | 249 var el = e.target; |
| 229 while (el.parentNode != this) { | 250 while (el.parentNode != this) { |
| 230 el = el.parentNode; | 251 el = el.parentNode; |
| 231 } | 252 } |
| 232 var node = el.bookmarkNode; | 253 var node = el.bookmarkNode; |
| 233 if (node && !bmm.isFolder(node)) | 254 if (node && !bmm.isFolder(node)) |
| 234 this.dispatchUrlClickedEvent_(node.url, e); | 255 this.dispatchUrlClickedEvent_(node.url, e); |
| 235 } | 256 } |
| 236 e.preventDefault(); | 257 e.preventDefault(); |
| 237 }, | 258 }, |
| 238 | 259 |
| 239 // Bookmark model update callbacks | 260 // Bookmark model update callbacks |
| 240 handleBookmarkChanged: function(id, changeInfo) { | 261 handleBookmarkChanged: function(id, changeInfo) { |
| 241 var dataModel = this.dataModel; | 262 var dataModel = this.dataModel; |
| 242 var index = dataModel.findIndexById(id); | 263 var index = dataModel.findIndexById(id); |
| 243 if (index != -1) { | 264 if (index != -1) { |
| 244 var bookmarkNode = this.dataModel.item(index); | 265 var bookmarkNode = this.dataModel.item(index); |
| 245 bookmarkNode.title = changeInfo.title; | 266 bookmarkNode.title = changeInfo.title; |
| 246 if ('url' in changeInfo) | 267 if ('url' in changeInfo) |
| 247 bookmarkNode.url = changeInfo['url']; | 268 bookmarkNode.url = changeInfo['url']; |
| 248 | 269 |
| 249 dataModel.updateIndex(index); | 270 dataModel.updateIndex(index); |
| 250 } | 271 } |
| 251 }, | 272 }, |
| 252 | 273 |
| 274 /** |
| 275 * @param {string} id |
| 276 * @param {ReorderInfo} reorderInfo |
| 277 */ |
| 253 handleChildrenReordered: function(id, reorderInfo) { | 278 handleChildrenReordered: function(id, reorderInfo) { |
| 254 if (this.parentId == id) { | 279 if (this.parentId == id) { |
| 255 // We create a new data model with updated items in the right order. | 280 // We create a new data model with updated items in the right order. |
| 256 var dataModel = this.dataModel; | 281 var dataModel = this.dataModel; |
| 257 var items = {}; | 282 var items = {}; |
| 258 for (var i = this.dataModel.length - 1; i >= 0; i--) { | 283 for (var i = this.dataModel.length - 1; i >= 0; i--) { |
| 259 var bookmarkNode = dataModel.item(i); | 284 var bookmarkNode = dataModel.item(i); |
| 260 items[bookmarkNode.id] = bookmarkNode; | 285 items[bookmarkNode.id] = bookmarkNode; |
| 261 } | 286 } |
| 262 var newArray = []; | 287 var newArray = []; |
| 263 for (var i = 0; i < reorderInfo.childIds.length; i++) { | 288 for (var i = 0; i < reorderInfo.childIds.length; i++) { |
| 264 newArray[i] = items[reorderInfo.childIds[i]]; | 289 newArray[i] = items[reorderInfo.childIds[i]]; |
| 265 newArray[i].index = i; | 290 newArray[i].index = i; |
| 266 } | 291 } |
| 267 | 292 |
| 268 this.dataModel = new BookmarksArrayDataModel(newArray); | 293 this.dataModel = new BookmarksArrayDataModel(newArray); |
| 269 } | 294 } |
| 270 }, | 295 }, |
| 271 | 296 |
| 272 handleCreated: function(id, bookmarkNode) { | 297 handleCreated: function(id, bookmarkNode) { |
| 273 if (this.parentId == bookmarkNode.parentId) | 298 if (this.parentId == bookmarkNode.parentId) |
| 274 this.dataModel.splice(bookmarkNode.index, 0, bookmarkNode); | 299 this.dataModel.splice(bookmarkNode.index, 0, bookmarkNode); |
| 275 }, | 300 }, |
| 276 | 301 |
| 302 /** |
| 303 * @param {string} id |
| 304 * @param {MoveInfo} moveInfo |
| 305 */ |
| 277 handleMoved: function(id, moveInfo) { | 306 handleMoved: function(id, moveInfo) { |
| 278 if (moveInfo.parentId == this.parentId || | 307 if (moveInfo.parentId == this.parentId || |
| 279 moveInfo.oldParentId == this.parentId) { | 308 moveInfo.oldParentId == this.parentId) { |
| 280 | 309 |
| 281 var dataModel = this.dataModel; | 310 var dataModel = this.dataModel; |
| 282 | 311 |
| 283 if (moveInfo.oldParentId == moveInfo.parentId) { | 312 if (moveInfo.oldParentId == moveInfo.parentId) { |
| 284 // Reorder within this folder | 313 // Reorder within this folder |
| 285 | 314 |
| 286 this.startBatchUpdates(); | 315 this.startBatchUpdates(); |
| (...skipping 50 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 337 // the size should not change since we already fixed the width. | 366 // the size should not change since we already fixed the width. |
| 338 window.setTimeout(function() { | 367 window.setTimeout(function() { |
| 339 list.style.width = ''; | 368 list.style.width = ''; |
| 340 }, 0); | 369 }, 0); |
| 341 } | 370 } |
| 342 } | 371 } |
| 343 }; | 372 }; |
| 344 | 373 |
| 345 /** | 374 /** |
| 346 * The ID of the bookmark folder we are displaying. | 375 * The ID of the bookmark folder we are displaying. |
| 347 * @type {string} | |
| 348 */ | 376 */ |
| 349 cr.defineProperty(BookmarkList, 'parentId', cr.PropertyKind.JS, | 377 cr.defineProperty(BookmarkList, 'parentId', cr.PropertyKind.JS, |
| 350 function() { | 378 function() { |
| 351 this.reload(); | 379 this.reload(); |
| 352 }); | 380 }); |
| 353 | 381 |
| 354 /** | 382 /** |
| 355 * The contextMenu property. | 383 * The contextMenu property. |
| 356 * @type {cr.ui.Menu} | |
| 357 */ | 384 */ |
| 358 cr.ui.contextMenuHandler.addContextMenuProperty(BookmarkList); | 385 cr.ui.contextMenuHandler.addContextMenuProperty(BookmarkList); |
| 386 /** @type {cr.ui.Menu} */ |
| 387 BookmarkList.prototype.contextMenu; |
| 359 | 388 |
| 360 /** | 389 /** |
| 361 * Creates a new bookmark list item. | 390 * Creates a new bookmark list item. |
| 362 * @param {!BookmarkTreeNode} bookmarkNode The bookmark node this represents. | 391 * @param {!BookmarkTreeNode} bookmarkNode The bookmark node this represents. |
| 363 * @constructor | 392 * @constructor |
| 364 * @extends {cr.ui.ListItem} | 393 * @extends {cr.ui.ListItem} |
| 365 */ | 394 */ |
| 366 function BookmarkListItem(bookmarkNode) { | 395 function BookmarkListItem(bookmarkNode) { |
| 367 var el = cr.doc.createElement('div'); | 396 var el = cr.doc.createElement('div'); |
| 368 el.bookmarkNode = bookmarkNode; | 397 el.bookmarkNode = bookmarkNode; |
| (...skipping 131 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 500 listItem.editing = false; | 529 listItem.editing = false; |
| 501 } | 530 } |
| 502 }, 50); | 531 }, 50); |
| 503 } | 532 } |
| 504 | 533 |
| 505 var doc = this.ownerDocument; | 534 var doc = this.ownerDocument; |
| 506 if (editing) { | 535 if (editing) { |
| 507 this.setAttribute('editing', ''); | 536 this.setAttribute('editing', ''); |
| 508 this.draggable = false; | 537 this.draggable = false; |
| 509 | 538 |
| 510 labelInput = doc.createElement('input'); | 539 labelInput = /** @type {HTMLElement} */(doc.createElement('input')); |
| 511 labelInput.placeholder = | 540 labelInput.placeholder = |
| 512 loadTimeData.getString('name_input_placeholder'); | 541 loadTimeData.getString('name_input_placeholder'); |
| 513 replaceAllChildren(labelEl, labelInput); | 542 replaceAllChildren(labelEl, labelInput); |
| 514 labelInput.value = title; | 543 labelInput.value = title; |
| 515 | 544 |
| 516 if (!isFolder) { | 545 if (!isFolder) { |
| 517 urlInput = doc.createElement('input'); | 546 urlInput = /** @type {HTMLElement} */(doc.createElement('input')); |
| 518 urlInput.type = 'url'; | 547 urlInput.type = 'url'; |
| 519 urlInput.required = true; | 548 urlInput.required = true; |
| 520 urlInput.placeholder = | 549 urlInput.placeholder = |
| 521 loadTimeData.getString('url_input_placeholder'); | 550 loadTimeData.getString('url_input_placeholder'); |
| 522 | 551 |
| 523 // We also need a name for the input for the CSS to work. | 552 // We also need a name for the input for the CSS to work. |
| 524 urlInput.name = '-url-input-' + cr.createUid(); | 553 urlInput.name = '-url-input-' + cr.createUid(); |
| 525 replaceAllChildren(urlEl, urlInput); | 554 replaceAllChildren(assert(urlEl), urlInput); |
| 526 urlInput.value = url; | 555 urlInput.value = url; |
| 527 } | 556 } |
| 528 | 557 |
| 529 function stopPropagation(e) { | 558 var stopPropagation = function(e) { |
| 530 e.stopPropagation(); | 559 e.stopPropagation(); |
| 531 } | 560 }; |
| 532 | 561 |
| 533 var eventsToStop = | 562 var eventsToStop = |
| 534 ['mousedown', 'mouseup', 'contextmenu', 'dblclick', 'paste']; | 563 ['mousedown', 'mouseup', 'contextmenu', 'dblclick', 'paste']; |
| 535 eventsToStop.forEach(function(type) { | 564 eventsToStop.forEach(function(type) { |
| 536 labelInput.addEventListener(type, stopPropagation); | 565 labelInput.addEventListener(type, stopPropagation); |
| 537 }); | 566 }); |
| 538 labelInput.addEventListener('keydown', handleKeydown); | 567 labelInput.addEventListener('keydown', handleKeydown); |
| 539 labelInput.addEventListener('blur', handleBlur); | 568 labelInput.addEventListener('blur', handleBlur); |
| 540 cr.ui.limitInputWidth(labelInput, this, 100, 0.5); | 569 cr.ui.limitInputWidth(labelInput, this, 100, 0.5); |
| 541 labelInput.focus(); | 570 labelInput.focus(); |
| (...skipping 52 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 594 } | 623 } |
| 595 } else if (newLabel != title || newUrl != url) { | 624 } else if (newLabel != title || newUrl != url) { |
| 596 cr.dispatchSimpleEvent(this, 'edit', true); | 625 cr.dispatchSimpleEvent(this, 'edit', true); |
| 597 } | 626 } |
| 598 } | 627 } |
| 599 } | 628 } |
| 600 }; | 629 }; |
| 601 | 630 |
| 602 return { | 631 return { |
| 603 BookmarkList: BookmarkList, | 632 BookmarkList: BookmarkList, |
| 604 list: list | 633 list: /** @type {Element} */(null), // Set when decorated. |
| 605 }; | 634 }; |
| 606 }); | 635 }); |
| OLD | NEW |