| 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 |