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