OLD | NEW |
(Empty) | |
| 1 <html> |
| 2 <head> |
| 3 <style type="text/css"> |
| 4 body { |
| 5 font-family:arial; |
| 6 background-color:white; |
| 7 font-size:80%; |
| 8 margin:0px; |
| 9 } |
| 10 .section-title { |
| 11 color:#000; |
| 12 line-height:19pt; |
| 13 font-size:95%; |
| 14 font-weight:bold; |
| 15 margin-bottom:4px; |
| 16 margin-left: 0px; |
| 17 } |
| 18 a { |
| 19 color:#0000cc; |
| 20 white-space: nowrap; |
| 21 } |
| 22 .sidebar { |
| 23 width: 207px; |
| 24 padding:3px 10px 3px 9px; |
| 25 -webkit-border-radius:5px 5px; |
| 26 margin-bottom:10px; |
| 27 } |
| 28 </style> |
| 29 <script> |
| 30 function resizeFrame(newsize) { |
| 31 chrome.send("ResizeP13N", [newsize.toString()]); |
| 32 } |
| 33 </script> |
| 34 </head> |
| 35 <body> |
| 36 <div id="sync" class="sidebar"> |
| 37 <table id="titletable" width="200" cellpadding="0" cellspacing="0" |
| 38 style="display:none"> |
| 39 <tr> |
| 40 <td id="messagetitle" align="left" class="section-title"> |
| 41 </td> |
| 42 <td align="right"> |
| 43 <a href="#" onclick="resizeFrame(0);"> |
| 44 <img id="greenclose" src="close.png"/> |
| 45 </a> |
| 46 </td> |
| 47 </tr> |
| 48 </table> |
| 49 <div id="syncContainer"></div> |
| 50 </div> |
| 51 <script> |
| 52 /* Return a DOM element with tag name |elem| and attributes |attrs|. */ |
| 53 function DOM(elem, attrs) { |
| 54 var elem = document.createElement(elem); |
| 55 for (var attr in attrs) { |
| 56 elem[attr] = attrs[attr]; |
| 57 } |
| 58 return elem; |
| 59 } |
| 60 |
| 61 function renderSyncMessage(message) { |
| 62 var section = document.getElementById('sync'); |
| 63 var container = document.getElementById('syncContainer'); |
| 64 var title = document.getElementById('messagetitle'); |
| 65 var titletable = document.getElementById('titletable'); |
| 66 container.innerHTML = ''; |
| 67 title.innerHTML = ''; |
| 68 titletable.style.display = "none"; |
| 69 section.style.display = "block"; |
| 70 |
| 71 /* Set the sync section background color. */ |
| 72 if (message.msgtype == "error") { |
| 73 section.style.backgroundColor = "#f8d1ca"; |
| 74 } else if (message.msgtype == "presynced") { |
| 75 section.style.backgroundColor = "#e0f8ca"; |
| 76 } else { |
| 77 section.style.backgroundColor = "#e1ecfe"; |
| 78 } |
| 79 |
| 80 if (message.msgtype != "synced") { |
| 81 /* Any message except the status normal / synced to |
| 82 message requires extra markup for a title, close button, |
| 83 and links. */ |
| 84 var titletxt = document.createTextNode(message.title); |
| 85 title.appendChild(titletxt); |
| 86 titletable.style.display = "block"; |
| 87 } |
| 88 |
| 89 /* The main message of the sync section. */ |
| 90 var txt = DOM('p'); |
| 91 txt.style.margin = 0; |
| 92 txt.appendChild(document.createTextNode(message.msg)); |
| 93 container.appendChild(txt); |
| 94 |
| 95 /* If we should show a link, create the href. */ |
| 96 if (message.linktext) { |
| 97 var link = DOM('a', { href:"#", title: message.linktext}); |
| 98 link.onclick = function(tt) { |
| 99 return function() { |
| 100 chrome.send("SyncLinkClicked", [tt]); |
| 101 return false; |
| 102 } |
| 103 } (message.title); |
| 104 |
| 105 /* Tie it together. */ |
| 106 link.appendChild(document.createTextNode(message.linktext)); |
| 107 container.appendChild(link); |
| 108 } |
| 109 |
| 110 /* Tell our container to resize to fit us appropriately. */ |
| 111 resizeFrame(document.body.scrollHeight); |
| 112 } |
| 113 |
| 114 chrome.send("GetSyncMessage"); |
| 115 </script> |
| 116 </body> |
| 117 </html> |
OLD | NEW |