| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <!-- | 2 <!-- |
| 3 * Copyright (c) 2010 The Chromium Authors. All rights reserved. Use of this | 3 * Copyright (c) 2010 The Chromium Authors. All rights reserved. Use of this |
| 4 * source code is governed by a BSD-style license that can be found in the | 4 * source code is governed by a BSD-style license that can be found in the |
| 5 * LICENSE file. | 5 * LICENSE file. |
| 6 --> | 6 --> |
| 7 <html> | 7 <html> |
| 8 <head> | 8 <head> |
| 9 <style> | 9 <style> |
| 10 body { | 10 body { |
| 11 width: 100%; | 11 width: 100%; |
| 12 font: 13px Arial; | 12 font: 13px Arial; |
| 13 } | 13 } |
| 14 </style> | 14 </style> |
| 15 <script> | 15 <script src="history.js"></script> |
| 16 /** | |
| 17 * Convert a state and time into a nice styled chunk of HTML. | |
| 18 */ | |
| 19 function renderState(state, time) { | |
| 20 var now = new Date().getTime(); | |
| 21 var diff = Math.round((time.getTime() - now) / 1000); | |
| 22 var str = (diff == 0) ? | |
| 23 "now" : | |
| 24 Math.abs(diff) + " seconds " + (diff > 0 ? "from now" : "ago"); | |
| 25 var col = (state == "active") ? | |
| 26 "#009900" : | |
| 27 "#990000"; | |
| 28 return "<b style='color: " + col + "'>" + state + "</b> " + str; | |
| 29 }; | |
| 30 | |
| 31 /** | |
| 32 * Creates DOM and injects a rendered state into the page. | |
| 33 */ | |
| 34 function renderItem(state, time, parent) { | |
| 35 var dom_item = document.createElement('li'); | |
| 36 dom_item.innerHTML = renderState(state, time); | |
| 37 parent.appendChild(dom_item); | |
| 38 }; | |
| 39 </script> | |
| 40 </head> | 16 </head> |
| 41 <body> | 17 <body> |
| 42 <h1>Idle API Demonstration</h1> | 18 <h1>Idle API Demonstration</h1> |
| 43 <h2>Current state</h2> | 19 <h2>Current state</h2> |
| 44 <p> | 20 <p> |
| 45 Idle threshold: | 21 Idle threshold: |
| 46 <select id="idle-threshold"> | 22 <select id="idle-threshold"> |
| 47 <option selected value="15">15</option> | 23 <option selected value="15">15</option> |
| 48 <option value="30">30</option> | 24 <option value="30">30</option> |
| 49 <option value="60">60</option> | 25 <option value="60">60</option> |
| 50 </select> | 26 </select> |
| 51 <p> | 27 <p> |
| 52 <code>chrome.idle.queryState(<strong id="idle-set-threshold"></strong>, ..
.);</code> - | 28 <code>chrome.idle.queryState(<strong id="idle-set-threshold"></strong>, ..
.);</code> - |
| 53 <span id="idle-state"></span> | 29 <span id="idle-state"></span> |
| 54 </p> | 30 </p> |
| 55 <p> | 31 <p> |
| 56 Last state change: <span id="idle-laststate"></span> | 32 Last state change: <span id="idle-laststate"></span> |
| 57 </p> | 33 </p> |
| 58 <script> | |
| 59 // Store previous state so we can show deltas. This is important | |
| 60 // because the API currently doesn't fire idle messages, and we'd | |
| 61 // like to keep track of last time we went idle. | |
| 62 var laststate = null; | |
| 63 var laststatetime = null; | |
| 64 | |
| 65 /** | |
| 66 * Checks the current state of the browser. | |
| 67 */ | |
| 68 function checkState() { | |
| 69 threshold = parseInt(document.querySelector('#idle-threshold').value); | |
| 70 var dom_threshold = document.querySelector('#idle-set-threshold'); | |
| 71 dom_threshold.innerText = threshold; | |
| 72 | |
| 73 // Request the state based off of the user-supplied threshold. | |
| 74 chrome.idle.queryState(threshold, function(state) { | |
| 75 var time = new Date(); | |
| 76 if (laststate != state) { | |
| 77 laststate = state; | |
| 78 laststatetime = time; | |
| 79 } | |
| 80 | |
| 81 // Keep rendering results so we get a nice "seconds elapsed" view. | |
| 82 var dom_result = document.querySelector('#idle-state'); | |
| 83 dom_result.innerHTML = renderState(state, time); | |
| 84 var dom_laststate = document.querySelector('#idle-laststate'); | |
| 85 dom_laststate.innerHTML = renderState(laststate, laststatetime); | |
| 86 }); | |
| 87 }; | |
| 88 | |
| 89 // Check every second (even though this is overkill - minimum idle | |
| 90 // threshold is 15 seconds) so that the numbers appear to be counting up. | |
| 91 checkState(); | |
| 92 window.setInterval(checkState, 1000); | |
| 93 </script> | |
| 94 | 34 |
| 95 <h2>Idle changes:</h2> | 35 <h2>Idle changes:</h2> |
| 96 <ul id='idle-history'></ul> | 36 <ul id='idle-history'></ul> |
| 97 <script> | |
| 98 var dom_history = document.querySelector('#idle-history'); | |
| 99 | |
| 100 /** | |
| 101 * Render the data gathered by the background page - should show a log | |
| 102 * of "active" states. No events are fired upon idle. | |
| 103 */ | |
| 104 function renderHistory() { | |
| 105 dom_history.innerHTML = ""; | |
| 106 var history_log = chrome.extension.getBackgroundPage().history_log; | |
| 107 for (var i = 0; i < history_log.length; i++) { | |
| 108 var data = history_log[i]; | |
| 109 renderItem(data['state'], data['time'], dom_history); | |
| 110 } | |
| 111 }; | |
| 112 | |
| 113 // Check every second (see above). | |
| 114 renderHistory(); | |
| 115 window.setInterval(renderHistory, 1000); | |
| 116 </script> | |
| 117 </body> | 37 </body> |
| 118 </html> | 38 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 9289057:
Changing manifest to v2 extension samples (Closed)
Base URL: http://git.chromium.org/chromium/src.git@master