Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(497)

Side by Side Diff: chrome/browser/resources/bookmark_manager/js/bmm/bookmark_list.js

Issue 543863002: Typecheck chrome://bookmarks using Closure Compiler (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@true_master
Patch Set: debug warns Created 6 years, 2 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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
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
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
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
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
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 });
OLDNEW
« no previous file with comments | « chrome/browser/resources/bookmark_manager/js/bmm.js ('k') | chrome/browser/resources/bookmark_manager/js/bmm/bookmark_tree.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698