OLD | NEW |
(Empty) | |
| 1 /** |
| 2 * Convert a state and time into a nice styled chunk of HTML. |
| 3 */ |
| 4 function renderState(state, time) { |
| 5 var now = new Date().getTime(); |
| 6 var diff = Math.round((time.getTime() - now) / 1000); |
| 7 var str = (diff == 0) ? |
| 8 "now" : |
| 9 Math.abs(diff) + " seconds " + (diff > 0 ? "from now" : "ago"); |
| 10 var col = (state == "active") ? |
| 11 "#009900" : |
| 12 "#990000"; |
| 13 return "<b style='color: " + col + "'>" + state + "</b> " + str; |
| 14 }; |
| 15 |
| 16 /** |
| 17 * Creates DOM and injects a rendered state into the page. |
| 18 */ |
| 19 function renderItem(state, time, parent) { |
| 20 var dom_item = document.createElement('li'); |
| 21 dom_item.innerHTML = renderState(state, time); |
| 22 parent.appendChild(dom_item); |
| 23 }; |
| 24 |
| 25 // Store previous state so we can show deltas. This is important |
| 26 // because the API currently doesn't fire idle messages, and we'd |
| 27 // like to keep track of last time we went idle. |
| 28 var laststate = null; |
| 29 var laststatetime = null; |
| 30 |
| 31 /** |
| 32 * Checks the current state of the browser. |
| 33 */ |
| 34 function checkState() { |
| 35 threshold = parseInt(document.querySelector('#idle-threshold').value); |
| 36 var dom_threshold = document.querySelector('#idle-set-threshold'); |
| 37 dom_threshold.innerText = threshold; |
| 38 |
| 39 // Request the state based off of the user-supplied threshold. |
| 40 chrome.idle.queryState(threshold, function(state) { |
| 41 var time = new Date(); |
| 42 if (laststate != state) { |
| 43 laststate = state; |
| 44 laststatetime = time; |
| 45 } |
| 46 |
| 47 // Keep rendering results so we get a nice "seconds elapsed" view. |
| 48 var dom_result = document.querySelector('#idle-state'); |
| 49 dom_result.innerHTML = renderState(state, time); |
| 50 var dom_laststate = document.querySelector('#idle-laststate'); |
| 51 dom_laststate.innerHTML = renderState(laststate, laststatetime); |
| 52 }); |
| 53 }; |
| 54 |
| 55 var dom_history = document.querySelector('#idle-history'); |
| 56 |
| 57 /** |
| 58 * Render the data gathered by the background page - should show a log |
| 59 * of "active" states. No events are fired upon idle. |
| 60 */ |
| 61 function renderHistory() { |
| 62 dom_history.innerHTML = ""; |
| 63 var history_log = chrome.extension.getBackgroundPage().history_log; |
| 64 for (var i = 0; i < history_log.length; i++) { |
| 65 var data = history_log[i]; |
| 66 renderItem(data['state'], data['time'], dom_history); |
| 67 } |
| 68 }; |
| 69 |
| 70 |
| 71 document.addEventListener('DOMContentLoaded', function() { |
| 72 // Check every second (even though this is overkill - minimum idle |
| 73 // threshold is 15 seconds) so that the numbers appear to be counting up. |
| 74 checkState(); |
| 75 window.setInterval(checkState, 1000); |
| 76 |
| 77 // Check every second (see above). |
| 78 renderHistory(); |
| 79 window.setInterval(renderHistory, 1000); |
| 80 }); |
OLD | NEW |