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 |