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