Chromium Code Reviews| Index: chrome/common/extensions/docs/examples/api/idle/idle_simple/history.js |
| diff --git a/chrome/common/extensions/docs/examples/api/idle/idle_simple/history.js b/chrome/common/extensions/docs/examples/api/idle/idle_simple/history.js |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..bad0c26e3d930612934ada44191033b851e88572 |
| --- /dev/null |
| +++ b/chrome/common/extensions/docs/examples/api/idle/idle_simple/history.js |
| @@ -0,0 +1,77 @@ |
| +/** |
| + * Convert a state and time into a nice styled chunk of HTML. |
| + */ |
| +function renderState(state, time) { |
| + var now = new Date().getTime(); |
| + var diff = Math.round((time.getTime() - now) / 1000); |
| + var str = (diff == 0) ? |
| + "now" : |
| + Math.abs(diff) + " seconds " + (diff > 0 ? "from now" : "ago"); |
| + var col = (state == "active") ? |
| + "#009900" : |
| + "#990000"; |
| + return "<b style='color: " + col + "'>" + state + "</b> " + str; |
| +}; |
| + |
| +/** |
| + * Creates DOM and injects a rendered state into the page. |
| + */ |
| +function renderItem(state, time, parent) { |
| + var dom_item = document.createElement('li'); |
| + dom_item.innerHTML = renderState(state, time); |
| + parent.appendChild(dom_item); |
| +}; |
| + |
| +// Store previous state so we can show deltas. This is important |
| +// because the API currently doesn't fire idle messages, and we'd |
| +// like to keep track of last time we went idle. |
| +var laststate = null; |
| +var laststatetime = null; |
| + |
| +/** |
| + * Checks the current state of the browser. |
| + */ |
| +function checkState() { |
| + threshold = parseInt(document.querySelector('#idle-threshold').value); |
| + var dom_threshold = document.querySelector('#idle-set-threshold'); |
| + dom_threshold.innerText = threshold; |
| + |
| + // Request the state based off of the user-supplied threshold. |
| + chrome.idle.queryState(threshold, function(state) { |
| + var time = new Date(); |
| + if (laststate != state) { |
| + laststate = state; |
| + laststatetime = time; |
| + } |
| + |
| + // Keep rendering results so we get a nice "seconds elapsed" view. |
| + var dom_result = document.querySelector('#idle-state'); |
| + dom_result.innerHTML = renderState(state, time); |
| + var dom_laststate = document.querySelector('#idle-laststate'); |
| + dom_laststate.innerHTML = renderState(laststate, laststatetime); |
| + }); |
| +}; |
| + |
| +// Check every second (even though this is overkill - minimum idle |
| +// threshold is 15 seconds) so that the numbers appear to be counting up. |
| +checkState(); |
| +window.setInterval(checkState, 1000); |
|
Mike West
2012/01/27 16:06:32
You'll need to pull these out into a DOMContentLoa
|
| + |
| +var dom_history = document.querySelector('#idle-history'); |
| + |
| +/** |
| + * Render the data gathered by the background page - should show a log |
| + * of "active" states. No events are fired upon idle. |
| + */ |
| +function renderHistory() { |
| + dom_history.innerHTML = ""; |
| + var history_log = chrome.extension.getBackgroundPage().history_log; |
| + for (var i = 0; i < history_log.length; i++) { |
| + var data = history_log[i]; |
| + renderItem(data['state'], data['time'], dom_history); |
| + } |
| +}; |
| + |
| +// Check every second (see above). |
| +renderHistory(); |
| +window.setInterval(renderHistory, 1000); |
|
Mike West
2012/01/27 16:06:32
These too.
|