OLD | NEW |
| (Empty) |
1 <!DOCTYPE HTML> | |
2 <title>Bookmark View</title> | |
3 <style> | |
4 | |
5 .bookmark { | |
6 margin-left: 5px; | |
7 padding: 2px; | |
8 } | |
9 | |
10 .bookmark_title { | |
11 display: inline; | |
12 border: 1px solid white; | |
13 padding: 0px 3px; | |
14 } | |
15 | |
16 .bookmark_title:hover { | |
17 background-color: silver; | |
18 border: 1px solid black; | |
19 } | |
20 | |
21 .event-log { | |
22 font-family: monospace; | |
23 } | |
24 | |
25 </style> | |
26 <script> | |
27 // XXX Hack: When you call window.open('chrome-extension://...'), the window is | |
28 // first navigated to about:blank, and then to the final URL. This confuses the | |
29 // code that sets up our v8 extensions, and we don't end up with them running. | |
30 // | |
31 // If we noticed this happened, reload ourselves, which should fix it. | |
32 if (!chromium.bookmarks) | |
33 location.reload(); | |
34 | |
35 var logEvent = function(name, data) { | |
36 var log = document.getElementById("event-log"); | |
37 log.innerHTML = name + "<br>" + log.innerHTML; | |
38 console.log("got event: " + name); | |
39 } | |
40 | |
41 chromium.bookmarks.onBookmarkAdded.addListener(function(data) { | |
42 logEvent("onBookmarkAdded", data); | |
43 }); | |
44 | |
45 chromium.bookmarks.onBookmarkRemoved.addListener(function(data) { | |
46 logEvent("onBookmarkRemoved", data); | |
47 }); | |
48 | |
49 chromium.bookmarks.onBookmarkChanged.addListener(function(data) { | |
50 logEvent("onBookmarkChanged", data); | |
51 }); | |
52 | |
53 chromium.bookmarks.onBookmarkMoved.addListener(function(data) { | |
54 logEvent("onBookmarkMoved", data); | |
55 }); | |
56 | |
57 chromium.bookmarks.onBookmarkChildrenReordered.addListener(function(data) { | |
58 logEvent("onBookmarkChildrenReordered", data); | |
59 }); | |
60 | |
61 var prefix = "bookmark_"; | |
62 | |
63 var toggleBookmark = function(event) { | |
64 event.stopPropagation(); | |
65 var node = event.currentTarget; | |
66 var id_str = node.id; | |
67 if (id_str < prefix.length) | |
68 return; | |
69 var id = parseInt(id_str.substring(prefix.length)); | |
70 if (id == NaN) | |
71 return; | |
72 console.log("toggle: " + id); | |
73 //console.dir(event); | |
74 chromium.bookmarks.get([id], function(bookmark) { | |
75 //console.log("toggle get"); | |
76 console.dir(bookmark[0]); | |
77 if (bookmark[0].childrenIds && bookmark[0].childrenIds.length) { | |
78 if (node.childNodes.length != 1) { | |
79 //console.log("toggle collapse"); | |
80 node.removeChild(node.childNodes[1]); | |
81 } else { | |
82 //console.log("before"); | |
83 chromium.bookmarks.get(bookmark[0].childrenIds, function(children) { | |
84 //console.log("toggle expand"); | |
85 if (children && children.length) { | |
86 console.dir(children); | |
87 addBookmarks(children, node); | |
88 } | |
89 }); | |
90 } | |
91 } | |
92 }); | |
93 }; | |
94 | |
95 var addBookmark = function(bookmark, parent) { | |
96 //console.log("addBookmark " + bookmark.id); | |
97 var child = document.createElement('li'); | |
98 child.className = 'bookmark'; | |
99 child.id = prefix + bookmark.id; | |
100 child.addEventListener('click', toggleBookmark, false); | |
101 if (bookmark.url && bookmark.url.length) { | |
102 var link = document.createElement('a'); | |
103 link.href = bookmark.url; | |
104 link.innerHTML = bookmark.title; | |
105 link.className = 'bookmark_title'; | |
106 child.appendChild(link); | |
107 } else { | |
108 var title = document.createElement('div'); | |
109 title.innerHTML = bookmark.title; | |
110 title.className = 'bookmark_title'; | |
111 child.appendChild(title); | |
112 } | |
113 parent.appendChild(child); | |
114 }; | |
115 | |
116 var addBookmarks = function(bookmarks, parent) { | |
117 console.log("addBookmarks " + parent.id); | |
118 var list = document.createElement("ul"); | |
119 parent.appendChild(list); | |
120 bookmarks.forEach(function(bookmark) { addBookmark(bookmark, list); }); | |
121 }; | |
122 | |
123 var loadBookmarks = function() { | |
124 var container = document.getElementById('container'); | |
125 chromium.bookmarks.get([], function(results) { | |
126 var root = results[0]; | |
127 console.dir(root); | |
128 var rootElement = document.createElement("div"); | |
129 rootElement.id = prefix + root.id; | |
130 // root element is empty / invisible, just an id to be looked up | |
131 container.appendChild(rootElement); | |
132 chromium.bookmarks.get(root.childrenIds, function(children) { | |
133 addBookmarks(children, rootElement); | |
134 }); | |
135 }); | |
136 }; | |
137 | |
138 </script> | |
139 <body onload="loadBookmarks()"> | |
140 <div id="container"> | |
141 </div> | |
142 <div id="event-log"></div> | |
143 </body> | |
OLD | NEW |