1 <html>
2 <head>
3 <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" rel="stylesheet">
4 <style>
5 div, td, th { color: black; }
6 </style>
7 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
8 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
9 <script>
10 // Search the bookmarks when entering the search keyword.
11 $(function() {
12 $('#search').change(function() {
13 $('#bookmarks').empty();
14 dumpBookmarks($('#search').val());
15 });
16 });
17 // Traverse the bookmark tree, and print the folder and nodes.
18 function dumpBookmarks(query) {
19 var bookmarkTreeNodes = chrome.bookmarks.getTree(
20 function(bookmarkTreeNodes) {
21 $('#bookmarks').append(dumpTreeNodes(bookmarkTreeNodes, query));
22 });
23 }
24 function dumpTreeNodes(bookmarkNodes, query) {
25 var list = $('<ul>');
26 var i;
27 for (i = 0; i < bookmarkNodes.length; i++) {
28 list.append(dumpNode(bookmarkNodes[i], query));
29 }
30 return list;
31 }
32 function dumpNode(bookmarkNode, query) {
33 if (bookmarkNode.title) {
34 if (query && !bookmarkNode.children) {
35 if (String(bookmarkNode.title).indexOf(query) == -1) {
36 return $('');
37 }
38 }
39 var anchor = $('');
40 anchor.attr('href', bookmarkNode.url);
41 anchor.text(bookmarkNode.title);
42 /*
43 * When clicking on a bookmark in the extension, a new tab is fired with
44 * the bookmark url.
45 */
46 anchor.click(function() {
47 chrome.tabs.create({url: bookmarkNode.url});
48 });
49 var span = $('');
50 var options = bookmarkNode.children ?
51 $('[Add]') :
52 $('[Edit +
53 'href="#">Delete]');
54 var edit = bookmarkNode.children ? $('') : $('');
57 // Show add and edit links when hover over.
58 span.hover(function() {
59 span.append(options);
60 $('#deletelink').click(function() {
61 $('#deletedialog').empty().dialog({
62 autoOpen: false,
63 title: 'Confirm Deletion',
64 resizable: false,
65 height: 140,
66 modal: true,
67 overlay: {
68 backgroundColor: '#000',
69 opacity: 0.5
70 },
71 buttons: {
72 'Yes, Delete It!': function() {
73 chrome.bookmarks.remove(String(bookmarkNode.id));
74 span.parent().remove();
75 $(this).dialog('destroy');
76 },
77 Cancel: function() {
78 $(this).dialog('destroy');
79 }
80 }
81 }).dialog('open');
82 });
83 $('#addlink').click(function() {
84 $('#adddialog').empty().append(edit).dialog({autoOpen: false,
85 closeOnEscape: true, title: 'Add New Bookmark', modal: true,
86 buttons: {
87 'Add' : function() {
88 chrome.bookmarks.create({parentId: bookmarkNode.id,
89 title: $('#title').val(), url: $('#url').val()});
90 $('#bookmarks').empty();
91 $(this).dialog('destroy');
92 window.dumpBookmarks();
93 },
94 'Cancel': function() {
95 $(this).dialog('destroy');
96 }
97 }}).dialog('open');
98 });
99 $('#editlink').click(function() {
100 edit.val(anchor.text());
101 $('#editdialog').empty().append(edit).dialog({autoOpen: false,
102 closeOnEscape: true, title: 'Edit Title', modal: true,
103 show: 'slide', buttons: {
104 'Save': function() {
105 chrome.bookmarks.update(String(bookmarkNode.id), {
106 title: edit.val()
107 });
108 anchor.text(edit.val());
109 options.show();
110 $(this).dialog('destroy');
111 },
112 'Cancel': function() {
113 $(this).dialog('destroy');
114 }
115 }}).dialog('open');
116 });
117 options.fadeIn();
118 },
119 // unhover
120 function() {
121 options.remove();
122 }).append(anchor);
123 }
124 var li = $(bookmarkNode.title ? '' : '
